WalletConnect: migrate to v2

.env

@@ -1 +1,2 @@
 VITE_INFURA_ENDPOINT='2599df54929b47099bda360958d75aaf'
+VITE_WALLET_CONNECT_PROJECT_ID=''

DEVELOPMENT.md

@@ -94,6 +94,11 @@ websocket. Do this by going to `about:config` and setting the
 Additionally you need to run with the `HTTPS` environment variable set to
 `true`. Note that `npm run pilot` will handle this automatically.
 
+##  WalletConnect
+
+To get WalletConnect working you need to set the `VITE_WALLET_CONNECT_PROJECT_ID` 
+environment variable with a project id that you can get at https://cloud.walletconnect.com/sign-in
+
 ## Testing
 
 Automated tests for critical user journeys are coming Soon™️. Until then, here are several manual test cases to consider when making changes. It's worth noting that what to test depends on what the changes are. These test cases have limited utility when you are making a small change on a single screen; however, they are certainly a good idea when touching critical pieces such as transaction sending or secrets derivation.
@@ -140,6 +145,7 @@ const baseUrl = 'https://gas-tank.urbit.org:3011';
 1. On the Bridge landing page, click the small "Activate" link
 2. Paste the Invite code from the previous test case, and click "Go"
 3. Download the Passport file, then use the enclosed Master Ticket and ID to login to Bridge again
+
 ### Known Issues
 
 When testing the invite acceptance and login flow on Goerli, some of the Azimuth API calls will fail (e.g., `getConditional`).

package.json

@@ -36,8 +36,10 @@
     "@types/styled-system__css": "^5.0.15",
     "@urbit/nockjs": "^0.0.1",
     "@urbit/roller-api": "^0.1.15",
-    "@walletconnect/client": "^1.8.0",
-    "@walletconnect/qrcode-modal": "^1.8.0",
+    "@walletconnect/encoding": "^1.0.2",
+    "@walletconnect/sign-client": "^2.7.6",
+    "@walletconnect/types": "^2.7.6",
+    "@web3modal/standalone": "^2.4.1",
     "@welldone-software/why-did-you-render": "^3.2.3",
     "agent-base": "^6.0.2",
     "async-retry": "^1.2.3",
@@ -162,4 +164,4 @@
       "pre-commit": "npm-run-all lint:check"
     }
   }
-}
+}

src/lib/WalletConnect.ts

@@ -1,9 +1,9 @@
-import { ITxData } from '@walletconnect/types';
 import { JsonTx, Transaction, FeeMarketEIP1559Transaction as EIP1559Transaction } from '@ethereumjs/tx';
 import { stripHexPrefix } from './utils/address';
 import { FakeSignableTx, FakeSignResult } from './txn';
 import Web3 from 'web3';
 import { EIP1559_TRANSACTION_TYPE } from './constants';
+import { ITxData } from './types/ITxData';
 
 type SignWalletConnectTransactionArgs = {
   from: string;
@@ -34,6 +34,7 @@ const walletConnectSignTransaction = async ({
     if (e.message === 'METHOD_NOT_SUPPORTED' || e.message === '"eth_signTransaction" not implemented') {
       console.log('connected wc wallet does not support tx signing.');
       return FakeSignResult(
+        //@ts-ignore
         wcFormattedTx,
         //@ts-ignore // TODO
         walletConnectSendTransaction(txnSender)

src/lib/authToken.ts

@@ -2,7 +2,6 @@ import { crypto } from 'bitcoinjs-lib';
 import { ecdsaSign } from 'secp256k1';
 import Web3 from 'web3';
 import { hexToBytes } from 'web3-utils';
-import WalletConnect from '@walletconnect/client';
 import { hashPersonalMessage } from '@ethereumjs/util';
 import { WALLET_TYPES } from './constants';
 import BridgeWallet from './types/BridgeWallet';
@@ -56,7 +55,7 @@ type MetamaskAuthTokenArgs = {
 
 type WalletConnectAuthTokenArgs = {
   address: string;
-  connector: WalletConnect;
+  signPersonalMessage: Function;
   walletType: symbol;
 };
 
@@ -87,12 +86,12 @@ const getMetamaskAuthToken = ({ address, web3 }: MetamaskAuthTokenArgs) => {
   }
 };
 
-const getWalletConnectAuthToken = ({
+const getWalletConnectAuthToken = async ({
   address,
-  connector,
+  signPersonalMessage
 }: WalletConnectAuthTokenArgs) => {
-  return connector.signPersonalMessage([MESSAGE, address]);
-};
+  return await signPersonalMessage({ message: MESSAGE, address: address });
+}
 
 const getDefaultAuthToken = ({
   wallet,

src/lib/txn.ts

@@ -1,6 +1,5 @@
 import { Common, Chain, Hardfork } from '@ethereumjs/common';
 import { Transaction, FeeMarketEIP1559Transaction as EIP1559Transaction, TxOptions, TxData, FeeMarketEIP1559TxData as EIP1559TxData } from '@ethereumjs/tx';
-import { ITxData } from '@walletconnect/types';
 import { toHex, toWei } from 'web3-utils';
 import retry from 'async-retry';
 import { NETWORK_TYPES } from './network';
@@ -12,6 +11,7 @@ import Web3 from 'web3';
 import { TransactionConfig, TransactionReceipt } from 'web3-core';
 import BridgeWallet from './types/BridgeWallet';
 import { GasPriceData } from 'components/L2/Dropdowns/FeeDropdown';
+import { ITxData } from './types/ITxData';
 
 const RETRY_OPTIONS = {
   retries: 99999,
@@ -85,7 +85,7 @@ const signTransaction = async ({
   txnSender, // and a sending function, for wallets that need these passed in.
 }: signTransactionProps) => {
   const from = wallet.address;
-  const estimate = await estimateGasLimit({...txn, from });
+  const estimate = await estimateGasLimit({ ...txn, from });
   const maxFeePerGas = await getMaxFeePerGas();
 
   const txParams: EIP1559TxData = {
@@ -98,9 +98,9 @@ const signTransaction = async ({
     chainId: toHex(chainId),
     type: toHex(EIP1559_TRANSACTION_TYPE),
   }
-  
+
   const chain =
-      networkType === NETWORK_TYPES.GOERLI ? Chain.Goerli : Chain.Mainnet;
+    networkType === NETWORK_TYPES.GOERLI ? Chain.Goerli : Chain.Mainnet;
 
   const txConfig: TxOptions = {
     freeze: false,
@@ -110,7 +110,7 @@ const signTransaction = async ({
     })
   };
 
-  let stx = EIP1559Transaction.fromTxData(txParams, txConfig) 
+  let stx = EIP1559Transaction.fromTxData(txParams, txConfig)
 
   if (walletType === WALLET_TYPES.METAMASK) {
     return metamaskSignTransaction(stx);

src/lib/types/ITxData.ts

@@ -0,0 +1,9 @@
+export type ITxData = {
+  from: string;
+  to?: string;
+  gas: string;
+  gasPrice?: string;
+  value?: string;
+  data?: string;
+  nonce?: string;
+}

src/lib/types/L2Transaction.ts

@@ -11,8 +11,8 @@ import RollerRPCAPI, {
   Spawn,
   TransferPoint,
 } from '@urbit/roller-api';
-import WalletConnect from '@walletconnect/client';
 import BridgeWallet from './BridgeWallet';
+import { SignClient as WalletConnect } from '@walletconnect/sign-client/dist/types/client';
 
 export type TransactionType =
   | 'transferPoint'
@@ -45,20 +45,22 @@ export interface L2TransactionArgs extends SendL2Params {
   walletType: symbol;
   web3: any;
   connector: WalletConnect | null;
+  isConnected: Function,
+  signPersonalMessage: Function,
 }
 
 export interface TransactionData {
   data: any;
   method:
-    | Spawn
-    | TransferPoint
-    | ConfigureKeys
-    | Escape
-    | CancelEscape
-    | Adopt
-    | Detach
-    | Reject
-    | (() => Promise<string>);
+  | Spawn
+  | TransferPoint
+  | ConfigureKeys
+  | Escape
+  | CancelEscape
+  | Adopt
+  | Detach
+  | Reject
+  | (() => Promise<string>);
 }
 
 export interface ReticketProgressCallback {

src/lib/useReticketL2Spawn.ts

@@ -1,7 +1,6 @@
 import { EthAddress, Ship } from '@urbit/roller-api';
 import { useCallback } from 'react';
 import Web3 from 'web3';
-import { ITxData } from '@walletconnect/types';
 import { INITIAL_NETWORK_KEY_REVISION } from './constants';
 import { reticketPointBetweenWallets } from './reticket';
 import BridgeWallet from './types/BridgeWallet';
@@ -10,6 +9,7 @@ import useRoller from './useRoller';
 import { registerProxyAddress } from './utils/roller';
 import { useWallet } from 'store/wallet';
 import { useWalletConnect } from './useWalletConnect';
+import { ITxData } from './types/ITxData';
 
 interface ReticketL2SpawnParams {
   fromWallet: BridgeWallet;
@@ -58,7 +58,7 @@ interface ReticketL2SpawnParams {
 export const useReticketL2Spawn = () => {
   const { api } = useRoller();
   const { walletType }: any = useWallet();
-  const { connector } = useWalletConnect();
+  const { connector, signPersonalMessage, isConnected } = useWalletConnect();
 
   const performL2SpawnReticket = useCallback(
     async ({
@@ -122,6 +122,8 @@ export const useReticketL2Spawn = () => {
         walletType,
         web3,
         connector,
+        isConnected,
+        signPersonalMessage,
         true
       );
     },
@@ -131,4 +133,4 @@ export const useReticketL2Spawn = () => {
   return {
     performL2SpawnReticket,
   };
-};
+};