fix: Amount dropdown

packages/shared/components/inputs/Amount.svelte

@@ -1,7 +1,6 @@
 <script lang="typescript">
     import { Unit } from '@iota/unit-converter'
-    import { Text } from 'shared/components'
-    import Input from './Input'
+    import { Input, Text } from 'shared/components'
 
     export let amount = undefined
     export let unit = Unit.Mi
@@ -29,6 +28,24 @@
     }
 </script>
 
+<style type="text/scss">
+    amount-input {
+        nav {
+            border-radius: 10px;
+            &.active {
+                @apply opacity-100;
+                @apply pointer-events-auto;
+            }
+            button {
+                &:hover,
+                &.active {
+                    @apply bg-gray-100;
+                }
+            }
+        }
+    }
+</style>
+
 <svelte:window on:click={clickOutside} />
 <Text type="p" classes="mb-2" smaller>{label || locale('general.amount')}</Text>
 <amount-input class="relative block {classes}">
@@ -40,25 +57,23 @@
         bind:value={amount}
         {disabled} />
     <actions class="absolute right-0 top-2.5 h-8 flex flex-row items-center text-12 text-gray-500 dark:text-white">
-        <button on:click={maxClick} class="pr-3 hover:text-blue-500" {disabled}>{locale('actions.max').toUpperCase()}</button>
+        <button on:click={maxClick} class={`pr-3 ${disabled ? "cursor-auto" : "hover:text-blue-500 cursor-pointer"}`} {disabled}>{locale('actions.max').toUpperCase()}</button>
         <button
             on:click={(e) => {
                 e.preventDefault()
                 e.stopPropagation()
                 dropdown = !dropdown
             }}
-            class="w-10 h-full text-center px-2 border-l border-solid border-gray-500"
+            class={`w-10 h-full text-center px-2 border-l border-solid border-gray-500 ${disabled ? "cursor-auto" : "cursor-pointer"}`}
             {disabled}>
             {unit}
             <nav
                 class:active={dropdown && !disabled}
-                class="absolute w-10 overflow-y-auto bg-white border border-solid border-gray-500 pointer-events-none opacity-0 z-10 text-left top-12 right-0">
+                class="absolute w-10 overflow-y-auto bg-white border border-solid border-gray-500 pointer-events-none opacity-0 z-10 text-left top-10 right-0">
                 {#each Object.values(Unit) as _unit}
-                    <button class="text-center w-full py-2" on:click={() => onSelect(_unit)} class:active={unit === _unit}><Text
-                            type="p"
-                            smaller>
-                            {_unit}
-                        </Text></button>
+                    <button class="text-center w-full py-2" on:click={() => onSelect(_unit)} class:active={unit === _unit}>
+                        <Text type="p" smaller>{_unit}</Text>
+                    </button>
                 {/each}
             </nav>
         </button>

packages/shared/locales/en.json

@@ -549,6 +549,8 @@
         "send": {
             "addressLength": "Addresses should be {length} characters long.",
             "amountTooHigh": "This is greater than your available balance.",
+            "amountNoFloat": "If units are `i` you cannot use decimal places.",
+            "amountInvalidFormat": "The amount appears to be an invalid number.",
             "amountZero": "The amount must be greater than 0.",
             "wrongAddressFormat": "Addresses start with the prefix {prefix}.",
             "insufficientFunds": "This account has insufficient funds"

packages/shared/routes/dashboard/wallet/views/Send.svelte

@@ -24,7 +24,7 @@
 
     let selectedSendType = SEND_TYPE.EXTERNAL
     let unit = Unit.Mi
-    let amount = convertUnits($sendParams.amount, Unit.i, unit)
+    let amount = convertUnits($sendParams.amount, Unit.i, unit).toString()
     let to = undefined
     let amountError = ''
     let addressPrefix = ($account ?? $accounts[0]).depositAddress.split('1')[0]
@@ -68,7 +68,6 @@
 
     $: accountsDropdownItems = $accounts.map((acc) => format(acc))
     $: from = $account ? format($account) : accountsDropdownItems[0]
-    $: $sendParams.amount = convertUnits(amount, unit, Unit.i)
 
     const handleSendTypeClick = (type) => {
         selectedSendType = type
@@ -91,42 +90,55 @@
     const handleSendClick = () => {
         amountError = ''
         addressError = ''
-        if ($sendParams.amount > from.balance) {
-            amountError = locale('error.send.amountTooHigh')
-        } else if ($sendParams.amount <= 0) {
-            amountError = locale('error.send.amountZero')
-        }
-        if (selectedSendType === SEND_TYPE.EXTERNAL) {
-            // Validate address length
-            if ($sendParams.address.length !== ADDRESS_LENGTH) {
-                addressError = locale('error.send.addressLength', {
-                    values: {
-                        length: ADDRESS_LENGTH,
-                    },
-                })
-            } else if (!validateBech32Address(addressPrefix, $sendParams.address)) {
-                addressError = locale('error.send.wrongAddressFormat', {
-                    values: {
-                        prefix: addressPrefix,
-                    },
-                })
+
+        if (unit === Unit.i && Number.parseInt(amount, 10).toString() !== amount) {
+            amountError = locale('error.send.amountNoFloat')
+        } else {
+            let amountAsFloat = Number.parseFloat(amount)
+            if (amountAsFloat.toString() !== amount) {
+                amountError = locale('error.send.amountInvalidFormat')
+            } else if (amountAsFloat > from.balance) {
+                amountError = locale('error.send.amountTooHigh')
+            } else if (amountAsFloat <= 0) {
+                amountError = locale('error.send.amountZero')
             }
-        }
 
-        if (!amountError && !addressError) {
-            if (selectedSendType === SEND_TYPE.INTERNAL) {
-                internalTransfer(from.id, to.id, $sendParams.amount)
-            } else {
-                send(from.id, $sendParams.address, $sendParams.amount)
+            if (selectedSendType === SEND_TYPE.EXTERNAL) {
+                // Validate address length
+                if ($sendParams.address.length !== ADDRESS_LENGTH) {
+                    addressError = locale('error.send.addressLength', {
+                        values: {
+                            length: ADDRESS_LENGTH,
+                        },
+                    })
+                } else if (!validateBech32Address(addressPrefix, $sendParams.address)) {
+                    addressError = locale('error.send.wrongAddressFormat', {
+                        values: {
+                            prefix: addressPrefix,
+                        },
+                    })
+                }
+            }
+
+            if (!amountError && !addressError) {
+                $sendParams.amount = convertUnits(amountAsFloat, unit, Unit.i)
+
+                if (selectedSendType === SEND_TYPE.INTERNAL) {
+                    internalTransfer(from.id, to.id, $sendParams.amount)
+                } else {
+                    send(from.id, $sendParams.address, $sendParams.amount)
+                }
             }
         }
     }
+
     const handleBackClick = () => {
         accountRoute.set(AccountRoutes.Init)
         if (!$account) {
             walletRoute.set(WalletRoutes.Init)
         }
     }
+
     const format = (account: WalletAccount) => {
         return {
             ...account,
@@ -135,7 +147,7 @@
         }
     }
     const handleMaxClick = () => {
-        amount = convertUnits(from.balance, Unit.i, unit)
+        amount = convertUnits(from.balance, Unit.i, unit).toString()
     }
     onMount(() => {
         to = $accounts.length === 2 ? accountsDropdownItems[from.id === $accounts[0].id ? 1 : 0] : to