Merge pull request #157 from ant-design/feat/useNft

feat: 完善 useNFT 文档
ant-design · Dec 4, 2023 · 80e0d8c · 80e0d8c
2 parents b630d15 + 407b27d
commit 80e0d8c
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 2 deletions.
diff --git a/packages/ethereum/src/universal-provider.ts b/packages/ethereum/src/universal-provider.ts
@@ -81,7 +81,10 @@ export class UniversalProvider extends EventEmitter implements UniversalWeb3Prov
     return this.eip1193Provider.getAvaliableWallets();
   };
 
-  getNFTMetadata = async (params: { address: string; tokenId: bigint }): Promise<NFTMetadata> => {
+  getNFTMetadata = async (params: {
+    address: string;
+    tokenId: bigint | number;
+  }): Promise<NFTMetadata> => {
     const provider = new ethers.BrowserProvider(this.eip1193Provider);
     const contract = new ethers.Contract(
       params.address,

diff --git a/packages/web3/src/hooks/index.md b/packages/web3/src/hooks/index.md
@@ -10,8 +10,29 @@ Expose some commonly used Hooks that you can use independently or in conjunction
 
 ## useNFT
 
+Convenient access to NFT metadata.
+
+### Examples
+
 <code src="./demos/useNFT.tsx"></code>
 
+### API
+
+#### Result
+
+| Property | Description | Type |
+| --- | --- | --- |
+| loading | Indicate whether the NFT metadata is currently being loaded. | `boolean` |
+| metadata | An object containing metadata associated with the specified NFT. [NFTMetadata Type](/components/types#nftmetadata) | `NFTMetadata` |
+| error | When an error occurs during the process of fetching metadata, the error property stores the error object. | `Error` |
+
+#### Params
+
+| Property | Description                     | Type               |
+| -------- | ------------------------------- | ------------------ |
+| address  | Required. NFT contract address. | `string`           |
+| tokenId  | Required. NFT token ID.         | `bigint \| number` |
+
 ## useAccount
 
 <code src="./demos/useAccount.tsx"></code>
diff --git a/packages/web3/src/hooks/index.zh-CN.md b/packages/web3/src/hooks/index.zh-CN.md
@@ -10,8 +10,29 @@ order: 2
 
 ## useNFT
 
+方便获取 NFT 的元数据
+
+### 代码演示
+
 <code src="./demos/useNFT.tsx"></code>
 
+### API
+
+#### Result
+
+| 参数 | 描述 | 类型 |
+| --- | --- | --- |
+| loading | 表示当前是否正在加载 NFT 元数据。 | `boolean` |
+| metadata | 包含与指定 NFT 关联的元数据的对象。 [NFTMetadata 类型定义](/components/types#nftmetadata) | `NFTMetadata` |
+| error | 在获取元数据过程中发生错误的时候，error 属性保存错误对象。 | `Error` |
+
+#### Params
+
+| 参数    | 描述                 | 类型               |
+| ------- | -------------------- | ------------------ |
+| address | 必需。NFT 合约地址。 | `string`           |
+| tokenId | 必需。NFT 令牌 ID。  | `bigint \| number` |
+
 ## useAccount
 
 <code src="./demos/useAccount.tsx"></code>
diff --git a/packages/web3/src/hooks/useNFT.ts b/packages/web3/src/hooks/useNFT.ts
@@ -13,7 +13,7 @@ export default function useNFT(address: string, tokenId: bigint) {
       setLoading(true);
       getNFTMetadata({
         address,
-        tokenId,
+        tokenId: BigInt(tokenId),
       })
         .then((data) => {
           setMetadata(data);

diff --git a/packages/web3/src/types/index.md b/packages/web3/src/types/index.md
@@ -43,3 +43,23 @@ This is an enum type that contains the IDs of some commonly used chains. Its val
 | browserIcon | Browser icon | `string` | - | - |
 | browserName | Browser extension name | `string` | - | - |
 | description | Description of browser extension | `string` | - | - |
+
+## NFTMetadata
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| name | Name of the NFT | `string` | - | - |
+| description | Description of the NFT | `string` | - | - |
+| image | Image link of the NFT | `string` | - | - |
+| dna | DNA or genetic encoding of the NFT | `string` | - | - |
+| edition | Version number of the NFT | `number` | - | - |
+| date | Date of the NFT | `number` | - | - |
+| attributes | List of additional attributes of the NFT, including an array of objects with trait_type and value properties. | `Attribute[]` | - | - |
+| compiler | Compiler or tool used to create the NFT | `string` | - | - |
+
+### Attribute
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| trait_type | The type of the attribute representing the characteristic type of the NFT. | `string` | - | - |
+| value | The value of the attribute representing the characteristic of the NFT. | `string` | - | - |
diff --git a/packages/web3/src/types/index.zh-CN.md b/packages/web3/src/types/index.zh-CN.md
@@ -43,3 +43,23 @@ order: 3
 | browserIcon | 浏览器图标 | `string` | - | - |
 | browserName | 浏览器扩展程序名称 | `string` | - | - |
 | description | 浏览器扩展程序的描述 | `string` | - | - |
+
+## NFTMetadata
+
+| 属性 | 描述 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| name | NFT 的名称 | `string` | - | - |
+| description | NFT 的描述 | `string` | - | - |
+| image | NFT 的图像链接 | `string` | - | - |
+| dna | NFT 的 DNA 或基因编码 | `string` | - | - |
+| edition | NFT 的版本号 | `number` | - | - |
+| date | NFT 的日期 | `number` | - | - |
+| attributes | NFT 的附加属性列表。包括 `trait_type` 和 `value` 属性的对象数组 | `Attribute[]` | - | - |
+| compiler | 用于创建 NFT 的编译器或工具 | `string` | - | - |
+
+### Attribute
+
+| 属性       | 描述                            | 类型     | 默认值 | 版本 |
+| ---------- | ------------------------------- | -------- | ------ | ---- |
+| trait_type | 属性的类型，表示 NFT 的特征类型 | `string` | -      | -    |
+| value      | 属性的值，表示 NFT 的特征值     | `string` | -      | -    |