From 6753e3d210a0bd7fd2b32df32528468c0bd8b569 Mon Sep 17 00:00:00 2001
From: Kathy Luo <kathyluo18@gmail.com>
Date: Mon, 27 Jan 2025 12:57:35 +0100
Subject: [PATCH 01/10] feat: add demo mode entry in onboarding screen

---
 src/app/actions.ts                 | 14 +++++++++++
 src/app/reducers.ts                |  7 ++++++
 src/app/selectors.ts               | 16 ++++++++++++
 src/navigator/NavigatorWrapper.tsx | 39 +++++++++++++++++++++---------
 src/onboarding/welcome/Welcome.tsx | 36 ++++++++++++++++++++++++---
 src/redux/migrations.ts            |  7 ++++++
 src/redux/store.test.ts            |  3 ++-
 src/redux/store.ts                 |  2 +-
 src/statsig/constants.ts           |  7 ++++++
 src/statsig/types.ts               |  1 +
 src/web3/selectors.ts              | 16 +++++++++++-
 test/RootStateSchema.json          |  4 +++
 test/schemas.ts                    | 14 ++++++++++-
 13 files changed, 147 insertions(+), 19 deletions(-)

diff --git a/src/app/actions.ts b/src/app/actions.ts
index a3fb4fb41c2..74e2499b41a 100644
--- a/src/app/actions.ts
+++ b/src/app/actions.ts
@@ -34,6 +34,7 @@ export enum Actions {
   IN_APP_REVIEW_REQUESTED = 'APP/IN_APP_REVIEW_REQUESTED',
   NOTIFICATION_SPOTLIGHT_SEEN = 'APP/NOTIFICATION_SPOTLIGHT_SEEN',
   TOGGLE_HIDE_BALANCES = 'APP/TOGGLE_HIDE_BALANCES',
+  DEMO_MODE_TOGGLED = 'APP/DEMO_MODE_TOGGLED',
 }
 
 export interface SetAppState {
@@ -157,6 +158,11 @@ interface ToggleHideBalances {
   type: Actions.TOGGLE_HIDE_BALANCES
 }
 
+interface DemoModeToggled {
+  type: Actions.DEMO_MODE_TOGGLED
+  enabled: boolean
+}
+
 export type ActionTypes =
   | SetAppState
   | SetLoggedIn
@@ -182,6 +188,7 @@ export type ActionTypes =
   | NotificationSpotlightSeen
   | ToggleHideBalances
   | DeepLinkDeferred
+  | DemoModeToggled
 
 export const setAppState = (state: string): SetAppState => ({
   type: Actions.SET_APP_STATE,
@@ -340,3 +347,10 @@ export const toggleHideBalances = (): ToggleHideBalances => {
     type: Actions.TOGGLE_HIDE_BALANCES,
   }
 }
+
+export const demoModeToggled = (enabled: boolean): DemoModeToggled => {
+  return {
+    type: Actions.DEMO_MODE_TOGGLED,
+    enabled,
+  }
+}
diff --git a/src/app/reducers.ts b/src/app/reducers.ts
index c250f9b26b7..905e0b952d5 100644
--- a/src/app/reducers.ts
+++ b/src/app/reducers.ts
@@ -48,6 +48,7 @@ interface State {
   showNotificationSpotlight: boolean
   hideBalances: boolean
   pendingDeepLinks: PendingDeepLink[]
+  demoModeEnabled: boolean
 }
 
 interface PendingDeepLink {
@@ -89,6 +90,7 @@ const initialState = {
   showNotificationSpotlight: false,
   hideBalances: false,
   pendingDeepLinks: [],
+  demoModeEnabled: false,
 }
 
 function getPersistedDeepLinks(deepLinks: PendingDeepLink[]) {
@@ -257,6 +259,11 @@ export const appReducer = (
           (pendingDeepLink) => pendingDeepLink.url !== action.deepLink
         ),
       }
+    case Actions.DEMO_MODE_TOGGLED:
+      return {
+        ...state,
+        demoModeEnabled: action.enabled,
+      }
     default:
       return state
   }
diff --git a/src/app/selectors.ts b/src/app/selectors.ts
index 4d245fc13ea..531ef12b14f 100644
--- a/src/app/selectors.ts
+++ b/src/app/selectors.ts
@@ -1,4 +1,8 @@
+import { createSelector } from 'reselect'
 import { RootState } from 'src/redux/reducers'
+import { getDynamicConfigParams } from 'src/statsig'
+import { DynamicConfigs } from 'src/statsig/constants'
+import { StatsigDynamicConfigs } from 'src/statsig/types'
 
 export const getRequirePinOnAppOpen = (state: RootState) => {
   return state.app.requirePinOnAppOpen
@@ -77,3 +81,15 @@ export const showNotificationSpotlightSelector = (state: RootState) =>
 export const hideWalletBalancesSelector = (state: RootState) => state.app.hideBalances
 
 export const pendingDeepLinkSelector = (state: RootState) => state.app.pendingDeepLinks[0] ?? null
+
+export const demoModeEnabledSelector = createSelector(
+  [
+    () =>
+      getDynamicConfigParams(DynamicConfigs[StatsigDynamicConfigs.DEMO_MODE_CONFIG])
+        .enabledInOnboarding,
+    (state: RootState) => state.app.demoModeEnabled,
+  ],
+  (dynamicConfigEnabled, demoModeToggledOn) => {
+    return dynamicConfigEnabled && demoModeToggledOn
+  }
+)
diff --git a/src/navigator/NavigatorWrapper.tsx b/src/navigator/NavigatorWrapper.tsx
index 8607a720407..19e69a883bb 100644
--- a/src/navigator/NavigatorWrapper.tsx
+++ b/src/navigator/NavigatorWrapper.tsx
@@ -6,12 +6,13 @@ import { SeverityLevel } from '@sentry/types'
 import * as React from 'react'
 import { StyleSheet, View } from 'react-native'
 import DeviceInfo from 'react-native-device-info'
+import LinearGradient from 'react-native-linear-gradient'
 import ShakeForSupport from 'src/account/ShakeForSupport'
 import AlertBanner from 'src/alert/AlertBanner'
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import UpgradeScreen from 'src/app/UpgradeScreen'
 import { activeScreenChanged } from 'src/app/actions'
-import { getAppLocked } from 'src/app/selectors'
+import { demoModeEnabledSelector, getAppLocked } from 'src/app/selectors'
 import { useDeepLinks } from 'src/app/useDeepLinks'
 import { DEV_RESTORE_NAV_STATE_ON_RELOAD } from 'src/config'
 import JumpstartClaimStatusToasts from 'src/jumpstart/JumpstartClaimStatusToasts'
@@ -30,6 +31,7 @@ import { getDynamicConfigParams } from 'src/statsig'
 import { DynamicConfigs } from 'src/statsig/constants'
 import { StatsigDynamicConfigs } from 'src/statsig/types'
 import appTheme from 'src/styles/appTheme'
+import Colors from 'src/styles/colors'
 import Logger from 'src/utils/Logger'
 import { userInSanctionedCountrySelector } from 'src/utils/countryFeatures'
 import { isVersionBelowMinimum } from 'src/utils/versionCheck'
@@ -62,6 +64,7 @@ export const NavigatorWrapper = () => {
   )
   const routeNameRef = React.useRef<string>()
   const inSanctionedCountry = useSelector(userInSanctionedCountrySelector)
+  const demoModeEnabled = useSelector(demoModeEnabledSelector)
 
   const dispatch = useDispatch()
 
@@ -174,16 +177,26 @@ export const NavigatorWrapper = () => {
       initialState={initialState}
       theme={appTheme}
     >
-      <View style={styles.container}>
-        <Navigator />
-        <HooksPreviewModeBanner />
-        {(appLocked || updateRequired) && (
-          <View style={styles.locked}>{updateRequired ? <UpgradeScreen /> : <PincodeLock />}</View>
-        )}
-        <AlertBanner />
-        <ShakeForSupport />
-        <JumpstartClaimStatusToasts />
-      </View>
+      <LinearGradient
+        colors={[Colors.brandGradientLeft, Colors.brandGradientRight]}
+        locations={[0, 0.8915]}
+        useAngle={true}
+        angle={90}
+        style={styles.linearGradientBackground}
+      >
+        <View style={[styles.container, { borderWidth: demoModeEnabled ? 3 : 0 }]}>
+          <Navigator />
+          <HooksPreviewModeBanner />
+          {(appLocked || updateRequired) && (
+            <View style={styles.locked}>
+              {updateRequired ? <UpgradeScreen /> : <PincodeLock />}
+            </View>
+          )}
+          <AlertBanner />
+          <ShakeForSupport />
+          <JumpstartClaimStatusToasts />
+        </View>
+      </LinearGradient>
     </NavigationContainer>
   )
 }
@@ -194,6 +207,10 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     alignItems: 'stretch',
     justifyContent: 'flex-start',
+    borderColor: 'transparent',
+  },
+  linearGradientBackground: {
+    flex: 1,
   },
   locked: {
     position: 'absolute',
diff --git a/src/onboarding/welcome/Welcome.tsx b/src/onboarding/welcome/Welcome.tsx
index a8023b24348..6212604eedd 100644
--- a/src/onboarding/welcome/Welcome.tsx
+++ b/src/onboarding/welcome/Welcome.tsx
@@ -1,23 +1,30 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ImageBackground, StyleSheet, View } from 'react-native'
+import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { chooseCreateAccount, chooseRestoreAccount } from 'src/account/actions'
 import { recoveringFromStoreWipeSelector } from 'src/account/selectors'
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import { OnboardingEvents } from 'src/analytics/Events'
+import { demoModeToggled } from 'src/app/actions'
+import { demoModeEnabledSelector } from 'src/app/selectors'
 import Button, { BtnSizes, BtnTypes } from 'src/components/Button'
 import { welcomeBackground } from 'src/images/Images'
 import WelcomeLogo from 'src/images/WelcomeLogo'
 import { nuxNavigationOptions } from 'src/navigator/Headers'
-import { navigate } from 'src/navigator/NavigationService'
+import { navigate, navigateHome } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import LanguageButton from 'src/onboarding/LanguageButton'
 import { firstOnboardingScreen } from 'src/onboarding/steps'
 import { useDispatch, useSelector } from 'src/redux/hooks'
-import { patchUpdateStatsigUser } from 'src/statsig'
+import { getDynamicConfigParams, patchUpdateStatsigUser } from 'src/statsig'
+import { DynamicConfigs } from 'src/statsig/constants'
+import { StatsigDynamicConfigs } from 'src/statsig/types'
 import { Spacing } from 'src/styles/styles'
 
+const DEMO_MODE_LONG_PRESS_DELAY_MS = 5_000
+
 export default function Welcome() {
   const { t } = useTranslation()
   const dispatch = useDispatch()
@@ -25,6 +32,21 @@ export default function Welcome() {
   const startOnboardingTime = useSelector((state) => state.account.startOnboardingTime)
   const insets = useSafeAreaInsets()
   const recoveringFromStoreWipe = useSelector(recoveringFromStoreWipeSelector)
+  const demoModeEnabled = useSelector(demoModeEnabledSelector)
+
+  const { enabledInOnboarding } = getDynamicConfigParams(
+    DynamicConfigs[StatsigDynamicConfigs.DEMO_MODE_CONFIG]
+  )
+
+  useEffect(() => {
+    if (demoModeEnabled) {
+      navigateHome()
+    }
+  }, [demoModeEnabled])
+
+  const onActivateDemoMode = () => {
+    dispatch(demoModeToggled(true))
+  }
 
   const startOnboarding = () => {
     navigate(
@@ -65,7 +87,13 @@ export default function Welcome() {
     <SafeAreaView style={styles.container}>
       <ImageBackground source={welcomeBackground} resizeMode="stretch" style={styles.image}>
         <View style={styles.contentContainer}>
-          <WelcomeLogo />
+          <TouchableWithoutFeedback
+            disabled={!enabledInOnboarding}
+            delayLongPress={DEMO_MODE_LONG_PRESS_DELAY_MS}
+            onLongPress={onActivateDemoMode}
+          >
+            <WelcomeLogo />
+          </TouchableWithoutFeedback>
         </View>
         <View style={{ ...styles.buttonView, marginBottom: Math.max(0, 40 - insets.bottom) }}>
           <Button
diff --git a/src/redux/migrations.ts b/src/redux/migrations.ts
index ac0bc38bc3c..34557aa149e 100644
--- a/src/redux/migrations.ts
+++ b/src/redux/migrations.ts
@@ -1982,4 +1982,11 @@ export const migrations = {
     ...state,
     app: _.omit(state.app, 'multichainBetaStatus'),
   }),
+  239: (state: any) => ({
+    ...state,
+    app: {
+      ...state.app,
+      demoModeEnabled: false,
+    },
+  }),
 }
diff --git a/src/redux/store.test.ts b/src/redux/store.test.ts
index 063230af68e..7142a7c7723 100644
--- a/src/redux/store.test.ts
+++ b/src/redux/store.test.ts
@@ -143,7 +143,7 @@ describe('store state', () => {
       {
         "_persist": {
           "rehydrated": true,
-          "version": 238,
+          "version": 239,
         },
         "account": {
           "acceptedTerms": false,
@@ -182,6 +182,7 @@ describe('store state', () => {
           "celoEducationUri": null,
           "celoNews": {},
           "coinbasePayEnabled": false,
+          "demoModeEnabled": false,
           "fiatConnectCashInEnabled": false,
           "fiatConnectCashOutEnabled": false,
           "googleMobileServicesAvailable": undefined,
diff --git a/src/redux/store.ts b/src/redux/store.ts
index 0edcead8a9d..7a6e09e6490 100644
--- a/src/redux/store.ts
+++ b/src/redux/store.ts
@@ -26,7 +26,7 @@ const persistConfig: PersistConfig<ReducersRootState> = {
   key: 'root',
   // default is -1, increment as we make migrations
   // See https://github.com/valora-inc/wallet/tree/main/WALLET.md#redux-state-migration
-  version: 238,
+  version: 239,
   keyPrefix: `reduxStore-`, // the redux-persist default is `persist:` which doesn't work with some file systems.
   storage: FSStorage(),
   blacklist: ['networkInfo', 'alert', 'imports', 'keylessBackup', transactionFeedV2Api.reducerPath],
diff --git a/src/statsig/constants.ts b/src/statsig/constants.ts
index c9fa551058f..abc04e281b6 100644
--- a/src/statsig/constants.ts
+++ b/src/statsig/constants.ts
@@ -122,6 +122,13 @@ export const DynamicConfigs = {
       supportedAppIds: [] as string[],
     },
   },
+  [StatsigDynamicConfigs.DEMO_MODE_CONFIG]: {
+    configName: StatsigDynamicConfigs.DEMO_MODE_CONFIG,
+    defaultValues: {
+      enabledInOnboarding: false,
+      demoWalletAddress: '',
+    },
+  },
 } satisfies {
   [key in StatsigDynamicConfigs | StatsigMultiNetworkDynamicConfig]: {
     configName: key
diff --git a/src/statsig/types.ts b/src/statsig/types.ts
index af654b58e9e..3960541e996 100644
--- a/src/statsig/types.ts
+++ b/src/statsig/types.ts
@@ -8,6 +8,7 @@ export enum StatsigDynamicConfigs {
   NFT_CELEBRATION_CONFIG = 'nft_celebration_config',
   APP_CONFIG = 'app_config',
   EARN_CONFIG = 'earn_config',
+  DEMO_MODE_CONFIG = 'demo_mode_config',
 }
 
 // Separating into different enum from StatsigDynamicConfigs to allow for more strict typing
diff --git a/src/web3/selectors.ts b/src/web3/selectors.ts
index 8beafe25daa..728784ff339 100644
--- a/src/web3/selectors.ts
+++ b/src/web3/selectors.ts
@@ -1,4 +1,9 @@
+import { createSelector } from 'reselect'
+import { demoModeEnabledSelector } from 'src/app/selectors'
 import { RootState } from 'src/redux/reducers'
+import { getDynamicConfigParams } from 'src/statsig'
+import { DynamicConfigs } from 'src/statsig/constants'
+import { StatsigDynamicConfigs } from 'src/statsig/types'
 
 /**
  * Get the "raw" (non-lower-cased) version of the wallet address in redux state.
@@ -12,6 +17,15 @@ import { RootState } from 'src/redux/reducers'
  */
 export const rawWalletAddressSelector = (state: RootState) => state.web3.account ?? null
 
-export const walletAddressSelector = (state: RootState) => state.web3.account?.toLowerCase() ?? null
+const demoModeAddressSelector = () =>
+  getDynamicConfigParams(DynamicConfigs[StatsigDynamicConfigs.DEMO_MODE_CONFIG]).demoWalletAddress
+
+export const walletAddressSelector = createSelector(
+  [rawWalletAddressSelector, demoModeEnabledSelector, demoModeAddressSelector],
+  (rawAddress, demoModeEnabled, demoModeAddress) => {
+    return (demoModeEnabled ? demoModeAddress : rawAddress)?.toLowerCase() ?? null
+  }
+)
+
 // @deprecated please use walletAddressSelector instead.
 export const currentAccountSelector = walletAddressSelector
diff --git a/test/RootStateSchema.json b/test/RootStateSchema.json
index 8b442dabe76..783bc5a51bf 100644
--- a/test/RootStateSchema.json
+++ b/test/RootStateSchema.json
@@ -4709,6 +4709,9 @@
                 "coinbasePayEnabled": {
                     "type": "boolean"
                 },
+                "demoModeEnabled": {
+                    "type": "boolean"
+                },
                 "fiatConnectCashInEnabled": {
                     "type": "boolean"
                 },
@@ -4828,6 +4831,7 @@
                 "celoEducationUri",
                 "celoNews",
                 "coinbasePayEnabled",
+                "demoModeEnabled",
                 "fiatConnectCashInEnabled",
                 "fiatConnectCashOutEnabled",
                 "hapticFeedbackEnabled",
diff --git a/test/schemas.ts b/test/schemas.ts
index ed578df6074..f5c7fcb8a5b 100644
--- a/test/schemas.ts
+++ b/test/schemas.ts
@@ -3594,6 +3594,18 @@ export const v238Schema = {
   app: _.omit(v237Schema.app, 'multichainBetaStatus'),
 }
 
+export const v239Schema = {
+  ...v238Schema,
+  _persist: {
+    ...v238Schema._persist,
+    version: 239,
+  },
+  app: {
+    ...v238Schema.app,
+    demoModeEnabled: false,
+  },
+}
+
 export function getLatestSchema(): Partial<RootState> {
-  return v238Schema as Partial<RootState>
+  return v239Schema as Partial<RootState>
 }

From abd6b706b24c6fd79d4290b26a4ef2cc69fd085c Mon Sep 17 00:00:00 2001
From: Kathy Luo <kathyluo18@gmail.com>
Date: Mon, 27 Jan 2025 13:07:39 +0100
Subject: [PATCH 02/10] chore: add test

---
 src/onboarding/welcome/Welcome.test.tsx | 42 +++++++++++++++++++++++--
 src/onboarding/welcome/Welcome.tsx      |  1 +
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/onboarding/welcome/Welcome.test.tsx b/src/onboarding/welcome/Welcome.test.tsx
index 47d2b019655..b38564150b5 100644
--- a/src/onboarding/welcome/Welcome.test.tsx
+++ b/src/onboarding/welcome/Welcome.test.tsx
@@ -4,22 +4,27 @@ import { Provider } from 'react-redux'
 import { chooseCreateAccount, chooseRestoreAccount } from 'src/account/actions'
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import { OnboardingEvents } from 'src/analytics/Events'
-import { navigate } from 'src/navigator/NavigationService'
+import { demoModeToggled } from 'src/app/actions'
+import { navigate, navigateHome } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import { firstOnboardingScreen } from 'src/onboarding/steps'
 import Welcome from 'src/onboarding/welcome/Welcome'
-import { patchUpdateStatsigUser } from 'src/statsig'
+import { getDynamicConfigParams, patchUpdateStatsigUser } from 'src/statsig'
+import { DynamicConfigs } from 'src/statsig/constants'
+import { StatsigDynamicConfigs } from 'src/statsig/types'
 import { createMockStore } from 'test/utils'
 
 jest.mock('src/onboarding/steps')
 jest.mock('src/statsig', () => ({
   patchUpdateStatsigUser: jest.fn(),
+  getDynamicConfigParams: jest.fn(),
 }))
 
 describe('Welcome', () => {
   beforeAll(() => {
     jest.spyOn(Date, 'now').mockImplementation(() => 123)
     jest.mocked(firstOnboardingScreen).mockReturnValue(Screens.PincodeSet)
+    jest.mocked(getDynamicConfigParams).mockReturnValue({})
   })
 
   beforeEach(() => {
@@ -129,5 +134,38 @@ describe('Welcome', () => {
         expect(AppAnalytics.track).toHaveBeenCalledWith(event)
       }
     )
+    it('dispatches the correct actions to launch demo mode', async () => {
+      jest.mocked(getDynamicConfigParams).mockImplementation((configName) => {
+        if (configName === DynamicConfigs[StatsigDynamicConfigs.DEMO_MODE_CONFIG]) {
+          return { enabledInOnboarding: true }
+        }
+        throw new Error('Unexpected config name')
+      })
+
+      const store = createMockStore()
+      const { getByTestId, rerender } = render(
+        <Provider store={store}>
+          <Welcome />
+        </Provider>
+      )
+
+      fireEvent(getByTestId('Welcome/ActivateDemoMode'), 'onLongPress')
+
+      expect(store.getActions()).toEqual([demoModeToggled(true)])
+      await waitFor(() => expect(navigateHome).not.toHaveBeenCalled())
+
+      rerender(
+        <Provider
+          store={createMockStore({
+            app: {
+              demoModeEnabled: true,
+            },
+          })}
+        >
+          <Welcome />
+        </Provider>
+      )
+      await waitFor(() => expect(navigateHome).toHaveBeenCalled())
+    })
   })
 })
diff --git a/src/onboarding/welcome/Welcome.tsx b/src/onboarding/welcome/Welcome.tsx
index 6212604eedd..7543487572a 100644
--- a/src/onboarding/welcome/Welcome.tsx
+++ b/src/onboarding/welcome/Welcome.tsx
@@ -91,6 +91,7 @@ export default function Welcome() {
             disabled={!enabledInOnboarding}
             delayLongPress={DEMO_MODE_LONG_PRESS_DELAY_MS}
             onLongPress={onActivateDemoMode}
+            testID="Welcome/ActivateDemoMode"
           >
             <WelcomeLogo />
           </TouchableWithoutFeedback>

From 197402c80ce9ef9cc51f29daa69476bb10d7de25 Mon Sep 17 00:00:00 2001
From: Kathy Luo <kathyluo18@gmail.com>
Date: Tue, 28 Jan 2025 10:12:39 +0100
Subject: [PATCH 03/10] chore: move to web3 store

---
 src/app/actions.ts                 | 14 --------------
 src/app/reducers.ts                |  7 -------
 src/app/selectors.ts               | 16 ----------------
 src/navigator/NavigatorWrapper.tsx |  3 ++-
 src/onboarding/welcome/Welcome.tsx |  2 +-
 src/web3/actions.ts                | 15 ++++++++++++++-
 src/web3/reducer.ts                |  7 +++++++
 src/web3/selectors.ts              | 22 ++++++++++++++++++----
 8 files changed, 42 insertions(+), 44 deletions(-)

diff --git a/src/app/actions.ts b/src/app/actions.ts
index 74e2499b41a..a3fb4fb41c2 100644
--- a/src/app/actions.ts
+++ b/src/app/actions.ts
@@ -34,7 +34,6 @@ export enum Actions {
   IN_APP_REVIEW_REQUESTED = 'APP/IN_APP_REVIEW_REQUESTED',
   NOTIFICATION_SPOTLIGHT_SEEN = 'APP/NOTIFICATION_SPOTLIGHT_SEEN',
   TOGGLE_HIDE_BALANCES = 'APP/TOGGLE_HIDE_BALANCES',
-  DEMO_MODE_TOGGLED = 'APP/DEMO_MODE_TOGGLED',
 }
 
 export interface SetAppState {
@@ -158,11 +157,6 @@ interface ToggleHideBalances {
   type: Actions.TOGGLE_HIDE_BALANCES
 }
 
-interface DemoModeToggled {
-  type: Actions.DEMO_MODE_TOGGLED
-  enabled: boolean
-}
-
 export type ActionTypes =
   | SetAppState
   | SetLoggedIn
@@ -188,7 +182,6 @@ export type ActionTypes =
   | NotificationSpotlightSeen
   | ToggleHideBalances
   | DeepLinkDeferred
-  | DemoModeToggled
 
 export const setAppState = (state: string): SetAppState => ({
   type: Actions.SET_APP_STATE,
@@ -347,10 +340,3 @@ export const toggleHideBalances = (): ToggleHideBalances => {
     type: Actions.TOGGLE_HIDE_BALANCES,
   }
 }
-
-export const demoModeToggled = (enabled: boolean): DemoModeToggled => {
-  return {
-    type: Actions.DEMO_MODE_TOGGLED,
-    enabled,
-  }
-}
diff --git a/src/app/reducers.ts b/src/app/reducers.ts
index 905e0b952d5..c250f9b26b7 100644
--- a/src/app/reducers.ts
+++ b/src/app/reducers.ts
@@ -48,7 +48,6 @@ interface State {
   showNotificationSpotlight: boolean
   hideBalances: boolean
   pendingDeepLinks: PendingDeepLink[]
-  demoModeEnabled: boolean
 }
 
 interface PendingDeepLink {
@@ -90,7 +89,6 @@ const initialState = {
   showNotificationSpotlight: false,
   hideBalances: false,
   pendingDeepLinks: [],
-  demoModeEnabled: false,
 }
 
 function getPersistedDeepLinks(deepLinks: PendingDeepLink[]) {
@@ -259,11 +257,6 @@ export const appReducer = (
           (pendingDeepLink) => pendingDeepLink.url !== action.deepLink
         ),
       }
-    case Actions.DEMO_MODE_TOGGLED:
-      return {
-        ...state,
-        demoModeEnabled: action.enabled,
-      }
     default:
       return state
   }
diff --git a/src/app/selectors.ts b/src/app/selectors.ts
index 531ef12b14f..4d245fc13ea 100644
--- a/src/app/selectors.ts
+++ b/src/app/selectors.ts
@@ -1,8 +1,4 @@
-import { createSelector } from 'reselect'
 import { RootState } from 'src/redux/reducers'
-import { getDynamicConfigParams } from 'src/statsig'
-import { DynamicConfigs } from 'src/statsig/constants'
-import { StatsigDynamicConfigs } from 'src/statsig/types'
 
 export const getRequirePinOnAppOpen = (state: RootState) => {
   return state.app.requirePinOnAppOpen
@@ -81,15 +77,3 @@ export const showNotificationSpotlightSelector = (state: RootState) =>
 export const hideWalletBalancesSelector = (state: RootState) => state.app.hideBalances
 
 export const pendingDeepLinkSelector = (state: RootState) => state.app.pendingDeepLinks[0] ?? null
-
-export const demoModeEnabledSelector = createSelector(
-  [
-    () =>
-      getDynamicConfigParams(DynamicConfigs[StatsigDynamicConfigs.DEMO_MODE_CONFIG])
-        .enabledInOnboarding,
-    (state: RootState) => state.app.demoModeEnabled,
-  ],
-  (dynamicConfigEnabled, demoModeToggledOn) => {
-    return dynamicConfigEnabled && demoModeToggledOn
-  }
-)
diff --git a/src/navigator/NavigatorWrapper.tsx b/src/navigator/NavigatorWrapper.tsx
index 19e69a883bb..2539a13d940 100644
--- a/src/navigator/NavigatorWrapper.tsx
+++ b/src/navigator/NavigatorWrapper.tsx
@@ -12,7 +12,7 @@ import AlertBanner from 'src/alert/AlertBanner'
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import UpgradeScreen from 'src/app/UpgradeScreen'
 import { activeScreenChanged } from 'src/app/actions'
-import { demoModeEnabledSelector, getAppLocked } from 'src/app/selectors'
+import { getAppLocked } from 'src/app/selectors'
 import { useDeepLinks } from 'src/app/useDeepLinks'
 import { DEV_RESTORE_NAV_STATE_ON_RELOAD } from 'src/config'
 import JumpstartClaimStatusToasts from 'src/jumpstart/JumpstartClaimStatusToasts'
@@ -35,6 +35,7 @@ import Colors from 'src/styles/colors'
 import Logger from 'src/utils/Logger'
 import { userInSanctionedCountrySelector } from 'src/utils/countryFeatures'
 import { isVersionBelowMinimum } from 'src/utils/versionCheck'
+import { demoModeEnabledSelector } from 'src/web3/selectors'
 
 // This uses RN Navigation's experimental nav state persistence
 // to improve the hot reloading experience when in DEV mode
diff --git a/src/onboarding/welcome/Welcome.tsx b/src/onboarding/welcome/Welcome.tsx
index 7543487572a..d5c06b37167 100644
--- a/src/onboarding/welcome/Welcome.tsx
+++ b/src/onboarding/welcome/Welcome.tsx
@@ -8,7 +8,6 @@ import { recoveringFromStoreWipeSelector } from 'src/account/selectors'
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import { OnboardingEvents } from 'src/analytics/Events'
 import { demoModeToggled } from 'src/app/actions'
-import { demoModeEnabledSelector } from 'src/app/selectors'
 import Button, { BtnSizes, BtnTypes } from 'src/components/Button'
 import { welcomeBackground } from 'src/images/Images'
 import WelcomeLogo from 'src/images/WelcomeLogo'
@@ -22,6 +21,7 @@ import { getDynamicConfigParams, patchUpdateStatsigUser } from 'src/statsig'
 import { DynamicConfigs } from 'src/statsig/constants'
 import { StatsigDynamicConfigs } from 'src/statsig/types'
 import { Spacing } from 'src/styles/styles'
+import { demoModeEnabledSelector } from 'src/web3/selectors'
 
 const DEMO_MODE_LONG_PRESS_DELAY_MS = 5_000
 
diff --git a/src/web3/actions.ts b/src/web3/actions.ts
index c1407a7adb7..9f8a86cfe9d 100644
--- a/src/web3/actions.ts
+++ b/src/web3/actions.ts
@@ -1,5 +1,6 @@
 export enum Actions {
   SET_ACCOUNT = 'WEB3/SET_ACCOUNT',
+  DEMO_MODE_TOGGLED = 'WEB3/DEMO_MODE_TOGGLED',
 }
 
 export interface SetAccountAction {
@@ -7,7 +8,12 @@ export interface SetAccountAction {
   address: string
 }
 
-export type ActionTypes = SetAccountAction
+interface DemoModeToggled {
+  type: Actions.DEMO_MODE_TOGGLED
+  enabled: boolean
+}
+
+export type ActionTypes = SetAccountAction | DemoModeToggled
 
 export const setAccount = (address: string): SetAccountAction => {
   return {
@@ -15,3 +21,10 @@ export const setAccount = (address: string): SetAccountAction => {
     address: address.toLowerCase(),
   }
 }
+
+export const demoModeToggled = (enabled: boolean): DemoModeToggled => {
+  return {
+    type: Actions.DEMO_MODE_TOGGLED,
+    enabled,
+  }
+}
diff --git a/src/web3/reducer.ts b/src/web3/reducer.ts
index ead80e03862..66fec0896b0 100644
--- a/src/web3/reducer.ts
+++ b/src/web3/reducer.ts
@@ -4,10 +4,12 @@ import { ActionTypes, Actions } from 'src/web3/actions'
 
 interface State {
   account: string | null // this is the wallet address (EOA)
+  demoModeEnabled: boolean
 }
 
 const initialState: State = {
   account: null,
+  demoModeEnabled: false,
 }
 
 export const reducer = (
@@ -27,6 +29,11 @@ export const reducer = (
         ...state,
         account: action.address.toLowerCase(),
       }
+    case Actions.DEMO_MODE_TOGGLED:
+      return {
+        ...state,
+        demoModeEnabled: action.enabled,
+      }
     default:
       return state
   }
diff --git a/src/web3/selectors.ts b/src/web3/selectors.ts
index 728784ff339..05e13ff8904 100644
--- a/src/web3/selectors.ts
+++ b/src/web3/selectors.ts
@@ -1,5 +1,4 @@
 import { createSelector } from 'reselect'
-import { demoModeEnabledSelector } from 'src/app/selectors'
 import { RootState } from 'src/redux/reducers'
 import { getDynamicConfigParams } from 'src/statsig'
 import { DynamicConfigs } from 'src/statsig/constants'
@@ -17,11 +16,26 @@ import { StatsigDynamicConfigs } from 'src/statsig/types'
  */
 export const rawWalletAddressSelector = (state: RootState) => state.web3.account ?? null
 
-const demoModeAddressSelector = () =>
-  getDynamicConfigParams(DynamicConfigs[StatsigDynamicConfigs.DEMO_MODE_CONFIG]).demoWalletAddress
+export const demoModeEnabledSelector = createSelector(
+  [
+    () =>
+      getDynamicConfigParams(DynamicConfigs[StatsigDynamicConfigs.DEMO_MODE_CONFIG])
+        ?.enabledInOnboarding,
+    (state: RootState) => state.web3.demoModeEnabled,
+  ],
+  (dynamicConfigEnabled, demoModeToggledOn) => {
+    return dynamicConfigEnabled && demoModeToggledOn
+  }
+)
 
 export const walletAddressSelector = createSelector(
-  [rawWalletAddressSelector, demoModeEnabledSelector, demoModeAddressSelector],
+  [
+    rawWalletAddressSelector,
+    demoModeEnabledSelector,
+    () =>
+      getDynamicConfigParams(DynamicConfigs[StatsigDynamicConfigs.DEMO_MODE_CONFIG])
+        ?.demoWalletAddress,
+  ],
   (rawAddress, demoModeEnabled, demoModeAddress) => {
     return (demoModeEnabled ? demoModeAddress : rawAddress)?.toLowerCase() ?? null
   }

From f871497cb126c4516b53dd6f60e363cea6b091c0 Mon Sep 17 00:00:00 2001
From: Kathy Luo <kathyluo18@gmail.com>
Date: Tue, 28 Jan 2025 10:13:51 +0100
Subject: [PATCH 04/10] fix: migrations

---
 src/redux/migrations.ts   |  4 ++--
 src/redux/store.test.ts   |  2 +-
 test/RootStateSchema.json | 10 +++++-----
 test/schemas.ts           |  4 ++--
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/redux/migrations.ts b/src/redux/migrations.ts
index 34557aa149e..f2e460abd4b 100644
--- a/src/redux/migrations.ts
+++ b/src/redux/migrations.ts
@@ -1984,8 +1984,8 @@ export const migrations = {
   }),
   239: (state: any) => ({
     ...state,
-    app: {
-      ...state.app,
+    web3: {
+      ...state.web3,
       demoModeEnabled: false,
     },
   }),
diff --git a/src/redux/store.test.ts b/src/redux/store.test.ts
index 7142a7c7723..8d824adb067 100644
--- a/src/redux/store.test.ts
+++ b/src/redux/store.test.ts
@@ -182,7 +182,6 @@ describe('store state', () => {
           "celoEducationUri": null,
           "celoNews": {},
           "coinbasePayEnabled": false,
-          "demoModeEnabled": false,
           "fiatConnectCashInEnabled": false,
           "fiatConnectCashOutEnabled": false,
           "googleMobileServicesAvailable": undefined,
@@ -383,6 +382,7 @@ describe('store state', () => {
         },
         "web3": {
           "account": "0x0000000000000000000000000000000000007E57",
+          "demoModeEnabled": false,
         },
       }
     `)
diff --git a/test/RootStateSchema.json b/test/RootStateSchema.json
index 783bc5a51bf..56bdf10f790 100644
--- a/test/RootStateSchema.json
+++ b/test/RootStateSchema.json
@@ -4709,9 +4709,6 @@
                 "coinbasePayEnabled": {
                     "type": "boolean"
                 },
-                "demoModeEnabled": {
-                    "type": "boolean"
-                },
                 "fiatConnectCashInEnabled": {
                     "type": "boolean"
                 },
@@ -4831,7 +4828,6 @@
                 "celoEducationUri",
                 "celoNews",
                 "coinbasePayEnabled",
-                "demoModeEnabled",
                 "fiatConnectCashInEnabled",
                 "fiatConnectCashOutEnabled",
                 "hapticFeedbackEnabled",
@@ -5893,10 +5889,14 @@
                         "null",
                         "string"
                     ]
+                },
+                "demoModeEnabled": {
+                    "type": "boolean"
                 }
             },
             "required": [
-                "account"
+                "account",
+                "demoModeEnabled"
             ],
             "type": "object"
         },
diff --git a/test/schemas.ts b/test/schemas.ts
index f5c7fcb8a5b..efc478ef211 100644
--- a/test/schemas.ts
+++ b/test/schemas.ts
@@ -3600,8 +3600,8 @@ export const v239Schema = {
     ...v238Schema._persist,
     version: 239,
   },
-  app: {
-    ...v238Schema.app,
+  web3: {
+    ...v238Schema.web3,
     demoModeEnabled: false,
   },
 }

From 30f14fcae8347914fd600eaffb4a9810a609dd54 Mon Sep 17 00:00:00 2001
From: Kathy Luo <kathyluo18@gmail.com>
Date: Tue, 28 Jan 2025 15:59:41 +0100
Subject: [PATCH 05/10] fix: build

---
 src/onboarding/welcome/Welcome.test.tsx | 4 ++--
 src/onboarding/welcome/Welcome.tsx      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/onboarding/welcome/Welcome.test.tsx b/src/onboarding/welcome/Welcome.test.tsx
index b38564150b5..1e58c302244 100644
--- a/src/onboarding/welcome/Welcome.test.tsx
+++ b/src/onboarding/welcome/Welcome.test.tsx
@@ -4,7 +4,6 @@ import { Provider } from 'react-redux'
 import { chooseCreateAccount, chooseRestoreAccount } from 'src/account/actions'
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import { OnboardingEvents } from 'src/analytics/Events'
-import { demoModeToggled } from 'src/app/actions'
 import { navigate, navigateHome } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import { firstOnboardingScreen } from 'src/onboarding/steps'
@@ -12,6 +11,7 @@ import Welcome from 'src/onboarding/welcome/Welcome'
 import { getDynamicConfigParams, patchUpdateStatsigUser } from 'src/statsig'
 import { DynamicConfigs } from 'src/statsig/constants'
 import { StatsigDynamicConfigs } from 'src/statsig/types'
+import { demoModeToggled } from 'src/web3/actions'
 import { createMockStore } from 'test/utils'
 
 jest.mock('src/onboarding/steps')
@@ -157,7 +157,7 @@ describe('Welcome', () => {
       rerender(
         <Provider
           store={createMockStore({
-            app: {
+            web3: {
               demoModeEnabled: true,
             },
           })}
diff --git a/src/onboarding/welcome/Welcome.tsx b/src/onboarding/welcome/Welcome.tsx
index d5c06b37167..548b4cd8649 100644
--- a/src/onboarding/welcome/Welcome.tsx
+++ b/src/onboarding/welcome/Welcome.tsx
@@ -7,7 +7,6 @@ import { chooseCreateAccount, chooseRestoreAccount } from 'src/account/actions'
 import { recoveringFromStoreWipeSelector } from 'src/account/selectors'
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import { OnboardingEvents } from 'src/analytics/Events'
-import { demoModeToggled } from 'src/app/actions'
 import Button, { BtnSizes, BtnTypes } from 'src/components/Button'
 import { welcomeBackground } from 'src/images/Images'
 import WelcomeLogo from 'src/images/WelcomeLogo'
@@ -21,6 +20,7 @@ import { getDynamicConfigParams, patchUpdateStatsigUser } from 'src/statsig'
 import { DynamicConfigs } from 'src/statsig/constants'
 import { StatsigDynamicConfigs } from 'src/statsig/types'
 import { Spacing } from 'src/styles/styles'
+import { demoModeToggled } from 'src/web3/actions'
 import { demoModeEnabledSelector } from 'src/web3/selectors'
 
 const DEMO_MODE_LONG_PRESS_DELAY_MS = 5_000

From 067d082a05b0bacbdf84b788ea4a9da0ad02e770 Mon Sep 17 00:00:00 2001
From: Kathy Luo <kathyluo18@gmail.com>
Date: Tue, 28 Jan 2025 16:39:27 +0100
Subject: [PATCH 06/10] fix: test

---
 src/dapps/DappShortcutsRewards.test.tsx             | 1 +
 src/earn/poolInfoScreen/EarnPoolInfoScreen.test.tsx | 1 +
 src/home/TabHome.test.tsx                           | 1 +
 src/navigator/SettingsMenu.test.tsx                 | 1 +
 src/statsig/index.ts                                | 6 ++----
 src/tokens/TokenDetails.test.tsx                    | 1 +
 6 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/dapps/DappShortcutsRewards.test.tsx b/src/dapps/DappShortcutsRewards.test.tsx
index 7a7a7c28ae4..c789c384e8e 100644
--- a/src/dapps/DappShortcutsRewards.test.tsx
+++ b/src/dapps/DappShortcutsRewards.test.tsx
@@ -10,6 +10,7 @@ import { createMockStore } from 'test/utils'
 import { mockCusdAddress, mockCusdTokenId, mockPositions, mockShortcuts } from 'test/values'
 
 jest.mock('src/statsig', () => ({
+  ...jest.requireActual('src/statsig'),
   getFeatureGate: jest.fn(() => true),
 }))
 jest.mock('src/web3/networkConfig', () => {
diff --git a/src/earn/poolInfoScreen/EarnPoolInfoScreen.test.tsx b/src/earn/poolInfoScreen/EarnPoolInfoScreen.test.tsx
index 439bed9b170..7e37f066841 100644
--- a/src/earn/poolInfoScreen/EarnPoolInfoScreen.test.tsx
+++ b/src/earn/poolInfoScreen/EarnPoolInfoScreen.test.tsx
@@ -23,6 +23,7 @@ import {
 } from 'test/values'
 
 jest.mock('src/statsig', () => ({
+  ...jest.requireActual('src/statsig'),
   getMultichainFeatures: jest.fn(),
   getFeatureGate: jest.fn(),
 }))
diff --git a/src/home/TabHome.test.tsx b/src/home/TabHome.test.tsx
index 6dba58f30bd..462c5e5a669 100644
--- a/src/home/TabHome.test.tsx
+++ b/src/home/TabHome.test.tsx
@@ -74,6 +74,7 @@ const mockBalances = {
 }
 
 jest.mock('src/statsig', () => ({
+  ...jest.requireActual('src/statsig'),
   getFeatureGate: jest.fn().mockReturnValue(false),
   getMultichainFeatures: jest.fn(() => ({
     showBalances: ['celo-alfajores'],
diff --git a/src/navigator/SettingsMenu.test.tsx b/src/navigator/SettingsMenu.test.tsx
index d9670e3af13..98c0c2c5e3e 100644
--- a/src/navigator/SettingsMenu.test.tsx
+++ b/src/navigator/SettingsMenu.test.tsx
@@ -11,6 +11,7 @@ import { createMockStore } from 'test/utils'
 import { mockE164Number } from 'test/values'
 
 jest.mock('src/statsig', () => ({
+  ...jest.requireActual('src/statsig'),
   getFeatureGate: jest.fn().mockReturnValue(false),
   getMultichainFeatures: jest.fn(() => ({
     showBalances: ['celo-alfajores'],
diff --git a/src/statsig/index.ts b/src/statsig/index.ts
index 98ca06abbad..638498adbfe 100644
--- a/src/statsig/index.ts
+++ b/src/statsig/index.ts
@@ -1,6 +1,5 @@
 import * as _ from 'lodash'
 import { LaunchArguments } from 'react-native-launch-arguments'
-import { startOnboardingTimeSelector } from 'src/account/selectors'
 import { ExpectedLaunchArgs, STATSIG_ENABLED } from 'src/config'
 import { DynamicConfigs } from 'src/statsig/constants'
 import {
@@ -12,7 +11,6 @@ import {
 } from 'src/statsig/types'
 import { NetworkId } from 'src/transactions/types'
 import Logger from 'src/utils/Logger'
-import { walletAddressSelector } from 'src/web3/selectors'
 import { EvaluationReason } from 'statsig-js'
 import { DynamicConfig, Statsig, StatsigUser } from 'statsig-react-native'
 
@@ -148,9 +146,9 @@ export function getDefaultStatsigUser(): StatsigUser {
   const { store } = require('src/redux/store')
   const state = store.getState()
   return {
-    userID: walletAddressSelector(state) ?? undefined,
+    userID: state.web3.account?.toLowerCase() ?? undefined,
     custom: {
-      startOnboardingTime: startOnboardingTimeSelector(state),
+      startOnboardingTime: state.account.startOnboardingTime,
       loadTime: Date.now(),
     },
   }
diff --git a/src/tokens/TokenDetails.test.tsx b/src/tokens/TokenDetails.test.tsx
index 87ca26a156b..2247ecc82d8 100644
--- a/src/tokens/TokenDetails.test.tsx
+++ b/src/tokens/TokenDetails.test.tsx
@@ -20,6 +20,7 @@ import {
 } from 'test/values'
 
 jest.mock('src/statsig', () => ({
+  ...jest.requireActual('src/statsig'),
   getMultichainFeatures: jest.fn(() => {
     return {
       showCico: ['celo-alfajores', 'ethereum-sepolia'],

From c5ef646bd3758aba3a2e784153bd77ac9f07a23c Mon Sep 17 00:00:00 2001
From: Kathy Luo <kathyluo18@gmail.com>
Date: Tue, 28 Jan 2025 16:46:00 +0100
Subject: [PATCH 07/10] fix: knip

---
 src/account/selectors.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/account/selectors.ts b/src/account/selectors.ts
index 6bf31ffe64c..acc8089e79a 100644
--- a/src/account/selectors.ts
+++ b/src/account/selectors.ts
@@ -53,7 +53,6 @@ export const accountCreationTimeSelector = (state: RootState) => state.account.a
 export const celoEducationCompletedSelector = (state: RootState) =>
   state.account.celoEducationCompleted
 
-export const startOnboardingTimeSelector = (state: RootState) => state.account.startOnboardingTime
 export const recoveryPhraseInOnboardingStatusSelector = (state: RootState) =>
   state.account.recoveryPhraseInOnboardingStatus
 

From af9c8c5991901e9ff62ea0d333c259cf9ca2c3ee Mon Sep 17 00:00:00 2001
From: Kathy Luo <kathyluo18@gmail.com>
Date: Fri, 31 Jan 2025 10:13:38 +0100
Subject: [PATCH 08/10] fix: store

---
 src/redux/store.test.ts | 2 +-
 src/redux/store.ts      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/redux/store.test.ts b/src/redux/store.test.ts
index dadf5f04da9..c314dde713e 100644
--- a/src/redux/store.test.ts
+++ b/src/redux/store.test.ts
@@ -143,7 +143,7 @@ describe('store state', () => {
       {
         "_persist": {
           "rehydrated": true,
-          "version": 239,
+          "version": 240,
         },
         "account": {
           "acceptedTerms": false,
diff --git a/src/redux/store.ts b/src/redux/store.ts
index 7a6e09e6490..a79738db2e6 100644
--- a/src/redux/store.ts
+++ b/src/redux/store.ts
@@ -26,7 +26,7 @@ const persistConfig: PersistConfig<ReducersRootState> = {
   key: 'root',
   // default is -1, increment as we make migrations
   // See https://github.com/valora-inc/wallet/tree/main/WALLET.md#redux-state-migration
-  version: 239,
+  version: 240,
   keyPrefix: `reduxStore-`, // the redux-persist default is `persist:` which doesn't work with some file systems.
   storage: FSStorage(),
   blacklist: ['networkInfo', 'alert', 'imports', 'keylessBackup', transactionFeedV2Api.reducerPath],

From 402bdf30dd0b2ef744fe29accf6b221243eb45d2 Mon Sep 17 00:00:00 2001
From: Kathy Luo <kathyluo18@gmail.com>
Date: Fri, 31 Jan 2025 10:23:47 +0100
Subject: [PATCH 09/10] fix: unnecessary

---
 src/account/selectors.ts           | 1 +
 src/keylessBackup/keychain.test.ts | 1 +
 src/statsig/index.ts               | 6 ++++--
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/account/selectors.ts b/src/account/selectors.ts
index acc8089e79a..6bf31ffe64c 100644
--- a/src/account/selectors.ts
+++ b/src/account/selectors.ts
@@ -53,6 +53,7 @@ export const accountCreationTimeSelector = (state: RootState) => state.account.a
 export const celoEducationCompletedSelector = (state: RootState) =>
   state.account.celoEducationCompleted
 
+export const startOnboardingTimeSelector = (state: RootState) => state.account.startOnboardingTime
 export const recoveryPhraseInOnboardingStatusSelector = (state: RootState) =>
   state.account.recoveryPhraseInOnboardingStatus
 
diff --git a/src/keylessBackup/keychain.test.ts b/src/keylessBackup/keychain.test.ts
index 0f1cf007ddb..b66f1ef39ab 100644
--- a/src/keylessBackup/keychain.test.ts
+++ b/src/keylessBackup/keychain.test.ts
@@ -6,6 +6,7 @@ import { generatePrivateKey } from 'viem/accounts'
 
 jest.mock('src/pincode/authentication')
 jest.mock('src/storage/keychain')
+jest.mock('src/statsig')
 
 describe(storeSECP256k1PrivateKey, () => {
   beforeEach(() => {
diff --git a/src/statsig/index.ts b/src/statsig/index.ts
index 638498adbfe..98ca06abbad 100644
--- a/src/statsig/index.ts
+++ b/src/statsig/index.ts
@@ -1,5 +1,6 @@
 import * as _ from 'lodash'
 import { LaunchArguments } from 'react-native-launch-arguments'
+import { startOnboardingTimeSelector } from 'src/account/selectors'
 import { ExpectedLaunchArgs, STATSIG_ENABLED } from 'src/config'
 import { DynamicConfigs } from 'src/statsig/constants'
 import {
@@ -11,6 +12,7 @@ import {
 } from 'src/statsig/types'
 import { NetworkId } from 'src/transactions/types'
 import Logger from 'src/utils/Logger'
+import { walletAddressSelector } from 'src/web3/selectors'
 import { EvaluationReason } from 'statsig-js'
 import { DynamicConfig, Statsig, StatsigUser } from 'statsig-react-native'
 
@@ -146,9 +148,9 @@ export function getDefaultStatsigUser(): StatsigUser {
   const { store } = require('src/redux/store')
   const state = store.getState()
   return {
-    userID: state.web3.account?.toLowerCase() ?? undefined,
+    userID: walletAddressSelector(state) ?? undefined,
     custom: {
-      startOnboardingTime: state.account.startOnboardingTime,
+      startOnboardingTime: startOnboardingTimeSelector(state),
       loadTime: Date.now(),
     },
   }

From 5760b10aefc2e7ce7aba00008cb63ccaaf71f352 Mon Sep 17 00:00:00 2001
From: Kathy Luo <kathyluo18@gmail.com>
Date: Fri, 31 Jan 2025 10:45:28 +0100
Subject: [PATCH 10/10] chore: add bottom sheet confirmation

---
 locales/base/translation.json           |  9 ++++++-
 src/onboarding/welcome/Welcome.test.tsx |  4 ++--
 src/onboarding/welcome/Welcome.tsx      | 31 +++++++++++++++++++++----
 3 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/locales/base/translation.json b/locales/base/translation.json
index bdb650b507b..d129d171043 100644
--- a/locales/base/translation.json
+++ b/locales/base/translation.json
@@ -2857,5 +2857,12 @@
   "tokenAndLocalAmount": "{{tokenAmount}} {{tokenSymbol}} <0>({{localCurrencySymbol}}{{localAmount}})</0>",
   "tokenAmountApprox": "≈ {{tokenAmount}} {{tokenSymbol}}",
   "localAmountApprox": "≈ {{localCurrencySymbol}}{{localAmount}}",
-  "tokenAndLocalAmountApprox": "≈ {{tokenAmount}} {{tokenSymbol}} <0>({{localCurrencySymbol}}{{localAmount}})</0>"
+  "tokenAndLocalAmountApprox": "≈ {{tokenAmount}} {{tokenSymbol}} <0>({{localCurrencySymbol}}{{localAmount}})</0>",
+  "demoMode": {
+    "confirmEnter": {
+      "title": "Demo Mode",
+      "info": "You are about to enter into demo mode. You are free to explore the features of the app without completing any transactions",
+      "cta": "Enter Demo"
+    }
+  }
 }
diff --git a/src/onboarding/welcome/Welcome.test.tsx b/src/onboarding/welcome/Welcome.test.tsx
index 1e58c302244..dc73e5f4bb8 100644
--- a/src/onboarding/welcome/Welcome.test.tsx
+++ b/src/onboarding/welcome/Welcome.test.tsx
@@ -143,13 +143,13 @@ describe('Welcome', () => {
       })
 
       const store = createMockStore()
-      const { getByTestId, rerender } = render(
+      const { getByText, rerender } = render(
         <Provider store={store}>
           <Welcome />
         </Provider>
       )
 
-      fireEvent(getByTestId('Welcome/ActivateDemoMode'), 'onLongPress')
+      fireEvent.press(getByText('demoMode.confirmEnter.cta'))
 
       expect(store.getActions()).toEqual([demoModeToggled(true)])
       await waitFor(() => expect(navigateHome).not.toHaveBeenCalled())
diff --git a/src/onboarding/welcome/Welcome.tsx b/src/onboarding/welcome/Welcome.tsx
index 548b4cd8649..272a553bd93 100644
--- a/src/onboarding/welcome/Welcome.tsx
+++ b/src/onboarding/welcome/Welcome.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ImageBackground, StyleSheet, View } from 'react-native'
 import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
@@ -7,6 +7,7 @@ import { chooseCreateAccount, chooseRestoreAccount } from 'src/account/actions'
 import { recoveringFromStoreWipeSelector } from 'src/account/selectors'
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import { OnboardingEvents } from 'src/analytics/Events'
+import BottomSheet, { BottomSheetModalRefType } from 'src/components/BottomSheet'
 import Button, { BtnSizes, BtnTypes } from 'src/components/Button'
 import { welcomeBackground } from 'src/images/Images'
 import WelcomeLogo from 'src/images/WelcomeLogo'
@@ -23,9 +24,11 @@ import { Spacing } from 'src/styles/styles'
 import { demoModeToggled } from 'src/web3/actions'
 import { demoModeEnabledSelector } from 'src/web3/selectors'
 
-const DEMO_MODE_LONG_PRESS_DELAY_MS = 5_000
+const DEMO_MODE_LONG_PRESS_DELAY_MS = 4_000
 
 export default function Welcome() {
+  const demoModeBottomSheetRef = useRef<BottomSheetModalRefType>(null)
+
   const { t } = useTranslation()
   const dispatch = useDispatch()
   const acceptedTerms = useSelector((state) => state.account.acceptedTerms)
@@ -48,6 +51,10 @@ export default function Welcome() {
     dispatch(demoModeToggled(true))
   }
 
+  const onRequestActivateDemoMode = () => {
+    demoModeBottomSheetRef.current?.snapToIndex(0)
+  }
+
   const startOnboarding = () => {
     navigate(
       firstOnboardingScreen({
@@ -90,8 +97,8 @@ export default function Welcome() {
           <TouchableWithoutFeedback
             disabled={!enabledInOnboarding}
             delayLongPress={DEMO_MODE_LONG_PRESS_DELAY_MS}
-            onLongPress={onActivateDemoMode}
-            testID="Welcome/ActivateDemoMode"
+            onLongPress={onRequestActivateDemoMode}
+            testID="Welcome/RequestActivateDemoMode"
           >
             <WelcomeLogo />
           </TouchableWithoutFeedback>
@@ -114,6 +121,19 @@ export default function Welcome() {
           />
         </View>
       </ImageBackground>
+      <BottomSheet
+        forwardedRef={demoModeBottomSheetRef}
+        title={t('demoMode.confirmEnter.title')}
+        description={t('demoMode.confirmEnter.info')}
+      >
+        <Button
+          onPress={onActivateDemoMode}
+          text={t('demoMode.confirmEnter.cta')}
+          size={BtnSizes.FULL}
+          type={BtnTypes.PRIMARY}
+          style={styles.demoModeButton}
+        />
+      </BottomSheet>
     </SafeAreaView>
   )
 }
@@ -143,4 +163,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginTop: Spacing.XLarge48,
   },
+  demoModeButton: {
+    marginTop: Spacing.Thick24,
+  },
 })