Merge pull request #84 from eosnetworkfoundation/yarkin/bridge_fee_di…

…splay [0.10] Let bridge fee display change with selection of token.
eosnetworkfoundation · Nov 22, 2023 · 52be3c8 · 52be3c8
2 parents 7df823f + 6293396
commit 52be3c8
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "evm-bridge-frontend",
-  "version": "0.9.1",
+  "version": "0.10.1",
   "private": true,
   "scripts": {
     "dev": "vite",

diff --git a/src/App.vue b/src/App.vue
@@ -84,7 +84,7 @@ const selectLang = (val) => {
             </template>
             <b-dropdown-item @click="selectLang(k)" v-for="(v, k) in langs" :key="k">{{v}}</b-dropdown-item>
           </b-nav-item-dropdown>
-          <w3m-button balance="hide"/>
+          <w3m-button class="w3m-btn" balance="hide"/>
         </b-navbar-nav>
       </b-navbar>
     </div>
@@ -217,4 +217,9 @@ footer {
     font-weight: bold;
   }
 }
+
+.w3m-btn:hover {
+  --wui-color-inverse-100: #000;
+}
+
 </style>
diff --git a/src/i18n.js b/src/i18n.js
@@ -47,7 +47,7 @@ const messages = {
     'home.eos2evmDesc.p1': 'Please use a wallet that supports the EOS Network, such as Anchor, Wombat, TokenPocket or a centralized exchange such as OKX, Coinbase, etc.',
     'home.eos2evmDesc.p2': 'To transfer funds to the following EOS Contract Address, please fill in the Destination EOS EVM Address in the memo to complete the deposit to EOS EVM.',
     'home.eos2evmDesc.p3.testnet': 'Officially supported tokens include EOS and JUNGLE at this time.',
-    'home.eos2evmDesc.p3.mainnet': 'Officially supported tokens include EOS and USDT (EOS) at this time.',
+    'home.eos2evmDesc.p3.mainnet': 'Officially supported tokens include EOS, USDT, SEOS, BOX and USN at this time.',
 
     'home.addressCheck.invalidAddress': 'Address includes an illegal character',
     'home.addressCheck.invalid13Char': 'Invalid 13th character',
@@ -137,7 +137,7 @@ const messages = {
     'home.eos2evmDesc.p1': 'Anchor, Wombat, TokenPocket 등 EOS 네트워크를 지원하는 지갑 또는 OKX, Coinbase 등과 같은 중앙화 거래소를 사용해 주세요.',
     'home.eos2evmDesc.p2': '다음 EOS 컨트랙트 주소로 자금을 이체하려면 메모에 목적지 EOS EVM 주소를 입력하여 EOS EVM에 입금을 완료하세요.',
     'home.eos2evmDesc.p3.testnet': '현재 공식적으로 지원되는 토큰은 EOS와 JUNGLE 입니다.',
-    'home.eos2evmDesc.p3.mainnet': '현재 공식적으로 지원되는 토큰은 EOS와 USDT(EOS)입니다.',
+    'home.eos2evmDesc.p3.mainnet': '현재 공식적으로 지원되는 토큰은 EOS, USDT, SEOS, BOX와 USN입니다.',
 
     'home.addressCheck.invalidAddress': '주소에 잘못된 문자가 포함되어 있습니다.',
     'home.addressCheck.invalid13Char': '최대 문자 초과, 13개 이상을 넘을 수 없습니다.',
@@ -227,7 +227,7 @@ const messages = {
     'home.eos2evmDesc.p1':'请使用支持 EOS 网络的钱包，如 Anchor、Wombat、TokenPocket 或中心化交易所如 OKX、Coinbase 等。',
     'home.eos2evmDesc.p2': '如需转账至以下 EOS 合约地址，请在 memo 中填写目标 EOS EVM 地址，以完成向 EOS EVM 的充值。',
     'home.eos2evmDesc.p3.testnet': '目前官方支持的代币包括 EOS 和 JUNGLE。',
-    'home.eos2evmDesc.p3.mainnet': '目前官方支持的代币包括 EOS和 USDT(EOS)。',
+    'home.eos2evmDesc.p3.mainnet': '目前官方支持的代币包括 EOS, USDT, SEOS, BOX 和 USN。',
 
     'home.addressCheck.invalidAddress': '地址包含违规字符',
     'home.addressCheck.invalid13Char': '第 13 个字符无效',

diff --git a/src/index.scss b/src/index.scss
@@ -78,4 +78,10 @@ a.disabled {
 
 .modal.show{
   display: block;
-}
+}
+
+.nav-link:hover {
+  color: rgba(255,255,255,0.5);
+}
+
+
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -113,7 +113,7 @@
             <span v-else>~0.016 EOS</span>
             <span v-if="tokenName() != 'EOS'">
               <br>
-              {{ $t('home.bridgeFee') }} 0.01 EOS
+              {{ $t('home.bridgeFee') }} {{ egressFeeInEOS() }} EOS
             </span>
             <br>
             {{ $t('home.transferTime', ['~5 s']) }}
@@ -259,6 +259,7 @@ export default {
       extraWarning: '',
       tokenList: null,
       selectedToken: 0,
+      egressFee: '0',
       tokenListTestnet: [
         { name: 'EOS', addr: '', logo: 'images/eos.png' },
         { name: 'JUNGLE', addr: '0x4ea3b729669bF6C34F7B80E5D6c17DB71F89F21F', logo: 'images/jungle.png', erc20_contract: null },
@@ -395,6 +396,10 @@ export default {
 
     },
 
+    egressFeeInEOS() {
+      return Web3.utils.fromWei(this.egressFee);
+    },
+
     async checkChainID(network) {
       if (!network || !network.chain) {
         return
@@ -435,8 +440,15 @@ export default {
 
     },
 
-    onSelectToken(index) {
+    async onSelectToken(index) {
       this.selectedToken = index;
+      if (this.erc20_contract()) {
+        this.egressFee = (await this.erc20_contract().read.egressFee()).toString()
+      }
+      else {
+        this.egressFee = '0'
+      }
+      
       this.getBalance()
     },
 
@@ -464,7 +476,7 @@ export default {
     async transfer() {
       try {
         this.submitting = true
-
+        this.transactionError = ''
         if (!window.confirm(this.$t('home.transferConfirm', [this.amount, this.tokenName(), this.targetAddress]))) {
           return
         }
@@ -485,7 +497,7 @@ export default {
           })
         }
         else {
-          // USDT
+          // Always fetch fee again.
           const fee = (await this.erc20_contract().read.egressFee()).toString()
 
           tx = await writeContract({