Update Testnet migration warning banner's text & Add bridge warning (#…

…1244)

* update testnetSwitchWarning content

* add native gridge high traffic warning box

* only displays native bridge high traffic on zkEVM

* add bridge high traffic modal

* add read more to red warning

* fix font color of content in bridge high traffic modal

src/components/bridge/ethereum/L1Bridge.vue

@@ -134,6 +134,15 @@
         <span class="color--white"> {{ $t(errMsg) }}</span>
       </div>
 
+      <div v-if="fromChainName === EthBridgeNetworkName.AstarZk" class="row--box-error">
+        <span class="color--white">
+          {{ $t('bridge.warningHighTraffic') }}
+          <a class="color--white text-underline" @click="setHighTrafficModalOpen(true)">
+            {{ $t('bridge.warningHighTrafficMore') }}
+          </a>
+        </span>
+      </div>
+
       <div class="container--warning">
         <ul>
           <li>{{ $t('bridge.warning32blocks') }}</li>
@@ -158,13 +167,21 @@
         </astar-button>
       </div>
     </div>
+
+    <modal-bridge-high-traffic
+      v-if="isHighTrafficModalOpen"
+      :set-is-open="setHighTrafficModalOpen"
+      :show="isHighTrafficModalOpen"
+    />
   </div>
 </template>
+
 <script lang="ts">
 import { wait } from '@astar-network/astar-sdk-core';
 import { isHex } from '@polkadot/util';
 import TokenBalance from 'src/components/common/TokenBalance.vue';
-import { useAccount, useNetworkInfo } from 'src/hooks';
+import ModalBridgeHighTraffic from 'src/components/common/ModalBridgeHighTraffic.vue';
+import { useAccount } from 'src/hooks';
 import { EthBridgeNetworkName, ZkToken, zkBridgeIcon } from 'src/modules/zk-evm-bridge';
 import { useStore } from 'src/store';
 import { PropType, defineComponent, watch, ref, computed } from 'vue';
@@ -174,6 +191,7 @@ export default defineComponent({
   components: {
     TokenBalance,
     [Jazzicon.name]: Jazzicon,
+    ModalBridgeHighTraffic,
   },
   props: {
     fetchUserHistory: {
@@ -255,11 +273,15 @@ export default defineComponent({
   },
   setup(props) {
     const { currentAccount } = useAccount();
-    const { isZkyoto } = useNetworkInfo();
     const store = useStore();
     const isHandling = ref<boolean>(false);
     const isLoading = computed<boolean>(() => store.getters['general/isLoading']);
     const isEnabledWithdrawal = computed<boolean>(() => true);
+    const isHighTrafficModalOpen = ref<boolean>(false);
+
+    const setHighTrafficModalOpen = (value: boolean): void => {
+      isHighTrafficModalOpen.value = value;
+    };
 
     const bridge = async (): Promise<void> => {
       isHandling.value = true;
@@ -307,6 +329,8 @@ export default defineComponent({
       isEnabledWithdrawal,
       bridge,
       approve,
+      isHighTrafficModalOpen,
+      setHighTrafficModalOpen,
     };
   },
 });

src/components/bridge/ethereum/styles/l1-bridge.scss

@@ -256,3 +256,8 @@
     border-color: $gray-3;
   }
 }
+
+.text-underline {
+  text-decoration: underline;
+  cursor: pointer;
+}

src/components/common/ModalBridgeHighTraffic.vue

@@ -0,0 +1,69 @@
+<template>
+  <modal-wrapper
+    :is-modal-open="show"
+    title=""
+    :is-closing="isClosingModal"
+    :close-modal="closeModal"
+    class-name="highest-z-index"
+  >
+    <div class="wrapper--modal-bridge-high-traffic">
+      <div class="row--description">
+        <span class="text--md">
+          {{ $t('bridge.modals.highTraffic.text1') }}
+        </span>
+        <span class="text--md">
+          {{ $t('bridge.modals.highTraffic.text2') }}
+        </span>
+      </div>
+      <div class="bottoms--modal-bridge-high-traffic">
+        <button @click="closeModal">{{ $t('bridge.modals.highTraffic.understood') }}</button>
+      </div>
+    </div>
+  </modal-wrapper>
+</template>
+
+<script lang="ts">
+import { truncate, wait } from '@astar-network/astar-sdk-core';
+import { fadeDuration } from '@astar-network/astar-ui';
+import ModalWrapper from 'src/components/common/ModalWrapper.vue';
+import { useBreakpoints } from 'src/hooks';
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  components: { ModalWrapper },
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    setIsOpen: {
+      type: Function,
+      required: true,
+    },
+  },
+  setup(props) {
+    const isClosingModal = ref<boolean>(false);
+    const closeModal = async (): Promise<void> => {
+      isClosingModal.value = true;
+      await wait(fadeDuration);
+      props.setIsOpen(false);
+      isClosingModal.value = false;
+    };
+
+    const { width, screenSize } = useBreakpoints();
+
+    return {
+      width,
+      screenSize,
+      close,
+      truncate,
+      closeModal,
+      isClosingModal,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use 'src/components/common/styles/modal-bridge-high-traffic.scss';
+</style>

src/components/common/styles/modal-bridge-high-traffic.scss

@@ -0,0 +1,59 @@
+@import 'src/css/quasar.variables.scss';
+
+.wrapper--modal-bridge-high-traffic {
+  display: flex;
+  flex-direction: column;
+  padding: 0 14px;
+  padding-bottom: 36px;
+  width: 100%;
+  @media (min-width: $lg) {
+    padding: 0;
+    padding-bottom: 0px;
+    max-width: 480px;
+  }
+}
+
+.row--description {
+  display: flex;
+  flex-direction: column;
+  gap: 21px; // the line height of the text
+
+  margin-bottom: 34px;
+  padding: 0 16px;
+
+  @media (min-width: $sm) {
+    padding: 0;
+  }
+}
+
+.bottoms--modal-bridge-high-traffic {
+  width: 100%;
+
+  & > button {
+    width: 100%;
+    padding: 14px 0px;
+    border-radius: 50px;
+    background-color: $astar-blue;
+    color: $white;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    letter-spacing: -0.2px;
+  }
+}
+
+.text--button {
+  font-weight: 600;
+  font-size: 14px;
+  color: $gray-1;
+}
+
+.body--dark {
+  .text--tips-title {
+    color: $gray-1;
+  }
+  .container--tips {
+    border: 1px solid $gray-3;
+  }
+}

src/i18n/en-US/index.ts

@@ -90,7 +90,7 @@ export default {
     connectedInvalidNetwork: 'Please connect to the correct network in your wallet',
     attention: 'Attention',
     testnetSwitchWarning:
-      'We are switching our Astar zkEVM testnet to zKyoto on 25th March. We recommend you to move your test tokens to Sepolia. zKyoto network will be closed soon.',
+      'We have switched our zkEVM testnet to zKyoto from zKatana. zKatana will no longer available.',
   },
   toast: {
     transactionFailed: 'Transaction failed with error: {message}',
@@ -1032,6 +1032,18 @@ export default {
     warning2steps:
       'Bridging to L1 (Ethereum) involves 2 steps, and it requires users to make a claim on the L1 network (available in Recent History)',
     gelatoApiError: 'Bridge UI is not available, please try again later',
+    warningHighTraffic:
+      'High bridge traffic may delay withdrawal transactions up to 10 hours. We appreciate your patience.',
+    warningHighTrafficMore: '(read more)',
+    modals: {
+      highTraffic: {
+        text1:
+          'We are currently experiencing unusually high traffic on our canonical bridge, leading to longer than usual processing times for withdrawal. Your transaction may take up to 10 hours to complete. We understand how valuable your time is and are working diligently to resolve this congestion by scaling the infrastructure.',
+        text2:
+          'For urgent transactions, you might consider scheduling them during off-peak hours or exploring alternative 3rd party bridge partners. We appreciate your patience and understanding as we strive to enhance your experience. Thank you for your continued support.',
+        understood: 'Understood',
+      },
+    },
     tokenInfo: {
       invalidTokenAddress: 'Invalid token address',
       tokenAddress: '{network} token address',