Add owned by to NFTs

trilitech · Oct 5, 2023 · 0a440fe · 0a440fe
1 parent ebbde20
commit 0a440fe
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 19 deletions.
diff --git a/src/types/Token.ts b/src/types/Token.ts
@@ -147,10 +147,7 @@ export const fromRaw = (rawToken: RawTokenInfo): Token | null => {
   return null;
 };
 
-export const fullId = (token: Token): string => {
-  // TODO: remove condition when token id becomes 0 for fa1.2
-  return `${token.contract}:${"tokenId" in token ? token.tokenId : "0"}`;
-};
+export const fullId = (token: Token): string => `${token.contract}:${token.tokenId}`;
 
 const defaultTokenName = (asset: Token): string => {
   switch (asset.type) {

diff --git a/src/views/nfts/NFTCard.test.tsx b/src/views/nfts/NFTCard.test.tsx
@@ -1,11 +1,11 @@
 import { render, screen } from "@testing-library/react";
-import { mockNFT } from "../../mocks/factories";
+import { mockImplicitAddress, mockNFT } from "../../mocks/factories";
 import NFTCard from "./NFTCard";
 
 describe("NFTCard", () => {
   it("displays the nft image correctly", () => {
     const nft = mockNFT(0);
-    render(<NFTCard nft={nft} onClick={() => {}} />);
+    render(<NFTCard nft={nft} owner={mockImplicitAddress(0).pkh} onClick={() => {}} />);
 
     expect(screen.getByTestId("nft-image")).toHaveAttribute(
       "src",

diff --git a/src/views/nfts/NFTCard.tsx b/src/views/nfts/NFTCard.tsx
@@ -3,25 +3,44 @@ import { NFTBalance } from "../../types/TokenBalance";
 import { getIPFSurl } from "../../utils/token/nftUtils";
 import { thumbnailUri } from "../../types/Token";
 import colors from "../../style/colors";
+import AddressPill from "../../components/AddressPill/AddressPill";
+import { RawPkh, parsePkh } from "../../types/Address";
 
-const NFTCard: React.FC<{ nft: NFTBalance; onClick: () => void }> = ({ nft, onClick }) => {
+const NFTCard: React.FC<{ owner: RawPkh; nft: NFTBalance; onClick: () => void }> = ({
+  owner,
+  nft,
+  onClick,
+}) => {
   const url = getIPFSurl(thumbnailUri(nft));
   const fallbackUrl = getIPFSurl(nft.displayUri);
   const name = nft.metadata.name;
 
   return (
     <Card cursor="pointer" data-testid="nft-card" onClick={onClick}>
-      <CardBody bg={colors.gray[900]} borderRadius={4}>
+      <CardBody bg={colors.gray[900]} borderRadius="8px">
         <AspectRatio width="100%" ratio={1}>
           <Image data-testid="nft-image" width="100%" src={url} fallbackSrc={fallbackUrl} />
         </AspectRatio>
-        <Heading pt="2" fontSize="sm">
+        {/* TODO: make a separate component to be shared between this and the drawer NFT card */}
+        {Number(nft.balance) > 1 && (
+          <Text
+            data-testid="nft-owned-count"
+            borderRadius="100px"
+            padding="3px 8px"
+            backgroundColor="rgba(33, 33, 33, 0.75)"
+            display="inline"
+            position="absolute"
+            marginTop="-40px"
+            marginLeft="10px"
+          >
+            {"x" + nft.balance}
+          </Text>
+        )}
+        <Heading mt="15px" mb="8px" fontSize="sm">
           {name}
         </Heading>
 
-        <Text pt="2" fontSize="xs" color={colors.gray[400]}>
-          Editions:1
-        </Text>
+        <AddressPill address={parsePkh(owner)} />
       </CardBody>
     </Card>
   );

diff --git a/src/views/nfts/NFTDrawerCard.tsx b/src/views/nfts/NFTDrawerCard.tsx
@@ -25,6 +25,7 @@ import SendNFTForm from "../../components/SendFlow/NFT/FormPage";
 import { useGetOwnedAccount } from "../../utils/hooks/accountHooks";
 import { artifactUri } from "../../types/Token";
 import JsValueWrap from "../../components/AccountDrawer/JsValueWrap";
+import colors from "../../style/colors";
 
 const NFTDrawerCard = ({ nft, ownerPkh }: { nft: NFTBalance; ownerPkh: RawPkh }) => {
   const url = getIPFSurl(artifactUri(nft));
@@ -84,11 +85,11 @@ const NFTDrawerCard = ({ nft, ownerPkh }: { nft: NFTBalance; ownerPkh: RawPkh })
         Send
       </Button>
 
-      <Accordion allowMultiple={true} mt="3">
+      <Accordion allowMultiple mt="3">
         <AttributesAccordionItem nft={nft} style={accordionItemStyle} />
         <PropertiesAccordionItem nft={nft} style={accordionItemStyle} />
 
-        <AccordionItem bg="umami.gray.800" style={accordionItemStyle}>
+        <AccordionItem bg={colors.gray[800]} style={accordionItemStyle}>
           <h2>
             <AccordionButton>
               <Box as="span" flex="1" textAlign="left">

diff --git a/src/views/nfts/NFTGallery.tsx b/src/views/nfts/NFTGallery.tsx
@@ -13,7 +13,12 @@ export const NFTGallery: React.FC<{
     <SimpleGrid columns={4} spacing={4} overflowY="auto">
       {Object.entries(nftsByOwner).flatMap(([owner, nfts]) => {
         return (nfts || []).map(nft => (
-          <NFTCard onClick={() => onSelect(owner, nft)} key={`${owner}:${fullId(nft)}`} nft={nft} />
+          <NFTCard
+            onClick={() => onSelect(owner, nft)}
+            owner={owner}
+            key={`${owner}:${fullId(nft)}`}
+            nft={nft}
+          />
         ));
       })}
     </SimpleGrid>

diff --git a/src/views/nfts/NftsView.tsx b/src/views/nfts/NftsView.tsx
@@ -7,10 +7,14 @@ import { TopBar } from "../../components/TopBar";
 import { useAccountsFilter } from "../../components/useAccountsFilter";
 import { fullId } from "../../types/Token";
 import { useAllNfts } from "../../utils/hooks/assetsHooks";
-import { DrawerTopButtons } from "../home/DrawerTopButtons";
 import NFTDrawerCard from "./NFTDrawerCard";
 import NFTGallery from "./NFTGallery";
 import { useDynamicModal } from "../../components/DynamicModal";
+import { IconAndTextBtn } from "../../components/IconAndTextBtn";
+import { BsArrowBarRight } from "react-icons/bs";
+import colors from "../../style/colors";
+import AddressPill from "../../components/AddressPill/AddressPill";
+import { parsePkh } from "../../types/Address";
 
 const NFTsViewBase = () => {
   const nfts = useAllNfts();
@@ -68,10 +72,22 @@ const NFTsViewBase = () => {
             autoFocus={false}
           >
             <DrawerOverlay />
-            <DrawerContent maxW="594px" bg="umami.gray.900">
+            <DrawerContent maxW="594px" bg={colors.gray[900]}>
               <DrawerBody>
-                <DrawerTopButtons onClose={openNFTsPage} />
-                {drawerNFT && <NFTDrawerCard nft={drawerNFT} ownerPkh={ownerPkh} />}
+                {drawerNFT && (
+                  <>
+                    <Flex
+                      justifyContent="space-between"
+                      color={colors.gray[400]}
+                      cursor="pointer"
+                      p={4}
+                    >
+                      <AddressPill address={parsePkh(ownerPkh)} />
+                      <IconAndTextBtn onClick={openNFTsPage} label="Close" icon={BsArrowBarRight} />
+                    </Flex>
+                    <NFTDrawerCard nft={drawerNFT} ownerPkh={ownerPkh} />
+                  </>
+                )}
               </DrawerBody>
             </DrawerContent>
           </Drawer>