Bumps: wagmi + viem + react query (#1541)

.github/workflows/build.yml

@@ -424,6 +424,9 @@ jobs:
             path: tmp
       - name: Copy dotenv
         run: cat tmp/dotenv >> .env && rm -rf tmp
+      - name: Set IS_TESTING=true
+        run: |
+          sed -i 's/IS_TESTING.*/IS_TESTING=true/g' .env
       - name: Run unit tests
         run: yarn test
 

e2e/helpers.ts

@@ -18,8 +18,8 @@ import {
 } from 'selenium-webdriver';
 import chrome from 'selenium-webdriver/chrome';
 import firefox from 'selenium-webdriver/firefox';
+import { erc20Abi } from 'viem';
 import { expect } from 'vitest';
-import { erc20ABI } from 'wagmi';
 
 import { RAINBOW_TEST_DAPP } from '~/core/references/links';
 
@@ -756,7 +756,7 @@ export async function connectToTestDapp(driver: WebDriver) {
 export async function getOnchainBalance(addy: string, contract: string) {
   try {
     const provider = getDefaultProvider('http://127.0.0.1:8545');
-    const testContract = new Contract(contract, erc20ABI, provider);
+    const testContract = new Contract(contract, erc20Abi, provider);
     const balance = await testContract.balanceOf(addy);
 
     return balance;

e2e/serial/optimismTransactions/1_sendFlow.test.ts

@@ -108,7 +108,7 @@ describe('Complete Hardhat Optimism send flow', () => {
   it('should be able to select asset to send with keyboard', async () => {
     await navigateToElementWithTestId({
       driver,
-      testId: 'asset-name-eth_10',
+      testId: 'asset-name-0x0000000000000000000000000000000000000000_10',
     });
     await delayTime('long');
     const tokenInput = await findElementByTestId({

e2e/serial/send/2_shortcuts-sendFlow.test.ts

@@ -100,7 +100,6 @@ describe('Complete send flow via shortcuts and keyboard navigation', () => {
   it('should be able to save contact', async () => {
     await executePerformShortcut({ driver, key: 'DECIMAL' });
     await driver.actions().sendKeys('0xtester.eth').perform();
-    await executePerformShortcut({ driver, key: 'TAB' });
     await executePerformShortcut({ driver, key: 'ENTER' });
     await delayTime('long');
   });

e2e/serial/swap/2_swapFlow2.test.ts

@@ -3,8 +3,8 @@ import 'geckodriver';
 import { Contract } from '@ethersproject/contracts';
 import { StaticJsonRpcProvider } from '@ethersproject/providers';
 import { WebDriver } from 'selenium-webdriver';
+import { erc20Abi } from 'viem';
 import { afterAll, afterEach, beforeAll, beforeEach, expect, it } from 'vitest';
-import { erc20ABI } from 'wagmi';
 
 import { ChainId } from '~/core/types/chains';
 
@@ -153,7 +153,7 @@ it('should be able to execute unlock and swap', async () => {
   await delayTime('short');
   const tokenContract = new Contract(
     SWAP_VARIABLES.USDC_MAINNET_ADDRESS,
-    erc20ABI,
+    erc20Abi,
     provider,
   );
   const usdcBalanceBeforeSwap = await tokenContract.balanceOf(

package.json

@@ -102,16 +102,16 @@
     "@radix-ui/react-select": "1.2.1",
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.3",
-    "@rainbow-me/provider": "0.0.12",
+    "@rainbow-me/provider": "0.1.0",
     "@rainbow-me/swaps": "0.19.0",
     "@rudderstack/analytics-js-service-worker": "3.0.6",
     "@scure/bip39": "1.2.1",
     "@sentry/browser": "7.69.0",
     "@sentry/tracing": "7.69.0",
-    "@tanstack/query-async-storage-persister": "4.29.19",
-    "@tanstack/react-query": "4.29.19",
-    "@tanstack/react-query-persist-client": "4.29.19",
-    "@tanstack/react-virtual": "3.0.0-beta.54",
+    "@tanstack/query-async-storage-persister": "5.35.1",
+    "@tanstack/react-query": "5.35.1",
+    "@tanstack/react-query-persist-client": "5.35.1",
+    "@tanstack/react-virtual": "3.5.0",
     "@trezor/connect-plugin-ethereum": "9.0.2",
     "@types/qs": "6.9.7",
     "@vanilla-extract/css": "1.9.1",
@@ -152,8 +152,8 @@
     "react-switch": "7.0.0",
     "socket.io-client": "4.5.3",
     "validator": "13.9.0",
-    "viem": "1.21.4",
-    "wagmi": "0.12.19",
+    "viem": "2.10.1",
+    "wagmi": "2.8.1",
     "word-wrap": "1.2.4",
     "zustand": "4.1.5"
   },
@@ -319,7 +319,9 @@
       "@ledgerhq/domain-service>eip55>keccak": false,
       "wagmi>@wagmi/core>@wagmi/connectors>@coinbase/wallet-sdk>keccak": false,
       "viem>ws>bufferutil": false,
-      "viem>ws>utf-8-validate": false
+      "viem>ws>utf-8-validate": false,
+      "wagmi>@wagmi/connectors>@coinbase/wallet-sdk>keccak": false,
+      "wagmi>@wagmi/connectors>@metamask/sdk>eciesjs>secp256k1": false
     }
   }
 }

scripts/unit-tests.sh

@@ -1,6 +1,11 @@
 #!/bin/bash
 ANVIL_PORT=8545
 
+# Automatically export all variables
+set -a  
+source .env
+set +a 
+
 # Launch anvil in the bg
 yarn anvil:kill
 yarn anvil > anvil-unit.log 2>&1 &

src/analytics/event.ts

@@ -1,6 +1,6 @@
 /* eslint sort-keys: "error"*/
 
-import { Address } from 'wagmi';
+import { Address } from 'viem';
 
 import { KeyboardEventDescription } from '~/entries/popup/hooks/useKeyboardAnalytics';
 

src/core/keychain/HWSigner.ts

@@ -5,7 +5,7 @@ import { Signer } from '@ethersproject/abstract-signer';
 import { Bytes } from '@ethersproject/bytes';
 import { defineReadOnly } from '@ethersproject/properties';
 import { Provider } from '@ethersproject/providers';
-import { Address } from 'wagmi';
+import { Address } from 'viem';
 
 import { initializeMessenger } from '../messengers';
 
@@ -35,8 +35,8 @@ export class HWSigner extends Signer {
     defineReadOnly(this, 'messenger', popupMessenger);
   }
 
-  async getAddress(): Promise<string> {
-    return this.address as string;
+  async getAddress(): Promise<Address> {
+    return this.address as Address;
   }
 
   async fwdHWSignRequest(action: string, payload: any): Promise<string> {

src/core/keychain/IKeychain.ts

@@ -1,7 +1,7 @@
 import { Signer } from '@ethersproject/abstract-signer';
 import { Mnemonic } from '@ethersproject/hdnode';
 import { Wallet } from '@ethersproject/wallet';
-import { Address } from 'wagmi';
+import { Address } from 'viem';
 
 export type PrivateKey = string;
 

src/core/keychain/KeychainManager.test.ts

@@ -6,7 +6,6 @@ import { beforeAll, expect, test } from 'vitest';
 import { delay } from '~/test/utils';
 
 import { KeychainType } from '../types/keychainTypes';
-import { createTestWagmiClient } from '../wagmi/createTestWagmiClient';
 
 import { PrivateKey } from './IKeychain';
 import { keychainManager } from './KeychainManager';
@@ -15,7 +14,6 @@ let privateKey = '';
 let password = '';
 
 beforeAll(async () => {
-  createTestWagmiClient();
   await delay(3000);
 });
 

src/core/keychain/KeychainManager.ts

@@ -8,7 +8,7 @@ import {
   importKey,
 } from '@metamask/browser-passworder';
 import * as Sentry from '@sentry/browser';
-import { Address } from 'wagmi';
+import { Address } from 'viem';
 
 import { LocalStorage, SessionStorage } from '../storage';
 import { KeychainType } from '../types/keychainTypes';

src/core/keychain/RainbowSigner.ts

@@ -12,7 +12,7 @@ import { defineReadOnly } from '@ethersproject/properties';
 import { Provider } from '@ethersproject/providers';
 import { personalSign } from '@metamask/eth-sig-util';
 import { bytesToHex } from 'ethereum-cryptography/utils';
-import { Address } from 'wagmi';
+import { Address } from 'viem';
 
 import { addHexPrefix } from '../utils/hex';
 
@@ -33,8 +33,8 @@ export class RainbowSigner extends Signer {
     return Buffer.from(addHexPrefix(this.privateKey).substring(2), 'hex');
   };
 
-  async getAddress(): Promise<string> {
-    return this.address as string;
+  async getAddress(): Promise<Address> {
+    return this.address as Address;
   }
 
   async signMessage(message: Bytes | string): Promise<string> {

src/core/keychain/index.test.ts

@@ -9,11 +9,13 @@ import {
   TypedMessage,
   recoverTypedSignature,
 } from '@metamask/eth-sig-util';
+import { mainnet } from 'viem/chains';
 import { beforeAll, expect, test } from 'vitest';
 
 import { delay } from '~/test/utils';
 
-import { createTestWagmiClient } from '../wagmi/createTestWagmiClient';
+import { connectedToHardhatStore } from '../state/currentSettings/connectedToHardhat';
+import { updateWagmiConfig } from '../wagmi';
 
 import { PrivateKey } from './IKeychain';
 
@@ -40,7 +42,8 @@ let privateKey = '';
 let password = '';
 
 beforeAll(async () => {
-  createTestWagmiClient();
+  connectedToHardhatStore.setState({ connectedToHardhat: true });
+  updateWagmiConfig([mainnet]);
   await delay(3000);
 });
 

src/core/keychain/index.ts

@@ -11,7 +11,7 @@ import {
   TypedMessage,
   signTypedData as signTypedDataSigUtil,
 } from '@metamask/eth-sig-util';
-import { Address } from 'wagmi';
+import { Address } from 'viem';
 
 import {
   SignMessageArguments,

src/core/keychain/keychainTypes/hardwareWalletKeychain.ts

@@ -1,10 +1,10 @@
 import { Signer } from '@ethersproject/abstract-signer';
 import { Wallet } from '@ethersproject/wallet';
-import { getProvider } from '@wagmi/core';
+import { Address } from 'viem';
 import { mainnet } from 'viem/chains';
-import { Address } from 'wagmi';
 
 import { KeychainType } from '~/core/types/keychainTypes';
+import { getProvider } from '~/core/wagmi/clientToProvider';
 
 import { HWSigner } from '../HWSigner';
 import { IKeychain, PrivateKey } from '../IKeychain';
@@ -77,7 +77,9 @@ export class HardwareWalletKeychain implements IKeychain {
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   getSigner(address: Address): Signer {
-    const provider = getProvider({ chainId: mainnet.id });
+    const provider = getProvider({
+      chainId: mainnet.id,
+    });
     return new HWSigner(
       provider,
       this.getPath(address),

src/core/keychain/keychainTypes/hdKeychain.ts

@@ -4,12 +4,13 @@ import { BytesLike } from '@ethersproject/bytes';
 import { Wallet } from '@ethersproject/wallet';
 import * as bip39 from '@scure/bip39';
 import { wordlist as englishWordlist } from '@scure/bip39/wordlists/english';
-import { getProvider } from '@wagmi/core';
 import { HDKey } from 'ethereum-cryptography/hdkey';
 import { bytesToHex } from 'ethereum-cryptography/utils';
-import { Address, mainnet } from 'wagmi';
+import { Address } from 'viem';
+import { mainnet } from 'viem/chains';
 
 import { KeychainType } from '~/core/types/keychainTypes';
+import { getProvider } from '~/core/wagmi/clientToProvider';
 
 import { IKeychain, PrivateKey, TWallet } from '../IKeychain';
 import { keychainManager } from '../KeychainManager';
@@ -105,6 +106,7 @@ export class HdKeychain implements IKeychain {
 
   getSigner(address: Address): Signer {
     const _privates = privates.get(this)!;
+
     const provider = getProvider({ chainId: mainnet.id });
     const wallet = _privates!.getWalletForAddress(address) as TWallet;
     if (!wallet) throw new Error('Account not found');