调整一些跟链有关的功能和界面

src/chain/ChainManager.ts

@@ -1,5 +1,5 @@
 import { singleton } from '@/decorators/singleton.decorator'
-import { BlockChain } from '@/utils/blockchain'
+import { Blockchain } from '@/chain/blockchain'
 import { getNonce } from '@/api/User'
 import { AppModule } from '@/store/modules/app'
 import { UserModule } from '@/store/modules/user'
@@ -7,9 +7,9 @@ import { Message } from 'element-ui'
 
 @singleton
 export default class ChainManager {
-  bc: BlockChain
+  bc: Blockchain
   constructor() {
-    this.bc = new BlockChain()
+    this.bc = new Blockchain()
     // EventBus.$on(NEED_NONCE, this.checkNance.bind(this))
   }
 

src/chain/blockchain.ts

@@ -3,13 +3,7 @@ import WalletConnectProvider from '@walletconnect/web3-provider'
 import { AppModule } from '@/store/modules/app'
 import Web3 from 'web3'
 import { ERC20ABI, MALL_ADDRESS } from '@/configs/config_chain'
-import {
-  ACCOUNT_CHANGE,
-  EventBus, NEED_CHANGE_CHAIN,
-  NEED_LOGIN,
-  NEED_NONCE,
-  SHOW_CHAIN_MODAL
-} from '@/utils/event-bus'
+import { EventBus, NEED_CHANGE_CHAIN, NEED_LOGIN, NEED_NONCE, SHOW_CHAIN_MODAL } from '@/utils/event-bus'
 import { UserModule } from '@/store/modules/user'
 import { chains, IChainData } from '@/configs/chains'
 import { isMobile } from '@/utils/resize'
@@ -27,7 +21,7 @@ const EIP721_DOMAIN_DATA = [
 const CACHE_KEY = 'cebg_chain_cache_key'
 
 @singleton
-export class BlockChain {
+export class Blockchain {
   provider:any
   web3: Web3
   currentChain = 0
@@ -216,7 +210,7 @@ export class BlockChain {
     )
   }
 
-  private async getCoinInstance(address: string) {
+  public async getCoinInstance(address: string) {
     if (this.coinInstanceMap.has(address)) {
       return this.coinInstanceMap.get(address)
     } else {
@@ -261,6 +255,7 @@ export class BlockChain {
       await this.provider?.disconnect()
       this.currentChain = 0
       this.walletType = 0
+      this.coinInstanceMap.clear()
       this.clearCachedProvider()
       AppModule.updateStep(0)
       AppModule.updateNonce('')
@@ -375,10 +370,16 @@ export class BlockChain {
     console.log('increaseAllowance: ', res)
   }
 
-  public parsePrice(price: number, decimals: number) {
-    const v = Math.pow(10, decimals)
-    const priceStr = (price / v) + ''
-    return this.web3.utils.toWei(priceStr)
+  /**
+   * 获取某种币的余额
+   * @param {string} address
+   * @param {string | null} account
+   * @return {Promise<any>}
+   */
+  public async getBalance(address: string, account: string | null) {
+    account = account || AppModule.accountId
+    const coinInstance: any = this.getCoinInstance(address)
+    return await coinInstance.methods.balanceOf(account).call()
   }
 
   public async signData(signObj: any, signer: string) {

src/components/index/DesktopHeader.vue

@@ -30,7 +30,7 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { AppModule } from '@/store/modules/app'
 import { UserModule } from '@/store/modules/user'
-import ChainManager from '@/utils/ChainManager'
+import ChainManager from '@/chain/ChainManager'
 
 declare module 'vue/types/vue' {
   interface Vue {

src/components/main/MainHeader.vue

@@ -69,9 +69,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { AppModule } from '@/store/modules/app'
-import { BlockChain } from '@/utils/blockchain'
 import { UserModule } from '@/store/modules/user'
-import { getNonce } from '@/api/User'
+import ChainManager from '@/chain/ChainManager'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -87,7 +86,7 @@ declare module 'vue/types/vue' {
 })
 export default class extends Vue {
   private dropShow = false
-  bc = new BlockChain();
+  chainManager = new ChainManager()
 
   changeSection(e: PointerEvent) {
     this.dropShow = false
@@ -98,23 +97,11 @@ export default class extends Vue {
   }
 
   async disconnectWallet() {
-    return this.bc.disconnect()
+    return this.chainManager.logout()
   }
 
   async collectToWallet() {
-    await this.bc.connect()
-    const preRequest: any = await getNonce({
-      account: AppModule.accountId,
-      net_id: AppModule.chainId
-    })
-    if (!preRequest.token_state) {
-      await UserModule.Login({
-        bcInstance: this.bc,
-        account: AppModule.accountId,
-        chainId: AppModule.chainId,
-        nonce: preRequest.nonce
-      })
-    }
+    return this.chainManager.login()
   }
 
   get logined() {

src/components/main/NftSection.vue

@@ -29,7 +29,7 @@ import { EventBus, PRESALE_BEGIN, PRESALE_ERROR, PRESALE_ORDER_GET, PRESALE_SUCC
 import { ElLoadingComponent } from 'element-ui/types/loading'
 import TimeLoader from '@/components/main/TimeLoader.vue'
 import { UserModule } from '@/store/modules/user'
-import ChainManager from '@/utils/ChainManager'
+import ChainManager from '@/chain/ChainManager'
 
 @Component({
   name: 'NftSection',

src/components/market/NftItem.vue

@@ -25,7 +25,8 @@ import { AppModule } from '@/store/modules/app'
 import { buyBox } from '@/api/Mall'
 import { EventBus, PRESALE_BEGIN, PRESALE_ERROR, PRESALE_ORDER_GET } from '@/utils/event-bus'
 import { UserModule } from '@/store/modules/user'
-import ChainManager from '@/utils/ChainManager'
+import ChainManager from '@/chain/ChainManager'
+import { parsePrice, formatPrice } from '@/utils/chain.util'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -60,8 +61,15 @@ export default class extends Vue {
   }
 
   get priceShow() {
-    const v = Math.pow(10, this.data.decimals!)
-    return (this.data.price! / v).toFixed(3)
+    if (this.data?.price ) {
+      if (this.data?.decimals) {
+        return formatPrice(this.data.price, this.data.decimals, 2)
+      } else {
+        return this.data.price
+      }
+    } else {
+      return '-'
+    }
   }
 
   get accountId() {
@@ -102,7 +110,7 @@ export default class extends Vue {
     EventBus.$emit(PRESALE_BEGIN)
     const account = AppModule.accountId
     try {
-      const price = this.chainManger.bc.parsePrice(this.data.priceDiscount!, this.data.decimals!)
+      const price = parsePrice(this.data.priceDiscount!, this.data.decimals!)
       const { nonce, signature } = await this.chainManger.bc.signPresale({
         type: this.data.recordId!,
         paymentTokenAddress: this.data.coinAddress!,

src/components/market/TopMenu.vue

@@ -13,13 +13,13 @@
         <a class="menu-item" href="/">
           <div class="item" >Home</div>
         </a>
-        <a class="menu-item" href="" @click.stop="comingSoon">
+        <a class="menu-item" href="javascript:void(0)" @click.stop="comingSoon">
           <div class="item" :class="{'active': currentTab==='official'}">
             Official Shop
             <div class="active-bottom" v-if="currentTab==='official'"></div>
           </div>
         </a>
-        <a class="menu-item" href="" @click.stop="comingSoon">
+        <a class="menu-item" href="javascript:void(0)" @click.stop="comingSoon">
           <div class="item " :class="{'active': currentTab==='market'}">
             Marketplace
             <div class="active-bottom" v-if="currentTab==='market'"></div>
@@ -93,7 +93,7 @@
 import { Component, Vue } from 'vue-property-decorator'
 import TopUserInfo from '@/components/market/TopUserInfo.vue'
 import { AppModule, DeviceType } from '@/store/modules/app'
-import ChainManager from '@/utils/ChainManager'
+import ChainManager from '@/chain/ChainManager'
 import { UserModule } from '@/store/modules/user'
 import AnimMenu from '@/components/core/AnimMenu.vue'
 

src/components/market/TopUserInfo.vue

@@ -37,16 +37,16 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import { BlockChain } from '@/utils/blockchain'
 import { AppModule } from '@/store/modules/app'
 import VueClipboard from 'vue-clipboard2'
+import ChainManager from '@/chain/ChainManager'
 
 @Component({
   name: 'TopUserInfo',
   components: {}
 })
 export default class extends Vue {
-  bc = new BlockChain();
+  chainManager = new ChainManager()
   close(e: any) {
     console.log(e)
     this.$emit('close-self')
@@ -69,7 +69,7 @@ export default class extends Vue {
   }
 
   async disconnectWallet() {
-    return this.bc.disconnect()
+    return this.chainManager.logout()
   }
 
   onCopy(e: any) {

src/components/market/nft/HeroNft.vue

@@ -31,7 +31,8 @@ import { AppModule } from '@/store/modules/app'
 import { buyBox } from '@/api/Mall'
 import { EventBus, PRESALE_BEGIN, PRESALE_ERROR, PRESALE_ORDER_GET } from '@/utils/event-bus'
 import { UserModule } from '@/store/modules/user'
-import ChainManager from '@/utils/ChainManager'
+import ChainManager from '@/chain/ChainManager'
+import { parsePrice } from '@/utils/chain.util'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -101,7 +102,7 @@ export default class HeroNft extends Vue {
     EventBus.$emit(PRESALE_BEGIN)
     const account = AppModule.accountId
     try {
-      const price = this.chainManger.bc.parsePrice(this.data.priceDiscount!, this.data.decimals!)
+      const price = parsePrice(this.data.priceDiscount!, this.data.decimals!)
       const { nonce, signature } = await this.chainManger.bc.signPresale({
         type: this.data.recordId!,
         paymentTokenAddress: this.data.coinAddress!,

src/components/market/wallet/PlaceholderPanel.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="placeholder-card" v-if="!mobile">
+
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { AppModule, DeviceType } from '@/store/modules/app'
+
+@Component({
+  name: 'PlaceholderPanel',
+  components: {
+  }
+})
+export default class PlaceholderPanel extends Vue {
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+}
+</script>
+<style lang="scss" scoped>
+.placeholder-card{
+  width: 25em;
+  height: 12.125em;
+}
+</style>

src/components/market/wallet/WalletPanel.vue

@@ -4,9 +4,13 @@
       <div class="label">Wallet</div>
     </div>
     <div class="horizonalBar"></div>
-    <div class="code"><span class="uuid">0x42448c...fc2c0231</span>
+    <div class="code"><span class="uuid">{{showAccount}}</span>
       <img
       class="icCopy" width="16" height="16"
+      v-clipboard:copy="account"
+      v-clipboard:success="onCopy"
+      v-clipboard:error="onCopyError"
+      alt="icCopy"
       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">
     </div>
     <div class="wallet">
@@ -17,6 +21,7 @@
     </div>
     <div class="horizonalBar"></div>
     <div class="wallet">
+      <placeholder-panel></placeholder-panel>
       <game-coin-card v-for="d in gameCoinList" :coin-data="d" :key="d.symbol"></game-coin-card>
     </div>
   </div>
@@ -26,10 +31,14 @@ import { Component, Vue } from 'vue-property-decorator'
 import TotalBalance from '@/components/market/wallet/TotalBalance.vue'
 import CoinCard, { ICoinData } from '@/components/market/wallet/CoinCard.vue'
 import GameCoinCard from '@/components/market/wallet/GameCoinCard.vue'
+import { AppModule } from '@/store/modules/app'
+import VueClipboard from 'vue-clipboard2'
+import PlaceholderPanel from '@/components/market/wallet/PlaceholderPanel.vue'
 
 @Component({
   name: 'WalletPanel',
   components: {
+    PlaceholderPanel,
     GameCoinCard,
     CoinCard,
     TotalBalance
@@ -69,6 +78,34 @@ export default class WalletPanel extends Vue {
       price: 100
     }
   ]
+
+  beforeMount() {
+    Vue.use(VueClipboard)
+  }
+
+  get showAccount() {
+    return AppModule.accountShow
+  }
+
+  get account() {
+    return AppModule.accountId
+  }
+
+  onCopy(e: any) {
+    this.$message({
+      message: 'You just copied accountId',
+      type: 'success',
+      duration: 5 * 1000
+    })
+  }
+
+  onCopyError(e: any) {
+    this.$message({
+      message: 'Failed to copy texts',
+      type: 'error',
+      duration: 5 * 1000
+    })
+  }
 }
 </script>
 <style lang="scss" scoped>

src/components/mobile/main/MobileHeader.vue

@@ -27,7 +27,7 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { AppModule } from '@/store/modules/app'
 import { UserModule } from '@/store/modules/user'
-import ChainManager from '@/utils/ChainManager'
+import ChainManager from '@/chain/ChainManager'
 import AnimMenu from '@/components/core/AnimMenu.vue'
 
 @Component({

src/utils/chain.util.ts

@@ -18,3 +18,22 @@ export function hasMetamask(): boolean {
     return false
   }
 }
+
+export function parsePrice(price: number, decimals: number) {
+  const n = 19 - decimals
+  return price + new Array(n).join('0')
+}
+
+export function formatPrice(price: number|string, decimals: number, fixed: number = 2) {
+  var str = price + ''
+  var length = str.length
+  str = str.padStart(decimals, '0')
+  if (decimals >= length) {
+    str = '0.'+str
+  } else {
+    var pos = length - decimals
+    str = str.slice(0, pos) + '.' + str.slice(pos);
+  }
+  str = str.slice(0, str.lastIndexOf('.') + fixed + 1)
+  return str.replace(/0+$/, '').replace(/\.+$/, '')
+}