From 1402fc3f312dbd838f65033bfc65b5ed552801ba Mon Sep 17 00:00:00 2001
From: impelcrypto <impelcrypto@gmail.com>
Date: Wed, 27 Nov 2024 16:57:29 +0800
Subject: [PATCH] fix: refactor

---
 .../assets/transfer/Information.vue           |   1 +
 src/components/bridge/ccip/CcipBridge.vue     |   2 +-
 src/components/bridge/ccip/SelectToken.vue    |  80 -------
 .../bridge/ccip/styles/ccip-bridge.scss       |   2 +-
 .../bridge/ccip/styles/select-token.scss      | 210 ------------------
 src/config/web3/abi/ccip/Router.json          | 164 ++++++++++++++
 .../implementations/CcipBridgeRepository.ts   |  24 +-
 7 files changed, 188 insertions(+), 295 deletions(-)
 delete mode 100644 src/components/bridge/ccip/SelectToken.vue
 delete mode 100644 src/components/bridge/ccip/styles/select-token.scss
 create mode 100644 src/config/web3/abi/ccip/Router.json

diff --git a/src/components/assets/transfer/Information.vue b/src/components/assets/transfer/Information.vue
index 485cfd2d4..626458b97 100644
--- a/src/components/assets/transfer/Information.vue
+++ b/src/components/assets/transfer/Information.vue
@@ -11,6 +11,7 @@
         <astar-icon-play size="24" />
       </div>
     </a>
+    <!-- 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" />
diff --git a/src/components/bridge/ccip/CcipBridge.vue b/src/components/bridge/ccip/CcipBridge.vue
index 89cfc99b1..a8329c08e 100644
--- a/src/components/bridge/ccip/CcipBridge.vue
+++ b/src/components/bridge/ccip/CcipBridge.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wrapper--l1-bridge">
+  <div class="wrapper--ccip-bridge">
     <div class="rows">
       <div class="box--input-field">
         <div class="box__space-between">
diff --git a/src/components/bridge/ccip/SelectToken.vue b/src/components/bridge/ccip/SelectToken.vue
deleted file mode 100644
index e7b49a056..000000000
--- a/src/components/bridge/ccip/SelectToken.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <div class="container--select-item">
-    <div class="row--title">
-      <span>{{ $t('assets.transferPage.selectToken') }}</span>
-    </div>
-    <div class="container--items">
-      <div v-for="(token, index) in tokens" :key="index" class="row--item" @click="setToken(token)">
-        <div class="column--item-name">
-          <img
-            v-if="token.image !== ''"
-            :src="token.image"
-            :alt="token.symbol"
-            class="native-token-logo"
-          />
-          <jazzicon v-else :address="token.symbol" :diameter="24" class="item-logo" />
-
-          <span class="text--item-name">{{ token.symbol }}</span>
-        </div>
-        <div class="column--item-name">
-          <span class="text--token-amount">
-            {{
-              $t('amountToken', {
-                amount: $n(truncate(token.fromChainBalance ?? 0)),
-                token: token.symbol,
-              })
-            }}
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { truncate } from '@astar-network/astar-sdk-core';
-import { defineComponent, PropType } from 'vue';
-import Jazzicon from 'vue3-jazzicon/src/components';
-import { getShortenAddress } from '@astar-network/astar-sdk-core';
-import { EthBridgeNetworkName, ZkToken, zkBridgeIcon } from 'src/modules/zk-evm-bridge';
-import { getShortNetworkName } from 'src/modules/zk-evm-bridge';
-import { LayerZeroToken } from '../../../modules/zk-evm-bridge/layerzero/index';
-
-export default defineComponent({
-  components: {
-    [Jazzicon.name]: Jazzicon,
-  },
-  props: {
-    fromChainId: {
-      type: Number,
-      required: true,
-    },
-    fromChainName: {
-      type: String,
-      required: true,
-    },
-    toChainName: {
-      type: String,
-      required: true,
-    },
-    inputImportTokenHandler: {
-      type: Function,
-      required: true,
-    },
-    setToken: {
-      type: Function,
-      required: true,
-    },
-    tokens: {
-      type: Object as PropType<LayerZeroToken[]>,
-      required: true,
-    },
-  },
-  setup() {
-    return { EthBridgeNetworkName, zkBridgeIcon, getShortNetworkName, truncate, getShortenAddress };
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@use 'src/components/bridge/layerzero/styles/select-token.scss';
-</style>
diff --git a/src/components/bridge/ccip/styles/ccip-bridge.scss b/src/components/bridge/ccip/styles/ccip-bridge.scss
index ea208b053..313e2e94f 100644
--- a/src/components/bridge/ccip/styles/ccip-bridge.scss
+++ b/src/components/bridge/ccip/styles/ccip-bridge.scss
@@ -1,6 +1,6 @@
 @import 'src/css/quasar.variables.scss';
 
-.wrapper--l1-bridge {
+.wrapper--ccip-bridge {
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/src/components/bridge/ccip/styles/select-token.scss b/src/components/bridge/ccip/styles/select-token.scss
deleted file mode 100644
index efdb8b023..000000000
--- a/src/components/bridge/ccip/styles/select-token.scss
+++ /dev/null
@@ -1,210 +0,0 @@
-@import 'src/css/quasar.variables.scss';
-
-.container--select-item {
-  border: 1px solid $gray-4;
-  border-radius: 6px;
-  box-sizing: border-box;
-  padding: 16px;
-  color: $gray-4;
-  height: 412px;
-  width: 348px;
-  overflow: auto;
-  @media (min-width: $md) {
-    width: 320px;
-  }
-  @media (min-width: $xl) {
-    width: 420px;
-  }
-}
-
-.container--select-item-mobile {
-  border-radius: 6px;
-  box-sizing: border-box;
-  color: $gray-4;
-  background-color: transparent;
-  padding: 24px;
-  max-height: 420px;
-  overflow: auto;
-  padding-top: 0;
-}
-
-.row--title {
-  display: flex;
-  align-items: center;
-  column-gap: 8px;
-  margin-bottom: 12px;
-  font-size: 16px;
-  font-weight: 700;
-}
-
-.container--items {
-  display: flex;
-  flex-direction: column;
-  row-gap: 8px;
-}
-
-.row--item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  border-radius: 8px;
-  margin-left: -8px;
-  margin-right: -8px;
-  background-color: white;
-  border: 1px solid transparent;
-  transition: all 0.3s ease 0s;
-  &:hover {
-    transition: all 0.3s ease 0s;
-    border: 1px solid $astar-blue;
-  }
-  @media (min-width: $md) {
-    background-color: transparent;
-    padding-top: 0;
-    padding-bottom: 0;
-    &:hover {
-      border: 1px solid transparent;
-      background-color: white;
-    }
-  }
-}
-
-.row--item-selected {
-  border: 1px solid $astar-blue;
-  @media (min-width: $md) {
-    background-color: transparent;
-    border: 1px solid transparent;
-  }
-}
-
-.column--item-name {
-  display: flex;
-  column-gap: 8px;
-  align-items: center;
-  padding: 16px;
-}
-
-.item-logo {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-}
-
-.native-token-logo {
-  width: 24px;
-  border-radius: 50%;
-}
-
-.text--item-name {
-  color: $navy-1;
-  font-weight: 700;
-  font-size: 16px;
-  @media (min-width: $md) {
-    font-weight: 600;
-    font-size: 16px;
-  }
-}
-
-.text--token-amount {
-  font-size: 12px;
-  font-weight: 400;
-  color: $navy-1;
-}
-
-.row--import-token {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 24px;
-}
-
-.icon--warning {
-  color: $warning-red;
-}
-
-.row--warning {
-  display: flex;
-  align-items: center;
-  column-gap: 8px;
-  margin-bottom: 8px;
-}
-
-.button--confirm {
-  width: 100%;
-  font-size: 22px;
-  font-weight: 600;
-  height: 44px;
-}
-
-.container--token-info {
-  display: flex;
-  flex-direction: column;
-  row-gap: 6px;
-  margin-top: 16px;
-  margin-bottom: 8px;
-}
-
-.column--chain {
-  display: flex;
-  align-items: center;
-  column-gap: 4px;
-  img {
-    margin-top: 2px;
-  }
-}
-
-.row--to-chain-address {
-  display: none !important;
-  @media (min-width: $xl) {
-    display: flex !important;
-  }
-}
-
-.icon--chain {
-  display: none;
-  @media (min-width: $xl) {
-    display: block;
-  }
-}
-
-.text--link {
-  color: $astar-blue;
-}
-
-.icon--copy {
-  stroke: $astar-blue;
-  font-size: 20px;
-}
-
-.body--dark {
-  .container--select-item {
-    color: $gray-1;
-    border: 1px solid $gray-4;
-  }
-  .row--item {
-    background-color: transparent;
-    @media (min-width: $md) {
-      &:hover {
-        background: rgba(255, 255, 255, 0.02);
-      }
-    }
-  }
-  .row--item-selected {
-    @media (min-width: $md) {
-      background-color: $gray-5;
-    }
-  }
-  .text--item-name {
-    color: $gray-1;
-  }
-  .text--token-amount {
-    color: $gray-1;
-  }
-  input {
-    color: white;
-  }
-  .box--input-field {
-    background: transparent;
-    border: 1px solid $gray-3;
-  }
-}
diff --git a/src/config/web3/abi/ccip/Router.json b/src/config/web3/abi/ccip/Router.json
new file mode 100644
index 000000000..f26780716
--- /dev/null
+++ b/src/config/web3/abi/ccip/Router.json
@@ -0,0 +1,164 @@
+[
+  {
+    "inputs": [{ "internalType": "address", "name": "router", "type": "address" }],
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "inputs": [
+      { "internalType": "uint256", "name": "minLimit", "type": "uint256" },
+      { "internalType": "uint256", "name": "gotLimit", "type": "uint256" }
+    ],
+    "name": "GasLimitTooLow",
+    "type": "error"
+  },
+  {
+    "inputs": [
+      { "internalType": "uint256", "name": "gotFee", "type": "uint256" },
+      { "internalType": "uint256", "name": "fee", "type": "uint256" }
+    ],
+    "name": "InsufficientFee",
+    "type": "error"
+  },
+  {
+    "inputs": [
+      { "internalType": "uint256", "name": "gotAmount", "type": "uint256" },
+      { "internalType": "uint256", "name": "msgValue", "type": "uint256" }
+    ],
+    "name": "InsufficientMsgValue",
+    "type": "error"
+  },
+  {
+    "inputs": [{ "internalType": "address", "name": "router", "type": "address" }],
+    "name": "InvalidRouter",
+    "type": "error"
+  },
+  {
+    "inputs": [{ "internalType": "uint256", "name": "gotAmounts", "type": "uint256" }],
+    "name": "InvalidTokenAmounts",
+    "type": "error"
+  },
+  {
+    "inputs": [
+      { "internalType": "uint256", "name": "gotAmount", "type": "uint256" },
+      { "internalType": "uint256", "name": "msgValue", "type": "uint256" }
+    ],
+    "name": "TokenAmountNotEqualToMsgValue",
+    "type": "error"
+  },
+  {
+    "inputs": [
+      {
+        "components": [
+          { "internalType": "bytes32", "name": "messageId", "type": "bytes32" },
+          { "internalType": "uint64", "name": "sourceChainSelector", "type": "uint64" },
+          { "internalType": "bytes", "name": "sender", "type": "bytes" },
+          { "internalType": "bytes", "name": "data", "type": "bytes" },
+          {
+            "components": [
+              { "internalType": "address", "name": "token", "type": "address" },
+              { "internalType": "uint256", "name": "amount", "type": "uint256" }
+            ],
+            "internalType": "struct Client.EVMTokenAmount[]",
+            "name": "destTokenAmounts",
+            "type": "tuple[]"
+          }
+        ],
+        "internalType": "struct Client.Any2EVMMessage",
+        "name": "message",
+        "type": "tuple"
+      }
+    ],
+    "name": "ccipReceive",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      { "internalType": "uint64", "name": "destinationChainSelector", "type": "uint64" },
+      {
+        "components": [
+          { "internalType": "bytes", "name": "receiver", "type": "bytes" },
+          { "internalType": "bytes", "name": "data", "type": "bytes" },
+          {
+            "components": [
+              { "internalType": "address", "name": "token", "type": "address" },
+              { "internalType": "uint256", "name": "amount", "type": "uint256" }
+            ],
+            "internalType": "struct Client.EVMTokenAmount[]",
+            "name": "tokenAmounts",
+            "type": "tuple[]"
+          },
+          { "internalType": "address", "name": "feeToken", "type": "address" },
+          { "internalType": "bytes", "name": "extraArgs", "type": "bytes" }
+        ],
+        "internalType": "struct Client.EVM2AnyMessage",
+        "name": "message",
+        "type": "tuple"
+      }
+    ],
+    "name": "ccipSend",
+    "outputs": [{ "internalType": "bytes32", "name": "", "type": "bytes32" }],
+    "stateMutability": "payable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      { "internalType": "uint64", "name": "destinationChainSelector", "type": "uint64" },
+      {
+        "components": [
+          { "internalType": "bytes", "name": "receiver", "type": "bytes" },
+          { "internalType": "bytes", "name": "data", "type": "bytes" },
+          {
+            "components": [
+              { "internalType": "address", "name": "token", "type": "address" },
+              { "internalType": "uint256", "name": "amount", "type": "uint256" }
+            ],
+            "internalType": "struct Client.EVMTokenAmount[]",
+            "name": "tokenAmounts",
+            "type": "tuple[]"
+          },
+          { "internalType": "address", "name": "feeToken", "type": "address" },
+          { "internalType": "bytes", "name": "extraArgs", "type": "bytes" }
+        ],
+        "internalType": "struct Client.EVM2AnyMessage",
+        "name": "message",
+        "type": "tuple"
+      }
+    ],
+    "name": "getFee",
+    "outputs": [{ "internalType": "uint256", "name": "fee", "type": "uint256" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "getRouter",
+    "outputs": [{ "internalType": "address", "name": "", "type": "address" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "i_weth",
+    "outputs": [{ "internalType": "contract IWrappedNative", "name": "", "type": "address" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [{ "internalType": "bytes4", "name": "interfaceId", "type": "bytes4" }],
+    "name": "supportsInterface",
+    "outputs": [{ "internalType": "bool", "name": "", "type": "bool" }],
+    "stateMutability": "pure",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "typeAndVersion",
+    "outputs": [{ "internalType": "string", "name": "", "type": "string" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  { "stateMutability": "payable", "type": "receive" }
+]
diff --git a/src/v2/repositories/implementations/CcipBridgeRepository.ts b/src/v2/repositories/implementations/CcipBridgeRepository.ts
index f32d382e5..61facde0d 100644
--- a/src/v2/repositories/implementations/CcipBridgeRepository.ts
+++ b/src/v2/repositories/implementations/CcipBridgeRepository.ts
@@ -1,12 +1,19 @@
 import { injectable } from 'inversify';
 import ERC20_ABI from 'src/config/abi/ERC20.json';
 import ETHER_SENDER_RECEIVER_ABI from 'src/config/web3/abi/ccip/EtherSenderReceiver.json';
+import ROUTER_ABI from 'src/config/web3/abi/ccip/Router.json';
 import type { ParamApproveCcip, ParamBridgeCcipAsset } from 'src/v2/services/ICcipBridgeService';
 import type Web3 from 'web3';
 import type { TransactionConfig } from 'web3-eth';
 import type { AbiItem } from 'web3-utils';
 import type { ICcipBridgeRepository } from '../ICcipBridgeRepository';
-import { ccipBridgeAddress, CcipChainId, ccipChainSelector } from 'src/modules/ccip-bridge';
+import {
+  ccipBridgeAddress,
+  ccipChainId,
+  CcipChainId,
+  ccipChainSelector,
+  CcipNetworkName,
+} from 'src/modules/ccip-bridge';
 import { astarNativeTokenErcAddr } from 'src/modules/xcm';
 import { ethers } from 'ethers';
 
@@ -69,7 +76,13 @@ export class CcipBridgeRepository implements ICcipBridgeRepository {
     web3: Web3;
   }): Promise<string> {
     const contractAddress = ccipBridgeAddress[param.fromNetworkId];
-    const abi = ETHER_SENDER_RECEIVER_ABI;
+
+    const abi =
+      param.fromNetworkId === ccipChainId[CcipNetworkName.ShibuyaEvm] ||
+      param.fromNetworkId === ccipChainId[CcipNetworkName.AstarEvm]
+        ? ETHER_SENDER_RECEIVER_ABI
+        : ROUTER_ABI;
+
     const contract = new web3.eth.Contract(abi as AbiItem[], contractAddress);
     const { destinationChainSelector, message } = this.getMessageArgs(param);
     const fee = await contract.methods.getFee(destinationChainSelector, message).call();
@@ -90,7 +103,12 @@ export class CcipBridgeRepository implements ICcipBridgeRepository {
     );
     const { message, destinationChainSelector } = this.getMessageArgs(param);
     const contractAddress = ccipBridgeAddress[param.fromNetworkId];
-    const abi = ETHER_SENDER_RECEIVER_ABI;
+
+    const abi =
+      param.fromNetworkId === ccipChainId[CcipNetworkName.ShibuyaEvm] ||
+      param.fromNetworkId === ccipChainId[CcipNetworkName.AstarEvm]
+        ? ETHER_SENDER_RECEIVER_ABI
+        : ROUTER_ABI;
 
     const contract = new web3.eth.Contract(abi as AbiItem[], contractAddress);
     const data = contract.methods.ccipSend(destinationChainSelector, message).encodeABI();