style: include fade effect when switching networks

dfinity · Jun 20, 2024 · 4bf7c38 · 4bf7c38
1 parent 29272a2
commit 4bf7c38
Showing 1 changed file with 20 additions and 17 deletions.
diff --git a/src/frontend/src/icp-eth/components/tokens/AddTokenByNetwork.svelte b/src/frontend/src/icp-eth/components/tokens/AddTokenByNetwork.svelte
@@ -5,8 +5,7 @@
 	import { ETHEREUM_NETWORK_SYMBOL, ICP_NETWORK_SYMBOL } from '$env/networks.env';
 	import IcAddTokenForm from '$icp/components/tokens/IcAddTokenForm.svelte';
 	import AddTokenForm from '$eth/components/tokens/AddTokenForm.svelte';
-	import { networkId } from '$lib/derived/network.derived';
-	import { isNullish } from '@dfinity/utils';
+	import { fade } from 'svelte/transition';
 
 	export let dropdownNetwork: string | undefined;
 	export let tokenData: Record<string, string>;
@@ -22,19 +21,23 @@
 	};
 </script>
 
-{#if isNullish($networkId)}
-	<div class="stretch pt-8">
-		<label for="selectedNetwork" class="font-bold px-4.5">{$i18n.tokens.manage.text.select_network}:</label>
-		<Dropdown name="selectedNetwork" bind:selectedValue={dropdownNetwork}>
-			{#each $networksMainnets as network}
-				<DropdownItem value={network.id.description ?? ''}>{network.name}</DropdownItem>
-			{/each}
-		</Dropdown>
-	</div>
-{/if}
+<div class="stretch pt-8">
+	<label for="selectedNetwork" class="font-bold px-4.5"
+		>{$i18n.tokens.manage.text.select_network}:</label
+	>
+	<Dropdown name="selectedNetwork" bind:selectedValue={dropdownNetwork}>
+		{#each $networksMainnets as network}
+			<DropdownItem value={network.id.description ?? ''}>{network.name}</DropdownItem>
+		{/each}
+	</Dropdown>
 
-{#if dropdownNetwork === ICP_NETWORK_SYMBOL}
-	<IcAddTokenForm on:icBack on:icNext bind:ledgerCanisterId bind:indexCanisterId />
-{:else if dropdownNetwork === ETHEREUM_NETWORK_SYMBOL}
-	<AddTokenForm on:icBack on:icNext bind:contractAddress />
-{/if}
+	{#if dropdownNetwork === ICP_NETWORK_SYMBOL}
+		<div in:fade>
+			<IcAddTokenForm on:icBack on:icNext bind:ledgerCanisterId bind:indexCanisterId />
+		</div>
+	{:else if dropdownNetwork === ETHEREUM_NETWORK_SYMBOL}
+		<div in:fade>
+			<AddTokenForm on:icBack on:icNext bind:contractAddress />
+		</div>
+	{/if}
+</div>