UI/split send button

packages/shared/components/atoms/buttons/SendButton.svelte

@@ -1,11 +1,63 @@
 <script lang="typescript">
     import { localize } from '@core/i18n'
     import { resetLedgerPreparedOutput, resetShowInternalVerificationPopup } from '@core/ledger'
-    import { resetNewTransactionDetails } from '@core/wallet'
+    import { resetNewTransactionDetails, selectedSendOptionIndex } from '@core/wallet'
     import { openPopup } from '@lib/popup'
-    import { OnboardingButton } from 'shared/components/atoms'
+    import { appSettings } from '@core/app'
+    import { Text, FontWeight, TextType, Icon, Modal } from 'shared/components'
+    import { Icon as IconEnum } from '@auxiliary/icon'
+    import features from '@features/features'
+
+    let modal: Modal = undefined
+    let isModalOpened: boolean = false
+
+    $: darkModeEnabled = $appSettings.darkMode
+    $: selectedOption = buttonOptions[$selectedSendOptionIndex]
+    $: hasMultipleOptions = buttonOptions.length > 1
+
+    const buttonOptions = [
+        {
+            title: localize('general.sendFunds'),
+            description: localize('general.sendTokensToAddress'),
+            action: onL1SendClick,
+        },
+        ...(features.wallet.send.nft.enabled
+            ? [
+                  {
+                      title: localize('general.sendNft'),
+                      description: localize('general.sendNftToAddress'),
+                      action: onNftSendClick,
+                  },
+              ]
+            : []),
+    ]
+
+    function openModal(): void {
+        isModalOpened = true
+        modal?.open()
+    }
+
+    function onSelection(index: number): void {
+        $selectedSendOptionIndex = index
+        isModalOpened = false
+        modal?.close()
+    }
 
     function onSendClick(): void {
+        selectedOption.action()
+    }
+
+    function onL1SendClick(): void {
+        resetNewTransactionDetails()
+        resetLedgerPreparedOutput()
+        resetShowInternalVerificationPopup()
+        openPopup({
+            type: 'sendForm',
+            overflow: true,
+        })
+    }
+
+    function onNftSendClick(): void {
         resetNewTransactionDetails()
         resetLedgerPreparedOutput()
         resetShowInternalVerificationPopup()
@@ -16,8 +68,138 @@
     }
 </script>
 
-<OnboardingButton
-    primaryText={localize('general.sendFunds')}
-    secondaryText={localize('general.sendTokensToAddress')}
-    onClick={onSendClick}
-/>
+<div class="relative">
+    <div class="button-container flex flex-row justify-between rounded-xl" class:darkmode={darkModeEnabled}>
+        <button
+            class="px-4 py-3.5 text-center flex flex-row justify-between w-full"
+            on:click|stopPropagation={onSendClick}
+        >
+            <span class="flex flex-col justify-center items-start">
+                <Text
+                    type={TextType.p}
+                    color="gray-800"
+                    darkColor="white"
+                    fontSize="14"
+                    fontWeight={FontWeight.semibold}
+                    lineHeight="5"
+                    >{selectedOption.title}
+                </Text>
+                <Text
+                    type={TextType.p}
+                    color="gray-600"
+                    darkColor="gray-400"
+                    fontSize="12"
+                    fontWeight={FontWeight.normal}
+                    lineHeight="3.5"
+                    >{selectedOption.description}
+                </Text>
+            </span>
+            {#if !hasMultipleOptions}
+                <Icon icon={IconEnum.ChevronRight} classes="text-gray-500 h-full" />
+            {/if}
+        </button>
+        {#if hasMultipleOptions}
+            <button class="p-4" on:click={openModal}>
+                <Icon
+                    icon={isModalOpened ? IconEnum.ChevronUp : IconEnum.ChevronDown}
+                    classes={isModalOpened ? 'text-blue-500' : 'text-gray-500'}
+                />
+            </button>
+        {/if}
+    </div>
+
+    <Modal
+        bind:this={modal}
+        position={{ left: '0', top: 'calc(100% + 8px)' }}
+        classes="w-full"
+        on:close={() => (isModalOpened = false)}
+    >
+        <action-picker-modal class="max-h-64 flex flex-col space-y-1 scrollable-y">
+            {#each buttonOptions as option, index}
+                <button
+                    on:click={() => onSelection(index)}
+                    class="w-full flex flex-row flex-1 justify-between items-center px-2 py-3 space-x-2 rounded-lg hover:bg-blue-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20"
+                >
+                    <div class="flex w-4 justify-center items-center">
+                        {#if $selectedSendOptionIndex === index}
+                            <Icon icon={IconEnum.Checkmark} classes="text-blue-500" width="16" height="16" />
+                        {/if}
+                    </div>
+                    <Text type={TextType.p} fontWeight={FontWeight.medium} color="gray-800" classes="w-full text-left"
+                        >{option.title}</Text
+                    >
+                </button>
+            {/each}
+        </action-picker-modal>
+    </Modal>
+</div>
+
+<style type="text/scss">
+    .button-container {
+        min-width: 200px;
+        @apply border;
+        @apply border-solid;
+        @apply border-gray-300;
+        @apply bg-white;
+        @apply text-left;
+        span {
+            min-height: 36px;
+        }
+        &.darkmode {
+            @apply border-gray-700;
+            @apply bg-transparent;
+
+            button {
+                &:hover,
+                &:focus,
+                &:active {
+                    @apply bg-gray-700;
+                    @apply bg-opacity-20;
+                    @apply border-opacity-50;
+                }
+                &:disabled {
+                    @apply bg-gray-700;
+                    @apply bg-opacity-10;
+                    @apply border-gray-700;
+                    @apply border-opacity-10;
+                }
+
+                &:last-child {
+                    @apply border-gray-700;
+                }
+            }
+        }
+
+        button {
+            &:hover {
+                @apply bg-blue-50;
+                @apply border-gray-500;
+            }
+
+            &:active,
+            &:focus {
+                @apply bg-blue-100;
+                @apply border-blue-400;
+            }
+            &:disabled {
+                :global(svg) {
+                    @apply text-gray-500;
+                }
+                @apply pointer-events-none;
+                @apply bg-gray-50;
+            }
+
+            &:first-child {
+                border-top-left-radius: 0.75rem;
+                border-bottom-left-radius: 0.75rem;
+            }
+
+            &:last-child {
+                border-left: 1px solid;
+                @apply border-gray-300;
+                border-top-right-radius: 0.75rem;
+                border-bottom-right-radius: 0.75rem;
+            }
+        }
+    }
+</style>

packages/shared/features/features.ts

@@ -101,6 +101,11 @@ const features = {
         sendAndReceive: {
             enabled: true,
         },
+        send: {
+            nft: {
+                enabled: false,
+            },
+        },
         assets: {
             enabled: true,
         },

packages/shared/lib/core/account/actions/setSelectedAccount.ts

@@ -1,4 +1,5 @@
 import { activeAccounts, updateActiveProfile } from '@core/profile'
+import { resetSendOptionIndex } from '@core/wallet'
 import { get } from 'svelte/store'
 import { selectedAccount, selectedAccountIndex } from '../stores'
 
@@ -8,6 +9,7 @@ export function setSelectedAccount(index: number): void {
         selectedAccountIndex.set(index)
         selectedAccount.set(account)
         updateActiveProfile({ lastUsedAccountIndex: index })
+        resetSendOptionIndex()
     } else {
         throw new Error(`Account with ID ${index} cannot be found!`)
     }

packages/shared/lib/core/wallet/stores/index.ts

@@ -6,3 +6,4 @@ export * from './new-transaction-details.store'
 export * from './persisted-assets.store'
 export * from './selected-account-activities.store'
 export * from './selected-account-assets.store'
+export * from './selected-send-option.store'

packages/shared/lib/core/wallet/stores/selected-send-option.store.ts

@@ -0,0 +1,7 @@
+import { writable } from 'svelte/store'
+
+export const selectedSendOptionIndex = writable<number>(0)
+
+export function resetSendOptionIndex(): void {
+    selectedSendOptionIndex.set(0)
+}

packages/shared/locales/en.json

@@ -1118,10 +1118,12 @@
         "moveFunds": "Internal Transfer",
         "sendTo": "Send To",
         "sendFunds": "Send funds",
+        "sendTokensToAddress": "Send tokens to an address",
         "sendToAddress": "Send to address",
+        "sendNft": "Send NFT",
+        "sendNftToAddress": "Send NFT to an address",
         "scanQrOrPaste": "Scan a QR code or paste an Address",
         "moveFundsBetweenAccounts": "Move funds between wallets",
-        "sendTokensToAddress": "Send tokens to an address",
         "manageAccount": "Manage Wallet",
         "customizeAcount": "Customize your wallet",
         "account": "Wallet",