修改质押解除质押轮询

src/components/Dialogs/confirmDialog.vue

@@ -111,14 +111,14 @@ function hideModal(result = null) {
     }
   }
   .cf-content-text {
-    width: 75%;
+    width: 78%;
     margin: 0 auto;
     margin-top: 10px;
     text-align: left;
     .cf-text {
       font-family: 'Poppins';
       font-weight: 500;
-      font-size: 30px;
+      font-size: 28px;
     }
   }
   .cf-btn-grid {

src/components/assets/activity.vue

@@ -36,7 +36,7 @@ import Hero from "@/components/common/searchView/hero.vue"
 import Gold from "@/components/common/searchView/gold.vue"
 import Card from "@/components/common/convertCard.vue";
 import NftId from "@/configs/item.json"
-import { apiLockState } from "@/utils/marketplace"
+import { apiLockState, apiActivity } from "@/utils/marketplace"
 import {useMarketplaceStore} from "@/store/marketplace";
 import {walletStore} from "@/store/wallet";
 const marketplaceStore = useMarketplaceStore()
@@ -114,13 +114,34 @@ const getMyAssets = async () => {
   // nftList.value = []
   const myADdress = localWalletStore.address
   // console.log(data)
+  const data = {
+    page_size: 20,
+    cursor: '',
+    search: {
+      name: '',
+    },
+    filter: {
+      item_ids: []
+    },
+    sort: {
+      fields: [
+        {
+          name: '',
+          type: 0
+        }
+      ]
+    }
+  }
   // return
+  // const address = import.meta.env.VUE_APP_EXPLORER_URL
   if(myADdress) {
     try {
       reqData.value.cursor = next_cursor.value.next_cursor
-      let res = await apiLockState(myADdress, reqData.value)
+      // let res = await apiLockState(myADdress, reqData.value)
-      // return
+      let res = await apiActivity(data, myADdress)
-      nftList.value = [...nftList.value, ...res.rows]
+      console.log(res,'--------------------------------')
+      return
+      // nftList.value = [...nftList.value, ...res.rows]
       // nftListBox = nftList.value.reduce((acc, obj) => {
       //   const existingObj = acc.find(item => item.token_id == obj.token_id)
       //   if(!existingObj) {

src/components/assets/assetsHeader.vue

@@ -10,6 +10,7 @@
         <div class="total">
           <p>Total Contribution Credits:&nbsp; <span>{{ contributionPointTotal }}</span></p>
           <img src="@/assets/img/marketplace/totalContribution.png" alt="">
+          <img class="icon" @click="rulesDialogVisible = true" src="@/assets/img/marketplace/History.png" alt="">
         </div>
         <div class="day">
           <p>Daily Expected:&nbsp;&nbsp; <span>+{{ contributionPoint }}/d</span></p>
@@ -222,20 +223,20 @@
             <li>
               <h4>Founder’s Tag</h4>
               <div class="hero-title">
-                <span>Tier</span>
+                <span>Rarity</span>
                 <span>Daily contribution points</span>
               </div>
               <div class="hero-body">
                 <div>
-                  <span>Tier 1</span>
+                  <span>Common</span>
                   <span>20</span>
                 </div>
                 <div>
-                  <span>Tier 2</span>
+                  <span>Rare</span>
                   <span>40</span>
                 </div>
                 <div>
-                  <span>Tier 3</span>
+                  <span>Legendary</span>
                   <span>100</span>
                 </div>
                 <div>
@@ -291,7 +292,6 @@ const imageUrl = computed(() => {
 
 // 打开历史记录弹窗
 const receiveLog = () => {
-  console.log('----')
   logDialogVisible.value = true
 }
 

src/components/assets/myCard.vue

@@ -31,21 +31,32 @@
             <img src="@/assets/img/marketplace/totalContribution.png" alt="">
           </div>
         </div>
-        <div v-if="LOCKER_ADDRESS.toLowerCase() == nftData.owner_address.toLowerCase() || FOUNDER_ADDRESS.toLowerCase() == nftData.owner_address.toLowerCase()" class="link-staking" @click="unStake(nftData)">
+        <div v-if="LOCKER_ADDRESS.toLowerCase() == nftData.owner_address.toLowerCase() || FOUNDER_ADDRESS.toLowerCase() == nftData.owner_address.toLowerCase()" class="link-staking">
-          <img src="@/assets/img/marketplace/Staking.png" alt="">
+          <span v-if="nftData?.status">loading</span>
+          <img v-else src="@/assets/img/marketplace/Staking.png" @click="unStake(nftData)" alt="">
         </div>
-        <div v-if="LOCKER_ADDRESS.toLowerCase() != nftData.owner_address.toLowerCase() && (nftData.type == 1 || nftData.type == 12) && nftData.on_sale == 0" class="link-below" @click="lockToGame('convert')">
+        <div v-if="LOCKER_ADDRESS.toLowerCase() != nftData.owner_address.toLowerCase() && (nftData.type == 1 || nftData.type == 12) && nftData.on_sale == 0" class="link-below">
-          Stake
+          <span v-if="nftData?.status">loading</span>
+          <span v-else @click="lockToGame('convert')">Stake</span>
         </div>
       </div>
     </div>
     <div class="card-btn" v-if="nftData.type != 13 && LOCKER_ADDRESS.toLowerCase() != nftData.owner_address.toLowerCase()">
-      <div class="card-sell" v-if="nftData.on_sale == 0" @click="sellNft(nftData)">List</div>
+      <div class="card-sell" v-if="nftData.on_sale == 0">
+        <span v-if="nftData?.status">loading</span>
+        <span v-else @click="sellNft(nftData)">List</span>
+      </div>
       <div class="card-cancel" v-if="nftData.on_sale == 1" @click="cancelNft(nftData)">Cancel listing</div>
     </div>
     <div class="card-btn" v-else>
-      <div class="card-cancel" v-if="LOCKER_ADDRESS.toLowerCase() == nftData.owner_address.toLowerCase() || FOUNDER_ADDRESS.toLowerCase() == nftData.owner_address.toLowerCase()" @click="unStake(nftData)">Unstake</div>
+      <div class="card-cancel" v-if="LOCKER_ADDRESS.toLowerCase() == nftData.owner_address.toLowerCase() || FOUNDER_ADDRESS.toLowerCase() == nftData.owner_address.toLowerCase()">
-      <div class="card-sell" v-else @click="lockToGame('founder')">Stake</div>
+        <span v-if="nftData?.status">loading</span>
+        <span @click="unStake(nftData)">Unstake</span>
+      </div>
+      <div class="card-sell" v-else>
+        <span v-if="nftData?.status">loading</span>
+        <span v-else @click="lockToGame('founder')">Stake</span>
+      </div>
     </div>
     <SellDialog :sellDialogVisible="sellDialogVisible" :floorPrice="floorPrice" :sellDataArr="sellDataArr" @handleClose="sellHandleClose" />
     <LoadingDialog :loadingDialogVisible="loadingDialogVisible" />
@@ -56,7 +67,7 @@
 import { ref, toRaw, onMounted, getCurrentInstance, inject } from "vue"
 const message = inject('$message')
 import SellDialog from "@/components/Dialogs/sellDialog.vue"
-import { apiGetPrice, nftDetail } from "@/utils/marketplace"
+import { apiGetPrice, nftDetail, apiTxHash } from "@/utils/marketplace"
 import ImgCard from "@/components/common/imgCard.vue"
 import LoadingDialog from "@/components/Dialogs/loadingDialog.vue"
 import { priceCalculated } from "@/configs/priceCalculate"
@@ -173,14 +184,28 @@ const lockToGameConfirm = async () => {
     const bc = new BlockChain()
     let res = await bc.locker.lock(toRaw(props.nftData).contract_address, [toRaw(props.nftData).token_id])
     // message.success('lockToGame success')
+    toRaw(props.nftData)['status'] = 1
     const confirmResult = await createModal(ConfirmDialog, {
       title: '', 
       noBtnTitle: '',
       message: 'Staking is complete. This process may take 3-4 minutes.'
     }).show()
-    // router.go(-1)
-    emit('renewMyNft')
     loadingDialogVisible.value = false
+    if(res) {
+      try {
+        const {errcode, errmsg, confirmed} = await apiTxHash([toRaw(props.nftData).net_id], res)
+        let timer = setInterval(() => {
+          if(confirmed == 1) {
+            toRaw(props.nftData)['status'] = ''
+            emit('renewMyNft')
+            clearInterval(timer);
+          }
+        }, 2000);
+      } catch (e) {
+        console.log(e)
+      }
+    }
+    // // router.go(-1)
     // router.push('/assets')
   } catch (e) {
     if(e.message.indexOf('rejected') > -1) {
@@ -197,16 +222,29 @@ const unlockMainConfirm = async () => {
     const bc = new BlockChain()
     let res = await bc.locker.lockMain(toRaw(props.nftData).contract_address, [toRaw(props.nftData).token_id])
     // message.success('lockToGame success')
+    toRaw(props.nftData)['status'] = 1
     const confirmResult = await createModal(ConfirmDialog, {
       title: '', 
       noBtnTitle: '',
       message: 'Staking is complete. This process may take 3-4 minutes.'
     }).show()
-    // router.go(-1)
-    emit('renewMyNft')
     loadingDialogVisible.value = false
-    // router.push('/assets')
+    if(res) {
+      try {
+        const {errcode, errmsg, confirmed} = await apiTxHash([toRaw(props.nftData).net_id], res)
+        let timer = setInterval(() => {
+          if(confirmed == 1) {
+            toRaw(props.nftData)['status'] = ''
+            emit('renewMyNft')
+            clearInterval(timer);
+          }
+        }, 2000);
       } catch (e) {
+        console.log(e)
+      }
+    }
+  } catch (e) {
+    console.log(e)
     if(e.message.indexOf('rejected') > -1) {
       message.error('User rejected the request')
     } else {
@@ -251,18 +289,26 @@ const heroLock = async (data) => {
   try {
     const bc = new BlockChain()
     let res = await bc.locker.unlockOrMintGameNft(toRaw(data).contract_address,[toRaw(data).token_id])
-    if(res) {
+    toRaw(props.nftData)['status'] = 1
-      let timer = setTimeout( async () => {
-        // message.success('Unstake success.')
     const confirmResult = await createModal(ConfirmDialog, {
       title: '', 
       noBtnTitle: '',
       message: 'Unstake success. It is expected to take 3-4 minutes. Please log in to the original wallet address to check later.'
     }).show()
     loadingDialogVisible.value = false
+    if(res) {
+      try {
+        const {errcode, errmsg, confirmed} = await apiTxHash(toRaw(props.nftData).net_id, res)
+        let timer = setInterval( async () => {
+        if(confirmed == 1) {
+          toRaw(props.nftData)['status'] = ''
           emit('renewMyNft')
-        clearTimeout(timer);
+          clearInterval(timer);
+        }
       }, 2000);
+      } catch (e) {
+        console.log(e)
+      }
     }
   } catch (e) {
     console.log(e)
@@ -281,28 +327,39 @@ const founderLock = async (data) => {
   try {
     const bc = new BlockChain()
     let res = await bc.locker.unlockMain(data.contract_address,[data.token_id])
-    if(res) {
+    toRaw(props.nftData)['status'] = 1
-      let timer = setTimeout( async () => {
-        // message.success('Unstake success.')
     const confirmResult = await createModal(ConfirmDialog, {
       title: '', 
       noBtnTitle: '',
       message: 'Unstake success. It is expected to take 3-4 minutes. Please log in to the original wallet address to check later.'
     }).show()
     loadingDialogVisible.value = false
+    if(res) {
+      try {
+        const {errcode, errmsg, confirmed} = await apiTxHash(toRaw(props.nftData).net_id, res)
+        let timer = setInterval( async () => {
+        if(confirmed == 1) {
+          toRaw(props.nftData)['status'] = ''
           emit('renewMyNft')
-        clearTimeout(timer);
+          clearInterval(timer);
+        }
       }, 2000);
+      } catch (e) {
+        console.log(e)
+      }
     }
   } catch (e) {
-    console.log(e);
     loadingDialogVisible.value = false
     if(e.message.indexOf('rejected') > -1) {
       message.error('User rejected the request')
     } else if (e.message.indexOf('select wallet') > -1) {
       message.error('user cancel select wallet')
     } else if (e.message.indexOf('eoa address changed') > -1) {
-      message.error("It looks like there's an issue with your MetaMask or OKX wallet address. Please check your wallet address and try again")
+      const confirmResult = await createModal(ConfirmDialog, {
+        title: '', 
+        noBtnTitle: '',
+        message: "It looks like there's an issue with your MetaMask or OKX wallet address. Please check your wallet address and try again."
+      }).show()
     } else {
       message.error('Unstake fail')
     }
@@ -475,6 +532,11 @@ onMounted(() => {
       background: #1778f1;
       border-radius: 12px;
       text-align: center;
+      span {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+      }
     }
     .card-sell, .card-cancel {
       width: 100%;

src/components/chain/utils.js

@@ -199,6 +199,10 @@ export const switchEthereumChain = async (provider, targetChainId) => {
         provider.removeListener('chainChanged', onChainChange)
         deferred.reject(addError)
       }
+    } else {
+      console.error('error add chain: ', e.message)
+      provider.removeListener('chainChanged', onChainChange)
+      deferred.reject(e)
     }
   }
   return deferred.promise

src/utils/marketplace.js

@@ -147,3 +147,15 @@ export const apiUserData = async (account_address) => {
   const url = `${API_BASE}/api/user/${account_address}`
   return httpGet(url, {})
 }
+
+// 轮询状态
+export const apiTxHash = async (net_id, account_address) => {
+  const url = `${API_BASE}/api/chain/txhash/${net_id}/${account_address}`
+  return httpGet(url, {})
+}
+
+// 活动交易记录
+export const apiActivity = async (data, account_address) => {
+  const url = `${API_BASE}/api/chain/activity/${account_address}`
+  return httpPost(url, data)
+}

src/views/DetailView.vue

@@ -49,7 +49,12 @@
             </div>
             <div class="top-right-btns">
               <div v-if="FOUNDER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase() || LOCKER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase()">
-                <div class="cancel" @click="localWalletStore.token == '' ? cardLogin() : backStaking()">Unstake</div>
+                <div class="cancel" v-if="detailData.nft?.status == 1">
+                  <span>Loading</span>
+                </div>
+                <div class="cancel" v-else>
+                  <span @click="localWalletStore.token == '' ? cardLogin() : backStaking()">Unstake</span>
+                </div>
               </div>
               <div v-if="(detailData.nft.type == 1 && !detailData.nft.contract_address) && LOCKER_ADDRESS.toLowerCase() != detailData.nft.owner_address.toLowerCase()">
                 <div class="mint" @click="mintHero">Mint</div>
@@ -77,11 +82,18 @@
               2、下架
               3、使用
               -->
-              <div v-if="myAddress == detailData.nft.owner_address">
+              <div v-if="myAddress == detailData.nft.owner_address && detailData.nft?.status != 1">
                 <div class="sell" @click="beginSell" v-if="detailData.nft.on_sale == 0 && detailData.nft.type != 13">List</div>
                 <div class="cancel" @click="cancelSell" v-if="detailData.nft.on_sale == 1">Cancel listing</div>
-                <div class="redeem" @click="lockToGame('convert')" v-if="detailData.nft.on_sale == 0 && (detailData.nft.type == 1 || detailData.nft.type == 12)">Stake</div>
+                <div v-if="detailData.nft?.status == 1" class="cancel">
-                <div class="redeem" @click="lockToGame('founder')" v-else-if="detailData.nft.type == 13">Stake</div>
+                  <span>Loading</span>
+                </div>
+                <div class="redeem" v-else-if="detailData.nft.on_sale == 0 && (detailData.nft.type == 1 || detailData.nft.type == 12)">
+                  <span @click="lockToGame('convert')">Stake</span>
+                </div>
+                <div class="redeem" v-else-if="detailData.nft.type == 13">
+                  <span @click="lockToGame('founder')">Stake</span>
+                </div>
                 <!-- <div class="redeem" @click="lockToGame('redeem')" v-if="detailData.nft.on_sale == 0 && detailData.nft.type == 11">Redeem</div> -->
               </div>
             </div>
@@ -197,7 +209,7 @@ import ImgCard from "@/components/common/imgCard.vue"
 import StarTimer from "@/components/common/starTimer.vue"
 import SellDialog from "@/components/Dialogs/sellDialog.vue"
 import Footer from "@/components/common/footer.vue"
-import { nftDetail, apiGetPrice } from "@/utils/marketplace"
+import { nftDetail, apiGetPrice, apiTxHash } from "@/utils/marketplace"
 import {priceCalculated} from "@/configs/priceCalculate.js"
 import { BlockChain } from "@/components/chain/BlockChain"
 import {walletStore} from "@/store/wallet";
@@ -336,13 +348,28 @@ const lockToGameConfirm = async () => {
   try {
     await new BlockChain().locker.lock(detailData.value.nft.contract_address, [detailData.value.nft.token_id])
     // message.success('lockToGame success')
+    detailData.value.nft['status'] = 1
     const confirmResult = await createModal(ConfirmDialog, {
       title: '', 
       noBtnTitle: '',
       message: 'Staking is complete. This process may take 3-4 minutes.'
     }).show()
     loadingDialogVisible.value = false
+    if(res) {
+      try {
+        const { confirmed } = await apiTxHash(detailData.value.nft.net_id, res)
+        let timer = setInterval( async () => {
+          // message.success('Unstake success.')
+          if(confirmed == 1) {
+            detailData.value.nft['status'] = ''
             router.go(-1)
+            clearInterval(timer);
+          }
+        }, 2000);
+      } catch (e) {
+        console.log(e)
+      }
+    }
   } catch (e) {
     if(e.message.indexOf('rejected') > -1) {
       message.error('User rejected the request')
@@ -356,16 +383,28 @@ const unlockMainConfirm = async () => {
   try {
     const bc = new BlockChain()
     let res = await bc.locker.lockMain(detailData.value.nft.contract_address, [detailData.value.nft.token_id])
-    // message.success('lockToGame success')
+    detailData.value.nft['status'] = 1
     const confirmResult = await createModal(ConfirmDialog, {
       title: '', 
       noBtnTitle: '',
       message: 'Staking is complete. This process may take 3-4 minutes.'
     }).show()
-    // router.go(-1)
-    emit('renewMyNft')
     loadingDialogVisible.value = false
-    // router.push('/assets')
+    if(res) {
+      try {
+        const { confirmed } = await apiTxHash(detailData.value.nft.net_id, res)
+        let timer = setInterval( async () => {
+          // message.success('Unstake success.')
+          if(confirmed == 1) {
+            detailData.value.nft['status'] = ''
+            router.go(-1)
+            clearInterval(timer);
+          }
+        }, 2000);
+      } catch (e) {
+        console.log(e)
+      }
+    }
   } catch (e) {
     if(e.message.indexOf('rejected') > -1) {
       message.error('User rejected the request')
@@ -397,18 +436,27 @@ const heroLock = async () => {
   try {
     const bc = new BlockChain()
     let res = await bc.locker.unlockOrMintGameNft(detailData.value.nft.contract_address,[detailData.value.nft.token_id])
-    if(res) {
+    detailData.value.nft['status'] = 1
-      let timer = setTimeout( async () => {
-        // message.success('Unstake success.')
     const confirmResult = await createModal(ConfirmDialog, {
       title: '', 
       noBtnTitle: '',
       message: 'Unstake success. It is expected to take 3-4 minutes. Please log in to the original wallet address to check later.'
     }).show()
     loadingDialogVisible.value = false
+    if(res) {
+      try {
+        const { confirmed } = await apiTxHash(detailData.value.nft.net_id, res)
+        let timer = setInterval( async () => {
+        // message.success('Unstake success.')
+        if( confirmed) {
+          detailData.value.nft['status'] = ''
           router.go(-1)
-        clearTimeout(timer);
+          clearInterval(timer);
+        }
       }, 2000);
+      } catch (e) {
+        console.log(e)
+      }
     }
   } catch (e) {
     loadingDialogVisible.value = false
@@ -426,18 +474,27 @@ const founderLock = async () => {
   try {
     const bc = new BlockChain()
     let res = await bc.locker.unlockMain(detailData.value.nft.contract_address,[detailData.value.nft.token_id])
-    if(res) {
+    detailData.value.nft['status'] = 1
-      let timer = setTimeout( async () => {
-        // message.success('Unstake success.')
     const confirmResult = await createModal(ConfirmDialog, {
       title: '', 
       noBtnTitle: '',
       message: 'Unstake success. It is expected to take 3-4 minutes. Please log in to the original wallet address to check later.'
     }).show()
     loadingDialogVisible.value = false
+    if(res) {
+      try {
+        const { confirmed } = await apiTxHash(detailData.value.nft.net_id, res)
+        let timer = setInterval( async () => {
+        // message.success('Unstake success.')
+        if( confirmed) {
+          detailData.value.nft['status'] = ''
           router.go(-1)
-        clearTimeout(timer);
+          clearInterval(timer);
+        }
       }, 2000);
+      } catch (e) {
+        console.log(e)
+      }
     }
   } catch (e) {
     loadingDialogVisible.value = false
@@ -446,7 +503,11 @@ const founderLock = async () => {
     } else if (e.message.indexOf('select wallet') > -1) {
       message.error('user cancel select wallet')
     } else if (e.message.indexOf('eoa address changed') > -1) {
-      message.error("It looks like there's an issue with your MetaMask or OKX wallet address. Please check your wallet address and try again")
+      const confirmResult = await createModal(ConfirmDialog, {
+        title: '', 
+        noBtnTitle: '',
+        message: "It looks like there's an issue with your MetaMask or OKX wallet address. Please check your wallet address and try again."
+      }).show()
     } else {
       message.error('Unstake fail')
     }