diff --git a/client/src/_components/settings/backup-account-modal.tsx b/client/src/_components/settings/backup-account-modal.tsx
index befd90d..6972208 100644
--- a/client/src/_components/settings/backup-account-modal.tsx
+++ b/client/src/_components/settings/backup-account-modal.tsx
@@ -15,12 +15,31 @@ import { AlertTriangle, Copy, Download } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
-export function BackupAccountModal() {
+interface BackupAccountModalProps {
+ open?: boolean;
+ onOpenChange?: (open: boolean) => void;
+ onBackupSuccess?: () => void;
+ trigger?: React.ReactNode;
+}
+
+export function BackupAccountModal({
+ open: controlledOpen,
+ onOpenChange: controlledOnOpenChange,
+ onBackupSuccess,
+ trigger,
+}: BackupAccountModalProps = {}) {
const { getMnemonic } = useAuth();
- const [isOpen, setIsOpen] = useState(false);
+ const [internalOpen, setInternalOpen] = useState(false);
const [confirmExport, setConfirmExport] = useState(false);
+ // Support both controlled and uncontrolled modes
+ const isControlled = controlledOpen !== undefined;
+ const isOpen = isControlled ? controlledOpen : internalOpen;
+ const setIsOpen = isControlled
+ ? (open: boolean) => controlledOnOpenChange?.(open)
+ : setInternalOpen;
+
function waitForWindowFocus(): Promise
Anyone with access to this backup can control all of your - account. Keep it secure. + assets. Keep it secure.
diff --git a/client/src/_components/status/experimental-banner.tsx b/client/src/_components/status/experimental-banner.tsx new file mode 100644 index 0000000..4ec85bd --- /dev/null +++ b/client/src/_components/status/experimental-banner.tsx @@ -0,0 +1,50 @@ +import { BackupAccountModal } from "@/_components/settings/backup-account-modal"; +import { useAuth } from "@/_providers/auth-provider"; +import { AlertTriangle } from "lucide-react"; +import { useEffect, useState } from "react"; + +const BACKUP_STORAGE_KEY = "commbank-account-backed-up"; + +export function ExperimentalBanner() { + const { isSignedIn } = useAuth(); + const [hasBackedUp, setHasBackedUp] = useState(true); // Default to true to prevent flash + + useEffect(() => { + const backed = localStorage.getItem(BACKUP_STORAGE_KEY); + setHasBackedUp(backed === "true"); + }, []); + + const handleBackupSuccess = () => { + localStorage.setItem(BACKUP_STORAGE_KEY, "true"); + setHasBackedUp(true); + }; + + // Don't show if not signed in or already backed up + if (!isSignedIn || hasBackedUp) { + return null; + } + + return ( ++ commbank.eth is experimental +
+
+ Please practise caution and{" "}
+