修改nft列表nftid的显示方式

.env.development

@@ -1,4 +1,9 @@
 VUE_APP_WALLET_INFURAID='e7743d46923911fa8850619b7a7f6d9d'
+VUE_APP_BASE_API='http://game2006api-test.kingsome.cn'
 VUE_APP_CHAIN_ID=1338
 VUE_APP_CHAIN_RPC='http://192.168.100.22:8545'
-VUE_APP_BASE_API='http://game2006api-test.kingsome.cn'
+VUE_APP_CHAIN_NAME='Smart Chain - Testnet'
+VUE_APP_CHAIN_EXPLORERURL = 'https://testnet.bscscan.com'
+VUE_APP_CHAIN_CURRENCY_NAME='name'
+VUE_APP_CHAIN_CURRENCY_SYMBOL='BNB'
+VUE_APP_CHAIN_CURRENCY_DECIMALS=18

.env.production

@@ -2,3 +2,8 @@ VUE_APP_WALLET_INFURAID='e7743d46923911fa8850619b7a7f6d9d'
 VUE_APP_CHAIN_ID=97
 VUE_APP_CHAIN_RPC='https://data-seed-prebsc-1-s1.binance.org:8545'
 VUE_APP_BASE_API='https://game2006api.kingsome.cn'
+VUE_APP_CHAIN_NAME='Smart Chain - Testnet'
+VUE_APP_CHAIN_EXPLORERURL = 'https://testnet.bscscan.com'
+VUE_APP_CHAIN_CURRENCY_NAME='name'
+VUE_APP_CHAIN_CURRENCY_SYMBOL='BNB'
+VUE_APP_CHAIN_CURRENCY_DECIMALS=18

src/components/market/NftInfo.vue

@@ -1,14 +1,16 @@
 <template>
+  <div class="card-outlet">
+    <div class="nft-id">#{{data.id}}</div>
   <a class="card-root" :href="data.id? `/item/${data.id}`: 'javascript:void(0)'">
     <div class="nft-id">#{{data.id}}</div>
     <nft-item :data="data" ></nft-item>
     <div class="attr-div">
-      <div class="one-col-info nft-id-mobile">
-        <div class="one-info">
-          <div class="info-title">Token ID</div>
-          <div class="info-val token-color">#{{data.id}}</div>
-        </div>
-      </div>
+<!--      <div class="one-col-info nft-id-mobile">-->
+<!--        <div class="one-info">-->
+<!--          <div class="info-title">Token ID</div>-->
+<!--          <div class="info-val token-color">#{{data.id}}</div>-->
+<!--        </div>-->
+<!--      </div>-->
       <div class="one-col-info">
         <div class="one-info">
           <div class="info-title">Level</div>
@@ -43,6 +45,7 @@
       </div>
     </div>
   </a>
+  </div>
 </template>
 
 <script lang="ts">
@@ -69,6 +72,15 @@ export default class extends Vue {
 </script>
 
 <style lang="scss" scoped>
+.card-outlet{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  .nft-id {
+    //display: none;
+  }
+}
   .card-root{
     font-family: 'zitic',serif;
     text-decoration: none;
@@ -82,6 +94,7 @@ export default class extends Vue {
     }
     .nft-id {
       color: #46E0F4;
+      display: unset;
     }
     .attr-div{
       border: 10px solid #211638;
@@ -127,6 +140,20 @@ export default class extends Vue {
     }
   }
   @media (max-width: 767px) {
+    .card-outlet{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      .nft-id {
+        width: 90%;
+        font-family: 'zitic',serif;
+        color: #46E0F4;
+        text-decoration: none;
+        margin-bottom: 5px;
+        display: unset;
+      }
+    }
     .card-root{
       width: 90%;
       flex-direction: row;

src/components/market/NftList.vue

@@ -99,4 +99,16 @@ export default class extends Vue {
     align-items: center;
   }
 }
+@media (min-width: 1024px) and (max-width: 1439px) {
+  .card-list{
+    font-size: 15px;
+  }
+}
+
+@media (min-width: 1439px) {
+  .card-list{
+    font-size: 16px;
+  }
+}
+
 </style>

src/store/modules/app.ts

@@ -87,6 +87,10 @@ class App extends VuexModule implements IAppState {
     this.canBuy = val
   }
 
+  public get hexChainId() {
+    return '0x' + this.chainId.toString(16)
+  }
+
   public get accountShow() {
     if (this.accountId.length >= 10) {
       return this.accountId.substring(0, 8) + '...' + this.accountId.substring(this.accountId.length - 8)

src/utils/blockchain.ts

@@ -3,6 +3,7 @@ import WalletConnectProvider from '@walletconnect/web3-provider'
 import Web3Modal, { isMobile } from 'web3modal'
 import { AppModule } from '@/store/modules/app'
 import Web3 from 'web3'
+import { MessageBox } from 'element-ui'
 
 @singleton
 export class BlockChain {
@@ -12,6 +13,7 @@ export class BlockChain {
 
   constructor() {
     const chainId = parseInt(process.env.VUE_APP_CHAIN_ID!)
+    AppModule.updateChainID(chainId)
     const rpc: any = { }
     rpc[chainId] = process.env.VUE_APP_CHAIN_RPC!
     const providerOptions = {
@@ -43,14 +45,31 @@ export class BlockChain {
     return !!this.web3Modal.cachedProvider
   }
 
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   public async connect() {
-    //  Enable session (triggers QR Code modal)
     try {
       this.provider = await this.web3Modal.connect()
       this.subscribeToEvents()
       this.web3 = new Web3(<any> this.provider)
       const accounts = await this.web3.eth.getAccounts()
       const chainId = await this.web3.eth.getChainId()
+      if (chainId !== AppModule.chainId) {
+        try {
+          await MessageBox.confirm(
+            'You need to connect to supported network',
+            'Wrong Network',
+            {
+              confirmButtonText: 'Switch to BSC network',
+              cancelButtonText: 'Cancel',
+              type: 'warning'
+            }
+          )
+          await this.switchEthereumChain()
+        } catch (err) {
+          return this.disconnect()
+        }
+      }
       console.log('chainId: ', chainId)
       console.log('accountsLogin: ', accounts)
       if (accounts && accounts.length > 0) {
@@ -68,7 +87,6 @@ export class BlockChain {
     }
     this.web3Modal.clearCachedProvider()
     AppModule.updateAccount('')
-    AppModule.updateChainID(0)
     AppModule.updateWalletStatus(false)
   }
 
@@ -92,6 +110,39 @@ export class BlockChain {
     })
   }
 
+  async switchEthereumChain() {
+    try {
+      await window.ethereum.request({
+        method: 'wallet_switchEthereumChain',
+        params: [{ chainId: AppModule.hexChainId }]
+      })
+    } catch (e: any) {
+      if (e.code === 4902) {
+        try {
+          await window.ethereum.request({
+            method: 'wallet_addEthereumChain',
+            params: [
+              {
+                chainId: AppModule.hexChainId,
+                chainName: process.env.VUE_APP_CHAIN_NAME,
+                nativeCurrency: {
+                  name: process.env.VUE_APP_CHAIN_CURRENCY_NAME,
+                  symbol: process.env.VUE_APP_CHAIN_CURRENCY_SYMBOL,
+                  decimals: parseInt(process.env.VUE_APP_CHAIN_CURRENCY_DECIMALS!)
+                },
+                blockExplorerUrls: [process.env.VUE_APP_CHAIN_EXPLORERURL],
+                rpcUrls: [process.env.VUE_APP_CHAIN_RPC]
+              }
+            ]
+          })
+        } catch (addError) {
+          console.error(addError)
+        }
+      }
+      // console.error(e)
+    }
+  }
+
   public async signPresale({ type, paymentTokenAddress, price, buyerAddress }:
                              {type: number
                                paymentTokenAddress: string