feat: add portfolio graph visibility toggle button

components/brave_wallet_ui/common/selectors/wallet-selectors.ts

@@ -55,3 +55,4 @@ export const transactionProviderErrorRegistry = ({ wallet }: State) => wallet.tr
 export const transactionSpotPrices = ({ wallet }: State) => wallet.transactionSpotPrices
 export const transactions = ({ wallet }: State) => wallet.transactions
 export const userVisibleTokensInfo = ({ wallet }: State) => wallet.userVisibleTokensInfo
+export const selectedAccountFilter = ({ wallet }: State) => wallet.selectedAccountFilter

components/brave_wallet_ui/components/desktop/chart-control-bar/style.ts → components/brave_wallet_ui/components/desktop/chart-control-bar/chart-control-bar.style.ts

@@ -1,8 +1,10 @@
+// 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/.
+
 import styled from 'styled-components'
 import { WalletButton } from '../../shared/style'
-interface StyleProps {
-  isSelected: boolean
-}
 
 export const StyledWrapper = styled.div`
   display: flex;
@@ -19,29 +21,34 @@ export const StyledWrapper = styled.div`
   }
 `
 
-export const StyledButton = styled(WalletButton) <Partial<StyleProps>>`
+export const StyledButton = styled(WalletButton)<{ isSelected?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
+  cursor: ${(p) => p.disabled ? 'not-allowed' : 'pointer'};
   border-radius: 4px;
   outline: none;
   padding: 4px 6px;
   background: ${(p) =>
-    p.isSelected ? p.theme.color.text02 : 'none'};
+    p.isSelected && !p.disabled ? p.theme.color.text02 : 'none'};
   border: none;
   margin: 0px 2px;
 `
 
-export const ButtonText = styled.span<Partial<StyleProps>>`
+export const ButtonText = styled.span<{ isSelected?: boolean, disabled?: boolean }>`
   font-family: Poppins;
   font-size: 14px;
   font-weight: 600;
   letter-spacing: 0.01em;
-  color: ${p => p.isSelected ? 'var(--selected-color)' : p.theme.color.text02};
+  color: ${p => p.disabled
+    ? p.theme.color.disabled
+    : p.isSelected
+      ? 'var(--selected-color)'
+      : p.theme.color.text02
+  };
 `
 
-export const Dot = styled.div<Partial<StyleProps>>`
+export const Dot = styled.div<{ isSelected?: boolean }>`
   width: 6px;
   height: 6px;
   border-radius: 100%;

components/brave_wallet_ui/components/desktop/chart-control-bar/chart-control-bar.tsx

@@ -0,0 +1,69 @@
+// 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/.
+
+import * as React from 'react'
+
+// utils
+import { getLocale } from '../../../../common/locale'
+
+// types
+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
+} from './chart-control-bar.style'
+
+export interface Props {
+  disabled?: boolean
+  onDisabledChanged?: (isDisabled: boolean) => void
+  onSelectTimeframe: (id: BraveWallet.AssetPriceTimeframe) => void
+  selectedTimeline: BraveWallet.AssetPriceTimeframe
+  timelineOptions: ChartTimelineObjectType[]
+}
+
+export const ChartControlBar = React.memo(({
+  disabled,
+  onDisabledChanged,
+  onSelectTimeframe,
+  selectedTimeline,
+  timelineOptions
+}: Props) => {
+  return (
+    <StyledWrapper>
+
+      <RowReveal hideContent={disabled}>
+        {timelineOptions.map((t) =>
+          <StyledButton
+            key={t.id}
+            onClick={() => onSelectTimeframe(t.id)}
+            isSelected={selectedTimeline === t.id}
+            disabled={disabled}
+          >
+            <ButtonText
+              isSelected={selectedTimeline === t.id}
+              disabled={disabled}
+            >
+              {getLocale(t.name)}
+            </ButtonText>
+          </StyledButton>
+        )}
+      </RowReveal>
+
+      {onDisabledChanged &&
+        <StyledButton as="div">
+          <ToggleVisibilityButton
+            isVisible={!disabled}
+            onClick={() => onDisabledChanged(!disabled)}
+          />
+        </StyledButton>
+      }
+    </StyledWrapper>
+  )
+})

components/brave_wallet_ui/components/desktop/index.ts

@@ -9,7 +9,6 @@ import TopTabNavButton from './top-tab-nav-button'
 import TopTabNav from './top-tab-nav'
 import WalletPageLayout from './wallet-page-layout'
 import WalletSubViewLayout from './wallet-sub-view-layout'
-import ChartControlBar from './chart-control-bar'
 import LineChart from './line-chart'
 import PortfolioAssetItem from './portfolio-asset-item'
 import PortfolioAccountItem from './portfolio-account-item'
@@ -41,7 +40,6 @@ export {
   TopTabNav,
   WalletPageLayout,
   WalletSubViewLayout,
-  ChartControlBar,
   LineChart,
   PortfolioAssetItem,
   PortfolioAccountItem,

components/brave_wallet_ui/components/desktop/views/portfolio/components/accounts-and-transctions-list/index.tsx

@@ -35,14 +35,14 @@ import {
   AssetBalanceDisplay,
   DividerRow
 } from '../../style'
+import { HorizontalSpace, Row, ToggleVisibilityButton } from '../../../../../shared/style'
 
 export interface Props {
   selectedAsset: BraveWallet.BlockchainToken | undefined
   networkList: BraveWallet.NetworkInfo[]
   fullAssetFiatBalance: Amount
   formattedFullAssetBalance: string
   selectedAssetTransactions: BraveWallet.TransactionInfo[]
-  hideBalances: boolean
   onClickAddAccount: (tabId: AddAccountNavTypes) => () => void
 }
 
@@ -52,7 +52,6 @@ const AccountsAndTransactionsList = (props: Props) => {
     fullAssetFiatBalance,
     formattedFullAssetBalance,
     selectedAssetTransactions,
-    hideBalances,
     networkList,
     onClickAddAccount
   } = props
@@ -65,6 +64,9 @@ const AccountsAndTransactionsList = (props: Props) => {
     selectedNetwork
   } = useSelector(({ wallet }: { wallet: WalletState }) => wallet)
 
+  // state
+  const [hideBalances, setHideBalances] = React.useState<boolean>(false)
+
   const selectedAssetsNetwork = React.useMemo(() => {
     if (!selectedAsset) {
       return selectedNetwork
@@ -99,16 +101,23 @@ const AccountsAndTransactionsList = (props: Props) => {
         <>
           <DividerRow>
             <DividerText>{selectedAsset?.isErc721 ? getLocale('braveWalletOwner') : getLocale('braveWalletAccounts')}</DividerText>
-            {!selectedAsset?.isErc721 &&
-              <WithHideBalancePlaceholder
-                size='small'
-                hideBalances={hideBalances}
-              >
-                <AssetBalanceDisplay>
-                  {fullAssetFiatBalance.formatAsFiat(defaultCurrencies.fiat)} {formattedFullAssetBalance}
-                </AssetBalanceDisplay>
-              </WithHideBalancePlaceholder>
-            }
+            <Row justifyContent='flex-end'>
+              {!selectedAsset?.isErc721 &&
+                <WithHideBalancePlaceholder
+                  size='small'
+                  hideBalances={hideBalances}
+                >
+                  <AssetBalanceDisplay>
+                    {fullAssetFiatBalance.formatAsFiat(defaultCurrencies.fiat)} {formattedFullAssetBalance}
+                  </AssetBalanceDisplay>
+                </WithHideBalancePlaceholder>
+              }
+              <HorizontalSpace space='16px' />
+              <ToggleVisibilityButton
+                isVisible={!hideBalances}
+                onClick={() => setHideBalances(prev => !prev)}
+              />
+            </Row>
           </DividerRow>
           <SubDivider />
           {accountsList.map((account) =>

components/brave_wallet_ui/components/desktop/views/portfolio/components/portfolio-overview-chart/portfolio-overview-chart.tsx

@@ -0,0 +1,66 @@
+// 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/.
+
+import * as React from 'react'
+
+// types
+import { PriceDataObjectType } from '../../../../../../constants/types'
+
+// utils
+import { useSafeWalletSelector, useUnsafeWalletSelector } from '../../../../../../common/hooks/use-safe-selector'
+import { WalletSelectors } from '../../../../../../common/selectors'
+import Amount from '../../../../../../utils/amount'
+
+// components
+import LineChart from '../../../../line-chart'
+
+// style
+import { Column } from '../../../../../shared/style'
+
+interface Props {
+  hasZeroBalance: boolean
+  onHover: (priceAtPosition?: string | undefined) => void
+}
+
+export const PortfolioOverviewChart: React.FC<Props> = ({
+  hasZeroBalance,
+  onHover
+}) => {
+  // safe selectors
+  const defaultFiatCurrency = useSafeWalletSelector(WalletSelectors.defaultFiatCurrency)
+  const isFetchingPortfolioPriceHistory = useSafeWalletSelector(WalletSelectors.isFetchingPortfolioPriceHistory)
+
+  // unsafe selectors
+  const portfolioPriceHistory = useUnsafeWalletSelector(WalletSelectors.portfolioPriceHistory)
+
+  // memos
+  const priceHistory = React.useMemo((): PriceDataObjectType[] => {
+    if (hasZeroBalance) {
+      return []
+    }
+    return portfolioPriceHistory
+  }, [portfolioPriceHistory, hasZeroBalance])
+
+  // methods
+  const onUpdateBalance = React.useCallback((value: number | undefined) => {
+    onHover(value ? new Amount(value).formatAsFiat(defaultFiatCurrency) : undefined)
+  }, [onHover, defaultFiatCurrency])
+
+  // render
+  return (
+    <Column alignItems='center' fullWidth>
+      <LineChart
+        isDown={false}
+        isAsset={false}
+        priceData={priceHistory}
+        onUpdateBalance={onUpdateBalance}
+        isLoading={hasZeroBalance ? false : isFetchingPortfolioPriceHistory}
+        isDisabled={hasZeroBalance}
+      />
+    </Column>
+  )
+}
+
+export default PortfolioOverviewChart