push and test

rainlanguage · Feb 19, 2025 · 999c9b4 · 999c9b4
1 parent 4d75471
commit 999c9b4
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 35 deletions.
diff --git a/packages/webapp/src/__tests__/DepositOrWithdrawModal.test.ts b/packages/webapp/src/__tests__/DepositOrWithdrawModal.test.ts
@@ -6,6 +6,8 @@ import { signerAddress } from '$lib/stores/wagmi';
 import { readContract, switchChain } from '@wagmi/core';
 
 import type { ComponentProps } from 'svelte';
+import { getVaultApprovalCalldata } from '@rainlanguage/orderbook/js_api';
+import { getVaultDepositCalldata } from '@rainlanguage/orderbook/js_api';
 
 export type ModalProps = ComponentProps<DepositOrWithdrawModal>;
 
@@ -173,4 +175,58 @@ describe('DepositOrWithdrawModal', () => {
 		const continueButton = screen.getByText('Deposit');
 		expect(continueButton).toBeDisabled();
 	});
+
+	it('shows loading state while checking calldata', async () => {
+		render(DepositOrWithdrawModal, defaultProps);
+
+		const input = screen.getByRole('textbox');
+		await fireEvent.input(input, { target: { value: '1' } });
+
+		const depositButton = screen.getByText('Deposit');
+		await fireEvent.click(depositButton);
+
+		expect(screen.getByText('Checking...')).toBeInTheDocument();
+	});
+
+	it('handles failed calldata fetch', async () => {
+		const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+		vi.mocked(getVaultDepositCalldata).mockRejectedValueOnce(new Error('Failed to fetch'));
+
+		render(DepositOrWithdrawModal, defaultProps);
+
+		const input = screen.getByRole('textbox');
+		await fireEvent.input(input, { target: { value: '1' } });
+
+		const depositButton = screen.getByText('Deposit');
+		await fireEvent.click(depositButton);
+
+		await waitFor(() => {
+			expect(consoleErrorSpy).toHaveBeenCalledWith('Failed to get calldata:', expect.any(Error));
+		});
+
+		consoleErrorSpy.mockRestore();
+	});
+
+	it('handles deposit without approval when approval fails', async () => {
+		const handleTransactionSpy = vi.spyOn(transactionStore, 'handleDepositOrWithdrawTransaction');
+		vi.mocked(getVaultApprovalCalldata).mockRejectedValueOnce(new Error('Approval not needed'));
+
+		render(DepositOrWithdrawModal, defaultProps);
+
+		const input = screen.getByRole('textbox');
+		await fireEvent.input(input, { target: { value: '1' } });
+
+		const depositButton = screen.getByText('Deposit');
+		await fireEvent.click(depositButton);
+
+		expect(handleTransactionSpy).toHaveBeenCalledWith({
+			action: 'deposit',
+			chainId: 1,
+			vault: mockVault,
+			config: undefined,
+			subgraphUrl: undefined,
+			approvalCalldata: undefined,
+			transactionCalldata: { to: '0x123', data: '0x456' }
+		});
+	});
 });
diff --git a/packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte b/packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte
@@ -44,6 +44,10 @@
 	let amount: bigint = 0n;
 	let userBalance: bigint = 0n;
 	let switchChainError = '';
+	let depositCalldata: DepositCalldataResult | undefined = undefined;
+	let approvalCalldata: ApprovalCalldata | undefined = undefined;
+	let withdrawCalldata: WithdrawCalldataResult | undefined = undefined;
+	let isCheckingCalldata = false;
 
 	const messages = {
 		success: 'Transaction successful.',
@@ -70,42 +74,45 @@
 		});
 	};
 
+	async function handleTransaction(
+		transactionCalldata: DepositCalldataResult | WithdrawCalldataResult,
+		approvalCalldata?: ApprovalCalldata | undefined
+	) {
+		transactionStore.handleDepositOrWithdrawTransaction({
+			config: $wagmiConfig,
+			transactionCalldata,
+			approvalCalldata,
+			action,
+			chainId,
+			vault,
+			subgraphUrl
+		});
+	}
+
 	async function handleContinue() {
-		if (action === 'deposit') {
-			let approvalCalldata: ApprovalCalldata | undefined = undefined;
-			try {
-				approvalCalldata = await getVaultApprovalCalldata(rpcUrl, vault, amount.toString());
-			} catch {
-				approvalCalldata = undefined;
+		isCheckingCalldata = true;
+		try {
+			if (action === 'deposit') {
+				try {
+					approvalCalldata = await getVaultApprovalCalldata(rpcUrl, vault, amount.toString());
+				} catch {
+					approvalCalldata = undefined;
+				}
+				depositCalldata = await getVaultDepositCalldata(vault, amount.toString());
+				if (depositCalldata) {
+					handleTransaction(depositCalldata, approvalCalldata);
+				}
+			} else if (action === 'withdraw') {
+				withdrawCalldata = await getVaultWithdrawCalldata(vault, amount.toString());
+				if (withdrawCalldata) {
+					handleTransaction(withdrawCalldata);
+				}
 			}
-			const depositCalldata: DepositCalldataResult = await getVaultDepositCalldata(
-				vault,
-				amount.toString()
-			);
-			currentStep = 2;
-			transactionStore.handleDepositOrWithdrawTransaction({
-				config: $wagmiConfig,
-				transactionCalldata: depositCalldata,
-				approvalCalldata,
-				action,
-				chainId,
-				vault,
-				subgraphUrl
-			});
-		} else if (action === 'withdraw') {
-			const withdrawCalldata: WithdrawCalldataResult = await getVaultWithdrawCalldata(
-				vault,
-				amount.toString()
-			);
 			currentStep = 2;
-			transactionStore.handleDepositOrWithdrawTransaction({
-				config: $wagmiConfig,
-				transactionCalldata: withdrawCalldata,
-				action,
-				chainId,
-				vault,
-				subgraphUrl
-			});
+		} catch (error) {
+			console.error('Failed to get calldata:', error);
+		} finally {
+			isCheckingCalldata = false;
 		}
 	}
 
@@ -142,9 +149,15 @@
 							<Button
 								color="blue"
 								on:click={handleContinue}
-								disabled={amount <= 0n || amountGreaterThanBalance[actionType]}
+								disabled={amount <= 0n ||
+									amountGreaterThanBalance[actionType] ||
+									isCheckingCalldata}
 							>
-								{action === 'deposit' ? 'Deposit' : 'Withdraw'}
+								{#if isCheckingCalldata}
+									Checking...
+								{:else}
+									{action === 'deposit' ? 'Deposit' : 'Withdraw'}
+								{/if}
 							</Button>
 						</div>
 					{:else}