feat: onboarding welcome & create-pw redesign

components/brave_wallet/browser/brave_wallet_constants.h

@@ -102,6 +102,7 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
     {"braveWalletSwapFeesNotice", IDS_BRAVE_WALLET_SWAP_FEES_NOTICE},
     {"braveWalletDecimalPlacesError", IDS_BRAVE_WALLET_DECIMAL_PLACES_ERROR},
     {"braveWalletButtonContinue", IDS_BRAVE_WALLET_BUTTON_CONTINUE},
+    {"braveWalletButtonNext", IDS_BRAVE_WALLET_BUTTON_NEXT},
     {"braveWalletButtonCopy", IDS_BRAVE_WALLET_BUTTON_COPY},
     {"braveWalletButtonCopied", IDS_BRAVE_WALLET_BUTTON_COPIED},
     {"braveWalletButtonVerify", IDS_BRAVE_WALLET_BUTTON_VERIFY},
@@ -110,6 +111,8 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
     {"braveWalletWelcomeButton", IDS_BRAVE_WALLET_WELCOME_BUTTON},
     {"braveWalletWelcomeRestoreButton",
      IDS_BRAVE_WALLET_WELCOME_RESTORE_BUTTON},
+    {"braveWalletWelcomeIAlreadyHaveAWallet",
+     IDS_BRAVE_WALLET_WELCOME_I_ALREADY_HAVE_A_WALLET},
     {"braveWalletBackupIntroTitle", IDS_BRAVE_WALLET_BACKUP_INTRO_TITLE},
     {"braveWalletBackupIntroDescription",
      IDS_BRAVE_WALLET_BACKUP_INTRO_DESCRIPTION},
@@ -602,7 +605,9 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
     {"braveWalletNetworkFilterAll", IDS_BRAVE_WALLET_NETWORK_FILTER_ALL},
     {"braveWalletEditGasLimitError", IDS_BRAVE_WALLET_EDIT_GAS_LIMIT_ERROR},
     {"braveWalletNetworkFilterSecondary",
-     IDS_BRAVE_WALLET_NETWORK_FILTER_SECONDARY}};
+     IDS_BRAVE_WALLET_NETWORK_FILTER_SECONDARY},
+    {"braveWalletWhatIsACryptoWallet",
+     IDS_BRAVE_WALLET_WHAT_IS_A_CRYPTO_WALLET}};
 
 // Swap constants
 const char kRopstenSwapBaseAPIURL[] = "https://ropsten.api.0x.org/";

components/brave_wallet_ui/common/async/__mocks__/lib.ts

@@ -74,3 +74,12 @@ export const findUnstoppableDomainAddress = async (address: string) => {
 export const getChecksumEthAddress = async () => {
   return {} as GetChecksumEthAddressReturnInfo
 }
+
+export const isStrongPassword = (value: string) => {
+  return (
+    (value.length >= 7) && // is at least 7 characters
+    /[-’/`~!#*$@_%+=.,^&(){}[\]|;:”<>?\\]/g.test(value) && // contains a special character
+    value.toLowerCase() !== value && // contains an uppercase character
+    /\d/.test(value) // contains a number
+  )
+}

components/brave_wallet_ui/common/hooks/index.ts

@@ -15,19 +15,21 @@ import useTokenInfo from './token'
 import useExplorer from './explorer'
 import useAssetManagement from './assets-management'
 import { useLib } from './useLib'
+import { usePasswordStrength } from './use-password-strength'
 
 export {
+  useAddressLabels,
+  useAssetManagement,
   useAssets,
-  useSwap,
   useBalance,
-  useTransactionParser,
-  useTransactionFeesParser,
+  useExplorer,
+  useLib,
+  usePasswordStrength,
+  usePreset,
   usePricing,
-  useAddressLabels,
   useSend,
-  usePreset,
+  useSwap,
   useTokenInfo,
-  useExplorer,
-  useAssetManagement,
-  useLib
+  useTransactionFeesParser,
+  useTransactionParser
 }

components/brave_wallet_ui/common/hooks/use-password-strength.ts

@@ -0,0 +1,99 @@
+// Copyright (c) 2022 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 http://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+import { useLib } from './useLib'
+
+export interface PasswordStrengthResults {
+  isLongEnough: boolean
+  containsSpecialChar: boolean
+  containsUppercase: boolean
+  containsNumber: boolean
+}
+
+const STRONG_PASSWORD_RESULTS = {
+  containsNumber: true,
+  containsSpecialChar: true,
+  containsUppercase: true,
+  isLongEnough: true
+} as const
+
+export const usePasswordStrength = () => {
+  // custom hooks
+  const { isStrongPassword: checkIsStrongPassword } = useLib()
+
+  // state
+  const [password, setPassword] = React.useState<string>('')
+  const [confirmedPassword, setConfirmedPassword] = React.useState<string>('')
+  const [isStrongPassword, setIsStrongPassword] = React.useState<boolean>(false)
+
+  const onPasswordChanged = React.useCallback(async (value: string) => {
+    setPassword(value)
+    const isStrong = await checkIsStrongPassword(value)
+    setIsStrongPassword(isStrong)
+  }, [checkIsStrongPassword])
+
+  const hasPasswordError = React.useMemo(() => {
+    if (password === '') {
+      return false
+    }
+    return !isStrongPassword
+  }, [password, isStrongPassword])
+
+  const hasConfirmedPasswordError = React.useMemo(() => {
+    if (confirmedPassword === '') {
+      return false
+    } else {
+      return confirmedPassword !== password
+    }
+  }, [confirmedPassword, password])
+
+  // granular results of password strength check
+  const passwordStrength: PasswordStrengthResults = React.useMemo(() => {
+    if (isStrongPassword) {
+      // backend reported password as strong, so all checks passed
+      return STRONG_PASSWORD_RESULTS
+    }
+
+    // is at least 7 characters
+    const isLongEnough = password.length >= 7
+
+    // contains a special character
+    const containsSpecialChar = /[-’/`~!#*$@_%+=.,^&(){}[\]|;:”<>?\\]/g.test(password)
+
+    // contains an uppercase character
+    const containsUppercase = password.toLowerCase() !== password
+
+    // contains a number
+    const containsNumber = /\d/.test(password)
+
+    return {
+      isLongEnough,
+      containsSpecialChar,
+      containsUppercase,
+      containsNumber
+    }
+  }, [password, isStrongPassword])
+
+  const isValid = !(
+    hasConfirmedPasswordError ||
+    hasPasswordError ||
+    password === '' ||
+    confirmedPassword === ''
+  )
+
+  return {
+    confirmedPassword,
+    password,
+    onPasswordChanged,
+    setConfirmedPassword,
+    isStrongPassword,
+    isValid,
+    hasConfirmedPasswordError,
+    hasPasswordError,
+    checkIsStrongPassword,
+    passwordStrength
+  }
+}

components/brave_wallet_ui/components/desktop/steps-navigation/steps-navigation.stories.tsx

@@ -0,0 +1,25 @@
+// Copyright (c) 2022 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 http://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+import { MemoryRouter as Router, Route } from 'react-router'
+
+import { StepsNavigation } from './steps-navigation'
+
+export const Nav = () => {
+  return <Router>
+    <Route path={'/:currentStep'}>
+      {({ match }) => (
+        <StepsNavigation
+          steps={['1', '2', '3']}
+          currentStep={match?.params.currentStep || '1'}
+          goBack={() => alert('go back')}
+        />
+      )}
+    </Route>
+  </Router>
+}
+
+export default Nav

components/brave_wallet_ui/components/desktop/steps-navigation/steps-navigation.style.ts

@@ -0,0 +1,63 @@
+// Copyright (c) 2022 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 http://mozilla.org/MPL/2.0/.
+
+import styled, { css } from 'styled-components'
+import { WalletButton } from '../../shared/style'
+
+const Font = css`
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 13px;
+  line-height: 20px;
+  color: ${(p) => p.theme.color.text02};
+`
+
+export const Wrapper = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 10fr 1fr;
+  width: 100%;
+  margin-bottom: 60px;
+`
+
+export const BackButton = styled(WalletButton)`
+  ${Font}
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  text-align: center;
+  align-self: flex-start;
+  color: ${(p) => p.theme.color.text01};
+  cursor: pointer;
+  outline: none;
+  background: none;
+  padding: 3px 0px;
+  line-height: 20px;
+  letter-spacing: 0.01em;
+  border: none;
+  gap: 12px;
+`
+
+export const DotsWrapper = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  
+  & > * {
+    display: inline;
+    width: 10px;
+    height: 10px;
+    border-radius: 25px;
+    margin-right: 16px;
+    background-color: ${(p) => p.theme.color.divider01};
+  }
+
+  & > .active {
+    background-color: ${(p) => p.theme.color.interactive05};
+  }
+`

components/brave_wallet_ui/components/desktop/steps-navigation/steps-navigation.tsx

@@ -0,0 +1,61 @@
+// Copyright (c) 2022 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 http://mozilla.org/MPL/2.0/.
+
+import { getLocale } from '$web-common/locale'
+import * as React from 'react'
+import { NavLink } from 'react-router-dom'
+import { BackIcon } from '../../buy-send-swap/select-header/style'
+
+import { BackButton, DotsWrapper, Wrapper } from './steps-navigation.style'
+
+export interface StepsNavigationProps<T extends string> {
+  readonly steps: T[]
+  currentStep: T
+  goBack: () => void
+  preventSkipAhead?: boolean
+}
+
+export const StepsNavigation: <T extends string>(
+  props: StepsNavigationProps<T>
+) => JSX.Element = ({
+  preventSkipAhead,
+  currentStep,
+  goBack,
+  steps
+}) => {
+  const currentStepIndex = steps.findIndex(s => s === currentStep)
+
+  return (
+    <Wrapper>
+
+      <BackButton onClick={goBack}>
+        <BackIcon />
+        {getLocale('braveWalletBack')}
+      </BackButton>
+
+      <DotsWrapper>
+        {steps.map((stepName, stepIndex) => {
+          const showLink = stepIndex > currentStepIndex
+            ? !preventSkipAhead
+            : true
+
+          return showLink
+            ? <NavLink
+                to={`/${stepName}`}
+                key={stepName}
+                isActive={() => currentStep === stepName}
+                activeClassName="active"
+              />
+            : <div />
+        })}
+      </DotsWrapper>
+
+      <div />
+
+    </Wrapper>
+  )
+}
+
+export default StepsNavigation

components/brave_wallet_ui/components/extension/buttons/nav-button/style.ts

@@ -8,6 +8,7 @@ interface StyleProps {
   buttonType: PanelButtonTypes
   disabled?: boolean
   addTopMargin?: boolean
+  fullWidth?: boolean
 }
 
 export const StyledButton = styled(WalletButton) <Partial<StyleProps>>`

components/brave_wallet_ui/components/shared/back-button/index.tsx

@@ -13,7 +13,10 @@ export interface Props {
 const BackButton = (props: Props) => {
   const { onSubmit } = props
   return (
-    <StyledWrapper onClick={onSubmit}><BackIcon />{getLocale('braveWalletBack')}</StyledWrapper>
+    <StyledWrapper onClick={onSubmit}>
+      <BackIcon />
+      {getLocale('braveWalletBack')}
+    </StyledWrapper>
   )
 }
 export default BackButton

components/brave_wallet_ui/components/shared/back-button/style.ts

@@ -5,21 +5,21 @@ import { WalletButton } from '../style'
 // Will use brave-ui button comp in the future!
 // Currently is missing "tiny" variant
 export const StyledWrapper = styled(WalletButton)`
-  display: flex;;
+  display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   outline: none;
   background: none;
-  border-radius: 48px;
   padding: 3px 14px;
-  border: ${(p) => `1px solid ${p.theme.color.interactive08}`};
   font-family: Poppins;
   font-weight: 600;
   font-size: 12px;
   line-height: 18px;
   letter-spacing: 0.01em;
   color: ${(p) => p.theme.color.interactive07};
+  border: ${(p) => `1px solid ${p.theme.color.interactive08}`};
+  border-radius: 48px;
 `
 
 export const BackIcon = styled(CaratStrongLeftIcon)`