frontend: only animate after unlocking or redirect to accountsummary

BitBoxSwiss · Oct 7, 2024 · 0fd6336 · 0fd6336
1 parent 45b5192
commit 0fd6336
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/frontends/web/src/app.tsx b/frontends/web/src/app.tsx
@@ -99,7 +99,7 @@ export const App = () => {
  // if on index page and have at least 1 account, route to /account-summary
  if (isIndex && accounts.length) {
  // replace current history entry so that the user cannot go back to "index"
- navigate('/account-summary', { replace: true });
+ navigate('/account-summary?with-chart-animation=true', { replace: true });
  return;
  }
  // if on the /exchange/ view and there are no accounts view route to /

diff --git a/frontends/web/src/routes/account/summary/chart.tsx b/frontends/web/src/routes/account/summary/chart.tsx
@@ -27,6 +27,7 @@ import { getDarkmode } from '@/components/darkmode/darkmode';
 import { DefaultCurrencyRotator } from '@/components/rates/rates';
 import { AppContext } from '@/contexts/AppContext';
 import styles from './chart.module.css';
+import { useSearchParams } from 'react-router-dom';
 
 type TProps = {
  data?: TSummary;
@@ -97,6 +98,7 @@ export const Chart = ({
 
  const { t, i18n } = useTranslation();
  const { chartDisplay, setChartDisplay } = useContext(AppContext);
+ const [searchParams] = useSearchParams();
 
  const ref = useRef<HTMLDivElement>(null);
  const refToolTip = useRef<HTMLSpanElement>(null);
@@ -121,12 +123,15 @@ export const Chart = ({
  toolTipLeft: 0,
  toolTipTime: 0,
  });
+
  const [showAnimationOverlay, setAnimationOverlay] = useState(true);
 
  const prevChartDataDaily = usePrevious(data.chartDataDaily);
  const prevChartDataHourly = usePrevious(data.chartDataHourly);
  const prevChartFiat = usePrevious(data.chartFiat);
  const prevHideAmounts = usePrevious(hideAmounts);
+ const hasChartAnimationParam = searchParams.get('with-chart-animation');
+
 
  const setFormattedData = (chartData: ChartData) => {
  formattedData.current = {};
@@ -436,11 +441,11 @@ export const Chart = ({
  }, [initChart, removeChart]);
 
  useEffect(() => {
- if (data.chartDataMissing) {
+ if (data.chartDataMissing || !hasChartAnimationParam) {
  return;
  }
  setAnimationOverlay(false);
- }, [data.chartDataMissing]);
+ }, [data.chartDataMissing, hasChartAnimationParam]);
 
  useEffect(() => {
  const { utcYear, utcMonth, utcDate, from, to } = getUTCRange();
@@ -539,7 +544,7 @@ export const Chart = ({
  </div>
  {!isMobile && <Filters {...chartFiltersProps} />}
  </header>
- {!chartDataMissing &&
+ {!chartDataMissing && hasChartAnimationParam &&
  <div
  style={{ minHeight: chartHeight }}
  className={`

diff --git a/frontends/web/src/routes/device/bitbox02/wizard.tsx b/frontends/web/src/routes/device/bitbox02/wizard.tsx
@@ -56,7 +56,7 @@ export const Wizard = ({ deviceID }: TProps) => {
 
  const handleGetStarted = () => {
  setShowWizard(false);
- navigate('/account-summary');
+ navigate('/account-summary?with-chart-animation=true');
  };
 
  useEffect(() => {