From c5e3319ab1a8acd78134ce2fb432c99ac730eaa4 Mon Sep 17 00:00:00 2001 From: Jamie Harding Date: Tue, 26 Nov 2024 10:31:46 +0100 Subject: [PATCH 1/7] badge and button --- .../src/lib/components/BadgeActive.svelte | 10 ++++++ .../src/lib/components/ButtonVaultLink.svelte | 31 +++++++++++++++++++ packages/ui-components/src/lib/index.ts | 2 ++ .../src/lib/components/BadgeActive.svelte | 10 ------ .../src/lib/components/ButtonVaultLink.svelte | 31 ------------------- .../lib/components/detail/OrderDetail.svelte | 4 +-- 6 files changed, 45 insertions(+), 43 deletions(-) create mode 100644 packages/ui-components/src/lib/components/BadgeActive.svelte create mode 100644 packages/ui-components/src/lib/components/ButtonVaultLink.svelte delete mode 100644 tauri-app/src/lib/components/BadgeActive.svelte delete mode 100644 tauri-app/src/lib/components/ButtonVaultLink.svelte diff --git a/packages/ui-components/src/lib/components/BadgeActive.svelte b/packages/ui-components/src/lib/components/BadgeActive.svelte new file mode 100644 index 000000000..d8cd2c148 --- /dev/null +++ b/packages/ui-components/src/lib/components/BadgeActive.svelte @@ -0,0 +1,10 @@ + + +{#if active} + Active +{:else} + Inactive +{/if} diff --git a/packages/ui-components/src/lib/components/ButtonVaultLink.svelte b/packages/ui-components/src/lib/components/ButtonVaultLink.svelte new file mode 100644 index 000000000..919cc5707 --- /dev/null +++ b/packages/ui-components/src/lib/components/ButtonVaultLink.svelte @@ -0,0 +1,31 @@ + + + + +
goto(`/vaults/${tokenVault.id}`)} +> +
+
+ + ID: {bigintStringToHex(tokenVault.vaultId)} + + + {tokenVault.token.name} ({tokenVault.token.symbol}) + + + {formatUnits(BigInt(tokenVault.balance), parseInt(tokenVault.token.decimals || '18'))} + +
+
+
diff --git a/packages/ui-components/src/lib/index.ts b/packages/ui-components/src/lib/index.ts index 014200b9e..b7b30ad10 100644 --- a/packages/ui-components/src/lib/index.ts +++ b/packages/ui-components/src/lib/index.ts @@ -15,6 +15,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'; //Types export type { AppStoresInterface } from './types/appStores.ts'; diff --git a/tauri-app/src/lib/components/BadgeActive.svelte b/tauri-app/src/lib/components/BadgeActive.svelte deleted file mode 100644 index ac032729b..000000000 --- a/tauri-app/src/lib/components/BadgeActive.svelte +++ /dev/null @@ -1,10 +0,0 @@ - - -{#if active} - Active -{:else} - Inactive -{/if} diff --git a/tauri-app/src/lib/components/ButtonVaultLink.svelte b/tauri-app/src/lib/components/ButtonVaultLink.svelte deleted file mode 100644 index 2249f538c..000000000 --- a/tauri-app/src/lib/components/ButtonVaultLink.svelte +++ /dev/null @@ -1,31 +0,0 @@ - - - - -
goto(`/vaults/${tokenVault.id}`)} -> -
-
- - ID: {bigintStringToHex(tokenVault.vaultId)} - - - {tokenVault.token.name} ({tokenVault.token.symbol}) - - - {formatUnits(BigInt(tokenVault.balance), parseInt(tokenVault.token.decimals || '18'))} - -
-
-
diff --git a/tauri-app/src/lib/components/detail/OrderDetail.svelte b/tauri-app/src/lib/components/detail/OrderDetail.svelte index 9b360251e..b80701e7a 100644 --- a/tauri-app/src/lib/components/detail/OrderDetail.svelte +++ b/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'; From 440e238b6ff278645a8526c2812f80764494e284 Mon Sep 17 00:00:00 2001 From: Jamie Harding Date: Tue, 26 Nov 2024 12:39:45 +0100 Subject: [PATCH 2/7] add --- .../ui-components/src/lib/components/ButtonVaultLink.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-components/src/lib/components/ButtonVaultLink.svelte b/packages/ui-components/src/lib/components/ButtonVaultLink.svelte index 919cc5707..934a1d04f 100644 --- a/packages/ui-components/src/lib/components/ButtonVaultLink.svelte +++ b/packages/ui-components/src/lib/components/ButtonVaultLink.svelte @@ -8,8 +8,8 @@ export let tokenVault: Vault; - +
Date: Tue, 26 Nov 2024 15:32:52 +0100 Subject: [PATCH 3/7] BadgeActve test --- .../src/__tests__/BadgeActive.test.ts | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 packages/ui-components/src/__tests__/BadgeActive.test.ts diff --git a/packages/ui-components/src/__tests__/BadgeActive.test.ts b/packages/ui-components/src/__tests__/BadgeActive.test.ts new file mode 100644 index 000000000..dac333dc3 --- /dev/null +++ b/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'); + }); +}); \ No newline at end of file From abeed2a04370914aec0b0a1df2f0f7b23d46d3ce Mon Sep 17 00:00:00 2001 From: Jamie Harding Date: Tue, 26 Nov 2024 16:19:54 +0100 Subject: [PATCH 4/7] test --- .../src/__tests__/BadgeActive.test.ts | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/ui-components/src/__tests__/BadgeActive.test.ts b/packages/ui-components/src/__tests__/BadgeActive.test.ts index dac333dc3..2ced71d9b 100644 --- a/packages/ui-components/src/__tests__/BadgeActive.test.ts +++ b/packages/ui-components/src/__tests__/BadgeActive.test.ts @@ -3,25 +3,25 @@ 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 "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('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 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'); - }); -}); \ No newline at end of file + it('uses yellow color for inactive state', () => { + render(BadgeActive, { props: { active: false } }); + const badge = screen.getByText('Inactive'); + expect(badge.className).toContain('bg-yellow'); + }); +}); From e5a7f71876aa8c7079eda482343f8151bdac0be8 Mon Sep 17 00:00:00 2001 From: Jamie Harding Date: Fri, 29 Nov 2024 13:01:49 +0100 Subject: [PATCH 5/7] vault link --- .../src/__tests__/ButtonVaultLink.test.ts | 37 +++++++++++++++++++ .../src/lib/components/ButtonVaultLink.svelte | 1 + 2 files changed, 38 insertions(+) create mode 100644 packages/ui-components/src/__tests__/ButtonVaultLink.test.ts diff --git a/packages/ui-components/src/__tests__/ButtonVaultLink.test.ts b/packages/ui-components/src/__tests__/ButtonVaultLink.test.ts new file mode 100644 index 000000000..77be9775a --- /dev/null +++ b/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 '../../dist/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}`); + }); +}); diff --git a/packages/ui-components/src/lib/components/ButtonVaultLink.svelte b/packages/ui-components/src/lib/components/ButtonVaultLink.svelte index 934a1d04f..81293ed34 100644 --- a/packages/ui-components/src/lib/components/ButtonVaultLink.svelte +++ b/packages/ui-components/src/lib/components/ButtonVaultLink.svelte @@ -13,6 +13,7 @@
goto(`/vaults/${tokenVault.id}`)} >
From d6ee4506c0d000c8c1e1260b276d8f3e3b3d4fe7 Mon Sep 17 00:00:00 2001 From: Jamie Harding Date: Fri, 29 Nov 2024 13:26:05 +0100 Subject: [PATCH 6/7] fix path --- .../ui-components/src/lib/components/ButtonVaultLink.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-components/src/lib/components/ButtonVaultLink.svelte b/packages/ui-components/src/lib/components/ButtonVaultLink.svelte index 81293ed34..de2023453 100644 --- a/packages/ui-components/src/lib/components/ButtonVaultLink.svelte +++ b/packages/ui-components/src/lib/components/ButtonVaultLink.svelte @@ -1,6 +1,6 @@