Fix/cfe 281 expand unsupported assets

CHANGELOG.md

@@ -48,6 +48,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#725](https://github.com/alleslabs/celatone-frontend/pull/725) Adjust unsupported asset display in account and contract detail
 - [#728](https://github.com/alleslabs/celatone-frontend/pull/728) Support tx events for cosmos sdk 0.50
 - [#729](https://github.com/alleslabs/celatone-frontend/pull/729) Add missing title for block transactions
 - [#726](https://github.com/alleslabs/celatone-frontend/pull/726) Add missing title for instantiate permission and adjust contract menu in nav bar

src/lib/components/CustomTab.tsx

@@ -33,6 +33,7 @@ export const CustomTab = ({
       lineHeight="24px"
       letterSpacing="0.4px"
       variant="ghost-gray"
+      minW="fit-content"
       mb={0}
       sx={{
         "&[aria-selected=true]": {

src/lib/components/asset/AssetSectionOverview.tsx

@@ -0,0 +1,84 @@
+import { Flex, Grid, GridItem, Text } from "@chakra-ui/react";
+
+import { ViewMore } from "../table";
+import type { Option, TokenWithValue, USD } from "lib/types";
+
+import { SupportedAssetSectionContent } from "./SupportedAssetSectionContent";
+import { SupportedAssetTitle } from "./SupportedAssetTitle";
+import { UnsupportedAssetSectionContent } from "./UnsupportedAssetSectionContent";
+import { UnsupportedAssetTitle } from "./UnsupportedAssetTitle";
+
+const MAX_SUPPORTED_ASSETS_SHOW = 6;
+const MAX_UNSUPPORTED_ASSETS_SHOW = 3;
+
+interface AssetSectionOverviewProps {
+  isAccount: boolean;
+  supportedAssets: TokenWithValue[];
+  totalSupportedAssetsValue: Option<USD<Big>>;
+  unsupportedAssets: TokenWithValue[];
+  onViewMore: () => void;
+}
+
+export const AssetSectionOverview = ({
+  isAccount,
+  supportedAssets,
+  totalSupportedAssetsValue,
+  unsupportedAssets,
+  onViewMore,
+}: AssetSectionOverviewProps) => {
+  if (!supportedAssets.length && !unsupportedAssets.length)
+    return (
+      <Text variant="body2" color="text.dark">
+        This {isAccount ? "address" : "contract"} does not hold any assets
+      </Text>
+    );
+
+  return (
+    <Grid gridTemplateColumns={{ base: "1fr", xl: "2fr 1fr" }} gridGap={4}>
+      <GridItem border="1px solid" borderColor="gray.700" borderRadius="8px">
+        <Flex direction="column" justifyContent="space-between" h="full">
+          <Flex direction="column">
+            <SupportedAssetTitle
+              supportedAssets={supportedAssets}
+              totalSupportedAssetsValue={totalSupportedAssetsValue}
+            />
+            <SupportedAssetSectionContent
+              isAccount={isAccount}
+              supportedAssets={supportedAssets.slice(
+                0,
+                MAX_SUPPORTED_ASSETS_SHOW
+              )}
+              onViewMore={onViewMore}
+            />
+          </Flex>
+          {onViewMore && supportedAssets.length > MAX_SUPPORTED_ASSETS_SHOW && (
+            <ViewMore
+              onClick={onViewMore}
+              borderRadius="0px 0px 8px 8px"
+              minH="48px"
+            />
+          )}
+        </Flex>
+      </GridItem>
+      <GridItem border="1px solid" borderColor="gray.700" borderRadius="8px">
+        <UnsupportedAssetTitle unsupportedAssets={unsupportedAssets} />
+        <UnsupportedAssetSectionContent
+          isAccount={isAccount}
+          unsupportedAssets={unsupportedAssets.slice(
+            0,
+            MAX_UNSUPPORTED_ASSETS_SHOW
+          )}
+          onViewMore={onViewMore}
+        />
+        {onViewMore &&
+          unsupportedAssets.length > MAX_UNSUPPORTED_ASSETS_SHOW && (
+            <ViewMore
+              onClick={onViewMore}
+              borderRadius="0px 0px 8px 8px"
+              minH="48px"
+            />
+          )}
+      </GridItem>
+    </Grid>
+  );
+};

src/lib/components/asset/SupportedAssetSectionContent.tsx

@@ -0,0 +1,47 @@
+import { Flex, Grid, Text } from "@chakra-ui/react";
+
+import { TokenCard } from "lib/components/token";
+import type { TokenWithValue } from "lib/types";
+
+interface SupportedAssetSectionContentProps {
+  supportedAssets: TokenWithValue[];
+  isAccount?: boolean;
+  onViewMore?: () => void;
+}
+
+export const SupportedAssetSectionContent = ({
+  supportedAssets,
+  isAccount = false,
+  onViewMore,
+}: SupportedAssetSectionContentProps) => {
+  if (!supportedAssets.length)
+    return (
+      <Flex
+        w="full"
+        alignItems="center"
+        justifyContent="center"
+        h="calc(100% - 45px)"
+        minH={20}
+      >
+        <Text variant="body2" color="text.dark">
+          This {isAccount ? "address" : "contract"} does not hold any supported
+          assets
+        </Text>
+      </Flex>
+    );
+
+  return (
+    <Grid
+      p={4}
+      gridGap={4}
+      gridTemplateColumns={{
+        base: "1 fr",
+        md: onViewMore ? "repeat(3, 1fr)" : "repeat(4, 1fr)",
+      }}
+    >
+      {supportedAssets.map((asset) => (
+        <TokenCard key={asset.denom} token={asset} minW="full" />
+      ))}
+    </Grid>
+  );
+};

src/lib/components/asset/SupportedAssetTitle.tsx

@@ -0,0 +1,49 @@
+import { Flex, Heading } from "@chakra-ui/react";
+
+import { TableTitle } from "../table";
+import { useMobile } from "lib/app-provider";
+import type { Option, TokenWithValue, USD } from "lib/types";
+import { formatPrice } from "lib/utils";
+
+interface SupportedAssetTitleProps {
+  supportedAssets: TokenWithValue[];
+  totalSupportedAssetsValue: Option<USD<Big>>;
+}
+
+export const SupportedAssetTitle = ({
+  supportedAssets,
+  totalSupportedAssetsValue,
+}: SupportedAssetTitleProps) => {
+  const isMobile = useMobile();
+  const isZeroValue =
+    !totalSupportedAssetsValue || totalSupportedAssetsValue.eq(0);
+
+  return (
+    <Flex
+      w="full"
+      bg="gray.900"
+      py={2}
+      px={4}
+      borderRadius="8px 8px 0px 0px"
+      justifyContent="space-between"
+    >
+      <TableTitle
+        title="Supported Assets"
+        count={supportedAssets.length}
+        mb={0}
+      />
+      {!isMobile && (
+        <Heading
+          mt={1}
+          as="h6"
+          variant="h6"
+          color={isZeroValue ? "text.dark" : "text.main"}
+        >
+          {totalSupportedAssetsValue
+            ? formatPrice(totalSupportedAssetsValue)
+            : "N/A"}
+        </Heading>
+      )}
+    </Flex>
+  );
+};

src/lib/components/asset/UnsupportedAssetSectionContent.tsx

@@ -0,0 +1,48 @@
+import { Flex, Grid, Text } from "@chakra-ui/react";
+
+import { UnsupportedToken } from "../token";
+import type { TokenWithValue } from "lib/types";
+
+interface UnsupportedAssetSectionContentProps {
+  unsupportedAssets: TokenWithValue[];
+  isAccount?: boolean;
+  onViewMore?: () => void;
+}
+
+export const UnsupportedAssetSectionContent = ({
+  unsupportedAssets,
+  onViewMore,
+  isAccount = false,
+}: UnsupportedAssetSectionContentProps) => {
+  if (!unsupportedAssets.length)
+    return (
+      <Flex
+        w="full"
+        alignItems="center"
+        justifyContent="center"
+        h="calc(100% - 45px)"
+        minH={20}
+      >
+        <Text variant="body2" color="text.dark">
+          This {isAccount ? "address" : "contract"} does not hold any
+          unsupported assets
+        </Text>
+      </Flex>
+    );
+
+  return (
+    <Flex direction="column" gap={5} p={4}>
+      <Grid
+        gridGap={4}
+        gridTemplateColumns={{
+          base: "1 fr",
+          md: onViewMore ? "1fr" : "repeat(2, 1fr)",
+        }}
+      >
+        {unsupportedAssets.map((asset) => (
+          <UnsupportedToken key={asset.denom} token={asset} />
+        ))}
+      </Grid>
+    </Flex>
+  );
+};

src/lib/components/asset/UnsupportedAssetTitle.tsx

@@ -0,0 +1,20 @@
+import { Flex } from "@chakra-ui/react";
+
+import { TableTitle } from "../table";
+import type { TokenWithValue } from "lib/types";
+
+interface UnsupportedAssetTitleProps {
+  unsupportedAssets: TokenWithValue[];
+}
+
+export const UnsupportedAssetTitle = ({
+  unsupportedAssets,
+}: UnsupportedAssetTitleProps) => (
+  <Flex w="full" bg="gray.900" py={2} px={4} borderRadius="8px 8px 0px 0px">
+    <TableTitle
+      title="Unsupported Assets"
+      count={unsupportedAssets.length}
+      mb={0}
+    />
+  </Flex>
+);