feat(frontend): extract common input text component (#3141)

# Motivation I noticed that all input type `text` are similar. Given that I want to add a property to all of them, I thought that we can get started by extracting a common component. # Changes - create `InputText` for all text inputs and consume it
dfinity · Oct 28, 2024 · 2f93aac · 2f93aac
1 parent 7a9fffb
commit 2f93aac
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 38 deletions.
diff --git a/src/frontend/src/eth/components/tokens/AddTokenForm.svelte b/src/frontend/src/eth/components/tokens/AddTokenForm.svelte
@@ -1,18 +1,15 @@
 <script lang="ts">
-	import { Input } from '@dfinity/gix-components';
+	import InputText from '$lib/components/ui/InputText.svelte';
 	import { i18n } from '$lib/stores/i18n.store';
 
 	export let contractAddress = '';
 </script>
 
 <div class="stretch">
 	<label for="destination" class="px-4.5 font-bold">{$i18n.tokens.text.contract_address}:</label>
-	<Input
+	<InputText
 		name="contractAddress"
-		inputType="text"
-		required
 		bind:value={contractAddress}
 		placeholder={$i18n.tokens.placeholder.enter_contract_address}
-		spellcheck={false}
 	/>
 </div>
diff --git a/src/frontend/src/eth/components/wallet-connect/WalletConnectForm.svelte b/src/frontend/src/eth/components/wallet-connect/WalletConnectForm.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-	import { Input, QRCodeReader } from '@dfinity/gix-components';
+	import { QRCodeReader } from '@dfinity/gix-components';
 	import { createEventDispatcher } from 'svelte';
 	import Button from '$lib/components/ui/Button.svelte';
 	import ButtonGroup from '$lib/components/ui/ButtonGroup.svelte';
 	import ContentWithToolbar from '$lib/components/ui/ContentWithToolbar.svelte';
+	import InputText from '$lib/components/ui/InputText.svelte';
 	import {
 		TRACK_COUNT_WALLET_CONNECT,
 		TRACK_COUNT_WALLET_CONNECT_QR_CODE
@@ -83,13 +84,7 @@
 
 	<p class="pb-2 pt-4 text-center">{$i18n.wallet_connect.text.or_use_link}</p>
 
-	<Input
-		name="uri"
-		required
-		inputType="text"
-		placeholder="e.g. wc:a281567bb3e4..."
-		bind:value={uri}
-	/>
+	<InputText name="uri" placeholder="e.g. wc:a281567bb3e4..." bind:value={uri} />
 
 	<ButtonGroup slot="toolbar">
 		<Button disabled={invalid} on:click={onClick}>

diff --git a/src/frontend/src/icp/components/tokens/IcAddTokenForm.svelte b/src/frontend/src/icp/components/tokens/IcAddTokenForm.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Input } from '@dfinity/gix-components';
 	import ExternalLink from '$lib/components/ui/ExternalLink.svelte';
+	import InputText from '$lib/components/ui/InputText.svelte';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { replaceOisyPlaceholders } from '$lib/utils/i18n.utils';
 
@@ -23,24 +23,18 @@
 	<label for="ledgerCanisterId" class="px-4.5 font-bold"
 		>{$i18n.tokens.import.text.ledger_canister_id}:</label
 	>
-	<Input
+	<InputText
 		name="ledgerCanisterId"
-		inputType="text"
-		required
 		bind:value={ledgerCanisterId}
 		placeholder="_____-_____-_____-_____-cai"
-		spellcheck={false}
 	/>
 
 	<label for="indexCanisterId" class="px-4.5 font-bold"
 		>{$i18n.tokens.import.text.index_canister_id}:</label
 	>
-	<Input
+	<InputText
 		name="indexCanisterId"
-		inputType="text"
-		required
 		bind:value={indexCanisterId}
 		placeholder="_____-_____-_____-_____-cai"
-		spellcheck={false}
 	/>
 </div>
diff --git a/src/frontend/src/lib/components/manage/ManageTokens.svelte b/src/frontend/src/lib/components/manage/ManageTokens.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { IconClose, Input } from '@dfinity/gix-components';
+	import { IconClose } from '@dfinity/gix-components';
 	import { debounce, nonNullish } from '@dfinity/utils';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
@@ -27,6 +27,7 @@
 	import ButtonGroup from '$lib/components/ui/ButtonGroup.svelte';
 	import Card from '$lib/components/ui/Card.svelte';
 	import Hr from '$lib/components/ui/Hr.svelte';
+	import InputText from '$lib/components/ui/InputText.svelte';
 	import { exchanges } from '$lib/derived/exchange.derived';
 	import {
 		networkEthereum,
@@ -195,12 +196,11 @@
 </script>
 
 <div class="mb-4">
-	<Input
+	<InputText
 		name="filter"
-		inputType="text"
+		required={false}
 		bind:value={filter}
 		placeholder={$i18n.tokens.placeholder.search_token}
-		spellcheck={false}
 	>
 		<svelte:fragment slot="inner-end">
 			{#if noTokensMatch}
@@ -211,7 +211,7 @@
 				<IconSearch />
 			{/if}
 		</svelte:fragment>
-	</Input>
+	</InputText>
 </div>
 
 {#if nonNullish($selectedNetwork)}

diff --git a/src/frontend/src/lib/components/send/SendInputDestination.svelte b/src/frontend/src/lib/components/send/SendInputDestination.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Input } from '@dfinity/gix-components';
 	import { debounce, nonNullish } from '@dfinity/utils';
 	import { slide } from 'svelte/transition';
 	import QRButton from '$lib/components/common/QRButton.svelte';
+	import InputText from '$lib/components/ui/InputText.svelte';
 	import { SLIDE_DURATION } from '$lib/constants/transition.constants';
 	import { i18n } from '$lib/stores/i18n.store';
 	import type { NetworkId } from '$lib/types/network';
@@ -22,21 +22,13 @@
 </script>
 
 <label for="destination" class="px-4.5 font-bold">{$i18n.send.text.destination}:</label>
-<Input
-	name="destination"
-	inputType="text"
-	required
-	bind:value={destination}
-	placeholder={inputPlaceholder}
-	spellcheck={false}
-	on:nnsInput
->
+<InputText name="destination" bind:value={destination} placeholder={inputPlaceholder} on:nnsInput>
 	<svelte:fragment slot="inner-end">
 		{#if nonNullish(onQRButtonClick)}
 			<QRButton on:click={onQRButtonClick} />
 		{/if}
 	</svelte:fragment>
-</Input>
+</InputText>
 
 {#if invalidDestination}
 	<p transition:slide={SLIDE_DURATION} class="pb-3 text-cyclamen">

diff --git a/src/frontend/src/lib/components/ui/InputText.svelte b/src/frontend/src/lib/components/ui/InputText.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Input } from '@dfinity/gix-components';
+
+	export let value = '';
+	export let name: string;
+	export let placeholder: string;
+	export let required = true;
+</script>
+
+<Input {name} inputType="text" {required} bind:value {placeholder} spellcheck={false} on:nnsInput>
+	<slot name="inner-end" slot="inner-end" />
+</Input>