增加nft列表的展示和信息获取

assets/comp/wallet/prefab/NftList.prefab

@@ -24,17 +24,17 @@
     "_level": 1,
     "_components": [
       {
-        "__id__": 13
+        "__id__": 5
       },
       {
-        "__id__": 14
+        "__id__": 6
       },
       {
-        "__id__": 15
+        "__id__": 7
       }
     ],
     "_prefab": {
-      "__id__": 16
+      "__id__": 8
     },
     "_opacity": 255,
     "_color": {
@@ -87,20 +87,16 @@
     "_parent": {
       "__id__": 1
     },
-    "_children": [
+    "_children": [],
-      {
-        "__id__": 3
-      }
-    ],
     "_active": true,
     "_level": 3,
     "_components": [
       {
-        "__id__": 11
+        "__id__": 3
       }
     ],
     "_prefab": {
-      "__id__": 12
+      "__id__": 4
     },
     "_opacity": 255,
     "_color": {
@@ -146,281 +142,6 @@
     "groupIndex": 0,
     "_id": ""
   },
-  {
-    "__type__": "cc.Node",
-    "_name": "OneNFT",
-    "_objFlags": 0,
-    "_parent": {
-      "__id__": 2
-    },
-    "_children": [
-      {
-        "__id__": 4
-      },
-      {
-        "__id__": 7
-      }
-    ],
-    "_active": true,
-    "_level": 4,
-    "_components": [],
-    "_prefab": {
-      "__id__": 10
-    },
-    "_opacity": 255,
-    "_color": {
-      "__type__": "cc.Color",
-      "r": 255,
-      "g": 255,
-      "b": 255,
-      "a": 255
-    },
-    "_contentSize": {
-      "__type__": "cc.Size",
-      "width": 100,
-      "height": 120
-    },
-    "_anchorPoint": {
-      "__type__": "cc.Vec2",
-      "x": 0.5,
-      "y": 0.5
-    },
-    "_position": {
-      "__type__": "cc.Vec3",
-      "x": -175,
-      "y": -60,
-      "z": 0
-    },
-    "_scale": {
-      "__type__": "cc.Vec3",
-      "x": 1,
-      "y": 1,
-      "z": 1
-    },
-    "_rotationX": 0,
-    "_rotationY": 0,
-    "_quat": {
-      "__type__": "cc.Quat",
-      "x": 0,
-      "y": 0,
-      "z": 0,
-      "w": 1
-    },
-    "_skewX": 0,
-    "_skewY": 0,
-    "groupIndex": 0,
-    "_id": ""
-  },
-  {
-    "__type__": "cc.Node",
-    "_name": "New Sprite",
-    "_objFlags": 0,
-    "_parent": {
-      "__id__": 3
-    },
-    "_children": [],
-    "_active": true,
-    "_level": 5,
-    "_components": [
-      {
-        "__id__": 5
-      }
-    ],
-    "_prefab": {
-      "__id__": 6
-    },
-    "_opacity": 255,
-    "_color": {
-      "__type__": "cc.Color",
-      "r": 255,
-      "g": 255,
-      "b": 255,
-      "a": 255
-    },
-    "_contentSize": {
-      "__type__": "cc.Size",
-      "width": 100,
-      "height": 100
-    },
-    "_anchorPoint": {
-      "__type__": "cc.Vec2",
-      "x": 0.5,
-      "y": 0.5
-    },
-    "_position": {
-      "__type__": "cc.Vec3",
-      "x": 0,
-      "y": 10,
-      "z": 0
-    },
-    "_scale": {
-      "__type__": "cc.Vec3",
-      "x": 1,
-      "y": 1,
-      "z": 1
-    },
-    "_rotationX": 0,
-    "_rotationY": 0,
-    "_quat": {
-      "__type__": "cc.Quat",
-      "x": 0,
-      "y": 0,
-      "z": 0,
-      "w": 1
-    },
-    "_skewX": 0,
-    "_skewY": 0,
-    "groupIndex": 0,
-    "_id": ""
-  },
-  {
-    "__type__": "cc.Sprite",
-    "_name": "",
-    "_objFlags": 0,
-    "node": {
-      "__id__": 4
-    },
-    "_enabled": true,
-    "_srcBlendFactor": 770,
-    "_dstBlendFactor": 771,
-    "_spriteFrame": {
-      "__uuid__": "8cdb44ac-a3f6-449f-b354-7cd48cf84061"
-    },
-    "_type": 0,
-    "_sizeMode": 0,
-    "_fillType": 0,
-    "_fillCenter": {
-      "__type__": "cc.Vec2",
-      "x": 0,
-      "y": 0
-    },
-    "_fillStart": 0,
-    "_fillRange": 0,
-    "_isTrimmedMode": true,
-    "_state": 0,
-    "_atlas": null,
-    "_id": ""
-  },
-  {
-    "__type__": "cc.PrefabInfo",
-    "root": {
-      "__id__": 1
-    },
-    "asset": {
-      "__uuid__": "e64be85b-3d9f-4109-8e7d-48847666bf2c"
-    },
-    "fileId": "d60oW7FvtHeYQMK3B9YDtO",
-    "sync": false
-  },
-  {
-    "__type__": "cc.Node",
-    "_name": "idLabel",
-    "_objFlags": 0,
-    "_parent": {
-      "__id__": 3
-    },
-    "_children": [],
-    "_active": true,
-    "_level": 5,
-    "_components": [
-      {
-        "__id__": 8
-      }
-    ],
-    "_prefab": {
-      "__id__": 9
-    },
-    "_opacity": 255,
-    "_color": {
-      "__type__": "cc.Color",
-      "r": 255,
-      "g": 255,
-      "b": 255,
-      "a": 255
-    },
-    "_contentSize": {
-      "__type__": "cc.Size",
-      "width": 48.94,
-      "height": 40
-    },
-    "_anchorPoint": {
-      "__type__": "cc.Vec2",
-      "x": 0,
-      "y": 0.5
-    },
-    "_position": {
-      "__type__": "cc.Vec3",
-      "x": -50,
-      "y": -45,
-      "z": 0
-    },
-    "_scale": {
-      "__type__": "cc.Vec3",
-      "x": 1,
-      "y": 1,
-      "z": 1
-    },
-    "_rotationX": 0,
-    "_rotationY": 0,
-    "_quat": {
-      "__type__": "cc.Quat",
-      "x": 0,
-      "y": 0,
-      "z": 0,
-      "w": 1
-    },
-    "_skewX": 0,
-    "_skewY": 0,
-    "groupIndex": 0,
-    "_id": ""
-  },
-  {
-    "__type__": "cc.Label",
-    "_name": "",
-    "_objFlags": 0,
-    "node": {
-      "__id__": 7
-    },
-    "_enabled": true,
-    "_useOriginalSize": false,
-    "_string": "Label",
-    "_N$string": "Label",
-    "_fontSize": 20,
-    "_lineHeight": 40,
-    "_enableWrapText": true,
-    "_N$file": null,
-    "_isSystemFontUsed": true,
-    "_spacingX": 0,
-    "_batchAsBitmap": false,
-    "_N$horizontalAlign": 0,
-    "_N$verticalAlign": 1,
-    "_N$fontFamily": "Arial",
-    "_N$overflow": 0,
-    "_N$cacheMode": 0,
-    "_id": ""
-  },
-  {
-    "__type__": "cc.PrefabInfo",
-    "root": {
-      "__id__": 1
-    },
-    "asset": {
-      "__uuid__": "e64be85b-3d9f-4109-8e7d-48847666bf2c"
-    },
-    "fileId": "fdPjhkyMBEwZHA5g8nn6Bd",
-    "sync": false
-  },
-  {
-    "__type__": "cc.PrefabInfo",
-    "root": {
-      "__id__": 1
-    },
-    "asset": {
-      "__uuid__": "e64be85b-3d9f-4109-8e7d-48847666bf2c"
-    },
-    "fileId": "d8aF0PaVNDOojtyTIMdXbp",
-    "sync": false
-  },
   {
     "__type__": "cc.Layout",
     "_name": "",

assets/comp/wallet/prefab/OneNFT.prefab

@@ -24,10 +24,14 @@
       }
     ],
     "_active": true,
-    "_level": 4,
+    "_level": 1,
-    "_components": [],
+    "_components": [
-    "_prefab": {
+      {
         "__id__": 8
+      }
+    ],
+    "_prefab": {
+      "__id__": 9
     },
     "_opacity": 255,
     "_color": {
@@ -169,7 +173,7 @@
       "__id__": 1
     },
     "asset": {
-      "__id__": 0
+      "__uuid__": "259e752f-837f-4d16-b21f-3c886e3a7a7e"
     },
     "fileId": "d60oW7FvtHeYQMK3B9YDtO",
     "sync": false
@@ -195,14 +199,14 @@
     "_opacity": 255,
     "_color": {
       "__type__": "cc.Color",
-      "r": 255,
+      "r": 51,
-      "g": 255,
+      "g": 0,
       "b": 255,
       "a": 255
     },
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 48.94,
+      "width": 48.38,
       "height": 40
     },
     "_anchorPoint": {
@@ -213,7 +217,7 @@
     "_position": {
       "__type__": "cc.Vec3",
       "x": -50,
-      "y": -45,
+      "y": -53,
       "z": 0
     },
     "_scale": {
@@ -245,9 +249,9 @@
     },
     "_enabled": true,
     "_useOriginalSize": false,
-    "_string": "Label",
+    "_string": "loading",
-    "_N$string": "Label",
+    "_N$string": "loading",
-    "_fontSize": 20,
+    "_fontSize": 15,
     "_lineHeight": 40,
     "_enableWrapText": true,
     "_N$file": null,
@@ -267,18 +271,34 @@
       "__id__": 1
     },
     "asset": {
-      "__id__": 0
+      "__uuid__": "259e752f-837f-4d16-b21f-3c886e3a7a7e"
     },
     "fileId": "fdPjhkyMBEwZHA5g8nn6Bd",
     "sync": false
   },
+  {
+    "__type__": "bb92dJjUI9LyKmoMkyL9R8O",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "nftIDlabel": {
+      "__id__": 6
+    },
+    "icon": {
+      "__id__": 3
+    },
+    "_id": ""
+  },
   {
     "__type__": "cc.PrefabInfo",
     "root": {
       "__id__": 1
     },
     "asset": {
-      "__id__": 0
+      "__uuid__": "259e752f-837f-4d16-b21f-3c886e3a7a7e"
     },
     "fileId": "d8aF0PaVNDOojtyTIMdXbp",
     "sync": false

assets/comp/wallet/scripts/JCWallet.ts

@@ -89,6 +89,7 @@ export default class JCWallet {
       return data
     }
     data = initAccount(address, chain)
+    this.data.push(data)
     return data
   }
 

assets/comp/wallet/scripts/data/DataModel.ts

@@ -11,13 +11,21 @@ export interface IToken {
 
 export interface INFT {
   address: string
-  tokenId: string
+  index: number
+  tokenId?: string
   image?: string
   name?: string
   desc?: string
   last?: number
 }
 
+export function initNFT(address: string, index: number) {
+  return {
+    address,
+    index
+  }
+}
+
 export interface IAccount {
   address: string
   chain: number

assets/comp/wallet/scripts/standards/ERC721Standard.ts

@@ -86,6 +86,25 @@ export class ERC721Standard {
     });
   };
 
+  getBalance = async (
+    address: string,
+    selectedAddress: string
+  ): Promise<number> => {
+    const contract = new this.web3.eth.Contract(abiERC721, address);
+    return new Promise<number>((resolve, reject) => {
+      contract.methods.balanceOf(
+        selectedAddress).call((error: Error, result: number) => {
+          /* istanbul ignore if */
+          if (error) {
+            reject(error);
+            return;
+          }
+          resolve(result);
+        },
+      );
+    });
+  };
+
   /**
    * Query for tokenURI for a given asset.
    *

assets/comp/wallet/scripts/ui/ListNode.ts

@@ -37,6 +37,7 @@ export default class ListNode extends WalletBase {
       let node = cc.instantiate(this.nftListPreb)
       node.active = false
       node.getComponent('NftList').address = nftData[type]
+      node.getComponent('NftList').type = type
       this.node.addChild(node)
       this.otherNode.set(type, node)
       return node
@@ -52,7 +53,9 @@ export default class ListNode extends WalletBase {
         this.tokenNode.getComponent('TokenList').updateList()
       } else {
         this.tokenNode.active = false
-        this.initOneNftList(type).active = true
+        const nftList = this.initOneNftList(type)
+        nftList.active = true
+        nftList.getComponent('NftList').updateList()
       }
     }
 }

assets/comp/wallet/scripts/ui/NftList.ts

@@ -1,3 +1,5 @@
+import { INFT, initNFT } from "../data/DataModel";
+import JCWallet from "../JCWallet";
 import WalletBase from "./WallerBase";
 
 const {ccclass, property} = cc._decorator;
@@ -12,14 +14,44 @@ export default class NftList extends WalletBase {
     contentNode: cc.Node = null
 
     public address: string = ''
+    public type: string = ''
+
 
     // LIFE-CYCLE CALLBACKS:
 
     // onLoad () {}
 
     start () {
-
+        super.start()
     }
 
+
     // update (dt) {}
+    async updateList() {
+        const account = this.wallet.currentAccount().address
+        const amount = await this.wallet.erc721Standard.getBalance(this.address, account)
+        const nfts = this.wallet.currentAccountData[`${this.type}s`]
+        let refresh = false
+        if (nfts.length !== amount) {
+            refresh = true
+        }
+        this.contentNode.removeAllChildren()
+        if (refresh) {
+            nfts.length = 0
+            for (let i = 0; i < amount; i++) {
+                const nftData = initNFT(this.address, i)
+                nfts.push(nftData)
+                this.addOneNft(nftData, true)
+            }
+        } else {
+            for (let nftData of nfts) {
+                this.addOneNft(nftData, false)
+            }
+        }
+    }
+    addOneNft(data: INFT, refresh: boolean) {
+        let node = cc.instantiate(this.tokenPreb)
+        node.getComponent('OneNFT').init(data, refresh)
+        this.contentNode.addChild(node)
+    }
 }

assets/comp/wallet/scripts/ui/OneNFT.ts

@@ -1,8 +1,13 @@
+import { ZError } from "../common/ZError";
 import { INFT } from "../data/DataModel";
+import JCWallet from "../JCWallet";
+import { GET_JSON } from "../lib/Http";
 import WalletBase from "./WallerBase";
 
 const {ccclass, property} = cc._decorator;
 
+const BASE_TOKEN_URI = 'https://market.cebg.games/api/nft/info/'
+
 @ccclass
 export default class OneNFT extends WalletBase {
 
@@ -13,14 +18,60 @@ export default class OneNFT extends WalletBase {
     icon: cc.Sprite = null;
 
     data: INFT = null
+    addressAccount: string = ''
 
     // LIFE-CYCLE CALLBACKS:
 
     // onLoad () {}
 
     start () {
-
+        super.start()
     }
 
     // update (dt) {}
+    async init(data: INFT, refresh: boolean) {
+        if (!this.wallet) {
+            this.wallet = new JCWallet()
+        }
+        this.addressAccount = this.wallet.currentAccount().address
+        this.data = data
+        try {
+            const tokenId = await this.wallet.erc721Standard.getCollectibleTokenId(
+                this.data.address,
+                this.addressAccount,
+                this.data.index
+            )
+            if (this.data.tokenId !== tokenId) {
+                this.data.tokenId = tokenId
+                refresh = true
+            }
+        } catch (e) {
+            console.log('error fetch tokenId from chain')
+        }
+        
+        if (refresh) {
+            await this.refreshNFTInfo()
+        }
+        this.updateUI()
+    }
+
+    async refreshNFTInfo() {
+        const url = `${BASE_TOKEN_URI}${this.data.tokenId}?t=${Date.now()}`
+        const info: any = await GET_JSON(url)
+        console.log(info)
+        this.data.name = info.name
+        this.data.desc = info.description
+        this.data.image = info.image
+    }
+
+    updateUI() {
+        if (this.data.image) {
+            cc.loader.load(this.data.image, function(err, texture){
+                this.icon.spriteFrame = new cc.SpriteFrame(texture);
+            })
+        }
+        this.nftIDlabel.string = this.data.tokenId
+        
+    }
+
 }

assets/comp/wallet/scripts/ui/WallerBase.ts

@@ -7,10 +7,12 @@ export default class WalletBase extends cc.Component {
 
   protected wallet: JCWallet
   isAlter = false
-
+  onLoad(): void {
-  start () {
     this.wallet = new JCWallet()
   }
+  start () {
+    
+  }
 
   update (dt) {
     if (this.isAlter) {