feat: animate chart show/hide

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

@@ -10,6 +10,7 @@ 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'
@@ -36,21 +37,24 @@ export const ChartControlBar = React.memo(({
 }: Props) => {
   return (
     <StyledWrapper>
-      {timelineOptions.map((t) =>
-        <StyledButton
-          key={t.id}
-          onClick={() => onSelectTimeframe(t.id)}
-          isSelected={selectedTimeline === t.id}
-          disabled={disabled}
-        >
-          <ButtonText
+
+      <RowReveal hideContent={disabled}>
+        {timelineOptions.map((t) =>
+          <StyledButton
+            key={t.id}
+            onClick={() => onSelectTimeframe(t.id)}
             isSelected={selectedTimeline === t.id}
             disabled={disabled}
           >
-            {getLocale(t.name)}
-          </ButtonText>
-        </StyledButton>
-      )}
+            <ButtonText
+              isSelected={selectedTimeline === t.id}
+              disabled={disabled}
+            >
+              {getLocale(t.name)}
+            </ButtonText>
+          </StyledButton>
+        )}
+      </RowReveal>
 
       {onDisabledChanged &&
         <StyledButton as="div">

components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-asset.tsx

@@ -364,11 +364,7 @@ export const PortfolioAsset = (props: Props) => {
 
   const onUpdateBalance = React.useCallback((value: number | undefined) => {
     setHoverPrice(value ? new Amount(value).formatAsFiat(defaultCurrencies.fiat) : undefined)
-  }, [defaultCurrencies])
-
-  // const onToggleHideBalances = React.useCallback(() => {
-  //   setHideBalances(prevHideBalances => !prevHideBalances)
-  // }, [])
+  }, [defaultCurrencies.fiat])
 
   const onNftDetailsLoad = React.useCallback(() => setNftIframeLoaded(true), [])
 

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

@@ -58,6 +58,7 @@ import {
 } from '../../../shared/style'
 import { formatAsDouble } from '../../../../utils/string-utils'
 import { ChartControlBar } from '../../chart-control-bar/chart-control-bar'
+import ColumnReveal from '../../../shared/animated-reveals/column-reveal'
 
 export const PortfolioOverview = () => {
   // routing
@@ -258,12 +259,12 @@ export const PortfolioOverview = () => {
 
       <VerticalSpace space='20px' />
 
-      {showChart &&
+      <ColumnReveal hideContent={!showChart}>
         <PortfolioOverviewChart
           hasZeroBalance={isZeroBalance}
           onHover={setHoverBalance}
         />
-      }
+      </ColumnReveal>
 
       <TokenLists
         userAssetList={userAssetList}

components/brave_wallet_ui/components/shared/animated-reveals/column-reveal.styles.tsx

@@ -0,0 +1,25 @@
+// 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'
+
+export const RevealableContentContainer = styled.div<{ hideContent?: boolean }>`
+  --scroll-offset: ${(p) => p?.hideContent ? '-400px' : '0px'};
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  overflow: hidden;
+  height: auto;
+`
+
+export const RevealableContentColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--scroll-offset);
+  transition: margin-top .3s ease-in-out;
+  overflow: hidden;
+  white-space: nowrap;
+  overflow: hidden;
+`

components/brave_wallet_ui/components/shared/animated-reveals/column-reveal.tsx

@@ -0,0 +1,26 @@
+// 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'
+import { RevealableContentContainer, RevealableContentColumn } from './column-reveal.styles'
+
+interface Props {
+  hideContent?: boolean
+}
+
+export const ColumnReveal: React.FC<React.PropsWithChildren<Props>> = ({
+  children,
+  hideContent
+}) => {
+  return (
+    <RevealableContentContainer hideContent={hideContent}>
+      <RevealableContentColumn>
+        {children}
+      </RevealableContentColumn>
+    </RevealableContentContainer>
+  )
+}
+
+export default ColumnReveal

components/brave_wallet_ui/components/shared/animated-reveals/row-reveal.styles.tsx

@@ -0,0 +1,24 @@
+// 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'
+
+export const RevealableContentContainer = styled.div<{ hideContent?: boolean }>`
+  --scroll-offset: ${(p) => p?.hideContent ? '-400px' : '0px'};
+  overflow: hidden;
+  white-space: nowrap;
+  overflow: hidden;
+  width: auto;
+`
+
+export const RevealableContentRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-right: var(--scroll-offset);
+  transition: margin-right .3s ease-in-out;
+  overflow: hidden;
+  white-space: nowrap;
+  overflow: hidden;
+`

components/brave_wallet_ui/components/shared/animated-reveals/row-reveal.tsx

@@ -0,0 +1,26 @@
+// 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'
+import { RevealableContentContainer, RevealableContentRow } from './row-reveal.styles'
+
+interface Props {
+  hideContent?: boolean
+}
+
+export const RowReveal: React.FC<React.PropsWithChildren<Props>> = ({
+  children,
+  hideContent
+}) => {
+  return (
+    <RevealableContentContainer hideContent={hideContent}>
+      <RevealableContentRow>
+        {children}
+      </RevealableContentRow>
+    </RevealableContentContainer>
+  )
+}
+
+export default RowReveal