Skip to content

Commit f598908

Browse files
AntonioVentiliigithub-actions[bot]
AntonioVentilii
and
github-actions[bot]
authored
style(frontend): Move cross-network swap info box near the tokens (#12290)
# Motivation We refactor a bit the layout of the Swaps to make the cross-network info box appear near the tokens. <img width="598" height="769" alt="Screenshot 2026-04-02 at 11 23 37" src="https://github.com/user-attachments/assets/20d98ef7-67bf-4595-bef9-80b6e5d031a4" /> <img width="653" height="726" alt="Screenshot 2026-04-02 at 11 23 44" src="https://github.com/user-attachments/assets/afee964e-086b-4e29-8db0-e4be1b88e35e" /> --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
1 parent ed93681 commit f598908

5 files changed

Lines changed: 15 additions & 28 deletions

File tree

‎src/frontend/src/eth/components/swap/SwapEthForm.svelte‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
import { ETH_FEE_CONTEXT_KEY, type EthFeeContext } from '$eth/stores/eth-fee.store';
88
import { isSupportedEthTokenId } from '$eth/utils/eth.utils';
99
import { isSupportedEvmNativeTokenId } from '$evm/utils/native-token.utils';
10-
import SwapCrossChainInfo from '$lib/components/swap/SwapCrossChainInfo.svelte';
1110
import SwapForm from '$lib/components/swap/SwapForm.svelte';
1211
import SwapGaslessFee from '$lib/components/swap/SwapGaslessFee.svelte';
1312
import SwapProvider from '$lib/components/swap/SwapProvider.svelte';
@@ -155,8 +154,6 @@
155154
{#if nonNullish($destinationToken) && nonNullish($sourceToken) && nonNullish($feeTokenIdStore)}
156155
<Hr spacing="md" />
157156

158-
<SwapCrossChainInfo />
159-
160157
<div class="flex flex-col gap-3">
161158
<SwapProvider {onShowProviderList} showSelectButton {slippageValue} />
162159

‎src/frontend/src/lib/components/swap/SwapCrossChainInfo.svelte‎

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,23 @@
22
import { Html } from '@dfinity/gix-components';
33
import { nonNullish } from '@dfinity/utils';
44
import { getContext } from 'svelte';
5-
import Hr from '$lib/components/ui/Hr.svelte';
65
import MessageBox from '$lib/components/ui/MessageBox.svelte';
76
import { i18n } from '$lib/stores/i18n.store';
87
import { SWAP_CONTEXT_KEY, type SwapContext } from '$lib/stores/swap.store';
9-
import type { Size } from '$lib/types/components';
108
import { replacePlaceholders } from '$lib/utils/i18n.utils';
119
12-
interface Props {
13-
hrSpacing?: 'none' | Extract<Size, 'lg' | 'md'>;
14-
}
15-
16-
let { hrSpacing }: Props = $props();
17-
1810
const { sourceToken, destinationToken } = getContext<SwapContext>(SWAP_CONTEXT_KEY);
1911
</script>
2012

2113
{#if nonNullish($destinationToken) && nonNullish($sourceToken) && $sourceToken.network.id !== $destinationToken.network.id}
22-
{#if nonNullish(hrSpacing)}
23-
<Hr spacing={hrSpacing} />
24-
{/if}
25-
26-
<MessageBox styleClass="sm:text-sm">
27-
<Html
28-
text={replacePlaceholders($i18n.swap.text.cross_chain_networks_info, {
29-
$sourceNetwork: $sourceToken.network.name,
30-
$destinationNetwork: $destinationToken.network.name
31-
})}
32-
/>
33-
</MessageBox>
14+
<div class="mt-6">
15+
<MessageBox styleClass="sm:text-sm">
16+
<Html
17+
text={replacePlaceholders($i18n.swap.text.cross_chain_networks_info, {
18+
$sourceNetwork: $sourceToken.network.name,
19+
$destinationNetwork: $destinationToken.network.name
20+
})}
21+
/>
22+
</MessageBox>
23+
</div>
3424
{/if}

‎src/frontend/src/lib/components/swap/SwapForm.svelte‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
import { slide } from 'svelte/transition';
55
import { isDefaultEthereumToken } from '$eth/utils/eth.utils';
66
import MaxBalanceButton from '$lib/components/common/MaxBalanceButton.svelte';
7+
import SwapCrossChainInfo from '$lib/components/swap/SwapCrossChainInfo.svelte';
78
import SwapSlippage from '$lib/components/swap/SwapSlippage.svelte';
89
import SwapSwitchTokensButton from '$lib/components/swap/SwapSwitchTokensButton.svelte';
910
import SwapValueDifference from '$lib/components/swap/SwapValueDifference.svelte';
@@ -255,6 +256,8 @@
255256
</TokenInputNetworkWrapper>
256257
</div>
257258

259+
<SwapCrossChainInfo />
260+
258261
<SwapSlippage
259262
maxSlippageInvalidValue={isNetworkIdICP($sourceToken?.network.id)
260263
? SWAP_SLIPPAGE_INVALID_VALUE

‎src/frontend/src/lib/components/swap/SwapReview.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,8 @@
125125
sourceTokenExchangeRate={$sourceTokenExchangeRate}
126126
/>
127127

128+
<SwapCrossChainInfo />
129+
128130
{#if nonNullish($sourceTokenExchangeRate) && nonNullish($destinationTokenExchangeRate)}
129131
<ModalValue>
130132
{#snippet label()}
@@ -152,8 +154,6 @@
152154
{@render swapFees()}
153155
</div>
154156

155-
<SwapCrossChainInfo hrSpacing="md" />
156-
157157
{#if isNearIntentsProvider}
158158
<div class="mt-4">
159159
<SwapNearIntentsTos />

‎src/frontend/src/sol/components/swap/SwapSolForm.svelte‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script lang="ts">
22
import { isNullish, nonNullish } from '@dfinity/utils';
33
import { getContext, onDestroy, untrack } from 'svelte';
4-
import SwapCrossChainInfo from '$lib/components/swap/SwapCrossChainInfo.svelte';
54
import SwapForm from '$lib/components/swap/SwapForm.svelte';
65
import SwapProvider from '$lib/components/swap/SwapProvider.svelte';
76
import Hr from '$lib/components/ui/Hr.svelte';
@@ -140,8 +139,6 @@
140139
{#if nonNullish($destinationToken) && nonNullish($sourceToken)}
141140
<Hr spacing="md" />
142141

143-
<SwapCrossChainInfo />
144-
145142
<div class="flex flex-col gap-3">
146143
<SwapProvider {onShowProviderList} showSelectButton {slippageValue} />
147144
</div>

0 commit comments

Comments
 (0)