feat: init useNFT hook and Web3ConfigProvider getNFTMetadata (#23)

* feat: init useNFT hook and Web3ConfigProvider getNFTMetadata * docs: add NFTCarrd zh-CN doc --------- Co-authored-by: yutingzhao1991 <[email protected]>
ant-design · Oct 6, 2023 · 1725d7a · 1725d7a
1 parent 710b175
commit 1725d7a
Show file tree

Hide file tree

Showing 8 changed files with 144 additions and 0 deletions.
diff --git a/packages/web3/src/MockProvider/index.ts b/packages/web3/src/MockProvider/index.ts
@@ -39,4 +39,63 @@ export class MockProvider implements Web3ProviderInterface {
       ),
     );
   };
+
+  getNFTMetadata = async (address: string, id: number) => {
+    return {
+      name: 'OurMetaverseDAO NFT #6',
+      description: 'OurMetaverseDAO NFT, Our Metaverse, Our Dream!',
+      image:
+        'https://api.our-metaverse.xyz/ourms/6_pnghash_0cecc6d080015b34f60bdd253081f36e277ce20ceaf7a6340de3b06d2defad6a_26958469.webp',
+      dna: '3ea2cfd153b8d8505097b81c87c11f5d05097c18',
+      edition: 6,
+      date: 1657097440578,
+      attributes: [
+        {
+          trait_type: 'GENDER',
+          value: 'Girl',
+        },
+        {
+          trait_type: 'BACKGROUND',
+          value: 'Gradient Purple',
+        },
+        {
+          trait_type: 'WEAPON',
+          value: 'Surfboard Yellow',
+        },
+        {
+          trait_type: 'BODY',
+          value: 'White',
+        },
+        {
+          trait_type: 'BACK HAIR',
+          value: 'Chignon White',
+        },
+        {
+          trait_type: 'CLOTHES',
+          value: 'T Shirt Pistachio Green',
+        },
+        {
+          trait_type: 'EYES',
+          value: 'Vertical White And Blue 4',
+        },
+        {
+          trait_type: 'EYEBROWS',
+          value: 'Normal Pink',
+        },
+        {
+          trait_type: 'MOUTH',
+          value: 'Normal Smile Red',
+        },
+        {
+          trait_type: 'FRONT HAIR',
+          value: 'Curtain Bangs White',
+        },
+        {
+          trait_type: 'FRONT ACCESSORY',
+          value: 'Wireless Headset White And Red',
+        },
+      ],
+      compiler: 'HashLips Art Engine',
+    };
+  };
 }
diff --git a/packages/web3/src/NFTCard/demos/simple.tsx b/packages/web3/src/NFTCard/demos/simple.tsx
@@ -0,0 +1,5 @@
+import { NFTCard } from '@ant-design/web3';
+
+export default () => {
+  return <NFTCard address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" id={42} />;
+};
diff --git a/packages/web3/src/NFTCard/index.md b/packages/web3/src/NFTCard/index.md
@@ -0,0 +1,12 @@
+---
+group:
+  title: Components
+---
+
+# NFTCard
+
+Components used to display NFT images more conveniently and simply.
+
+## Simple Usage
+
+<code src="./demos/simple.tsx"></code>
diff --git a/packages/web3/src/NFTCard/index.tsx b/packages/web3/src/NFTCard/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Image } from 'antd';
+import useNFT from '../hooks/useNFT';
+
+export interface NFTCardProps {
+  address: string;
+  id: number;
+}
+
+export const NFTCard: React.FC<NFTCardProps> = ({ address, id }) => {
+  const { metadata } = useNFT(address, id);
+
+  return <Image src={metadata.image} />;
+};
diff --git a/packages/web3/src/NFTCard/index.zh-CN.md b/packages/web3/src/NFTCard/index.zh-CN.md
@@ -0,0 +1,12 @@
+---
+group:
+  title: Components
+---
+
+# NFTCard
+
+更简单地展示 NFT 图片的组件。
+
+## Simple Usage
+
+<code src="./demos/simple.tsx"></code>
diff --git a/packages/web3/src/Web3ConfigProvider/context.ts b/packages/web3/src/Web3ConfigProvider/context.ts
@@ -4,11 +4,26 @@ export interface Account {
   address: string;
 }
 
+export interface NFTMetadata {
+  name?: string;
+  description?: string;
+  image?: string;
+  dna?: string;
+  edition?: number;
+  date?: number;
+  attributes?: {
+    trait_type?: string;
+    value?: string;
+  }[];
+  compiler?: string;
+}
+
 export interface Web3ProviderInterface {
   getAccounts: () => Promise<Account[]>;
   getCurrentAccount: () => Promise<Account | undefined>;
   requestAccounts: () => Promise<Account[]>;
   getQrCodeLink: () => Promise<string>;
+  getNFTMetadata: (address: string, id: number) => Promise<NFTMetadata>;
 }
 
 export interface Web3ConfigProviderProps {

diff --git a/packages/web3/src/hooks/useNFT.ts b/packages/web3/src/hooks/useNFT.ts
@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+import { NFTMetadata } from '@ant-design/web3';
+import useProvider from './useProvider';
+
+export default function useNFT(address: string, id: number) {
+  const [metadata, setMetadata] = useState<NFTMetadata>({});
+  const [error, setError] = useState<Error>();
+  const { provider } = useProvider();
+
+  useEffect(() => {
+    if (provider) {
+      provider
+        .getNFTMetadata(address, id)
+        .then((data) => {
+          setMetadata(data);
+        })
+        .catch((err) => {
+          setError(err);
+        });
+    }
+  }, [address, id, provider]);
+  return {
+    metadata,
+    error,
+  };
+}
diff --git a/packages/web3/src/index.tsx b/packages/web3/src/index.tsx
@@ -3,3 +3,4 @@ export * from './ConnectModal';
 export * from './Web3ConfigProvider';
 export * from './MockProvider';
 export * from './Address';
+export * from './NFTCard';