opennft-client需要谷歌浏览器或Chromium内核

前期准备注册百度账号以及获取私钥

充值百度开放网络Tip:用户地址下需要有百度开放网络余额才能使用转移资产，查询余额等功能。建议在百度开放网络充值0.1元。充值链接：https://xuper.baidu.com/n/console#/finance/wallet/recharge

插件使用使用帮助二维码

插件安装插件已放置根目录下()

国内加速下载 https://gitee.com/shengjian-tech/opennft-client/raw/master/MakerONE.zip

1，浏览器选择管理扩展程序

2，首先打开开发者模式，然后解压下载的压缩包并选择加载，此时您可以看到浏览器已经安装好该插件了

3，您可以选择插件常驻

插件登录下载私钥到本地之后，打开浏览器插件进入登录页，选择本地私钥，输入安全码登录：

用户首页登录之后跳转到首页，显示目前处于百度开放网络，用户百度开放网络地址，余额。以及功能等。

查询资产余额：

转移资产：

查询交易：

整体设计：登录页本地私钥路径：需要用户选择本地私钥存放路径，读取私钥内容。安全码（可选）（6位数）：根据超级链生成账户的方式可选。开放网络必填。js代码：转换开放网络地址为EVM地址的工具类 addressUtils.js

importbase58from'bs58'import{sha256}from'js-sha256'exportfunctionXchainAddrToEvm(addr){varresult=''try{//判断是否是合约账号;判断合约账户地址仅支持XC11111111111@xuper,xuper后缀，go-sdk有相同问题。if(determineContractAccount(addr)){result=contractAccountToEVMAddress(addr)}elseif(determineContractName(addr)){result=contractNameToEVMAddress(addr)}else{result=xchainAKToEVMAddress(addr)}returnresult}catch(err){console.log(err)}}//判断合约账户地址仅支持XC11111111111@xuper,xuper后缀，go-sdk有相同问题。functiondetermineContractAccount(xchainAddr){if(isAccount(xchainAddr)!=1){returnfalse}returnxchainAddr.indexOf('@xuper')!=-1}constaccountPrefix='XC'functionisAccount(name){if(name==''){return-1}if(name.indexOf(accountPrefix)!=0){return0}varprefix=name.split('@')[0]prefix=prefix.substr(accountPrefix.length)if(!validRawAccount(prefix)){return0}return1}constaccountSize=16functionvalidRawAccount(accountName){if(accountName==''){returnfalse}if(accountName.length!=accountSize){returnfalse}for(vari=0;i<accountSize;i++){if(accountName[i]>='0'&&accountName[i]<='9'){continue}else{returnfalse}}returntrue}constcontractAccountPrefixs='1112'constWord160Length=20functioncontractAccountToEVMAddress(contractAccount){varcontractAccountValid=contractAccount.slice(2,18)varstr=contractAccountPrefixs.concat(contractAccountValid)if(str.length!=Word160Length){thrownewError('slicepassedasaddressshouhave20bytelength')}returnBuffer.from(str).toString('hex').toUpperCase()}constcontractNameMaxSize=16constcontractNameMinSize=4constcontractNameRegex=/^[a-zA-Z_]{1}[0-9a-zA-Z_.]+[0-9a-zA-Z_]$/functiondetermineContractName(xchainAddr){varcontractSize=xchainAddr.lengthif(contractSize>contractNameMaxSize||contractSize<contractNameMinSize){returnfalse}if(!contractNameRegex.test(xchainAddr)){returnfalse}returntrue}constevmAddressFiller='-'constcontractNamePrefixs='1111'functioncontractNameToEVMAddress(contractName){varcontractNameLength=contractName.lengthvarprefixStr=''for(vari=0;i<Word160Length-contractNameLength-4;i++){prefixStr+=evmAddressFiller}contractName=prefixStr+contractNamecontractName=contractNamePrefixs+contractNameif(contractName.length!=Word160Length){thrownewError('slicepassedasaddressshouhave20bytelength')}returnBuffer.from(contractName).toString('hex').toUpperCase()}functionxchainAKToEVMAddress(xchainAddr){varrawAddr=base58.decode(xchainAddr)if(rawAddr.length<21){thrownewError('badaddress')}rawAddr=rawAddr.slice(1,21)returnBuffer.from(rawAddr,'').toString('hex').toUpperCase()}exportfunctionEvmToXchainAddr(addr){//returnaddr,addrType,nilvarresult=''try{varbs=Buffer.from(addr,'hex').toString('ascii')if(bs.length!=Word160Length){thrownewError('slicepassedasaddressshouhave20bytelength')}varevmAddrStrWithPrefix=bs//合约账号if(evmAddrStrWithPrefix.slice(0,4)==contractAccountPrefixs){result=evmAddressToContractAccount(bs)}elseif(evmAddrStrWithPrefix.slice(0,4)==contractNamePrefixs){result=evmAddressToContractName(bs)}else{varbuffer=Buffer.from(addr,'hex')result=evmAddressToXchain(buffer)}returnresult}catch(err){console.log(err)}}functionevmAddressToContractAccount(addr){returnaccountPrefix+addr.slice(4)+'@xuper'}functionevmAddressToContractName(addr){varindex=addr.lastIndexOf(evmAddressFiller)returnaddr.slice(index+1)}functionevmAddressToXchain(addr){varaddTyepe=[]varaddrArray=newUint8Array(addr)addTyepe.push(1)for(vari=0;i<addrArray.length;i++){addTyepe.push(addrArray[i])}varcheckCode=DoubleSha256(addTyepe)varsimpleCheckCode=checkCode.slice(0,4)for(vari=0;i<simpleCheckCode.length;i++){addTyepe.push(simpleCheckCode[i])}returnbase58.encode(addTyepe)}//DoubleSha256执行2次SHA256，这是为了防止SHA256算法被攻破。functionDoubleSha256(data){returnUsingSha256(UsingSha256(data))}//UsingSha256getthehashresultofdatausingSHA256functionUsingSha256(data){returnsha256.array(data)} //需要引入XuperSDK和上面的地址转换工具类importXuperSDK,{Endorsement}from'@xuperchain/xuper-sdk'import{XchainAddrToEvm}from'./addressUtils'//TODO需要通过用户选择的私钥路径，读取出来私钥的内容constprivate=''//安全码constpassword=''//登录后生成账户对象constacc=xsdk.import(password,private) 首页默认首页用户处于开放网络。开放网络为下拉框，默认一个位开放网络。用户可以添加网络。添加网络可以弹框，需要参数：网络名（用户自己输入就行），节点IP（例如：39.156.69.83:37100）,链名：（例如xuperchain), Vue里面开放网络的node需要设置为https://xuper.baidu.com/nodeapi

//默认就有的开放网络，默认开放网络的链名constnode='39.156.69.83:37100'//vue里面设置为https://xuper.baidu.com/nodeapiconstchain='xuper'//连接开放网络时需要加载背书服务，constparams={server:'39.156.69.83:37100',//ip,port//vue里面设置为https://xuper.baidu.com/nodeapifee:'400',//feeendorseServiceCheckAddr:'jknGxa6eyum1JrATWvSJKW3thJ9GKHA9n',//signaddressendorseServiceFeeAddr:'aB2hpHnTBDxko3UoP2BpBZRujwhdcAFoT',//feeaddress}//默认的开放网络SDKclient,后续查询余额，调用合约使用。constxsdk=newXuperSDK({node,chain,plugins:[Endorsement({transfer:params,makeTransaction:params,}),],})//用户新增网络可以生成新的sdkclient并记录，切换网络即切换SDK，新增网络暂时不考虑背书插件，仅传入IP和链名即可constxsdk=newXuperSDK({node,chain,}) 显示用户Address

//用户登录时生成的acc,acc.address即为用的address地址constaddr=acc.address 显示用户余额

//查询登录用户余额//用户超级链账户余额address直接传入上面acc.address即可。constbalance=async(adress)=>{try{constresult=awaitxsdk.getBalance(adress)debug(result.bcs[0].balance)}catch(err){throwerr}} 默认提供三个Action功能，转移NFT。查询NFT数量，查询交易。并提供新增Action操作

点击功能，跳转到功能页。最上面为下拉框，用户可以选择功能，默认为上述三个，并且有一个新增操作。

默认三个功能转移，查询，查询交易

//默认合约名constcontractName='opennft'//默认方法名constmethodName='safeTransferFrom'//默认参数//nft转移发起者，默认取值acc.address，acc.address需要转换，下述为转换好的。//acc.address格式为ULuqhymLPGidfihUb683i2TH4qtaqZ2Dz需要用工具类转换为evm的地址2BEF68690AE24553824BA37C003C2B9067665F81constfrom=XchainAddrToEvm(acc.address)//下述三个参数，需要用户在页面输入，提供三个输入框即可。//nft转移接受者前端输入例如cRsoDDnDX1NjhzJtNKLS3GHudBsgyRouQ也需要转换constto=XchainAddrToEvm('cRsoDDnDX1NjhzJtNKLS3GHudBsgyRouQ')//转移的nfttokenidconstnftTokenID='6'//转移数量constamount='1'//转移NFT转移操作前先查询一下账户余额。是0的话让他去充值。建议最少充值一元。//咱们默认提供的NFT转移，只需要转移着的地址，tokenid，数量。给用户返回交易IDconstTransferNFTEvm=async(toAddr,TokenID,Amount)=>{try{constcontractName=contractNameconstmethodName=methodNameconstdemo=awaitxsdk.invokeSolidityContarct(contractName,methodName,'evm',{from:from,to:to,id:nftTokenID,amount:amount,data:'',},'0',acc)//352cd3f829dded7ad1da7ab3a0c3a8776cd3ec545c617ad499abb2d29459c6ee//交易ID返回给用户debug(xsdk.transactionIdToHex(demo.transaction.txid))constresult=awaitxsdk.postTransaction(demo.transaction,acc)//TODO调用转移操作成功后//TODO调用坤那边的服务端接口解析交易只传输txid，调用接口即可，后续不管。最后给用户返回上面的交易ID就行。debug(result)//err是空证明转移成功，不是就是执行失败。}catch(err){console.log(err)}} 查询自己的NFT余额

//查询NFT余额前端用户选择查询资产余额，需要输入NFTtokenID就行，然后返回余额数量就OK。constqueryNFTBalance=async(tokenID)=>{try{constcontractName='opennft'constmethodName='balanceOf'constargs={account:XchainAddrToEvm(acc.address),id:tokenID,}constdemo=awaitxsdk.invokeSolidityContarct(contractName,methodName,'evm',args,'0',acc)//判断demo.preExecutionTransaction.response.responses的长度是否大于0，大于0取demo.preExecutionTransaction.response.responses[length-1]constlen=demo.preExecutionTransaction.response.responses.lengthif(len>0){conststr=demo.preExecutionTransaction.response.responses[len-1].bodyconstresult=Buffer.from(str,'base64').toString('ascii')//[{\"0\":\"10\"}]result即为[{\"0\":\"10\"}]10即为想要的结果，即对应nft的余额debug(result)}}catch(err){console.log(err)}} 查询交易信息

//查询交易前端用户选择查询交易，让用户输入交易ID，即可，返回交易信息。目前交易信息很少//查询交易constGetTxDetail=async(txID)=>{try{constdemo=awaitxsdk.queryTransaction(Buffer.from(txID,'hex').toString('base64'))if(demo.tx==undefined){//证明此交易链上没有直接报错thrownewError('thistxundefined')}//交易IDvartxID=Buffer.from(demo.tx.txid,'base64').toString('hex')vartxReqJson=JSON.parse(Buffer.from(demo.tx.contract_requests[1].args.input,'base64').toString())varfrom=''varto=''vartokenID=''varamount=''if(demo.tx.contract_requests[1].method_name=='safeTransferFrom'){from=EvmToXchainAddr(txReqJson.from)to=EvmToXchainAddr(txReqJson.to)tokenID=txReqJson.idamount=txReqJson.amount}else{from=demo.tx.initiatortokenID=txReqJson._idamount=txReqJson._initialSupply}//根据tokenID查询tokenid的图片路径供浏览器跳转constcontractName='opennft'constmethodName='getTokenBytes'constargs={_id:tokenID,}constres=awaitxsdk.invokeSolidityContarct(contractName,methodName,'evm',args,'0',acc)constlen=res.preExecutionTransaction.response.responses.lengthif(len>0){varresult=res.preExecutionTransaction.response.responses[len-1].bodyvarresponse=JSON.parse(Buffer.from(result,'base64').toString())varbase64Addr=response[0]._responsevardata=Buffer.from(base64Addr,'base64').toString()vardataJson=JSON.parse(data)}vartimestamp=parseInt(demo.tx.timestamp/1000)//用户查看交易详情，前端显示下述txDetail信息。vartxDetail={txID:txID,from:from,to:to,id:tokenID,amount:amount,timestamp:timestamp,}varnftDetail={link:dataJson.link,name:dataJson.name,hash:dataJson.hash,}//前端展示数据console.log(txDetail)console.log(nftDetail)returntxDetail,nftDetail}catch(err){console.log(err)}} 用户新增action操作。不用再首页展示，只在第三张图的下拉框显示即可。用户新增功能需要传入参数较多（TODO）

//下述，所有参数可设置默认值。用户新增功能时，用户可以设置是否用户输入。，前端不显示，不设置即前端需要输入。//需要传入参数constcontractName='合约名'constmethod='方法名'//调用方法的参数。（前端可选多个）constfrom='';constto='';... 切换账号功能用户点击头像，可以新增账户，即新增一个acc对象，切换账户，即切换acc对象。新增账户也需要指定私钥，安全码(非必须)。（TODO）

//TODO需要通过用户选择的私钥路径，读取出来私钥的内容constprivate=''//安全码constpassword=''//登录后生成账户对象constacc=xsdk.import(password,private)