Use routing instead of redux state for hardware onboarding

components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/add-account-modal.tsx

@@ -4,22 +4,32 @@
 // you can obtain one at https://mozilla.org/MPL/2.0/.
 
 import * as React from 'react'
-import { Redirect, Route, Switch } from 'react-router'
+import { Redirect, Route, Switch, useHistory } from 'react-router'
 
 // types
-import { WalletRoutes } from '../../../../constants/types'
+import { CreateAccountOptionsType, WalletRoutes } from '../../../../constants/types'
 
 // components
 import { AddHardwareAccountModal } from './add-hardware-account-modal'
 import { ImportAccountModal } from './add-imported-account-modal'
 import { CreateAccountModal } from './create-account-modal'
 
 export const AddAccountModal = () => {
+  // routing
+  const history = useHistory()
+
+  // methods
+  const onSelectAccountType = React.useCallback((accountType: CreateAccountOptionsType) => () => {
+    history.push(WalletRoutes.AddHardwareAccountModal.replace(':accountTypeName?', accountType.name.toLowerCase()))
+  }, [])
+
   return (
     <Switch>
 
       <Route path={WalletRoutes.AddHardwareAccountModal} exact>
-        <AddHardwareAccountModal />
+        <AddHardwareAccountModal
+          onSelectAccountType={onSelectAccountType}
+        />
       </Route>
 
       <Route path={WalletRoutes.ImportAccountModal} exact>

components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/add-hardware-account-modal.tsx

@@ -40,10 +40,10 @@ interface Params {
 }
 
 interface Props {
-  isOnboarding?: boolean | undefined
+  onSelectAccountType: (accountType: CreateAccountOptionsType) => () => void
 }
 
-export const AddHardwareAccountModal = ({ isOnboarding }: Props) => {
+export const AddHardwareAccountModal = ({ onSelectAccountType }: Props) => {
   // routing
   const history = useHistory()
   const { accountTypeName } = useParams<Params>()
@@ -75,14 +75,6 @@ export const AddHardwareAccountModal = ({ isOnboarding }: Props) => {
     history.push(WalletRoutes.Accounts)
   }, [setImportError])
 
-  const onSelectAccountType = React.useCallback((accountType: CreateAccountOptionsType) => () => {
-    if (isOnboarding) {
-      history.push(WalletRoutes.OnboardingConnectHardwareWallet.replace(':accountTypeName?', accountType.name.toLowerCase()))
-    } else {
-      history.push(WalletRoutes.AddHardwareAccountModal.replace(':accountTypeName?', accountType.name.toLowerCase()))
-    }
-  }, [])
-
   // render
   return (
     <PopupModal

components/brave_wallet_ui/constants/types.ts

@@ -326,7 +326,6 @@ export interface PageState {
   selectedCoinMarket: BraveWallet.CoinMarket | undefined
   nftsPinningStatus: NftsPinningStatusType
   isLocalIpfsNodeRunning: boolean
-  isHardwareOnboarding: boolean
 }
 
 export interface WalletPageState {
@@ -735,6 +734,7 @@ export enum WalletRoutes {
   OnboardingImportCryptoWalletsSeed = '/crypto/onboarding/import-legacy-seed',
 
   // onboarding (connect hardware wallet)
+  OnboardingConnectHarwareWalletCreatePassword = '/crypto/onboarding/connect-hardware-wallet/create-password',
   OnboardingConnectHardwareWalletStart = '/crypto/onboarding/connect-hardware-wallet',
   OnboardingConnectHardwareWallet = '/crypto/onboarding/connect-hardware-wallet/:accountTypeName?',
 

components/brave_wallet_ui/page/actions/wallet_page_actions.ts

@@ -53,6 +53,5 @@ export const {
   setNftsPinningStatus,
   updateNftPinningStatus,
   getLocalIpfsNodeStatus,
-  updateLocalIpfsNodeStatus,
-  setIsHardwareOnboarding
+  updateLocalIpfsNodeStatus
 } = PageActions

components/brave_wallet_ui/page/reducers/page_reducer.ts

@@ -60,8 +60,7 @@ const defaultState: PageState = {
   walletTermsAcknowledged: false,
   selectedCoinMarket: undefined,
   nftsPinningStatus: {},
-  isLocalIpfsNodeRunning: false,
-  isHardwareOnboarding: false
+  isLocalIpfsNodeRunning: false
 }
 
 export const WalletPageAsyncActions = {
@@ -90,8 +89,7 @@ export const WalletPageAsyncActions = {
   setNftsPinningStatus: createAction<UpdateNftPinningStatusType[]>('setNftsPinningStatus'),
   updateNftPinningStatus: createAction<UpdateNftPinningStatusType>('updateNftPinningStatus'),
   getLocalIpfsNodeStatus: createAction('getLocalIpfsNodeStatus'),
-  updateLocalIpfsNodeStatus: createAction('updateLocalIpfsNodeStatus'),
-  setIsHardwareOnboarding: createAction('setIsHardwareOnboarding')
+  updateLocalIpfsNodeStatus: createAction('updateLocalIpfsNodeStatus')
 }
 
 export const createPageSlice = (initialState: PageState = defaultState) => {
@@ -235,10 +233,6 @@ export const createPageSlice = (initialState: PageState = defaultState) => {
 
       updateLocalIpfsNodeStatus (state, { payload }: PayloadAction<boolean>) {
         state.isLocalIpfsNodeRunning = payload
-      },
-
-      setIsHardwareOnboarding (state, { payload }: PayloadAction<boolean>) {
-        state.isHardwareOnboarding = payload
       }
     }
   })

components/brave_wallet_ui/page/screens/onboarding/components/onboarding-steps-navigation/onboarding-steps-navigation.tsx

@@ -4,10 +4,9 @@
 // you can obtain one at https://mozilla.org/MPL/2.0/.
 
 import * as React from 'react'
-import { useSelector } from 'react-redux'
 
 // types
-import { PageState, WalletRoutes } from '../../../../../constants/types'
+import { WalletRoutes } from '../../../../../constants/types'
 
 // components
 import { StepsNavigation, StepsNavigationProps } from '../../../../../components/desktop/steps-navigation/steps-navigation'
@@ -37,22 +36,24 @@ const NEW_WALLET_STEPS: OnboardingNewWalletSteps[] = [
 // Connect Hardware Steps
 //
 type OnboardingConnectHardwareWalletSteps =
-  | WalletRoutes.OnboardingComplete
-  | WalletRoutes.OnboardingCreatePassword
   | WalletRoutes.OnboardingWelcome
+  | WalletRoutes.OnboardingConnectHarwareWalletCreatePassword
+  | WalletRoutes.OnboardingComplete
 
 const CONNECT_HARDWARE_WALLET_STEPS: OnboardingConnectHardwareWalletSteps[] = [
   WalletRoutes.OnboardingWelcome,
-  WalletRoutes.OnboardingCreatePassword,
+  WalletRoutes.OnboardingConnectHarwareWalletCreatePassword,
   WalletRoutes.OnboardingComplete
 ]
 
-interface OnboardingNewWalletStepsNavigationProps extends Omit<StepsNavigationProps<OnboardingNewWalletSteps>, 'steps'> {}
+interface OnboardingNewWalletStepsNavigationProps extends Omit<StepsNavigationProps<OnboardingNewWalletSteps>, 'steps'> {
+  isHardwareOnboarding?: boolean
+}
 
 export const OnboardingNewWalletStepsNavigation = (
   props: OnboardingNewWalletStepsNavigationProps
 ) => {
-  const isHardwareOnboarding = useSelector(({ page }: { page: PageState }) => page.isHardwareOnboarding)
+  const { isHardwareOnboarding } = props
 
   return <StepsNavigation
     {...props}

components/brave_wallet_ui/page/screens/onboarding/connect-hardware/onboarding-connect-hardware-wallet.tsx

@@ -3,6 +3,10 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this file,
 // You can obtain one at https://mozilla.org/MPL/2.0/.
 import * as React from 'react'
+import { useHistory } from 'react-router'
+
+// types
+import { CreateAccountOptionsType, WalletRoutes } from '../../../../constants/types'
 
 // components
 import { WalletPageLayout } from "../../../../components/desktop"
@@ -12,11 +16,19 @@ import AddHardwareAccountModal from '../../../../components/desktop/popup-modals
 import { OnboardingWrapper } from "../onboarding.style"
 
 export const OnboardingConnectHardwareWallet = () => {
+  // routing
+  const history = useHistory()
+
+  // methods
+  const onSelectAccountType = React.useCallback((accountType: CreateAccountOptionsType) => () => {
+    history.push(WalletRoutes.OnboardingConnectHardwareWallet.replace(':accountTypeName?', accountType.name.toLowerCase()))
+  }, [])
+
   return (
     <WalletPageLayout>
       <OnboardingWrapper>
-        <AddHardwareAccountModal isOnboarding={true}/>
+        <AddHardwareAccountModal onSelectAccountType={onSelectAccountType} />
       </OnboardingWrapper>
     </WalletPageLayout>
   )
-}
+}

components/brave_wallet_ui/page/screens/onboarding/create-password/onboarding-create-password.tsx

@@ -4,15 +4,14 @@
 // you can obtain one at https://mozilla.org/MPL/2.0/.
 
 import * as React from 'react'
-import { useHistory } from 'react-router'
 import { useDispatch, useSelector } from 'react-redux'
 
 // utils
 import { getLocale } from '../../../../../common/locale'
 import { useApiProxy } from '../../../../common/hooks/use-api-proxy'
 
 // routes
-import { OnboardingAction, PageState, WalletRoutes, WalletState } from '../../../../constants/types'
+import { OnboardingAction, WalletRoutes, WalletState } from '../../../../constants/types'
 
 // actions
 import { WalletPageActions } from '../../../actions'
@@ -33,14 +32,17 @@ import {
   TitleAndDescriptionContainer
 } from '../onboarding.style'
 
-export const OnboardingCreatePassword = () => {
-  // routing
-  const history = useHistory()
+interface OnboardingCreatePasswordProps {
+  isHardwareOnboarding?: boolean
+  onWalletCreated: () => void
+}
+
+export const OnboardingCreatePassword = (props: OnboardingCreatePasswordProps) => {
+  const { isHardwareOnboarding, onWalletCreated } = props
 
   // redux
   const dispatch = useDispatch()
   const isWalletCreated = useSelector(({ wallet }: { wallet: WalletState }) => wallet.isWalletCreated)
-  const isHardwareOnboarding = useSelector(({ page }: { page: PageState }) => page.isHardwareOnboarding)
 
   // state
   const [isValid, setIsValid] = React.useState(false)
@@ -65,13 +67,9 @@ export const OnboardingCreatePassword = () => {
   React.useEffect(() => {
     if (isWalletCreated) {
       braveWalletP3A.reportOnboardingAction(OnboardingAction.CREATED_WALLET)
-      if (isHardwareOnboarding) {
-        history.push(WalletRoutes.OnboardingConnectHardwareWalletStart)
-      } else {
-        history.push(WalletRoutes.OnboardingExplainRecoveryPhrase)
-      }
+      onWalletCreated()
     }
-  }, [isWalletCreated])
+  }, [isWalletCreated, onWalletCreated])
 
   // render
   return (
@@ -82,6 +80,7 @@ export const OnboardingCreatePassword = () => {
           <OnboardingNewWalletStepsNavigation
             goBackUrl={WalletRoutes.OnboardingWelcome}
             currentStep={WalletRoutes.OnboardingCreatePassword}
+            isHardwareOnboarding={isHardwareOnboarding}
             preventSkipAhead
           />
 

components/brave_wallet_ui/page/screens/onboarding/disclosures/disclosures.tsx

@@ -36,12 +36,14 @@ import { CheckboxText } from './disclosures.style'
 
 export type OnboardingDisclosuresNextSteps =
   | WalletRoutes.OnboardingCreatePassword
+  | WalletRoutes.OnboardingConnectHarwareWalletCreatePassword
   | WalletRoutes.OnboardingImportOrRestore
   | WalletRoutes.OnboardingConnectHardwareWalletStart
 
 interface Props {
   nextStep: OnboardingDisclosuresNextSteps
   onBack?: () => void
+  isHardwareOnboarding?: boolean
 }
 
 const TermsOfUseText: React.FC<{}> = () => {
@@ -101,6 +103,7 @@ export const OnboardingDisclosures = ({ nextStep, onBack }: Props) => {
           <OnboardingNewWalletStepsNavigation
             goBack={onBack}
             currentStep={WalletRoutes.OnboardingWelcome}
+            isHardwareOnboarding={nextStep === WalletRoutes.OnboardingConnectHarwareWalletCreatePassword}
             preventSkipAhead
           />
 

components/brave_wallet_ui/page/screens/onboarding/onboarding.routes.tsx

@@ -8,7 +8,8 @@ import { useSelector } from 'react-redux'
 import {
   Redirect,
   Route,
-  Switch
+  Switch,
+  useHistory
 } from 'react-router'
 
 // components
@@ -26,10 +27,22 @@ import { OnboardingSuccess } from './onboarding-success/onboarding-success'
 import { OnboardingConnectHardwareWallet } from './connect-hardware/onboarding-connect-hardware-wallet'
 
 export const OnboardingRoutes = () => {
+  // routing
+  const history = useHistory()
+
   // redux
   const isWalletCreated = useSelector(({ wallet }: { wallet: WalletState }) => wallet.isWalletCreated)
   const termsAcknowledged = useSelector(({ page }: { page: PageState }) => page.walletTermsAcknowledged)
 
+  // methods
+  const goToConnectHardware = React.useCallback(() => {
+    history.push(WalletRoutes.OnboardingConnectHardwareWalletStart)
+  }, [])
+
+  const goToExplainRecoveryPhrase = React.useCallback(() => {
+    history.push(WalletRoutes.OnboardingExplainRecoveryPhrase)
+  }, [])
+
   // render
   return (
     <Switch>
@@ -51,8 +64,18 @@ export const OnboardingRoutes = () => {
       }
 
       <Route path={WalletRoutes.OnboardingCreatePassword} exact>
-        <OnboardingCreatePassword />
+        <OnboardingCreatePassword
+          onWalletCreated={goToExplainRecoveryPhrase}
+        />
       </Route>
+
+      <Route path={WalletRoutes.OnboardingConnectHarwareWalletCreatePassword} exact>
+        <OnboardingCreatePassword
+          isHardwareOnboarding={true}
+          onWalletCreated={goToConnectHardware}
+        />
+      </Route>
+
 
       {!isWalletCreated &&
         <Route path={WalletRoutes.OnboardingImportOrRestore} exact>
@@ -105,7 +128,7 @@ export const OnboardingRoutes = () => {
         </Route>
       }
 
-      <Route path={WalletRoutes.OnboardingConnectHardwareWalletStart || WalletRoutes.OnboardingConnectHardwareWallet} exact>
+      <Route path={WalletRoutes.OnboardingConnectHardwareWalletStart} exact>
         <OnboardingConnectHardwareWallet />
       </Route>
 

components/brave_wallet_ui/page/screens/onboarding/welcome/onboarding-welcome.tsx

@@ -42,18 +42,12 @@ export const OnboardingWelcome = () => {
   // redux
   const dispatch = useDispatch()
   const setupStillInProgress = useSelector(({ page }: { page: PageState }) => page.setupStillInProgress)
-  const isHardwareOnboarding = useSelector(({ page }: { page: PageState }) => page.isHardwareOnboarding)
 
   // state
   const [nextStep, setNextStep] = React.useState<OnboardingDisclosuresNextSteps | undefined>(undefined)
 
   // methods
-  const hideDisclosures = React.useCallback(() => {
-    if (isHardwareOnboarding) {
-      dispatch(WalletPageActions.setIsHardwareOnboarding(false))
-    }
-    setNextStep(undefined)
-  }, [isHardwareOnboarding])
+  const hideDisclosures = React.useCallback(() => setNextStep(undefined), [])
 
   const showNewWalletDisclosures = React.useCallback(
     () => setNextStep(WalletRoutes.OnboardingCreatePassword),
@@ -66,8 +60,7 @@ export const OnboardingWelcome = () => {
   )
 
   const showConnectHardwareDisclosures = React.useCallback(() => {
-    dispatch(WalletPageActions.setIsHardwareOnboarding(true))
-    setNextStep(WalletRoutes.OnboardingCreatePassword)
+    setNextStep(WalletRoutes.OnboardingConnectHarwareWalletCreatePassword)
   }, [])
 
   // custom hooks
@@ -159,5 +152,3 @@ export const OnboardingWelcome = () => {
 
   </WalletPageLayout>
 }
-
-