Skip to content

D
dapp-web
提交 bed89907 authored 作者: zhanglian's avatar zhanglian
浏览文件
操作

pc 错误的网络

上级 7fac6c4a
隐藏空白字符变更
内嵌 并排
正在显示 包含 248 行增加 和 17 行删除
src/assets/styles/reset.css
浏览文件 @ bed89907
/* 初始样式 */
*{margin:0;padding: 0;}
*{margin:0;padding: 0;line-height: 1;}
*,
*::before,
*::after {
......
src/components/EDialogEmpty.vue 0 → 100644
浏览文件 @ bed89907
<template>
<div class="dialog-wrap" v-if="show">
<div class="dialog">
<slot />
</div>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
},
props: {
title: {
type: String,
defoult: '提示'
},
visible: {
type: Boolean,
type: false
}
},
methods: {
close() {
this.show = false
this.$emit('close')
}
},
created() {
this.show = this.visible
},
watch: {
visible() {
this.show = this.visible
}
}
}
</script>
<style scoped lang="scss">
.dialog-wrap {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba($color: #000000, $alpha: 0.7);
z-index: 100;
.dialog {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 10rem;
height: 6rem;
}
}
</style>
src/components/Navigation.vue
浏览文件 @ bed89907
......@@ -11,24 +11,37 @@
</div>
</div>
<div class="right">
<div class="option" style="cursor: auto;" v-if="walletConnected">{{$hideMoreText(currentWalletAddress, 7, 0)}}</div>
<div class="option style-2" v-else @click="toCannectWallet">{{$t('connectWallet')}}</div>
<div class="option style-2" v-if="!walletConnected" @click="toCannectWallet">{{$t('connectWallet')}}</div>
<div class="option wrong-network" v-else-if="!isValidChaindId" @click="showConnetChain = true">{{$t('errChain')}}</div>
<div class="option" style="cursor: auto;" v-else>{{$hideMoreText(currentWalletAddress, 7, 0)}}</div>
<div class="option language">
<div>{{language}} <i class="el-icon-arrow-down" /></div>
<ul class="lang-list" @click="toChangeLanguage($event.target.dataset.lang)">
<li v-for="(item,index) in langList" :key="index" :data-lang="item.value" class="lang-item">
{{item.label}}
</li>
</ul>
<div class="lang-list-area">
<ul class="lang-list" @click="toChangeLanguage($event.target.dataset.lang)">
<li v-for="(item,index) in langList" :key="index" :data-lang="item.value" class="lang-item">
{{item.label}}
</li>
</ul>
</div>
</div>
</div>
</div>
<EDialogEmpty :title="$t('chooseToken')" :visible="showConnetChain">
<div class="choose-chain-content">
<img src="@/assets/images/public/closeGrayCircle.png" alt="" class="close pointer" @click="showConnetChain = false">
<div class="_title">{{$t('errChain')}}</div>
<div class="text">{{$t('errChainText')}}</div>
</div>
</EDialogEmpty>
</div>
</template>
<script>
import i18n, { setLanguage, getCurrentLanguage } from '../i18n';
import { createNamespacedHelpers } from 'vuex';
import { validChainIds } from '@/networkConfig';
import EDialogEmpty from './EDialogEmpty';
const { mapMutations: mapMutationsWallet, mapState: mapStateWallet } = createNamespacedHelpers('wallet');
......@@ -37,6 +50,7 @@ export default {
props: {
},
components: { EDialogEmpty },
data() {
return {
isPro: false,
......@@ -48,13 +62,18 @@ export default {
{ label: '日本語', value: 'ja' },
{ label: '한글', value: 'ko' },
],
showConnetChain: false,
};
},
computed: {
walletConnected() {
return this.$store.getters.walletConnected;
},
currentWalletAddress(){
isValidChaindId() {
let chainId = this.$store.getters.chainId;
return validChainIds.includes(chainId - 0);
},
currentWalletAddress() {
return this.$store.getters.currentWalletAddress
},
navList() {
......@@ -80,6 +99,9 @@ export default {
},
toCannectWallet() {
this.CHANGE_CONNECT_WALLET_MODAL_STATUS(true);
},
closeConnetChain() {
this.showConnetChain = false
}
},
created() {
......@@ -180,7 +202,7 @@ export default {
align-items: center;
margin-right: 29*$vpx;
cursor: pointer;
&.style-2{
&.style-2 {
width: auto;
padding: 0 28*$vpx;
}
......@@ -188,22 +210,68 @@ export default {
.language {
position: relative;
&:hover {
.lang-list {
.lang-list-area {
display: block;
}
}
.lang-list {
.lang-list-area {
position: absolute;
top: 100%;
left: 0;
line-height: 30*$vpx;
background: rgba(255, 255, 255, 0.2);
width: 100%;
border-radius: 5px;
padding: 10*$vpx 20*$vpx;
padding-top: 10*$vpx;
display: none;
.lang-list {
background: rgba(255, 255, 255, 0.2);
width: 100%;
border-radius: 5px;
padding: 10*$vpx 20*$vpx;
.lang-item {
line-height: 30*$vpx;
&:hover{
color: $themeColor;
}
}
}
}
}
.wrong-network {
width: auto;
min-width: 133*$vpx;
padding: 0 10*$vpx;
height: 47*$vpx;
background: rgba(255, 26, 26, 0.8);
border-radius: 23*$vpx;
color: #FFFFFF;
white-space: nowrap;
}
}
.choose-chain-content {
width: 6rem;
height: 2rem;
border-radius: .2rem;
background: #FFF;
margin: 0 auto;
position: relative;
text-align: center;
color: #333;
padding-top: .32rem;
.close {
width: .3rem;
height: .3rem;
position: absolute;
top: .18rem;
right: .18rem;
}
._title {
font-size: .32rem;
color: #333;
}
.text {
font-size: .26rem;
color: #333;
margin-top: .76rem;
}
}
}
</style>
src/i18n/locale/en.js
浏览文件 @ bed89907
......@@ -18,5 +18,7 @@ export default {
OK: 'OK',
connectMetamask:"Connect Metamask",
installMetamask:"Install Metamask",
errChain: "Wrong network",
errChainText: "Please connect to payment network in your wallet",
}
src/i18n/locale/ja.js
浏览文件 @ bed89907
......@@ -18,4 +18,6 @@ export default {
OK: 'わかった',
connectMetamask:"メタマスクを接続する",
installMetamask:"Metamaskをインストールする",
errChain: "間違ったネットワーク",
errChainText: "ウォレットの支払いネットワークに接続してください",
}
\ No newline at end of file
src/i18n/locale/ko.js
浏览文件 @ bed89907
......@@ -18,5 +18,7 @@ export default {
OK: '확인',
connectMetamask:"메타마스크 연결",
installMetamask:"메타마스크 설치",
errChain: "잘못된 네트워크",
errChainText: "지갑의 결제 네트워크에 연결하세요",
}
\ No newline at end of file
src/i18n/locale/zh.js
浏览文件 @ bed89907
......@@ -18,4 +18,6 @@ export default {
OK: '好的',
connectMetamask: '连接Metamask',
installMetamask: '安装Metamask',
errChain: "错误的网络",
errChainText: "请在您的钱包中连接到支付网络",
}
src/networkConfig.js 0 → 100644
浏览文件 @ bed89907
export const newWorkInfo = {
60001: {
chainName: 'Thinkium Testnet Chain 1',
nameKey: 'thinkiumText1',
rpc: 'https://test1.thinkiumrpc.net',
chainId: '60001',
symbol: 'TKM',
browser: 'https://test1.thinkiumscan.net',
},
60002: {
chainName: 'Thinkium Testnet Chain 2',
nameKey: 'thinkiumText2',
rpc: 'https://test2.thinkiumrpc.net',
chainId: '60002',
symbol: 'TKM',
browser: 'https://test2.thinkiumscan.net',
},
60103: {
chainName: 'Thinkium Testnet Chain 103',
nameKey: 'thinkiumText103',
rpc: 'https://test103.thinkiumrpc.net',
chainId: '60103',
symbol: 'TKM',
browser: 'https://test103.thinkiumscan.net',
},
70001: {
chainName: 'Thinkium Mainnet Chain 1',
nameKey: 'thinkiumPro1',
rpc: 'https://proxy1.thinkiumrpc.net/',
chainId: '70001',
symbol: 'TKM',
browser: 'https://chain1.thinkiumscan.net',
},
70002: {
chainName: 'Thinkium Mainnet Chain 2',
nameKey: 'thinkiumPro2',
rpc: 'https://proxy2.thinkiumrpc.net/',
chainId: '70002',
symbol: 'TKM',
browser: 'https://chain2.thinkiumscan.net',
},
70103: {
chainName: 'Thinkium Mainnet Chain 103',
nameKey: 'thinkiumPro103',
rpc: 'https://proxy103.thinkiumrpc.net/',
chainId: '70103',
symbol: 'TKM',
browser: 'https://chain103.thinkiumscan.net',
},
50001: {
chainName: 'Thinkium Testnet Chain 1',
nameKey: 'thinkiumText1',
rpc: 'http://dev1.chainopen.cn/',
chainId: '50001',
symbol: 'TKM',
browser: 'https://test1.thinkiumscan.net',
},
50002: {
chainName: 'Thinkium Testnet Chain 2',
nameKey: 'thinkiumText2',
rpc: 'http://dev2.chainopen.cn/',
chainId: '50002',
symbol: 'TKM',
browser: 'https://test2.thinkiumscan.net',
},
50103: {
chainName: 'Thinkium Testnet Chain 103',
nameKey: 'thinkiumText103',
rpc: 'http://dev103.chainopen.cn/',
chainId: '50103',
symbol: 'TKM',
browser: 'https://test103.thinkiumscan.net',
},
}
let chainIdConfig = {
'localhost:8081': [60001, 97],
'bridge-test.chainopen.cn': [60001, 97],
'bridge-beta.thinkium.net': [60001, 97],
}
export const validChainIds = chainIdConfig[window.location.host];
src/router/pcIndex.js
浏览文件 @ bed89907
import Vue from 'vue'
import VueRouter from 'vue-router'
import home from '../views/home.vue'
import thinkiumBridge from '../views/thinkiumBridge/pcIndex.vue'
......
src/store/getters.js
浏览文件 @ bed89907
const getters = {
walletConnected: state => !!(state.wallet.currentWalletAddress && state.network.chainId), // 是否已连接钱包
currentWalletAddress: state => state.wallet.currentWalletAddress,
chainId: state => state.network.chainId,
};
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论