Merge pull request #736 from alleslabs/fix/bug-bash-assets

Fix/bug bash assets

CHANGELOG.md

@@ -60,6 +60,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#736](https://github.com/alleslabs/celatone-frontend/pull/736) Fix assets related bugs
 - [#735](https://github.com/alleslabs/celatone-frontend/pull/735) Fix nfts related bugs
 - [#734](https://github.com/alleslabs/celatone-frontend/pull/734) Fix search spamming by using debounce
 - [#733](https://github.com/alleslabs/celatone-frontend/pull/733) Fix contract list nullable fields

src/lib/components/asset/SupportedAssetSectionContent.tsx

@@ -19,9 +19,10 @@ export const SupportedAssetSectionContent = ({
       <Flex
         w="full"
         alignItems="center"
-        justifyContent="center"
+        justifyContent={{ base: "flex-start", md: "center" }}
         h="calc(100% - 45px)"
         minH={20}
+        px={4}
       >
         <Text variant="body2" color="text.dark">
           This {isAccount ? "address" : "contract"} does not hold any supported

src/lib/components/asset/UnsupportedAssetSectionContent.tsx

@@ -19,9 +19,10 @@ export const UnsupportedAssetSectionContent = ({
       <Flex
         w="full"
         alignItems="center"
-        justifyContent="center"
+        justifyContent={{ base: "flex-start", md: "center" }}
         h="calc(100% - 45px)"
         minH={20}
+        px={4}
       >
         <Text variant="body2" color="text.dark">
           This {isAccount ? "address" : "contract"} does not hold any

src/lib/components/asset/index.tsx

@@ -1,14 +1,15 @@
 import { Button, Flex, Heading, Text } from "@chakra-ui/react";
+import type Big from "big.js";
 
+import { CustomIcon } from "../icon";
+import { Loading } from "../Loading";
 import { ErrorFetching } from "../state";
+import { TableTitle } from "../table";
 import { trackUseViewJSON } from "lib/amplitude";
 import { useMobile } from "lib/app-provider";
-import { CustomIcon } from "lib/components/icon";
-import { Loading } from "lib/components/Loading";
-import { TableTitle } from "lib/components/table";
 import { useOpenAssetTab } from "lib/hooks";
 import { useBalanceInfos } from "lib/services/balanceService";
-import type { BechAddr } from "lib/types";
+import type { BechAddr, Option, TokenWithValue, USD } from "lib/types";
 import { formatPrice } from "lib/utils";
 
 import { AssetSectionOverview } from "./AssetSectionOverview";
@@ -24,6 +25,43 @@ interface AssetsSectionProps {
   isAccount?: boolean;
 }
 
+const MobileOverview = ({
+  supportedAssets,
+  totalSupportedAssetsValue,
+  unsupportedAssets,
+  hasNoAsset,
+  onViewMore,
+}: {
+  supportedAssets: TokenWithValue[];
+  totalSupportedAssetsValue: Option<USD<Big>>;
+  unsupportedAssets: TokenWithValue[];
+  hasNoAsset: boolean;
+  onViewMore: () => void;
+}) => (
+  <Flex
+    justify="space-between"
+    w="full"
+    bg="gray.900"
+    borderRadius="8px"
+    p={4}
+    opacity={hasNoAsset ? 0.5 : 1}
+    onClick={hasNoAsset ? undefined : onViewMore}
+  >
+    <Flex direction="column" gap={2}>
+      <TableTitle
+        title="Assets"
+        count={supportedAssets.length + unsupportedAssets.length}
+        mb={0}
+      />
+      <UserAssetInfoCard
+        totalSupportedAssetsValue={totalSupportedAssetsValue}
+        helperText="Total Asset Value"
+      />
+    </Flex>
+    <CustomIcon name="chevron-right" color="gray.600" />
+  </Flex>
+);
+
 export const AssetsSection = ({
   address,
   onViewMore,
@@ -42,6 +80,10 @@ export const AssetsSection = ({
     error,
   } = useBalanceInfos(address);
 
+  const isZeroValue =
+    !totalSupportedAssetsValue || totalSupportedAssetsValue.eq(0);
+
+  const hasNoAsset = !supportedAssets.length && !unsupportedAssets.length;
   if (isLoading) return <Loading />;
   if (error) return <ErrorFetching dataName="balances" />;
 
@@ -54,33 +96,19 @@ export const AssetsSection = ({
       width="full"
     >
       {isMobileOverview ? (
-        <Flex
-          justify="space-between"
-          w="full"
-          bg="gray.900"
-          borderRadius="8px"
-          p={4}
-          onClick={onViewMore}
-        >
-          <Flex direction="column" gap={2}>
-            <TableTitle
-              title="Supported Assets"
-              count={supportedAssets.length}
-              mb={0}
-            />
-            <UserAssetInfoCard
-              totalSupportedAssetsValue={totalSupportedAssetsValue}
-              helperText="Total Asset Value"
-            />
-          </Flex>
-          <CustomIcon name="chevron-right" color="gray.600" />
-        </Flex>
+        <MobileOverview
+          supportedAssets={supportedAssets}
+          totalSupportedAssetsValue={totalSupportedAssetsValue}
+          unsupportedAssets={unsupportedAssets}
+          hasNoAsset={hasNoAsset}
+          onViewMore={onViewMore}
+        />
       ) : (
         <>
           <Flex w="full" justifyContent="space-between">
             <TableTitle title="Assets" count={totalData} mb={0} />
             <Button
-              disabled={!supportedAssets.length && !unsupportedAssets.length}
+              isDisabled={hasNoAsset}
               variant="ghost-gray"
               size="sm"
               rightIcon={
@@ -119,7 +147,11 @@ export const AssetsSection = ({
                     <Text variant="body2" color="text.dark">
                       Total Asset Value
                     </Text>
-                    <Heading as="h6" variant="h6" color="text.main">
+                    <Heading
+                      as="h6"
+                      variant="h6"
+                      color={isZeroValue ? "text.dark" : "text.main"}
+                    >
                       {totalSupportedAssetsValue
                         ? formatPrice(totalSupportedAssetsValue)
                         : "N/A"}

src/lib/components/delegations/total-card/TotalCardModal.tsx

@@ -40,17 +40,22 @@ const DelegationTokenCard = ({ token }: { token: TokenWithValue }) => (
   <Flex
     bg="gray.900"
     borderRadius="8px"
-    p="12px 16px"
-    align="center"
-    justify="space-between"
+    p={{ base: 3, md: "12px 16px" }}
+    alignItems={{ base: "flex-start", md: "center" }}
+    justifyContent="space-between"
+    gap={{ base: 1, md: 0 }}
+    direction={{ base: "column", md: "row" }}
   >
     <Flex align="center" gap={2}>
       <TokenImageRender boxSize={6} logo={token.logo} alt={token.denom} />
       <Text variant="body1" fontWeight={700}>
         {getTokenLabel(token.denom, token.symbol)}
       </Text>
     </Flex>
-    <TokenComposition token={token} alignItems="flex-end" />
+    <TokenComposition
+      token={token}
+      alignItems={{ base: "flex-start", md: "flex-end" }}
+    />
   </Flex>
 );
 
@@ -69,7 +74,7 @@ export const TotalCardModal = ({
     returnFocusOnClose={false}
   >
     <ModalOverlay />
-    <ModalContent w="800px" bg="gray.800">
+    <ModalContent w={{ base: "full", md: "800px" }} bg="gray.800" maxW="100vw">
       <ModalHeader>
         <Flex w="full" direction="row" alignItems="center" gap={3}>
           <CustomIcon name="assets-solid" boxSize={5} m={1} color="gray.600" />

src/lib/components/select-contract/ContractListDetail.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex } from "@chakra-ui/react";
+import { Box, Grid, GridItem } from "@chakra-ui/react";
 import { matchSorter } from "match-sorter";
 import { useMemo, useState } from "react";
 
@@ -118,25 +118,29 @@ export const ContractListDetail = ({
 
   return (
     <Box minH="xs">
-      <Flex gap={3} w="full" my={isReadOnly ? 6 : 8}>
-        <InputWithIcon
-          placeholder="Search with Contract Address, Name, or Description"
-          value={searchKeyword}
-          onChange={(e) => setSearchKeyword(e.target.value)}
-          size={{ base: "md", md: "lg" }}
-          amptrackSection="contract-list-item-search"
-        />
-        {!isReadOnly && (
-          <TagSelection
-            result={tagFilter}
-            setResult={setTagFilter}
-            placeholder="No tag selected"
-            label="Filter by tag"
-            boxWidth="400px"
-            creatable={false}
+      <Grid w="full" gap={4} templateColumns="3fr 1fr" my={isReadOnly ? 6 : 8}>
+        <GridItem w="full">
+          <InputWithIcon
+            placeholder="Search with Contract Address, Name, or Description"
+            value={searchKeyword}
+            onChange={(e) => setSearchKeyword(e.target.value)}
+            size={{ base: "md", md: "lg" }}
+            amptrackSection="contract-list-item-search"
           />
+        </GridItem>
+        {!isReadOnly && (
+          <GridItem w="full">
+            <TagSelection
+              result={tagFilter}
+              setResult={setTagFilter}
+              placeholder="No tag selected"
+              label="Filter by tag"
+              boxWidth="400px"
+              creatable={false}
+            />
+          </GridItem>
         )}
-      </Flex>
+      </Grid>
       <ContractListContent
         contractListInfo={contractListInfo}
         filteredContracts={filteredContracts}

src/lib/components/table/bonded/BondedTableMobileCard.tsx

@@ -23,6 +23,8 @@ export const BondedTableMobileCard = ({
     direction="column"
     gap={3}
     w="full"
+    border="1px solid"
+    borderColor="gray.700"
   >
     <ValidatorBadge validator={bondedInfo.validator} />
     <Flex

src/lib/components/token/UnsupportedToken.tsx

@@ -58,7 +58,7 @@ export const UnsupportedToken = ({ token }: { token: TokenWithValue }) => {
           <Text
             variant="body2"
             className={isMobile ? "" : "ellipsis"}
-            wordBreak="break-all"
+            wordBreak="break-word"
             color="text.dark"
           >
             {getTokenLabel(token.denom, token.symbol, !isMobile)}

src/lib/pages/account-details/components/modules/ModuleListsBody.tsx

@@ -31,16 +31,16 @@ export const ModuleListsBody = ({
   }, [keyword, modules]);
 
   if (isLoading) return <Loading />;
+
   if (!modules) return <ErrorFetching dataName="modules" />;
+  if (!modules.length)
+    return <EmptyState message="No modules are on this account." withBorder />;
+
   if (!filteredModules?.length)
     return (
       <EmptyState
-        imageVariant={!keyword ? "empty" : "not-found"}
-        message={
-          !keyword
-            ? "There are no modules on this account."
-            : "No matched modules found"
-        }
+        imageVariant="not-found"
+        message="No matched modules found"
         withBorder
       />
     );

src/lib/pages/account-details/components/nfts/NftsOverview.tsx

@@ -1,4 +1,4 @@
-import { Box, Divider } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 
 import { useMobile } from "lib/app-provider";
 import { NftList } from "lib/components/nft";
@@ -33,16 +33,15 @@ export const NftsOverview = ({
             isLoading={isFetching}
             emptyState={
               <EmptyState
-                message="There are currently no NFTs held by this account."
-                imageVariant="empty"
+                message="No NFTs are held by this account."
+                withBorder
               />
             }
             showCollection
           />
           {onViewMore && !!totalCount && totalCount > 5 && (
             <ViewMore onClick={onViewMore} />
           )}
-          <Divider pt="32px" borderColor="gray.700" opacity={1} />
         </>
       )}
     </Box>

src/lib/pages/account-details/components/resources/ResourceOverviewBody.tsx

@@ -47,10 +47,8 @@ export const ResourceOverviewBody = ({
   if (!resourcesByName.length)
     return (
       <EmptyState
-        imageVariant="empty"
-        message="No resources found"
+        message="No resources are stored on this account."
         withBorder
-        my={6}
       />
     );
 

src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx

@@ -97,8 +97,7 @@ export const InstantiatedContractsTable = observer(
                   <ErrorFetching dataName="contracts" />
                 ) : (
                   <EmptyState
-                    imageVariant="empty"
-                    message="This account did not instantiate any contracts before."
+                    message="No contracts have been instantiated by this account before."
                     withBorder
                   />
                 )

src/lib/pages/account-details/components/tables/OpenedProposalsTable.tsx

@@ -89,7 +89,7 @@ export const OpenedProposalsTable = ({
                 <ErrorFetching dataName="proposals" />
               ) : (
                 <EmptyState
-                  message="This account did not open any proposals before."
+                  message="No proposals have been opened by this account before."
                   withBorder
                 />
               )

src/lib/pages/account-details/components/tables/StoredCodesTable.tsx

@@ -97,9 +97,8 @@ export const StoredCodesTable = observer(
                   <ErrorFetching dataName="codes" />
                 ) : (
                   <EmptyState
+                    message="No codes have been stored by this account before."
                     withBorder
-                    imageVariant="empty"
-                    message="This account did not stored any codes before."
                   />
                 )
               }

src/lib/pages/account-details/components/tables/txs/index.tsx

@@ -30,8 +30,7 @@ const getEmptyStateProps = (selectedFilters: string[]): EmptyStateProps =>
         message: "No past transaction matches found with your input.",
       }
     : {
-        imageVariant: "empty",
-        message: "This account did not submit any transactions before.",
+        message: "No transactions have been submitted by this account before.",
       };
 
 export const TxsTable = ({