完善登录流程

src/chain/ChainManager.ts

@@ -55,6 +55,10 @@ export default class ChainManager {
     await this.bc.disconnect()
   }
 
+  public get currentChain() {
+    return this.bc.currentChain
+  }
+
   public async login() {
     if (!AppModule.step) {
       try {

src/chain/blockchain.ts

@@ -16,10 +16,11 @@ import {
 } from '@/utils/event-bus'
 import { UserModule } from '@/store/modules/user'
 import { isMobile } from '@/utils/resize'
-import { hasMetamask } from '@/utils/chain.util'
+import { hasMetamask, toHexChainId } from '@/utils/chain.util'
 import { AllChains } from '@/configs/allchain'
 import { MessageBox } from 'element-ui'
 import { ERC20ABI } from '@/configs/contracts'
+import { TransactionReceipt } from 'web3-core'
 
 const EIP721_DOMAIN_DATA = [
   { name: 'name', type: 'string' },
@@ -58,11 +59,6 @@ export class Blockchain {
     EventBus.$on(NEED_LOGIN, this.connect.bind(this))
   }
 
-  loadJson(url: string) {
-    return fetch(url)
-      .then(response => response.json())
-  }
-
   get isWalletConnect() {
     return !!this.walletType && !!this.currentChain
   }
@@ -72,11 +68,7 @@ export class Blockchain {
   }
 
   public get hexChainId() {
-    return this.toHexChainId(this.currentChain)
-  }
-
-  public toHexChainId(chainId: number) {
-    return '0x' + chainId.toString(16)
+    return toHexChainId(this.currentChain)
   }
 
   public async chainSelected(id: number) {
@@ -124,10 +116,22 @@ export class Blockchain {
     return { account: accounts[0], chainId }
   }
 
+  /**
+   * check whether special chainId is supported by config
+   * show chain picker when chainId is not supported and current wallet is meatmask
+   * show message box when chainId is not supported and current wallet is wallet connect
+   * @param {number} chainId
+   * @return {Promise<void>}
+   * @private
+   */
   private async checkChain(chainId: number) {
     if (!this.chainMap.has(chainId)) {
       if (this.walletType === 1) {
-        await this.selectChain()
+        try {
+          await this.selectChain()
+        } catch (err) {
+          await this.disconnect()
+        }
       } else if (this.walletType === 2) {
         await this.disconnect()
         this.walletType = 2
@@ -157,6 +161,11 @@ export class Blockchain {
     if (isManual || this.isWalletConnect) { await this.connectWallet(isManual) }
   }
 
+  /**
+   * show wallet picker
+   * @return {Promise<number>}
+   * @private
+   */
   private selectWallet(): Promise<number> {
     return new Promise((resolve, reject) => {
       EventBus.$emit(SHOW_CHAIN_MODAL, {
@@ -172,6 +181,11 @@ export class Blockchain {
     })
   }
 
+  /**
+   * show chain picker
+   * @return {Promise<number>}
+   * @private
+   */
   private selectChain(): Promise<number> {
     return new Promise((resolve, reject) => {
       EventBus.$emit(NEED_CHANGE_CHAIN, {
@@ -225,19 +239,13 @@ export class Blockchain {
     return provider
   }
 
-  private async initInstance({ abi, address, account }:
-                               {abi: any, address: string, account: string}) {
-    return new this.web3.eth.Contract(
-      abi,
-      address,
-      { from: account }
-    )
-  }
-
   public async getContractInstance(address: string, abi: any = ERC20ABI) {
     if (!this.instanceCacheMap.has(address)) {
-      const instance = await this.initInstance(
-        { abi, address, account: AppModule.accountId })
+      const instance = new this.web3.eth.Contract(
+        abi,
+        address,
+        { from: AppModule.accountId }
+      )
       this.instanceCacheMap.set(address, instance)
     }
     return this.instanceCacheMap.get(address)
@@ -275,16 +283,16 @@ export class Blockchain {
   public async disconnect() {
     try {
       await UserModule.LogOut()
-      this.currentChain = 0
-      this.walletType = 0
-      this.instanceCacheMap.clear()
-      this.clearCachedProvider()
-      AppModule.updateStep(0)
-      AppModule.updateNonce('')
       await this.provider?.disconnect()
     } catch (err) {
     }
+    this.currentChain = 0
+    this.walletType = 0
+    this.instanceCacheMap.clear()
     this.clearCachedProvider()
+    AppModule.updateStep(0)
+    AppModule.updateChainID(0)
+    AppModule.updateNonce('')
     AppModule.updateAccount('')
     AppModule.updateWalletStatus(false)
   }
@@ -303,11 +311,12 @@ export class Blockchain {
 
     // Subscribe to chainId change
     this.provider.on('chainChanged', async(chainId: string) => {
-      console.log('chainChanged', chainId)
       const chainIdNum = parseInt(chainId)
+      console.log('chainChanged', chainId, chainIdNum)
       await this.checkChain(chainIdNum)
       this.currentChain = chainIdNum
       this.saveProvider()
+      AppModule.updateChainID(this.currentChain)
     })
 
     // Subscribe to session disconnection
@@ -316,9 +325,15 @@ export class Blockchain {
     })
   }
 
+  /**
+   * change chain of metamask
+   * @param {number} chainId
+   * @param {() => void} cb
+   * @return {Promise<void>}
+   */
   async switchEthereumChain(chainId?: number, cb?: () => void) {
     chainId = chainId || this.currentChain
-    const hexChainId = this.toHexChainId(chainId)
+    const hexChainId = toHexChainId(chainId)
     const onChainChange = (chainId: string) => {
       console.log('switchEthereumChain: ', chainId)
       this.provider.removeListener('chainChanged', onChainChange)
@@ -362,6 +377,16 @@ export class Blockchain {
     }
   }
 
+  public async getTransactionReceipt(txHash: string) {
+    return this.web3.eth.getTransactionReceipt(txHash)
+  }
+
+  public async getTxConfirms(txhash: string) {
+    const receipt: TransactionReceipt = await this.getTransactionReceipt(txhash)
+    const latest = await this.web3.eth.getBlockNumber()
+    return latest - receipt.blockNumber + 1
+  }
+
   public async signPresale({ type, paymentTokenAddress, price, buyerAddress, netId }:
                            {
                              type: number | string

src/components/market/TopMenu.vue

@@ -25,7 +25,7 @@
             <div class="active-bottom" v-if="currentTab==='market'"></div>
           </div>
         </a>
-        <a class="menu-item" href="/mysteryboxes" v-if="!hidePart" >
+        <a class="menu-item" href="/mysteryboxes" >
           <div class="item " :class="{'active': currentTab==='mystery'}">
             MysteryBoxes
             <div class="active-bottom" v-if="currentTab==='mystery'"></div>
@@ -77,7 +77,7 @@
       <a class="navItem" href="/">Home</a>
       <a class="navItem" href="/official" >Official Shop</a>
       <a class="navItem dash" href="/market">Marketplace</a>
-      <a class="navItem dash" href="/mysteryboxes" v-if="!hidePart" >MysteryBoxes</a>
+      <a class="navItem dash" href="/mysteryboxes">MysteryBoxes</a>
       <a class="navItem" href="/mynft" v-if="logined">MyNFT</a>
       <label v-if="!logined" class="navItem" @click="collectToWallet">Connect Wallet</label>
       <button v-if="!logined" class="general-btn connectButton mobile" @click="collectToWallet">

src/utils/chain.util.ts

@@ -19,11 +19,24 @@ export function hasMetamask(): boolean {
   }
 }
 
+/**
+ * change price with customer decimals to bigNum with 18 decimals
+ * @param {number} price
+ * @param {number} decimals
+ * @return {string}
+ */
 export function parsePrice(price: number, decimals: number) {
   const n = 19 - decimals
   return price + new Array(n).join('0')
 }
 
+/**
+ * format price with customer decimals to string for display
+ * @param {number | string} price
+ * @param {number} decimals
+ * @param {number} fixed
+ * @return {number | string}
+ */
 export function formatPrice(price: number|string, decimals?: number, fixed = 2) {
   if (!decimals) {
     return price
@@ -40,3 +53,12 @@ export function formatPrice(price: number|string, decimals?: number, fixed = 2)
   str = str.slice(0, str.lastIndexOf('.') + fixed + 1)
   return str.replace(/0+$/, '').replace(/\.+$/, '')
 }
+
+/**
+ * number to hex string
+ * @param {number} chainId
+ * @return {string}
+ */
+export function toHexChainId(chainId: number) {
+  return '0x' + chainId.toString(16)
+}

src/views/desktop/MyNft.vue

@@ -50,7 +50,7 @@ import SortSelect from '@/components/market/SortSelect.vue'
 import ResultNo from '@/components/market/ResultNo.vue'
 import { INftData, parseNftData } from '@/types/Nft'
 import TimeLoader from '@/components/main/TimeLoader.vue'
-import { preActivateNFT, preOpenBox, queryActivateNFTState, queryBoxOpenState } from '@/api/Market'
+import { preActivateNFT, queryActivateNFTState } from '@/api/Market'
 import { createModal, ZModal } from '@/utils/modal.util'
 import RewardModal from '@/components/core/RewardModal.vue'
 import { ElLoadingComponent } from 'element-ui/types/loading'
@@ -97,7 +97,7 @@ export default class MyNft extends Vue {
   }
 
   get isLogin() {
-    return !!UserModule.token && !!AppModule.step
+    return !!UserModule.token && !!AppModule.step && AppModule.accountId
   }
 
   get boxProxyAddress() {
@@ -120,12 +120,21 @@ export default class MyNft extends Vue {
     }
   }
 
+  private resetData() {
+    this.totalPage = 1
+    this.currentPage = 1
+    this.nftList.length = 0
+    this.$forceUpdate()
+  }
+
   @Watch('isLogin')
   private accountChange() {
     console.log('account change: ', AppModule.accountId)
-    if (this.accountId) {
+    if (this.isLogin) {
       this.fetchDatas(this.currentPage)
       this.checkOrderHistory()
+    } else {
+      this.resetData()
     }
   }
 
@@ -196,6 +205,15 @@ export default class MyNft extends Vue {
         type: 'warning',
         duration: 5 * 1000
       })
+      return
+    }
+    if (!this.boxProxyAddress) {
+      this.$message({
+        message: 'You need to connect to supported network',
+        type: 'warning',
+        duration: 5 * 1000
+      })
+      return
     }
     this.isProcess = true
     const reqData = {

src/views/desktop/Mystery.vue

@@ -126,12 +126,21 @@ export default class Official extends Vue {
     this.rewardModal?.destroy()
   }
 
+  private resetData() {
+    this.totalPage = 1
+    this.currentPage = 1
+    this.nftList.length = 0
+    this.$forceUpdate()
+  }
+
   @Watch('isLogin')
   private async accountChange() {
-    if (this.accountId) {
+    if (this.isLogin) {
       this.checkOrderHistory()
       await this.updateTotalNum()
       await this.getNftList()
+    } else {
+      this.resetData()
     }
   }
 
@@ -152,7 +161,7 @@ export default class Official extends Vue {
   }
 
   get isLogin() {
-    return !!UserModule.token && !!AppModule.step
+    return !!UserModule.token && !!AppModule.step && AppModule.accountId
   }
 
   get boxAddress() {
@@ -176,6 +185,9 @@ export default class Official extends Vue {
   }
 
   async updateTotalNum() {
+    if (!this.boxAddress) {
+      return
+    }
     try {
       const eth = await this.chainManager.getNftBalance(this.boxAddress, AppModule.chainId)
       this.totalCount = eth
@@ -186,6 +198,9 @@ export default class Official extends Vue {
   }
 
   async getNftList() {
+    if (!this.boxAddress) {
+      return
+    }
     this.showLoading()
     const start = (this.currentPage - 1) * PAGE_SIZE
     this.nftList.length = 0