Merge pull request #1289 from rainlanguage/02/13/25-switch-chain-befo…

…re-checking-user's-balance

packages/webapp/src/__tests__/DepositOrWithdrawModal.test.ts

@@ -3,7 +3,7 @@ import { render, fireEvent, screen, waitFor } from '@testing-library/svelte';
 import DepositOrWithdrawModal from '$lib/components/DepositOrWithdrawModal.svelte';
 import { transactionStore } from '@rainlanguage/ui-components';
 import { signerAddress } from '$lib/stores/wagmi';
-import { readContract } from '@wagmi/core';
+import { readContract, switchChain } from '@wagmi/core';
 
 import type { ComponentProps } from 'svelte';
 export type ModalProps = ComponentProps<DepositOrWithdrawModal>;
@@ -15,7 +15,8 @@ vi.mock('@rainlanguage/orderbook/js_api', () => ({
 }));
 
 vi.mock('@wagmi/core', () => ({
-	readContract: vi.fn()
+	readContract: vi.fn(),
+	switchChain: vi.fn()
 }));
 
 describe('DepositOrWithdrawModal', () => {
@@ -144,4 +145,12 @@ describe('DepositOrWithdrawModal', () => {
 
 		expect(screen.queryByText('Enter Amount')).not.toBeInTheDocument();
 	});
+
+	it('shows an error if you fail to connect to the target chain', async () => {
+		(switchChain as Mock).mockRejectedValue(new Error('Failed to switch chain'));
+		render(DepositOrWithdrawModal, defaultProps);
+		await waitFor(() => {
+			expect(screen.getByTestId('chain-error')).toBeInTheDocument();
+		});
+	});
 });

packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte

@@ -13,8 +13,20 @@
 	import { Modal, Button } from 'flowbite-svelte';
 	import TransactionModal from './TransactionModal.svelte';
 	import { appKitModal, connected, signerAddress } from '$lib/stores/wagmi';
-	import { readContract } from '@wagmi/core';
+	import { readContract, switchChain } from '@wagmi/core';
 	import { erc20Abi, type Hex } from 'viem';
+	import * as allChains from 'viem/chains';
+
+	const { ...chains } = allChains;
+
+	function getTargetChain(chainId: number) {
+		for (const chain of Object.values(chains)) {
+			if (chain.id === chainId) {
+				return chain;
+			}
+		}
+		throw new Error(`Chain with id ${chainId} not found`);
+	}
 
 	export let open: boolean;
 	export let action: 'deposit' | 'withdraw';
@@ -32,6 +44,7 @@
 	let currentStep = 1;
 	let amount: bigint = 0n;
 	let userBalance: bigint = 0n;
+	let switchChainError = '';
 
 	const messages = {
 		success: 'Your transaction was successful.',
@@ -44,6 +57,12 @@
 	}
 
 	const getUserBalance = async () => {
+		const targetChain = getTargetChain(chainId);
+		try {
+			await switchChain($wagmiConfig, { chainId });
+		} catch {
+			return (switchChainError = `Switch to ${targetChain.name} to check your balance.`);
+		}
 		userBalance = await readContract($wagmiConfig, {
 			abi: erc20Abi,
 			address: vault.token.address as Hex,
@@ -131,6 +150,9 @@
 						<WalletConnect {appKitModal} {connected} />
 					{/if}
 				</div>
+				{#if switchChainError}
+					<p data-testid="chain-error">{switchChainError}</p>
+				{/if}
 				{#if amountGreaterThanBalance[action]}
 					<p class="text-red-500" data-testid="error">Amount cannot exceed available balance.</p>
 				{/if}