chore: factored selector-input out (#4931)

packages/shared/components/inputs/AliasInput.svelte

@@ -1,35 +1,19 @@
 <script lang="typescript">
-    import { localize } from '@core/i18n'
-    import { InputContainer, Modal, TextInput, AliasSelector } from 'shared/components'
+    import { Modal, AliasSelector, SelectorInput } from 'shared/components'
 
     export let alias: string
     export let error: string = ''
 
     let inputElement: HTMLInputElement = undefined
     let modal: Modal = undefined
-
-    let hasFocus: boolean
-
-    $: hasFocus && (error = '')
-
-    $: if (hasFocus) {
-        setTimeout(() => modal?.open(), 101)
-    }
 </script>
 
-<alias-input class="w-full relative">
-    <InputContainer bind:inputElement clearPadding isFocused={hasFocus} {error}>
-        <TextInput
-            bind:inputElement
-            bind:value={alias}
-            bind:hasFocus
-            clearBackground
-            clearBorder
-            label={localize('popups.mintNativeToken.property.alias')}
-            placeholder={localize('popups.mintNativeToken.property.alias')}
-            fontSize="sm"
-            {...$$restProps}
-        />
-    </InputContainer>
+<SelectorInput
+    labelLocale="popups.mintNativeToken.property.alias"
+    bind:value={alias}
+    bind:inputElement
+    bind:modal
+    {error}
+>
     <AliasSelector bind:modal bind:selected={alias} onClose={() => inputElement.blur()} />
-</alias-input>
+</SelectorInput>

packages/shared/components/inputs/RecipientInput.svelte

@@ -4,7 +4,7 @@
     import { networkHrp } from '@core/network'
     import { Subject } from '@core/wallet'
     import { ADDRESS_LENGTH, validateBech32Address } from '@lib/utils'
-    import { InputContainer, Modal, RecipientAccountSelector, TextInput } from 'shared/components'
+    import { Modal, RecipientAccountSelector, SelectorInput } from 'shared/components'
 
     export let recipient: Subject
     export let disabled = false
@@ -17,7 +17,6 @@
     let selectedAccount: IAccountState
     let value: string
     let error: string
-    let hasFocus: boolean
     let previousValue: string
 
     if (!selectedAccount && recipient?.type === 'account') {
@@ -31,13 +30,6 @@
         ...(!selectedAccount && { type: 'address', address: value }),
     }
 
-    $: hasFocus && (error = '')
-    $: value && modal?.open()
-
-    $: if (hasFocus) {
-        setTimeout(() => modal?.open(), 101)
-    }
-
     $: {
         if (inputElement && selectedAccount) {
             inputElement.value = selectedAccount?.name
@@ -71,25 +63,11 @@
     }
 </script>
 
-<recipient-input class="w-full relative">
-    <InputContainer bind:inputElement clearPadding isFocused={hasFocus} {error}>
-        <TextInput
-            bind:inputElement
-            bind:value
-            bind:hasFocus
-            clearBackground
-            clearBorder
-            {disabled}
-            label={localize('general.recipient')}
-            placeholder={localize('general.recipient')}
-            fontSize="sm"
-            {...$$restProps}
-        />
-    </InputContainer>
+<SelectorInput labelLocale="popups.mintNativeToken.property.alias" bind:value bind:inputElement bind:modal {disabled}>
     <RecipientAccountSelector
         bind:modal
         bind:selected={selectedAccount}
         searchValue={value}
         onClose={() => inputElement.blur()}
     />
-</recipient-input>
+</SelectorInput>

packages/shared/components/molecules/SelectorInput.svelte

@@ -0,0 +1,39 @@
+<script lang="typescript">
+    import { localize } from '@core/i18n'
+    import { InputContainer, Modal, TextInput } from 'shared/components'
+
+    export let value: string
+    export let error: string = ''
+    export let disabled: boolean = false
+    export let labelLocale: string = ''
+    export let modal: Modal = undefined
+    export let inputElement: HTMLInputElement = undefined
+
+    let hasFocus: boolean
+
+    $: hasFocus && (error = '')
+
+    $: if (hasFocus) {
+        setTimeout(() => modal?.open(), 100)
+    }
+</script>
+
+<selector-input class="w-full relative">
+    <InputContainer bind:inputElement clearPadding isFocused={hasFocus} {error}>
+        <TextInput
+            bind:inputElement
+            bind:value
+            bind:hasFocus
+            clearBackground
+            clearBorder
+            {disabled}
+            label={localize(labelLocale)}
+            placeholder={localize(labelLocale)}
+            fontSize="sm"
+            {...$$restProps}
+        />
+    </InputContainer>
+    <slot onClose={() => inputElement.blur()}>
+        <!-- Contains Custom Selector -->
+    </slot>
+</selector-input>

packages/shared/components/molecules/index.js

@@ -5,6 +5,7 @@ export { default as DateInputButton } from './DateInputButton.svelte'
 export { default as ExpirationTimePicker } from './ExpirationTimePicker.svelte'
 export { default as FoundryDetails } from './FoundryDetails.svelte'
 export { default as NftDetails } from './NftDetails.svelte'
+export { default as SelectorInput } from './SelectorInput.svelte'
 export { default as ShimmerClaimingAccountList } from './ShimmerClaimingAccountList.svelte'
 export { default as TransactionDetails } from './TransactionDetails.svelte'
 export { default as VerificationBadge } from './VerificationBadge.svelte'