feat(frontend): Add balance visibility toggle with blur effect

Co-authored-by: elisiariocouto <818914+elisiariocouto@users.noreply.github.com>

frontend/src/contexts/BalanceVisibilityContext.tsx

@@ -0,0 +1,48 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+interface BalanceVisibilityContextType {
+  isBalanceVisible: boolean;
+  toggleBalanceVisibility: () => void;
+}
+
+const BalanceVisibilityContext = createContext<
+  BalanceVisibilityContextType | undefined
+>(undefined);
+
+export function BalanceVisibilityProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [isBalanceVisible, setIsBalanceVisible] = useState<boolean>(() => {
+    const stored = localStorage.getItem("balanceVisible");
+    // Default to true (visible) if not set
+    return stored === null ? true : stored === "true";
+  });
+
+  useEffect(() => {
+    localStorage.setItem("balanceVisible", String(isBalanceVisible));
+  }, [isBalanceVisible]);
+
+  const toggleBalanceVisibility = () => {
+    setIsBalanceVisible((prev) => !prev);
+  };
+
+  return (
+    <BalanceVisibilityContext.Provider
+      value={{ isBalanceVisible, toggleBalanceVisibility }}
+    >
+      {children}
+    </BalanceVisibilityContext.Provider>
+  );
+}
+
+export function useBalanceVisibility() {
+  const context = useContext(BalanceVisibilityContext);
+  if (context === undefined) {
+    throw new Error(
+      "useBalanceVisibility must be used within a BalanceVisibilityProvider",
+    );
+  }
+  return context;
+}