7.5. Progressive Disclosure

// packages/frontend/src/lib/i18n/terminology.ts
export const TERMINOLOGY = {
 // Encryption Layer
 'FHE_ENCRYPTION': {
 simple: ' Bid Protected',
 detailed: 'Your bid is encrypted using Fully Homomorphic Encryption (FHE). No one—not even validators—can see its value until settlement.',
 technical: 'Client-side encryption via @cofhe/sdk ^1.2.0. Ciphertext hash stored on-chain; plaintext never transmitted.'
 },
 
 // Processing Layer
 'COFHE_PROCESSING': {
 simple: '️ Sealed Vault Active',
 detailed: 'Encrypted bids are being compared off-chain. The comparison happens without decryption, preserving privacy.',
 technical: 'FHEOS coprocessor executing constant-time FHE.select multiplexers. Results bound to EigenLayer AVS signatures.'
 },
 
 // Verification Layer
 'AVS_VERIFICATION': {
 simple: ' Verified by Network',
 detailed: 'Multiple independent operators have cryptographically signed the result. Economic penalties deter manipulation.',
 technical: 'EigenLayer AVS threshold consensus (3/5 operators). Fraud proofs enable slashing for invalid submissions.'
 },
 
 // Emergency Layer
 'DYNAMIC_TIMEOUT': {
 simple: '️ Auto-Refund Triggered',
 detailed: 'Network delay detected. Your funds are safe and can be claimed immediately via the refund button.',
 technical: 'Moving Time Average × 1.5 threshold exceeded. Contract transitioned to VOIDED; FHE engine disabled.'
 },
 
 // Settlement Layer
 'PULL_REFUND': {
 simple: ' Claim Your Funds',
 detailed: 'Click to withdraw your deposit. No loops, no gas wars—your refund is guaranteed.',
 technical: 'Pull-over-Push pattern: state mutation precedes external call. O(1) gas, reentrancy-immune.'
 }
} as const;
 
export type TermKey = keyof typeof TERMINOLOGY;
export type DisclosureLevel = 'simple' | 'detailed' | 'technical';

// packages/frontend/src/components/ui/ProgressiveInfo.tsx
'use client';
 
import { useState } from 'react';
import { TERMINOLOGY, TermKey, DisclosureLevel } from '@lib/i18n/terminology';
import { useAuctionState } from '@lib/hooks/useAuctionState';
import { Tooltip } from '@components/ui/Tooltip';
 
interface ProgressiveInfoProps {
 term: TermKey;
 auctionId?: string;
 defaultLevel?: DisclosureLevel;
}
 
export function ProgressiveInfo({ term, auctionId, defaultLevel = 'simple' }: ProgressiveInfoProps) {
 const [level, setLevel] = useState<DisclosureLevel>(defaultLevel);
 const { state } = useAuctionState(auctionId || '');
 
 // State-gated visibility: technical details only shown post-finalization
 const canShowTechnical = state === 'FINALIZED' || state === 'VOIDED';
 const availableLevels = (['simple', 'detailed', ...(canShowTechnical ? ['technical' as const] : [])] as DisclosureLevel[]);
 
 const content = TERMINOLOGY[term][level];
 
 return (
 <div className="progressive-info" role="group" aria-label={`${term} disclosure`}>
 <div className="content">
 {content}
 <Tooltip content={TERMINOLOGY[term].detailed}>
 <button className="help-icon" aria-label="Learn more">?</button>
 </Tooltip>
 </div>
 
 {/* Advanced Mode Toggle (only if technical content available) */}
 {canShowTechnical && availableLevels.length > 1 && (
 <div className="disclosure-controls">
 <label>
 <input 
 type="checkbox" 
 checked={level === 'technical'}
 onChange={(e) => setLevel(e.target.checked ? 'technical' : 'simple')}
 />
 Show technical details
 </label>
 </div>
 )}
 </div>
 );
}

// packages/frontend/src/app/auction/[id]/components/ConfidenceDashboard.tsx (excerpt)
import { ProgressiveInfo } from '@components/ui/ProgressiveInfo';
 
export function ConfidenceDashboard({ auctionId }: { auctionId: string }) {
 const { state, activeBids, timeRemaining } = useAuctionState(auctionId);
 
 return (
 <div className="dashboard-grid">
 {/* Always Visible: Process Transparency */}
 <MetricCard 
 label="Sealed Bids" 
 value={<ProgressiveInfo term="FHE_ENCRYPTION" auctionId={auctionId} />}
 icon=""
 />
 
 {/* State-Gated: Processing Status */}
 {state === 'RESOLVING' && (
 <MetricCard 
 label="Settlement Progress" 
 value={<ProgressiveInfo term="COFHE_PROCESSING" auctionId={auctionId} />}
 icon="️"
 />
 )}
 
 {/* State-Gated: Final Outcome */}
 {state === 'FINALIZED' && (
 <MetricCard 
 label="Result Verification" 
 value={<ProgressiveInfo term="AVS_VERIFICATION" auctionId={auctionId} defaultLevel="detailed" />}
 icon=""
 />
 )}
 </div>
 );
}