将英雄上链方法独立出来, 增加可指定目标地址的功能

src/components/chain/BlockChain.js

@@ -132,6 +132,20 @@ export class BlockChain {
     
     return token+suffix
   }
+  /**
+   * 如果是用passport登录的, 直接返回store中的token, 否则调用passport的getAccessToken
+   * @returns 
+   */
+  async passportToken() {
+    if (this.store.walletType == 3) {
+      return this.store.token
+    }
+    if (!this.passportProvider) {
+      return ''
+    }
+    const res = await new PassportWallet().getAccessToken();
+    return res.token
+  }
 
   async logout() {
     if (this.store.walletType != 3 && this.passportProvider) {
@@ -176,4 +190,26 @@ export class BlockChain {
       await this.appendPassport();
     }
   }
+
+  async selectAddress({title, subTitle, targetChainId}) {
+    const initData = {}
+    initData[this.store.walletType] = this.store.address
+    const rewardModal = createModal(WalletSelectModel, {
+      title: title || 'Select Address',
+      message: subTitle || 'Please select the address you want to use',
+      initData: { 1: 'MetaMask', 2: 'OKX Wallet', 3: 'Passport' }
+    });
+    const { errcode, errmsg, walletInstance, provider, accounts } = await rewardModal.show();
+    if (errcode) {
+      console.log(`select address result : ${errmsg}`);
+      throw new Error(errmsg);
+    }
+    targetChainId = targetChainId || cfgChainId;
+    let chainId = await walletInstance.getChainId();
+    if (chainId !== targetChainId) {
+      console.log(`current chain: ${chainId}, want: ${targetChainId}`)
+      chainId = await switchEthereumChain(provider.provider, targetChainId);
+    }
+    return { provider, address: accounts[0] };
+  }
 }

src/components/chain/WalletSelectModel.vue

@@ -3,7 +3,7 @@
     <div class="modal-bg" @click="cancelSelect"></div>
     <div class="modal-content" :class="{ mobile: 'mobile' }">
       <div class="modal-title">
-        <div>Please connect your wallet</div>
+        <div>{{title||'Please connect your wallet'}}</div>
         <img
           src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAfCAYAAACGVs+MAAAAAXNSR0IArs4c6QAAApVJREFUWEe1lj1v01AUht9zEygDA0tYYAIJVWJL3KGtUZyFAQYWggQSqkgkhuQPMDDDHwBRYKIoHaJOSIgBNUlxUoY4KQtiRvwCFopEfA+yG4fE9ce1ayJPubrnffyeDx8CgE8d62ZO0GMiOM+T1XLxnfN/1r/BrnUdOXrkxGXIp7qx8pFMc3gpJ8U3ZpyeCtoAPVg3im+zBBh0h7dBYhvAqWnc37Bpmfp71j1iavnEbEmydq28spUFRID4UVimu2SaX64I2/4KIP8/IELFAZvz+avkiO7vjWvM/BqAyBIiQpyZuaFXtE0XwIXojutM/CoriChxgJvrhvbC0Z0BZAmhKn4MIAuIJOKBACeBSCoeCuAc9LvDOpEIrAkiqq2Viwstau5aVZFz29nrc6+8eD7n/rZeqAH/oSpEWvFIBzyYOAh7Ig/TvLkXP9IBFQgAMsh2wdRYrRQ34yapEkBMTfg1WFVcKQXz0SPSMSu4JOKJAZwLg97oJYCHQdYSaGvNKG7E2T5/rpwC55LZs6oC2AbI/+HyYtpBLRoFpAygID6DYOa6XtHeqDihBBAhzu5yE/AVVYWIBYgSdwrOhv0nbGKqQEQC7PcOqgw7KOcLrRY1rOIgQgHCxIlISomm7hsyaSECAZKKq0zMMCeOAaQVTwuxuBGF5DzM9rA2i9oxmbiul/+16Ayg3xndIcEt/5BJKu5BqUK4AIPO8BaE2PGv5mnFlSAYG3ql1DoC6Fk/ALq4MKPdapdNZ3VWmWgp0vHzXOHMeWJmGvTGh0RYmi0JGYnHOMH5yaQwdWD0HEBjekEy84nf3O+IvyYY+KAbpRsuQLvdzl0oXL4P0DITv9eNknkS28Pufu4eGJJkFcD3pbP8TNO0X38BHAnKrhM25C0AAAAASUVORK5CYII="
           alt="close"
@@ -11,7 +11,7 @@
           @click="cancelSelect"/>
       </div>
       <div class="modal-sub-title">
-        Connect your wallet to start your Counter Fire journey
+        {{subTitle || 'Connect your wallet to start your Counter Fire journey'}}
       </div>
       <div class="modal-body">
         <div
@@ -39,19 +39,29 @@ import { allProviders } from "@/components/chain/BlockChain"
 const props = defineProps({
   visible: ref(Boolean),
   close: Function,
+  title: ref(String),
+  subTitle: ref(String),
+  initData: Object
 });
 
 const currentDatas = computed(() => {
   let list = ALL_PROVIDERS.map((item) => {
     const Provider = allProviders[item.id];
     const installed = new Provider().installed;
+    const initData = props.initData;
+    let current = null;
+    if (initData) {
+      current = initData[item.id];
+    }
+    
+    const tip = installed ? current?.tip || item.tip || '' : "Click to Install";
     return {
       id: item.id,
       name: item.name,
       logo: item.logo,
       installed,
       downloadUrl: item.downloadUrl,
-      tip: installed ? item.tip || "" : "Click to Install",
+      tip,
     };
   });
   
@@ -60,9 +70,10 @@ const currentDatas = computed(() => {
 
 async function selectWallet(id) {
   const Provider = allProviders[id];
-  const { provider, accounts } = await new Provider().web3Provider();
+  const walletInstance = new Provider()
+  const { provider, accounts } = await walletInstance.web3Provider();
   console.log(accounts)
-  hideModal({errcode: 0, provider, wallet: id, accounts});
+  hideModal({errcode: 0, provider, wallet: id, walletInstance, accounts});
 }
 
 
@@ -76,8 +87,9 @@ async function cardClicked(id) {
       return;
     }
     window.open(data.downloadUrl, '_blank');
-  } 
+  } else {
-  await selectWallet(id);
+    await selectWallet(id);
+  }
 }
 
 function cancelSelect() {

src/components/chain/contract/Locker.js

@@ -42,23 +42,9 @@ export class Locker {
     await this.bc.web3Provider.waitForTransaction(res.hash)
     return res.hash
   }
-  // 游戏内资产上链, 用于解锁或铸造
+  
-  // 创世英雄, 普通英雄, 金砖
+  async sendUnlockOrMint(provider, {to, data}) {
-  async unlockOrMintGameNft(nft, tokenIds) {
+    
-    console.log('unlock nft', nft, tokenIds)
-    await this.bc.checkPassportLogin();
-    await this.bc.checkAndChangeChain();
-    const preDatas = {
-      net_id: import.meta.env.VUE_APP_NET_ID,
-      contract_address: nft,
-      tokens: tokenIds.map(tokenId => {return { tokenId }}),
-    }
-    const { errcode, errmsg, trans_req } = await apiUnlockOrMint(preDatas)
-    if (errcode) {
-      throw new Error(errmsg)
-    }
-    const { to, data } = trans_req
-    const web3Provider = this.bc.passportProvider || this.bc.web3Provider
     const txHash = await web3Provider.request({
       method: 'eth_sendTransaction',
       params: [{
@@ -69,4 +55,43 @@ export class Locker {
     console.log(txHash)
     return txHash
   }
+
+  // 游戏内资产上链, 用于解锁或铸造
+  // 创世英雄, 普通英雄, 金砖
+  // imtbl上unlock必须使用passport的provider
+  async unlockOrMintGameNft(nft, tokenIds) {
+    console.log('unlock nft', nft, tokenIds)
+    await this.bc.checkPassportLogin();
+    await this.bc.checkAndChangeChain();
+    const preDatas = {
+      net_id: import.meta.env.VUE_APP_NET_ID,
+      contract_address: nft,
+      tokens: tokenIds.map(tokenId => {return { tokenId }}),
+    }
+    const passportToken = await this.bc.passportToken()
+    const { errcode, errmsg, trans_req } = await apiUnlockOrMint(preDatas, passportToken)
+    if (errcode) {
+      throw new Error(errmsg)
+    }
+    const web3Provider = this.bc.passportProvider || this.bc.web3Provider
+    return this.sendUnlockOrMint(web3Provider, trans_req)
+  }
+  // 游戏内资产上链, 只用于mint
+  // 该方法会显示一个确认弹窗, 由用户选择mint到哪个地址
+  async mintNft(nft, tokenIds) {
+    console.log('mint nft', nft, tokenIds)
+    const { provider, address } = await this.bc.selectAddress()
+    const preDatas = {
+      net_id: import.meta.env.VUE_APP_NET_ID,
+      to: address,
+      contract_address: nft,
+      tokens: tokenIds.map(tokenId => {return { tokenId }}),
+    }
+    const passportToken = await this.bc.passportToken()
+    const { errcode, errmsg, trans_req } = await apiUnlockOrMint(preDatas, passportToken)
+    if (errcode) {
+      throw new Error(errmsg)
+    }
+    return this.sendUnlockOrMint(provider, trans_req)
+  }
 }

src/utils/marketplace.js

@@ -7,8 +7,8 @@ const net_id = import.meta.env.VUE_APP_NET_ID
 
 const toJson = res => res.json();
 
-const httpPost = async (url, data) => {
+const httpPost = async (url, data, token) => {
-  const token = await new BlockChain().token();
+  token = token || await new BlockChain().token();
   let headers = {"Content-Type": "application/json"};
   // let token = token;
   if (token) {
@@ -22,8 +22,8 @@ const httpPost = async (url, data) => {
 }
 
 
-const httpGet = async (url, data) => {
+const httpGet = async (url, data, token) => {
-  const token = await new BlockChain().token();
+  token = token || await new BlockChain().token();
   let headers = {"Content-Type": "application/json"};
   if (token) {
     headers['Authorization'] = `Bearer ${token}`;
@@ -106,7 +106,7 @@ export const nftDetail = async(address, tokenId) => {
   return httpGet(url, {})
 }
 
-export const apiUnlockOrMint = async (data) => {
+export const apiUnlockOrMint = async (data, token) => {
   const url = `${API_BASE}/api/nft/stacking/unlock`
-  return httpPost(url, data)
+  return httpPost(url, data, token)
 }