Skip to content

Commit

Permalink
CCIP integration (#1431)
Browse files Browse the repository at this point in the history 
* feat: added mainnet configuration

* feat: updatated EvmNativeToken.vue

* fix: refactoring

* fix: updated styling

* feat: updated chain information

* fix: updated ccipBridgeEnabled condition
  • Loading branch information
@impelcrypto
impelcrypto authored Jan 14, 2025
1 parent 1b264eb commit 99e9628
Show file tree
Hide file tree
Showing 18 changed files with 155 additions and 91 deletions.
2 changes: 1 addition & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,4 +53,4 @@ astar-collator

# Chopstick binaries
db.sqlite*
.vercel
.vercel
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
7 changes: 6 additions & 1 deletion quasar.conf.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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)
Expand Down
4 changes: 4 additions & 0 deletions src/assets/img/chain/soneium-white.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
67 changes: 55 additions & 12 deletions src/components/assets/EvmNativeToken.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>

Expand Down Expand Up @@ -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';
Expand All @@ -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({
Expand All @@ -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 = () => {
Expand Down Expand Up @@ -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 }
);
Expand All @@ -261,9 +302,11 @@ export default defineComponent({
nativeBridgeEnabled,
layerZeroBridgeEnabled,
isShibuyaEvm,
ccipMinatoBridgeEnabled,
isEnableCcipBridge,
isCcipBalloon,
isBalloonClosing,
isAstarEvm,
isSoneiumButtonHover,
closeCcipBalloon,
buildCcipBridgePageLink,
truncate,
Expand Down
1 change: 1 addition & 0 deletions src/components/assets/styles/asset-list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -441,6 +441,7 @@
display: block;
text-align: center;
margin-top: 10px;
width: 80px;
@media (min-width: $sm) {
display: none;
}
Expand Down
44 changes: 34 additions & 10 deletions src/components/bridge/BridgeSelection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand All @@ -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>

Expand Down Expand Up @@ -232,6 +250,7 @@ import {
celerBridgeEnabled,
layerSwapBridgeEnabled,
layerZeroBridgeEnabled,
ccipSoneiumBridgeEnabled,
nativeBridgeEnabled,
} from 'src/features';
import { useAccount, useNetworkInfo } from 'src/hooks';
Expand Down Expand Up @@ -259,6 +278,7 @@ export default defineComponent({
isAstar,
isH160,
isShibuyaEvm,
isAstarEvm,
nativeTokenSymbol,
} = useNetworkInfo();
Expand All @@ -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 {
Expand All @@ -300,8 +323,9 @@ export default defineComponent({
layerSwapBridgeEnabled,
nativeBridgeEnabled,
layerZeroBridgeEnabled,
isEnableMinatoBridge,
isEnableCcipBridge,
isShibuyaEvm,
isAstarEvm,
buildEthereumBridgePageLink,
buildLzBridgePageLink,
navigateInNewTab,
Expand Down
11 changes: 7 additions & 4 deletions src/components/bridge/ccip/CcipBridge.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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']);
Expand Down Expand Up @@ -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(
Expand Down
1 change: 1 addition & 0 deletions src/config/localStorage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
9 changes: 3 additions & 6 deletions src/config/web3/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,7 @@ export enum EVM {
MOONRIVER = 1285,
MOONBEAM = 1284,
SONEIUM_MINATO_TESTNET = 1946,
// Todo: update
SONEIUM = 9999,
SONEIUM = 1868,
}

export const chainName = {
Expand Down Expand Up @@ -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 = {
Expand All @@ -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 = {
Expand Down
1 change: 1 addition & 0 deletions src/features.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export const layerSwapBridgeEnabled = false;
export const celerBridgeEnabled = true;
export const omniBridgeEnabled = true;
export const ccipMinatoBridgeEnabled = true;
export const ccipSoneiumBridgeEnabled = true;
const stargateBridgeEnabled = true;
const stakeStoneBridgeEnabled = true;
const arthSwapBridgeEnabled = true;
Expand Down
3 changes: 2 additions & 1 deletion src/hooks/bridge/useCcipBridge.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
CCIP_TOKEN,
CCIP_SBY,
ccipBridgeAddress,
CCIP_ASTR,
} from 'src/modules/ccip-bridge';
import { showLoading } from 'src/modules/extrinsic/utils';
import { useStore } from 'src/store';
Expand All @@ -24,7 +25,7 @@ import { astarNativeTokenErcAddr } from 'src/modules/xcm';
export const useCcipBridge = () => {
const { isShibuya, nativeTokenSymbol } = useNetworkInfo();

const selectedToken = ref<CCIP_TOKEN>(CCIP_SBY);
const selectedToken = ref<CCIP_TOKEN>(isShibuya.value ? CCIP_SBY : CCIP_ASTR);
const bridgeAmt = ref<string | null>(null);
const toBridgeBalance = ref<number>(0);
const fromBridgeBalance = ref<number>(0);
Expand Down
4 changes: 4 additions & 0 deletions src/hooks/useNetworkInfo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,9 @@ export function useNetworkInfo() {
const isShibuyaEvm = computed<boolean>(() => {
return isH160.value && isShibuya.value;
});
const isAstarEvm = computed<boolean>(() => {
return isH160.value && isAstar.value;
});

const currentNetworkChain = computed<ASTAR_CHAIN>(() => {
if (isZkEvm.value) {
Expand Down Expand Up @@ -133,5 +136,6 @@ export function useNetworkInfo() {
nativeTokenImg,
isShibuya,
isShibuyaEvm,
isAstarEvm,
};
}
Loading

0 comments on commit 99e9628

Please sign in to comment.