From ee3393b8cd66fc3271e849856b987d5658f981b1 Mon Sep 17 00:00:00 2001 From: Josh Leonard Date: Fri, 4 Nov 2022 11:37:15 -0600 Subject: [PATCH 1/2] fix: store user pref for hiding portfolio chart --- .../common/constants/local-storage-keys.ts | 11 +++++++++++ .../views/portfolio/portfolio-overview.tsx | 19 ++++++++++++++++--- 2 files changed, 27 insertions(+), 3 deletions(-) create mode 100644 components/brave_wallet_ui/common/constants/local-storage-keys.ts diff --git a/components/brave_wallet_ui/common/constants/local-storage-keys.ts b/components/brave_wallet_ui/common/constants/local-storage-keys.ts new file mode 100644 index 000000000000..6219f0091df6 --- /dev/null +++ b/components/brave_wallet_ui/common/constants/local-storage-keys.ts @@ -0,0 +1,11 @@ +// 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/. + +/** + * Key for localStorage object that records if the user has closed the sweepstakes banner. +*/ +export const LOCAL_STORAGE_KEYS = { + IS_PORTFOLIO_OVERVIEW_GRAPH_HIDDEN: 'BRAVE_WALLET_IS_WALLET_PORTFOLIO_OVERVIEW_GRAPH_HIDDEN' +} as const diff --git a/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-overview.tsx b/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-overview.tsx index 0270e43a67fe..b4300cac6312 100644 --- a/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-overview.tsx +++ b/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-overview.tsx @@ -16,9 +16,10 @@ import { SupportedTestNetworks, WalletRoutes } from '../../../../constants/types' -import { getLocale } from '../../../../../common/locale' +import { LOCAL_STORAGE_KEYS } from '../../../../common/constants/local-storage-keys' // Utils +import { getLocale } from '../../../../../common/locale' import Amount from '../../../../utils/amount' import { getBalance } from '../../../../utils/balance-utils' import { computeFiatAmount } from '../../../../utils/pricing-utils' @@ -179,7 +180,9 @@ export const PortfolioOverview = () => { // state const [hoverBalance, setHoverBalance] = React.useState() const [hideBalances, setHideBalances] = React.useState(false) - const [showChart, setShowChart] = React.useState(false) + const [showChart, setShowChart] = React.useState( + window.localStorage.getItem(LOCAL_STORAGE_KEYS.IS_PORTFOLIO_OVERVIEW_GRAPH_HIDDEN) === 'true' + ) // methods const onChangeTimeline = React.useCallback((timeline: BraveWallet.AssetPriceTimeframe) => { @@ -207,6 +210,16 @@ export const PortfolioOverview = () => { setHideBalances(prev => !prev) }, []) + const onToggleShowChart = () => { + setShowChart(prev => { + window.localStorage.setItem( + LOCAL_STORAGE_KEYS.IS_PORTFOLIO_OVERVIEW_GRAPH_HIDDEN, + prev ? 'false' : 'true' + ) + return !prev + }) + } + // effects React.useEffect(() => { dispatch(WalletPageActions.selectAsset({ asset: undefined, timeFrame: selectedTimeline })) @@ -247,7 +260,7 @@ export const PortfolioOverview = () => { setShowChart(prev => !prev)} + onDisabledChanged={onToggleShowChart} selectedTimeline={selectedPortfolioTimeline} timelineOptions={ChartTimelineOptions} /> From b180799d8b558d4ed2363bdce86c48dfa3be79fc Mon Sep 17 00:00:00 2001 From: Josh Leonard Date: Fri, 4 Nov 2022 13:03:37 -0600 Subject: [PATCH 2/2] fix: larger clickable area for toggle chart btn --- .../chart-control-bar.style.ts | 35 +++++++++++++++---- .../chart-control-bar/chart-control-bar.tsx | 16 +++++---- 2 files changed, 39 insertions(+), 12 deletions(-) diff --git a/components/brave_wallet_ui/components/desktop/chart-control-bar/chart-control-bar.style.ts b/components/brave_wallet_ui/components/desktop/chart-control-bar/chart-control-bar.style.ts index 012afe449c10..ceb3a554fd4b 100644 --- a/components/brave_wallet_ui/components/desktop/chart-control-bar/chart-control-bar.style.ts +++ b/components/brave_wallet_ui/components/desktop/chart-control-bar/chart-control-bar.style.ts @@ -4,6 +4,12 @@ // you can obtain one at http://mozilla.org/MPL/2.0/. import styled from 'styled-components' + +// icons +import EyeOnIcon from '../../../assets/svg-icons/eye-on-icon.svg' +import EyeOffIcon from '../../../assets/svg-icons/eye-off-icon.svg' + +// styles import { WalletButton } from '../../shared/style' export const StyledWrapper = styled.div` @@ -15,6 +21,7 @@ export const StyledWrapper = styled.div` box-sizing: border-box; border-radius: 12px; padding: 8px; + background: none; --selected-color: ${p => p.theme.palette.white}; @media (prefers-color-scheme: dark) { --selected-color: ${p => p.theme.color.background02}; @@ -48,10 +55,26 @@ export const ButtonText = styled.span<{ isSelected?: boolean, disabled?: boolean }; ` -export const Dot = styled.div<{ isSelected?: boolean }>` - width: 6px; - height: 6px; - border-radius: 100%; - margin-right: 6px; - background-color: ${p => p.isSelected ? 'var(--selected-color)' : p.theme.color.disabled}; +export const ToggleVisibilityButton = styled(WalletButton)` + cursor: pointer; + outline: none; + background: none; + border: none; + padding-left: 4px; + padding-right: 4px; + display: flex; + align-items: center; + justify-content: center; +` + +export const ToggleVisibilityIcon = styled.div<{ + isVisible: boolean +}>` + width: 18px; + height: 18px; + background-color: ${(p) => p.theme.color.text02}; + -webkit-mask-image: url(${(p) => !p.isVisible ? EyeOffIcon : EyeOnIcon}); + mask-image: url(${(p) => !p.isVisible ? EyeOffIcon : EyeOnIcon}); + mask-size: contain; + mask-repeat: no-repeat; ` diff --git a/components/brave_wallet_ui/components/desktop/chart-control-bar/chart-control-bar.tsx b/components/brave_wallet_ui/components/desktop/chart-control-bar/chart-control-bar.tsx index 336f7c1e874c..97bd29fac0ba 100644 --- a/components/brave_wallet_ui/components/desktop/chart-control-bar/chart-control-bar.tsx +++ b/components/brave_wallet_ui/components/desktop/chart-control-bar/chart-control-bar.tsx @@ -13,11 +13,12 @@ import { BraveWallet, ChartTimelineObjectType } from '../../../constants/types' import RowReveal from '../../shared/animated-reveals/row-reveal' // Styled Components -import { ToggleVisibilityButton } from '../../shared/style' import { StyledWrapper, ButtonText, - StyledButton + StyledButton, + ToggleVisibilityButton, + ToggleVisibilityIcon } from './chart-control-bar.style' export interface Props { @@ -35,6 +36,8 @@ export const ChartControlBar = React.memo(({ selectedTimeline, timelineOptions }: Props) => { + const toggleIsDisabled = () => onDisabledChanged?.(!disabled) + return ( @@ -57,12 +60,13 @@ export const ChartControlBar = React.memo(({ {onDisabledChanged && - - + onDisabledChanged(!disabled)} /> - + } )