Only show NFTs owned by current principal or wallet address on Verify…

… page
dfinity · Aug 24, 2023 · 67af713 · 67af713
1 parent 13a52f2
commit 67af713
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/src/components/NftCard.tsx b/src/components/NftCard.tsx
@@ -17,16 +17,20 @@ export default function NftCard({ nft, principal, time }: NftCardProps) {
  nft.network === 'sepolia' ? 'testnets.' : ''
  }opensea.io/assets/${nft.network}/${nft.contract}/${nft.tokenId}`;
 
+ console.log(metadata); ///
  if (!metadata) {
  return null;
  }
  return (
  <a
- tw="p-5 bg-white rounded-3xl space-y-3 drop-shadow-2xl cursor-pointer block"
+ tw="block p-5 bg-white rounded-3xl space-y-3 drop-shadow-2xl cursor-pointer"
  href={url}
  target="_blank"
  rel="noreferrer"
  >
+ {metadata.tokenType === 'NOT_A_CONTRACT' && (
+ <div tw="text-xl opacity-60">(Not found)</div>
+ )}
  <div tw="flex items-center gap-3">
  {!!metadata.media.length && (
  <img

diff --git a/src/components/WalletArea.tsx b/src/components/WalletArea.tsx
@@ -36,14 +36,20 @@ export default function WalletArea() {
  const [nftUrl, setNftUrl] = useSessionStorage('ic-eth.nft-url', '');
  const [nftResult, setNftResult] = useState<{ nft: Nft } | { err: string }>();
  const [isNftValid, setNftValid] = useState<boolean>();
- const nfts = usePublicNfts();
 
  const address = (ethereum?.selectedAddress as string | undefined) || '';
  const [isAddressVerified, verifyAddress] = useAddressVerified(
  address,
  ethereum,
  );
 
+ const principalString = user?.client.getIdentity().getPrincipal().toString();
+ const nfts = usePublicNfts();
+ const ownedNfts =
+ nfts?.filter(
+ (nft) => nft.principal === principalString || nft.wallet === address,
+ ) || [];
+
  const parseOpenSeaNft = (nftUrl: string) => {
  const groups =
  /^https:\/\/(testnets\.)?opensea\.io\/assets\/(\w+)\/(\w+)\/(\d+)/.exec(
@@ -308,7 +314,7 @@ export default function WalletArea() {
  <>
  <hr tw="my-5" />
  <div tw="text-xl text-gray-600 mb-3">Previously verified:</div>
- <NftList items={nfts} />
+ <NftList items={ownedNfts} />
  </>
  )}
  </>