feat: show oracle info on order detail page (Phase 4)

packages/ui-components/src/__tests__/OrderDetail.test.ts

@@ -518,6 +518,40 @@ describe('OrderDetail', () => {
 		});
 	});
 
+	it('displays oracle URL when order has an oracle', async () => {
+		const oracleUrl = 'https://oracle.example.com/signed-context';
+		resolveOrder({ oracleUrl });
+
+		render(OrderDetail, {
+			props: defaultProps,
+			context: new Map([['$$_queryClient', queryClient]])
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText('Oracle')).toBeInTheDocument();
+			const link = screen.getByRole('link', { name: oracleUrl });
+			expect(link).toBeInTheDocument();
+			expect(link).toHaveAttribute('href', oracleUrl);
+			expect(link).toHaveAttribute('target', '_blank');
+			expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+		});
+	});
+
+	it('does not display oracle section when order has no oracle URL', async () => {
+		resolveOrder({ oracleUrl: undefined });
+
+		render(OrderDetail, {
+			props: defaultProps,
+			context: new Map([['$$_queryClient', queryClient]])
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText('Order')).toBeInTheDocument();
+		});
+
+		expect(screen.queryByText('Oracle')).not.toBeInTheDocument();
+	});
+
 	it('falls back to Hash component when no explorer link is available', async () => {
 		(getExplorerLink as Mock).mockReturnValue('');
 

packages/ui-components/src/lib/components/detail/OrderDetail.svelte

@@ -200,6 +200,30 @@
 				</svelte:fragment>
 			</CardProperty>
 
+			{#if data.oracleUrl}
+				<CardProperty>
+					<svelte:fragment slot="key">
+						<div class="flex items-center gap-x-2">
+							Oracle
+							<InfoCircleOutline class="h-4 w-4" /><Tooltip
+								>This order uses a signed context oracle for external data (e.g. price feeds).
+								Quotes include oracle data automatically.</Tooltip
+							>
+						</div>
+					</svelte:fragment>
+					<svelte:fragment slot="value">
+						<a
+							href={data.oracleUrl}
+							target="_blank"
+							rel="noopener noreferrer"
+							class="break-all text-blue-500 hover:underline"
+						>
+							{data.oracleUrl}
+						</a>
+					</svelte:fragment>
+				</CardProperty>
+			{/if}
+
 			{#each vaultTypesMap as { key, type, getter }}
 				{@const filteredVaults = data.vaultsList.items.filter((vault) => vault.vaultType === type)}
 				{@const vaultsListByType = data[getter]}