enhancement: added the asset code to the right of asset input

greymass · Oct 4, 2024 · 8bc9e60 · 8bc9e60
1 parent 95ff885
commit 8bc9e60
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 30 deletions.
diff --git a/src/lib/components/input/asset.svelte b/src/lib/components/input/asset.svelte
@@ -4,7 +4,7 @@
 	import TextInput from './text.svelte';
 	import Big from 'big.js';
 
-	interface AssetInputProps extends ComponentProps<TextInput> {
+	interface AssetInputProps extends ComponentProps<typeof TextInput> {
 		min?: number;
 		max?: number;
 		valid?: boolean;
@@ -121,9 +121,10 @@
 <TextInput
 	bind:ref
 	bind:value={input}
-	placeholder={zeroValue.quantity}
+	placeholder={zeroValue.value}
 	{autofocus}
 	inputmode="numeric"
+	rightText={String(symbol.code)}
 	{...props}
 />
 

diff --git a/src/lib/components/input/text.svelte b/src/lib/components/input/text.svelte
@@ -3,28 +3,53 @@
 
 	interface TextInputProps extends HTMLInputAttributes {
 		ref?: HTMLInputElement;
+		rightText?: string;
 	}
 
-	let { ref = $bindable(), value = $bindable(), ...props }: TextInputProps = $props();
+	let {
+		ref = $bindable(),
+		value = $bindable(),
+		rightText = '',
+		...props
+	}: TextInputProps = $props();
 </script>
 
-<input
-	class="
-	rounded-lg
-	border-2
-	border-mineShaft-600
-	bg-transparent
-	px-4
-	py-4
-	font-medium
-	focus:border-skyBlue-500
-	focus:outline-none
-	focus:ring
-	focus:ring-1
-	focus:ring-inset
-	focus:ring-skyBlue-500"
-	type="text"
-	bind:this={ref}
-	bind:value
-	{...props}
-/>
+<div class="relative">
+	<input
+		class="
+			w-full
+			rounded-lg
+			border-2
+			border-mineShaft-600
+			bg-transparent
+			px-4
+			py-4
+			font-medium
+			focus:border-skyBlue-500
+			focus:outline-none
+			focus:ring
+			focus:ring-1
+			focus:ring-inset
+			focus:ring-skyBlue-500
+			{rightText ? 'pr-12' : ''}"
+		type="text"
+		bind:this={ref}
+		bind:value
+		{...props}
+	/>
+	{#if rightText}
+		<span
+			class="
+				pointer-events-none
+				absolute
+				inset-y-0
+				right-0
+				flex
+				items-center
+				pr-4
+				text-gray-500"
+		>
+			{rightText}
+		</span>
+	{/if}
+</div>
diff --git a/src/routes/[network]/(account)/ram/buy/tokens/+page.svelte b/src/routes/[network]/(account)/ram/buy/tokens/+page.svelte
@@ -79,13 +79,7 @@
 <form onsubmit={preventDefault(handleBuyRAM)}>
 	<Stack class="gap-3">
 		<Label for="assetInput">Amount to buy</Label>
-		<AssetInput
-			id="assetInput"
-			bind:this={assetInput}
-			bind:value={buyRamState.tokens}
-			placeholder="0.0000 EOS"
-			autofocus
-		/>
+		<AssetInput id="assetInput" bind:this={assetInput} bind:value={buyRamState.tokens} autofocus />
 		{#if buyRamState.insufficientBalance}
 			<p class="text-red-500">Insufficient balance. Please enter a smaller amount.</p>
 		{/if}