Merge pull request #183 from Yiroh/Hiding-Data

Successfully implemented hiding and showing
afadil · Dec 15, 2024 · ea77801 · ea77801
2 parents 390b207 + 1472ae7
commit ea77801
Show file tree

Hide file tree

Showing 25 changed files with 514 additions and 439 deletions.
diff --git a/src-tauri/gen/schemas/windows-schema.json b/src-tauri/gen/schemas/windows-schema.json
@@ -4842,6 +4842,21 @@
           "type": "string",
           "const": "fs:write-files"
         },
+        {
+          "description": "Allows the log command",
+          "type": "string",
+          "const": "log:default"
+        },
+        {
+          "description": "Enables the log command without any pre-configured scope.",
+          "type": "string",
+          "const": "log:allow-log"
+        },
+        {
+          "description": "Denies the log command without any pre-configured scope.",
+          "type": "string",
+          "const": "log:deny-log"
+        },
         {
           "description": "This permission set configures which\nshell functionality is exposed by default.\n\n#### Granted Permissions\n\nIt allows to use the `open` functionality without any specific\nscope pre-configured. It will allow opening `http(s)://`,\n`tel:` and `mailto:` links.\n",
           "type": "string",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { SettingsProvider } from '@/lib/settings-provider';
+import { PrivacyProvider } from './context/privacy-context';
 import { AppRoutes } from './routes';
 import { useState } from 'react';
 
@@ -18,9 +19,11 @@ function App() {
   );
   return (
     <QueryClientProvider client={queryClient}>
-      <SettingsProvider>
-        <AppRoutes />
-      </SettingsProvider>
+      <PrivacyProvider>
+        <SettingsProvider>
+          <AppRoutes />
+        </SettingsProvider>
+      </PrivacyProvider>
     </QueryClientProvider>
   );
 }

diff --git a/src/components/amount-display.tsx b/src/components/amount-display.tsx
@@ -0,0 +1,11 @@
+import { formatAmount } from '@/lib/utils';
+
+interface AmountDisplayProps {
+  value: number;
+  currency: string;
+  isHidden: boolean;
+}
+
+export function AmountDisplay({ value, currency, isHidden }: AmountDisplayProps) {
+  return <span>{isHidden ? '••••' : formatAmount(value, currency)}</span>;
+}
diff --git a/src/components/custom-pie-chart.tsx b/src/components/custom-pie-chart.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { PieChart, Pie, Cell, Sector, ResponsiveContainer } from 'recharts';
-import { formatAmount } from '@/lib/utils';
+import { AmountDisplay } from '@/components/amount-display';
+import { useBalancePrivacy } from '@/context/privacy-context';
 
 const COLORS = [
   'hsl(var(--chart-1))',
@@ -13,6 +14,7 @@ const COLORS = [
 ];
 
 const renderActiveShape = (props: any) => {
+  const { isBalanceHidden } = useBalancePrivacy();
   const RADIAN = Math.PI / 180;
   const { cx, cy, midAngle, innerRadius, outerRadius, startAngle, endAngle, fill, payload, value } =
     props;
@@ -57,16 +59,23 @@ const renderActiveShape = (props: any) => {
       >
         {payload.name}
       </text>
-      <text
+      <foreignObject
         x={ex + (cos >= 0 ? 1 : -1) * 6}
-        y={ey}
-        dy={12}
-        textAnchor={textAnchor}
-        fill="currentColor"
-        className="text-xs"
+        y={ey + 4}
+        width={100}
+        height={20}
+        style={{ overflow: 'visible' }}
       >
-        {formatAmount(value, 'USD', false)}
-      </text>
+        <div
+          style={{
+            textAnchor: textAnchor,
+            color: 'currentColor',
+            fontSize: '0.75rem',
+          }}
+        >
+          <AmountDisplay value={value} currency="USD" isHidden={isBalanceHidden} />
+        </div>
+      </foreignObject>
     </g>
   );
 };

diff --git a/src/components/gain-amount.tsx b/src/components/gain-amount.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { cn } from '@/lib/utils';
 import NumberFlow from '@number-flow/react';
+import { useBalancePrivacy } from '@/context/privacy-context';
 
 interface GainAmountProps extends React.HTMLAttributes<HTMLDivElement> {
   value: number;
@@ -17,6 +18,8 @@ export function GainAmount({
   displayDecimal = true,
   ...props
 }: GainAmountProps) {
+  const { isBalanceHidden } = useBalancePrivacy();
+
   return (
     <div className={cn('flex flex-col items-end text-right', className)} {...props}>
       <div
@@ -25,19 +28,22 @@ export function GainAmount({
           value === 0 ? 'text-foreground' : value > 0 ? 'text-success' : 'text-red-400',
         )}
       >
-        {/* <span>{formatAmount(value, currency, displayCurrency)}</span> */}
-        <NumberFlow
-          value={value}
-          isolate={false}
-          format={{
-            currency: currency,
-            style: displayCurrency ? 'currency' : 'decimal',
-            currencyDisplay: 'narrowSymbol',
-            minimumFractionDigits: displayDecimal ? 2 : 0,
-            maximumFractionDigits: displayDecimal ? 2 : 0,
-          }}
-          locales={navigator.language || 'en-US'}
-        />
+        {isBalanceHidden ? (
+          <span>••••</span>
+        ) : (
+          <NumberFlow
+            value={value}
+            isolate={false}
+            format={{
+              currency: currency,
+              style: displayCurrency ? 'currency' : 'decimal',
+              currencyDisplay: 'narrowSymbol',
+              minimumFractionDigits: displayDecimal ? 2 : 0,
+              maximumFractionDigits: displayDecimal ? 2 : 0,
+            }}
+            locales={navigator.language || 'en-US'}
+          />
+        )}
       </div>
     </div>
   );

diff --git a/src/components/gain-percent.tsx b/src/components/gain-percent.tsx
@@ -5,9 +5,10 @@ import NumberFlow from '@number-flow/react';
 
 interface GainPercentProps extends React.HTMLAttributes<HTMLDivElement> {
   value: number;
+  animated?: boolean;
 }
 
-export function GainPercent({ value, className, ...props }: GainPercentProps) {
+export function GainPercent({ value, animated = false, className, ...props }: GainPercentProps) {
   return (
     <div
       className={cn(
@@ -27,6 +28,7 @@ export function GainPercent({ value, className, ...props }: GainPercentProps) {
         )}
         <NumberFlow
           value={value / 100}
+          animated={animated}
           format={{
             style: 'percent',
             minimumFractionDigits: 2,

diff --git a/src/components/history-chart.tsx b/src/components/history-chart.tsx
@@ -1,20 +1,27 @@
 import { useMemo } from 'react';
-import { Area, AreaChart, Tooltip, YAxis } from 'recharts';
+import { Area, AreaChart, Tooltip, YAxis, TooltipProps } from 'recharts';
+import { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';
 import { formatAmount, formatDate } from '@/lib/utils';
 import { ChartConfig, ChartContainer } from './ui/chart';
+import { useBalancePrivacy } from '@/context/privacy-context';
+import { GainPercent } from '@/components/gain-percent';
 
-type CustomTooltipProps = {
-  active: boolean;
-  payload: { value: number; payload: any }[];
+type CustomTooltipProps = TooltipProps<ValueType, NameType> & {
+  isBalanceHidden: boolean;
 };
 
-const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
+const CustomTooltip = ({ active, payload, isBalanceHidden }: CustomTooltipProps) => {
   if (active && payload && payload.length) {
     const data = payload[0].payload;
     return (
-      <div className="center-items">
+      <div className="center-items space-y-1">
         <p className="font-thin">{formatDate(data.date)}</p>
-        <p className="label">{formatAmount(payload[0].value, data.currency, false)}</p>
+        <p className="label">
+          {isBalanceHidden
+            ? `•••• `
+            : `${formatAmount(Number(payload[0].value), data.currency, false)} `}
+          <GainPercent value={data.totalGainPercentage} />
+        </p>
       </div>
     );
   }
@@ -25,6 +32,7 @@ const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
 interface HistoryChartData {
   date: string;
   totalValue: number;
+  totalGainPercentage: number;
   currency: string;
 }
 
@@ -35,6 +43,8 @@ export function HistoryChart({
   data: HistoryChartData[];
   interval: '1D' | '1W' | '1M' | '3M' | '1Y' | 'ALL';
 }) {
+  const { isBalanceHidden } = useBalancePrivacy();
+
   const filteredData = useMemo(() => {
     if (!data) return [];
     const today = new Date();
@@ -87,7 +97,9 @@ export function HistoryChart({
           </linearGradient>
         </defs>
         {/* @ts-ignore */}
-        <Tooltip content={<CustomTooltip />} />
+        <Tooltip
+          content={(props) => <CustomTooltip {...props} isBalanceHidden={isBalanceHidden} />}
+        />
         {interval !== 'ALL' && interval !== '1Y' && (
           <YAxis hide type="number" domain={['auto', 'auto']} />
         )}

diff --git a/src/components/privacy-amount.tsx b/src/components/privacy-amount.tsx
@@ -0,0 +1,18 @@
+import { useBalancePrivacy } from '@/context/privacy-context';
+import { cn } from '@/lib/utils';
+import { formatAmount } from '@/lib/utils';
+
+interface PrivacyAmountProps extends React.HTMLAttributes<HTMLSpanElement> {
+  value: number;
+  currency: string;
+}
+
+export function PrivacyAmount({ value, currency, className, ...props }: PrivacyAmountProps) {
+  const { isBalanceHidden } = useBalancePrivacy();
+
+  return (
+    <span className={cn(className)} {...props}>
+      {isBalanceHidden ? '••••' : formatAmount(value, currency)}
+    </span>
+  );
+}
diff --git a/src/components/privacy-toggle.tsx b/src/components/privacy-toggle.tsx
@@ -0,0 +1,26 @@
+import { useBalancePrivacy } from '@/context/privacy-context';
+import { Button } from '@/components/ui/button';
+import { Icons } from '@/components/icons';
+import { cn } from '@/lib/utils';
+
+interface PrivacyToggleProps {
+  className?: string;
+}
+
+export function PrivacyToggle({ className }: PrivacyToggleProps) {
+  const { isBalanceHidden, toggleBalanceVisibility } = useBalancePrivacy();
+
+  return (
+    <Button
+      variant="secondary"
+      size="icon"
+      className={cn('mt-1 h-8 w-8 rounded-full', className)}
+      onClick={(e) => {
+        e.stopPropagation();
+        toggleBalanceVisibility();
+      }}
+    >
+      {isBalanceHidden ? <Icons.Eye className="h-4 w-4" /> : <Icons.EyeOff className="h-4 w-4" />}
+    </Button>
+  );
+}
diff --git a/src/components/quantity-display.tsx b/src/components/quantity-display.tsx
@@ -0,0 +1,10 @@
+import { formatStockQuantity } from '@/lib/utils';
+
+interface QuantityDisplayProps {
+  value: number;
+  isHidden: boolean;
+}
+
+export function QuantityDisplay({ value, isHidden }: QuantityDisplayProps) {
+  return <span>{isHidden ? '••••' : formatStockQuantity(value)}</span>;
+}
diff --git a/src/context/privacy-context.tsx b/src/context/privacy-context.tsx
@@ -0,0 +1,39 @@
+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: boolean) => !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;
+}