Merge pull request #1330 from rainlanguage/1133-move-gui-form-getters…

…-to-a-seperate-file-as-exports Move modal types into ui-components and refactor their usage
rainlanguage · Feb 19, 2025 · 4d75471 · 4d75471
2 parents a51a77b + d41e574
commit 4d75471
Show file tree

Hide file tree

Showing 20 changed files with 377 additions and 390 deletions.
diff --git a/packages/ui-components/src/__tests__/DeploymentSteps.test.ts b/packages/ui-components/src/__tests__/DeploymentSteps.test.ts
@@ -6,8 +6,7 @@ import type { ComponentProps } from 'svelte';
 import { writable } from 'svelte/store';
 import type { AppKit } from '@reown/appkit';
 import type { ConfigSource } from '../lib/typeshare/config';
-import type { DeploymentArgs } from '$lib/types/transaction';
-import type { DisclaimerModal } from '$lib';
+import type { DeployModalProps, DisclaimerModalProps } from '../lib/types/modal';
 
 const { mockWagmiConfigStore, mockConnectedStore } = await vi.hoisted(
 	() => import('../lib/__mocks__/stores')
@@ -572,22 +571,31 @@ min-trade-amount: mul(min-amount 0.9),
   "Min trade amount."),
 :call<'set-cost-basis-io-ratio>();`;
 
-describe('DeploymentSteps', () => {
-	const mockDeployment = {
+const mockDeployment = {
+	key: 'flare-sflr-wflr',
+	name: 'SFLR<>WFLR on Flare',
+	description: 'Rotate sFLR (Sceptre staked FLR) and WFLR on Flare.',
+	deposits: [],
+	fields: [],
+	select_tokens: [],
+	deployment: {
 		key: 'flare-sflr-wflr',
-		name: 'SFLR<>WFLR on Flare',
-		description: 'Rotate sFLR (Sceptre staked FLR) and WFLR on Flare.',
-		deposits: [],
-		fields: [],
-		select_tokens: [],
-		deployment: {
+		scenario: {
+			key: 'flare',
+			bindings: {}
+		} as Scenario,
+		order: {
 			key: 'flare-sflr-wflr',
-			scenario: {
+			network: {
+				key: 'flare',
+				'chain-id': 14,
+				'network-id': 14,
+				rpc: 'https://rpc.ankr.com/flare',
+				label: 'Flare',
+				currency: 'FLR'
+			},
+			deployer: {
 				key: 'flare',
-				bindings: {}
-			} as Scenario,
-			order: {
-				key: 'flare-sflr-wflr',
 				network: {
 					key: 'flare',
 					'chain-id': 14,
@@ -596,28 +604,36 @@ describe('DeploymentSteps', () => {
 					label: 'Flare',
 					currency: 'FLR'
 				},
-				deployer: {
-					key: 'flare',
-					network: {
-						key: 'flare',
-						'chain-id': 14,
-						'network-id': 14,
-						rpc: 'https://rpc.ankr.com/flare',
-						label: 'Flare',
-						currency: 'FLR'
-					},
-					address: '0x0'
-				},
-				orderbook: {
-					id: 'flare',
-					address: '0x0'
-				},
-				inputs: [],
-				outputs: []
-			}
+				address: '0x0'
+			},
+			orderbook: {
+				id: 'flare',
+				address: '0x0'
+			},
+			inputs: [],
+			outputs: []
 		}
-	};
+	}
+};
+
+const defaultProps: DeploymentStepsProps = {
+	dotrain,
+	strategyDetail: {
+		name: 'SFLR<>WFLR on Flare',
+		description: 'Rotate sFLR (Sceptre staked FLR) and WFLR on Flare.',
+		short_description: 'Rotate sFLR (Sceptre staked FLR) and WFLR on Flare.'
+	},
+	deployment: mockDeployment,
+	wagmiConfig: mockWagmiConfigStore,
+	wagmiConnected: mockConnectedStore,
+	appKitModal: writable({} as AppKit),
+	handleDeployModal: vi.fn() as unknown as (args: DeployModalProps) => void,
+	handleDisclaimerModal: vi.fn() as unknown as (args: DisclaimerModalProps) => void,
+	settings: writable({} as ConfigSource),
+	handleUpdateGuiState: vi.fn()
+};
 
+describe('DeploymentSteps', () => {
 	beforeEach(() => {
 		vi.clearAllMocks();
 	});
@@ -629,26 +645,7 @@ describe('DeploymentSteps', () => {
 			getNetworkKey: vi.fn()
 		});
 
-		render(DeploymentSteps, {
-			props: {
-				dotrain,
-				strategyDetail: {
-					name: 'SFLR<>WFLR on Flare',
-					description: 'Rotate sFLR (Sceptre staked FLR) and WFLR on Flare.',
-					short_description: 'Rotate sFLR (Sceptre staked FLR) and WFLR on Flare.'
-				},
-				deployment: mockDeployment,
-				wagmiConfig: mockWagmiConfigStore,
-				wagmiConnected: mockConnectedStore,
-				appKitModal: writable({} as AppKit),
-				handleDeployModal: vi.fn() as unknown as (args: DeploymentArgs) => void,
-				handleDisclaimerModal: vi.fn() as unknown as (
-					args: ComponentProps<DisclaimerModal>
-				) => void,
-				settings: writable({} as ConfigSource),
-				handleUpdateGuiState: vi.fn()
-			}
-		});
+		render(DeploymentSteps, { props: defaultProps });
 
 		await waitFor(() => {
 			expect(screen.getByText('SFLR<>WFLR on Flare')).toBeInTheDocument();
@@ -663,26 +660,7 @@ describe('DeploymentSteps', () => {
 			getNetworkKey: vi.fn()
 		});
 
-		render(DeploymentSteps, {
-			props: {
-				dotrain,
-				strategyDetail: {
-					name: 'SFLR<>WFLR on Flare',
-					description: 'Rotate sFLR (Sceptre staked FLR) and WFLR on Flare.',
-					short_description: 'Rotate sFLR (Sceptre staked FLR) and WFLR on Flare.'
-				},
-				deployment: mockDeployment,
-				wagmiConfig: mockWagmiConfigStore,
-				wagmiConnected: mockConnectedStore,
-				appKitModal: writable({} as AppKit),
-				handleDeployModal: vi.fn() as unknown as (args: DeploymentArgs) => void,
-				handleDisclaimerModal: vi.fn() as unknown as (
-					args: ComponentProps<DisclaimerModal>
-				) => void,
-				settings: writable({} as ConfigSource),
-				handleUpdateGuiState: vi.fn()
-			}
-		});
+		render(DeploymentSteps, { props: defaultProps });
 
 		await waitFor(() => {
 			expect(screen.getByText('Select Tokens')).toBeInTheDocument();
@@ -697,26 +675,7 @@ describe('DeploymentSteps', () => {
 			new Error('Failed to initialize GUI')
 		);
 
-		render(DeploymentSteps, {
-			props: {
-				dotrain,
-				strategyDetail: {
-					name: 'SFLR<>WFLR on Flare',
-					description: 'Rotate sFLR (Sceptre staked FLR) and WFLR on Flare.',
-					short_description: 'Rotate sFLR (Sceptre staked FLR) and WFLR on Flare.'
-				},
-				deployment: mockDeployment,
-				wagmiConfig: mockWagmiConfigStore,
-				wagmiConnected: mockConnectedStore,
-				appKitModal: writable({} as AppKit),
-				handleDeployModal: vi.fn() as unknown as (args: DeploymentArgs) => void,
-				handleDisclaimerModal: vi.fn() as unknown as (
-					args: ComponentProps<DisclaimerModal>
-				) => void,
-				settings: writable({} as ConfigSource),
-				handleUpdateGuiState: vi.fn()
-			}
-		});
+		render(DeploymentSteps, { props: defaultProps });
 
 		await waitFor(() => {
 			expect(screen.getByText('Error loading GUI')).toBeInTheDocument();
@@ -742,31 +701,13 @@ describe('DeploymentSteps', () => {
 			getNetworkKey: vi.fn()
 		});
 
-		render(DeploymentSteps, {
-			props: {
-				dotrain,
-				strategyDetail: {
-					name: 'SFLR<>WFLR on Flare',
-					description: 'Rotate sFLR (Sceptre staked FLR) and WFLR on Flare.',
-					short_description: 'Rotate sFLR (Sceptre staked FLR) and WFLR on Flare.'
-				},
-				deployment: mockDeployment,
-				wagmiConfig: mockWagmiConfigStore,
-				wagmiConnected: mockConnectedStore,
-				appKitModal: writable({} as AppKit),
-				handleDeployModal: vi.fn() as unknown as (args: DeploymentArgs) => void,
-				handleDisclaimerModal: vi.fn() as unknown as (
-					args: ComponentProps<DisclaimerModal>
-				) => void,
-				settings: writable({} as ConfigSource),
-				handleUpdateGuiState: vi.fn()
-			}
-		});
+		render(DeploymentSteps, { props: defaultProps });
 
 		await waitFor(() => {
 			expect(screen.getByText('Deploy Strategy')).toBeInTheDocument();
 		});
 	});
+
 	it('shows connect wallet button when not connected', async () => {
 		mockConnectedStore.mockSetSubscribeValue(false);
 		(DotrainOrderGui.chooseDeployment as Mock).mockResolvedValue({
@@ -785,26 +726,7 @@ describe('DeploymentSteps', () => {
 			getNetworkKey: vi.fn()
 		});
 
-		render(DeploymentSteps, {
-			props: {
-				dotrain,
-				strategyDetail: {
-					name: 'SFLR<>WFLR on Flare',
-					description: 'Rotate sFLR (Sceptre staked FLR) and WFLR on Flare.',
-					short_description: 'Rotate sFLR (Sceptre staked FLR) and WFLR on Flare.'
-				},
-				deployment: mockDeployment,
-				wagmiConfig: mockWagmiConfigStore,
-				wagmiConnected: mockConnectedStore,
-				appKitModal: writable({} as AppKit),
-				handleDeployModal: vi.fn() as unknown as (args: DeploymentArgs) => void,
-				handleDisclaimerModal: vi.fn() as unknown as (
-					args: ComponentProps<DisclaimerModal>
-				) => void,
-				settings: writable({} as ConfigSource),
-				handleUpdateGuiState: vi.fn()
-			}
-		});
+		render(DeploymentSteps, { props: defaultProps });
 
 		await waitFor(() => {
 			expect(screen.getByText('Connect Wallet')).toBeInTheDocument();

diff --git a/packages/ui-components/src/__tests__/OrderDetail.test.svelte b/packages/ui-components/src/__tests__/OrderDetail.test.svelte
@@ -3,20 +3,23 @@
 	import CardProperty from '../lib/components/CardProperty.svelte';
 	import ButtonVaultLink from '../lib/components/ButtonVaultLink.svelte';
 	import { createQuery } from '@tanstack/svelte-query';
-	import type { OrderSubgraph, OrderWithSortedVaults } from '@rainlanguage/orderbook/js_api';
+	import type { OrderWithSortedVaults } from '@rainlanguage/orderbook/js_api';
 	import { getOrder } from '@rainlanguage/orderbook/js_api';
 	import { QKEY_ORDER } from '../lib/queries/keys';
 	import type { Readable } from 'svelte/store';
 	import { Button } from 'flowbite-svelte';
 	import DepositOrWithdrawButtons from '../lib/components/detail/DepositOrWithdrawButtons.svelte';
+	import type { OrderRemoveModalProps } from '../lib/types/modal';
+	import type { Hex } from 'viem';
 
 	export let walletAddressMatchesOrBlank: Readable<(address: string) => boolean> | undefined =
 		undefined;
-	export let handleOrderRemoveModal:
-		| ((order: OrderSubgraph, refetch: () => void) => void)
-		| undefined = undefined;
+	export let handleOrderRemoveModal: ((props: OrderRemoveModalProps) => void) | undefined =
+		undefined;
 	export let id: string;
 	export let subgraphUrl: string;
+	export let chainId: number;
+	export let orderbookAddress: Hex;
 
 	$: orderDetailQuery = createQuery<OrderWithSortedVaults>({
 		queryKey: [id, QKEY_ORDER + id],
@@ -32,7 +35,16 @@
 			<Button
 				data-testid="remove-button"
 				color="dark"
-				on:click={() => handleOrderRemoveModal(data.order, $orderDetailQuery.refetch)}
+				on:click={() =>
+					handleOrderRemoveModal({
+						open: true,
+						args: {
+							order: data.order,
+							onRemove: $orderDetailQuery.refetch,
+							chainId,
+							orderbookAddress
+						}
+					})}
 				disabled={!handleOrderRemoveModal}
 			>
 				Remove

diff --git a/packages/ui-components/src/__tests__/OrderDetail.test.ts b/packages/ui-components/src/__tests__/OrderDetail.test.ts
@@ -4,6 +4,7 @@ import { describe, it, vi, type Mock } from 'vitest';
 import { expect } from '../lib/test/matchers';
 import OrderDetail from './OrderDetail.test.svelte';
 import type { OrderSubgraph, Vault } from '@rainlanguage/orderbook/js_api';
+import type { Config } from 'wagmi';
 
 const { mockWalletAddressMatchesOrBlankStore } = await vi.hoisted(
 	() => import('../lib/__mocks__/stores')
@@ -23,6 +24,16 @@ const mockOrder: OrderSubgraph = {
 
 vi.mock('@tanstack/svelte-query');
 
+const wagmiConfig = {
+	chains: [],
+	signer: {
+		address: '0x123'
+	}
+} as unknown as Config;
+
+const chainId = 1;
+const orderbookAddress = '0x123';
+
 describe('OrderDetail Component', () => {
 	it('shows the correct empty message when the query returns no data', async () => {
 		const mockQuery = vi.mocked(await import('@tanstack/svelte-query'));
@@ -41,7 +52,10 @@ describe('OrderDetail Component', () => {
 		render(OrderDetail, {
 			props: {
 				id: 'mockId',
-				subgraphUrl: 'https://example.com'
+				subgraphUrl: 'https://example.com',
+				walletAddressMatchesOrBlank: mockWalletAddressMatchesOrBlankStore,
+				chainId,
+				orderbookAddress
 			}
 		});
 
@@ -71,7 +85,9 @@ describe('OrderDetail Component', () => {
 				id: mockOrder.id,
 				subgraphUrl: 'https://example.com',
 				walletAddressMatchesOrBlank: mockWalletAddressMatchesOrBlankStore,
-				handleOrderRemoveModal
+				handleOrderRemoveModal,
+				chainId,
+				orderbookAddress
 			}
 		});
 
@@ -89,7 +105,9 @@ describe('OrderDetail Component', () => {
 				id: mockOrder.id,
 				subgraphUrl: 'https://example.com',
 				walletAddressMatchesOrBlank: mockWalletAddressMatchesOrBlankStore,
-				handleOrderRemoveModal: vi.fn()
+				handleOrderRemoveModal: vi.fn(),
+				chainId,
+				orderbookAddress
 			}
 		});
 
@@ -187,7 +205,9 @@ describe('OrderDetail Component', () => {
 			props: {
 				id: mockOrderWithVaults.id,
 				subgraphUrl: 'https://example.com',
-				walletAddressMatchesOrBlank: mockWalletAddressMatchesOrBlankStore
+				walletAddressMatchesOrBlank: mockWalletAddressMatchesOrBlankStore,
+				chainId,
+				orderbookAddress
 			}
 		});
 

diff --git a/packages/ui-components/src/__tests__/transactionStore.test.ts b/packages/ui-components/src/__tests__/transactionStore.test.ts
@@ -1,5 +1,5 @@
-import { describe, it, expect, vi, beforeEach, afterAll, type Mock } from 'vitest';
 import { get } from 'svelte/store';
+import { describe, it, expect, vi, beforeEach, afterAll, type Mock } from 'vitest';
 import transactionStore, {
 	TransactionStatus,
 	TransactionErrorMessage