修改登录流程

src/components/core/ChainModal.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="chain-modal" v-if="modalShow">
-    <div class="modal-bg" @click="hideModal"></div>
+    <div class="modal-bg" @click="cancelSelect"></div>
     <div class="modal-content">
       <div class="modal-title">
         You need to connect to supported network
@@ -21,7 +21,7 @@
 </template>
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import { CHAIN_SELECTED, EventBus, NEED_CHANGE_CHAIN, SHOW_CHAIN_MODAL, WALLET_SELECTED } from '@/utils/event-bus'
+import { EventBus, NEED_CHANGE_CHAIN, SHOW_CHAIN_MODAL } from '@/utils/event-bus'
 import { chains } from '@/configs/chains'
 
 @Component({
@@ -33,6 +33,9 @@ export default class ChainModal extends Vue {
   modalShow = false
   // 0: wallet 1: chain
   dataType = 1
+  confirmFun: (id: number) => void
+  cancelFun: (reason: any) => void
+
   private providers = [
     {
       id: 1,
@@ -74,12 +77,8 @@ export default class ChainModal extends Vue {
 
   cardClicked(id: number) {
     console.log('card clicked: ', id)
+    this.confirmFun && this.confirmFun(id)
     this.hideModal()
-    if (this.dataType === 0) {
-      EventBus.$emit(WALLET_SELECTED, id)
-    } else if (this.dataType === 1) {
-      EventBus.$emit(CHAIN_SELECTED, id)
-    }
   }
 
   showModal(type?: number) {
@@ -87,16 +86,27 @@ export default class ChainModal extends Vue {
     this.modalShow = true
   }
 
-  showSelectWallet() {
+  showSelectWallet({ confirm, cancel }: {confirm: (id: number)=>void, cancel: (reason: any)=>void}) {
+    this.confirmFun = confirm
+    this.cancelFun = cancel
     this.showModal(0)
   }
 
-  showChangeChain() {
+  showChangeChain({ confirm, cancel }: {confirm: (id: number)=>void, cancel: (reason: any)=>void}) {
+    this.confirmFun = confirm
+    this.cancelFun = cancel
     this.showModal(1)
   }
 
+  cancelSelect() {
+    this.cancelFun && this.cancelFun('User cancel')
+    this.hideModal()
+  }
+
   hideModal() {
     this.modalShow = false
+    this.confirmFun = (id: number) => { console.log(id) }
+    this.cancelFun = (reason: any) => { console.log(reason) }
   }
 }
 </script>

src/utils/ChainManager.ts

@@ -4,20 +4,20 @@ import { getNonce } from '@/api/User'
 import { AppModule } from '@/store/modules/app'
 import { UserModule } from '@/store/modules/user'
 import { Message } from 'element-ui'
-import { EventBus, NEED_NONCE } from '@/utils/event-bus'
 
 @singleton
 export default class ChainManager {
   bc: BlockChain
   constructor() {
     this.bc = new BlockChain()
-    EventBus.$on(NEED_NONCE, this.checkNance.bind(this))
+    // EventBus.$on(NEED_NONCE, this.checkNance.bind(this))
   }
 
   public async init() {
     if (this.bc.isWalletConnect) {
       try {
         await this.bc.connect()
+        await this.getNance()
       } catch (err) {
         console.log('connect chain error: ', err)
       }
@@ -33,9 +33,10 @@ export default class ChainManager {
   }
 
   public async login() {
-    if (!AppModule.accountId) {
+    if (!AppModule.step) {
       try {
         await this.bc.connect(true)
+        await this.checkNance()
       } catch (err) {
         Message({
           message: err.message,

src/utils/blockchain.ts

@@ -5,18 +5,17 @@ import Web3 from 'web3'
 import { ERC20ABI, MALL_ADDRESS } from '@/configs/config_chain'
 import {
   ACCOUNT_CHANGE,
-  CHAIN_SELECTED,
   EventBus, NEED_CHANGE_CHAIN,
   NEED_LOGIN,
   NEED_NONCE,
-  SHOW_CHAIN_MODAL,
+  SHOW_CHAIN_MODAL
-  WALLET_SELECTED
 } from '@/utils/event-bus'
 import { UserModule } from '@/store/modules/user'
 import { chains, IChainData } from '@/configs/chains'
 import { isMobile } from '@/utils/resize'
 import { hasMetamask } from '@/utils/chain.util'
 import { AllChains } from '@/configs/allchain'
+import { MessageBox } from 'element-ui'
 
 const EIP721_DOMAIN_DATA = [
   { name: 'name', type: 'string' },
@@ -51,8 +50,6 @@ export class BlockChain {
     this.coinInstanceMap = new Map()
     // AppModule.updateChainID(chainId)
     EventBus.$on(NEED_LOGIN, this.connect.bind(this))
-    EventBus.$on(WALLET_SELECTED, this.walletSelected.bind(this))
-    EventBus.$on(CHAIN_SELECTED, this.chainSelected.bind(this))
   }
 
   loadJson(url: string) {
@@ -80,11 +77,6 @@ export class BlockChain {
     }
   }
 
-  public async walletSelected(type: number) {
-    this.walletType = type
-    await this.connectWallet(true)
-  }
-
   public async connectWallet(isManual: boolean) {
     console.log('begin connect to wallet: ', this.walletType, this.currentChain)
     if (this.walletType === 1) {
@@ -96,16 +88,15 @@ export class BlockChain {
       return
     }
     this.web3 = new Web3(this.provider)
-    this.subscribeToEvents()
     const chainId = await this.web3.eth.getChainId()
-    if (!this.chainMap.has(chainId)) {
+    await this.checkChain(chainId)
-      EventBus.$emit(NEED_CHANGE_CHAIN)
+
-      return
+    this.subscribeToEvents()
-    }
     const accounts = await this.web3.eth.getAccounts()
     if (accounts && accounts.length > 0) {
       AppModule.updateAccount(accounts[0])
     }
+    if (!this.currentChain) this.currentChain = chainId
     this.saveProvider()
     AppModule.updateChainID(chainId)
     AppModule.updateWalletStatus(true)
@@ -119,24 +110,68 @@ export class BlockChain {
     return { account: accounts[0], chainId }
   }
 
+  private async checkChain(chainId: number) {
+    if (!this.chainMap.has(chainId)) {
+      if (this.walletType === 1) {
+        await this.selectChain()
+      } else if (this.walletType === 2) {
+        await this.disconnect()
+        this.walletType = 2
+        await MessageBox.alert('You need to connect to supported network', 'Wrong Network', {
+          confirmButtonText: 'Confirm'
+        })
+        await this.connectWallet(true)
+      }
+    }
+  }
+
   public async connect(isManual = false) {
     if (isMobile()) {
       this.walletType = 2
     } else {
       if (hasMetamask()) {
         if (isManual && !this.walletType) {
-          EventBus.$emit(SHOW_CHAIN_MODAL)
+          this.walletType = await this.selectWallet()
-          return
         }
       } else {
         this.walletType = 2
       }
     }
-    if (this.isWalletConnect) {
+    if (isManual || this.isWalletConnect) { await this.connectWallet(isManual) }
-      await this.connectWallet(false)
-    } else {
-      EventBus.$emit(NEED_CHANGE_CHAIN)
   }
+
+  private selectWallet(): Promise<number> {
+    return new Promise((resolve, reject) => {
+      EventBus.$emit(SHOW_CHAIN_MODAL, {
+        confirm: (id: number) => {
+          console.log('select wallet: ', id)
+          resolve && resolve(id)
+        },
+        cancel: (reason: any) => {
+          console.log('cancel select wallet: ', reason)
+          reject && reject(reason)
+        }
+      })
+    })
+  }
+
+  private selectChain(): Promise<number> {
+    return new Promise((resolve, reject) => {
+      EventBus.$emit(NEED_CHANGE_CHAIN, {
+        confirm: async(id: number) => {
+          console.log('select chain: ', id)
+          this.currentChain = id
+          if (this.provider) {
+            await this.switchEthereumChain()
+          }
+          resolve && resolve(id)
+        },
+        cancel: (reason: any) => {
+          console.log('cancel select chain: ', reason)
+          reject && reject(reason)
+        }
+      })
+    })
   }
 
   public async connectMetaMask() {
@@ -161,7 +196,6 @@ export class BlockChain {
   public async connectWalletConnect() {
     const provider = new WalletConnectProvider({
       infuraId: process.env.VUE_APP_WALLET_INFURAID,
-      chainId: 97,
       rpc: this.rpc
     })
     try {
@@ -244,8 +278,7 @@ export class BlockChain {
       if (accounts && accounts.length > 0) {
         if (AppModule.accountId !== accounts[0]) {
           await UserModule.LogOut()
-          AppModule.updateAccount(accounts[0])
+          location.reload()
-          EventBus.$emit(ACCOUNT_CHANGE)
         }
       }
     })
@@ -254,9 +287,7 @@ export class BlockChain {
     this.provider.on('chainChanged', async(chainId: string) => {
       console.log('chainChanged', chainId)
       const chainIdNum = parseInt(chainId)
-      if (chainIdNum !== AppModule.chainId) {
+      await this.checkChain(chainIdNum)
-        EventBus.$emit(NEED_CHANGE_CHAIN)
-      }
     })
 
     // Subscribe to session disconnection