feat: updatated EvmNativeToken.vue

.gitignore

@@ -53,3 +53,4 @@ astar-collator
 
 # Chopstick binaries
 db.sqlite*
+.vercel

src/components/assets/EvmNativeToken.vue

@@ -45,9 +45,9 @@
 
         <div class="box--ccip">
           <custom-router-link
-            v-if="isShibuyaEvm"
+            v-if="isShibuyaEvm || isAstarEvm"
             :to="buildCcipBridgePageLink()"
-            :is-disabled="!ccipMinatoBridgeEnabled"
+            :is-disabled="!isEnableCcipBridge"
           >
             <button class="btn btn--icon">
               <img
@@ -163,7 +163,12 @@ import {
 } from 'src/router/routes';
 import { useStore } from 'src/store';
 import { computed, defineComponent, ref, watch, watchEffect } from 'vue';
-import { nativeBridgeEnabled, layerZeroBridgeEnabled, ccipMinatoBridgeEnabled } from 'src/features';
+import {
+  nativeBridgeEnabled,
+  layerZeroBridgeEnabled,
+  ccipMinatoBridgeEnabled,
+  ccipSoneiumBridgeEnabled,
+} from 'src/features';
 import CustomRouterLink from '../common/CustomRouterLink.vue';
 import Balloon from 'src/components/common/Balloon.vue';
 import { LOCAL_STORAGE } from 'src/config/localStorage';
@@ -188,8 +193,15 @@ export default defineComponent({
     const isCcipBalloon = ref<boolean>(false);
     const isBalloonClosing = ref<boolean>(false);
 
-    const { currentNetworkName, nativeTokenSymbol, isZkEvm, isZkyoto, isAstar, isShibuyaEvm } =
-      useNetworkInfo();
+    const {
+      currentNetworkName,
+      nativeTokenSymbol,
+      isZkEvm,
+      isZkyoto,
+      isAstar,
+      isShibuyaEvm,
+      isAstarEvm,
+    } = useNetworkInfo();
 
     const closeCcipBalloon = () => {
       isCcipBalloon.value = false;
@@ -239,16 +251,34 @@ export default defineComponent({
 
     const isTruncate = !nativeTokenSymbol.value.toUpperCase().includes('BTC');
 
+    const isEnableCcipBridge = computed<boolean>(() => {
+      return (
+        (isShibuyaEvm.value && ccipMinatoBridgeEnabled) ||
+        (isAstarEvm.value && ccipSoneiumBridgeEnabled)
+      );
+    });
+
     // Memo: display the balloon animation
     watch(
-      [isShibuyaEvm],
+      [isShibuyaEvm, isAstarEvm],
       async () => {
-        const isBallonDisplayed = Boolean(localStorage.getItem(LOCAL_STORAGE.BALLOON_CCIP_SHIBUYA));
-        if (isShibuyaEvm.value && !isBallonDisplayed) {
+        const isBallonShibuyaDisplayed = Boolean(
+          localStorage.getItem(LOCAL_STORAGE.BALLOON_CCIP_SHIBUYA)
+        );
+        const isBallonAstarDisplayed = Boolean(
+          localStorage.getItem(LOCAL_STORAGE.BALLOON_CCIP_ASTAR)
+        );
+        if (isShibuyaEvm.value && !isBallonShibuyaDisplayed) {
           await wait(1000);
           isCcipBalloon.value = true;
           localStorage.setItem(LOCAL_STORAGE.BALLOON_CCIP_SHIBUYA, 'true');
         }
+
+        if (isAstarEvm.value && !isBallonAstarDisplayed) {
+          await wait(1000);
+          isCcipBalloon.value = true;
+          localStorage.setItem(LOCAL_STORAGE.BALLOON_CCIP_ASTAR, 'true');
+        }
       },
       { immediate: true }
     );
@@ -272,9 +302,10 @@ export default defineComponent({
       nativeBridgeEnabled,
       layerZeroBridgeEnabled,
       isShibuyaEvm,
-      ccipMinatoBridgeEnabled,
+      isEnableCcipBridge,
       isCcipBalloon,
       isBalloonClosing,
+      isAstarEvm,
       closeCcipBalloon,
       buildCcipBridgePageLink,
       truncate,

src/config/localStorage.ts

@@ -18,6 +18,7 @@ export enum LOCAL_STORAGE {
   XVM_TX_HISTORIES = 'xvmTxHistories',
   BALLOON_NATIVE_TOKEN = 'balloonNativeToken',
   BALLOON_CCIP_SHIBUYA = 'balloonCcipShibuya',
+  BALLOON_CCIP_ASTAR = 'balloonCcipAstar',
   THEME_COLOR = 'themeColor',
   MULTISIG = 'multisig',
   CLOSE_DAPP_STAKING_V3_ONBOARDING = 'closeDappStakingV3Onboarding',