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/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)}
/>
-
+
}
)
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}
/>