Analytics: track app version in all events

.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/Footer/index.tsx

@@ -1,5 +1,6 @@
 import type { ReactElement, ReactNode } from 'react'
-import { Typography } from '@mui/material'
+import { SvgIcon, Typography } from '@mui/material'
+import GitHubIcon from '@mui/icons-material/GitHub'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import css from './styles.module.css'
@@ -8,7 +9,7 @@ import packageJson from '../../../../package.json'
 import AppstoreButton from '../AppStoreButton'
 import ExternalLink from '../ExternalLink'
 import MUILink from '@mui/material/Link'
-import { IS_DEV, IS_OFFICIAL_HOST } from '@/config/constants'
+import { HELP_CENTER_URL, IS_DEV, IS_OFFICIAL_HOST } from '@/config/constants'
 
 const footerPages = [
   AppRoutes.welcome.index,
@@ -67,14 +68,19 @@ const Footer = (): ReactElement | null => {
             <li>
               <FooterLink href={getHref(AppRoutes.settings.index)}>Preferences</FooterLink>
             </li>
+            <li>
+              <ExternalLink href={HELP_CENTER_URL} noIcon>
+                Help
+              </ExternalLink>
+            </li>
           </>
         ) : (
           <li>{'This is an unofficial distribution of Safe{Wallet}'}</li>
         )}
 
         <li>
-          <ExternalLink href={`${packageJson.homepage}/releases/tag/v${packageJson.version}`}>
-            v{packageJson.version}
+          <ExternalLink href={`${packageJson.homepage}/releases/tag/v${packageJson.version}`} noIcon>
+            <SvgIcon component={GitHubIcon} inheritViewBox fontSize="inherit" sx={{ mr: 0.5 }} /> v{packageJson.version}
           </ExternalLink>
         </li>
         <li>

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/safe-apps/AppFrame/styles.module.css

@@ -4,6 +4,7 @@
 }
 
 .iframe {
+  display: block;
   height: 100%;
   width: 100%;
   overflow: auto;

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',