/** * UI utilities for pubkey visualization. * * For pubkey validation, formatting, and conversion, use the domain Pubkey class: * import { Pubkey } from '@/domain' * - Pubkey.isValidHex(hex) * - Pubkey.tryFromString(input)?.hex * - Pubkey.tryFromString(input)?.npub * - Pubkey.tryFromString(input)?.formatNpub(length) */ import { LRUCache } from 'lru-cache' const pubkeyImageCache = new LRUCache({ max: 1000 }) /** * Generate a unique SVG image based on a pubkey. * Uses the pubkey bytes to deterministically create a colorful gradient pattern. */ export function generateImageByPubkey(pubkey: string): string { if (pubkeyImageCache.has(pubkey)) { return pubkeyImageCache.get(pubkey)! } const paddedPubkey = pubkey.padEnd(2, '0') // Split into 3 parts for colors and the rest for control points const colors: string[] = [] const controlPoints: string[] = [] for (let i = 0; i < 11; i++) { const part = paddedPubkey.slice(i * 6, (i + 1) * 6) if (i < 3) { colors.push(`#${part}`) } else { controlPoints.push(part) } } // Generate SVG with multiple radial gradients const gradients = controlPoints .map((point, index) => { const cx = parseInt(point.slice(0, 2), 16) % 100 const cy = parseInt(point.slice(2, 4), 16) % 100 const r = (parseInt(point.slice(4, 6), 16) % 35) + 30 const c = colors[index % (colors.length - 1)] return ` ` }) .join('') const image = ` ${gradients} ` const imageData = `data:image/svg+xml;base64,${btoa(image)}` pubkeyImageCache.set(pubkey, imageData) return imageData }