Merge pull request #917 from rainlanguage/2024-10-04-walletconnect-fi…

…x-cont

Add network name to wallet connect error message

tauri-app/src/lib/components/InputWalletConnect.svelte

@@ -12,7 +12,7 @@
     walletconnectIsDisconnecting,
   } from '$lib/stores/walletconnect';
 
-  export let priorityChainIds: number[] = [];
+  export let priorityChainIds: number[] | undefined = undefined;
 </script>
 
 <div>
@@ -28,7 +28,7 @@
       size="lg"
       pill
       loading={$walletconnectIsDisconnecting || $walletconnectIsConnecting}
-      on:click={() => walletconnectConnect(priorityChainIds)}
+      on:click={() => walletconnectConnect(priorityChainIds ?? [])}
     >
       {#if $walletconnectAccount}
         <Hash type={HashType.Wallet} value={$walletconnectAccount} />

tauri-app/src/lib/components/ModalExecute.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { Button, Modal } from 'flowbite-svelte';
   import ButtonLoading from '$lib/components/ButtonLoading.svelte';
+  import { settings } from '$lib/stores/settings';
   import { ledgerWalletAddress } from '$lib/stores/wallets';
   import InputLedgerWallet from '$lib/components/InputLedgerWallet.svelte';
   import InputWalletConnect from '$lib/components/InputWalletConnect.svelte';
@@ -31,6 +32,18 @@
       selectedWalletconnect = false;
     }
   }
+
+  const getNetworkName = (chainId: number) => {
+    const existingNetwork = Object.entries($settings?.networks || {}).find(
+      (entry) => entry[1]['chain-id'] === chainId,
+    );
+
+    if (existingNetwork) {
+      return existingNetwork[0];
+    }
+
+    return 'an unknown';
+  };
 </script>
 
 <Modal {title} bind:open outsideclose={!isSubmitting} size="sm" on:close={reset}>
@@ -97,8 +110,9 @@
         {execButtonLabel}
       </ButtonLoading>
       {#if $walletconnectAccount && $walletConnectNetwork !== chainId}
-        <div class="text-red-500">
-          Please connect your wallet to {overrideNetwork?.name || $activeNetworkRef} network
+        <div class="text-red-500" data-testid="network-connection-error">
+          You are connected to {getNetworkName($walletConnectNetwork)} network. Please connect your wallet
+          to {overrideNetwork?.name || $activeNetworkRef} network.
         </div>
       {/if}
     </div>

tauri-app/src/lib/components/ModalExecute.test.ts

@@ -0,0 +1,82 @@
+import { expect, vi, describe, it } from 'vitest';
+import ModalExecute from './ModalExecute.svelte';
+import { render, screen } from '@testing-library/svelte';
+import { settings } from '$lib/stores/settings';
+
+vi.mock('$lib/stores/walletconnect', async () => {
+  const { writable } = await import('svelte/store');
+  return {
+    walletconnectAccount: writable('0x123'),
+    walletconnectIsDisconnecting: writable(false),
+    walletconnectIsConnecting: writable(false),
+    walletconnectProvider: writable(undefined),
+    walletConnectNetwork: writable(1),
+    walletConnectConnect: vi.fn(),
+    walletconnectDisconnect: vi.fn(),
+  };
+});
+
+vi.mock('$lib/stores/settings', async (importOriginal) => {
+  return {
+    ...((await importOriginal()) as object),
+  };
+});
+
+describe('ModalExecute', () => {
+  describe('should show network connection error if wallet is connected to wrong network', () => {
+    it('should show unknown network name', () => {
+      render(ModalExecute, {
+        props: {
+          open: true,
+          title: 'Test',
+          execButtonLabel: 'Execute',
+          executeLedger: vi.fn(),
+          executeWalletconnect: vi.fn(),
+          isSubmitting: false,
+          overrideNetwork: {
+            name: 'test',
+            rpc: 'https://test.com',
+            'chain-id': 2,
+          },
+        },
+      });
+
+      const errorElement = screen.getByTestId('network-connection-error');
+      expect(errorElement).toHaveTextContent(
+        'You are connected to an unknown network. Please connect your wallet to test network.',
+      );
+    });
+
+    it('should show current connected network name', () => {
+      settings.set({
+        networks: {
+          mainnet: {
+            'chain-id': 1,
+            rpc: 'https://mainnet.com',
+          },
+        },
+      });
+
+      render(ModalExecute, {
+        props: {
+          open: true,
+          title: 'Test',
+          execButtonLabel: 'Execute',
+          executeLedger: vi.fn(),
+          executeWalletconnect: vi.fn(),
+          isSubmitting: false,
+          overrideNetwork: {
+            name: 'test',
+            rpc: 'https://test.com',
+            'chain-id': 2,
+          },
+        },
+      });
+
+      const errorElement = screen.getByTestId('network-connection-error');
+      expect(errorElement).toHaveTextContent(
+        'You are connected to mainnet network. Please connect your wallet to test network.',
+      );
+    });
+  });
+});