chore: add handle wrong chainId in withdrawal - add unit test

libs/web3/src/lib/use-ethereum-withdraw-approvals-manager.spec.tsx

@@ -21,9 +21,11 @@ import type { NetworkParamsQuery } from '@vegaprotocol/react-helpers';
 
 const mockWeb3Provider = jest.fn();
 
+let mockChainId = 111111;
 jest.mock('@web3-react/core', () => ({
   useWeb3React: () => ({
     provider: mockWeb3Provider(),
+    chainId: mockChainId,
   }),
 }));
 
@@ -63,15 +65,16 @@ jest.mock('./use-get-withdraw-delay', () => ({
   useGetWithdrawDelay: () => mockUseGetWithdrawDelay(),
 }));
 
-const mockUseEthereumConfig = jest.fn(() => ({
+const mockUseEthereumConfig = {
   collateral_bridge_contract: {
     address: 'address',
   },
-}));
+  chain_id: '111111'
+};
 
 jest.mock('./use-ethereum-config', () => ({
   useEthereumConfig: () => ({
-    config: mockUseEthereumConfig(),
+    config: mockUseEthereumConfig,
   }),
 }));
 
@@ -301,4 +304,17 @@ describe('useEthWithdrawApprovalsManager', () => {
       erc20WithdrawalApproval.signatures,
     ]);
   });
+
+  it('detect wrong chainId', () => {
+    mockChainId = 1;
+    const transaction = createWithdrawTransaction();
+    mockEthTransactionStoreState.mockReturnValue({ create });
+    mockEthWithdrawApprovalsStoreState.mockReturnValue({
+      transactions: [transaction],
+      update,
+    });
+    render();
+    expect(update.mock.calls[0][1].status).toEqual(ApprovalStatus.Error);
+    expect(update.mock.calls[0][1].message).toEqual('You are on the wrong network');
+  })
 });

libs/web3/src/lib/use-ethereum-withdraw-approvals-manager.tsx

@@ -60,7 +60,7 @@ export const useEthWithdrawApprovalsManager = () => {
     if (chainId?.toString() !== config?.chain_id) {
       update(transaction.id, {
         status: ApprovalStatus.Error,
-        message: t(`You are on not correct network`),
+        message: t(`You are on the wrong network`),
       });
       return;
     }

libs/withdraws/src/lib/withdrawals-table.tsx

@@ -216,7 +216,7 @@ export const getVerifyDialogProps = (status: ApprovalStatus) => {
 
 export const VerificationStatus = ({ state }: { state: VerifyState }) => {
   if (state.status === ApprovalStatus.Error) {
-    return <p>{t('Something went wrong')}</p>;
+    return <p>{state.message || t('Something went wrong')}</p>;
   }
 
   if (state.status === ApprovalStatus.Pending) {