Merge pull request #219 from zkLinkProtocol/feat/hide_withdraw_mantle

hide eth on withdraw for mantle
zkLinkProtocol · May 3, 2024 · 1ae4d2a · 1ae4d2a
2 parents 3cc6ff5 + e4ef00c
commit 1ae4d2a
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 33 deletions.
diff --git a/components/token/TokenSelectModal.vue b/components/token/TokenSelectModal.vue
@@ -1,10 +1,21 @@
 <template>
-  <CommonModal v-model:opened="isModalOpened" class="token-select-modal" :class="{ 'token-modal': title === 'Choose chain and token' }" :title="title" @after-leave="search = ''">
+  <CommonModal
+    v-model:opened="isModalOpened"
+    class="token-select-modal"
+    :class="{ 'token-modal': title === 'Choose chain and token' }"
+    :title="title"
+    @after-leave="search = ''"
+  >
     <div v-if="title === 'Choose chain and token'" class="mb-4">
       <div class="flex gap-2 flex-wrap">
-        <div v-for="(group, groupIndex) in arr" :key="groupIndex" class="chainBox cursor-pointer" :class="{'active': selectChain === group.key}"
-         @click="buttonClicked(zkSyncNetwork.find(item => item.key === group.key)!);">
-          <img :src="group.iconUrl" :alt="group.label"/>
+        <div
+          v-for="(group, groupIndex) in arr"
+          :key="groupIndex"
+          class="chainBox cursor-pointer"
+          :class="{ active: selectChain === group.key }"
+          @click="buttonClicked(zkSyncNetwork.find(item => item.key === group.key)!);"
+        >
+          <img :src="group.iconUrl" :alt="group.label" />
         </div>
       </div>
       <p v-if="!arr.length" class="mt-block-padding-1/2 text-center">No chains found</p>

diff --git a/views/transactions/Withdraw.vue b/views/transactions/Withdraw.vue
@@ -22,21 +22,13 @@
       Confirm transaction
     </PageTitle>
     <div class="tab">
-      <div class="box" :class="{ 'active': showBridge }" @click="showBridge =true">
-        <div class="name">
-          Use the official Bridge
-        </div>
-        <div class="time">
-          Up to 8 days, no additional fee
-        </div>
+      <div class="box" :class="{ active: showBridge }" @click="showBridge = true">
+        <div class="name">Use the official Bridge</div>
+        <div class="time">Up to 8 days, no additional fee</div>
       </div>
-      <div class="box" :class="{ 'active': !showBridge }" @click="showBridge =false">
-        <div class="name">
-          Use a third party bridge
-        </div>
-        <div class="time">
-          Usually takes under 20 mins
-        </div>
+      <div class="box" :class="{ active: !showBridge }" @click="showBridge = false">
+        <div class="name">Use a third party bridge</div>
+        <div class="time">Usually takes under 20 mins</div>
       </div>
     </div>
     <div class="warnBox flex" v-if="!route.query.s || route.query.s !== 'okx'">
@@ -618,7 +610,9 @@ const availableTokens = computed(() => {
       if (!e.l1Address) {
         return false;
       }
-      if (e.l1Address === ETH_ADDRESS) {
+      if (selectedNetwork.value.key === "mantle" && e.l1Address === ETH_ADDRESS) {
+        return false;
+      } else if (e.l1Address === ETH_ADDRESS) {
         return true;
       }
       if (e.networkKey === eraNetwork.value.key) {
@@ -639,7 +633,9 @@ const availableBalances = computed(() => {
       if (!e.l1Address) {
         return false;
       }
-      if (e.l1Address === ETH_ADDRESS) {
+      if (selectedNetwork.value.key === "mantle" && e.l1Address === ETH_ADDRESS) {
+        return false;
+      } else if (e.l1Address === ETH_ADDRESS) {
         return true;
       }
       if (e.networkKey === eraNetwork.value.key) {
@@ -666,7 +662,10 @@ const tokenWithHighestBalancePrice = computed(() => {
 });
 const defaultToken = computed(() => availableTokens.value?.[0] ?? undefined);
 const selectedTokenAddress = ref<string | undefined>(
-  route.query.tokenAddress ?? routeTokenAddress.value ?? tokenWithHighestBalancePrice.value?.address ?? defaultToken.value?.address
+  route.query.tokenAddress ??
+    routeTokenAddress.value ??
+    tokenWithHighestBalancePrice.value?.address ??
+    defaultToken.value?.address
 );
 const selectedToken = computed<Token | undefined>(() => {
   if (!tokens.value) {
@@ -1183,50 +1182,50 @@ onBeforeUnmount(() => {
     color: #0bc48f;
   }
 }
-.tab{
+.tab {
   width: 100%;
   border-radius: 64px;
-  background: #262B33;
+  background: #262b33;
   padding: 8px;
   display: flex;
   margin-bottom: 16px;
-  .box{
+  .box {
     border-radius: 64px;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 50%;
     padding: 7px 0;
     cursor: pointer;
-    .name{
-      color: #FFF;
+    .name {
+      color: #fff;
       font-size: 16px;
       font-style: normal;
       font-weight: 700;
       line-height: normal;
     }
-    .time{
-      color: #9DA3AE;
+    .time {
+      color: #9da3ae;
       text-align: center;
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
       line-height: normal;
     }
     @media screen and (max-width: 600px) {
-      .name{
+      .name {
         font-size: 12px;
       }
-      .time{
+      .time {
         font-size: 10px;
       }
     }
   }
-  .box:focus{
+  .box:focus {
     background: transparent;
   }
-  .active{
-    background: #3D424D;
+  .active {
+    background: #3d424d;
   }
 }
 </style>