Update nfts drawer tab to match design

trilitech · Oct 7, 2023 · cedbbc1 · cedbbc1
1 parent 5212e5c
commit cedbbc1
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 17 deletions.
diff --git a/src/components/AccountDrawer/AssetsPanel/AssetsPanel.tsx b/src/components/AccountDrawer/AssetsPanel/AssetsPanel.tsx
@@ -70,12 +70,7 @@ export const AssetsPanel: React.FC<{
         </TabPanel>
 
         <TabPanel data-testid="account-card-nfts-tab" height="100%" overflow="hidden">
-          <NFTsGrid
-            nftsByOwner={{ [account.address.pkh]: nfts }}
-            showName={true}
-            columns={3}
-            spacing={5}
-          />
+          <NFTsGrid nftsByOwner={{ [account.address.pkh]: nfts }} columns={3} spacing={5} />
         </TabPanel>
 
         <TabPanel data-testid="account-card-tokens-tab">

diff --git a/src/components/AccountDrawer/AssetsPanel/NFTsGrid.tsx b/src/components/AccountDrawer/AssetsPanel/NFTsGrid.tsx
@@ -1,4 +1,12 @@
-import { AspectRatio, Heading, Image, SimpleGrid, SimpleGridProps } from "@chakra-ui/react";
+import {
+  AspectRatio,
+  Card,
+  CardBody,
+  Heading,
+  Image,
+  SimpleGrid,
+  SimpleGridProps,
+} from "@chakra-ui/react";
 import { every } from "lodash";
 import { FC } from "react";
 import { Link } from "react-router-dom";
@@ -8,10 +16,11 @@ import { NFTBalance } from "../../../types/TokenBalance";
 import { truncate } from "../../../utils/format";
 import { getIPFSurl } from "../../../utils/token/nftUtils";
 import { NoNFTs } from "../../NoItems";
+import colors from "../../../style/colors";
 
 export const NFTsGrid: FC<
-  { nftsByOwner: Record<RawPkh, NFTBalance[] | undefined>; showName?: boolean } & SimpleGridProps
-> = ({ nftsByOwner, showName, ...rest }) => {
+  { nftsByOwner: Record<RawPkh, NFTBalance[] | undefined> } & SimpleGridProps
+> = ({ nftsByOwner, ...rest }) => {
   const noNfts = every(nftsByOwner, nfts => !nfts || nfts.length === 0);
   if (noNfts) {
     return <NoNFTs small />;
@@ -25,14 +34,13 @@ export const NFTsGrid: FC<
           const fallbackUrl = getIPFSurl(nft.displayUri);
           return (
             <Link to={`/nfts/${owner}/${fullId(nft)}`} key={`${owner}:${fullId(nft)}`}>
-              <AspectRatio width="100%" ratio={1}>
-                <Image width="100%" height={40} src={url} fallbackSrc={fallbackUrl} />
-              </AspectRatio>
-              {showName && nft.metadata.name && (
-                <Heading size="sm" mt={3}>
-                  {truncate(nft.metadata.name, 12)}
-                </Heading>
-              )}
+              <Card bg={colors.gray[800]}>
+                <CardBody p="8px">
+                  <AspectRatio width="100%" ratio={1}>
+                    <Image width="100%" height={40} src={url} fallbackSrc={fallbackUrl} />
+                  </AspectRatio>
+                </CardBody>
+              </Card>
             </Link>
           );
         });