增加nft锁定到locker合约(下链)方法

.env.dev

@@ -12,4 +12,5 @@ VUE_APP_PASSPORT_MARKET_ADDRESS=0x7d117aA8BD6D31c4fa91722f246388f38ab1942c
 VUE_APP_MKT_API='https://market-test.kingsome.cn'
 VUE_APP_NET_ID='13473'
 VUE_APP_MARKET_CURRENCY='0xFd42bfb03212dA7e1A4608a44d7658641D99CF34'
-VUE_APP_MAKEFEE_ADDRESS='0x50A8e60041A206AcaA5F844a1104896224be6F39'
+VUE_APP_MAKEFEE_ADDRESS='0x50A8e60041A206AcaA5F844a1104896224be6F39'
+VUE_APP_LOCKER_ADDRESS='0x59e751c2037B710090035B6ea928e0cce80aC03f'

src/components/assets/collectibles.vue

@@ -50,9 +50,10 @@ import Status from "@/components/common/searchView/status.vue";
 import Card from "./card.vue";
 import NftId from "@/configs/item.json"
 import { apiAssetsState } from "@/utils/marketplace"
+import {walletStore} from "@/store/wallet";
 import { useCollectiblesStore } from "@/store/collectibles"
 const marketplaceList = useCollectiblesStore()
-
+const localWalletStore = walletStore()
 const nftList = ref([])
 const filterList = ref()
 
@@ -73,7 +74,7 @@ const statusChild = (val) => {
 }
 
 const getMyAssets = async () => {
-  const myADdress = localStorage.getItem('assessAddress')
+  const myADdress = localWalletStore.address
   const data = {
     type: '0',
     page_size: '20',

src/components/assets/hanging.vue

@@ -51,6 +51,8 @@ import Status from "@/components/common/searchView/status.vue";
 import Card from "@/components/common/hangingCard.vue";
 import { apiHangingState } from "@/utils/marketplace"
 import { useHangingStore } from "@/store/hanging"
+import {walletStore} from "@/store/wallet";
+const localWalletStore = walletStore()
 const marketplaceList = useHangingStore()
 
 const nftList = ref([])
@@ -73,7 +75,7 @@ const statusChild = (val) => {
 }
 
 const getHistoryList = async () => {
-  const myAddress = localStorage.getItem('assessAddress')
+  const myAddress = localWalletStore.address
   const data = {
     type: '1',
     page_size: '20',

src/components/assets/trading.vue

@@ -50,6 +50,8 @@ import Status from "@/components/common/searchView/status.vue";
 import Card from "@/components/common/card.vue";
 import { apiHistoryState } from "@/utils/marketplace"
 import { useTradingStore } from "@/store/trading"
+import {walletStore} from "@/store/wallet";
+const localWalletStore = walletStore()
 const marketplaceList = useTradingStore()
 
 const nftList = ref([])
@@ -75,7 +77,7 @@ const clearAll = () => {
 }
 
 const getHistoryList = async () => {
-  const myAddress = localStorage.getItem('assessAddress')
+  const myAddress = localWalletStore.address
   let res = await apiHistoryState(myAddress)
 }
 

src/components/chain/BlockChain.js

@@ -6,6 +6,7 @@ import WalletSelectModel from "@/components/chain/WalletSelectModel.vue";
 import {createModal} from "@/utils/model.util";
 import {ImtblMarket} from "@/components/chain/Market";
 import { ALL_PROVIDERS } from "@/configs/configchain";
+import {Locker} from "@/components/chain/contract/Locker";
 
 export const allProviders = {
   1: MetaMaskWallet,
@@ -22,6 +23,7 @@ export class BlockChain {
     this.store.$hydrate({runHooks: false});
     this.initWallet();
     this.market = new ImtblMarket()
+    this.locker = new Locker(this)
     BlockChain.instance = this;
     
   }

src/components/chain/contract/Locker.js

@@ -0,0 +1,38 @@
+
+import { ethers } from 'ethers'
+
+const lockAbi = [
+  'function lock(address nft, uint256[] tokenIds) external'
+]
+
+const erc721Abi = [
+  'function approve(address to, uint256 tokenId) external',
+  'function getApproved(uint256 tokenId) public view returns (address)'
+]
+
+const lockAddress = import.meta.env.VUE_APP_LOCKER_ADDRESS
+
+export class Locker {
+
+  constructor(_chainInstance) {
+    this.bc = _chainInstance
+  }
+
+  async lock(nft, tokenIds) {
+    // call single method with abi and address
+    console.log('lock nft', nft, tokenIds)
+    const nftContract = new ethers.Contract(nft, erc721Abi, this.bc.provider.getSigner())
+    for (let tokenId of tokenIds) {
+      const addressApproval = await nftContract.getApproved(tokenId)
+      if ((addressApproval || "").toLowerCase() != lockAddress.toLowerCase()) {
+        const resApproval = await nftContract.approve(lockAddress, tokenId);
+        await this.bc.provider.waitForTransaction(resApproval.hash)
+        console.debug('approve', resApproval.hash)
+      }
+    }
+    const contract = new ethers.Contract(lockAddress, lockAbi, this.bc.provider.getSigner())
+    const res = await contract.lock(nft, tokenIds)
+    await this.bc.provider.waitForTransaction(res.hash)
+    return res.hash
+  }
+}

src/components/layout/NavBar.vue

@@ -156,7 +156,7 @@ const message = copied.value
   ? "Text copied!"
   : "Click the button to copy text.";
 const formatAddress = computed(() => {
-  const accountId = localStorage.getItem('assessAddress');
+  const accountId = localWalletStore.address
   if (!accountId) return "-";
   if (accountId.length >= 10) {
     return `${accountId.substring(0, 6)}......${accountId.slice(-6)}`;

src/views/DetailView.vue

@@ -37,7 +37,7 @@
             3、购买
             4、
             -->
-            <div v-if="myAddress != detailData.owner_address">
+            <div v-if="myAddress != detailData.owner_address && detailData.event">
               <div class="buy" @click="buyNow">Buy Now</div>
               <div class="add">
                 <span>Add to cart </span>
@@ -58,9 +58,9 @@
             3、使用
             -->
             <div v-else>
-              <div class="sell">上架</div>
-              <div class="cancel">下架</div>
-              <div class="redeem">使用</div>
+              <div class="sell" v-if="!detailData.event">上架</div>
+              <div class="cancel" v-if="detailData.event">下架</div>
+              <div class="redeem" @click="lockToGame">使用</div>
             </div>
           </div>
           <div class="info">
@@ -141,31 +141,36 @@
 import { ref, toRaw, onMounted } from "vue"
 import StarTimer from "@/components/common/starTimer.vue"
 import { apiDetail } from "@/utils/marketplace"
-import {walletStore} from "@/store/wallet";
 import { BlockChain } from "@/components/chain/BlockChain"
+import {walletStore} from "@/store/wallet";
 const localWalletStore = walletStore()
 const detailData = window.history.state.nftData
 console.log(detailData)
-
 const myAddress = localWalletStore.address
 const nftAbilities = ref(detailData.detail)
 
 // 购买
 const buyNow = async () => {
-  let tokenIds = []
-  tokenIds.push(detailData.token_id)
-  console.log(tokenIds)
-
-  console.log(await new BlockChain().market.batchBuy(tokenIds))
-  return 
+  let tokenIds = [detailData.event.data.id]
   try {
-    let res = await batchBuy(tokenIds)
-    console.log(rse)
+    await new BlockChain().market.batchBuy(tokenIds)
+    console.log('buy success')
   } catch (e) {
-    console.log(e)
+    console.log('buy fail', e.message)
   }
 }
 
+const lockToGame = async() => {
+  try {
+    await new BlockChain().locker.lock(detailData.contract_address, [detailData.token_id])
+    console.log('lockToGame success')
+    router.go(-1)
+  } catch (e) {
+    console.log('lockToGame fail', e.message)
+  }
+
+}
+
 // 处理地址
 const sliceAddress = (address) => {
   if (!address) return "-";