From c69f04adacf6d8192fc77e56b6138b51e9e9899c Mon Sep 17 00:00:00 2001 From: Jamie Harding Date: Thu, 13 Feb 2025 11:59:31 +0100 Subject: [PATCH 1/5] swithc chain before balance check --- .../__tests__/DepositOrWithdrawModal.test.ts | 13 ++++++++-- .../components/DepositOrWithdrawModal.svelte | 25 ++++++++++++++++++- 2 files changed, 35 insertions(+), 3 deletions(-) diff --git a/packages/webapp/src/__tests__/DepositOrWithdrawModal.test.ts b/packages/webapp/src/__tests__/DepositOrWithdrawModal.test.ts index ebb199a4d..6d0cdd99b 100644 --- a/packages/webapp/src/__tests__/DepositOrWithdrawModal.test.ts +++ b/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; @@ -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(); + }); + }); }); diff --git a/packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte b/packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte index 86b5ce870..fca668773 100644 --- a/packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte +++ b/packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte @@ -13,8 +13,21 @@ 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 all from 'viem/chains'; + + const { ...chains } = all; + + 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 +45,7 @@ let currentStep = 1; let amount: bigint = 0n; let userBalance: bigint = 0n; + let switchChainError = ''; const messages = { success: 'Your transaction was successful.', @@ -44,6 +58,12 @@ } const getUserBalance = async () => { + const targetChain = getTargetChain(chainId); + try { + await switchChain($wagmiConfig, { chainId }); + } catch { + return (error = `Switch to ${targetChain.name} to check your balance.`); + } userBalance = await readContract($wagmiConfig, { abi: erc20Abi, address: vault.token.address as Hex, @@ -131,6 +151,9 @@ {/if} + {#if switchChainError} +

{switchChainError}

+ {/if} {#if amountGreaterThanBalance[action]}

Amount cannot exceed available balance.

{/if} From ee05b27dbbebecc5562cf7812f5d39ddcaa722be Mon Sep 17 00:00:00 2001 From: Jamie Harding Date: Thu, 13 Feb 2025 12:00:39 +0100 Subject: [PATCH 2/5] format --- packages/webapp/src/__tests__/DepositOrWithdrawModal.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webapp/src/__tests__/DepositOrWithdrawModal.test.ts b/packages/webapp/src/__tests__/DepositOrWithdrawModal.test.ts index 6d0cdd99b..fa4ca41e0 100644 --- a/packages/webapp/src/__tests__/DepositOrWithdrawModal.test.ts +++ b/packages/webapp/src/__tests__/DepositOrWithdrawModal.test.ts @@ -150,7 +150,7 @@ describe('DepositOrWithdrawModal', () => { (switchChain as Mock).mockRejectedValue(new Error('Failed to switch chain')); render(DepositOrWithdrawModal, defaultProps); await waitFor(() => { - expect(screen.getByTestId('chain-error')).toBeInTheDocument(); + expect(screen.getByTestId('chain-error')).toBeInTheDocument(); }); }); }); From cb13bad1d354f4f583b5bcbfcc18e61a4f74a6c4 Mon Sep 17 00:00:00 2001 From: Jamie Harding Date: Thu, 13 Feb 2025 12:00:49 +0100 Subject: [PATCH 3/5] update error name --- .../webapp/src/lib/components/DepositOrWithdrawModal.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte b/packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte index fca668773..1be5a0d0a 100644 --- a/packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte +++ b/packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte @@ -62,7 +62,7 @@ try { await switchChain($wagmiConfig, { chainId }); } catch { - return (error = `Switch to ${targetChain.name} to check your balance.`); + return (switchChainError = `Switch to ${targetChain.name} to check your balance.`); } userBalance = await readContract($wagmiConfig, { abi: erc20Abi, From 6b438c77d8e89f4f712bbbf0d9a5b78c27dc8e99 Mon Sep 17 00:00:00 2001 From: Jamie Harding Date: Thu, 13 Feb 2025 12:04:11 +0100 Subject: [PATCH 4/5] switchchain --- .../webapp/src/lib/components/DepositOrWithdrawModal.svelte | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte b/packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte index 1be5a0d0a..9fa36d43c 100644 --- a/packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte +++ b/packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte @@ -15,9 +15,9 @@ import { appKitModal, connected, signerAddress } from '$lib/stores/wagmi'; import { readContract, switchChain } from '@wagmi/core'; import { erc20Abi, type Hex } from 'viem'; - import * as all from 'viem/chains'; + import * as allChains from 'viem/chains'; - const { ...chains } = all; + const { ...chains } = allChains; function getTargetChain(chainId: number) { for (const chain of Object.values(chains)) { @@ -25,7 +25,6 @@ return chain; } } - throw new Error(`Chain with id ${chainId} not found`); } From e9e3b414cb5704e4b173127d0c9bbdd888d2c44e Mon Sep 17 00:00:00 2001 From: Jamie Harding Date: Thu, 13 Feb 2025 15:08:19 +0100 Subject: [PATCH 5/5] fix test --- .../webapp/src/lib/components/DepositOrWithdrawModal.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte b/packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte index 9fa36d43c..7f84012b7 100644 --- a/packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte +++ b/packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte @@ -151,7 +151,7 @@ {/if} {#if switchChainError} -

{switchChainError}

+

{switchChainError}

{/if} {#if amountGreaterThanBalance[action]}

Amount cannot exceed available balance.