Fix store hide portfolio chart pref

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

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;
 `

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 (
     <StyledWrapper>
 
@@ -57,12 +60,13 @@ export const ChartControlBar = React.memo(({
       </RowReveal>
 
       {onDisabledChanged &&
-        <StyledButton as="div">
-          <ToggleVisibilityButton
+        <ToggleVisibilityButton
+          onClick={toggleIsDisabled}
+        >
+          <ToggleVisibilityIcon
             isVisible={!disabled}
-            onClick={() => onDisabledChanged(!disabled)}
           />
-        </StyledButton>
+        </ToggleVisibilityButton>
       }
     </StyledWrapper>
   )

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<string>()
   const [hideBalances, setHideBalances] = React.useState<boolean>(false)
-  const [showChart, setShowChart] = React.useState<boolean>(false)
+  const [showChart, setShowChart] = React.useState<boolean>(
+    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 = () => {
             <ChartControlBar
               disabled={!showChart}
               onSelectTimeframe={onChangeTimeline}
-              onDisabledChanged={() => setShowChart(prev => !prev)}
+              onDisabledChanged={onToggleShowChart}
               selectedTimeline={selectedPortfolioTimeline}
               timelineOptions={ChartTimelineOptions}
             />