增加连接钱包的代码

.env

@@ -0,0 +1,2 @@
+VUE_APP_WALLET_INFURAID='e7743d46923911fa8850619b7a7f6d9d'
+VUE_APP_CHAIN_ID=97

.env.development

@@ -0,0 +1,3 @@
+VUE_APP_WALLET_INFURAID='e7743d46923911fa8850619b7a7f6d9d'
+VUE_APP_CHAIN_ID=97
+VUE_APP_CHAIN_RPC='https://data-seed-prebsc-1-s1.binance.org:8545/'

.env.production

@@ -0,0 +1,3 @@
+VUE_APP_WALLET_INFURAID='e7743d46923911fa8850619b7a7f6d9d'
+VUE_APP_CHAIN_ID=97
+VUE_APP_CHAIN_RPC='https://data-seed-prebsc-1-s1.binance.org:8545/'

src/components/market/ItemDetail.vue

@@ -153,8 +153,8 @@ export default class extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-@import '@/scss/breakpoints.scss';
-@import '@/scss/tooltip.scss';
+@import '../../scss/breakpoints.scss';
+@import '../../scss/tooltip.scss';
 .root {
   display: flex;
   flex-direction: column;

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">
+      <button 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">Log Out</label>
+      <label class="navItem" @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">
@@ -37,6 +37,7 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
+import { BlockChain } from '@/utils/blockchain'
 
 @Component({
   name: 'MobileTop',
@@ -47,12 +48,21 @@ import { Component, Vue } from 'vue-property-decorator'
 export default class extends Vue {
   menuShow = false
   subShow = false
+  bc = new BlockChain();
   toggleMenu() {
     this.menuShow = !this.menuShow
     if (!this.menuShow) {
       this.subShow = false
     }
   }
+
+  async collectToWallet() {
+    return this.bc.connect()
+  }
+
+  async disconnectWallet() {
+    return this.bc.disconnect()
+  }
 }
 </script>
 

src/components/market/TopMenu.vue

@@ -25,7 +25,7 @@
         <div class="contact">
           <span class="span">Contact Us</span>
         </div>
-        <button v-if="!walletCollected" class="general-btn connectButton">
+        <button v-if="!walletCollected" @click="collectToWallet" class="general-btn connectButton">
           <span>Connect Wallet</span>
         </button>
         <img
@@ -45,6 +45,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import TopUserInfo from '@/components/market/TopUserInfo.vue'
+import { BlockChain } from '@/utils/blockchain'
 
 @Component({
   name: 'Navbar',
@@ -53,6 +54,15 @@ import TopUserInfo from '@/components/market/TopUserInfo.vue'
 export default class extends Vue {
   walletCollected = false;
   infoPanelShow = false
+  bc = new BlockChain();
+
+  async collectToWallet() {
+    return this.bc.connect()
+  }
+
+  async disconnectWallet() {
+    return this.bc.disconnect()
+  }
 }
 </script>
 

src/components/market/TopUserInfo.vue

@@ -24,7 +24,7 @@
         <span class="itemName">Wallet</span>
       </div>
       <div class="item">
-        <span class="itemName">Logout</span>
+        <span class="itemName" @click="disconnectWallet">Logout</span>
       </div>
     </div>
   </div>
@@ -32,12 +32,18 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
+import { BlockChain } from '@/utils/blockchain'
 
 @Component({
   name: 'TopUserInfo',
   components: {}
 })
 export default class extends Vue {
+  bc = new BlockChain();
+
+  async disconnectWallet() {
+    return this.bc.disconnect()
+  }
 }
 </script>
 

src/decorators/singleton.decorator.ts

@@ -0,0 +1,28 @@
+/**
+ * @singleton
+ * class Test {}
+ * new Test() === new Test() // returns `true`
+ * 也可以不使用 decorator
+ * const TestSingleton = singleton(Test)
+ * new TestSingleton() === new TestSingleton() //returns 'true'
+ */
+
+// eslint-disable-next-line symbol-description
+export const SINGLETON_KEY = Symbol()
+
+export type Singleton<T extends new (...args: any[]) => any> = T & {
+  [SINGLETON_KEY]: T extends new (...args: any[]) => infer I ? I : never
+}
+export const singleton = <T extends new (...args: any[]) => any>(classTarget: T) =>
+  new Proxy(classTarget, {
+    construct(target: Singleton<T>, argumentsList, newTarget) {
+      // Skip proxy for children
+      if (target.prototype !== newTarget.prototype) {
+        return Reflect.construct(target, argumentsList, newTarget)
+      }
+      if (!target[SINGLETON_KEY]) {
+        target[SINGLETON_KEY] = Reflect.construct(target, argumentsList, newTarget)
+      }
+      return target[SINGLETON_KEY]
+    }
+  })

src/utils/blockchain.ts

@@ -0,0 +1,53 @@
+import { singleton } from '@/decorators/singleton.decorator'
+import WalletConnectProvider from '@walletconnect/web3-provider'
+import Web3 from 'web3'
+
+@singleton
+export class BlockChain {
+  provider: WalletConnectProvider
+  web3: Web3
+
+  constructor() {
+    const rpc = { 97: 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!),
+      rpc
+    })
+    console.log('wallet connected: ', this.isWalletConnect)
+    if (this.isWalletConnect) {
+      this.connect()
+    }
+  }
+
+  get isWalletConnect() {
+    return this.provider?.wc.connected
+  }
+
+  public async connect() {
+    //  Enable session (triggers QR Code modal)
+    await this.provider.enable()
+    this.web3 = new Web3(<any> this.provider)
+  }
+
+  public async disconnect() {
+    return this.provider?.disconnect()
+  }
+
+  public subscribeToEvents = () => {
+    // Subscribe to accounts change
+    this.provider.on('accountsChanged', (accounts: string[]) => {
+      console.log(accounts)
+    })
+
+    // Subscribe to chainId change
+    this.provider.on('chainChanged', (chainId: number) => {
+      console.log(chainId)
+    })
+
+    // Subscribe to session disconnection
+    this.provider.on('disconnect', (code: number, reason: string) => {
+      console.log(code, reason)
+    })
+  }
+}

src/views/Item.vue

@@ -24,7 +24,7 @@ import MobileTop from '@/components/market/MoileTop.vue'
 export default class Item extends Vue {}
 </script>
 <style lang="scss" scoped>
-@import '@/scss/breakpoints.scss';
+@import '../scss/breakpoints.scss';
 .root {
   display: flex;
   flex-direction: column;
@@ -50,7 +50,7 @@ export default class Item extends Vue {}
     display: none;
   }
 }
-@media (min-width: 1024px) and (max-width: 1439px) {
+@include media('>=desktop', '<wide'){
   .root {
     font-size: 11px;
   }

src/views/Market.vue

@@ -34,6 +34,7 @@ export default class Market extends Vue {
 }
 </script>
 <style lang="scss" scoped>
+@import '../scss/breakpoints.scss';
 .root {
   display: flex;
   flex-direction: column;
@@ -50,7 +51,7 @@ export default class Market extends Vue {
   display: none;
 }
 
-@media (max-width: 1023px) {
+@include media('<desktop') {
   .container {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;