feat: added CCIP bridge

src/components/assets/EvmNativeToken.vue

@@ -43,6 +43,35 @@
           </q-tooltip>
         </router-link>
 
+        <div class="box--ccip">
+          <custom-router-link
+            v-if="isShibuyaEvm"
+            :to="buildCcipBridgePageLink()"
+            :is-disabled="!ccipMinatoBridgeEnabled"
+          >
+            <button class="btn btn--icon">
+              <img
+                class="img--logo-soneium"
+                :src="require('src/assets/img/chain/soneium-color.svg')"
+                alt="soneium"
+              />
+            </button>
+            <span class="text--mobile-menu">{{ $t('assets.bridgeToSoneium') }}</span>
+            <q-tooltip>
+              <span class="text--tooltip">{{ $t('assets.bridgeToSoneium') }}</span>
+            </q-tooltip>
+          </custom-router-link>
+          <balloon
+            class="balloon--ccip"
+            direction="top"
+            :is-balloon="isCcipBalloon"
+            :is-balloon-closing="isBalloonClosing"
+            :handle-close-balloon="closeCcipBalloon"
+            :text="$t('assets.bridgeToSoneium')"
+            :title="$t('new')"
+          />
+        </div>
+
         <custom-router-link
           v-if="isAstar"
           :to="buildLzBridgePageLink()"
@@ -118,7 +147,7 @@
   </div>
 </template>
 <script lang="ts">
-import { truncate } from '@astar-network/astar-sdk-core';
+import { truncate, wait } from '@astar-network/astar-sdk-core';
 import { ethers } from 'ethers';
 import { $web3 } from 'src/boot/api';
 import { cbridgeAppLink } from 'src/c-bridge';
@@ -130,14 +159,16 @@ import {
   buildEthereumBridgePageLink,
   buildTransferPageLink,
   buildLzBridgePageLink,
+  buildCcipBridgePageLink,
 } from 'src/router/routes';
 import { useStore } from 'src/store';
-import { computed, defineComponent, ref, watchEffect } from 'vue';
-import { nativeBridgeEnabled, layerZeroBridgeEnabled } from 'src/features';
+import { computed, defineComponent, ref, watch, watchEffect } from 'vue';
+import { nativeBridgeEnabled, layerZeroBridgeEnabled, ccipMinatoBridgeEnabled } from 'src/features';
 import CustomRouterLink from '../common/CustomRouterLink.vue';
+import Balloon from 'src/components/common/Balloon.vue';
 
 export default defineComponent({
-  components: { ModalFaucet, CustomRouterLink },
+  components: { ModalFaucet, CustomRouterLink, Balloon },
   props: {
     nativeTokenUsd: {
       type: Number,
@@ -153,7 +184,16 @@ export default defineComponent({
     const isFaucet = ref<boolean>(false);
     const isModalFaucet = ref<boolean>(false);
 
-    const { currentNetworkName, nativeTokenSymbol, isZkEvm, isZkyoto, isAstar } = useNetworkInfo();
+    const isCcipBalloon = ref<boolean>(false);
+    const isBalloonClosing = ref<boolean>(false);
+
+    const { currentNetworkName, nativeTokenSymbol, isZkEvm, isZkyoto, isAstar, isShibuyaEvm } =
+      useNetworkInfo();
+
+    const closeCcipBalloon = () => {
+      isCcipBalloon.value = false;
+    };
+
     const { currentAccount } = useAccount();
     const store = useStore();
     const isH160 = computed<boolean>(() => store.getters['general/isH160Formatted']);
@@ -198,6 +238,18 @@ export default defineComponent({
 
     const isTruncate = !nativeTokenSymbol.value.toUpperCase().includes('BTC');
 
+    // Memo: display the balloon animation
+    watch(
+      [isShibuyaEvm],
+      async () => {
+        if (isShibuyaEvm.value) {
+          await wait(1000);
+          isCcipBalloon.value = true;
+        }
+      },
+      { immediate: true }
+    );
+
     return {
       nativeTokenImg,
       nativeTokenSymbol,
@@ -216,6 +268,12 @@ export default defineComponent({
       isAstar,
       nativeBridgeEnabled,
       layerZeroBridgeEnabled,
+      isShibuyaEvm,
+      ccipMinatoBridgeEnabled,
+      isCcipBalloon,
+      isBalloonClosing,
+      closeCcipBalloon,
+      buildCcipBridgePageLink,
       truncate,
       handleModalFaucet,
       buildTransferPageLink,

src/components/assets/styles/asset-list.scss

@@ -826,6 +826,25 @@
   }
 }
 
+.img--logo-soneium {
+  height: 24px;
+}
+
+.box--ccip {
+  position: relative;
+}
+
+.balloon--ccip {
+  width: 260px;
+  margin-top: 32px;
+  position: absolute;
+  left: -78px;
+  @media (min-width: $sm) {
+    margin-top: 8px;
+    left: -110px;
+  }
+}
+
 .body--dark {
   .row--locked-tokens .expand-container .rows--expand .row--expand {
     background-color: $navy-1;

src/components/assets/transfer/Information.vue

@@ -11,7 +11,8 @@
         <astar-icon-play size="24" />
       </div>
     </a>
-    <div id="faq" class="container--information">
+    <!-- Todo: remove the v-if once we have FAQ from CCIP Bridge -->
+    <div v-if="transferType !== HistoryTxType.CCIP_BRIDGE" id="faq" class="container--information">
       <div class="row--title">
         <astar-icon-group size="20" />
         <span>{{ $t('assets.transferPage.faq') }}</span>
@@ -53,6 +54,29 @@
         </div>
       </div>
     </div>
+
+    <div v-if="isCcipHistory" id="history" class="container--information">
+      <div class="box--contents">
+        <div class="row--title">
+          <astar-icon-history size="20" />
+          <span>{{ $t('assets.transferPage.recentHistory') }}</span>
+        </div>
+        <div>
+          <a
+            :href="`${ccipExplorerUrl}/address/${currentAccount}`"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="container--hot-topics-contents"
+          >
+            <span class="text-topics-link"> {{ $t('assets.transferPage.ccipHistory') }}</span>
+            <div class="container--explorer-icon">
+              <astar-icon-external-link />
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+
     <div id="hot-topics" class="container--information">
       <div class="row--title">
         <astar-icon-group size="20" />
@@ -101,8 +125,8 @@ import { useStore } from 'src/store';
 import { computed, defineComponent, PropType, ref, watchEffect, onUnmounted } from 'vue';
 import { RecentLzHistory } from '../../../modules/information/index';
 import { getLzTxHistories } from '../../../modules/information/recent-history/transfer/index';
-import { LOCAL_STORAGE } from '../../../config/localStorage';
 import { endpointKey, providerEndpoints } from '../../../config/chainEndpoints';
+import { ccipExplorerUrl } from 'src/links';
 
 export default defineComponent({
   components: { TransactionHistory, LzHistory },
@@ -124,8 +148,12 @@ export default defineComponent({
     const isLoadingTxHistories = ref<boolean>(true);
     const { senderSs58Account, isMultisig, currentAccount } = useAccount();
     const { currentNetworkName, isAstarZkEvm } = useNetworkInfo();
-
     const isH160 = computed<boolean>(() => store.getters['general/isH160Formatted']);
+
+    const isCcipHistory = computed<boolean>(() => {
+      return props.transferType === HistoryTxType.CCIP_BRIDGE && !props.isHistory;
+    });
+
     const faqs = computed<Faq[]>(() => {
       if (props.transferType === HistoryTxType.Transfer) {
         return isH160.value ? faqH160Transfer : faqSs58Transfer;
@@ -199,6 +227,10 @@ export default defineComponent({
       socialUrl,
       isMultisig,
       lztTxHistories,
+      HistoryTxType,
+      ccipExplorerUrl,
+      currentAccount,
+      isCcipHistory,
     };
   },
 });

src/components/bridge/BridgeSelection.vue

@@ -5,6 +5,41 @@
         <span>{{ $t('bridge.selectBridge') }}</span>
       </div>
       <div class="container--selection">
+        <div class="column--selection">
+          <button :disabled="!isEnableMinatoBridge">
+            <component
+              :is="isEnableMinatoBridge ? 'router-link' : 'div'"
+              :to="buildCcipBridgePageLink()"
+              class="button--bridge"
+            >
+              <div class="row--logo-bg">
+                <div class="img--logo-bg">
+                  <img
+                    class="img--logo-soneium"
+                    :src="require('src/assets/img/chain/soneium-color.svg')"
+                    alt="soneium"
+                  />
+                </div>
+              </div>
+              <div class="row--bridge-title">
+                <div class="text--bridge-tag">
+                  <q-chip outline>
+                    {{ $t('bridge.ccipMinatoBridge.tag') }}
+                  </q-chip>
+                </div>
+                <span class="text--bridge-title">{{ $t('bridge.ccipMinatoBridge.title') }}</span>
+                <div class="box--text-bridge">
+                  <span class="text--bridge">
+                    {{ $t('bridge.ccipMinatoBridge.text') }}
+                  </span>
+                </div>
+              </div>
+            </component>
+          </button>
+          <p v-if="!isShibuyaEvm" class="text--bridge-details">
+            {{ $t('bridge.ccipMinatoBridge.remark') }}
+          </p>
+        </div>
         <div class="column--selection">
           <button :disabled="!isEnableEthBridge">
             <component
@@ -37,7 +72,7 @@
             </component>
           </button>
           <p v-if="!isZkEvm" class="text--bridge-details">
-            {{ $t('bridge.ethereumBridge.text2') }}
+            {{ $t('bridge.ethereumBridge.remark') }}
           </p>
           <p v-if="!nativeBridgeEnabled" class="text--bridge-details">
             {{ $t('bridge.bridgeMaintenanceMode') }}
@@ -76,7 +111,7 @@
             </component>
           </button>
           <p v-if="!isEnableLzBridge" class="text--bridge-details">
-            {{ $t('bridge.astarBridge.text2') }}
+            {{ $t('bridge.astarBridge.remark') }}
           </p>
           <p v-if="!layerZeroBridgeEnabled" class="text--bridge-details">
             {{ $t('bridge.bridgeMaintenanceMode') }}
@@ -196,6 +231,7 @@ import {
   Path as RoutePath,
   buildEthereumBridgePageLink,
   buildLzBridgePageLink,
+  buildCcipBridgePageLink,
 } from 'src/router/routes';
 import { computed, defineComponent } from 'vue';
 import { layerSwapLink, zKatanaBridgeUrl } from 'src/modules/zk-evm-bridge/index';
@@ -204,15 +240,24 @@ import {
   layerSwapBridgeEnabled,
   nativeBridgeEnabled,
   layerZeroBridgeEnabled,
+  ccipMinatoBridgeEnabled,
 } from 'src/features';
 import { navigateInNewTab } from 'src/util-general';
 
 export default defineComponent({
   components: {},
   setup() {
     const { currentAccount } = useAccount();
-    const { isZkEvm, networkNameSubstrate, isMainnet, isZkyoto, isAstarZkEvm, isAstar, isH160 } =
-      useNetworkInfo();
+    const {
+      isZkEvm,
+      networkNameSubstrate,
+      isMainnet,
+      isZkyoto,
+      isAstarZkEvm,
+      isAstar,
+      isH160,
+      isShibuyaEvm,
+    } = useNetworkInfo();
 
     const l1Name = computed<string>(() => {
       return isZkyoto.value ? EthBridgeNetworkName.Sepolia : EthBridgeNetworkName.Ethereum;
@@ -232,6 +277,10 @@ export default defineComponent({
       return isH160.value && (isAstar.value || isAstarZkEvm.value);
     });
 
+    const isEnableMinatoBridge = computed<boolean>(() => {
+      return isShibuyaEvm.value && ccipMinatoBridgeEnabled;
+    });
+
     return {
       currentAccount,
       cbridgeAppLink,
@@ -249,9 +298,12 @@ export default defineComponent({
       layerSwapBridgeEnabled,
       nativeBridgeEnabled,
       layerZeroBridgeEnabled,
+      isEnableMinatoBridge,
+      isShibuyaEvm,
       buildEthereumBridgePageLink,
       buildLzBridgePageLink,
       navigateInNewTab,
+      buildCcipBridgePageLink,
     };
   },
 });