Trading Offers Create

Author: simonredfern

src/lib/components/CurrentBankPicker.svelte

@@ -11,9 +11,17 @@
 		action?: string;
 		/** Called with the new bank id whenever the selection changes. */
 		onSelect?: (bankId: string) => void;
+		/** Render inline with no help text, for placing in a header row. */
+		compact?: boolean;
 	}
 
-	let { banks, selectedBankId = '', action = '?/setBank', onSelect }: Props = $props();
+	let {
+		banks,
+		selectedBankId = '',
+		action = '?/setBank',
+		onSelect,
+		compact = false
+	}: Props = $props();
 
 	let saving = $state(false);
 	let justSaved = $state(false);
@@ -42,15 +50,15 @@
 		};
 	}}
 >
-	<label class="label">
-		<span class="label-text flex items-center gap-2">
+	<label class="label" class:flex={compact} class:items-center={compact} class:gap-2={compact}>
+		<span class="label-text flex items-center gap-2 whitespace-nowrap">
 			<Landmark class="size-4 text-primary-500" />
 			Current Bank
 		</span>
 		<div class="flex items-center gap-3">
 			<select
 				name="bank_id"
-				class="select"
+				class="select max-w-md"
 				value={selectedBankId}
 				disabled={saving}
 				onchange={(e) => {
@@ -77,8 +85,10 @@
 			{/if}
 		</div>
 	</label>
-	<p class="text-xs text-surface-600-400 mt-1">
-		Saved to your OBP profile (<span class="font-mono">CURRENT_BANK_ID</span>) and shared across OBP
-		apps.
-	</p>
+	{#if !compact}
+		<p class="text-xs text-surface-600-400 mt-1">
+			Saved to your OBP profile (<span class="font-mono">CURRENT_BANK_ID</span>) and shared across
+			OBP apps.
+		</p>
+	{/if}
 </form>

src/routes/trading/+page.svelte

@@ -49,9 +49,19 @@
 </script>
 
 <div class="p-8">
-	<div class="flex items-center gap-4 mb-8">
+	<div class="flex flex-wrap items-center gap-4 mb-8">
 		<TrendingUp class="size-8 text-primary-500" />
 		<h1 class="h1">Trading</h1>
+		{#if data.isAuthenticated}
+			<div class="ms-auto">
+				<CurrentBankPicker
+					banks={data.banks}
+					selectedBankId={bankId}
+					onSelect={(b) => (bankId = b)}
+					compact
+				/>
+			</div>
+		{/if}
 	</div>
 
 	{#if !data.isAuthenticated}
@@ -63,19 +73,6 @@
 		</div>
 	{:else}
 		<div class="space-y-8">
-			<section class="card p-8 preset-filled-surface-100-900">
-				<h2 class="h3 mb-2">Current Bank</h2>
-				<p class="text-surface-600-400 mb-6">
-					Pick the bank you're trading on. This is saved to your OBP profile and used as the default
-					below.
-				</p>
-				<CurrentBankPicker
-					banks={data.banks}
-					selectedBankId={bankId}
-					onSelect={(b) => (bankId = b)}
-				/>
-			</section>
-
 			<section class="card p-8 preset-filled-surface-100-900">
 				<div class="flex flex-wrap items-center justify-between gap-4 mb-2">
 					<h2 class="h3">Your Accounts</h2>

src/routes/trading/banks/[bankId]/accounts/[accountId]/views/[viewId]/offers/create/+page.server.ts

@@ -58,16 +58,17 @@ export const actions: Actions = {
 			minimum_fill: (formData.get('minimum_fill') as string) ?? ''
 		};
 
+		// The API expects amounts as decimal strings (e.g. "100.00"), not numbers.
 		const body: Record<string, unknown> = {
 			offer_type: values.offer_type,
 			asset_code: values.asset_code,
-			asset_amount: values.asset_amount ? Number(values.asset_amount) : undefined,
+			asset_amount: values.asset_amount || undefined,
 			price_currency: values.price_currency,
-			price_amount: values.price_amount ? Number(values.price_amount) : undefined,
+			price_amount: values.price_amount || undefined,
 			settlement_account_id: values.settlement_account_id
 		};
 		if (values.expiry_datetime) body.expiry_datetime = values.expiry_datetime;
-		if (values.minimum_fill) body.minimum_fill = Number(values.minimum_fill);
+		if (values.minimum_fill) body.minimum_fill = values.minimum_fill;
 
 		for (const key of Object.keys(body)) {
 			if (body[key] === '' || body[key] === null || body[key] === undefined) {