feat: added CCIP bridge

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,33 @@
         </div>
       </div>
     </div>
+
+    <div
+      v-if="transferType === HistoryTxType.CCIP_BRIDGE && !isHistory"
+      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"> Find your recent history on CCIP Explorer </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 +129,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,7 +152,6 @@ 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 faqs = computed<Faq[]>(() => {
       if (props.transferType === HistoryTxType.Transfer) {
@@ -199,6 +226,9 @@ export default defineComponent({
       socialUrl,
       isMultisig,
       lztTxHistories,
+      HistoryTxType,
+      ccipExplorerUrl,
+      currentAccount,
     };
   },
 });

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.text2') }}
+          </p>
+        </div>
         <div class="column--selection">
           <button :disabled="!isEnableEthBridge">
             <component
@@ -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,
     };
   },
 });

src/components/bridge/ccip/Ccip.vue

@@ -0,0 +1,104 @@
+<template>
+  <div v-if="currentAccount" class="wrapper--bridge">
+    <div class="container--bridge">
+      <div class="wrapper-containers">
+        <ccip-bridge
+          :selected-token="selectedToken"
+          :bridge-amt="String(bridgeAmt)"
+          :err-msg="errMsg"
+          :is-disabled-bridge="isDisabledBridge"
+          :from-bridge-balance="fromBridgeBalance"
+          :to-bridge-balance="toBridgeBalance"
+          :from-chain-name="fromChainName"
+          :to-chain-name="toChainName"
+          :is-approving="isApproving"
+          :is-approved="isApproved"
+          :input-handler="inputHandler"
+          :reverse-chain="reverseChain"
+          :handle-bridge="handleBridge"
+          :handle-approve="handleApprove"
+          :set-is-approving="setIsApproving"
+          :is-approve-max-amount="isApproveMaxAmount"
+          :bridge-fee="bridgeFee"
+          :is-to-soneium="isToSoneium"
+          :is-gas-payable="Boolean(isGasPayable)"
+          @update:isApproveMaxAmount="(value: boolean) => (isApproveMaxAmount = value)"
+        />
+        <information :transfer-type="HistoryTxType.CCIP_BRIDGE" :is-history="false" />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import Information from 'src/components/assets/transfer/Information.vue';
+import CcipBridge from 'src/components/bridge/ccip/CcipBridge.vue';
+import { useAccount } from 'src/hooks';
+import { HistoryTxType } from 'src/modules/account';
+import { defineComponent, ref } from 'vue';
+import { useCcipBridge } from '../../../hooks/bridge/useCcipBridge';
+
+export default defineComponent({
+  components: {
+    Information,
+    CcipBridge,
+  },
+  setup() {
+    const isBridge = ref<boolean>(true);
+
+    const {
+      bridgeAmt,
+      errMsg,
+      isDisabledBridge,
+      fromBridgeBalance,
+      toBridgeBalance,
+      fromChainName,
+      toChainName,
+      fromChainId,
+      selectedToken,
+      isApproved,
+      isApproving,
+      isApproveMaxAmount,
+      bridgeFee,
+      isToSoneium,
+      isGasPayable,
+      inputHandler,
+      reverseChain,
+      handleBridge,
+      handleApprove,
+      setIsApproving,
+    } = useCcipBridge();
+
+    const { currentAccount } = useAccount();
+
+    return {
+      currentAccount,
+      isBridge,
+      HistoryTxType,
+      selectedToken,
+      bridgeAmt,
+      errMsg,
+      isDisabledBridge,
+      fromBridgeBalance,
+      toBridgeBalance,
+      fromChainName,
+      toChainName,
+      fromChainId,
+      isApproved,
+      isApproving,
+      isApproveMaxAmount,
+      bridgeFee,
+      isToSoneium,
+      isGasPayable,
+      inputHandler,
+      reverseChain,
+      handleBridge,
+      handleApprove,
+      setIsApproving,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use 'src/components/bridge/ccip/styles/ccip.scss';
+</style>