enhancement: merging both buy ram forms into one

src/lib/components/input/bytes.svelte

@@ -6,7 +6,7 @@
 		valid?: boolean;
 		validMinimum?: boolean;
 		validMaximum?: boolean;
-		value: number;
+		value: number | undefined;
 		debug?: boolean;
 	}
 
@@ -56,7 +56,7 @@
 		const oldMultiplier = UNIT_MULTIPLIERS[unit];
 
 		console.log({ value, oldMultiplier });
-		const newValue = value / oldMultiplier;
+		const newValue = (value || 0) / oldMultiplier;
 		input = String(newValue);
 	});
 

src/routes/[network]/(account)/ram/+layout.svelte

@@ -10,8 +10,8 @@
 		const network = String(data.network);
 		return [
 			{ href: `/${network}/ram`, text: 'Overview' },
-			{ href: `/${network}/ram/buy/tokens`, text: 'Buy RAM' },
-			{ href: `/${network}/ram/sell/tokens`, text: 'Sell RAM' }
+			{ href: `/${network}/ram/buy`, text: 'Buy RAM' },
+			{ href: `/${network}/ram/sell`, text: 'Sell RAM' }
 		];
 	});
 
@@ -20,9 +20,7 @@
 	let options = $derived(
 		tabOptions.map((option) => ({
 			...option,
-			active:
-				`/${$page.url.pathname.split('/').slice(2).slice(0, -1).join('/')}` ===
-				option.href.split('/').slice(0, -1).join('/')
+			active: $page.url.pathname.replace(/^\/[^\/]+/, '') === option.href
 		}))
 	);
 

src/routes/[network]/(account)/ram/buy/bytes/+page.svelte → src/routes/[network]/(account)/ram/buy/+page.svelte

@@ -13,8 +13,9 @@
 	import Stack from '$lib/components/layout/stack.svelte';
 	import Transaction from '$lib/components/transaction.svelte';
 	import AssetInput from '$lib/components/input/asset.svelte';
+	import BytesInput from '$lib/components/input/bytes.svelte';
 
-	import { BuyRAMState } from '../state.svelte.js';
+	import { BuyRAMState } from './state.svelte.js';
 	import { preventDefault } from '$lib/utils.js';
 
 	const context = getContext<UnicoveContext>('state');
@@ -23,8 +24,6 @@
 
 	const buyRamState: BuyRAMState = $state(new BuyRAMState(data.network.chain));
 
-	buyRamState.format = 'units';
-
 	let bytesInput: AssetInput | undefined = $state();
 
 	let transactionId: Checksum256 | undefined = $state();
@@ -80,13 +79,24 @@
 <form onsubmit={preventDefault(handleBuyRAM)}>
 	<Stack class="gap-3">
 		<Label for="bytesInput">Amount to buy</Label>
-		<AssetInput
-			id="bytesInput"
-			bind:this={bytesInput}
-			bind:value={buyRamState.kbsAmount}
-			placeholder="0.0000 KB"
-			autofocus
-		/>
+		<div class="flex gap-4">
+			<div class="flex-1">
+				<AssetInput
+					id="assetInput"
+					bind:this={bytesInput}
+					bind:value={buyRamState.tokens}
+					autofocus
+				/>
+			</div>
+			<div class="flex-1">
+				<BytesInput
+					id="bytesInput"
+					bind:this={bytesInput}
+					bind:value={buyRamState.bytes}
+					placeholder="0 bytes"
+				/>
+			</div>
+		</div>
 		{#if buyRamState.insufficientBalance}
 			<p class="text-red-500">Insufficient balance. Please enter a smaller amount.</p>
 		{/if}

src/routes/[network]/(account)/ram/buy/state.svelte.ts

@@ -15,9 +15,10 @@ export class BuyRAMState {
 	public balance: Asset = $state(defaultQuantity);
 	public chain: ChainDefinition = $state(Chains.EOS);
 	public pricePerKB: Asset = $state(defaultQuantity);
-	public format: 'asset' | 'units' = $state('asset');
 
-	public bytes: number = $derived(this.kbsAmount.value * 1000);
+	public bytes: number | undefined = $state();
+
+	public format: 'asset' | 'bytes' = $derived(this.bytes ? 'bytes' : 'asset');
 
 	public pricePerByte: Asset = $derived(
 		Asset.fromUnits(this.pricePerKB.value / 1000, this.pricePerKB.symbol)
@@ -56,7 +57,7 @@ export class BuyRAMState {
 
 	public valid: boolean = $derived(
 		!!(
-			((this.format === 'units' && this.bytes) ||
+			((this.format === 'bytes' && this.bytes) ||
 				(this.format === 'asset' && this.tokens.value > 0)) &&
 			this.bytesCost.units.lte(this.balance.units) &&
 			this.payer.value &&