feat: network selector on send

packages/shared/components/inputs/NetworkInput.svelte

@@ -0,0 +1,21 @@
+<script lang="typescript">
+    import { DestinationNetwork } from '@core/network'
+    import { Modal, NetworkSelector, SelectorInput } from 'shared/components'
+
+    export let network: DestinationNetwork = DestinationNetwork.Shimmer
+    export let error: string = ''
+
+    let inputElement: HTMLInputElement = undefined
+    let modal: Modal = undefined
+</script>
+
+<SelectorInput
+    labelLocale="general.destinationNetwork"
+    bind:value={network}
+    bind:inputElement
+    bind:modal
+    {error}
+    readonly
+>
+    <NetworkSelector bind:modal bind:selected={network} onClose={() => inputElement.blur()} />
+</SelectorInput>

packages/shared/components/inputs/index.js

@@ -13,6 +13,7 @@ export { default as ExpirationDateTimePicker } from './ExpirationDateTimePicker.
 export { default as ImportTextfield } from './ImportTextfield.svelte'
 export { default as Input } from './Input.svelte'
 export { default as InputContainer } from './InputContainer.svelte'
+export { default as NetworkInput } from './NetworkInput.svelte'
 export { default as NumberInput } from './NumberInput.svelte'
 export { default as OptionalInput } from './OptionalInput.svelte'
 export { default as PasswordInput } from './PasswordInput.svelte'

packages/shared/components/modals/NetworkSelector.svelte

@@ -0,0 +1,35 @@
+<script lang="typescript">
+    import { DestinationNetwork, DESTINATION_NETWORK_ADDRESS } from '@core/network'
+    import { truncateString } from '@lib/helpers'
+    import { Modal, Text, TextType } from 'shared/components'
+    import { fade } from 'svelte/transition'
+
+    export let modal: Modal = undefined
+    export let selected: DestinationNetwork
+    export let onClose: () => void
+
+    const networks = Object.values(DestinationNetwork)
+
+    function onClick(_selected: DestinationNetwork): void {
+        modal?.close()
+        selected = _selected
+    }
+</script>
+
+{#if networks.length > 0}
+    <Modal bind:this={modal} position={{ left: '0', top: '100%' }} classes="w-full p-4" on:close={onClose}>
+        <network-picker-modal class="max-h-64 flex flex-col space-y-1 scrollable-y" in:fade={{ duration: 100 }}>
+            {#each networks as network}
+                <button
+                    on:click={() => onClick(network)}
+                    class="w-full flex flex-row flex-1 justify-between px-2 py-3 rounded-lg hover:bg-blue-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20"
+                >
+                    <Text type={TextType.pre} fontSize="sm" color="gray-800">{network}</Text>
+                    <Text type={TextType.pre} fontSize="sm" color="gray-600">
+                        {truncateString(DESTINATION_NETWORK_ADDRESS[network], 6, 6)}
+                    </Text>
+                </button>
+            {/each}
+        </network-picker-modal>
+    </Modal>
+{/if}

packages/shared/components/modals/index.js

@@ -6,6 +6,7 @@ export { default as CollectibleDetailsMenu } from './CollectibleDetailsMenu.svel
 export { default as ExpirationTimePickerMenu } from './ExpirationTimePickerMenu.svelte'
 export { default as FilterModal } from './FilterModal.svelte'
 export { default as Modal } from './Modal.svelte'
+export { default as NetworkSelector } from './NetworkSelector.svelte'
 export { default as NetworkSummaryModal } from './NetworkSummaryModal.svelte'
 export { default as NodeActionsMenu } from './NodeActionsMenu.svelte'
 export { default as ProfileActionsModal } from './ProfileActions.svelte'

packages/shared/components/molecules/SelectorInput.svelte

@@ -2,7 +2,7 @@
     import { localize } from '@core/i18n'
     import { InputContainer, Modal, TextInput } from 'shared/components'
 
-    export let value: string
+    export let value: string = undefined
     export let error: string = ''
     export let disabled: boolean = false
     export let labelLocale: string = ''

packages/shared/components/popups/SendFormPopup.svelte

@@ -2,16 +2,27 @@
     import { get } from 'svelte/store'
     import { localize } from '@core/i18n'
     import { newTransactionDetails, updateNewTransactionDetails } from '@core/wallet'
-    import { Button, Text, RecipientInput, AssetAmountInput, OptionalInput, FontWeight } from 'shared/components'
+    import {
+        Button,
+        Text,
+        RecipientInput,
+        AssetAmountInput,
+        OptionalInput,
+        FontWeight,
+        NetworkInput,
+    } from 'shared/components'
     import { closePopup, openPopup } from '@lib/popup'
     import { getByteLengthOfString } from '@lib/utils/getByteLengthOfString'
+    import { DestinationNetwork } from '@core/network'
 
     let { asset, rawAmount, unit, recipient, metadata, tag } = get(newTransactionDetails)
     let assetAmountInput: AssetAmountInput
     let recipientInput: RecipientInput
     let metadataInput: OptionalInput
     let tagInput: OptionalInput
 
+    let network: DestinationNetwork
+
     async function onSend(): Promise<void> {
         const valid = await validate()
         if (valid) {
@@ -58,6 +69,7 @@
     </Text>
     <send-form-inputs class="flex flex-col space-y-4">
         <AssetAmountInput bind:this={assetAmountInput} bind:asset bind:rawAmount bind:unit />
+        <NetworkInput bind:network />
         <RecipientInput bind:this={recipientInput} bind:recipient />
         <optional-inputs class="flex flex-row flex-wrap gap-4">
             <OptionalInput

packages/shared/lib/core/network/constants/destination-network-address.constant.ts

@@ -0,0 +1,6 @@
+import { DestinationNetwork } from '../enums'
+
+export const DESTINATION_NETWORK_ADDRESS: Readonly<{ [key in DestinationNetwork]?: string }> = {
+    [DestinationNetwork.Shimmer]: '-',
+    [DestinationNetwork.ShimmerEvm]: 'rms1qrut5ajyfrtgjs325kd9chwfwyyy2z3fewy4vgy0vvdtf2pr8prg5u3zwjn',
+}

packages/shared/lib/core/network/constants/index.ts

@@ -1,5 +1,6 @@
 export * from './base-token.constant'
 export * from './coin-type.constant'
+export * from './destination-network-address.constant'
 export * from './explorer-urls.constant'
 export * from './faucet-urls.constant'
 export * from './network-health-colours.constant'

packages/shared/lib/core/network/enums/destination-network.enum.ts

@@ -0,0 +1,4 @@
+export enum DestinationNetwork {
+    Shimmer = 'Shimmer',
+    ShimmerEvm = 'Shimmer EVM',
+}

packages/shared/lib/core/network/enums/index.ts

@@ -1,3 +1,4 @@
+export * from './destination-network.enum'
 export * from './network-health.enum'
 export * from './network-protocol.enum'
 export * from './network-type.enum'

packages/shared/locales/en.json

@@ -1172,6 +1172,7 @@
         "security": "Security",
         "accountAddress": "Wallet Address",
         "network": "Network",
+        "destinationNetwork": "Destination network",
         "nodes": "Nodes",
         "wallet": "Wallet",
         "help": "Help",