fix: fixed bytes input so it can handle decimal points

greymass · Oct 5, 2024 · 606d033 · 606d033
1 parent 02cffa7
commit 606d033
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 10 deletions.
diff --git a/src/lib/components/input/bytes.svelte b/src/lib/components/input/bytes.svelte
@@ -33,21 +33,39 @@
 		GB: 1000 * 1000 * 1000
 	};
 
+	let decimal = $state(false);
+
 	/** Convert the string into a usable number and update valid state */
 	$effect(() => {
+		console.log({ input });
 		const numericInput = Number(input);
+
+		console.log({ numericInput });
 		if (isNaN(numericInput) || numericInput < 0) {
+			console.log('invalid');
 			valid = false;
 			return;
 		}
+
+		decimal = false;
+
+		// Allowing decimal values
+		if (String(numericInput) !== input) {
+			decimal = true;
+
+			setTimeout(() => {
+				decimal = false;
+			}, 4000);
+		}
+
 		valid = true;
 		const multiplier = UNIT_MULTIPLIERS[unit];
 
 		value = numericInput * multiplier;
 	});
 
 	$effect(() => {
-		if (input !== String(value)) {
+		if (input !== String(value) && !decimal) {
 			input = value ? String(value / UNIT_MULTIPLIERS[unit]) : '';
 		}
 	});
@@ -89,7 +107,7 @@
 		bind:ref
 		bind:value={input}
 		placeholder="0 {unit}"
-		inputmode="decimal"
+		inputmode="numeric"
 		{autofocus}
 		{oninput}
 		{...props}

diff --git a/src/routes/[network]/(account)/ram/buy/+page.svelte b/src/routes/[network]/(account)/ram/buy/+page.svelte
@@ -74,18 +74,12 @@
 
 	function setAssetAmount() {
 		buyRamState.format = 'asset';
-		console.log({ expectedBytes: buyRamState.expectedBytes });
 		buyRamState.bytes = buyRamState.expectedBytes;
 	}
 
 	function setBytesAmount() {
 		buyRamState.format = 'bytes';
 		buyRamState.tokens = buyRamState.bytesValue;
-		console.log({
-			bytes: buyRamState.bytes,
-			bytesValue: buyRamState.bytesValue,
-			quant: buyRamState.bytesValue.value
-		});
 		assetInput?.set(buyRamState.bytesValue);
 	}
 </script>

diff --git a/src/routes/[network]/(account)/ram/sell/+page.svelte b/src/routes/[network]/(account)/ram/sell/+page.svelte
@@ -109,7 +109,7 @@
 			<p class="text-red-500">Insufficient RAM available. Please enter a smaller amount.</p>
 		{/if}
 		<p>
-			Available RAM:
+			RAM available:
 			{#if context.account}
 				{sellRamState.maxInKBs}
 			{:else}

diff --git a/src/routes/[network]/(account)/ram/sell/state.svelte.ts b/src/routes/[network]/(account)/ram/sell/state.svelte.ts
@@ -22,7 +22,7 @@ export class SellRAMState {
 			: Math.floor((this.tokens.value / this.pricePerKB.value) * 1000)
 	);
 
-	public kbsToSell: number | undefined = $derived((this.bytesToSell || 0) / 1000);
+	public kbsToSell: Asset | undefined = $derived(Asset.fromUnits(this.bytesToSell || 0, '3,KB'));
 
 	public maxValue: Asset = $derived(
 		Asset.from(this.max * this.pricePerKB.value, this.pricePerKB.symbol)