diff --git a/src/types/Token.ts b/src/types/Token.ts index 38eb17a561..9a68b2ef94 100644 --- 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 index 02b1c74597..e31939eade 100644 --- 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( {}} />); + render( {}} />); expect(screen.getByTestId("nft-image")).toHaveAttribute( "src", diff --git a/src/views/nfts/NFTCard.tsx b/src/views/nfts/NFTCard.tsx index 4f13628cef..e010feabbf 100644 --- 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 ( - + - + {/* TODO: make a separate component to be shared between this and the drawer NFT card */} + {Number(nft.balance) > 1 && ( + + {"x" + nft.balance} + + )} + {name} - - Editions:1 - + ); diff --git a/src/views/nfts/NFTDrawerCard.tsx b/src/views/nfts/NFTDrawerCard.tsx index 9de99b48bc..1052d69678 100644 --- 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 - + - +

diff --git a/src/views/nfts/NFTGallery.tsx b/src/views/nfts/NFTGallery.tsx index 58dd8d6db4..935a5efd97 100644 --- a/src/views/nfts/NFTGallery.tsx +++ b/src/views/nfts/NFTGallery.tsx @@ -13,7 +13,12 @@ export const NFTGallery: React.FC<{ {Object.entries(nftsByOwner).flatMap(([owner, nfts]) => { return (nfts || []).map(nft => ( - onSelect(owner, nft)} key={`${owner}:${fullId(nft)}`} nft={nft} /> + onSelect(owner, nft)} + owner={owner} + key={`${owner}:${fullId(nft)}`} + nft={nft} + /> )); })} diff --git a/src/views/nfts/NftsView.tsx b/src/views/nfts/NftsView.tsx index 49cdfa96d5..6bb086839c 100644 --- 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} > - + - - {drawerNFT && } + {drawerNFT && ( + <> + + + + + + + )}