增加nft列表的展示和信息获取
This commit is contained in:
cebgcontract
parent
a33e7e59f4
commit
7590922040
@ -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": [
|
||||
{
|
||||
"__id__": 3
|
||||
}
|
||||
],
|
||||
"_children": [],
|
||||
"_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": "",
|
||||
|
||||
@ -24,10 +24,14 @@
|
||||
}
|
||||
],
|
||||
"_active": true,
|
||||
"_level": 4,
|
||||
"_components": [],
|
||||
"_prefab": {
|
||||
"_level": 1,
|
||||
"_components": [
|
||||
{
|
||||
"__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,
|
||||
"g": 255,
|
||||
"r": 51,
|
||||
"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",
|
||||
"_N$string": "Label",
|
||||
"_fontSize": 20,
|
||||
"_string": "loading",
|
||||
"_N$string": "loading",
|
||||
"_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
|
||||
|
||||
@ -89,6 +89,7 @@ export default class JCWallet {
|
||||
return data
|
||||
}
|
||||
data = initAccount(address, chain)
|
||||
this.data.push(data)
|
||||
return data
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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.
|
||||
*
|
||||
|
||||
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -7,10 +7,12 @@ export default class WalletBase extends cc.Component {
|
||||
|
||||
protected wallet: JCWallet
|
||||
isAlter = false
|
||||
|
||||
start () {
|
||||
onLoad(): void {
|
||||
this.wallet = new JCWallet()
|
||||
}
|
||||
start () {
|
||||
|
||||
}
|
||||
|
||||
update (dt) {
|
||||
if (this.isAlter) {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user