6b5a232a5e
Security (Desktop Wallet): - Implement BIP39 mnemonic generation with cryptographic RNG - Add Argon2id password-based key derivation (64MB, 3 iterations) - Add ChaCha20-Poly1305 authenticated encryption for seed storage - Add mnemonic auto-clear (60s timeout) and clipboard auto-clear (30s) - Add sanitized error logging to prevent credential leaks - Strengthen CSP with object-src, base-uri, form-action, frame-ancestors - Clear sensitive state on component unmount Explorer (Gas Estimator): - Add Gas Estimation page with from/to/amount/data inputs - Add bech32 address validation (synor1/tsynor1 prefix) - Add BigInt-based amount parsing to avoid floating point errors - Add production guard for mock mode (cannot enable in prod builds) Monitoring (30-day Testnet): - Add Prometheus config with 30-day retention - Add comprehensive alert rules for node health, consensus, network, mempool - Add Alertmanager with severity-based routing and inhibition rules - Add Grafana with auto-provisioned datasource and dashboard - Add Synor testnet dashboard with uptime SLA tracking Docker: - Update docker-compose.testnet.yml with monitoring profile - Fix node-exporter for macOS Docker Desktop compatibility - Change Grafana port to 3001 to avoid conflict
104 lines
3.1 KiB
TypeScript
104 lines
3.1 KiB
TypeScript
import { Outlet, NavLink } from 'react-router-dom';
|
|
import {
|
|
LayoutDashboard,
|
|
Send,
|
|
Download,
|
|
History,
|
|
Settings,
|
|
Lock,
|
|
Wifi,
|
|
WifiOff,
|
|
} from 'lucide-react';
|
|
import { useWalletStore } from '../store/wallet';
|
|
|
|
const navItems = [
|
|
{ to: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
|
|
{ to: '/send', label: 'Send', icon: Send },
|
|
{ to: '/receive', label: 'Receive', icon: Download },
|
|
{ to: '/history', label: 'History', icon: History },
|
|
{ to: '/settings', label: 'Settings', icon: Settings },
|
|
];
|
|
|
|
export default function Layout() {
|
|
const { lockWallet, networkStatus, balance } = useWalletStore();
|
|
|
|
const handleLock = async () => {
|
|
await lockWallet();
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-full">
|
|
{/* Sidebar */}
|
|
<aside className="w-64 bg-gray-900 border-r border-gray-800 flex flex-col">
|
|
{/* Balance display */}
|
|
<div className="p-6 border-b border-gray-800">
|
|
<p className="text-xs text-gray-500 uppercase tracking-wider mb-1">
|
|
Balance
|
|
</p>
|
|
<p className="text-2xl font-bold text-white">
|
|
{balance?.balanceHuman || '0 SYN'}
|
|
</p>
|
|
{balance?.pending ? (
|
|
<p className="text-xs text-gray-500 mt-1">
|
|
+ {(balance.pending / 100_000_000).toFixed(8)} SYN pending
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="flex-1 p-4 space-y-1">
|
|
{navItems.map(({ to, label, icon: Icon }) => (
|
|
<NavLink
|
|
key={to}
|
|
to={to}
|
|
className={({ isActive }) =>
|
|
`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
|
|
isActive
|
|
? 'bg-synor-600 text-white'
|
|
: 'text-gray-400 hover:text-white hover:bg-gray-800'
|
|
}`
|
|
}
|
|
>
|
|
<Icon size={20} />
|
|
{label}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
|
|
{/* Footer */}
|
|
<div className="p-4 border-t border-gray-800 space-y-2">
|
|
{/* Network status */}
|
|
<div className="flex items-center gap-2 px-4 py-2 text-sm">
|
|
{networkStatus.connected ? (
|
|
<>
|
|
<Wifi size={16} className="text-green-400" />
|
|
<span className="text-gray-400">
|
|
{networkStatus.network || 'Connected'}
|
|
</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<WifiOff size={16} className="text-red-400" />
|
|
<span className="text-gray-400">Disconnected</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Lock button */}
|
|
<button
|
|
onClick={handleLock}
|
|
className="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-gray-800 hover:bg-gray-700 text-gray-300 hover:text-white transition-colors"
|
|
>
|
|
<Lock size={16} />
|
|
Lock Wallet
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main content */}
|
|
<main className="flex-1 overflow-auto p-6">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|