From 44cb45a18a03fdd29af0e7f253873fe51f5d6f92 Mon Sep 17 00:00:00 2001 From: Douglas Daniel Date: Mon, 13 Feb 2023 17:11:06 -0600 Subject: [PATCH] fix(wallet): Updated Fund Screens With Nav --- .../centered-page-layout.style.ts | 4 +-- .../centered-page-layout.tsx | 7 +++--- components/brave_wallet_ui/page/container.tsx | 22 +++++++++------- .../screens/fund-wallet/deposit-funds.tsx | 20 ++++++--------- .../page/screens/fund-wallet/fund-wallet.tsx | 25 +++++++------------ .../screens/onboarding/onboarding.style.ts | 9 ++++--- .../screens/send/send-page/send-screen.tsx | 4 +-- .../tab-header/tab-header.style.ts} | 14 ++++++----- .../tab-header/tab-header.tsx} | 22 ++++++++++------ .../toggle-theme-button.style.ts | 10 ++++---- .../toggle-theme-button.tsx | 4 +-- 11 files changed, 71 insertions(+), 70 deletions(-) rename components/brave_wallet_ui/page/screens/{send/components/header/header.style.ts => shared-screen-components/tab-header/tab-header.style.ts} (68%) rename components/brave_wallet_ui/page/screens/{send/components/header/header.tsx => shared-screen-components/tab-header/tab-header.tsx} (61%) rename components/brave_wallet_ui/page/screens/{send/components/header => shared-screen-components/tab-header}/toggle-theme-button/toggle-theme-button.style.ts (75%) rename components/brave_wallet_ui/page/screens/{send/components/header => shared-screen-components/tab-header}/toggle-theme-button/toggle-theme-button.tsx (81%) diff --git a/components/brave_wallet_ui/components/desktop/centered-page-layout/centered-page-layout.style.ts b/components/brave_wallet_ui/components/desktop/centered-page-layout/centered-page-layout.style.ts index e4d65bcff514..3e5ce7913f82 100644 --- a/components/brave_wallet_ui/components/desktop/centered-page-layout/centered-page-layout.style.ts +++ b/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; ` diff --git a/components/brave_wallet_ui/components/desktop/centered-page-layout/centered-page-layout.tsx b/components/brave_wallet_ui/components/desktop/centered-page-layout/centered-page-layout.tsx index 3838a73c4977..a2c837af7e8e 100644 --- a/components/brave_wallet_ui/components/desktop/centered-page-layout/centered-page-layout.tsx +++ b/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>(({ - children +export const CenteredPageLayout = React.memo>(({ + children, + isTabView }) => { return ( - + {children} diff --git a/components/brave_wallet_ui/page/container.tsx b/components/brave_wallet_ui/page/container.tsx index 8acce1bf5da9..321b1e4ae598 100644 --- a/components/brave_wallet_ui/page/container.tsx +++ b/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 = () => { - - - + {!isWalletLocked && + + + + } - - - + {!isWalletLocked && + + + + } diff --git a/components/brave_wallet_ui/page/screens/fund-wallet/deposit-funds.tsx b/components/brave_wallet_ui/page/screens/fund-wallet/deposit-funds.tsx index 9cf714f1661b..a2e5c6f87756 100644 --- a/components/brave_wallet_ui/page/screens/fund-wallet/deposit-funds.tsx +++ b/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) => 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 ( - - + + + + {/* Hide nav when creating or searching accounts */} @@ -321,10 +316,9 @@ export const DepositFundsScreen = () => { ) && } diff --git a/components/brave_wallet_ui/page/screens/fund-wallet/fund-wallet.tsx b/components/brave_wallet_ui/page/screens/fund-wallet/fund-wallet.tsx index a62dc195b01d..fc995b2d3e62 100644 --- a/components/brave_wallet_ui/page/screens/fund-wallet/fund-wallet.tsx +++ b/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) => 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 ( - - + + + + {/* Hide nav when creating or searching accounts */} @@ -275,10 +270,9 @@ export const FundWalletScreen = () => { ) && } @@ -426,7 +420,6 @@ export const FundWalletScreen = () => { } } - diff --git a/components/brave_wallet_ui/page/screens/onboarding/onboarding.style.ts b/components/brave_wallet_ui/page/screens/onboarding/onboarding.style.ts index bdbcddec5c29..3d81c49d4d21 100644 --- a/components/brave_wallet_ui/page/screens/onboarding/onboarding.style.ts +++ b/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'}; diff --git a/components/brave_wallet_ui/page/screens/send/send-page/send-screen.tsx b/components/brave_wallet_ui/page/screens/send/send-page/send-screen.tsx index 56c2c699e261..ca2232ee32b9 100644 --- a/components/brave_wallet_ui/page/screens/send/send-page/send-screen.tsx +++ b/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 ( - + setShowSelectTokenModal(true)} diff --git a/components/brave_wallet_ui/page/screens/send/components/header/header.style.ts b/components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.style.ts similarity index 68% rename from components/brave_wallet_ui/page/screens/send/components/header/header.style.ts rename to components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.style.ts index 674b53c36041..40a48f462bf4 100644 --- a/components/brave_wallet_ui/page/screens/send/components/header/header.style.ts +++ b/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; diff --git a/components/brave_wallet_ui/page/screens/send/components/header/header.tsx b/components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.tsx similarity index 61% rename from components/brave_wallet_ui/page/screens/send/components/header/header.tsx rename to components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.tsx index 813559ad6e14..a77fb5f50967 100644 --- a/components/brave_wallet_ui/page/screens/send/components/header/header.tsx +++ b/components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.tsx @@ -1,21 +1,27 @@ -// 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 ( @@ -23,7 +29,7 @@ export const SendHeader = () => { - {getLocale('braveWalletSend')} + {getLocale(title)} {/* 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 diff --git a/components/brave_wallet_ui/page/screens/send/components/header/toggle-theme-button/toggle-theme-button.style.ts b/components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/toggle-theme-button/toggle-theme-button.style.ts similarity index 75% rename from components/brave_wallet_ui/page/screens/send/components/header/toggle-theme-button/toggle-theme-button.style.ts rename to components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/toggle-theme-button/toggle-theme-button.style.ts index cfbe65235069..aaeb006b3c91 100644 --- a/components/brave_wallet_ui/page/screens/send/components/header/toggle-theme-button/toggle-theme-button.style.ts +++ b/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}; diff --git a/components/brave_wallet_ui/page/screens/send/components/header/toggle-theme-button/toggle-theme-button.tsx b/components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/toggle-theme-button/toggle-theme-button.tsx similarity index 81% rename from components/brave_wallet_ui/page/screens/send/components/header/toggle-theme-button/toggle-theme-button.tsx rename to components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/toggle-theme-button/toggle-theme-button.tsx index 192a89a58c48..786f3dbc9985 100644 --- a/components/brave_wallet_ui/page/screens/send/components/header/toggle-theme-button/toggle-theme-button.tsx +++ b/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'