feat: created new component AddTokenByNetwork (#1502)

* feat: created new component AddTokenByNetwork

* style: include fade effect when switching networks

* fix: removed reset of local variables

* refactor: as per review, the new components will have the same logic as SendNetwork

* chore: renamed variable to erc20ContractAddress

* fix: according to review, we use all networks

* fix: find network name not among networksMainnets

src/frontend/src/icp-eth/components/tokens/AddTokenByNetwork.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { i18n } from '$lib/stores/i18n.store';
+	import { Dropdown, DropdownItem } from '@dfinity/gix-components';
+	import { networks } from '$lib/derived/networks.derived';
+	import IcAddTokenForm from '$icp/components/tokens/IcAddTokenForm.svelte';
+	import AddTokenForm from '$eth/components/tokens/AddTokenForm.svelte';
+	import { fade } from 'svelte/transition';
+	import type { Network } from '$lib/types/network';
+	import { nonNullish } from '@dfinity/utils';
+	import { isNetworkIdICP } from '$lib/utils/network.utils';
+	import { isNetworkIdEthereum } from '$lib/utils/network.utils.js';
+
+	export let network: Network | undefined;
+	export let tokenData: Record<string, string>;
+
+	let networkName: string | undefined = network?.name;
+	$: networkName,
+		(network = nonNullish(networkName)
+			? $networks.find(({ name }) => name === networkName)
+			: undefined);
+
+	let ledgerCanisterId: string;
+	let indexCanisterId: string;
+	let erc20ContractAddress: string;
+
+	$: tokenData = {
+		ledgerCanisterId,
+		indexCanisterId,
+		erc20ContractAddress
+	};
+</script>
+
+<div class="stretch pt-8">
+	<label for="network" class="font-bold px-4.5">{$i18n.tokens.manage.text.network}:</label>
+
+	<div id="network" class="mb-4 mt-1 pt-0.5">
+		<Dropdown name="network" bind:selectedValue={networkName}>
+			<option disabled selected value={undefined} class="hidden"
+				><span class="description">{$i18n.tokens.manage.placeholder.select_network}</span></option
+			>
+			{#each $networks as network}
+				<DropdownItem value={network.name}>{network.name}</DropdownItem>
+			{/each}
+		</Dropdown>
+	</div>
+
+	{#if nonNullish(network)}
+		<div class="mt-8">
+			{#if isNetworkIdICP(network?.id)}
+				<div in:fade>
+					<IcAddTokenForm on:icBack on:icNext bind:ledgerCanisterId bind:indexCanisterId />
+				</div>
+			{:else if isNetworkIdEthereum(network?.id)}
+				<div in:fade>
+					<AddTokenForm on:icBack on:icNext bind:contractAddress={erc20ContractAddress} />
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style lang="scss">
+	.hidden {
+		display: none;
+	}
+</style>

src/frontend/src/lib/i18n/en.json

@@ -317,7 +317,11 @@
 				"title": "Add and hide tokens",
 				"do_not_see_import": "Don’t see your token? Import",
 				"clear_filter": "Clear filter",
-				"manage_for_network": "Managing tokens for $network"
+				"manage_for_network": "Managing tokens for $network",
+				"network": "Network"
+			},
+			"placeholder": {
+				"select_network": "Select network"
 			},
 			"info": {
 				"outdated_index_canister": "$token Index canister is outdated and incompatible with Oisy Wallet. Contact the project team to propose an upgrade."

src/frontend/src/lib/types/i18n.d.ts

@@ -292,7 +292,9 @@ interface I18nTokens {
 			do_not_see_import: string;
 			clear_filter: string;
 			manage_for_network: string;
+			network: string;
 		};
+		placeholder: { select_network: string };
 		info: { outdated_index_canister: string };
 		error: { unexpected_build: string; empty: string };
 	};