+ 链接弹窗

src/components/MConnectWallet.vue

+<template>
+    <div class="connect-wallet" v-if="showConnectWalletModal" @click.self="handleClose">
+        <div class="dialog" :show-close="false">
+            <div class="content">
+                <div class="title">{{$t('connectWallet')}}</div>
+                <ul class="wallet-list">
+                    <li class="wallet-item pointer" @click="connectMetaMask">
+                       {{checkEnvironment() ? $t('connectMetamask') : $t('installMetamask')}}
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex';
+import { connectWallet } from '@/service/loginService';
+import { checkEnvironment } from '@/api/demoMETAMASK'
+const { mapState, mapMutations } = createNamespacedHelpers('wallet')
+export default {
+    name: 'MConnectWallet',
+    components: {
+
+    },
+    data() {
+        return {
+            checkEnvironment,
+        }
+    },
+    computed: {
+        ...mapState(['showConnectWalletModal']),
+    },
+    methods: {
+        ...mapMutations(['CHANGE_CONNECT_WALLET_MODAL_STATUS']),
+        handleClose() {
+            this.CHANGE_CONNECT_WALLET_MODAL_STATUS(false)
+        },
+        connectMetaMask() {
+            if (checkEnvironment()) {
+                connectWallet();
+            } else {
+                window.open('https://metamask.io/')
+            }
+            this.CHANGE_CONNECT_WALLET_MODAL_STATUS(false)
+        },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.connect-wallet {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: rgba($color: #000000, $alpha: 0.7);
+    z-index: 100;
+    color: #333;
+    .content {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 15vh;
+        margin: 0 auto;
+        width: 6.6rem;
+        height: 6rem;
+        background: #FFF;
+        padding: .39rem .32rem .78rem;
+        .title {
+            font-size: .3rem;
+            font-weight: 500;
+            color: #333;
+            margin-bottom: .38rem;
+        }
+        .wallet-list {
+            padding: .2rem;
+            .wallet-item {
+                height: 1rem;
+                border: 1px solid #eee;
+                border-radius: .1rem;
+                font-size: .3rem;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                &:hover {
+                    border-color: $themeColor;
+                }
+            }
+        }
+    }
+}
+</style>

src/i18n/locale/en.js

@@ -16,5 +16,7 @@ export default {
   chooseToken: 'Choose Token',
   pleaseLinkTheWallet: 'Please link the wallet',
   OK: 'OK',
+  connectMetamask:"Connect Metamask",
+  installMetamask:"Install Metamask",
 
 }

src/i18n/locale/ja.js

@@ -16,4 +16,6 @@ export default {
   chooseToken: '選ぶToken',
   pleaseLinkTheWallet: 'ウォレットをリンクしてください',
   OK: 'わかった',
+  connectMetamask:"メタマスクを接続する",
+  installMetamask:"Metamaskをインストールする",
 }
\ No newline at end of file

src/i18n/locale/ko.js

@@ -16,5 +16,7 @@ export default {
   chooseToken: '선택하다Token',
   pleaseLinkTheWallet: '지갑을 연결해주세요',
   OK: '확인',
+  connectMetamask:"메타마스크 연결",
+  installMetamask:"메타마스크 설치",
 
 }
\ No newline at end of file

src/i18n/locale/zh.js

@@ -16,4 +16,6 @@ export default {
   chooseToken: '选择Token',
   pleaseLinkTheWallet: '请链接钱包',
   OK: '好的',
+  connectMetamask: '连接Metamask',
+  installMetamask: '安装Metamask',
 }

src/store/modules/wallet.js

@@ -5,20 +5,25 @@ const state = {
     currentWalletAddress: '',
     interfaceSignature: '',
     expireTime: '',
+    showConnectWalletModal: false,
     
 };
 
 
 const mutations = {
-   SET_CURRENT_WALLET_ADDRESS:  (state, address) => {
-     state.currentWalletAddress = address;
-   },
-   SET_INTERFACE_SIGNATURE: (state, signature) => {
-     state.interfaceSignature = signature;
-   },
-   SET_EXPIRE_TIME: (state, expireTime) => {
+  SET_CURRENT_WALLET_ADDRESS:  (state, address) => {
+    state.currentWalletAddress = address;
+  },
+  SET_INTERFACE_SIGNATURE: (state, signature) => {
+    state.interfaceSignature = signature;
+  },
+  SET_EXPIRE_TIME: (state, expireTime) => {
     state.expireTime = expireTime;
-   }
+  },
+  CHANGE_CONNECT_WALLET_MODAL_STATUS: (state, status) => {
+    console.log('--status', status);
+    state.showConnectWalletModal = status;
+  },
 
 }
 

src/views/thinkiumBridge/thinkiumBridge.vue

@@ -50,6 +50,7 @@
                 </li>
             </ul>
         </EDialog>
+        <MConnectWallet/>
         <van-loading class="loading-bg" type="spinner" color="#303030" size="24px" v-show="pageLoading" />
     
     </div>
@@ -70,8 +71,9 @@ import EDialog from '@/components/EDialog.vue';
 import { createNamespacedHelpers } from 'vuex';
 import { getTokenList } from '@/utils/data/tokenList'
 import { connectWallet } from '@/service/loginService'
+import MConnectWallet from '@/components/MConnectWallet.vue'
 
-const { mapState: mapStateWallet } = createNamespacedHelpers('wallet');
+const { mapState: mapStateWallet, mapMutations: mapMutationsWallet } = createNamespacedHelpers('wallet');
 const { mapState: mapStateNetwork } = createNamespacedHelpers('network');
 
 const erc20Abi = require('../../abi/ERC20.json');
@@ -140,9 +142,11 @@ export default {
         }
     },
     components: {
-        EDialog
+        EDialog,
+        MConnectWallet
     },
     methods: {
+        ...mapMutationsWallet(['CHANGE_CONNECT_WALLET_MODAL_STATUS']),
         async init() {
             this.tokenListOrigin = getTokenList(this.chainId);
             this.tokenListTKM = this.getTokensByChainName('thk') || [];
@@ -366,7 +370,7 @@ export default {
 
         },
         toCannectWallet() {
-            connectWallet()
+            this.CHANGE_CONNECT_WALLET_MODAL_STATUS(true);
         }
     },
     directives: {