Fix: remove deprecated mobile pairing (#2794)

* Fix: remove deprecated mobile pairing

* Fix accounts[0] and Delete Account

* Update onboard package

* Update env vars

.env.example

@@ -1,4 +1,4 @@
-## Infura token (required)
+## Infura token
 NEXT_PUBLIC_INFURA_TOKEN=
 NEXT_PUBLIC_SAFE_APPS_INFURA_TOKEN=
 
@@ -22,7 +22,6 @@ NEXT_PUBLIC_SENTRY_DSN=
 NEXT_PUBLIC_BEAMER_ID=
 
 # Wallet-specific variables
-NEXT_PUBLIC_WC_BRIDGE=
 NEXT_PUBLIC_WC_PROJECT_ID=
 
 # E2E tests

README.md

@@ -17,37 +17,38 @@ Contributions, be it a bug report or a pull request, are very welcome. Please ch
 
 Create a `.env` file with environment variables. You can use the `.env.example` file as a reference.
 
-Here's the list of all the required and optional variables:
-
-| Env variable                                           |              | Description
-| ------------------------------------------------------ | ------------ | -----------
-| `NEXT_PUBLIC_INFURA_TOKEN`                             | optional     | [Infura](https://docs.infura.io/infura/networks/ethereum/how-to/secure-a-project/project-id) RPC API token
-| `NEXT_PUBLIC_SAFE_APPS_INFURA_TOKEN`                   | optional     | Infura token for Safe Apps, falls back to `NEXT_PUBLIC_INFURA_TOKEN`
-| `NEXT_PUBLIC_IS_PRODUCTION`                            | optional     | Set to `true` to build a minified production app
-| `NEXT_PUBLIC_GATEWAY_URL_PRODUCTION`                   | optional     | The base URL for the [Safe Client Gateway](https://github.com/safe-global/safe-client-gateway)
-| `NEXT_PUBLIC_GATEWAY_URL_STAGING`                      | optional     | The base CGW URL on staging
-| `NEXT_PUBLIC_SAFE_VERSION`                             | optional     | The latest version of the Safe contract, defaults to 1.3.0
-| `NEXT_PUBLIC_WC_BRIDGE`                                | optional     | [WalletConnect v1](https://docs.walletconnect.com/1.0/bridge-server) bridge URL, falls back to the public WC bridge
-| `NEXT_PUBLIC_WC_PROJECT_ID`                            | optional     | [WalletConnect v2](https://docs.walletconnect.com/2.0/cloud/relay) project ID
-| `NEXT_PUBLIC_TENDERLY_ORG_NAME`                        | optional     | [Tenderly](https://tenderly.co) org name for Transaction Simulation
-| `NEXT_PUBLIC_TENDERLY_PROJECT_NAME`                    | optional     | Tenderly project name
-| `NEXT_PUBLIC_TENDERLY_SIMULATE_ENDPOINT_URL`           | optional     | Tenderly simulation URL
-| `NEXT_PUBLIC_BEAMER_ID`                                | optional     | [Beamer](https://www.getbeamer.com) is a news feed for in-app announcements
-| `NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID`                    | optional     | [GTM](https://tagmanager.google.com) project id
-| `NEXT_PUBLIC_GOOGLE_TAG_MANAGER_DEVELOPMENT_AUTH`      | optional     | Dev GTM key
-| `NEXT_PUBLIC_GOOGLE_TAG_MANAGER_LATEST_AUTH`           | optional     | Preview GTM key
-| `NEXT_PUBLIC_GOOGLE_TAG_MANAGER_LIVE_AUTH`             | optional     | Production GTM key
-| `NEXT_PUBLIC_SENTRY_DSN`                               | optional     | [Sentry](https://sentry.io) id for tracking runtime errors
-| `NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_PRODUCTION` | optional     | [Safe Gelato Relay Service](https://github.com/safe-global/safe-gelato-relay-service) URL to allow relaying transactions via Gelato
-| `NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_STAGING`    | optional     | Relay URL on staging
-| `NEXT_PUBLIC_IS_OFFICIAL_HOST`                         | optional     | Whether it's the official distribution of the app, or a fork; has legal implications. Set to true only if you also update the legal pages like Imprint and Terms of use
-| `NEXT_PUBLIC_REDEFINE_API`                             | optional     | Redefine API base URL
-| `NEXT_PUBLIC_FIREBASE_OPTIONS_PRODUCTION`              | optional     | Firebase Cloud Messaging (FCM) `initializeApp` options on production
-| `NEXT_PUBLIC_FIREBASE_VAPID_KEY_PRODUCTION`            | optional     | FCM vapid key on production
-| `NEXT_PUBLIC_FIREBASE_OPTIONS_STAGING`                 | optional     | FCM `initializeApp` options on staging
-| `NEXT_PUBLIC_FIREBASE_VAPID_KEY_STAGING`               | optional     | FCM vapid key on staging
-
-If you don't provide some of the optional vars, the corresponding features will be disabled in the UI.
+Here's the list of all the environment variables:
+
+| Env variable                                           | Description
+| ------------------------------------------------------ | -----------
+| `NEXT_PUBLIC_INFURA_TOKEN`                             | [Infura](https://docs.infura.io/infura/networks/ethereum/how-to/secure-a-project/project-id) RPC API token
+| `NEXT_PUBLIC_SAFE_APPS_INFURA_TOKEN`                   | Infura token for Safe Apps, falls back to `NEXT_PUBLIC_INFURA_TOKEN`
+| `NEXT_PUBLIC_IS_PRODUCTION`                            | Set to `true` to build a minified production app
+| `NEXT_PUBLIC_GATEWAY_URL_PRODUCTION`                   | The base URL for the [Safe Client Gateway](https://github.com/safe-global/safe-client-gateway)
+| `NEXT_PUBLIC_GATEWAY_URL_STAGING`                      | The base CGW URL on staging
+| `NEXT_PUBLIC_SAFE_VERSION`                             | The latest version of the Safe contract, defaults to 1.3.0
+| `NEXT_PUBLIC_WC_PROJECT_ID`                            | [WalletConnect v2](https://docs.walletconnect.com/2.0/cloud/relay) project ID
+| `NEXT_PUBLIC_TENDERLY_ORG_NAME`                        | [Tenderly](https://tenderly.co) org name for Transaction Simulation
+| `NEXT_PUBLIC_TENDERLY_PROJECT_NAME`                    | Tenderly project name
+| `NEXT_PUBLIC_TENDERLY_SIMULATE_ENDPOINT_URL`           | Tenderly simulation URL
+| `NEXT_PUBLIC_BEAMER_ID`                                | [Beamer](https://www.getbeamer.com) is a news feed for in-app announcements
+| `NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID`                    | [GTM](https://tagmanager.google.com) project id
+| `NEXT_PUBLIC_GOOGLE_TAG_MANAGER_DEVELOPMENT_AUTH`      | Dev GTM key
+| `NEXT_PUBLIC_GOOGLE_TAG_MANAGER_LATEST_AUTH`           | Preview GTM key
+| `NEXT_PUBLIC_GOOGLE_TAG_MANAGER_LIVE_AUTH`             | Production GTM key
+| `NEXT_PUBLIC_SENTRY_DSN`                               | [Sentry](https://sentry.io) id for tracking runtime errors
+| `NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_PRODUCTION` | [Safe Gelato Relay Service](https://github.com/safe-global/safe-gelato-relay-service) URL to allow relaying transactions via Gelato
+| `NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_STAGING`    | Relay URL on staging
+| `NEXT_PUBLIC_IS_OFFICIAL_HOST`                         | Whether it's the official distribution of the app, or a fork; has legal implications. Set to true only if you also update the legal pages like Imprint and Terms of use
+| `NEXT_PUBLIC_REDEFINE_API`                             | Redefine API base URL
+| `NEXT_PUBLIC_FIREBASE_OPTIONS_PRODUCTION`              | Firebase Cloud Messaging (FCM) `initializeApp` options on production
+| `NEXT_PUBLIC_FIREBASE_VAPID_KEY_PRODUCTION`            | FCM vapid key on production
+| `NEXT_PUBLIC_FIREBASE_OPTIONS_STAGING`                 | FCM `initializeApp` options on staging
+| `NEXT_PUBLIC_FIREBASE_VAPID_KEY_STAGING`               | FCM vapid key on staging
+| `NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_PRODUCTION`         | Web3Auth and Google credentials (production)
+| `NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_STAGING`            | Web3Auth and Google credentials (staging)
+
+If you don't provide some of the variables, the corresponding features will be disabled in the UI.
 
 ### Running the app locally
 

package.json

@@ -66,7 +66,7 @@
     "@web3-onboard/keystone": "^2.3.7",
     "@web3-onboard/ledger": "2.3.2",
     "@web3-onboard/trezor": "^2.4.2",
-    "@web3-onboard/walletconnect": "^2.4.7",
+    "@web3-onboard/walletconnect": "^2.5.0",
     "@web3auth/mpc-core-kit": "^1.1.3",
     "blo": "^1.1.1",
     "bn.js": "^5.2.1",

src/components/common/AppStoreButton/index.tsx

@@ -6,7 +6,6 @@ import { MOBILE_APP_EVENTS, trackEvent } from '@/services/analytics'
 
 // App Store campaigns track the user interaction
 enum LINKS {
-  pairing = 'https://apps.apple.com/app/apple-store/id1515759131?pt=119497694&ct=Web%20App%20Connect&mt=8',
   footer = 'https://apps.apple.com/app/apple-store/id1515759131?pt=119497694&ct=Web%20App%20Footer&mt=8',
 }
 

src/components/common/ConnectWallet/styles.module.css

@@ -64,13 +64,6 @@
   border-bottom: 1px solid var(--color-border-light);
 }
 
-.pairingDetails {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-2);
-}
-
 .loginButton {
   min-height: 42px;
 }

src/components/common/WalletInfo/index.test.tsx

@@ -104,7 +104,7 @@ describe('WalletInfo', () => {
       />,
     )
 
-    expect(getByText('Delete Account')).toBeInTheDocument()
+    expect(getByText('Delete account')).toBeInTheDocument()
   })
 
   it('should not display a Delete Account on prod', () => {
@@ -122,7 +122,7 @@ describe('WalletInfo', () => {
       />,
     )
 
-    expect(queryByText('Delete Account')).not.toBeInTheDocument()
+    expect(queryByText('Delete account')).not.toBeInTheDocument()
   })
 
   it('should not display a Delete Account if not social login', () => {
@@ -140,7 +140,7 @@ describe('WalletInfo', () => {
       />,
     )
 
-    expect(queryByText('Delete Account')).not.toBeInTheDocument()
+    expect(queryByText('Delete account')).not.toBeInTheDocument()
   })
 
   it('should display an enable mfa button if mfa is not enabled', () => {

src/components/common/WalletInfo/index.tsx

@@ -59,9 +59,10 @@ export const WalletInfo = ({
   const isSocialLogin = isSocialLoginWallet(wallet.label)
 
   return (
-    <>
+    <Box className={css.container}>
       <Box className={css.accountContainer}>
         <ChainIndicator />
+
         <Box className={css.addressContainer}>
           {isSocialLogin ? (
             <>
@@ -108,10 +109,10 @@ export const WalletInfo = ({
 
       {!IS_PRODUCTION && isSocialLogin && (
         <Button onClick={resetAccount} variant="danger" size="small" fullWidth disableElevation>
-          Delete Account
+          Delete account
         </Button>
       )}
-    </>
+    </Box>
   )
 }
 

src/components/common/WalletInfo/styles.module.css

@@ -1,3 +1,10 @@
+.container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
 .accountContainer {
   width: 100%;
   margin-bottom: var(--space-1);

src/components/walletconnect/WcSessionList/WcNoSessions.tsx

@@ -21,9 +21,9 @@ const WcSampleDapps = ({ onUnload }: { onUnload: () => void }) => {
   return (
     <Typography variant="body2" display="flex" justifyContent="space-between" alignItems="center" mt={3}>
       {SAMPLE_DAPPS.map((item) => (
-        <Typography variant="body2" ml={1} key={item.url}>
+        <Typography variant="body2" key={item.url}>
           <ExternalLink href={item.url} noIcon px={1}>
-            <img src={item.icon} alt={item.name} width={32} height={32} />
+            <img src={item.icon} alt={item.name} width={32} height={32} style={{ marginRight: '0.5em' }} />
             {item.name}
           </ExternalLink>
         </Typography>

src/config/constants.ts

@@ -19,7 +19,6 @@ export const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN || ''
 export const BEAMER_ID = process.env.NEXT_PUBLIC_BEAMER_ID || ''
 
 // Wallets
-export const WC_BRIDGE = process.env.NEXT_PUBLIC_WC_BRIDGE || 'https://bridge.walletconnect.org'
 export const WC_PROJECT_ID = process.env.NEXT_PUBLIC_WC_PROJECT_ID || ''
 export const TREZOR_APP_URL = 'app.safe.global'
 export const TREZOR_EMAIL = '[email protected]'

src/hooks/wallets/consts.ts

@@ -3,7 +3,6 @@ export const enum WALLET_KEYS {
   WALLETCONNECT_V2 = 'WALLETCONNECT_V2',
   SOCIAL = 'SOCIAL_LOGIN',
   COINBASE = 'COINBASE',
-  PAIRING = 'PAIRING',
   LEDGER = 'LEDGER',
   TREZOR = 'TREZOR',
   KEYSTONE = 'KEYSTONE',
@@ -14,7 +13,6 @@ export const CGW_NAMES: { [key in WALLET_KEYS]: string | undefined } = {
   [WALLET_KEYS.INJECTED]: 'detectedwallet',
   [WALLET_KEYS.WALLETCONNECT_V2]: 'walletConnect_v2',
   [WALLET_KEYS.COINBASE]: 'coinbase',
-  [WALLET_KEYS.PAIRING]: 'safeMobile',
   [WALLET_KEYS.SOCIAL]: 'socialSigner',
   [WALLET_KEYS.LEDGER]: 'ledger',
   [WALLET_KEYS.TREZOR]: 'trezor',

src/hooks/wallets/useOnboard.ts

@@ -6,7 +6,6 @@ import useChains, { useCurrentChain } from '@/hooks/useChains'
 import ExternalStore from '@/services/ExternalStore'
 import { logError, Errors } from '@/services/exceptions'
 import { trackEvent, WALLET_EVENTS } from '@/services/analytics'
-import { useInitPairing } from '@/services/pairing/hooks'
 import { useAppSelector } from '@/store'
 import { type EnvState, selectRpc } from '@/store/settingsSlice'
 import { E2E_WALLET_NAME } from '@/tests/e2e-wallet'
@@ -93,21 +92,11 @@ const isMobile = () => /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
 // Detect injected wallet
 const hasInjectedWallet = () => typeof window !== 'undefined' && !!window?.ethereum
 
-// `connectWallet` is called when connecting/switching wallets and on pairing `connect` event (when prev. session connects)
-// This re-entrant lock prevents multiple `connectWallet`/tracking calls that would otherwise occur for pairing module
-let isConnecting = false
-
 // Wrapper that tracks/sets the last used wallet
 export const connectWallet = async (
   onboard: OnboardAPI,
   options?: Parameters<OnboardAPI['connectWallet']>[0],
 ): Promise<WalletState[] | undefined> => {
-  if (isConnecting) {
-    return
-  }
-
-  isConnecting = true
-
   // On mobile, automatically choose WalletConnect if there is no injected wallet
   if (!options && isMobile() && !hasInjectedWallet()) {
     options = {
@@ -121,13 +110,9 @@ export const connectWallet = async (
     wallets = await onboard.connectWallet(options)
   } catch (e) {
     logError(Errors._302, e)
-
-    isConnecting = false
     return
   }
 
-  isConnecting = false
-
   return wallets
 }
 
@@ -153,8 +138,6 @@ export const useInitOnboard = () => {
   const onboard = useStore()
   const customRpc = useAppSelector(selectRpc)
 
-  useInitPairing()
-
   useEffect(() => {
     if (configs.length > 0 && chain) {
       void initOnboard(configs, chain, customRpc)

src/hooks/wallets/wallets.ts

@@ -9,7 +9,6 @@ import ledgerModule from '@web3-onboard/ledger/dist/index'
 import trezorModule from '@web3-onboard/trezor'
 import walletConnect from '@web3-onboard/walletconnect'
 
-import pairingModule from '@/services/pairing/module'
 import e2eWalletModule from '@/tests/e2e-wallet'
 import { CGW_NAMES, WALLET_KEYS } from './consts'
 import MpcModule from '@/services/mpc/SocialLoginModule'
@@ -42,7 +41,6 @@ const WALLET_MODULES: { [key in WALLET_KEYS]: (chain: ChainInfo) => WalletInit }
   [WALLET_KEYS.INJECTED]: () => injectedWalletModule(),
   [WALLET_KEYS.WALLETCONNECT_V2]: (chain) => walletConnectV2(chain),
   [WALLET_KEYS.COINBASE]: () => coinbaseModule({ darkMode: prefersDarkMode() }),
-  [WALLET_KEYS.PAIRING]: () => pairingModule(),
   [WALLET_KEYS.SOCIAL]: (chain) => MpcModule(chain),
   [WALLET_KEYS.LEDGER]: () => ledgerModule(),
   [WALLET_KEYS.TREZOR]: () => trezorModule({ appUrl: TREZOR_APP_URL, email: TREZOR_EMAIL }),

src/pages/_app.tsx

@@ -43,7 +43,6 @@ import { WalletConnectProvider } from '@/services/walletconnect/WalletConnectCon
 import useABTesting from '@/services/tracking/useAbTesting'
 import { AbTest } from '@/services/tracking/abTesting'
 import { useNotificationTracking } from '@/components/settings/PushNotifications/hooks/useNotificationTracking'
-import MobilePairingModal from '@/services/pairing/QRModal'
 
 const GATEWAY_URL = IS_PRODUCTION || cgwDebugStorage.get() ? GATEWAY_URL_PRODUCTION : GATEWAY_URL_STAGING
 
@@ -126,8 +125,6 @@ const WebCoreApp = ({
 
           <Notifications />
 
-          <MobilePairingModal />
-
           <PasswordRecoveryModal />
         </AppProviders>
       </CacheProvider>

src/services/exceptions/ErrorCodes.ts

@@ -15,7 +15,6 @@ enum ErrorCodes {
   _106 = '106: Failed to get connected wallet',
 
   _302 = '302: Error connecting to the wallet',
-  _303 = '303: Error creating pairing session',
   _304 = '304: Error enabling MFA',
   _305 = '305: Error exporting account key',
   _306 = '306: Error logging in',