fix(wallet): Updated Fund Screens With Nav

components/brave_wallet_ui/components/desktop/centered-page-layout/centered-page-layout.style.ts

@@ -18,12 +18,12 @@ export const StyledWrapper = styled('div')`
   overflow-y: auto;
  `
 
-export const StyledContent = styled('div')`
+export const StyledContent = styled('div') <{ isTabView?: boolean }>`
   width: 456px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: 32px;
+  padding-top: ${(p) => p.isTabView ? 0 : 32}px;
   padding-bottom: 0px;
  `

components/brave_wallet_ui/components/desktop/centered-page-layout/centered-page-layout.tsx

@@ -6,12 +6,13 @@
 import * as React from 'react'
 import { StyledWrapper, StyledContent } from './centered-page-layout.style'
 
-export const CenteredPageLayout = React.memo<React.PropsWithChildren<{}>>(({
-  children
+export const CenteredPageLayout = React.memo<React.PropsWithChildren<{ isTabView?: boolean }>>(({
+  children,
+  isTabView
 }) => {
   return (
     <StyledWrapper>
-      <StyledContent>
+      <StyledContent isTabView={isTabView}>
         {children}
       </StyledContent>
     </StyledWrapper>

components/brave_wallet_ui/page/container.tsx

@@ -139,15 +139,15 @@ export const Container = () => {
     if (
       walletLocation.includes(WalletRoutes.Accounts) ||
       walletLocation.includes(WalletRoutes.Backup) ||
-      walletLocation.includes(WalletRoutes.DepositFundsPage) ||
-      walletLocation.includes(WalletRoutes.FundWalletPage) ||
+      walletLocation.includes(WalletRoutes.DepositFundsPageStart) ||
+      walletLocation.includes(WalletRoutes.FundWalletPageStart) ||
       walletLocation.includes(WalletRoutes.Portfolio) ||
       walletLocation.includes(WalletRoutes.Market) ||
       walletLocation.includes(WalletRoutes.Nfts) ||
       walletLocation.includes(WalletRoutes.Swap) ||
       walletLocation.includes(WalletRoutes.Send) ||
       walletLocation.includes(WalletRoutes.LocalIpfsNode ||
-      walletLocation.includes(WalletRoutes.InspectNfts))
+        walletLocation.includes(WalletRoutes.InspectNfts))
     ) {
       setSessionRoute(walletLocation)
     }
@@ -209,13 +209,17 @@ export const Container = () => {
                 <OnboardingSuccess />
               </Route>
 
-              <Route path={WalletRoutes.FundWalletPage} exact>
-                <FundWalletScreen />
-              </Route>
+              {!isWalletLocked &&
+                <Route path={WalletRoutes.FundWalletPage} exact>
+                  <FundWalletScreen />
+                </Route>
+              }
 
-              <Route path={WalletRoutes.DepositFundsPage} exact>
-                <DepositFundsScreen />
-              </Route>
+              {!isWalletLocked &&
+                <Route path={WalletRoutes.DepositFundsPage} exact>
+                  <DepositFundsScreen />
+                </Route>
+              }
 
               <Route path={WalletRoutes.Restore} exact={true}>
                 <SimplePageWrapper>

components/brave_wallet_ui/page/screens/fund-wallet/deposit-funds.tsx

@@ -22,7 +22,6 @@ import {
   SupportedTestNetworks,
   UserAssetInfoType,
   WalletAccountType,
-  WalletRoutes,
   WalletState
 } from '../../../constants/types'
 
@@ -62,6 +61,8 @@ import { NavButton } from '../../../components/extension/buttons/nav-button/inde
 import CreateAccountTab from '../../../components/buy-send-swap/create-account/index'
 import SelectHeader from '../../../components/buy-send-swap/select-header/index'
 import { getBatTokensFromList } from '../../../utils/asset-utils'
+import { BuySendSwapDepositNav } from '../../../components/desktop/buy-send-swap-deposit-nav/buy-send-swap-deposit-nav'
+import { TabHeader } from '../shared-screen-components/tab-header/tab-header'
 
 export const DepositFundsScreen = () => {
   // routing
@@ -183,14 +184,6 @@ export const DepositFundsScreen = () => {
   const closeAccountSearch = React.useCallback(() => setShowAccountSearch(false), [])
   const onSearchTextChanged = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => setAccountSearchText(e.target.value), [])
 
-  const goToPortfolio = React.useCallback(() => {
-    if (tokenId !== undefined) {
-      history.goBack()
-      return
-    }
-    history.push(WalletRoutes.Portfolio)
-  }, [history, tokenId])
-
   const onSelectAccountFromSearch = React.useCallback((account: WalletAccountType) => () => {
     closeAccountSearch()
     setSelectedAccount(account)
@@ -311,8 +304,10 @@ export const DepositFundsScreen = () => {
 
   // render
   return (
-    <CenteredPageLayout>
-      <MainWrapper>
+    <CenteredPageLayout isTabView={true}>
+      <TabHeader title='braveWalletDepositCryptoButton' />
+      <BuySendSwapDepositNav isTab={true} />
+      <MainWrapper isTabView={true}>
         <StyledWrapper>
 
           {/* Hide nav when creating or searching accounts */}
@@ -321,10 +316,9 @@ export const DepositFundsScreen = () => {
           ) &&
             <StepsNavigation
               goBack={onBack}
-              onSkip={goToPortfolio}
-              skipButtonText={getLocale('braveWalletButtonDone')}
               steps={[]}
               currentStep=''
+              preventGoBack={!showDepositAddress}
             />
           }
 

components/brave_wallet_ui/page/screens/fund-wallet/fund-wallet.tsx

@@ -19,7 +19,6 @@ import {
   BraveWallet,
   UserAssetInfoType,
   WalletAccountType,
-  WalletRoutes,
   WalletState
 } from '../../../constants/types'
 import { RenderTokenFunc } from '../../../components/desktop/views/portfolio/components/token-lists/virtualized-tokens-list'
@@ -55,6 +54,8 @@ import CreateAccountTab from '../../../components/buy-send-swap/create-account'
 import SwapInputComponent from '../../../components/buy-send-swap/swap-input-component'
 import SelectHeader from '../../../components/buy-send-swap/select-header'
 import { SelectCurrency } from '../../../components/buy-send-swap/select-currency/select-currency'
+import { BuySendSwapDepositNav } from '../../../components/desktop/buy-send-swap-deposit-nav/buy-send-swap-deposit-nav'
+import { TabHeader } from '../shared-screen-components/tab-header/tab-header'
 
 export const FundWalletScreen = () => {
   // routing
@@ -99,8 +100,8 @@ export const FundWalletScreen = () => {
     const assets = selectedNetworkFilter.chainId === AllNetworksOption.chainId
       ? allBuyAssetOptions
       : allBuyAssetOptions.filter(({ chainId }) =>
-          selectedNetworkFilter.chainId === chainId
-        )
+        selectedNetworkFilter.chainId === chainId
+      )
 
     return assets.map(asset => ({ asset, assetBalance: '1' }))
   }, [selectedNetworkFilter.chainId, allBuyAssetOptions])
@@ -134,14 +135,6 @@ export const FundWalletScreen = () => {
   const closeAccountSearch = React.useCallback(() => setShowAccountSearch(false), [])
   const onSearchTextChanged = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => setAccountSearchText(e.target.value), [])
 
-  const goToPortfolio = React.useCallback(() => {
-    if (tokenId !== undefined) {
-      history.goBack()
-      return
-    }
-    history.push(WalletRoutes.Portfolio)
-  }, [history, tokenId])
-
   const onSelectAccountFromSearch = React.useCallback((account: WalletAccountType) => () => {
     closeAccountSearch()
     setSelectedAccount(account)
@@ -265,8 +258,10 @@ export const FundWalletScreen = () => {
 
   // render
   return (
-    <CenteredPageLayout>
-      <MainWrapper>
+    <CenteredPageLayout isTabView={true}>
+      <TabHeader title='braveWalletBuy' />
+      <BuySendSwapDepositNav isTab={true} />
+      <MainWrapper isTabView={true}>
         <StyledWrapper>
 
           {/* Hide nav when creating or searching accounts */}
@@ -275,10 +270,9 @@ export const FundWalletScreen = () => {
           ) &&
             <StepsNavigation
               goBack={onBack}
-              onSkip={goToPortfolio}
-              skipButtonText={getLocale('braveWalletButtonDone')}
               steps={[]}
               currentStep=''
+              preventGoBack={!showBuyOptions}
             />
           }
 
@@ -426,7 +420,6 @@ export const FundWalletScreen = () => {
               }
             </>
           }
-
         </StyledWrapper>
       </MainWrapper>
     </CenteredPageLayout>

components/brave_wallet_ui/page/screens/onboarding/onboarding.style.ts

@@ -28,7 +28,7 @@ export const NextButtonRow = styled.div`
   margin-bottom: 28px;
 `
 
-export const MainWrapper = styled.div`
+export const MainWrapper = styled.div<{ isTabView?: boolean }>`
   align-self: center;
   width: 100%;
   max-width: 456px;
@@ -38,8 +38,9 @@ export const MainWrapper = styled.div`
   justify-content: center;
   background-color: ${(p) => p.theme.color.background02};
   padding: 30px;
-  border-radius: 8px;
-  margin-top: 10vh;
+  border-radius: ${(p) => p.isTabView ? 24 : 8}px;
+  margin-top: ${(p) => p.isTabView ? '100px' : '10vh'};
+  box-shadow: ${(p) => p.isTabView ? '0px 4px 20px rgba(0, 0, 0, 0.1)' : 'none'};
 `
 
 export const StyledWrapper = styled.div`
@@ -123,7 +124,7 @@ export const PhraseCardBody = styled.div`
   border-radius: 4px;
 `
 
-export const PhraseCardBottomRow = styled(PhraseCardTopRow)<{
+export const PhraseCardBottomRow = styled(PhraseCardTopRow) <{
   centered?: boolean
 }>`
   justify-content: ${(p) => p.centered ? 'center' : 'flex-start'};

components/brave_wallet_ui/page/screens/send/send-page/send-screen.tsx

@@ -15,7 +15,7 @@ import { useOnClickOutside } from '../../../../common/hooks/useOnClickOutside'
 import { SendScreenWrapper } from './send-screen.style'
 
 // Components
-import { SendHeader } from '../components/header/header'
+import { TabHeader } from '../../shared-screen-components/tab-header/tab-header'
 import { Send } from '../send/send'
 import { BuySendSwapDepositNav } from '../../../../components/desktop/buy-send-swap-deposit-nav/buy-send-swap-deposit-nav'
 import { FeatureRequestButton } from '../../../../components/shared/feature-request-button/feature-request-button'
@@ -38,7 +38,7 @@ export const SendScreen = () => {
   // render
   return (
     <SendScreenWrapper>
-      <SendHeader />
+      <TabHeader title='braveWalletSend' />
       <BuySendSwapDepositNav isTab={true} />
       <Send
         onShowSelectTokenModal={() => setShowSelectTokenModal(true)}

components/brave_wallet_ui/page/screens/send/components/header/header.style.ts → components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.style.ts

@@ -1,16 +1,16 @@
-// Copyright (c) 2022 The Brave Authors. All rights reserved.
+// 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/.
+// You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import styled from 'styled-components'
 
 // Assets
-import BraveLogoLight from '../../assets/brave-logo-light.svg'
-import BraveLogoDark from '../../assets/brave-logo-dark.svg'
+import BraveLogoLight from '../../send/assets/brave-logo-light.svg'
+import BraveLogoDark from '../../send/assets/brave-logo-dark.svg'
 
 // Shared Styles
-import { StyledDiv } from '../../shared.styles'
+import { StyledDiv } from '../../send/shared.styles'
 
 export const HeaderWrapper = styled.div`
   display: flex;
@@ -20,7 +20,9 @@ export const HeaderWrapper = styled.div`
   padding: 16px 32px 0px 32px;
   margin-bottom: 45px;
   top: 0;
-  width: 100%;
+  left: 0;
+  right: 0;
+  width: 100vw;
   box-sizing: border-box;
   position: fixed;
   z-index: 10;

components/brave_wallet_ui/page/screens/send/components/header/header.tsx → components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.tsx

@@ -1,29 +1,35 @@
-// Copyright (c) 2022 The Brave Authors. All rights reserved.
+// 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/.
+// You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import * as React from 'react'
 
 // Utils
-import { getLocale } from '../../../../../../common/locale'
+import { getLocale } from '../../../../../common/locale'
 
 // Styled Components
-import { HeaderWrapper, BraveLogo } from './header.style'
-import { HorizontalDivider, Row, Text } from '../../shared.styles'
+import { HeaderWrapper, BraveLogo } from './tab-header.style'
+import { HorizontalDivider, Row, Text } from '../../send/shared.styles'
 
 // Components
 // import { ToggleThemeButton } from './toggle-theme-button/toggle-theme-button'
 
-export const SendHeader = () => {
+interface Props {
+  title: string
+}
+
+export const TabHeader = (props: Props) => {
+  const { title } = props
+
   // render
   return (
     <HeaderWrapper>
       <Row rowHeight='full' verticalAlign='center'>
         <BraveLogo />
         <HorizontalDivider height={22} marginRight={12} />
         <Text textSize='18px' textColor='text02' isBold={true}>
-          {getLocale('braveWalletSend')}
+          {getLocale(title)}
         </Text>
       </Row>
       {/* Disabling Theme Toggle until we can make it work correctly with brave-core */}
@@ -32,4 +38,4 @@ export const SendHeader = () => {
   )
 }
 
-export default SendHeader
+export default TabHeader

components/brave_wallet_ui/page/screens/send/components/header/toggle-theme-button/toggle-theme-button.style.ts → components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/toggle-theme-button/toggle-theme-button.style.ts

@@ -1,16 +1,16 @@
-// Copyright (c) 2022 The Brave Authors. All rights reserved.
+// 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/.
+// You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import styled from 'styled-components'
 
 // Assets
-import DayIcon from '../../../assets/day-icon.svg'
-import NightIcon from '../../../assets/night-icon.svg'
+import DayIcon from '../../../send/assets/assets/day-icon.svg'
+import NightIcon from '../../../send/assets/assets/night-icon.svg'
 
 // Shared Styles
-import { StyledButton, StyledDiv } from '../../../shared.styles'
+import { StyledButton, StyledDiv } from '../../../send/shared.styles'
 
 export const Button = styled(StyledButton)`
   background-color: ${(p) => p.theme.color.background01};

components/brave_wallet_ui/page/screens/send/components/header/toggle-theme-button/toggle-theme-button.tsx → components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/toggle-theme-button/toggle-theme-button.tsx

@@ -1,7 +1,7 @@
-// Copyright (c) 2022 The Brave Authors. All rights reserved.
+// 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/.
+// You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import * as React from 'react'