Fix TypeScript errors, remove non-functional Empty button, right-align Network Block toggle

- Fix CameraEntropy and DiceEntropy import errors - Fix unused variable warnings in App.tsx and Header.tsx - Remove non-functional Empty storage button from Header - Right-align Network Block toggle button with flex-1 spacer - Add NetworkBlockBadge component file
2026-03-07 09:57:50 +08:00 · 2026-02-10 01:19:24 +08:00
parent 586eabc361
commit ab1f35ce80
7 changed files with 197 additions and 101 deletions
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -3,7 +3,6 @@ import { Shield, RefreshCw } from 'lucide-react';
 import SecurityBadge from './badges/SecurityBadge';
 import StorageBadge from './badges/StorageBadge';
 import ClipboardBadge from './badges/ClipboardBadge';
-import EditLockBadge from './badges/EditLockBadge';

 interface StorageItem {
  key: string;
@@ -27,10 +26,9 @@ interface HeaderProps {
  onOpenClipboardModal: () => void;
  activeTab: 'create' | 'backup' | 'restore' | 'seedblender';
  onRequestTabChange: (tab: 'create' | 'backup' | 'restore' | 'seedblender') => void;
-  encryptedMnemonicCache: any;
  appVersion: string;
-  isLocked: boolean;
-  onToggleLock: () => void;
+  isNetworkBlocked: boolean;
+  onToggleNetwork: () => void;
  onResetAll: () => void; // NEW
 }

@@ -43,17 +41,16 @@ const Header: React.FC<HeaderProps> = ({
  onOpenClipboardModal,
  activeTab,
  onRequestTabChange,
-  encryptedMnemonicCache,
  appVersion,
-  isLocked,
-  onToggleLock,
+  isNetworkBlocked,
+  onToggleNetwork,
  onResetAll
 }) => {
  return (
    <header className="sticky top-0 z-50 bg-[#0a0a0f] border-b border-[#00f0ff30] backdrop-blur-sm">
      <div className="w-full px-4 py-3 space-y-3">
-
-        {/* ROW 1: Logo + App Info */}
+        
+        {/* ROW 1: Logo + App Info (LEFT) | Reset (RIGHT) */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-[#00f0ff] rounded-lg flex items-center justify-center shadow-[0_0_15px_rgba(0,240,255,0.5)]">
@@ -66,11 +63,21 @@ const Header: React.FC<HeaderProps> = ({
              <p className="text-xs text-[#6ef3f7]">OpenPGP-secured BIP39 backup</p>
            </div>
          </div>
+
+          {/* Reset button - top right */}
+          <button
+            onClick={onResetAll}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs bg-[#16213e] border border-[#ff006e] text-[#ff006e] rounded-lg font-medium hover:bg-[#ff006e20] transition-all"
+            title="Reset all data"
+          >
+            <RefreshCw size={12} />
+            <span className="hidden sm:inline">Reset</span>
+          </button>
        </div>

-        {/* ROW 2: Monitoring Badges + Action Buttons */}
-        <div className="flex items-center justify-between gap-2 pb-2 border-b border-[#00f0ff20]">
-          {/* Left: Badges */}
+        {/* ROW 2: Badges (LEFT) | Action Buttons (RIGHT) */}
+        <div className="flex items-center gap-2 pb-2 border-b border-[#00f0ff20]">
+          {/* Left: Monitoring Badges */}
          <div className="flex items-center gap-2">
            <SecurityBadge onClick={onOpenSecurityModal} />
            <div onClick={onOpenStorageModal} className="cursor-pointer">
@@ -79,40 +86,27 @@ const Header: React.FC<HeaderProps> = ({
            <div onClick={onOpenClipboardModal} className="cursor-pointer">
              <ClipboardBadge events={events} onOpenClipboardModal={onOpenClipboardModal} />
            </div>
-            <EditLockBadge isLocked={isLocked} onToggle={onToggleLock} />
          </div>

+          {/* Spacer - pushes right content to the right */}
+          <div className="flex-1"></div>
+
          {/* Right: Action Buttons */}
          <div className="flex items-center gap-2">
-            {encryptedMnemonicCache && (
-              <button
-                onClick={onToggleLock}
-                className="px-2 py-1.5 text-base bg-[#16213e] border border-[#00f0ff] text-[#00f0ff] rounded-lg font-medium hover:bg-[#00f0ff20] transition-all"
-                title={isLocked ? "Show sensitive data" : "Hide sensitive data"}
-              >
-                {isLocked ? '🔓' : '🙈'}
-              </button>
-            )}
+            {/* Network Block toggle */}
            <button
-              onClick={async () => {
-                try {
-                  await navigator.clipboard.writeText('');
-                } catch { }
-                localStorage.clear();
-                sessionStorage.clear();
-              }}
-              className="px-2 py-1.5 text-base bg-[#16213e] border border-[#00f0ff] text-[#00f0ff] rounded-lg font-medium hover:bg-[#00f0ff20] transition-all"
-              title="Clear clipboard and storage"
+              onClick={onToggleNetwork}
+              className={`flex items-center gap-1 px-2.5 py-1.5 text-xs rounded-lg font-medium transition-all whitespace-nowrap ${
+                isNetworkBlocked
+                  ? 'bg-[#16213e] border border-[#ff006e] text-[#ff006e] hover:bg-[#ff006e20]'
+                  : 'bg-[#16213e] border border-[#39ff14] text-[#39ff14] hover:bg-[#39ff1420]'
+              }`}
+              title={isNetworkBlocked ? 'Network BLOCKED' : 'Network ACTIVE'}
            >
-              📋
-            </button>
-
-            <button
-              onClick={onResetAll}
-              className="px-2 py-1.5 text-xs bg-[#16213e] border border-[#ff006e] text-[#ff006e] rounded-lg font-medium hover:bg-[#ff006e20] transition-all whitespace-nowrap flex items-center gap-1"
-            >
-              <RefreshCw size={12} />
-              Reset
+              <span className="text-sm">{isNetworkBlocked ? '🚫' : '🌐'}</span>
+              <span className="hidden sm:inline text-[10px]">
+                {isNetworkBlocked ? 'Blocked' : 'Active'}
+              </span>
            </button>
          </div>
        </div>
@@ -120,10 +114,11 @@ const Header: React.FC<HeaderProps> = ({
        {/* ROW 3: Navigation Tabs */}
        <div className="grid grid-cols-4 gap-2">
          <button
-            className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${activeTab === 'create'
-              ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
-              : 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
-              }`}
+            className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${
+              activeTab === 'create'
+                ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
+                : 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
+            }`}
            style={activeTab === 'create' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
            onClick={() => onRequestTabChange('create')}
          >
@@ -131,10 +126,11 @@ const Header: React.FC<HeaderProps> = ({
          </button>

          <button
-            className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${activeTab === 'backup'
-              ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
-              : 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
-              }`}
+            className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${
+              activeTab === 'backup'
+                ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
+                : 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
+            }`}
            style={activeTab === 'backup' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
            onClick={() => onRequestTabChange('backup')}
          >
@@ -142,10 +138,11 @@ const Header: React.FC<HeaderProps> = ({
          </button>

          <button
-            className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${activeTab === 'restore'
-              ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
-              : 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
-              }`}
+            className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${
+              activeTab === 'restore'
+                ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
+                : 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
+            }`}
            style={activeTab === 'restore' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
            onClick={() => onRequestTabChange('restore')}
          >
@@ -153,10 +150,11 @@ const Header: React.FC<HeaderProps> = ({
          </button>

          <button
-            className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${activeTab === 'seedblender'
-              ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
-              : 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
-              }`}
+            className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${
+              activeTab === 'seedblender'
+                ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
+                : 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
+            }`}
            style={activeTab === 'seedblender' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
            onClick={() => onRequestTabChange('seedblender')}
          >