diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 5c79e6c..c8fc7a0 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -18,5 +18,6 @@ jobs: cache: pnpm - run: pnpm install --frozen-lockfile - run: pnpm format:check + - run: pnpm lint:i18n - run: pnpm test:a11y - run: pnpm build diff --git a/package.json b/package.json index c227214..32c79e9 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,8 @@ "test:a11y": "vitest run src/__tests__/a11y.test.tsx", "format": "prettier --write .", "format:check": "prettier --check .", + "lint:i18n": "node scripts/lint-i18n.mjs", + "generate:og": "node scripts/generate-og.mjs", "prepare": "husky" }, "dependencies": { @@ -19,6 +21,7 @@ "@wraith-protocol/sdk": "^1.4.5", "react": "^19.2.5", "react-dom": "^19.2.5", + "react-i18next": "^17.0.8", "react-router-dom": "^7.18.0" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fd2a768..5ff14ba 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + i18next: + specifier: ^26.3.3 + version: 26.3.3(typescript@6.0.2) '@stellar/stellar-sdk': specifier: ^13.3.0 version: 13.3.0 @@ -20,6 +23,9 @@ importers: react-dom: specifier: ^19.2.5 version: 19.2.5(react@19.2.5) + react-i18next: + specifier: ^17.0.8 + version: 17.0.8(i18next@26.3.3(typescript@6.0.2))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(typescript@6.0.2) react-router-dom: specifier: ^7.18.0 version: 7.18.0(react-dom@19.2.5(react@19.2.5))(react@19.2.5) @@ -1302,6 +1308,8 @@ packages: resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==} engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0} + html-parse-stringify@3.0.1: + resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==} https-proxy-agent@5.0.1: resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==} engines: {node: '>= 6'} @@ -1311,6 +1319,13 @@ packages: engines: {node: '>=18'} hasBin: true + i18next@26.3.3: + resolution: {integrity: sha512-aYVegyBdXSO93CMMihvr47jI7GHSOcIahMpJX+qzUXDzW4xDJf2uenIA+45vDU+YhiVdcfsql70AC9RVdMNrHg==} + peerDependencies: + typescript: ^5 || ^6 + peerDependenciesMeta: + typescript: + optional: true ieee754@1.2.1: resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==} @@ -1912,6 +1927,10 @@ packages: jsdom: optional: true + void-elements@3.1.0: + resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==} + engines: {node: '>=0.10.0'} + w3c-xmlserializer@5.0.0: resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==} engines: {node: '>=18'} @@ -3045,6 +3064,15 @@ snapshots: transitivePeerDependencies: - '@noble/hashes' + html-parse-stringify@3.0.1: + dependencies: + void-elements: 3.1.0 + + husky@9.1.7: {} + + i18next@26.3.3(typescript@6.0.2): + optionalDependencies: + typescript: 6.0.2 https-proxy-agent@5.0.1: dependencies: agent-base: 6.0.2 @@ -3576,6 +3604,8 @@ snapshots: transitivePeerDependencies: - msw + void-elements@3.1.0: {} + w3c-xmlserializer@5.0.0: dependencies: xml-name-validator: 5.0.0 diff --git a/scripts/generate-og.mjs b/scripts/generate-og.mjs new file mode 100644 index 0000000..e961a42 --- /dev/null +++ b/scripts/generate-og.mjs @@ -0,0 +1,90 @@ +/** + * Post-build script: reads dist/index.html and emits per-locale variants with + * locale-specific , meta description, og:locale, og:title, og:description, + * twitter:title, and twitter:description tags. + * + * Usage: node scripts/generate-og.mjs + * Run after: pnpm build + * + * Output: + * dist/en/index.html + * dist/es/index.html + */ + +import { readFileSync, writeFileSync, mkdirSync } from 'fs'; +import { join, dirname } from 'path'; +import { fileURLToPath } from 'url'; +import en from '../src/i18n/en.json' assert { type: 'json' }; +import es from '../src/i18n/es.json' assert { type: 'json' }; + +const __dirname = dirname(fileURLToPath(import.meta.url)); +const distDir = join(__dirname, '..', 'dist'); +const srcHtml = join(distDir, 'index.html'); + +const locales = [ + { code: 'en', strings: en, ogLocale: 'en_US' }, + { code: 'es', strings: es, ogLocale: 'es_ES' }, +]; + +let html; +try { + html = readFileSync(srcHtml, 'utf8'); +} catch { + console.error('dist/index.html not found. Run `pnpm build` first.'); + process.exit(1); +} + +for (const { code, strings, ogLocale } of locales) { + const og = strings.og; + + let out = html; + + // <title> + out = out.replace(/<title>[^<]*<\/title>/, `<title>${og.siteTitle}`); + + // meta description + out = out.replace( + /(]*lang=")[^"]*(")/i, `$1${code}$2`); + + const outDir = join(distDir, code); + mkdirSync(outDir, { recursive: true }); + writeFileSync(join(outDir, 'index.html'), out, 'utf8'); + console.log(`generate:og — wrote dist/${code}/index.html`); +} + +console.log('generate:og — done.'); diff --git a/scripts/lint-i18n.mjs b/scripts/lint-i18n.mjs new file mode 100644 index 0000000..799109d --- /dev/null +++ b/scripts/lint-i18n.mjs @@ -0,0 +1,62 @@ +/** + * Scans src/components/*.tsx for JSX text nodes that look like human-readable + * multi-word strings not wrapped in a t() call. Exits 1 if any are found. + * + * Heuristic: a JSX text node that: + * - Contains two or more words (letters only, no < > { } characters) + * - Is not purely whitespace, punctuation, or a single token like "↗" + * is flagged as a potential hardcoded string. + * + * False-positives in code blocks / aria strings passed directly are expected + * to be suppressed by keeping them inside t() calls. + */ + +import { readFileSync, readdirSync } from 'fs'; +import { join, dirname } from 'path'; +import { fileURLToPath } from 'url'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); +const componentsDir = join(__dirname, '..', 'src', 'components'); + +// Matches bare JSX text between tags: >Some readable text< +// Must contain at least two letter-words separated by a space. +// We skip lines that are inside attribute strings (attr="…") or t('…') calls. +const JSX_TEXT_RE = />([^<>{}\n]+) f.endsWith('.tsx')); + +let violations = 0; + +for (const file of files) { + const filePath = join(componentsDir, file); + const src = readFileSync(filePath, 'utf8'); + const lines = src.split('\n'); + + lines.forEach((line, idx) => { + // Skip lines that already call t(…) — they're intentionally translated + if (line.includes('t(') || line.includes('{t(')) return; + // Skip import lines, comments, className strings, aria- attributes + if (/^\s*(import|\/\/|\/\*|\*|className=|aria-|title=)/.test(line)) return; + + let match; + const re = new RegExp(JSX_TEXT_RE.source, 'g'); + while ((match = re.exec(line)) !== null) { + const text = match[1].trim(); + if (MULTI_WORD_RE.test(text)) { + console.error( + `${file}:${idx + 1}: hardcoded JSX string: "${text}"`, + ); + violations++; + } + } + }); +} + +if (violations > 0) { + console.error(`\n${violations} hardcoded string(s) found. Wrap them in t().`); + process.exit(1); +} else { + console.log(`lint:i18n — no hardcoded JSX strings found in ${files.length} component(s).`); +} diff --git a/src/components/Architecture.tsx b/src/components/Architecture.tsx index 28e3c4a..c5992c8 100644 --- a/src/components/Architecture.tsx +++ b/src/components/Architecture.tsx @@ -1,44 +1,43 @@ +import { useTranslation } from 'react-i18next'; import { useInView } from '../hooks/useInView'; -const steps = [ - { - num: '1', - label: 'SENDER', - description: - "Derives a stealth address from the recipient's meta-address using a fresh ephemeral key.", - code: 'deriveStealthAddress()', - border: true, - }, - { - num: '2', - label: 'ANNOUNCER', - description: - 'On-chain announcement event logs the payment so the receiver can find it without interaction.', - code: 'Announcement event', - border: true, - }, - { - num: '3', - label: 'RECEIVER', - description: - 'Scans announcements with their viewing key, derives the spending key, and withdraws at will.', - code: 'scan() → withdraw()', - border: false, - }, -]; - export default function Architecture() { + const { t } = useTranslation(); const { ref, isInView } = useInView({ threshold: 0.1 }); + const steps = [ + { + num: '1', + label: t('architecture.sender.label'), + description: t('architecture.sender.description'), + code: 'deriveStealthAddress()', + border: true, + }, + { + num: '2', + label: t('architecture.announcer.label'), + description: t('architecture.announcer.description'), + code: 'Announcement event', + border: true, + }, + { + num: '3', + label: t('architecture.receiver.label'), + description: t('architecture.receiver.description'), + code: 'scan() → withdraw()', + border: false, + }, + ]; + return (
- How It Works + {t('architecture.eyebrow')}

- Announce. Derive. Scan. + {t('architecture.heading')}

diff --git a/src/components/Chains.tsx b/src/components/Chains.tsx index 544d23e..61c5f0a 100644 --- a/src/components/Chains.tsx +++ b/src/components/Chains.tsx @@ -1,49 +1,51 @@ +import { useTranslation } from 'react-i18next'; import { useInView } from '../hooks/useInView'; -const chains = [ - { - name: 'Horizen', - active: true, - status: 'LIVE ON TESTNET', - meta: 'EVM · TEE-secured · ERC-5564', - border: true, - }, - { - name: 'Stellar', - active: true, - status: 'LIVE ON TESTNET', - meta: 'Soroban · Memo-based', - featured: true, - border: true, - }, - { - name: 'Solana', - active: true, - status: 'LIVE ON DEVNET', - meta: 'SPL tokens · Memo program', - border: true, - }, - { - name: 'Nervos CKB', - active: true, - status: 'LIVE ON TESTNET', - meta: 'Cell model · CCC integration', - border: false, - }, -]; - export default function Chains() { + const { t } = useTranslation(); const { ref, isInView } = useInView({ threshold: 0.1 }); + const chains = [ + { + name: 'Horizen', + active: true, + status: t('chains.statuses.liveTestnet'), + meta: t('chains.horizen.meta'), + border: true, + }, + { + name: 'Stellar', + active: true, + status: t('chains.statuses.liveTestnet'), + meta: t('chains.stellar.meta'), + featured: true, + border: true, + }, + { + name: 'Solana', + active: true, + status: t('chains.statuses.liveDevnet'), + meta: t('chains.solana.meta'), + border: true, + }, + { + name: 'Nervos CKB', + active: true, + status: t('chains.statuses.liveTestnet'), + meta: t('chains.ckb.meta'), + border: false, + }, + ]; + return (
- Supported Chains + {t('chains.eyebrow')}

- Built for a multi-chain world. + {t('chains.heading')}

@@ -52,11 +54,10 @@ export default function Chains() { data-reveal={isInView} > - Stellar-first stealth support + {t('chains.stellarNote.eyebrow')}

- Soroban integration with memo-based recipient metadata, making private payments on - Stellar feel native. + {t('chains.stellarNote.description')}

@@ -76,7 +77,7 @@ export default function Chains() { {chain.featured && ( - Partner + {t('chains.partner')} )}
diff --git a/src/components/Compare.tsx b/src/components/Compare.tsx index eb57cc8..9ee2b48 100644 --- a/src/components/Compare.tsx +++ b/src/components/Compare.tsx @@ -1,4 +1,8 @@ import { type KeyboardEvent, useState } from 'react'; +import { useTranslation } from 'react-i18next'; + +const comparisonTabs = ['all', 'wraith', 'mixers', 'rollups', 'railgun', 'transparent'] as const; +type ComparisonTab = (typeof comparisonTabs)[number]; type ComparisonRow = { protocol: string; @@ -11,70 +15,59 @@ type ComparisonRow = { complexity: string; }; -const comparisonTabs = ['all', 'wraith', 'mixers', 'rollups', 'railgun', 'transparent'] as const; -type ComparisonTab = (typeof comparisonTabs)[number]; - -const comparisonTabLabels: Record = { - all: 'All Details', - wraith: 'Wraith (Stealth)', - mixers: 'Tornado Cash (Mixers)', - rollups: 'Aztec (zk-Rollups)', - railgun: 'Railgun (Shielded)', - transparent: 'Status Quo', -}; - -const comparisonData: ComparisonRow[] = [ - { - protocol: 'Wraith Protocol', - isWraith: true, - mechanism: 'Stealth Addresses (ERC-5564)', - ux: 'Low friction (direct sending to meta-address)', - recipient: 'Passive receipt (scans announcements via viewing key)', - regulation: 'Non-pooled, direct peer-to-peer transfers', - multichain: 'Native multi-chain API (4+ chains)', - complexity: 'Low (standard elliptic curve cryptography)', - }, - { - protocol: 'Tornado Cash Style', - mechanism: 'Zero-Knowledge Pools (zk-SNARKs)', - ux: 'High friction (fixed deposits, note files)', - recipient: 'Active withdrawal (must generate ZK proof and pay relayers)', - regulation: 'Highly sanctioned (global OFAC sanctions)', - multichain: 'Isolated pools per chain', - complexity: 'High (client-side proofs, relayer networks)', - }, - { - protocol: 'Aztec / ZK Rollups', - mechanism: 'State Encryption & Rollups', - ux: 'High friction (requires bridging to L2 and exiting)', - recipient: 'L2 native (receiver must have L2 account & scan L2)', - regulation: 'Restricted (privacy bridges deprecating due to compliance)', - multichain: 'Host-chain locked (complex L2 bridging)', - complexity: 'Extreme (L2 rollup economics, state sync, proving nodes)', - }, - { - protocol: 'Railgun', - mechanism: 'In-Contract ZK Shielded Pools', - ux: 'Medium-High (shielding/unshielding, private wallet)', - recipient: 'Shielded native (must own private address to receive)', - regulation: 'Self-regulated (viewing keys, proof of innocence)', - multichain: 'Isolated contracts per network', - complexity: 'High (private state trees, DeFi adapters, client proofs)', - }, - { - protocol: 'Status Quo', - mechanism: 'None (transparent public ledger)', - ux: 'Frictionless (native wallet transactions)', - recipient: 'Native receipt (immediate access, standard wallets)', - regulation: 'Compliant (but zero privacy or commercial secrecy)', - multichain: 'Native support on all chains', - complexity: 'Zero (default ledger mechanics)', - }, -]; - export default function Compare() { + const { t } = useTranslation(); const [activeTab, setActiveTab] = useState('all'); + const comparisonData: ComparisonRow[] = [ + { + protocol: t('compare.rows.wraith.name'), + isWraith: true, + mechanism: t('compare.rows.wraith.mechanism'), + ux: t('compare.rows.wraith.ux'), + recipient: t('compare.rows.wraith.recipient'), + regulation: t('compare.rows.wraith.regulation'), + multichain: t('compare.rows.wraith.multichain'), + complexity: t('compare.rows.wraith.complexity'), + }, + { + protocol: t('compare.rows.tornado.name'), + mechanism: t('compare.rows.tornado.mechanism'), + ux: t('compare.rows.tornado.ux'), + recipient: t('compare.rows.tornado.recipient'), + regulation: t('compare.rows.tornado.regulation'), + multichain: t('compare.rows.tornado.multichain'), + complexity: t('compare.rows.tornado.complexity'), + }, + { + protocol: t('compare.rows.aztec.name'), + mechanism: t('compare.rows.aztec.mechanism'), + ux: t('compare.rows.aztec.ux'), + recipient: t('compare.rows.aztec.recipient'), + regulation: t('compare.rows.aztec.regulation'), + multichain: t('compare.rows.aztec.multichain'), + complexity: t('compare.rows.aztec.complexity'), + }, + { + protocol: t('compare.rows.railgun.name'), + mechanism: t('compare.rows.railgun.mechanism'), + ux: t('compare.rows.railgun.ux'), + recipient: t('compare.rows.railgun.recipient'), + regulation: t('compare.rows.railgun.regulation'), + multichain: t('compare.rows.railgun.multichain'), + complexity: t('compare.rows.railgun.complexity'), + }, + { + protocol: t('compare.rows.statusQuo.name'), + mechanism: t('compare.rows.statusQuo.mechanism'), + ux: t('compare.rows.statusQuo.ux'), + recipient: t('compare.rows.statusQuo.recipient'), + regulation: t('compare.rows.statusQuo.regulation'), + multichain: t('compare.rows.statusQuo.multichain'), + complexity: t('compare.rows.statusQuo.complexity'), + }, + ]; + const activeTabIndex = comparisonTabs.indexOf(activeTab); const handleTabKeyDown = (event: KeyboardEvent) => { @@ -103,31 +96,26 @@ export default function Compare() { className="border-t border-outline-variant-30 px-6 py-24 md:px-12 scroll-mt-20" >
- {/* Section Header */}
- Comparative Analysis + {t('compare.eyebrow')}

- Honest comparison to alternatives. + {t('compare.heading')}

- Privacy is not one-size-fits-all. Different mechanisms make distinct trade-offs between - user convenience, regulatory posture, and mathematical complexity. + {t('compare.description')}

- {/* Scroll helper indicator for mobile screens */}
- Swipe table horizontally to view all columns + {t('compare.scrollHint')} →
- {/* Responsive Table Wrapper */}
- {/* Right edge fade gradient to indicate scrollability */}
@@ -138,43 +126,43 @@ export default function Compare() { scope="col" className="sticky left-0 z-10 bg-surface-container-high px-[23px] py-[15px] md:px-6 md:py-4 font-mono text-[10px] font-semibold uppercase tracking-[1.5px] text-outline w-[180px]" > - Protocol + {t('compare.table.protocol')} - Privacy Mechanism + {t('compare.table.mechanism')} - UX / Sending Flow + {t('compare.table.ux')} - Recipient Flow + {t('compare.table.recipient')} - Regulatory Posture + {t('compare.table.regulation')} - Multichain + {t('compare.table.multichain')} - Complexity + {t('compare.table.complexity')} @@ -228,12 +216,11 @@ export default function Compare() {
- {/* Prose Deep-Dives - Category Tabs */}
{comparisonTabs.map((tab) => ( ))}
@@ -263,172 +250,137 @@ export default function Compare() { aria-labelledby={`comparison-tab-${activeTab}`} className="grid gap-6 md:grid-cols-2 lg:grid-cols-2" > - {/* Card 1: Wraith (Stealth Addresses) */} {(activeTab === 'all' || activeTab === 'wraith') && (
- WRAITH APPROACH + {t('compare.cards.wraith.eyebrow')} - NON-POOLED STEALTH + {t('compare.cards.wraith.badge')}

- Wraith: Direct, Peer-to-Peer Privacy + {t('compare.cards.wraith.heading')}

- Wraith implements cryptographic stealth addresses based on the ERC-5564 and - ERC-6538 standards. Instead of pooling funds into a shared mixer, every single - transaction goes to a one-time, fresh destination address derived - cryptographically using the recipient's public keys and the sender's - ephemeral keys. + {t('compare.cards.wraith.body')}

- Why it matters + {t('compare.cards.wraith.whyLabel')}

- By removing the shared "anonymity pool," Wraith avoids the regulatory - issues and technical overhead of traditional mixers. Users transact peer-to-peer - natively, while retaining complete unlinkability of the receiver's identity - on the public ledger. + {t('compare.cards.wraith.why')}

)} - {/* Card 2: Tornado Cash (Mixers) */} {(activeTab === 'all' || activeTab === 'mixers') && (
- MIXERS & POOLS + {t('compare.cards.mixers.eyebrow')} - OFAC SANCTIONED + {t('compare.cards.mixers.badge')}

- Tornado-Cash-style Mixers + {t('compare.cards.mixers.heading')}

- Mixers break links between deposit and withdrawal addresses by putting funds into - a communal smart-contract pool. Users deposit fixed denominations (e.g. 1 ETH) and - receive a cryptographic note. To withdraw, they generate a client-side - zero-knowledge proof proving they own one of the unspent deposits. + {t('compare.cards.mixers.body')}

- Regulatory Status & Gaps + {t('compare.cards.mixers.gapsLabel')}

- Tornado Cash was sanctioned by the U.S. Office of Foreign Assets Control (OFAC) - in 2022 because its pooled architecture obfuscates illicit financial flows. - Additionally, the UX is complex: receivers must remain online to generate ZK - proofs and pay gas relayers to maintain withdrawal privacy. + {t('compare.cards.mixers.gaps')}

)} - {/* Card 3: Aztec / ZK Rollups */} {(activeTab === 'all' || activeTab === 'rollups') && (
- LAYER 2 ENCRYPTION + {t('compare.cards.rollups.eyebrow')} - PROGRAMMABLE L2 + {t('compare.cards.rollups.badge')}

- Aztec & zk-Rollup Privacy + {t('compare.cards.rollups.heading')}

- Aztec brings privacy to the smart contract execution layer via an encrypted - Layer-2 rollup. Encrypted state updates are processed off-chain, and - zero-knowledge proofs are compiled in batches and posted to the Layer-1 Ethereum - ledger for global validation. + {t('compare.cards.rollups.body')}

- Strengths & Gaps + {t('compare.cards.rollups.gapsLabel')}

- Excellent for rich private state logic and private DeFi. However, users face - significant friction, including L1-to-L2 bridging steps, delays in rollup - finality, and complex wallet setup. Because rollups are tied to a single host - chain, cross-chain privacy remains a major challenge. + {t('compare.cards.rollups.gaps')}

)} - {/* Card 4: Railgun */} {(activeTab === 'all' || activeTab === 'railgun') && (
- SHIELDED CONTRACTS + {t('compare.cards.railgun.eyebrow')} - IN-CONTRACT DEFI + {t('compare.cards.railgun.badge')}

- Railgun Shielded Actions + {t('compare.cards.railgun.heading')}

- Railgun is an on-chain privacy protocol deployed directly on EVM networks. It - allows users to "shield" tokens inside a smart contract pool. Once - shielded, assets can be transferred, swapped, or deployed into partner DeFi yield - contracts privately using zk-SNARKs. + {t('compare.cards.railgun.body')}

- Strengths & Gaps + {t('compare.cards.railgun.gapsLabel')}

- Railgun excels at private, in-pool swaps and yield generation directly on L1/L2 - without bridging. However, users must use specific Railgun-compatible wallets - and pay substantial gas costs to shield or unshield. Its pooled design also - requires heavy client-side proof generation. + {t('compare.cards.railgun.gaps')}

)} - {/* Card 5: Status Quo */} {(activeTab === 'all' || activeTab === 'transparent') && (
- TRANSPARENT LEDGER + {t('compare.cards.transparent.eyebrow')} - DEFAULT PUBLIC + {t('compare.cards.transparent.badge')}

- The Transparent Ledger Status Quo + {t('compare.cards.transparent.heading')}

- Public blockchains operate on absolute transparency. Anyone with an internet - connection can view your entire transaction history, balances, asset holdings, and - network of counterparties via simple block explorers. + {t('compare.cards.transparent.body')}

- What you give up + {t('compare.cards.transparent.gapsLabel')}

- Transparent accounts expose businesses, merchants, and individuals to - front-running, phishing, and physical security risks. While simple to use, - complete public disclosure makes default ledger transactions unfeasible for - standard enterprise operations like payroll or supplier contracts. + {t('compare.cards.transparent.gaps')}

diff --git a/src/components/CtaStrip.tsx b/src/components/CtaStrip.tsx index 42491df..d2a5a25 100644 --- a/src/components/CtaStrip.tsx +++ b/src/components/CtaStrip.tsx @@ -1,14 +1,17 @@ +import { useTranslation } from 'react-i18next'; import { trackEvent } from '../analytics'; export default function CtaStrip() { + const { t } = useTranslation(); + return (
- Ready to Build + {t('cta.eyebrow')}

- Start shipping private payments today. + {t('cta.heading')}

@@ -19,7 +22,7 @@ export default function CtaStrip() { onClick={() => trackEvent('Get API Key')} className="flex h-12 items-center justify-center bg-primary px-7 font-heading text-[13px] font-semibold uppercase tracking-[1.5px] text-surface transition-[filter] duration-150 hover:brightness-110" > - Get API Keys + {t('cta.getKeys')} trackEvent('Read the Docs')} className="flex h-12 items-center justify-center border border-outline-variant px-7 font-heading text-[13px] font-semibold uppercase tracking-[1.5px] text-primary transition-colors duration-150 hover:bg-surface-bright" > - Read the Docs + {t('cta.readDocs')}
diff --git a/src/components/Features.tsx b/src/components/Features.tsx index 1b8eb32..0876f2f 100644 --- a/src/components/Features.tsx +++ b/src/components/Features.tsx @@ -1,49 +1,48 @@ +import { useTranslation } from 'react-i18next'; import { useInView } from '../hooks/useInView'; -const features = [ - { - num: '01', - title: 'Stealth Addresses', - description: - "Every incoming payment lands at a fresh, unlinkable address derived from the recipient's meta-address. Public chains, private receivers.", - meta: 'ERC-5564 · ERC-6538', - }, - { - num: '02', - title: 'Fast Scanning', - description: - "Indexed announcement events via Goldsky so clients scan a wallet's incoming stealth payments in seconds, not minutes.", - meta: 'Goldsky subgraphs', - }, - { - num: '03', - title: 'Multi-chain Core', - description: - 'One API for Horizen, Stellar, Solana, and CKB. Chain-specific wallet adapters ship with the SDK — you write application code, not protocol code.', - meta: '4 chains · more coming', - }, -]; - export default function Features() { + const { t } = useTranslation(); const { ref, isInView } = useInView({ threshold: 0.1 }); + const features = [ + { + num: '01', + title: t('features.stealth.title'), + description: t('features.stealth.description'), + meta: t('features.stealth.meta'), + }, + { + num: '02', + title: t('features.scanning.title'), + description: t('features.scanning.description'), + meta: t('features.scanning.meta'), + }, + { + num: '03', + title: t('features.multichain.title'), + description: t('features.multichain.description'), + meta: t('features.multichain.meta'), + }, + ]; + return (
- Why Wraith + {t('features.eyebrow')}

- Everything you need{'\n'}for stealth payments. + {t('features.heading')}

- Three primitives, wired correctly. No custom crypto on your side.{' '} + {t('features.description')}{' '} - See how we compare to alternatives → + {t('features.compareLink')}

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 3f96930..1b8a192 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -95,53 +95,42 @@ function normalizeStatus(payload: unknown): StatusState { } export default function Footer() { - const [status, setStatus] = useState({ - label: 'Checking status...', - tone: 'neutral', - }); - - useEffect(() => { - let isMounted = true; - - const refreshStatus = async () => { - try { - const response = await fetch(statusApiUrl, { - headers: { Accept: 'application/json' }, - }); - - if (!response.ok) { - throw new Error('Status endpoint unavailable'); - } - - const payload = await response.json(); - - if (isMounted) { - setStatus(normalizeStatus(payload)); - } - } catch { - if (isMounted) { - setStatus({ label: 'Status unavailable', tone: 'neutral' }); - } - } - }; - - void refreshStatus(); - const intervalId = window.setInterval(() => { - void refreshStatus(); - }, 60000); - - return () => { - isMounted = false; - window.clearInterval(intervalId); - }; - }, []); - - const toneClasses: Record = { - green: 'border border-[#22c55e]/30 bg-[#22c55e]/15 text-[#22c55e]', - yellow: 'border border-[#c4c7c5]/40 bg-[#c4c7c5]/10 text-[#c4c7c5]', - red: 'border border-[#ee7d77]/40 bg-[#ee7d77]/15 text-[#ee7d77]', - neutral: 'border border-outline-variant/40 bg-surface-container text-outline', - }; + const { t } = useTranslation(); + + const columns = [ + { + title: t('footer.columns.product'), + links: [ + { label: t('footer.product.docs'), href: 'https://docs.usewraith.xyz' }, + { label: t('footer.product.demo'), href: 'https://demo.usewraith.xyz' }, + { label: t('footer.product.console'), href: 'https://console.usewraith.xyz' }, + { label: t('footer.product.compare'), href: '#compare' }, + { label: t('footer.product.faq'), href: '/faq' }, + { label: t('footer.product.changelog'), href: 'https://docs.usewraith.xyz/changelog' }, + ], + }, + { + title: t('footer.columns.developers'), + links: [ + { label: t('footer.developers.sdk'), href: 'https://docs.usewraith.xyz/sdk/overview' }, + { label: t('footer.developers.apiReference'), href: 'https://docs.usewraith.xyz/api' }, + { label: t('footer.developers.github'), href: 'https://github.com/wraith-protocol' }, + { + label: t('footer.developers.npm'), + href: 'https://www.npmjs.com/package/@wraith-protocol/sdk', + }, + ], + }, + { + title: t('footer.columns.resources'), + links: [ + { label: t('footer.resources.erc5564'), href: 'https://eips.ethereum.org/EIPS/eip-5564' }, + { label: t('footer.resources.erc6538'), href: 'https://eips.ethereum.org/EIPS/eip-6538' }, + { label: t('footer.resources.security'), href: 'https://docs.usewraith.xyz/security' }, + { label: t('footer.resources.press'), href: '/press' }, + ], + }, + ]; return (
@@ -213,7 +200,7 @@ export default function Footer() { diff --git a/src/components/ForDevelopers.tsx b/src/components/ForDevelopers.tsx index 4bce939..5cdb2e4 100644 --- a/src/components/ForDevelopers.tsx +++ b/src/components/ForDevelopers.tsx @@ -1,50 +1,54 @@ +import { useTranslation } from 'react-i18next'; import { useInView } from '../hooks/useInView'; -const resources = [ - { - label: 'SDK', - badge: { text: 'STABLE', color: 'text-tertiary', bg: 'bg-tertiary-10' }, - title: '@wraith-protocol/sdk', - description: 'TypeScript SDK with wallet adapters for every supported chain.', - code: '$ npm install @wraith-protocol/sdk', - link: 'https://docs.usewraith.xyz/sdk/overview', - linkText: 'READ THE GUIDE', - }, - { - label: 'DEMO', - badge: { text: 'TESTNET', color: 'text-blue', bg: 'bg-blue-10' }, - title: 'demo.usewraith.xyz', - description: - 'A live stealth-payment playground. Send and receive across four chains with your own wallet.', - code: '→ demo.usewraith.xyz', - link: 'https://demo.usewraith.xyz', - linkText: 'OPEN THE DEMO', - }, - { - label: 'CONSOLE', - badge: { text: 'BETA', color: 'text-on-surface-variant', bg: 'bg-surface-bright' }, - title: 'console.usewraith.xyz', - description: - 'API keys, usage dashboards, and team access. The production control plane for your integration.', - code: '→ console.usewraith.xyz', - link: 'https://console.usewraith.xyz', - linkText: 'GET API KEYS', - }, -]; - export default function ForDevelopers() { + const { t } = useTranslation(); const { ref, isInView } = useInView({ threshold: 0.1 }); + const resources = [ + { + label: t('forDevelopers.sdk.label'), + badge: { text: t('forDevelopers.sdk.badge'), color: 'text-tertiary', bg: 'bg-tertiary-10' }, + title: t('forDevelopers.sdk.title'), + description: t('forDevelopers.sdk.description'), + code: '$ npm install @wraith-protocol/sdk', + link: 'https://docs.usewraith.xyz/sdk/overview', + linkText: t('forDevelopers.sdk.linkText'), + }, + { + label: t('forDevelopers.demo.label'), + badge: { text: t('forDevelopers.demo.badge'), color: 'text-blue', bg: 'bg-blue-10' }, + title: t('forDevelopers.demo.title'), + description: t('forDevelopers.demo.description'), + code: '→ demo.usewraith.xyz', + link: 'https://demo.usewraith.xyz', + linkText: t('forDevelopers.demo.linkText'), + }, + { + label: t('forDevelopers.console.label'), + badge: { + text: t('forDevelopers.console.badge'), + color: 'text-on-surface-variant', + bg: 'bg-surface-bright', + }, + title: t('forDevelopers.console.title'), + description: t('forDevelopers.console.description'), + code: '→ console.usewraith.xyz', + link: 'https://console.usewraith.xyz', + linkText: t('forDevelopers.console.linkText'), + }, + ]; + return (
- For Developers + {t('forDevelopers.eyebrow')}

- Three ways to ship. + {t('forDevelopers.heading')}

- Full Docs ↗ + {t('forDevelopers.fullDocs')}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 34efdd1..bd6834c 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -2,13 +2,16 @@ import { useEffect, useRef, useState } from 'react'; import { Link } from 'react-router-dom'; export default function Header() { + const { t, i18n } = useTranslation(); const [menuOpen, setMenuOpen] = useState(false); const [theme, setTheme] = useState<'dark' | 'light'>('dark'); const menuButtonRef = useRef(null); const menuRef = useRef(null); + const currentLocale = (i18n.language.split('-')[0] ?? 'en') as Locale; + const nextLocale: Locale = currentLocale === 'en' ? 'es' : 'en'; + useEffect(() => { - // Check localStorage or prefers-color-scheme const savedTheme = localStorage.getItem('wraith-theme') as 'dark' | 'light' | null; const prefersDark = typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches; @@ -78,7 +81,7 @@ export default function Header() { - WRAITH + {t('header.brand')} @@ -89,7 +92,7 @@ export default function Header() { rel="noopener noreferrer" className="font-body text-[13px] text-outline transition-colors duration-150 hover:text-on-surface-variant" > - Docs + {t('header.nav.docs')} - SDK + {t('header.nav.sdk')} - Demo + {t('header.nav.demo')} - Console + {t('header.nav.console')} - Press + {t('header.nav.press')} - Use Cases + {t('header.nav.useCases')} {theme === 'dark' ? '☀️' : '🌙'} + - GitHub ↗ + {t('header.github')} - Launch App + {t('header.launchApp')}
@@ -169,7 +180,7 @@ export default function Header() { className="flex flex-col gap-1.5 md:hidden" aria-controls="mobile-menu" aria-expanded={menuOpen} - aria-label={menuOpen ? 'Close navigation menu' : 'Open navigation menu'} + aria-label={t(menuOpen ? 'header.menu.close' : 'header.menu.open')} > + {theme === 'dark' ? t('header.theme.lightMode') : t('header.theme.darkMode')} + + - Docs + {t('header.nav.docs')} - SDK + {t('header.nav.sdk')} - Demo + {t('header.nav.demo')} - Console + {t('header.nav.console')} - Press + {t('header.nav.press')} - Use Cases + {t('header.nav.useCases')} - GitHub ↗ + {t('header.github')} - Launch App + {t('header.launchApp')}
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx index 53b325e..11e10a9 100644 --- a/src/components/Hero.tsx +++ b/src/components/Hero.tsx @@ -1,6 +1,8 @@ import { useState, type KeyboardEvent } from 'react'; import { Link } from 'react-router-dom'; +import { useTranslation } from 'react-i18next'; import { trackEvent } from '../analytics'; +import { copyToClipboard } from '../utils/clipboard'; type CodeLine = { content: string; @@ -100,6 +102,7 @@ const colorMap = { }; export default function Hero() { + const { t } = useTranslation(); const [activeTab, setActiveTab] = useState('send.ts'); const [copyStatus, setCopyStatus] = useState<'idle' | 'copied' | 'failed'>('idle'); @@ -154,27 +157,25 @@ export default function Hero() {
- LIVE ON 4 TESTNETS + {t('hero.badge.testnet')}
- Stellar partner + {t('hero.badge.partner')}

- Private payments{'\n'}for every chain. + {t('hero.heading')}

- A stealth-address toolkit built on ERC-5564 and ERC-6538. Drop it into your app and send - receiver-unlinkable payments across Horizen, Stellar, Solana, and CKB. + {t('hero.description')}

- Memo-enabled stealth support on Stellar, plus coordinated privacy flows for multi-chain - apps. + {t('hero.stellarNote')}

@@ -185,7 +186,7 @@ export default function Hero() { onClick={() => trackEvent('Read the Docs')} className="flex h-12 items-center justify-center bg-primary px-7 font-heading text-[13px] font-semibold uppercase tracking-[1.5px] text-surface transition-[filter] duration-150 hover:brightness-110" > - Read the Docs + {t('hero.cta.docs')} trackEvent('Try the Demo')} className="flex h-12 items-center justify-center border border-outline-variant px-7 font-heading text-[13px] font-semibold uppercase tracking-[1.5px] text-primary transition-colors duration-150 hover:bg-surface-bright" > - Try the Demo + {t('hero.cta.demo')} - View FAQ + {t('hero.cta.faq')}
- CHAINS SUPPORTED + {t('hero.stats.chainsLabel')} 4
- SDK BUNDLE + {t('hero.stats.bundleLabel')} 14.2 KB
- ERC STANDARD + {t('hero.stats.ercLabel')} 5564 / 6538
@@ -228,7 +229,11 @@ export default function Hero() {
-
+
{tabs.map((tab) => ( - {copyStatus === 'copied' && `${activeTab} copied to clipboard`} - {copyStatus === 'failed' && `${activeTab} could not be copied`} + {copyStatus === 'copied' && t('hero.code.copiedLive', { tab: activeTab })} + {copyStatus === 'failed' && t('hero.code.failedLive', { tab: activeTab })}
@@ -299,11 +304,11 @@ export default function Hero() {
- npm i @wraith-protocol/sdk + {t('hero.code.install')}
- TYPESCRIPT + {t('hero.code.language')}
diff --git a/src/components/Showcase.tsx b/src/components/Showcase.tsx index 9eda802..b7768f9 100644 --- a/src/components/Showcase.tsx +++ b/src/components/Showcase.tsx @@ -1,3 +1,4 @@ +import { useTranslation } from 'react-i18next'; import { entries } from '../data/showcase.json'; type ShowcaseEntry = { @@ -9,6 +10,8 @@ type ShowcaseEntry = { }; export default function Showcase() { + const { t } = useTranslation(); + if (!entries || entries.length === 0) return null; return ( @@ -16,13 +19,13 @@ export default function Showcase() {
- Built with Wraith + {t('showcase.eyebrow')}

- Projects using Wraith. + {t('showcase.heading')}

- Pilot integrations, reference implementations, and partner POCs. + {t('showcase.description')}

@@ -57,7 +60,7 @@ export default function Showcase() {
- Visit + {t('showcase.visit')} ↗ diff --git a/src/i18n/en.json b/src/i18n/en.json new file mode 100644 index 0000000..db89e41 --- /dev/null +++ b/src/i18n/en.json @@ -0,0 +1,307 @@ +{ + "header": { + "brand": "WRAITH", + "nav": { + "docs": "Docs", + "sdk": "SDK", + "demo": "Demo", + "console": "Console", + "press": "Press", + "useCases": "Use Cases" + }, + "launchApp": "Launch App", + "github": "GitHub ↗", + "locale": { + "switchTo": "Switch to {{lang}}" + }, + "theme": { + "switchToLight": "Switch to light theme", + "switchToDark": "Switch to dark theme", + "lightMode": "☀️ Light Mode", + "darkMode": "🌙 Dark Mode" + }, + "menu": { + "open": "Open navigation menu", + "close": "Close navigation menu" + } + }, + "hero": { + "badge": { + "testnet": "LIVE ON 4 TESTNETS", + "partner": "Stellar partner" + }, + "heading": "Private payments for every chain.", + "description": "A stealth-address toolkit built on ERC-5564 and ERC-6538. Drop it into your app and send receiver-unlinkable payments across Horizen, Stellar, Solana, and CKB.", + "stellarNote": "Memo-enabled stealth support on Stellar, plus coordinated privacy flows for multi-chain apps.", + "cta": { + "docs": "Read the Docs", + "demo": "Try the Demo", + "faq": "View FAQ" + }, + "stats": { + "chainsLabel": "CHAINS SUPPORTED", + "bundleLabel": "SDK BUNDLE", + "ercLabel": "ERC STANDARD" + }, + "code": { + "ariaLabel": "Code examples", + "copy": "COPY", + "copied": "COPIED", + "failed": "FAILED", + "language": "TYPESCRIPT", + "install": "npm i @wraith-protocol/sdk", + "copyAria": "Copy {{tab}} code example", + "copiedLive": "{{tab}} copied to clipboard", + "failedLive": "{{tab}} could not be copied" + } + }, + "features": { + "eyebrow": "Why Wraith", + "heading": "Everything you need for stealth payments.", + "description": "Three primitives, wired correctly. No custom crypto on your side.", + "compareLink": "See how we compare to alternatives →", + "stealth": { + "title": "Stealth Addresses", + "description": "Every incoming payment lands at a fresh, unlinkable address derived from the recipient's meta-address. Public chains, private receivers.", + "meta": "ERC-5564 · ERC-6538" + }, + "scanning": { + "title": "Fast Scanning", + "description": "Indexed announcement events via Goldsky so clients scan a wallet's incoming stealth payments in seconds, not minutes.", + "meta": "Goldsky subgraphs" + }, + "multichain": { + "title": "Multi-chain Core", + "description": "One API for Horizen, Stellar, Solana, and CKB. Chain-specific wallet adapters ship with the SDK — you write application code, not protocol code.", + "meta": "4 chains · more coming" + } + }, + "architecture": { + "eyebrow": "How It Works", + "heading": "Announce. Derive. Scan.", + "sender": { + "label": "SENDER", + "description": "Derives a stealth address from the recipient's meta-address using a fresh ephemeral key." + }, + "announcer": { + "label": "ANNOUNCER", + "description": "On-chain announcement event logs the payment so the receiver can find it without interaction." + }, + "receiver": { + "label": "RECEIVER", + "description": "Scans announcements with their viewing key, derives the spending key, and withdraws at will." + } + }, + "forDevelopers": { + "eyebrow": "For Developers", + "heading": "Three ways to ship.", + "fullDocs": "Full Docs ↗", + "sdk": { + "label": "SDK", + "badge": "STABLE", + "title": "@wraith-protocol/sdk", + "description": "TypeScript SDK with wallet adapters for every supported chain.", + "linkText": "READ THE GUIDE" + }, + "demo": { + "label": "DEMO", + "badge": "TESTNET", + "title": "demo.usewraith.xyz", + "description": "A live stealth-payment playground. Send and receive across four chains with your own wallet.", + "linkText": "OPEN THE DEMO" + }, + "console": { + "label": "CONSOLE", + "badge": "BETA", + "title": "console.usewraith.xyz", + "description": "API keys, usage dashboards, and team access. The production control plane for your integration.", + "linkText": "GET API KEYS" + } + }, + "chains": { + "eyebrow": "Supported Chains", + "heading": "Built for a multi-chain world.", + "partner": "Partner", + "stellarNote": { + "eyebrow": "Stellar-first stealth support", + "description": "Soroban integration with memo-based recipient metadata, making private payments on Stellar feel native." + }, + "statuses": { + "liveTestnet": "LIVE ON TESTNET", + "liveDevnet": "LIVE ON DEVNET" + }, + "horizen": { "meta": "EVM · TEE-secured · ERC-5564" }, + "stellar": { "meta": "Soroban · Memo-based" }, + "solana": { "meta": "SPL tokens · Memo program" }, + "ckb": { "meta": "Cell model · CCC integration" } + }, + "compare": { + "eyebrow": "Comparative Analysis", + "heading": "Honest comparison to alternatives.", + "description": "Privacy is not one-size-fits-all. Different mechanisms make distinct trade-offs between user convenience, regulatory posture, and mathematical complexity.", + "scrollHint": "Swipe table horizontally to view all columns", + "table": { + "ariaLabel": "Comparison detail filters", + "protocol": "Protocol", + "mechanism": "Privacy Mechanism", + "ux": "UX / Sending Flow", + "recipient": "Recipient Flow", + "regulation": "Regulatory Posture", + "multichain": "Multichain", + "complexity": "Complexity" + }, + "tabs": { + "all": "All Details", + "wraith": "Wraith (Stealth)", + "mixers": "Tornado Cash (Mixers)", + "rollups": "Aztec (zk-Rollups)", + "railgun": "Railgun (Shielded)", + "transparent": "Status Quo" + }, + "rows": { + "wraith": { + "name": "Wraith Protocol", + "mechanism": "Stealth Addresses (ERC-5564)", + "ux": "Low friction (direct sending to meta-address)", + "recipient": "Passive receipt (scans announcements via viewing key)", + "regulation": "Non-pooled, direct peer-to-peer transfers", + "multichain": "Native multi-chain API (4+ chains)", + "complexity": "Low (standard elliptic curve cryptography)" + }, + "tornado": { + "name": "Tornado Cash Style", + "mechanism": "Zero-Knowledge Pools (zk-SNARKs)", + "ux": "High friction (fixed deposits, note files)", + "recipient": "Active withdrawal (must generate ZK proof and pay relayers)", + "regulation": "Highly sanctioned (global OFAC sanctions)", + "multichain": "Isolated pools per chain", + "complexity": "High (client-side proofs, relayer networks)" + }, + "aztec": { + "name": "Aztec / ZK Rollups", + "mechanism": "State Encryption & Rollups", + "ux": "High friction (requires bridging to L2 and exiting)", + "recipient": "L2 native (receiver must have L2 account & scan L2)", + "regulation": "Restricted (privacy bridges deprecating due to compliance)", + "multichain": "Host-chain locked (complex L2 bridging)", + "complexity": "Extreme (L2 rollup economics, state sync, proving nodes)" + }, + "railgun": { + "name": "Railgun", + "mechanism": "In-Contract ZK Shielded Pools", + "ux": "Medium-High (shielding/unshielding, private wallet)", + "recipient": "Shielded native (must own private address to receive)", + "regulation": "Self-regulated (viewing keys, proof of innocence)", + "multichain": "Isolated contracts per network", + "complexity": "High (private state trees, DeFi adapters, client proofs)" + }, + "statusQuo": { + "name": "Status Quo", + "mechanism": "None (transparent public ledger)", + "ux": "Frictionless (native wallet transactions)", + "recipient": "Native receipt (immediate access, standard wallets)", + "regulation": "Compliant (but zero privacy or commercial secrecy)", + "multichain": "Native support on all chains", + "complexity": "Zero (default ledger mechanics)" + } + }, + "cards": { + "wraith": { + "eyebrow": "WRAITH APPROACH", + "badge": "NON-POOLED STEALTH", + "heading": "Wraith: Direct, Peer-to-Peer Privacy", + "body": "Wraith implements cryptographic stealth addresses based on the ERC-5564 and ERC-6538 standards. Instead of pooling funds into a shared mixer, every single transaction goes to a one-time, fresh destination address derived cryptographically using the recipient's public keys and the sender's ephemeral keys.", + "whyLabel": "Why it matters", + "why": "By removing the shared \"anonymity pool,\" Wraith avoids the regulatory issues and technical overhead of traditional mixers. Users transact peer-to-peer natively, while retaining complete unlinkability of the receiver's identity on the public ledger." + }, + "mixers": { + "eyebrow": "MIXERS & POOLS", + "badge": "OFAC SANCTIONED", + "heading": "Tornado-Cash-style Mixers", + "body": "Mixers break links between deposit and withdrawal addresses by putting funds into a communal smart-contract pool. Users deposit fixed denominations (e.g. 1 ETH) and receive a cryptographic note. To withdraw, they generate a client-side zero-knowledge proof proving they own one of the unspent deposits.", + "gapsLabel": "Regulatory Status & Gaps", + "gaps": "Tornado Cash was sanctioned by the U.S. Office of Foreign Assets Control (OFAC) in 2022 because its pooled architecture obfuscates illicit financial flows. Additionally, the UX is complex: receivers must remain online to generate ZK proofs and pay gas relayers to maintain withdrawal privacy." + }, + "rollups": { + "eyebrow": "LAYER 2 ENCRYPTION", + "badge": "PROGRAMMABLE L2", + "heading": "Aztec & zk-Rollup Privacy", + "body": "Aztec brings privacy to the smart contract execution layer via an encrypted Layer-2 rollup. Encrypted state updates are processed off-chain, and zero-knowledge proofs are compiled in batches and posted to the Layer-1 Ethereum ledger for global validation.", + "gapsLabel": "Strengths & Gaps", + "gaps": "Excellent for rich private state logic and private DeFi. However, users face significant friction, including L1-to-L2 bridging steps, delays in rollup finality, and complex wallet setup. Because rollups are tied to a single host chain, cross-chain privacy remains a major challenge." + }, + "railgun": { + "eyebrow": "SHIELDED CONTRACTS", + "badge": "IN-CONTRACT DEFI", + "heading": "Railgun Shielded Actions", + "body": "Railgun is an on-chain privacy protocol deployed directly on EVM networks. It allows users to \"shield\" tokens inside a smart contract pool. Once shielded, assets can be transferred, swapped, or deployed into partner DeFi yield contracts privately using zk-SNARKs.", + "gapsLabel": "Strengths & Gaps", + "gaps": "Railgun excels at private, in-pool swaps and yield generation directly on L1/L2 without bridging. However, users must use specific Railgun-compatible wallets and pay substantial gas costs to shield or unshield. Its pooled design also requires heavy client-side proof generation." + }, + "transparent": { + "eyebrow": "TRANSPARENT LEDGER", + "badge": "DEFAULT PUBLIC", + "heading": "The Transparent Ledger Status Quo", + "body": "Public blockchains operate on absolute transparency. Anyone with an internet connection can view your entire transaction history, balances, asset holdings, and network of counterparties via simple block explorers.", + "gapsLabel": "What you give up", + "gaps": "Transparent accounts expose businesses, merchants, and individuals to front-running, phishing, and physical security risks. While simple to use, complete public disclosure makes default ledger transactions unfeasible for standard enterprise operations like payroll or supplier contracts." + } + } + }, + "cta": { + "eyebrow": "Ready to Build", + "heading": "Start shipping private payments today.", + "getKeys": "Get API Keys", + "readDocs": "Read the Docs" + }, + "showcase": { + "eyebrow": "Built with Wraith", + "heading": "Projects using Wraith.", + "description": "Pilot integrations, reference implementations, and partner POCs.", + "visit": "Visit" + }, + "footer": { + "brand": "WRAITH PROTOCOL", + "tagline": "Private payments, plainly.", + "columns": { + "product": "PRODUCT", + "developers": "DEVELOPERS", + "resources": "RESOURCES", + "acknowledgments": "ACKNOWLEDGMENTS" + }, + "product": { + "docs": "Docs", + "demo": "Demo", + "console": "Console", + "compare": "Compare", + "faq": "FAQ", + "changelog": "Changelog" + }, + "developers": { + "sdk": "SDK", + "apiReference": "API Reference", + "github": "GitHub", + "npm": "npm" + }, + "resources": { + "erc5564": "ERC-5564 spec", + "erc6538": "ERC-6538 spec", + "security": "Security", + "press": "Press" + }, + "acknowledgmentsAria": "Supported by Stellar Development Foundation’s Stellar Wave program via Drips", + "acknowledgmentsText": "Supported by Stellar Development Foundation’s Stellar Wave program via Drips", + "built": "BUILT ON HORIZEN · ERC-5564 · OPEN SOURCE", + "legal": { + "privacy": "Privacy", + "terms": "Terms", + "securityTxt": "Security.txt" + } + }, + "og": { + "siteTitle": "Wraith Protocol — Private payments for every chain", + "metaDescription": "Wraith Protocol enables private payments on any blockchain using stealth addresses. One SDK, multiple chains.", + "ogTitle": "Wraith Protocol", + "ogDescription": "Private payments for every chain. Stealth addresses, multichain SDK, and AI-powered privacy agents." + } +} diff --git a/src/i18n/es.json b/src/i18n/es.json new file mode 100644 index 0000000..92a4ab5 --- /dev/null +++ b/src/i18n/es.json @@ -0,0 +1,307 @@ +{ + "header": { + "brand": "WRAITH", + "nav": { + "docs": "Docs", + "sdk": "SDK", + "demo": "Demo", + "console": "Consola", + "press": "Prensa", + "useCases": "Casos de uso" + }, + "launchApp": "Abrir app", + "github": "GitHub ↗", + "locale": { + "switchTo": "Cambiar a {{lang}}" + }, + "theme": { + "switchToLight": "Cambiar a tema claro", + "switchToDark": "Cambiar a tema oscuro", + "lightMode": "☀️ Modo claro", + "darkMode": "🌙 Modo oscuro" + }, + "menu": { + "open": "Abrir menú de navegación", + "close": "Cerrar menú de navegación" + } + }, + "hero": { + "badge": { + "testnet": "EN VIVO EN 4 REDES DE PRUEBA", + "partner": "Socio de Stellar" + }, + "heading": "Pagos privados para cada cadena.", + "description": "Un kit de herramientas de dirección oculta basado en ERC-5564 y ERC-6538. Intégralo en tu app y envía pagos no vinculables al receptor en Horizen, Stellar, Solana y CKB.", + "stellarNote": "Soporte stealth con memo en Stellar, más flujos de privacidad coordinados para apps multicadena.", + "cta": { + "docs": "Leer la documentación", + "demo": "Probar la demo", + "faq": "Ver preguntas frecuentes" + }, + "stats": { + "chainsLabel": "CADENAS SOPORTADAS", + "bundleLabel": "SDK BUNDLE", + "ercLabel": "ESTÁNDAR ERC" + }, + "code": { + "ariaLabel": "Ejemplos de código", + "copy": "COPIAR", + "copied": "COPIADO", + "failed": "ERROR", + "language": "TYPESCRIPT", + "install": "npm i @wraith-protocol/sdk", + "copyAria": "Copiar ejemplo de código {{tab}}", + "copiedLive": "{{tab}} copiado al portapapeles", + "failedLive": "{{tab}} no se pudo copiar" + } + }, + "features": { + "eyebrow": "Por qué Wraith", + "heading": "Todo lo que necesitas para pagos privados.", + "description": "Tres primitivas, conectadas correctamente. Sin criptografía personalizada de tu parte.", + "compareLink": "Compara con alternativas →", + "stealth": { + "title": "Direcciones Ocultas", + "description": "Cada pago entrante llega a una dirección nueva y no vinculable derivada de la meta-dirección del receptor. Cadenas públicas, receptores privados.", + "meta": "ERC-5564 · ERC-6538" + }, + "scanning": { + "title": "Escaneo Rápido", + "description": "Eventos de anuncio indexados vía Goldsky para que los clientes escaneen los pagos stealth entrantes en segundos, no minutos.", + "meta": "Subgraphs de Goldsky" + }, + "multichain": { + "title": "Núcleo Multicadena", + "description": "Una API para Horizen, Stellar, Solana y CKB. Los adaptadores de billetera específicos por cadena se incluyen en el SDK — tú escribes código de aplicación, no de protocolo.", + "meta": "4 cadenas · más en camino" + } + }, + "architecture": { + "eyebrow": "Cómo funciona", + "heading": "Anuncia. Deriva. Escanea.", + "sender": { + "label": "EMISOR", + "description": "Deriva una dirección oculta a partir de la meta-dirección del receptor usando una clave efímera nueva." + }, + "announcer": { + "label": "ANUNCIADOR", + "description": "El evento de anuncio en cadena registra el pago para que el receptor pueda encontrarlo sin interacción." + }, + "receiver": { + "label": "RECEPTOR", + "description": "Escanea los anuncios con su clave de visualización, deriva la clave de gasto y retira cuando desee." + } + }, + "forDevelopers": { + "eyebrow": "Para Desarrolladores", + "heading": "Tres formas de publicar.", + "fullDocs": "Documentación completa ↗", + "sdk": { + "label": "SDK", + "badge": "ESTABLE", + "title": "@wraith-protocol/sdk", + "description": "SDK de TypeScript con adaptadores de billetera para cada cadena soportada.", + "linkText": "LEER LA GUÍA" + }, + "demo": { + "label": "DEMO", + "badge": "TESTNET", + "title": "demo.usewraith.xyz", + "description": "Un playground de pagos stealth en vivo. Envía y recibe en cuatro cadenas con tu propia billetera.", + "linkText": "ABRIR LA DEMO" + }, + "console": { + "label": "CONSOLA", + "badge": "BETA", + "title": "console.usewraith.xyz", + "description": "Claves de API, paneles de uso y acceso de equipo. El plano de control de producción para tu integración.", + "linkText": "OBTENER CLAVES DE API" + } + }, + "chains": { + "eyebrow": "Cadenas Soportadas", + "heading": "Construido para un mundo multicadena.", + "partner": "Socio", + "stellarNote": { + "eyebrow": "Soporte stealth primero en Stellar", + "description": "Integración con Soroban y metadatos de receptor basados en memo, haciendo que los pagos privados en Stellar se sientan nativos." + }, + "statuses": { + "liveTestnet": "EN VIVO EN TESTNET", + "liveDevnet": "EN VIVO EN DEVNET" + }, + "horizen": { "meta": "EVM · Asegurado por TEE · ERC-5564" }, + "stellar": { "meta": "Soroban · Basado en memo" }, + "solana": { "meta": "Tokens SPL · Programa de memo" }, + "ckb": { "meta": "Modelo de células · Integración CCC" } + }, + "compare": { + "eyebrow": "Análisis Comparativo", + "heading": "Comparación honesta con alternativas.", + "description": "La privacidad no es universal. Diferentes mecanismos hacen compromisos distintos entre conveniencia del usuario, postura regulatoria y complejidad matemática.", + "scrollHint": "Desliza la tabla horizontalmente para ver todas las columnas", + "table": { + "ariaLabel": "Filtros de detalle de comparación", + "protocol": "Protocolo", + "mechanism": "Mecanismo de Privacidad", + "ux": "UX / Flujo de Envío", + "recipient": "Flujo del Receptor", + "regulation": "Postura Regulatoria", + "multichain": "Multicadena", + "complexity": "Complejidad" + }, + "tabs": { + "all": "Todos los Detalles", + "wraith": "Wraith (Stealth)", + "mixers": "Tornado Cash (Mixers)", + "rollups": "Aztec (zk-Rollups)", + "railgun": "Railgun (Protegido)", + "transparent": "Estado Actual" + }, + "rows": { + "wraith": { + "name": "Wraith Protocol", + "mechanism": "Direcciones Ocultas (ERC-5564)", + "ux": "Baja fricción (envío directo a meta-dirección)", + "recipient": "Recepción pasiva (escanea anuncios vía clave de visualización)", + "regulation": "Sin pool, transferencias directas entre pares", + "multichain": "API multicadena nativa (4+ cadenas)", + "complexity": "Baja (criptografía de curva elíptica estándar)" + }, + "tornado": { + "name": "Tornado Cash Style", + "mechanism": "Pools de Conocimiento Cero (zk-SNARKs)", + "ux": "Alta fricción (depósitos fijos, archivos de nota)", + "recipient": "Retiro activo (debe generar prueba ZK y pagar retransmisores)", + "regulation": "Altamente sancionado (sanciones OFAC globales)", + "multichain": "Pools aislados por cadena", + "complexity": "Alta (pruebas del lado del cliente, redes de retransmisores)" + }, + "aztec": { + "name": "Aztec / ZK Rollups", + "mechanism": "Encriptación de Estado y Rollups", + "ux": "Alta fricción (requiere puente a L2 y salida)", + "recipient": "Nativo en L2 (receptor debe tener cuenta L2 y escanear L2)", + "regulation": "Restringido (puentes de privacidad en desuso por cumplimiento)", + "multichain": "Bloqueado en cadena anfitriona (puentes L2 complejos)", + "complexity": "Extrema (economía de rollup L2, sincronización de estado, nodos de prueba)" + }, + "railgun": { + "name": "Railgun", + "mechanism": "Pools Protegidos ZK en Contrato", + "ux": "Media-Alta (blindaje/desblindaje, billetera privada)", + "recipient": "Nativo protegido (debe tener dirección privada para recibir)", + "regulation": "Autorregulado (claves de visualización, prueba de inocencia)", + "multichain": "Contratos aislados por red", + "complexity": "Alta (árboles de estado privado, adaptadores DeFi, pruebas del cliente)" + }, + "statusQuo": { + "name": "Estado Actual", + "mechanism": "Ninguno (libro mayor público transparente)", + "ux": "Sin fricción (transacciones de billetera nativas)", + "recipient": "Recepción nativa (acceso inmediato, billeteras estándar)", + "regulation": "Conforme (pero sin privacidad ni secreto comercial)", + "multichain": "Soporte nativo en todas las cadenas", + "complexity": "Cero (mecánica predeterminada del libro mayor)" + } + }, + "cards": { + "wraith": { + "eyebrow": "ENFOQUE WRAITH", + "badge": "STEALTH SIN POOL", + "heading": "Wraith: Privacidad Directa Entre Pares", + "body": "Wraith implementa direcciones ocultas criptográficas basadas en los estándares ERC-5564 y ERC-6538. En lugar de acumular fondos en un mezclador compartido, cada transacción va a una dirección de destino única y nueva derivada criptográficamente usando las claves públicas del receptor y las claves efímeras del emisor.", + "whyLabel": "Por qué importa", + "why": "Al eliminar el \"pool de anonimato\" compartido, Wraith evita los problemas regulatorios y la complejidad técnica de los mezcladores tradicionales. Los usuarios transaccionan entre pares de forma nativa, manteniendo la completa desvinculación de la identidad del receptor en el libro mayor público." + }, + "mixers": { + "eyebrow": "MEZCLADORES Y POOLS", + "badge": "SANCIONADO POR OFAC", + "heading": "Mezcladores estilo Tornado Cash", + "body": "Los mezcladores rompen los vínculos entre direcciones de depósito y retiro poniendo fondos en un pool de contrato inteligente comunal. Los usuarios depositan denominaciones fijas (ej. 1 ETH) y reciben una nota criptográfica. Para retirar, generan una prueba de conocimiento cero del lado del cliente que demuestra que poseen uno de los depósitos no gastados.", + "gapsLabel": "Estado Regulatorio y Brechas", + "gaps": "Tornado Cash fue sancionado por la Oficina de Control de Activos Extranjeros (OFAC) de EE.UU. en 2022 porque su arquitectura de pool ofusca flujos financieros ilícitos. Además, la UX es compleja: los receptores deben permanecer en línea para generar pruebas ZK y pagar retransmisores de gas para mantener la privacidad del retiro." + }, + "rollups": { + "eyebrow": "ENCRIPTACIÓN CAPA 2", + "badge": "L2 PROGRAMABLE", + "heading": "Privacidad con Aztec y zk-Rollups", + "body": "Aztec lleva la privacidad a la capa de ejecución de contratos inteligentes a través de un rollup de Capa-2 encriptado. Las actualizaciones de estado encriptadas se procesan fuera de cadena, y las pruebas de conocimiento cero se compilan en lotes y se publican en el libro mayor de Ethereum de Capa-1 para validación global.", + "gapsLabel": "Fortalezas y Brechas", + "gaps": "Excelente para lógica de estado privado rica y DeFi privado. Sin embargo, los usuarios enfrentan una fricción significativa, incluyendo pasos de puente de L1 a L2, retrasos en la finalidad del rollup y configuración compleja de billetera. Como los rollups están atados a una sola cadena anfitriona, la privacidad entre cadenas sigue siendo un desafío mayor." + }, + "railgun": { + "eyebrow": "CONTRATOS PROTEGIDOS", + "badge": "DEFI EN CONTRATO", + "heading": "Acciones Protegidas de Railgun", + "body": "Railgun es un protocolo de privacidad en cadena desplegado directamente en redes EVM. Permite a los usuarios \"blindar\" tokens dentro de un pool de contratos inteligentes. Una vez blindados, los activos pueden transferirse, intercambiarse o desplegarse en contratos de rendimiento DeFi de socios de forma privada usando zk-SNARKs.", + "gapsLabel": "Fortalezas y Brechas", + "gaps": "Railgun sobresale en intercambios privados dentro del pool y generación de rendimiento directamente en L1/L2 sin puentes. Sin embargo, los usuarios deben usar billeteras compatibles con Railgun específicas y pagar costos de gas sustanciales para blindar o desblindear. Su diseño de pool también requiere una generación de pruebas del lado del cliente muy intensiva." + }, + "transparent": { + "eyebrow": "LIBRO MAYOR TRANSPARENTE", + "badge": "PÚBLICO POR DEFECTO", + "heading": "El Estado Actual del Libro Mayor Transparente", + "body": "Las blockchains públicas operan con transparencia absoluta. Cualquiera con conexión a internet puede ver todo tu historial de transacciones, saldos, tenencias de activos y red de contrapartes a través de simples exploradores de bloques.", + "gapsLabel": "Lo que pierdes", + "gaps": "Las cuentas transparentes exponen a empresas, comerciantes e individuos a ataques de anticipación, phishing y riesgos de seguridad física. Si bien son fáciles de usar, la divulgación pública completa hace que las transacciones del libro mayor predeterminado sean inviables para operaciones empresariales estándar como nóminas o contratos con proveedores." + } + } + }, + "cta": { + "eyebrow": "Listo para construir", + "heading": "Comienza a enviar pagos privados hoy.", + "getKeys": "Obtener claves de API", + "readDocs": "Leer la documentación" + }, + "showcase": { + "eyebrow": "Construido con Wraith", + "heading": "Proyectos usando Wraith.", + "description": "Integraciones piloto, implementaciones de referencia y POCs de socios.", + "visit": "Visitar" + }, + "footer": { + "brand": "WRAITH PROTOCOL", + "tagline": "Pagos privados, claramente.", + "columns": { + "product": "PRODUCTO", + "developers": "DESARROLLADORES", + "resources": "RECURSOS", + "acknowledgments": "AGRADECIMIENTOS" + }, + "product": { + "docs": "Docs", + "demo": "Demo", + "console": "Consola", + "compare": "Comparar", + "faq": "Preguntas frecuentes", + "changelog": "Registro de cambios" + }, + "developers": { + "sdk": "SDK", + "apiReference": "Referencia de API", + "github": "GitHub", + "npm": "npm" + }, + "resources": { + "erc5564": "Especificación ERC-5564", + "erc6538": "Especificación ERC-6538", + "security": "Seguridad", + "press": "Prensa" + }, + "acknowledgmentsAria": "Con el apoyo de la Stellar Development Foundation a través del programa Stellar Wave vía Drips", + "acknowledgmentsText": "Con el apoyo de la Stellar Development Foundation a través del programa Stellar Wave vía Drips", + "built": "CONSTRUIDO EN HORIZEN · ERC-5564 · CÓDIGO ABIERTO", + "legal": { + "privacy": "Privacidad", + "terms": "Términos", + "securityTxt": "Security.txt" + } + }, + "og": { + "siteTitle": "Wraith Protocol — Pagos privados para cada cadena", + "metaDescription": "Wraith Protocol habilita pagos privados en cualquier blockchain usando direcciones ocultas. Un SDK, múltiples cadenas.", + "ogTitle": "Wraith Protocol", + "ogDescription": "Pagos privados para cada cadena. Direcciones ocultas, SDK multicadena y agentes de privacidad con IA." + } +} diff --git a/src/i18n/index.ts b/src/i18n/index.ts new file mode 100644 index 0000000..33458f6 --- /dev/null +++ b/src/i18n/index.ts @@ -0,0 +1,32 @@ +import i18n from 'i18next'; +import { initReactI18next } from 'react-i18next'; +import en from './en.json'; +import es from './es.json'; + +export const SUPPORTED_LOCALES = ['en', 'es'] as const; +export type Locale = (typeof SUPPORTED_LOCALES)[number]; + +function detectLocale(): Locale { + const saved = localStorage.getItem('wraith-locale') as Locale | null; + if (saved && (SUPPORTED_LOCALES as readonly string[]).includes(saved)) return saved; + const browser = navigator.language.split('-')[0] as Locale; + if ((SUPPORTED_LOCALES as readonly string[]).includes(browser)) return browser; + return 'en'; +} + +i18n.use(initReactI18next).init({ + resources: { + en: { translation: en }, + es: { translation: es }, + }, + lng: detectLocale(), + fallbackLng: 'en', + interpolation: { escapeValue: false }, +}); + +export function changeLocale(lang: Locale): void { + localStorage.setItem('wraith-locale', lang); + void i18n.changeLanguage(lang); +} + +export default i18n; diff --git a/src/main.tsx b/src/main.tsx index dfacde0..a627a2a 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,6 +1,7 @@ import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import App from './App'; +import './i18n'; import './index.css'; createRoot(document.getElementById('root')!).render(