Merge pull request #1441 from gabrielbazan7/ref/walletconnect1

[REF] update to @reown/walletkit - add requests to reducer blacklist - fix available accounts label

package.json

@@ -65,16 +65,12 @@
     "@react-navigation/native": "6.1.9",
     "@react-navigation/native-stack": "6.9.17",
     "@react-navigation/stack": "6.0.11",
+    "@reown/walletkit": "1.1.1",
     "@shopify/flash-list": "1.7.0",
     "@shopify/react-native-skia": "1.3.7",
     "@tradle/react-native-http": "2.0.1",
     "@walletconnect/jsonrpc-types": "1.0.2",
-    "@walletconnect/legacy-utils": "2.0.0-rc.0",
     "@walletconnect/react-native-compat": "2.14.0",
-    "@walletconnect/sign-client": "2.11.3",
-    "@walletconnect/types": "2.11.3",
-    "@walletconnect/utils": "2.11.3",
-    "@walletconnect/web3wallet": "1.11.2",
     "asyncstorage-down": "4.2.0",
     "axios": "0.21.1",
     "babel-plugin-module-resolver": "4.1.0",

scripts/allowed-url-prefixes.js

@@ -70,6 +70,7 @@ const allowedUrlPrefixes = [
   'https://goerli-rollup.arbitrum.io/rpc',
   'https://goerli.base.org',
   'https://verify.walletconnect.com/',
+  'https://verify.walletconnect.org/',
   'https://api.etherscan.io/v2/api',
 ].concat(developmentOnlyAllowedUrlPrefixes);
 

src/components/modal/wallet-connect/WalletConnectStartModal.tsx

@@ -43,7 +43,7 @@ import {
   WALLET_CONNECT_SUPPORTED_CHAINS,
   WC_EVENTS,
 } from '../../../constants/WalletConnectV2';
-import {Web3WalletTypes} from '@walletconnect/web3wallet';
+import {WalletKitTypes} from '@reown/walletkit';
 import FastImage from 'react-native-fast-image';
 import {WalletConnectScreens} from '../../../navigation/wallet-connect/WalletConnectGroup';
 import SheetModal from '../base/sheet/SheetModal';
@@ -74,7 +74,7 @@ import {SvgProps} from 'react-native-svg';
 
 export type WalletConnectStartParamList = {
   // version 2
-  proposal: Web3WalletTypes.EventArguments['session_proposal'];
+  proposal: WalletKitTypes.EventArguments['session_proposal'];
   selectedWallets?: {
     chain: string;
     address: string;
@@ -202,6 +202,8 @@ export const WalletConnectStartModal = () => {
   const [checkedAccount, setCheckedAccount] = useState<
     AccountRowProps & {checked?: boolean}
   >();
+  const [availableAccountLength, setAvailableAccountsLength] =
+    useState<number>(0);
   const [customErrorMessageData, setCustomErrorMessageData] = useState<
     BottomNotificationConfig | undefined
   >();
@@ -394,6 +396,11 @@ export const WalletConnectStartModal = () => {
       })
       .filter(item => item !== null) as KeyWalletsRowProps[];
     setAllkeys(formattedKeys);
+    const availableAccountsLength = formattedKeys.reduce(
+      (total, key) => total + key?.accounts?.length || 0,
+      0,
+    );
+    setAvailableAccountsLength(availableAccountsLength);
     setCheckedAccount(formattedKeys[0]?.accounts[0]);
     _setSelectedWallets(formattedKeys);
   };
@@ -640,14 +647,14 @@ export const WalletConnectStartModal = () => {
                             {checkedAccount.accountName}
                           </H6>
                         </Row>
-                        {allKeys[0]?.accounts.length > 1 ? (
+                        {availableAccountLength > 1 ? (
                           <AccountSettingsArrowContainer>
                             <BaseText
                               style={{
                                 fontSize: 16,
                                 color: theme.dark ? White : SlateDark,
                               }}>
-                              (+{allKeys[0]?.accounts.length - 1})
+                              (+{availableAccountLength - 1})
                             </BaseText>
                             <SelectorArrowRight />
                           </AccountSettingsArrowContainer>

src/store/app/app.actions.ts

@@ -15,7 +15,7 @@ import {
 } from './app.models';
 import {ModalId, FeedbackType} from './app.reducer';
 import {AppActionType, AppActionTypes} from './app.types';
-import {Web3WalletTypes} from '@walletconnect/web3wallet';
+import {WalletKitTypes} from '@reown/walletkit';
 import {SupportedChains} from '../../constants/currencies';
 import {ChainSelectorConfig} from '../../components/modal/chain-selector/ChainSelector';
 import {LocalAssetsDropdown} from '../../components/list/AssetsByChainRow';
@@ -92,7 +92,7 @@ export const dismissWalletConnectStartModal = (): AppActionType => ({
 export const showInAppNotification = (
   context: InAppNotificationContextType,
   message: string,
-  request: Web3WalletTypes.EventArguments['session_request'],
+  request: WalletKitTypes.EventArguments['session_request'],
 ): AppActionType => ({
   type: AppActionTypes.SHOW_IN_APP_NOTIFICATION,
   payload: {context, message, request},

src/store/app/app.effects.ts

@@ -127,7 +127,7 @@ import {
   startCustomTokensMigration,
   startPolMigration,
 } from '../wallet/effects/currencies/currencies';
-import {Web3WalletTypes} from '@walletconnect/web3wallet';
+import {WalletKitTypes} from '@reown/walletkit';
 import {Key, Wallet} from '../wallet/wallet.models';
 import {AppDispatch} from '../../utils/hooks';
 
@@ -641,7 +641,7 @@ export const startOnGoingProcessModal =
 export const startInAppNotification =
   (
     key: InAppNotificationMessages,
-    request: Web3WalletTypes.EventArguments['session_request'],
+    request: WalletKitTypes.EventArguments['session_request'],
     context: InAppNotificationContextType,
   ): Effect<Promise<void>> =>
   async (dispatch, getState: () => RootState) => {

src/store/app/app.reducer.ts

@@ -23,7 +23,7 @@ import uniqBy from 'lodash.uniqby';
 import {BiometricModalConfig} from '../../components/modal/biometric/BiometricModal';
 import {FeedbackRateType} from '../../navigation/tabs/settings/about/screens/SendFeedback';
 import moment from 'moment';
-import {Web3WalletTypes} from '@walletconnect/web3wallet';
+import {WalletKitTypes} from '@reown/walletkit';
 import {SupportedChains} from '../../constants/currencies';
 import {ChainSelectorConfig} from '../../components/modal/chain-selector/ChainSelector';
 import {LocalAssetsDropdown} from '../../components/list/AssetsByChainRow';
@@ -105,7 +105,7 @@ export interface AppState {
     | {
         context: InAppNotificationContextType;
         message: string;
-        request?: Web3WalletTypes.EventArguments['session_request'];
+        request?: WalletKitTypes.EventArguments['session_request'];
       }
     | undefined;
   showBottomNotificationModal: boolean;

src/store/app/app.types.ts

@@ -14,7 +14,7 @@ import {SettingsListType} from '../../navigation/tabs/settings/SettingsRoot';
 import {AltCurrenciesRowProps} from '../../components/list/AltCurrenciesRow';
 import {FeedbackType, ModalId} from './app.reducer';
 import {BiometricModalConfig} from '../../components/modal/biometric/BiometricModal';
-import {Web3WalletTypes} from '@walletconnect/web3wallet';
+import {WalletKitTypes} from '@reown/walletkit';
 import {SupportedChains} from '../../constants/currencies';
 import {ChainSelectorConfig} from '../../components/modal/chain-selector/ChainSelector';
 import {LocalAssetsDropdown} from '../../components/list/AssetsByChainRow';
@@ -168,7 +168,7 @@ interface ShowInAppNotification {
   type: typeof AppActionTypes.SHOW_IN_APP_NOTIFICATION;
   payload: {
     message: string;
-    request: Web3WalletTypes.EventArguments['session_request'];
+    request: WalletKitTypes.EventArguments['session_request'];
     context: InAppNotificationContextType;
   };
 }

src/store/wallet-connect-v2/wallet-connect-v2.actions.ts

@@ -3,10 +3,10 @@ import {
   WalletConnectV2ActionType,
   WalletConnectV2ActionTypes,
 } from './wallet-connect-v2.types';
-import {Web3WalletTypes} from '@walletconnect/web3wallet';
+import {WalletKitTypes} from '@reown/walletkit';
 
 export const sessionProposal = (
-  proposal?: Web3WalletTypes.EventArguments['session_proposal'],
+  proposal?: WalletKitTypes.EventArguments['session_proposal'],
 ): WalletConnectV2ActionType => ({
   type: WalletConnectV2ActionTypes.SESSION_PROPOSAL,
   payload: {proposal},
@@ -24,7 +24,7 @@ export const rejectSessionProposal = (): WalletConnectV2ActionType => ({
 });
 
 export const sessionRequest = (
-  request: Web3WalletTypes.EventArguments['session_request'] & {
+  request: WalletKitTypes.EventArguments['session_request'] & {
     createdOn?: number;
     swapAmount?: string;
     swapFormatAmount?: string;
@@ -43,7 +43,7 @@ export const sessionRequest = (
 });
 
 export const updateRequests = (
-  requests: Web3WalletTypes.EventArguments['session_request'][],
+  requests: WalletKitTypes.EventArguments['session_request'][],
 ): WalletConnectV2ActionType => ({
   type: WalletConnectV2ActionTypes.UPDATE_REQUESTS,
   payload: {requests},

src/store/wallet-connect-v2/wallet-connect-v2.effects.ts

@@ -44,11 +44,7 @@ import {
 } from './wallet-connect-v2.models';
 import {ethers, providers} from 'ethers';
 import {Core} from '@walletconnect/core';
-import {
-  Web3Wallet,
-  IWeb3Wallet,
-  Web3WalletTypes,
-} from '@walletconnect/web3wallet';
+import {WalletKit, IWalletKit, WalletKitTypes} from '@reown/walletkit';
 import {WALLET_CONNECT_V2_PROJECT_ID} from '@env';
 import {startInAppNotification} from '../app/app.effects';
 import {navigationRef} from '../../Root';
@@ -62,7 +58,7 @@ const BWC = BwcProvider.getInstance();
 let core = new Core({
   projectId: WALLET_CONNECT_V2_PROJECT_ID,
 });
-let web3wallet: IWeb3Wallet;
+let web3wallet: IWalletKit;
 
 const checkCredentials = () => {
   return WALLET_CONNECT_V2_PROJECT_ID && WALLETCONNECT_V2_METADATA;
@@ -77,7 +73,7 @@ export const walletConnectV2Init = (): Effect => async (dispatch, getState) => {
       return;
     }
 
-    web3wallet = await Web3Wallet.init({
+    web3wallet = await WalletKit.init({
       core,
       metadata: WALLETCONNECT_V2_METADATA,
     });
@@ -117,12 +113,12 @@ export const walletConnectV2OnSessionProposal =
     return new Promise(async (resolve, reject) => {
       try {
         if (!web3wallet) {
-          web3wallet = await Web3Wallet.init({
+          web3wallet = await WalletKit.init({
             core,
             metadata: WALLETCONNECT_V2_METADATA,
           });
         }
-        await web3wallet.core.pairing.pair({uri});
+        await web3wallet.pair({uri});
         resolve();
       } catch (e) {
         dispatch(
@@ -208,7 +204,7 @@ export const walletConnectV2SubscribeToEvents =
   (): Effect => (dispatch, getState) => {
     web3wallet.on(
       'session_proposal',
-      (proposal: Web3WalletTypes.EventArguments['session_proposal']) => {
+      (proposal: WalletKitTypes.EventArguments['session_proposal']) => {
         dispatch(WalletConnectV2Actions.sessionProposal(proposal));
         dispatch(AppActions.showWalletConnectStartModal());
         dispatch(
@@ -222,7 +218,7 @@ export const walletConnectV2SubscribeToEvents =
     );
     web3wallet.on(
       'session_request',
-      async (event: Web3WalletTypes.EventArguments['session_request']) => {
+      async (event: WalletKitTypes.EventArguments['session_request']) => {
         dispatch(
           LogActions.info(
             `[WC-V2/walletConnectV2SubscribeToEvents]: new pending request: ${JSON.stringify(
@@ -231,17 +227,6 @@ export const walletConnectV2SubscribeToEvents =
           ),
         );
 
-        const requests: WCV2RequestType[] | undefined =
-          getState().WALLET_CONNECT_V2.requests;
-        const requestExist = requests.some(({id}) => id === event.id);
-        if (requestExist) {
-          dispatch(
-            LogActions.info(
-              '[WC-V2/walletConnectV2SubscribeToEvents]: pending request already stored - updating it',
-            ),
-          );
-        }
-
         const isChainSupported = Object.keys(
           WALLET_CONNECT_SUPPORTED_CHAINS,
         ).includes(event.params.chainId);
@@ -264,12 +249,12 @@ export const walletConnectV2SubscribeToEvents =
         }
 
         // Process the request that requires user interaction
-        await handleUserInteraction(event, requestExist);
+        await handleUserInteraction(event);
       },
     );
 
     const handleAutoApproval = async (
-      event: Web3WalletTypes.EventArguments['session_request'],
+      event: WalletKitTypes.EventArguments['session_request'],
     ) => {
       const newChainId = event?.params?.request?.params?.[0]?.chainId;
 
@@ -292,8 +277,7 @@ export const walletConnectV2SubscribeToEvents =
     };
 
     const handleUserInteraction = async (
-      event: Web3WalletTypes.EventArguments['session_request'],
-      requestExist: boolean,
+      event: WalletKitTypes.EventArguments['session_request'],
     ) => {
       const {name: currentRouteName} =
         (navigationRef.current?.getCurrentRoute() as any) || {};
@@ -317,7 +301,7 @@ export const walletConnectV2SubscribeToEvents =
           }),
         );
 
-        if (currentRouteName !== 'WalletConnectHome' && !requestExist) {
+        if (currentRouteName !== 'WalletConnectHome') {
           await sleep(1000);
           dispatch(
             startInAppNotification(
@@ -340,7 +324,7 @@ export const walletConnectV2SubscribeToEvents =
     };
 
     const emitSessionEvents = async (
-      event: Web3WalletTypes.EventArguments['session_request'],
+      event: WalletKitTypes.EventArguments['session_request'],
       eip155ChainId: string,
     ) => {
       const chainChanged = {
@@ -370,7 +354,7 @@ export const walletConnectV2SubscribeToEvents =
 
     web3wallet.on(
       'session_delete',
-      async (data: Web3WalletTypes.EventArguments['session_delete']) => {
+      async (data: WalletKitTypes.EventArguments['session_delete']) => {
         try {
           const {topic} = data;
           const session: WCV2SessionType | undefined =
@@ -402,8 +386,8 @@ export const walletConnectV2SubscribeToEvents =
       },
     );
     web3wallet.on(
-      'auth_request',
-      async (data: Web3WalletTypes.EventArguments['auth_request']) => {
+      'session_authenticate',
+      async (data: WalletKitTypes.EventArguments['session_authenticate']) => {
         // TODO Handle auth_request
         try {
           dispatch(
@@ -419,7 +403,7 @@ export const walletConnectV2SubscribeToEvents =
     web3wallet.on(
       'session_request_expire',
       async (
-        event: Web3WalletTypes.EventArguments['session_request_expire'],
+        event: WalletKitTypes.EventArguments['session_request_expire'],
       ) => {
         try {
           dispatch(
@@ -514,7 +498,7 @@ export const walletConnectV2OnDeleteSession =
     return new Promise(async resolve => {
       try {
         if (!web3wallet) {
-          web3wallet = await Web3Wallet.init({
+          web3wallet = await WalletKit.init({
             core,
             metadata: WALLETCONNECT_V2_METADATA,
           });
@@ -571,7 +555,7 @@ export const walletConnectV2OnUpdateSession =
   async dispatch => {
     try {
       if (!web3wallet) {
-        web3wallet = await Web3Wallet.init({
+        web3wallet = await WalletKit.init({
           core,
           metadata: WALLETCONNECT_V2_METADATA,
         });
@@ -946,7 +930,7 @@ const WalletConnectV2UpdateSession =
 
 export const getGasWalletByRequest =
   (
-    request: Web3WalletTypes.EventArguments['session_request'],
+    request: WalletKitTypes.EventArguments['session_request'],
   ): Effect<Wallet | undefined> =>
   (_dispatch, getState) => {
     const sessionV2: WCV2SessionType | undefined =

src/store/wallet-connect-v2/wallet-connect-v2.models.ts

@@ -1,6 +1,6 @@
 import {ProposalTypes, SessionTypes, Verify} from '@walletconnect/types';
 import {Wallet} from '../wallet/wallet.models';
-import {Web3WalletTypes} from '@walletconnect/web3wallet';
+import {WalletKitTypes} from '@reown/walletkit';
 import {ReactElement} from 'react';
 
 export type WCV2Key = {
@@ -21,7 +21,7 @@ export type WCV2RequestWalletsType = {
 };
 
 export type WCV2RequestType =
-  Web3WalletTypes.EventArguments['session_request'] & {
+  WalletKitTypes.EventArguments['session_request'] & {
     createdOn?: number;
     transactionDataName?: string;
     swapAmount?: string;