Merge pull request #1025 from rainlanguage/11/26/24-orderdetail-step-1

ActiveBadge and VaultLinkButton

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

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/svelte';
+import BadgeActive from '../lib/components/BadgeActive.svelte';
+import { describe, it, expect } from 'vitest';
+
+describe('BadgeActive', () => {
+	it('shows "Active" text when active is true', () => {
+		render(BadgeActive, { props: { active: true } });
+		expect(screen.getByText('Active')).toBeInTheDocument();
+	});
+
+	it('shows "Inactive" text when active is false', () => {
+		render(BadgeActive, { props: { active: false } });
+		expect(screen.getByText('Inactive')).toBeInTheDocument();
+	});
+
+	it('uses green color for active state', () => {
+		render(BadgeActive, { props: { active: true } });
+		const badge = screen.getByText('Active');
+		expect(badge.className).toContain('bg-green');
+	});
+
+	it('uses yellow color for inactive state', () => {
+		render(BadgeActive, { props: { active: false } });
+		const badge = screen.getByText('Inactive');
+		expect(badge.className).toContain('bg-yellow');
+	});
+});

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

@@ -0,0 +1,37 @@
+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 type { Vault } from '../lib/typeshare/subgraphTypes';
+
+// Mock the $app/navigation module
+vi.mock('$app/navigation', () => ({
+	goto: vi.fn()
+}));
+
+describe('ButtonVaultLink', () => {
+	const mockVault = {
+		id: '123',
+		vaultId: '1000',
+		balance: '1000000000000000000',
+		token: {
+			name: 'Test Token',
+			symbol: 'TEST',
+			decimals: '18'
+		}
+	};
+
+	it('should navigate to vault details page when clicked', async () => {
+		render(ButtonVaultLink, {
+			props: {
+				tokenVault: mockVault as unknown as Vault
+			}
+		});
+
+		const vaultLink = screen.getByTestId('vault-link');
+		expect(vaultLink).toBeTruthy();
+		await userEvent.click(vaultLink);
+		expect(navigation.goto).toHaveBeenCalledWith(`/vaults/${mockVault.id}`);
+	});
+});

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { Badge } from 'flowbite-svelte';
+	export let active: boolean;
+</script>
+
+{#if active}
+	<Badge color="green" {...$$props}>Active</Badge>
+{:else}
+	<Badge color="yellow" {...$$props}>Inactive</Badge>
+{/if}

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import type { Vault } from '../typeshare/subgraphTypes';
+	import { bigintStringToHex } from '../utils/hex';
+	import { Tooltip } from 'flowbite-svelte';
+	import { formatUnits } from 'viem';
+
+	export let tokenVault: Vault;
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+	class="cursor-pointer rounded-lg"
+	id="token-info"
+	data-testid="vault-link"
+	on:click={() => goto(`/vaults/${tokenVault.id}`)}
+>
+	<div class="flex flex-col space-y-2">
+		<div class="flex items-center justify-between">
+			<Tooltip triggeredBy="#token-info" class="w-96">
+				ID: <span class="font-mono">{bigintStringToHex(tokenVault.vaultId)}</span>
+			</Tooltip>
+			<span class="font-medium">
+				{tokenVault.token.name} ({tokenVault.token.symbol})
+			</span>
+			<span class="text-sm text-gray-500 dark:text-gray-400">
+				{formatUnits(BigInt(tokenVault.balance), parseInt(tokenVault.token.decimals || '18'))}
+			</span>
+		</div>
+	</div>
+</div>

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

@@ -16,6 +16,8 @@ export { default as ListViewOrderbookFilters } from './components/ListViewOrderb
 export { default as OrdersListTable } from './components/tables/OrdersListTable.svelte';
 export { default as VaultsListTable } from './components/tables/VaultsListTable.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
+export { default as BadgeActive } from './components/BadgeActive.svelte';
+export { default as ButtonVaultLink } from './components/ButtonVaultLink.svelte';
 export { default as Checkbox } from './components/checkbox/Checkbox.svelte';
 
 //Types

tauri-app/src/lib/components/detail/OrderDetail.svelte

@@ -2,9 +2,9 @@
   import CardProperty from './../../../lib/components/CardProperty.svelte';
   import { Button, TabItem, Tabs } from 'flowbite-svelte';
   import { walletAddressMatchesOrBlank } from '$lib/stores/wallets';
-  import BadgeActive from '$lib/components/BadgeActive.svelte';
+  import { BadgeActive } from '@rainlanguage/ui-components';
   import { formatTimestampSecondsAsLocal } from '@rainlanguage/ui-components';
-  import ButtonVaultLink from '$lib/components/ButtonVaultLink.svelte';
+  import { ButtonVaultLink } from '@rainlanguage/ui-components';
   import { Hash, HashType } from '@rainlanguage/ui-components';
 
   import CodeMirrorRainlang from '$lib/components/CodeMirrorRainlang.svelte';