1114 migrate evalresultstablesvelte to components UI

packages/ui-components/src/lib/components/debug/EvalResultsTable.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import {
+		Table,
+		TableBody,
+		TableBodyCell,
+		TableBodyRow,
+		TableHead,
+		TableHeadCell
+	} from 'flowbite-svelte';
+	import { formatEther, hexToBigInt, isHex } from 'viem';
+
+	export let table;
+</script>
+
+<Table divClass="cursor-pointer rounded-lg overflow-hidden dark:border-none border">
+	<TableHead>
+		<TableHeadCell>Stack item</TableHeadCell>
+		<TableHeadCell>Value</TableHeadCell>
+		<TableHeadCell>Hex</TableHeadCell>
+	</TableHead>
+	<TableBody>
+		{#each table.rows[0] as value, i}
+			<TableBodyRow>
+				<TableBodyCell data-testid="debug-stack">{table.column_names[i]}</TableBodyCell>
+				<TableBodyCell data-testid="debug-value"
+					>{isHex(value) ? formatEther(hexToBigInt(value)) : ''}</TableBodyCell
+				>
+				<TableBodyCell data-testid="debug-value-hex">{value}</TableBodyCell>
+			</TableBodyRow>
+		{/each}
+	</TableBody>
+</Table>

packages/ui-components/src/lib/components/debug/EvalResultsTable.test.ts

@@ -0,0 +1,39 @@
+import { render, screen, waitFor } from '@testing-library/svelte';
+import { test, expect } from 'vitest';
+import EvalResultsTable from './EvalResultsTable.svelte';
+import { formatEther, hexToBigInt, isHex } from 'viem';
+
+test('renders table with the correct data', async () => {
+	const table = {
+		column_names: ['Column1', 'Column2', 'Column3'],
+		rows: [
+			['0x01', '0x02', '0x03'],
+			['0x0a', '0x0b', '0x0c'],
+			['0x1f', '0x2e', '0x3d'],
+			['0xaa', '0xbb', '0xcc'],
+			['0xff', '0xee', '0xdd']
+		]
+	};
+
+	render(EvalResultsTable, { table });
+
+	// Check if the table headers are rendered correctly
+	expect(screen.getByText('Stack item')).toBeInTheDocument();
+	expect(screen.getByText('Value')).toBeInTheDocument();
+	expect(screen.getByText('Hex')).toBeInTheDocument();
+
+	// Check if the table rows are rendered correctly
+	await waitFor(() => {
+		table.column_names.forEach((columnName, index) => {
+			expect(screen.getByText(columnName)).toBeInTheDocument();
+			expect(screen.getByText(table.rows[0][index])).toBeInTheDocument();
+
+			// Verify if the formatted value is correct
+			const value = table.rows[0][index];
+			if (value) {
+				const formattedValue = isHex(value) ? formatEther(hexToBigInt(value)) : '';
+				expect(screen.getByText(formattedValue)).toBeInTheDocument();
+			}
+		});
+	});
+});

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

@@ -47,6 +47,7 @@ export { default as IconTelegram } from './components/IconTelegram.svelte';
 export { default as IconWalletConnect } from './components/IconWalletConnect.svelte';
 export { default as IconWarning } from './components/IconWarning.svelte';
 export { default as InputToken } from './components/input/InputToken.svelte';
+export { default as EvalResultsTable } from './components/debug/EvalResultsTable.svelte';
 
 //Types
 export type { AppStoresInterface } from './types/appStores.ts';

tauri-app/src/lib/components/modal/ModalQuoteDebug.svelte

@@ -5,8 +5,7 @@
   import { createQuery } from '@tanstack/svelte-query';
   import { Alert, Modal } from 'flowbite-svelte';
   import { type Hex } from 'viem';
-  import { Refresh } from '@rainlanguage/ui-components';
-  import EvalResultsTable from '../debug/EvalResultsTable.svelte';
+  import { Refresh, EvalResultsTable } from '@rainlanguage/ui-components';
   import { fade } from 'svelte/transition';
 
   export let open: boolean;

tauri-app/src/lib/components/modal/ModalTradeDebug.svelte

@@ -3,7 +3,7 @@
   import { tradeDebug } from '$lib/queries/tradeDebug';
   import { createQuery } from '@tanstack/svelte-query';
   import { Alert, Modal, Spinner } from 'flowbite-svelte';
-  import EvalResultsTable from '../debug/EvalResultsTable.svelte';
+  import { EvalResultsTable } from '@rainlanguage/ui-components';
 
   export let open: boolean;
   export let txHash: string;