完善钱包连接流程

src/api/User.ts

@@ -7,6 +7,7 @@ export interface IUser {
   locked: boolean
   avatar: string
   password: string
+  account: string
 }
 
 export const defaultUser: IUser = {
@@ -16,7 +17,8 @@ export const defaultUser: IUser = {
   comment: '',
   locked: false,
   password: '',
-  avatar: ''
+  avatar: '',
+  account: ''
 }
 export const getUserInfo = (data: any) =>
   request({

src/components/market/MoileTop.vue

@@ -12,7 +12,7 @@
     <div class="nav overflow" :class="{'show': menuShow}">
       <label class="navItem">Thetan Boxes</label>
       <label class="navItem dash">Marketplace</label>
-      <button class="general-btn connectButton mobile" @click="collectToWallet">
+      <button v-if="!walletCollected" class="general-btn connectButton mobile" @click="collectToWallet">
         <span>Connect Wallet</span>
       </button>
       <label class="navItem contact">Contact us</label>
@@ -20,7 +20,7 @@
         <div>My Profile</div>
         <img src="data:image/svg+xml,%3csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0.0507022 16.0711L1.46491 17.4854L9.9502 9.00007L1.46492 0.514787L0.0507015 1.929L7.12177 9.00007L0.0507022 16.0711Z' fill='%23BCADF2' /%3e %3c/svg%3e">
       </label>
-      <label class="navItem" @click="disconnectWallet">Log Out</label>
+      <label class="navItem" v-if="walletCollected" @click="disconnectWallet">Log Out</label>
       <div class="navChild" :class="{'show': subShow}">
         <label class="navItem profile" @click="subShow=!subShow">
           <img class="arrowIcon" src="data:image/svg+xml,%3csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0.0507022 16.0711L1.46491 17.4854L9.9502 9.00007L1.46492 0.514787L0.0507015 1.929L7.12177 9.00007L0.0507022 16.0711Z' fill='%23BCADF2' /%3e %3c/svg%3e">
@@ -38,6 +38,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { BlockChain } from '@/utils/blockchain'
+import { AppModule } from '@/store/modules/app'
 
 @Component({
   name: 'MobileTop',
@@ -49,6 +50,11 @@ export default class extends Vue {
   menuShow = false
   subShow = false
   bc = new BlockChain();
+
+  get walletCollected() {
+    return AppModule.walletConnected
+  }
+
   toggleMenu() {
     this.menuShow = !this.menuShow
     if (!this.menuShow) {

src/components/market/TopMenu.vue

@@ -46,16 +46,20 @@
 import { Component, Vue } from 'vue-property-decorator'
 import TopUserInfo from '@/components/market/TopUserInfo.vue'
 import { BlockChain } from '@/utils/blockchain'
+import { AppModule } from '@/store/modules/app'
 
 @Component({
   name: 'Navbar',
   components: { TopUserInfo }
 })
 export default class extends Vue {
-  walletCollected = false;
   infoPanelShow = false
   bc = new BlockChain();
 
+  get walletCollected() {
+    return AppModule.walletConnected
+  }
+
   async collectToWallet() {
     return this.bc.connect()
   }

src/components/market/TopUserInfo.vue

@@ -2,7 +2,7 @@
   <div class="position dropdown anim">
     <span class="name">SEgGQ58HRlLd</span>
     <div class="divCode">
-      <span class="address">0x42448c...fc2c0231</span>
+      <span class="address">{{showAccount}}</span>
       <img
         class="icCopy" width="24" height="24"
         src="data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M20 9H11C9.89543 9 9 9.89543 9 11V20C9 21.1046 9.89543 22 11 22H20C21.1046 22 22 21.1046 22 20V11C22 9.89543 21.1046 9 20 9Z' stroke='%23BCADF2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3e %3cpath d='M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5' stroke='%23BCADF2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e">
@@ -33,6 +33,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { BlockChain } from '@/utils/blockchain'
+import { AppModule } from '@/store/modules/app'
+import { UserModule } from '@/store/modules/user'
 
 @Component({
   name: 'TopUserInfo',
@@ -41,6 +43,14 @@ import { BlockChain } from '@/utils/blockchain'
 export default class extends Vue {
   bc = new BlockChain();
 
+  get walletCollected() {
+    return AppModule.walletConnected
+  }
+
+  get showAccount() {
+    return UserModule.accountShow
+  }
+
   async disconnectWallet() {
     return this.bc.disconnect()
   }

src/store/modules/app.ts

@@ -10,12 +10,14 @@ export enum DeviceType {
 export interface IAppState {
   device: DeviceType
   size: string
+  walletConnected: boolean
 }
 
 @Module({ dynamic: true, store, name: 'app' })
 class App extends VuexModule implements IAppState {
   public device = DeviceType.Desktop;
   public size = getSize() || 'medium'
+  public walletConnected = false;
 
   @Action
   public ToggleDevice(device: DeviceType) {
@@ -27,6 +29,11 @@ class App extends VuexModule implements IAppState {
     this.SET_SIZE(size)
   }
 
+  @Action
+  public updateWalletStatus(val: boolean) {
+    this.SET_WALLETSTATUS(val)
+  }
+
   @Mutation
   private TOGGLE_DEVICE(device: DeviceType) {
     this.device = device
@@ -37,6 +44,11 @@ class App extends VuexModule implements IAppState {
     this.size = size
     setSize(this.size)
   }
+
+  @Mutation
+  private SET_WALLETSTATUS(val: boolean) {
+    this.walletConnected = val
+  }
 }
 
 export const AppModule = getModule(App)

src/store/modules/user.ts

@@ -19,6 +19,7 @@ export interface IUserState {
   permissions: string[][]
   level: number
   sex?: string
+  account: string
 }
 
 @Module({ dynamic: true, store, name: 'user' })
@@ -32,6 +33,7 @@ class User extends VuexModule implements IUserState {
   public email = ''
   public level = 999
   public sex = '0'
+  public account = ''
 
   @Action
   public async Login(userInfo: { username: string, password: string }) {
@@ -92,6 +94,16 @@ class User extends VuexModule implements IUserState {
     this.token = token
   }
 
+  @Mutation
+  private SET_ACCOUNT(account: string) {
+    this.account = account
+  }
+
+  @Action
+  public updateAccount(account: string) {
+    this.SET_ACCOUNT(account)
+  }
+
   @Action
   public async updatePageToken(token: string) {
     this.SET_TOKEN(token)
@@ -134,6 +146,14 @@ class User extends VuexModule implements IUserState {
     }
     this.permissions = results
   }
+
+  public get accountShow() {
+    if (this.account.length > 0) {
+      return this.account.substring(0, 8) + '...' + this.account.substring(this.account.length - 8)
+    } else {
+      return ''
+    }
+  }
 }
 
 export const UserModule = getModule(User)

src/utils/blockchain.ts

@@ -1,5 +1,7 @@
 import { singleton } from '@/decorators/singleton.decorator'
 import WalletConnectProvider from '@walletconnect/web3-provider'
+import { AppModule } from '@/store/modules/app'
+import { UserModule } from '@/store/modules/user'
 import Web3 from 'web3'
 
 @singleton
@@ -8,16 +10,20 @@ export class BlockChain {
   web3: Web3
 
   constructor() {
-    const rpc = { 97: process.env.VUE_APP_CHAIN_RPC! }
+    const chainId = parseInt(process.env.VUE_APP_CHAIN_ID!)
+    const rpc: any = { }
+    rpc[chainId] = process.env.VUE_APP_CHAIN_RPC!
     this.provider = new WalletConnectProvider({
       infuraId: process.env.VUE_APP_WALLET_INFURAID,
-      chainId: parseInt(process.env.VUE_APP_CHAIN_ID!),
+      chainId,
       rpc
     })
     console.log('wallet connected: ', this.isWalletConnect)
+    AppModule.updateWalletStatus(this.isWalletConnect)
     if (this.isWalletConnect) {
       this.connect()
     }
+    this.subscribeToEvents()
   }
 
   get isWalletConnect() {
@@ -28,6 +34,11 @@ export class BlockChain {
     //  Enable session (triggers QR Code modal)
     await this.provider.enable()
     this.web3 = new Web3(<any> this.provider)
+    const accounts = await this.web3.eth.getAccounts()
+    console.log('accountsLogin: ', accounts)
+    if (accounts && accounts.length > 0) {
+      UserModule.updateAccount(accounts[0])
+    }
   }
 
   public async disconnect() {
@@ -37,7 +48,10 @@ export class BlockChain {
   public subscribeToEvents = () => {
     // Subscribe to accounts change
     this.provider.on('accountsChanged', (accounts: string[]) => {
-      console.log(accounts)
+      console.log('accountsChanged: ', accounts)
+      if (accounts && accounts.length > 0) {
+        UserModule.updateAccount(accounts[0])
+      }
     })
 
     // Subscribe to chainId change