kccleoc/seedpgp-web
0
0
Fork 0
mirror of https://github.com/kccleoc/seedpgp-web.git synced 2026-03-06 17:37:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(entropy): Enhance entropy generation UX and fix resets

Browse Source 
This commit introduces several improvements to the entropy generation and application state management:

1.  **Implement Dice Entropy Stats Panel:**
    - After generating entropy from dice rolls, a detailed statistics panel is now displayed for user review.
    - This panel includes roll distribution, chi-square analysis, and a preview of the generated seed.
    - Users can now choose to "Continue with this Seed" or "Roll Again" to discard and restart, improving user control and confidence in the entropy quality.

2.  **Fix UI Layering and Overflow:**
    - Increased the header's `z-index` to `z-[100]` to ensure it always remains on top of other components, fixing an issue where the "Reset All" button was inaccessible.
    - Made the main content area for entropy components scrollable to prevent the new stats panels from overflowing the viewport on smaller screens.

3.  **Improve "Reset All" Functionality:**
    - The "Reset All" button now correctly resets the internal state of the `DiceEntropy` and `CameraEntropy` components.
    - This is achieved by adding a `resetCounter` to the `App` state and passing it into the `key` prop of the entropy components, forcing a full remount on reset.
This commit is contained in:
LC mac
2026-02-10 23:02:13 +08:00
parent a67a2159f2
commit f52186f2e7
3 changed files with 108 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/App.tsx
View File

@@ -76,6 +76,7 @@ function App() {
const [sessionItems, setSessionItems] = useState<StorageItem[]>([]);
const [clipboardEvents, setClipboardEvents] = useState<ClipboardEvent[]>([]);
const [showLockConfirm, setShowLockConfirm] = useState(false);
const [resetCounter, setResetCounter] = useState(0);
// Krux integration state
const [encryptionMode, setEncryptionMode] = useState<'pgp' | 'krux' | 'seedqr'>('pgp');
@@ -467,17 +468,17 @@ function App() {
const handleToggleNetwork = () => {
setIsNetworkBlocked(!isNetworkBlocked);
if (!isNetworkBlocked) {
// Block network
console.log('🚫 Network BLOCKED - No external requests allowed');
// Optional: Override fetch/XMLHttpRequest
if (typeof window !== 'undefined') {
(window as any).__originalFetch = window.fetch;
// Create a mock fetch function with proper type assertion
const mockFetch = (async () => Promise.reject(new Error('Network blocked by user'))) as unknown as typeof window.fetch;
window.fetch = mockFetch;
}
// Block network
console.log('🚫 Network BLOCKED - No external requests allowed');
// Optional: Override fetch/XMLHttpRequest
if (typeof window !== 'undefined') {
(window as any).__originalFetch = window.fetch;
// Create a mock fetch function with proper type assertion
const mockFetch = (async () => Promise.reject(new Error('Network blocked by user'))) as unknown as typeof window.fetch;
window.fetch = mockFetch;
}
} else {
// Unblock network
console.log('🌐 Network ACTIVE');
@@ -494,8 +495,8 @@ function App() {
};
const handleResetAll = () => {
if (window.confirm("Reset entire app? This will clear all seeds, passwords, and generated data.")) {
// Clear all state
if (window.confirm('⚠️ Reset ALL data? This will clear everything including any displayed entropy analysis.')) {
// Clear component state
setMnemonic('');
setGeneratedSeed('');
setBackupMessagePassword('');
@@ -508,15 +509,23 @@ function App() {
setRestoreInput('');
setDecryptedRestoredMnemonic(null);
setError('');
setEntropySource(null);
setEntropyStats(null);
setSeedForBlender('');
// Clear session
// Clear storage and session
localStorage.clear();
sessionStorage.clear();
destroySessionKey();
_setEncryptedMnemonicCache(null);
// Go to Create tab (fresh start)
// Force SeedBlender to remount (resets its internal state)
// Force remount of key-driven components
setResetCounter(prev => prev + 1);
setBlenderResetKey(prev => prev + 1);
// Go to Create tab (fresh start)
setActiveTab('create');
console.log('✅ All data reset');
}
};
@@ -698,6 +707,7 @@ function App() {
{/* Camera Entropy Component */}
{entropySource === 'camera' && !generatedSeed && (
<CameraEntropy
key={`camera-${resetCounter}`} // Force remount on reset
wordCount={seedWordCount}
onEntropyGenerated={handleEntropyGenerated}
onCancel={() => setEntropySource(null)}
@@ -708,6 +718,7 @@ function App() {
{/* Dice Entropy Component */}
{entropySource === 'dice' && !generatedSeed && (
<DiceEntropy
key={`dice-${resetCounter}`} // Force remount on reset
wordCount={seedWordCount}
onEntropyGenerated={handleEntropyGenerated}
onCancel={() => setEntropySource(null)}
@@ -735,7 +746,7 @@ function App() {
</span>
</div>
<div className="relative">
<p
<p
className="font-mono text-xs text-[#39ff14] break-words leading-relaxed blur-sensitive"
title="Hover to reveal seed"
style={{ textShadow: '0 0 5px rgba(57,255,20,0.5)' }}
@@ -793,9 +804,8 @@ function App() {
onFocus={(e) => e.target.classList.remove('blur-sensitive')}
onBlur={(e) => mnemonic && e.target.classList.add('blur-sensitive')}
placeholder="Enter your 12 or 24 word seed phrase..."
className={`w-full h-32 p-3 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg font-mono text-sm text-[#00f0ff] placeholder-[#9d84b7] focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all relative overflow-hidden ${
mnemonic ? 'blur-sensitive' : ''
}`}
className={`w-full h-32 p-3 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg font-mono text-sm text-[#00f0ff] placeholder-[#9d84b7] focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all relative overflow-hidden ${mnemonic ? 'blur-sensitive' : ''
}`}
style={{
backgroundImage: 'repeating-linear-gradient(0deg, rgba(0,240,255,0.03) 0px, transparent 1px, transparent 2px, rgba(0,240,255,0.03) 3px)',
textShadow: '0 0 5px rgba(0,240,255,0.5)'
@@ -1123,7 +1133,7 @@ function App() {
<div className="p-4 bg-[#0a0a0f] rounded-xl border-2 border-[#39ff14] shadow-[0_0_20px_rgba(57,255,20,0.3)]">
<div className="relative">
<p
<p
className="font-mono text-center text-base break-words text-[#39ff14] blur-sensitive"
title="Hover to reveal"
style={{ textShadow: '0 0 8px rgba(57,255,20,0.8)' }}

80
src/components/DiceEntropy.tsx
View File

@@ -28,6 +28,7 @@ const DiceEntropy: React.FC<DiceEntropyProps> = ({
const [error, setError] = useState('');
const [processing, setProcessing] = useState(false);
const [stats, setStats] = useState<DiceStats | null>(null);
const [generatedMnemonic, setGeneratedMnemonic] = useState<string>('');
const validateDiceRolls = (input: string): { valid: boolean; error: string } => {
const clean = input.replace(/\s/g, '');
@@ -118,14 +119,11 @@ const DiceEntropy: React.FC<DiceEntropyProps> = ({
// Generate mnemonic
const mnemonic = await generateMnemonicFromDice(clean);
// Show stats first
// Show stats FIRST
setStats(diceStats);
setGeneratedMnemonic(mnemonic); // Store mnemonic for later
setProcessing(false);
// Then notify parent after a brief delay so user sees stats
setTimeout(() => {
onEntropyGenerated(mnemonic, diceStats);
}, 100);
// DON'T call onEntropyGenerated yet - let user review stats first
};
const generateMnemonicFromDice = async (diceRolls: string): Promise<string> => {
@@ -152,8 +150,9 @@ const DiceEntropy: React.FC<DiceEntropyProps> = ({
};
return (
<div className="space-y-4">
{!stats && (
<div className="space-y-4 max-h-[calc(100vh-200px)] overflow-y-auto">
{/* INPUT FORM - Show only when stats are NOT shown */}
{!stats && !processing && (
<>
<div className="p-4 bg-[#16213e] rounded-xl border-2 border-[#00f0ff]/30 space-y-3">
<div className="flex items-center gap-2"><Dices size={20} className="text-[#00f0ff]" /><h3 className="text-sm font-bold text-[#00f0ff] uppercase">Dice Roll Entropy</h3></div>
@@ -168,7 +167,7 @@ const DiceEntropy: React.FC<DiceEntropyProps> = ({
</div>
<div className="space-y-2">
<label className="text-[10px] font-bold text-[#00f0ff] uppercase tracking-widest">Enter Dice Rolls</label>
<textarea value={rolls} onChange={(e) => { setRolls(e.target.value.replace(/[^1-6\s]/g, '')); setError(''); }} placeholder="99+ dice rolls (e.g., 16345...)" className="w-full h-32 p-3 bg-[#0a0a0f] border-2 border-[#00f0ff]/50 rounded-lg font-mono text-sm text-[#00f0ff] placeholder:text-[10px] placeholder:text-[#6ef3f7] focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all resize-none" />
<textarea value={rolls} onChange={(e) => { setRolls(e.target.value.replace(/[^1-6\s]/g, '')); setError(''); }} placeholder="99+ dice rolls (e.g., 16345...)" className="w-full h-32 p-3 bg-[#0a0a0f] border-2 border-[#00f0ff]/50 rounded-lg font-mono text-xs text-[#00f0ff] placeholder:text-[10px] placeholder:text-[#6ef3f7] focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all resize-none" />
<p className="text-[10px] text-[#6ef3f7]">Current: {rolls.replace(/\s/g, '').length} rolls {rolls.replace(/\s/g, '').length >= 99 && ' ✓'}</p>
</div>
{error && (<div className="flex items-start gap-2 p-3 bg-[#0a0a0f] border border-[#ff006e] rounded-lg"><AlertCircle size={16} className="text-[#ff006e] shrink-0 mt-0.5" /><p className="text-xs text-[#ff006e]">{error}</p></div>)}
@@ -184,16 +183,25 @@ const DiceEntropy: React.FC<DiceEntropyProps> = ({
</>
)}
{stats && (
<div className="p-4 bg-[#0a0a0f] rounded-xl border-2 border-[#39ff14] shadow-[0_0_30px_rgba(57,255,20,0.3)] space-y-4">
{/* PROCESSING STATE */}
{processing && (
<div className="p-6 bg-[#16213e] rounded-xl border-2 border-[#00f0ff]/30 text-center space-y-3">
<div className="animate-spin mx-auto w-12 h-12 border-4 border-[#00f0ff]/30 border-t-[#00f0ff] rounded-full" />
<p className="text-sm text-[#00f0ff]">Processing entropy...</p>
</div>
)}
{/* STATS DISPLAY - Show after generation */}
{stats && !processing && (
<div className="p-6 bg-[#16213e] rounded-xl border-2 border-[#39ff14] shadow-[0_0_30px_rgba(57,255,20,0.3)] space-y-4 mb-6">
<div className="flex items-center gap-2 text-[#39ff14]"><CheckCircle2 size={24} /><h3 className="text-sm font-bold uppercase">Dice Entropy Analysis</h3></div>
<div className="space-y-3 text-xs">
<div><p className="text-[#00f0ff] font-bold mb-1">Primary Source:</p><p className="text-[#6ef3f7]">Physical Dice Rolls</p></div>
<div>
<p className="text-[#00f0ff] font-bold mb-2">ROLL STATISTICS:</p>
<div className="grid grid-cols-2 gap-x-4 gap-y-1 font-mono text-[10px]">
<div className="grid grid-cols-2 gap-2 font-mono text-[10px]">
<div>Total rolls:</div><div className="text-[#39ff14]">{stats.length}</div>
<div>Chi-square test:</div><div className="text-[#39ff14]">{stats.chiSquare.toFixed(2)} (pass &lt; 15.5)</div>
<div>Chi-square test:</div><div className="text-[#39ff14]">{stats.chiSquare.toFixed(2)} (pass &lt; 15)</div>
<div>Validation:</div><div className="text-[#39ff14]">{stats.passed ? '✅ Passed' : '❌ Failed'}</div>
</div>
</div>
@@ -215,9 +223,31 @@ const DiceEntropy: React.FC<DiceEntropyProps> = ({
</div>
<p className="text-[9px] text-[#6ef3f7] mt-2">Expected: ~16.67% per face</p>
</div>
<div>
<p className="text-[#00f0ff] font-bold mb-2">GENERATED SEED:</p>
<div className="p-3 bg-[#0a0a0f] rounded-lg border border-[#39ff14]/50">
<p className="font-mono text-[10px] text-[#39ff14] blur-sensitive" title="Hover to reveal">
{generatedMnemonic}
</p>
<p className="text-[9px] text-[#6ef3f7] mt-1">
👆 Hover to reveal - Write this down securely
</p>
</div>
</div>
<div>
<p className="text-[#00f0ff] font-bold mb-2">HOW SEED IS GENERATED:</p>
<div className="space-y-1 text-[10px] text-[#6ef3f7]">
<div>1. Physical dice rolls ({stats.length} values)</div>
<div>2. Statistical validation (χ²={stats.chiSquare.toFixed(2)})</div>
<div>3. Combined with timing entropy</div>
<div>4. Mixed with {stats.interactionSamples} interaction samples</div>
<div>5. Enhanced with crypto.getRandomValues() (32 bytes)</div>
<div>6. Final hash → {wordCount === 12 ? '128' : '256'} bits → {wordCount} BIP39 words</div>
</div>
</div>
<div>
<p className="text-[#00f0ff] font-bold mb-2">MIXED WITH:</p>
<div className="space-y-1 text-[#6ef3f7] text-[10px]">
<div className="space-y-1 text-[#6ef3f7]">
<div>- crypto.getRandomValues() ✓</div>
<div>- performance.now() ✓</div>
<div>- Interaction timing ({stats.interactionSamples} samples) ✓</div>
@@ -230,6 +260,28 @@ const DiceEntropy: React.FC<DiceEntropyProps> = ({
</div>
</div>
</div>
{/* Action Buttons */}
<div className="pt-4 border-t border-[#00f0ff]/30 space-y-3">
<button
onClick={() => {
// Send to parent
onEntropyGenerated(generatedMnemonic, stats);
}}
className="w-full py-3 bg-gradient-to-r from-[#ff006e] to-[#ff4d8f] text-white text-sm rounded-xl font-bold uppercase hover:shadow-[0_0_30px_rgba(255,0,110,0.8)] transition-all"
>
Continue with this Seed
</button>
<button
onClick={() => {
// Reset and try again
setStats(null); setGeneratedMnemonic(''); setRolls(''); setError('');
}}
className="w-full py-2 bg-[#16213e] border-2 border-[#00f0ff] text-[#00f0ff] rounded-lg text-sm font-bold hover:bg-[#00f0ff]/20 transition-all"
>
Roll Again
</button>
</div>
</div>
)}
</div>

29
src/components/Header.tsx
View File

@@ -47,9 +47,9 @@ const Header: React.FC<HeaderProps> = ({
onResetAll
}) => {
return (
<header className="sticky top-0 z-50 bg-[#0a0a0f] border-b border-[#00f0ff30] backdrop-blur-sm">
<header className="sticky top-0 z-[100] 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 (LEFT) | Reset (RIGHT) */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
@@ -96,11 +96,10 @@ const Header: React.FC<HeaderProps> = ({
{/* Network Block toggle */}
<button
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
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'}
>
<span className="text-sm">{isNetworkBlocked ? '🚫' : '🌐'}</span>
@@ -114,11 +113,10 @@ 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'
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')}
>
@@ -126,11 +124,10 @@ const Header: React.FC<HeaderProps> = ({
</button>
<button
className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${
activeTab === 'backup'
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')}
>
@@ -138,11 +135,10 @@ const Header: React.FC<HeaderProps> = ({
</button>
<button
className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${
activeTab === 'restore'
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')}
>
@@ -150,11 +146,10 @@ const Header: React.FC<HeaderProps> = ({
</button>
<button
className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${
activeTab === 'seedblender'
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')}
>