chore(trading): add handle wrong chainId in withdrawal (#3015)

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,19 @@ 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

@@ -28,7 +28,7 @@ export const useEthWithdrawApprovalsManager = () => {
   const getThreshold = useGetWithdrawThreshold();
   const getDelay = useGetWithdrawDelay();
   const { query } = useApolloClient();
-  const { provider } = useWeb3React();
+  const { provider, chainId } = useWeb3React();
   const { config } = useEthereumConfig();
   const createEthTransaction = useEthTransactionStore((state) => state.create);
   const update = useEthWithdrawApprovalsStore((state) => state.update);
@@ -57,6 +57,13 @@ export const useEthWithdrawApprovalsManager = () => {
       });
       return;
     }
+    if (chainId?.toString() !== config?.chain_id) {
+      update(transaction.id, {
+        status: ApprovalStatus.Error,
+        message: t(`You are on the wrong network`),
+      });
+      return;
+    }
     update(transaction.id, {
       status: ApprovalStatus.Pending,
       message: t('Verifying withdrawal approval'),
@@ -131,5 +138,6 @@ export const useEthWithdrawApprovalsManager = () => {
     query,
     transaction,
     update,
+    chainId,
   ]);
 };

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) {