Skip to content

Commit

Permalink
feat: bridge from minato
Browse files Browse the repository at this point in the history
  • Loading branch information
@impelcrypto
impelcrypto committed Nov 26, 2024
1 parent fac13f0 commit 6211477
Show file tree
Hide file tree
Showing 6 changed files with 107 additions and 103 deletions.
60 changes: 12 additions & 48 deletions src/components/bridge/ccip/Ccip.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
<div class="wrapper-containers">
<ccip-bridge
:selected-token="selectedToken"
:set-right-ui="setRightUi"
:bridge-amt="String(bridgeAmt)"
:err-msg="errMsg"
:is-disabled-bridge="isDisabledBridge"
Expand All @@ -20,28 +19,23 @@
:handle-approve="handleApprove"
:set-is-approving="setIsApproving"
:is-approve-max-amount="isApproveMaxAmount"
:transaction-fee="transactionFee"
:bridge-fee="bridgeFee"
:is-to-soneium="isToSoneium"
:is-gas-payable="Boolean(isGasPayable)"
@update:isApproveMaxAmount="(value: boolean) => (isApproveMaxAmount = value)"
/>
<information
v-if="rightUi === 'information'"
:transfer-type="HistoryTxType.LZ_BRIDGE"
:is-history="true"
/>
<information :transfer-type="HistoryTxType.LZ_BRIDGE" :is-history="true" />
</div>
</div>
</div>
</template>
<script lang="ts">
import { wait } from '@astar-network/astar-sdk-core';
import Information from 'src/components/assets/transfer/Information.vue';
import { RightUi } from 'src/components/assets/transfer/Transfer.vue';
import CcipBridge from 'src/components/bridge/ccip/CcipBridge.vue';
import { useAccount, useBreakpoints } from 'src/hooks';
import { useAccount } from 'src/hooks';
import { HistoryTxType } from 'src/modules/account';
import { computed, defineComponent, ref } from 'vue';
import { defineComponent, ref } from 'vue';
import { useCcipBridge } from '../../../hooks/bridge/useCcipBridge';
import { LayerZeroToken } from '../../../modules/zk-evm-bridge/layerzero/index';
export default defineComponent({
components: {
Expand All @@ -50,10 +44,6 @@ export default defineComponent({
},
setup() {
const isBridge = ref<boolean>(true);
const rightUi = ref<RightUi>('information');
const isModalSelectToken = ref<boolean>(false);
const { screenSize, width } = useBreakpoints();
const {
bridgeAmt,
Expand All @@ -68,7 +58,9 @@ export default defineComponent({
isApproved,
isApproving,
isApproveMaxAmount,
transactionFee,
bridgeFee,
isToSoneium,
isGasPayable,
inputHandler,
reverseChain,
handleBridge,
Expand All @@ -77,38 +69,11 @@ export default defineComponent({
} = useCcipBridge();
const { currentAccount } = useAccount();
const isHighlightRightUi = computed<boolean>(() => rightUi.value !== 'information');
const setRightUi = async (ui: RightUi): Promise<void> => {
if (width.value > screenSize.md) {
// Memo: tricky way to work with `cancelHighlight` function
await wait(100);
rightUi.value = ui;
} else {
if (ui === 'select-token') {
isModalSelectToken.value = true;
}
}
};
const cancelHighlight = async (e: any): Promise<void> => {
const openClass = 'container--select-chain';
if (isHighlightRightUi.value && e.target.className !== openClass) {
await setRightUi('information');
}
};
const handleModalSelectToken = ({ isOpen }: { isOpen: boolean }): void => {
isModalSelectToken.value = isOpen;
};
return {
currentAccount,
isBridge,
HistoryTxType,
isModalSelectToken,
rightUi,
isHighlightRightUi,
selectedToken,
bridgeAmt,
errMsg,
Expand All @@ -121,15 +86,14 @@ export default defineComponent({
isApproved,
isApproving,
isApproveMaxAmount,
transactionFee,
cancelHighlight,
setRightUi,
bridgeFee,
isToSoneium,
isGasPayable,
inputHandler,
reverseChain,
handleBridge,
handleApprove,
setIsApproving,
handleModalSelectToken,
};
},
});
Expand Down
83 changes: 48 additions & 35 deletions src/components/bridge/ccip/CcipBridge.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,14 +78,11 @@
</div>
</div>
<div class="box__row">
<div class="box__row cursor-pointer" @click="setRightUi('select-token')">
<div class="box__row">
<div class="token-logo">
<img width="24" alt="token-logo" :src="selectedToken.image" />
</div>
<span class="text--title">{{ selectedToken.symbol }}</span>
<div class="icon--expand">
<astar-icon-expand size="20" />
</div>
</div>
<div class="box__column--input-amount">
<input
Expand Down Expand Up @@ -122,23 +119,21 @@
<span class="color--white"> {{ $t(errMsg) }}</span>
</div>

<!-- <div class="container--warning">
<div class="container--warning">
<ul>
<li>{{ $t('bridge.slippage', { percent: LayerZeroSlippage }) }}</li>
<li>
{{
$t('bridge.feeOnTransaction', {
amount:
nativeTokenSymbol === 'ASTR' ? $n(truncate(transactionFee, 4)) : transactionFee,
symbol: nativeTokenSymbol,
$t('bridge.feeOnBridge', {
amount: nativeToken === 'ETH' ? truncate(bridgeFee, 5) : $n(truncate(bridgeFee)),
symbol: nativeToken,
})
}}
</li>
<li>{{ $t('bridge.warningLzWithdrawal') }}</li>
<li>{{ $t('bridge.warningCcipTime', { time: isToSoneium ? '3' : '30' }) }}</li>
</ul>
</div> -->
</div>

<div v-if="!layerZeroBridgeEnabled" class="row--box-error">
<div v-if="!ccipBridgeEnabled" class="row--box-error">
<span class="color--white">
{{ $t('bridge.underMaintenance') }}
</span>
Expand All @@ -148,7 +143,7 @@
<astar-button
class="button--confirm"
:disabled="
isApproved || isDisabledBridge || isHandling || isLoading || !layerZeroBridgeEnabled
isApproved || isDisabledBridge || isHandling || isLoading || !ccipBridgeEnabled
"
@click="approve"
>
Expand All @@ -157,7 +152,12 @@
<astar-button
class="button--confirm"
:disabled="
!isApproved || isDisabledBridge || isHandling || isLoading || !layerZeroBridgeEnabled
!isApproved ||
isDisabledBridge ||
isHandling ||
isLoading ||
!ccipBridgeEnabled ||
!isGasPayable
"
@click="bridge"
>
Expand All @@ -172,25 +172,20 @@
import { truncate } from '@astar-network/astar-sdk-core';
import { isHex } from '@polkadot/util';
import TokenBalance from 'src/components/common/TokenBalance.vue';
import { useAccount } from 'src/hooks';
import { EthBridgeNetworkName, LayerZeroToken, lzBridgeIcon } from 'src/modules/zk-evm-bridge';
import { useAccount, useNetworkInfo } from 'src/hooks';
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 { LayerZeroNetworkName, LayerZeroSlippage } from '../../../modules/zk-evm-bridge/layerzero';
import { layerZeroBridgeEnabled } from 'src/features';
import { ccipBridgeIcon, CCIP_TOKEN } from '../../../modules/ccip-bridge/index';
import { ccipMinatoBridgeEnabled } from 'src/features';
import { ccipBridgeIcon, CCIP_TOKEN, CcipNetworkName } from '../../../modules/ccip-bridge/index';
export default defineComponent({
components: {
TokenBalance,
[Jazzicon.name]: Jazzicon,
},
props: {
setRightUi: {
type: Function,
required: true,
},
selectedToken: {
type: Object as PropType<CCIP_TOKEN>,
required: true,
Expand All @@ -207,6 +202,10 @@ export default defineComponent({
type: Boolean,
required: true,
},
isGasPayable: {
type: Boolean,
required: true,
},
isApproving: {
type: Boolean,
required: true,
Expand All @@ -219,7 +218,11 @@ export default defineComponent({
type: Boolean,
required: true,
},
transactionFee: {
isToSoneium: {
type: Boolean,
required: true,
},
bridgeFee: {
type: Number,
required: true,
},
Expand Down Expand Up @@ -262,19 +265,25 @@ export default defineComponent({
},
setup(props) {
const { currentAccount } = useAccount();
const nativeTokenSymbol = computed<string>(() => {
return props.fromChainName === LayerZeroNetworkName.AstarEvm ? 'ASTR' : 'ETH';
});
const { nativeTokenSymbol } = useNetworkInfo();
const store = useStore();
const isHandling = ref<boolean>(false);
const isLoading = computed<boolean>(() => store.getters['general/isLoading']);
const isEnabledWithdrawal = computed<boolean>(() => true);
const nativeToken = computed<string>(() => {
if (
props.fromChainName === CcipNetworkName.SoneiumMinato ||
props.fromChainName === CcipNetworkName.Soneium
) {
return 'ETH';
} else {
return nativeTokenSymbol.value;
}
});
const isNativeToken = computed<boolean>(() => {
return (
props.fromChainName === LayerZeroNetworkName.AstarEvm &&
props.selectedToken.symbol === 'ASTR'
);
return props.selectedToken.symbol === nativeToken.value;
});
const bridge = async (): Promise<void> => {
Expand All @@ -298,6 +307,11 @@ export default defineComponent({
isHandling.value = false;
};
// Todo: update for Soneium
const ccipBridgeEnabled = computed<boolean>(() => {
return ccipMinatoBridgeEnabled;
});
watch(
[props],
() => {
Expand All @@ -317,9 +331,8 @@ export default defineComponent({
isLoading,
isNativeToken,
isEnabledWithdrawal,
LayerZeroSlippage,
nativeTokenSymbol,
layerZeroBridgeEnabled,
nativeToken,
ccipBridgeEnabled,
truncate,
bridge,
approve,
Expand Down
Loading

0 comments on commit 6211477

Please sign in to comment.