Desktop Front End Loading Screens

brave · Nov 4, 2023 · 5325b70 · 5325b70
1 parent a6cc160
commit 5325b70
Show file tree

Hide file tree

Showing 14 changed files with 150 additions and 52 deletions.
diff --git a/components/brave_wallet/browser/brave_wallet_constants.h b/components/brave_wallet/browser/brave_wallet_constants.h
@@ -1037,6 +1037,7 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
     {"braveWalletPasswordIsMediumStrength",
      IDS_BRAVE_WALLET_PASSWORD_IS_MEDIUM_STRENGTH},
     {"braveWalletPasswordIsWeak", IDS_BRAVE_WALLET_PASSWORD_IS_WEAK},
+    {"braveWalletCreatingWallet", IDS_BRAVE_WALLET_CREATING_WALLET},
     {"braveWalletOnboardingRecoveryPhraseBackupIntroTitle",
      IDS_BRAVE_WALLET_ONBOARDING_RECOVERY_PHRASE_BACKUP_INTRO_TITLE},
     {"braveWalletOnboardingRecoveryPhraseBackupIntroDescription",

diff --git a/components/brave_wallet_ui/constants/types.ts b/components/brave_wallet_ui/constants/types.ts
@@ -306,6 +306,7 @@ export interface PageState {
   importWalletAttempts: number
   walletTermsAcknowledged: boolean
   selectedCoinMarket: BraveWallet.CoinMarket | undefined
+  isCreatingWallet: boolean
 }
 
 export interface WalletPageState {

diff --git a/components/brave_wallet_ui/page/actions/wallet_page_actions.ts b/components/brave_wallet_ui/page/actions/wallet_page_actions.ts
@@ -32,5 +32,6 @@ export const {
   updateSelectedAsset,
   walletBackupComplete,
   walletCreated,
-  walletSetupComplete
+  walletSetupComplete,
+  setIsCreatingWallet
 } = PageActions
diff --git a/components/brave_wallet_ui/page/async/wallet_page_async_handler.ts b/components/brave_wallet_ui/page/async/wallet_page_async_handler.ts
@@ -67,8 +67,10 @@ async function importFromExternalWallet(
 handler.on(
   WalletPageActions.createWallet.type,
   async (store: Store, payload: CreateWalletPayloadType) => {
+    store.dispatch(WalletPageActions.setIsCreatingWallet(true))
     const keyringService = getWalletPageApiProxy().keyringService
     const result = await keyringService.createWallet(payload.password)
+    store.dispatch(WalletPageActions.setIsCreatingWallet(false))
     store.dispatch(
       WalletPageActions.walletCreated({ mnemonic: result.mnemonic })
     )
@@ -78,12 +80,14 @@ handler.on(
 handler.on(
   WalletPageActions.restoreWallet.type,
   async (store: Store, payload: RestoreWalletPayloadType) => {
+    store.dispatch(WalletPageActions.setIsCreatingWallet(true))
     const keyringService = getWalletPageApiProxy().keyringService
     const result = await keyringService.restoreWallet(
       payload.mnemonic,
       payload.password,
       payload.isLegacy
     )
+    store.dispatch(WalletPageActions.setIsCreatingWallet(false))
     if (!result.isValidMnemonic) {
       store.dispatch(
         WalletPageActions.hasMnemonicError(!result.isValidMnemonic)
@@ -159,23 +163,27 @@ handler.on(WalletPageActions.checkWalletsToImport.type, async (store) => {
 handler.on(
   WalletPageActions.importFromCryptoWallets.type,
   async (store: Store, payload: ImportFromExternalWalletPayloadType) => {
+    store.dispatch(WalletPageActions.setIsCreatingWallet(true))
     const results: ImportWalletErrorPayloadType =
       await importFromExternalWallet(
         BraveWallet.ExternalWalletType.CryptoWallets,
         payload
       )
+    store.dispatch(WalletPageActions.setIsCreatingWallet(false))
     store.dispatch(WalletPageActions.setImportWalletError(results))
   }
 )
 
 handler.on(
   WalletPageActions.importFromMetaMask.type,
   async (store: Store, payload: ImportFromExternalWalletPayloadType) => {
+    store.dispatch(WalletPageActions.setIsCreatingWallet(true))
     const results: ImportWalletErrorPayloadType =
       await importFromExternalWallet(
         BraveWallet.ExternalWalletType.MetaMask,
         payload
       )
+    store.dispatch(WalletPageActions.setIsCreatingWallet(false))
     store.dispatch(WalletPageActions.setImportWalletError(results))
   }
 )

diff --git a/components/brave_wallet_ui/page/reducers/page_reducer.ts b/components/brave_wallet_ui/page/reducers/page_reducer.ts
@@ -42,7 +42,8 @@ const defaultState: PageState = {
   isImportWalletsCheckComplete: false,
   importWalletAttempts: 0,
   walletTermsAcknowledged: false,
-  selectedCoinMarket: undefined
+  selectedCoinMarket: undefined,
+  isCreatingWallet: false
 }
 
 export const WalletPageAsyncActions = {
@@ -196,6 +197,10 @@ export const createPageSlice = (initialState: PageState = defaultState) => {
 
       updateAutoPinEnabled(state, { payload }: PayloadAction<boolean>) {
         state.isAutoPinEnabled = payload
+      },
+
+      setIsCreatingWallet(state, { payload }: PayloadAction<boolean>) {
+        state.isCreatingWallet = payload
       }
     }
   })

diff --git a/...ts/brave_wallet_ui/page/screens/onboarding/create-password/onboarding-create-password.tsx b/...ts/brave_wallet_ui/page/screens/onboarding/create-password/onboarding-create-password.tsx
@@ -4,13 +4,21 @@
 // you can obtain one at https://mozilla.org/MPL/2.0/.
 
 import * as React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import { useDispatch } from 'react-redux'
+
+// selectors
+import {
+  useSafePageSelector,
+  useSafeWalletSelector
+} from '../../../../common/hooks/use-safe-selector'
+import { PageSelectors } from '../../../selectors'
+import { WalletSelectors } from '../../../../common/selectors'
 
 // utils
 import { getLocale } from '../../../../../common/locale'
 
 // routes
-import { WalletRoutes, WalletState } from '../../../../constants/types'
+import { WalletRoutes } from '../../../../constants/types'
 
 // actions
 import { WalletPageActions } from '../../../actions'
@@ -25,6 +33,7 @@ import {
 } from '../../../../components/shared/password-input/new-password-input'
 import { OnboardingNewWalletStepsNavigation } from '../components/onboarding-steps-navigation/onboarding-steps-navigation'
 import { CenteredPageLayout } from '../../../../components/desktop/centered-page-layout/centered-page-layout'
+import { CreatingWallet } from '../creating_wallet/creating_wallet'
 
 // styles
 import {
@@ -48,9 +57,8 @@ export const OnboardingCreatePassword = (
 
   // redux
   const dispatch = useDispatch()
-  const isWalletCreated = useSelector(
-    ({ wallet }: { wallet: WalletState }) => wallet.isWalletCreated
-  )
+  const isWalletCreated = useSafeWalletSelector(WalletSelectors.isWalletCreated)
+  const isCreatingWallet = useSafePageSelector(PageSelectors.isCreatingWallet)
 
   // state
   const [isValid, setIsValid] = React.useState(false)
@@ -73,10 +81,14 @@ export const OnboardingCreatePassword = (
 
   // effects
   React.useEffect(() => {
-    if (isWalletCreated) {
+    if (!isCreatingWallet && isWalletCreated) {
       onWalletCreated()
     }
-  }, [isWalletCreated, onWalletCreated])
+  }, [isWalletCreated, onWalletCreated, isCreatingWallet])
+
+  if (isCreatingWallet) {
+    return <CreatingWallet />
+  }
 
   // render
   return (

diff --git a/components/brave_wallet_ui/page/screens/onboarding/creating_wallet/creating_wallet.style.ts b/components/brave_wallet_ui/page/screens/onboarding/creating_wallet/creating_wallet.style.ts
@@ -0,0 +1,23 @@
+// Copyright (c) 2023 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// 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 styled from 'styled-components'
+import ProgressRing from '@brave/leo/react/progressRing'
+import * as leo from '@brave/leo/tokens/css'
+
+// Shared Styles
+import { Text } from '../../../../components/shared/style'
+
+export const LoadingIcon = styled(ProgressRing)`
+  --leo-progressring-size: 40px;
+  --leo-progressring-background-color: rgba(217, 217, 217, 1);
+  --leo-progressring-color: ${leo.color.icon.interactive};
+  margin-bottom: 20px;
+`
+
+export const CreatingWalletText = styled(Text)`
+  font-weight: 500;
+  line-height: 28px;
+  color: ${leo.color.text.primary};
+`
diff --git a/components/brave_wallet_ui/page/screens/onboarding/creating_wallet/creating_wallet.tsx b/components/brave_wallet_ui/page/screens/onboarding/creating_wallet/creating_wallet.tsx
@@ -0,0 +1,40 @@
+// Copyright (c) 2023 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// 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'
+
+// Utils
+import { getLocale } from '../../../../../common/locale'
+
+// Components
+import {
+  CenteredPageLayout
+} from
+'../../../../components/desktop/centered-page-layout/centered-page-layout'
+
+// Styled Components
+import { CreatingWalletText, LoadingIcon } from './creating_wallet.style'
+import { StyledWrapper, MainWrapper } from '../onboarding.style'
+import { Column } from '../../../../components/shared/style'
+
+export const CreatingWallet = () => {
+  return (
+    <CenteredPageLayout>
+      <MainWrapper>
+        <StyledWrapper>
+          <Column
+            fullWidth={true}
+            padding='200px 0px'
+          >
+            <LoadingIcon />
+            <CreatingWalletText>
+              {getLocale('braveWalletCreatingWallet')}
+            </CreatingWalletText>
+          </Column>
+        </StyledWrapper>
+      </MainWrapper>
+    </CenteredPageLayout>
+  )
+}
diff --git a/components/brave_wallet_ui/page/screens/onboarding/onboarding.routes.tsx b/components/brave_wallet_ui/page/screens/onboarding/onboarding.routes.tsx
@@ -4,9 +4,16 @@
 // you can obtain one at https://mozilla.org/MPL/2.0/.
 
 import * as React from 'react'
-import { useSelector } from 'react-redux'
 import { Redirect, Route, Switch, useHistory, useLocation } from 'react-router'
 
+// selectors
+import {
+  useSafePageSelector, //
+  useSafeWalletSelector
+} from '../../../common/hooks/use-safe-selector'
+import { PageSelectors } from '../../selectors'
+import { WalletSelectors } from '../../../common/selectors'
+
 // utils
 import { useApiProxy } from '../../../common/hooks/use-api-proxy'
 
@@ -20,12 +27,7 @@ import { OnboardingImportOrRestoreWallet } from './import-or-restore-wallet/impo
 import { OnboardingRestoreFromRecoveryPhrase } from './restore-from-recovery-phrase/restore-from-recovery-phrase'
 
 // types
-import {
-  BraveWallet,
-  PageState,
-  WalletRoutes,
-  WalletState
-} from '../../../constants/types'
+import { BraveWallet, WalletRoutes } from '../../../constants/types'
 import { OnboardingSuccess } from './onboarding-success/onboarding-success'
 import { OnboardingConnectHardwareWallet } from './connect-hardware/onboarding-connect-hardware-wallet'
 
@@ -38,12 +40,11 @@ export const OnboardingRoutes = () => {
   const { braveWalletP3A } = useApiProxy()
 
   // redux
-  const isWalletCreated = useSelector(
-    ({ wallet }: { wallet: WalletState }) => wallet.isWalletCreated
-  )
-  const termsAcknowledged = useSelector(
-    ({ page }: { page: PageState }) => page.walletTermsAcknowledged
+  const isWalletCreated = useSafeWalletSelector(WalletSelectors.isWalletCreated)
+  const termsAcknowledged = useSafePageSelector(
+    PageSelectors.walletTermsAcknowledged
   )
+  const isCreatingWallet = useSafePageSelector(PageSelectors.isCreatingWallet)
 
   // methods
   const goToConnectHardware = React.useCallback(() => {
@@ -75,6 +76,9 @@ export const OnboardingRoutes = () => {
     }
   }, [location])
 
+  // computed
+  const showOnboardingRestore = !isWalletCreated || isCreatingWallet
+
   // render
   return (
     <Switch>
@@ -126,7 +130,7 @@ export const OnboardingRoutes = () => {
         </Route>
       )}
 
-      {!isWalletCreated && (
+      {showOnboardingRestore && (
         <Route
           path={WalletRoutes.OnboardingRestoreWallet}
           exact
@@ -138,7 +142,7 @@ export const OnboardingRoutes = () => {
         </Route>
       )}
 
-      {!isWalletCreated && (
+      {showOnboardingRestore && (
         <Route
           path={WalletRoutes.OnboardingImportMetaMask}
           exact
@@ -150,7 +154,7 @@ export const OnboardingRoutes = () => {
         </Route>
       )}
 
-      {!isWalletCreated && (
+      {showOnboardingRestore && (
         <Route
           path={WalletRoutes.OnboardingImportMetaMaskSeed}
           exact
@@ -162,7 +166,7 @@ export const OnboardingRoutes = () => {
         </Route>
       )}
 
-      {!isWalletCreated && (
+      {showOnboardingRestore && (
         <Route
           path={WalletRoutes.OnboardingImportCryptoWallets}
           exact
@@ -174,7 +178,7 @@ export const OnboardingRoutes = () => {
         </Route>
       )}
 
-      {!isWalletCreated && (
+      {showOnboardingRestore && (
         <Route
           path={WalletRoutes.OnboardingImportCryptoWalletsSeed}
           exact