Update nfts drawer tab to match design

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

Hide file tree

Showing 3 changed files with 19 additions and 19 deletions.
diff --git a/src/components/AccountDrawer/AccountDrawerDisplay.test.tsx b/src/components/AccountDrawer/AccountDrawerDisplay.test.tsx
@@ -151,7 +151,6 @@ describe("<AccountCard />", () => {
     expect(screen.getByTestId("account-card-nfts-tab")).toBeInTheDocument();
     screen.getByTestId("account-card-nfts-tab").click();
     expect(screen.queryAllByTestId("account-card-nfts-tab")).toHaveLength(1);
-    expect(screen.getByText(mockNft.token.metadata?.name as string)).toBeInTheDocument();
   });
 
   it("should display accounts operations under operations tab if any", () => {

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,17 +1,24 @@
-import { AspectRatio, Heading, Image, SimpleGrid, SimpleGridProps } from "@chakra-ui/react";
+import {
+  AspectRatio,
+  Card,
+  CardBody,
+  Image,
+  SimpleGrid,
+  SimpleGridProps,
+} from "@chakra-ui/react";
 import { every } from "lodash";
 import { FC } from "react";
 import { Link } from "react-router-dom";
 import { RawPkh } from "../../../types/Address";
 import { fullId, thumbnailUri } from "../../../types/Token";
 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 +32,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>
           );
         });