Tweak order detail styling

packages/ui-components/src/__tests__/ButtonVaultLink.test.ts → packages/ui-components/src/__tests__/OrderVaultInfo.test.ts

@@ -1,15 +1,13 @@
 import { describe, it, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/svelte';
-import ButtonVaultLink from '../lib/components/ButtonVaultLink.svelte';
-import * as navigation from '$app/navigation';
-import { userEvent } from '@testing-library/user-event';
+import OrderVaultInfo from '../lib/components/OrderVaultInfo.svelte';
 import type { Vault } from '@rainlanguage/orderbook/js_api';
 // Mock the $app/navigation module
 vi.mock('$app/navigation', () => ({
 	goto: vi.fn()
 }));
 
-describe('ButtonVaultLink', () => {
+describe('OrderVaultInfo', () => {
 	const mockVault = {
 		id: '123',
 		vaultId: '1000',
@@ -21,17 +19,15 @@ describe('ButtonVaultLink', () => {
 		}
 	} as unknown as Vault;
 
-	it('should navigate to vault details page when clicked', async () => {
-		render(ButtonVaultLink, {
+	it('should display vault name and address', () => {
+		render(OrderVaultInfo, {
 			props: {
 				tokenVault: mockVault,
 				subgraphName: 'test'
 			}
 		});
 
-		const vaultLink = screen.getByTestId('vault-link');
-		expect(vaultLink).toBeTruthy();
-		await userEvent.click(vaultLink);
-		expect(navigation.goto).toHaveBeenCalledWith(`/vaults/test-${mockVault.id}`);
+		expect(screen.getByText('Test Token (TEST)')).toBeInTheDocument();
+		expect(screen.getByText('1')).toBeInTheDocument();
 	});
 });

packages/ui-components/src/lib/components/OrderOrVaultHash.svelte

@@ -9,7 +9,8 @@
 	export let orderOrVault: OrderOrVault;
 	export let type: 'orders' | 'vaults';
 	export let network: string;
-	export let updateActiveNetworkAndOrderbook: (subgraphName: string) => void;
+	export let updateActiveNetworkAndOrderbook: ((subgraphName: string) => void) | undefined =
+		undefined;
 
 	let hash;
 
@@ -20,12 +21,12 @@
 </script>
 
 <Button
-	class="mr-1 mt-1 px-2 py-1 text-sm"
+	class="mr-1 mt-1 w-fit px-2 py-1 text-sm"
 	color={isActive ? 'green' : 'yellow'}
 	data-testid="vault-order-input"
 	data-id={slug}
 	on:click={() => {
-		updateActiveNetworkAndOrderbook(network);
+		updateActiveNetworkAndOrderbook?.(network);
 		goto(`/${type}/${network}-${slug}`);
 	}}><Hash type={HashType.Identifier} value={hash} copyOnClick={false} /></Button
 >

packages/ui-components/src/lib/components/OrderVaultInfo.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Vault } from '@rainlanguage/orderbook/js_api';
+	import { formatUnits } from 'viem';
+	import OrderOrVaultHash from './OrderOrVaultHash.svelte';
+
+	export let tokenVault: Vault;
+	export let subgraphName: string;
+</script>
+
+<div class="flex w-full flex-row justify-between">
+	<div class="flex flex-col gap-2">
+		<span class="font-medium">
+			{tokenVault.token.name} ({tokenVault.token.symbol})
+		</span>
+		<OrderOrVaultHash orderOrVault={tokenVault} type="vaults" network={subgraphName} />
+	</div>
+	<div class="flex flex-col gap-2">
+		<span>Balance</span>
+		<span class="text-right text-sm text-gray-500 dark:text-gray-400">
+			{formatUnits(BigInt(tokenVault.balance), parseInt(tokenVault.token.decimals || '18'))}
+		</span>
+	</div>
+</div>

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

@@ -7,7 +7,6 @@
 	import TanstackPageContentDetail from './TanstackPageContentDetail.svelte';
 	import CardProperty from '../CardProperty.svelte';
 	import { formatTimestampSecondsAsLocal } from '../../utils/time';
-	import ButtonVaultLink from '../ButtonVaultLink.svelte';
 	import OrderVaultsVolTable from '../tables/OrderVaultsVolTable.svelte';
 	import { QKEY_ORDER } from '../../queries/keys';
 	import CodeMirrorRainlang from '../CodeMirrorRainlang.svelte';
@@ -21,6 +20,7 @@
 	import { page } from '$app/stores';
 	import DepositOrWithdrawButtons from './DepositOrWithdrawButtons.svelte';
 	import type { Config } from 'wagmi';
+	import OrderVaultInfo from '../OrderVaultInfo.svelte';
 
 	export let walletAddressMatchesOrBlank: Readable<(address: string) => boolean> | undefined =
 		undefined;
@@ -133,12 +133,9 @@
 			<CardProperty>
 				<svelte:fragment slot="key">Input vaults</svelte:fragment>
 				<svelte:fragment slot="value">
-					<div class="mb-2 hidden justify-end md:flex">
-						<span>Balance</span>
-					</div>
 					<div class="space-y-2">
 						{#each data.inputs || [] as vault}
-							<ButtonVaultLink tokenVault={vault} {subgraphName} />
+							<OrderVaultInfo tokenVault={vault} {subgraphName} />
 							{#if handleDepositOrWithdrawModal && $signerAddress === vault.owner && chainId}
 								<DepositOrWithdrawButtons
 									{vault}
@@ -156,12 +153,9 @@
 			<CardProperty>
 				<svelte:fragment slot="key">Output vaults</svelte:fragment>
 				<svelte:fragment slot="value">
-					<div class="mb-2 flex justify-end">
-						<span>Balance</span>
-					</div>
 					<div class="space-y-2">
 						{#each data.outputs || [] as vault}
-							<ButtonVaultLink tokenVault={vault} {subgraphName} />
+							<OrderVaultInfo tokenVault={vault} {subgraphName} />
 							{#if handleDepositOrWithdrawModal && $wagmiConfig && $signerAddress === vault.owner && chainId}
 								<DepositOrWithdrawButtons
 									{vault}

packages/ui-components/src/lib/index.ts

@@ -18,7 +18,7 @@ export { default as VaultsListTable } from './components/tables/VaultsListTable.
 export { default as PageHeader } from './components/PageHeader.svelte';
 export { default as CodeMirrorRainlang } from './components/CodeMirrorRainlang.svelte';
 export { default as BadgeActive } from './components/BadgeActive.svelte';
-export { default as ButtonVaultLink } from './components/ButtonVaultLink.svelte';
+export { default as OrderVaultInfo } from './components/OrderVaultInfo.svelte';
 export { default as ButtonTab } from './components/ButtonTab.svelte';
 export { default as ChartTimeFilters } from './components/charts/ChartTimeFilters.svelte';
 export { default as LightweightChart } from './components/charts/LightweightChart.svelte';