CCIP integration (#1431)

* feat: added mainnet configuration

* feat: updatated EvmNativeToken.vue

* fix: refactoring

* fix: updated styling

* feat: updated chain information

* fix: updated ccipBridgeEnabled condition

Author: impelcrypto

.gitignore

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

package.json

@@ -117,6 +117,7 @@
     "@types/validator": "^13.7.11",
     "@typescript-eslint/eslint-plugin": "^4.16.1",
     "@typescript-eslint/parser": "^4.16.1",
+    "dotenv": "^16.4.7",
     "eslint": "^7.14.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-jest": "^25.2.2",

quasar.conf.js

@@ -12,6 +12,8 @@ const { configure } = require('quasar/wrappers');
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 const ESLintPlugin = require('eslint-webpack-plugin');
 const path = require('path');
+require('dotenv').config()
+
 
 module.exports = configure(function (ctx) {
   return {
@@ -53,7 +55,10 @@ module.exports = configure(function (ctx) {
     // Full list of options: https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
     build: {
       vueRouterMode: 'history', // available values: 'hash', 'history'
-
+      // Memo: Create .env file in root directory to set environment variables
+      // env: {
+      //   SONEIUM_CCIP_ROUTER:process.env.SONEIUM_CCIP_ROUTER,
+      // },
       // transpile: false,
 
       // Add dependencies for transpiling with Babel (Array of string/regex)

src/assets/img/chain/soneium-white.svg

@@ -45,14 +45,30 @@
 
         <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">
+            <button
+              v-if="width >= screenSize.sm"
+              class="btn btn--icon"
+              @mouseover="isSoneiumButtonHover = true"
+              @mouseleave="isSoneiumButtonHover = false"
+            >
               <img
                 class="img--logo-soneium"
-                :src="require('src/assets/img/chain/soneium-color.svg')"
+                :src="
+                  isSoneiumButtonHover
+                    ? require('src/assets/img/chain/soneium-white.svg')
+                    : require('src/assets/img/chain/soneium-color.svg')
+                "
+                alt="soneium"
+              />
+            </button>
+            <button v-else class="btn btn--icon">
+              <img
+                class="img--logo-soneium"
+                :src="require('src/assets/img/chain/soneium-white.svg')"
                 alt="soneium"
               />
             </button>
@@ -78,9 +94,9 @@
           :is-disabled="!layerZeroBridgeEnabled"
         >
           <button class="btn btn--icon"><astar-icon-bridge /></button>
-          <span class="text--mobile-menu">{{ $t('assets.bridge') }}</span>
+          <span class="text--mobile-menu">{{ $t('assets.bridgeToZkEvm') }}</span>
           <q-tooltip>
-            <span class="text--tooltip">{{ $t('assets.bridge') }}</span>
+            <span class="text--tooltip">{{ $t('assets.bridgeToZkEvm') }}</span>
           </q-tooltip>
         </custom-router-link>
 
@@ -144,7 +160,12 @@ import { cbridgeAppLink } from 'src/c-bridge';
 import ModalFaucet from 'src/components/assets/modals/ModalFaucet.vue';
 import Balloon from 'src/components/common/Balloon.vue';
 import { LOCAL_STORAGE } from 'src/config/localStorage';
-import { ccipMinatoBridgeEnabled, layerZeroBridgeEnabled, nativeBridgeEnabled } from 'src/features';
+import {
+  ccipMinatoBridgeEnabled,
+  layerZeroBridgeEnabled,
+  nativeBridgeEnabled,
+  ccipSoneiumBridgeEnabled,
+} from 'src/features';
 import { useAccount, useBreakpoints, useFaucet, useNetworkInfo } from 'src/hooks';
 import { faucetSethLink } from 'src/links';
 import { getTokenImage } from 'src/modules/token';
@@ -156,6 +177,7 @@ import {
 } from 'src/router/routes';
 import { useStore } from 'src/store';
 import { computed, defineComponent, ref, watch, watchEffect } from 'vue';
+
 import CustomRouterLink from '../common/CustomRouterLink.vue';
 
 export default defineComponent({
@@ -177,8 +199,9 @@ export default defineComponent({
 
     const isCcipBalloon = ref<boolean>(false);
     const isBalloonClosing = ref<boolean>(false);
+    const isSoneiumButtonHover = ref<boolean>(false);
 
-    const { currentNetworkName, nativeTokenSymbol, isZkEvm, isAstar, isShibuyaEvm } =
+    const { currentNetworkName, nativeTokenSymbol, isZkEvm, isAstar, isShibuyaEvm, isAstarEvm } =
       useNetworkInfo();
 
     const closeCcipBalloon = () => {
@@ -229,16 +252,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 }
     );
@@ -261,9 +302,11 @@ export default defineComponent({
       nativeBridgeEnabled,
       layerZeroBridgeEnabled,
       isShibuyaEvm,
-      ccipMinatoBridgeEnabled,
+      isEnableCcipBridge,
       isCcipBalloon,
       isBalloonClosing,
+      isAstarEvm,
+      isSoneiumButtonHover,
       closeCcipBalloon,
       buildCcipBridgePageLink,
       truncate,

src/components/assets/EvmNativeToken.vue

@@ -441,6 +441,7 @@
   display: block;
   text-align: center;
   margin-top: 10px;
+  width: 80px;
   @media (min-width: $sm) {
     display: none;
   }

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

@@ -6,9 +6,9 @@
       </div>
       <div class="container--selection">
         <div class="column--selection">
-          <button :disabled="!isEnableMinatoBridge">
+          <button :disabled="!isEnableCcipBridge">
             <component
-              :is="isEnableMinatoBridge ? 'router-link' : 'div'"
+              :is="isEnableCcipBridge ? 'router-link' : 'div'"
               :to="buildCcipBridgePageLink()"
               class="button--bridge"
             >
@@ -24,20 +24,38 @@
               <div class="row--bridge-title">
                 <div class="text--bridge-tag">
                   <q-chip outline>
-                    {{ $t('bridge.ccipMinatoBridge.tag') }}
+                    {{
+                      $t(
+                        isShibuyaEvm
+                          ? 'bridge.ccipMinatoBridge.tag'
+                          : 'bridge.ccipSoneiumBridge.tag'
+                      )
+                    }}
                   </q-chip>
                 </div>
-                <span class="text--bridge-title">{{ $t('bridge.ccipMinatoBridge.title') }}</span>
+                <span class="text--bridge-title">{{
+                  $t(
+                    isShibuyaEvm
+                      ? 'bridge.ccipMinatoBridge.title'
+                      : 'bridge.ccipSoneiumBridge.title'
+                  )
+                }}</span>
                 <div class="box--text-bridge">
                   <span class="text--bridge">
-                    {{ $t('bridge.ccipMinatoBridge.text') }}
+                    {{
+                      $t(
+                        isShibuyaEvm
+                          ? 'bridge.ccipMinatoBridge.text'
+                          : 'bridge.ccipSoneiumBridge.text'
+                      )
+                    }}
                   </span>
                 </div>
               </div>
             </component>
           </button>
-          <p v-if="!isShibuyaEvm" class="text--bridge-details">
-            {{ $t('bridge.ccipMinatoBridge.remark') }}
+          <p v-if="!isAstarEvm && !isShibuyaEvm" class="text--bridge-details">
+            {{ $t('bridge.ccipSoneiumBridge.remark') }}
           </p>
         </div>
 
@@ -232,6 +250,7 @@ import {
   celerBridgeEnabled,
   layerSwapBridgeEnabled,
   layerZeroBridgeEnabled,
+  ccipSoneiumBridgeEnabled,
   nativeBridgeEnabled,
 } from 'src/features';
 import { useAccount, useNetworkInfo } from 'src/hooks';
@@ -259,6 +278,7 @@ export default defineComponent({
       isAstar,
       isH160,
       isShibuyaEvm,
+      isAstarEvm,
       nativeTokenSymbol,
     } = useNetworkInfo();
 
@@ -280,8 +300,11 @@ export default defineComponent({
       return isH160.value && (isAstar.value || isAstarZkEvm.value);
     });
 
-    const isEnableMinatoBridge = computed<boolean>(() => {
-      return isShibuyaEvm.value && ccipMinatoBridgeEnabled;
+    const isEnableCcipBridge = computed<boolean>(() => {
+      return (
+        (isShibuyaEvm.value && ccipMinatoBridgeEnabled) ||
+        (isAstarEvm.value && ccipSoneiumBridgeEnabled)
+      );
     });
 
     return {
@@ -300,8 +323,9 @@ export default defineComponent({
       layerSwapBridgeEnabled,
       nativeBridgeEnabled,
       layerZeroBridgeEnabled,
-      isEnableMinatoBridge,
+      isEnableCcipBridge,
       isShibuyaEvm,
+      isAstarEvm,
       buildEthereumBridgePageLink,
       buildLzBridgePageLink,
       navigateInNewTab,

src/components/bridge/BridgeSelection.vue

@@ -162,7 +162,7 @@ import { EthBridgeNetworkName } from 'src/modules/zk-evm-bridge';
 import { useStore } from 'src/store';
 import { PropType, computed, defineComponent, ref, watch } from 'vue';
 import Jazzicon from 'vue3-jazzicon/src/components';
-import { ccipMinatoBridgeEnabled } from 'src/features';
+import { ccipMinatoBridgeEnabled, ccipSoneiumBridgeEnabled } from 'src/features';
 import {
   ccipBridgeIcon,
   CCIP_TOKEN,
@@ -255,7 +255,7 @@ export default defineComponent({
   },
   setup(props) {
     const { currentAccount } = useAccount();
-    const { nativeTokenSymbol } = useNetworkInfo();
+    const { nativeTokenSymbol, isShibuyaEvm, isAstarEvm } = useNetworkInfo();
     const store = useStore();
     const isHandling = ref<boolean>(false);
     const isLoading = computed<boolean>(() => store.getters['general/isLoading']);
@@ -318,9 +318,12 @@ export default defineComponent({
       isHandling.value = false;
     };
 
-    // Todo: update for Soneium
     const ccipBridgeEnabled = computed<boolean>(() => {
-      return ccipMinatoBridgeEnabled;
+      return isShibuyaEvm.value
+        ? ccipMinatoBridgeEnabled
+        : isAstarEvm.value
+        ? ccipSoneiumBridgeEnabled
+        : false;
     });
 
     watch(

src/components/bridge/ccip/CcipBridge.vue

@@ -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',

src/config/localStorage.ts

@@ -49,8 +49,7 @@ export enum EVM {
   MOONRIVER = 1285,
   MOONBEAM = 1284,
   SONEIUM_MINATO_TESTNET = 1946,
-  // Todo: update
-  SONEIUM = 9999,
+  SONEIUM = 1868,
 }
 
 export const chainName = {
@@ -166,8 +165,7 @@ export const rpcUrls = {
   [EVM.MOONRIVER]: ['https://rpc.api.moonriver.moonbeam.network'],
   [EVM.MOONBEAM]: ['https://rpc.api.moonbeam.network'],
   [EVM.SONEIUM_MINATO_TESTNET]: ['https://rpc.minato.soneium.org'],
-  // Todo: update
-  [EVM.SONEIUM]: ['https://rpc.minato.soneium.org'],
+  [EVM.SONEIUM]: ['https://rpc.soneium.org/'],
 };
 
 export const blockExplorerUrls = {
@@ -184,8 +182,7 @@ export const blockExplorerUrls = {
   [EVM.MOONRIVER]: ['https://moonriver.moonscan.io'],
   [EVM.MOONBEAM]: ['https://moonbeam.moonscan.io'],
   [EVM.SONEIUM_MINATO_TESTNET]: ['https://soneium-minato.blockscout.com'],
-  // Todo: update
-  [EVM.SONEIUM]: ['https://soneium-minato.blockscout.com'],
+  [EVM.SONEIUM]: ['https://soneium.blockscout.com'],
 };
 
 export const CHAIN_INFORMATION = {