Merge branch 'stardust-develop' into chore/polish-governance-ui-ux

iotaledger · Dec 31, 2022 · be6aa6a · be6aa6a
2 parents 0540af7 + 037e6d3
commit be6aa6a
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 43 deletions.
diff --git a/packages/mobile/components/inputs/RecipientInput.svelte b/packages/mobile/components/inputs/RecipientInput.svelte
@@ -3,17 +3,18 @@
     import { networkHrp } from '@core/network/stores'
     import { BECH32_ADDRESS_LENGTH } from '@core/utils/constants'
     import { validateBech32Address } from '@core/utils/crypto'
-    import { IAddressSubject } from '@core/wallet/interfaces'
+    import { IAccountSubject, IAddressSubject } from '@core/wallet/interfaces'
 
-    export let recipient: IAddressSubject
+    export let recipient: IAddressSubject | IAccountSubject
     export let disabled: boolean = false
     export let error: string = undefined
+    export let inputElement: HTMLInputElement = undefined
 
     let addressPrefix: string
     let value: string
 
     $: addressPrefix = $networkHrp
-    $: value = recipient?.address ?? ''
+    $: value = recipient?.type === 'address' ? recipient?.address ?? '' : recipient?.account?.name ?? ''
     $: value, validateValue()
 
     function onInputChange(e: Event): void {
@@ -23,19 +24,26 @@
 
     function validateValue(): void {
         error = null
-        if (!value?.length) {
-            error = localize('general.enterAddress')
-        } else if (value?.length !== BECH32_ADDRESS_LENGTH + addressPrefix.length) {
-            error = localize('error.send.addressLength', {
-                values: {
-                    length: BECH32_ADDRESS_LENGTH + addressPrefix.length,
-                },
-            })
-        } else {
-            try {
-                validateBech32Address(addressPrefix, value)
-            } catch (err) {
-                error = err?.message ?? err
+        if (recipient?.type === 'address') {
+            localize('error.send.recipientRequired')
+            if (!value?.length) {
+                error = localize('general.enterAddress')
+            } else if (value?.length !== BECH32_ADDRESS_LENGTH + addressPrefix.length) {
+                error = localize('error.send.addressLength', {
+                    values: {
+                        length: BECH32_ADDRESS_LENGTH + addressPrefix.length,
+                    },
+                })
+            } else {
+                try {
+                    validateBech32Address(addressPrefix, value)
+                } catch (err) {
+                    error = err?.message ?? err
+                }
+            }
+        } else if (recipient?.type === 'account') {
+            if (!recipient?.account?.depositAddress?.length) {
+                error = localize('error.send.recipientRequired')
             }
         }
     }
@@ -46,6 +54,7 @@
     <input
         type="text"
         {value}
+        bind:this={inputElement}
         on:input={onInputChange}
         class="w-full bg-white dark:bg-gray-800 text-gray-800 dark:text-white"
         {disabled}

diff --git a/packages/mobile/views/dashboard/drawers/send/views/AmountView.svelte b/packages/mobile/views/dashboard/drawers/send/views/AmountView.svelte
@@ -13,8 +13,10 @@
         NewTransactionType,
         updateNewTransactionDetails,
     } from '@core/wallet'
-    import { AmountInput, Button, HR } from '@ui'
+    import { AmountInput, Button, HR, Text } from '@ui'
 
+    import { formatCurrency } from '@core/i18n'
+    import { getMarketAmountFromAssetValue } from '@core/market/utils'
     import { getAssetById } from '@core/wallet'
     import { TokenUnitSwapper, TokenWithMax } from '../../../../../components'
     import { sendRouter } from '../../../../../lib/routers'
@@ -40,7 +42,8 @@
     }
 
     $: bigAmount = convertToRawAmount(amount, unit, asset?.metadata)
-    $: amount, validate()
+    $: (amount, unit), validate()
+    $: marketAmount = getMarketAmountFromAssetValue(bigAmount, asset)
 
     onMount(() => {
         if ($newTransactionDetails?.type === NewTransactionType.TokenTransfer) {
@@ -98,7 +101,7 @@
             return
         }
         amount = asset?.balance.available.toString() ?? '0'
-        unit = undefined
+        unit = asset?.metadata?.unit
     }
 
     function onContinueClick(): void {
@@ -112,23 +115,26 @@
 </script>
 
 <div class="w-full overflow-y-auto flex flex-col flex-auto h-1 justify-between">
-    <div class="flex flex-row flex-1 items-center justify-center relative">
-        <div class="flex flex-row items-center space-x-2 px-28" on:click={() => amountInputElement.focus()}>
-            <AmountInput
-                bind:inputElement={amountInputElement}
-                bind:amount
-                hasFocus={false}
-                maxDecimals={allowedDecimals}
-                isInteger={allowedDecimals === 0}
-                clearBackground
-                clearPadding
-                clearBorder
-            />
-            <p class="font-600 text-gray-800 dark:text-white text-24 leading-140">{unit}</p>
-        </div>
-        <div class="absolute right-0">
-            <TokenUnitSwapper {tokenMetadata} selectedUnit={unit} onClick={toggleUnit} />
+    <div class="flex-1 flex flex-col space-y-2 items-center justify-center">
+        <div class="flex flex-row items-center justify-center relative">
+            <div class="flex flex-row items-center space-x-2 px-28" on:click={() => amountInputElement.focus()}>
+                <AmountInput
+                    bind:inputElement={amountInputElement}
+                    bind:amount
+                    hasFocus={false}
+                    maxDecimals={allowedDecimals}
+                    isInteger={allowedDecimals === 0}
+                    clearBackground
+                    clearPadding
+                    clearBorder
+                />
+                <p class="font-600 text-gray-800 dark:text-white text-24 leading-140">{unit}</p>
+            </div>
+            <div class="absolute right-0">
+                <TokenUnitSwapper {tokenMetadata} selectedUnit={unit} onClick={toggleUnit} />
+            </div>
         </div>
+        <Text color="gray-600" darkColor="gray-500" fontSize="xs">{formatCurrency(marketAmount) ?? ''}</Text>
     </div>
     <div class="flex flex-col space-y-8 w-full">
         {#if $newTransactionDetails?.type === NewTransactionType.TokenTransfer}

diff --git a/packages/mobile/views/dashboard/drawers/send/views/RecipientView.svelte b/packages/mobile/views/dashboard/drawers/send/views/RecipientView.svelte
@@ -1,16 +1,33 @@
 <script lang="typescript">
+    import { selectedAccountIndex } from '@core/account/stores'
     import { localize } from '@core/i18n'
-    import { newTransactionDetails, updateNewTransactionDetails } from '@core/wallet'
-    import { Button } from 'shared/components'
+    import { visibleActiveAccounts } from '@core/profile/stores'
+    import { truncateString } from '@core/utils'
+    import { IAccountSubject, IAddressSubject, newTransactionDetails, updateNewTransactionDetails } from '@core/wallet'
+    import { getSubjectFromAddress } from '@core/wallet/utils'
+    import { Button, FontWeight, IOption, Text, TextType } from 'shared/components'
     import { onMount } from 'svelte'
     import { RecipientInput } from '../../../../../components'
     import { sendRouter } from '../../../../../lib/routers'
-    import { IAddressSubject } from '@core/wallet'
 
-    let recipient: IAddressSubject
+    let recipient: IAddressSubject | IAccountSubject
     let recipientValidationError: string
+    let recipientInputElement: HTMLInputElement
+
+    let recipientQuickListOptions: IOption[] = []
+    $: recipientQuickListOptions = $visibleActiveAccounts
+        .filter((account) => account.index !== $selectedAccountIndex)
+        .map((account) => ({
+            id: account.index,
+            key: account.name,
+            value: account.depositAddress,
+        }))
+
+    let filteredQuickListOptions: IOption[] = []
+    $: recipient, updateFilteredQuickListOptions()
 
     onMount(() => {
+        recipientInputElement?.focus()
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         recipient = $newTransactionDetails?.recipient
@@ -20,10 +37,49 @@
         updateNewTransactionDetails({ type: $newTransactionDetails.type, recipient })
         $sendRouter.next()
     }
+
+    function updateFilteredQuickListOptions(): void {
+        const lowerCaseRecipient =
+            recipient?.type === 'address' ? recipient?.address?.toLowerCase() : recipient?.account?.name?.toLowerCase()
+        filteredQuickListOptions = lowerCaseRecipient
+            ? recipientQuickListOptions.filter(
+                  (option) =>
+                      option?.key?.toLowerCase()?.includes(lowerCaseRecipient) ||
+                      option?.value?.toLowerCase()?.includes(lowerCaseRecipient)
+              )
+            : recipientQuickListOptions
+    }
+
+    function handleClick(option: IOption): void {
+        recipient = getSubjectFromAddress(option?.value)
+    }
 </script>
 
-<div class="w-full overflow-y-auto flex flex-col flex-auto h-1 justify-between">
-    <RecipientInput bind:recipient bind:error={recipientValidationError} />
+<div class="w-full overflow-y-auto flex flex-col flex-auto h-1 space-y-4 justify-between">
+    <RecipientInput bind:recipient bind:error={recipientValidationError} bind:inputElement={recipientInputElement} />
+    <div class="flex flex-col flex-1 space-y-1 overflow-y-auto">
+        {#each filteredQuickListOptions as option}
+            <button
+                on:click={() => handleClick(option)}
+                class="w-full flex flex-row w-full justify-between items-center px-2 py-3 rounded-lg hover:bg-blue-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20"
+            >
+                <div class="flex flex-row gap-3 justify-start items-center" style="max-width: 50%;">
+                    <Text
+                        type={TextType.p}
+                        fontSize="sm"
+                        fontWeight={FontWeight.medium}
+                        color="gray-800"
+                        classes="truncate"
+                    >
+                        {option.key}
+                    </Text>
+                </div>
+                <Text type={TextType.pre} fontSize="sm" color="gray-600">
+                    {truncateString(option.value, 9, 9)}
+                </Text>
+            </button>
+        {/each}
+    </div>
     <Button disabled={!!recipientValidationError} outline classes="w-full" onClick={onContinueClick}>
         {recipientValidationError ?? localize('actions.continue')}
     </Button>

diff --git a/packages/shared/components/inputs/AssetAmountInput.svelte b/packages/shared/components/inputs/AssetAmountInput.svelte
@@ -50,9 +50,8 @@
     function onClickAvailableBalance(): void {
         const isRawAmount = asset?.metadata?.decimals && asset?.metadata?.unit
         if (isRawAmount) {
-            const parsedAmount = formatTokenAmountDefault(availableBalance, asset?.metadata, unit)
+            const parsedAmount = formatTokenAmountDefault(availableBalance, asset?.metadata, unit, false)
             amount = parsedAmount
-            unit = asset?.metadata?.unit
             return
         }
         amount = availableBalance.toString() ?? '0'