feat: add validate input on blur

packages/shared/components/SelectorInput.svelte

@@ -3,6 +3,7 @@
     import { Modal, TextInput, Text, TextType, FontWeight, IOption } from 'shared/components'
     import { fade } from 'svelte/transition'
     import { truncateString } from '@core/utils'
+    import { createEventDispatcher } from 'svelte'
 
     export let labelLocale: string
     export let options: IOption[]
@@ -16,6 +17,8 @@
     // If the attribute is set to false, HTML interprets it as a readonly field.
     export let readonly: boolean | null = null
 
+    const dispatch = createEventDispatcher()
+
     let value: string = selected?.key ?? selected?.value ?? ''
     let previousValue: string = value
     let hasFocus: boolean
@@ -73,6 +76,7 @@
         placeholder={localize(labelLocale)}
         fontSize="sm"
         {readonly}
+        on:blur={() => dispatch('blur')}
         {...$$restProps}
     >
         <div slot="right">

packages/shared/components/inputs/AmountInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { NumberInput, FontWeight } from 'shared/components'
+    import { createEventDispatcher } from 'svelte'
 
     export let inputElement: HTMLInputElement | undefined = undefined
     export let fontSize = 24
@@ -8,6 +9,8 @@
     export let hasFocus = false
     export let amount: string = ''
 
+    const dispatch = createEventDispatcher()
+
     $: amount, addLeadingZeroToDecimalSeparator()
 
     function addLeadingZeroToDecimalSeparator(): void {
@@ -26,5 +29,6 @@
     {fontSize}
     alignment="right"
     {fontWeight}
+    on:blur={() => dispatch('blur')}
     {...$$restProps}
 />

packages/shared/components/inputs/AssetAmountInput.svelte

@@ -119,6 +119,7 @@
             clearPadding
             clearBorder
             {disabled}
+            on:blur={() => validate()?.catch((err) => console.error(err))}
         />
         {#if getUnitFromTokenMetadata(asset?.metadata)}
             <UnitInput bind:unit bind:isFocused {disabled} tokenMetadata={asset?.metadata} />

packages/shared/components/inputs/Input.svelte

@@ -165,7 +165,10 @@
                         on:paste={onPaste}
                         on:contextmenu={handleContextMenu}
                         on:focus={() => (hasFocus = true)}
-                        on:blur={() => (hasFocus = false)}
+                        on:blur={() => {
+                            hasFocus = false
+                            dispatch('blur')
+                        }}
                         on:change={() => dispatch('change')}
                         {disabled}
                         {placeholder}

packages/shared/components/inputs/NumberInput.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
     import { TextInput } from 'shared/components'
     import { localize } from '@core/i18n'
+    import { createEventDispatcher } from 'svelte'
 
     export let inputElement: HTMLInputElement = undefined
 
     export let disabled = false
     export let hasFocus = false
     export let value: string
     export let isInteger: boolean
+
+    const dispatch = createEventDispatcher()
 </script>
 
 <TextInput
@@ -18,6 +21,7 @@
     placeholder={localize('general.amount')}
     float={!isInteger}
     integer={isInteger}
+    on:blur={() => dispatch('blur')}
     {...$$restProps}
 >
     <slot name="right-full-h" slot="right-full-h" />

packages/shared/components/inputs/RecipientInput.svelte

@@ -74,6 +74,7 @@
     {disabled}
     options={accountOptions}
     pickerHeight="max-h-48"
+    on:blur={() => validate()?.catch((err) => console.error(err))}
     {...$$restProps}
     let:option
 >

packages/shared/components/inputs/TextInput.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { createEventDispatcher } from 'svelte'
     import Input from './Input.svelte'
     import { FontWeight, InputType, TextPropTypes, TextType } from 'shared/components'
 
@@ -15,11 +16,23 @@
     export let fontSize = 'sm'
     export let lineHeight = '140'
 
+    const dispatch = createEventDispatcher()
+
     let textProps: TextPropTypes
     $: textProps = { type: textType, fontSize, lineHeight, fontWeight }
 </script>
 
-<Input bind:inputElement bind:value bind:hasFocus bind:error type={inputType} {textProps} {alignment} {...$$restProps}>
+<Input
+    bind:inputElement
+    bind:value
+    bind:hasFocus
+    bind:error
+    type={inputType}
+    {textProps}
+    {alignment}
+    on:blur={() => dispatch('blur')}
+    {...$$restProps}
+>
     <slot name="left" slot="left" />
     <slot name="right" slot="right" />
     <slot name="right-full-h" slot="right-full-h" />