[FEATURE] Add a toggle button to hide investments values

[rafaelgreca]

I think it could be a good feature to add because I like to hide my investment values (such as the total amount that I've invested, how much I have for a current ETF, and so on) when I want to show them to my friends or parents, or even post some screenshots on the internet (and I think other people might like it as well). The button would only hide the values on the plots and portfolios, leaving the percentage visible.

[afadil]

A solution to implement this globally in all pages:

1. Use a react Context Privacy Context:

import { createContext, useContext, useEffect, useState } from 'react';

interface PrivacyContextType {
  isBalanceHidden: boolean;
  toggleBalanceVisibility: () => void;
}

const PrivacyContext = createContext<PrivacyContextType | undefined>(undefined);

const STORAGE_KEY = 'privacy-settings';

export function PrivacyProvider({ children }: { children: React.ReactNode }) {
  const [isBalanceHidden, setIsBalanceHidden] = useState(() => {
    const stored = localStorage.getItem(STORAGE_KEY);
    return stored ? JSON.parse(stored) : false;
  });

  useEffect(() => {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(isBalanceHidden));
  }, [isBalanceHidden]);

  function toggleBalanceVisibility() {
    setIsBalanceHidden((prev) => !prev);
  }

  return (
    <PrivacyContext.Provider value={{ isBalanceHidden, toggleBalanceVisibility }}>
      {children}
    </PrivacyContext.Provider>
  );
}

export function useBalancePrivacy() {
  const context = useContext(PrivacyContext);
  if (context === undefined) {
    throw new Error('useBalancePrivacy must be used within a PrivacyProvider');
  }
  return context;
}

2. Wrap your app with the Provider:

// src/app.tsx
import { PrivacyProvider } from './contexts/privacy-context';

function App() {
  return (
    <PrivacyProvider>
      {/* Your app components */}
    </PrivacyProvider>
  );
}

3. Update your Balance component:

// src/pages/dashboard/balance.tsx
import NumberFlow from '@number-flow/react';
import { useBalancePrivacy } from '../../contexts/privacy-context';

interface BalanceProps {
  targetValue: number;
  currency: string;
  displayCurrency?: boolean;
  displayDecimal?: boolean;
}

const Balance: React.FC<BalanceProps> = ({
  targetValue,
  currency,
  displayCurrency = false,
  displayDecimal = true,
}) => {
  const { isBalanceHidden } = useBalancePrivacy();

  return (
    <h1 className="font-heading text-3xl font-bold tracking-tight">
      {isBalanceHidden ? (
        <span>••••••</span>
      ) : (
        <NumberFlow
          value={targetValue}
          isolate={false}
          format={{
            currency: currency,
            style: displayCurrency ? 'currency' : 'decimal',
            currencyDisplay: 'narrowSymbol',
            minimumFractionDigits: displayDecimal ? 2 : 0,
            maximumFractionDigits: displayDecimal ? 2 : 0,
          }}
          locales={navigator.language || 'en-US'}
        />
      )}
    </h1>
  );
};

export default Balance;

4. Create a similar component to use in all other fields that display amounts in tables and other pages.

5. Create the toggle button component:

// src/components/privacy-toggle.tsx
import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
import { useBalancePrivacy } from '../contexts/privacy-context';

export function PrivacyToggle() {
  const { isBalanceHidden, toggleBalanceVisibility } = useBalancePrivacy();

  return (
    <button
      onClick={toggleBalanceVisibility}
      className="inline-flex items-center justify-center p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
      aria-label={isBalanceHidden ? 'Show balance' : 'Hide balance'}
    >
      {isBalanceHidden ? (
        <EyeSlashIcon className="w-5 h-5" />
      ) : (
        <EyeIcon className="w-5 h-5" />
      )}
    </button>
  );
}

[afadil]

Added in version 1.0.22