+
+ )
+}
+
+export declare namespace Header {
+ type Tab = 'intro' | 'registry' | 'walkthrough'
+ type Props = {
+ activeTab: Tab
+ onTabChange: (tab: Tab) => void
+ }
+}
diff --git a/apps/virtual-addresses/src/comps/intro-view.tsx b/apps/virtual-addresses/src/comps/intro-view.tsx
new file mode 100644
index 000000000..bae5af302
--- /dev/null
+++ b/apps/virtual-addresses/src/comps/intro-view.tsx
@@ -0,0 +1,240 @@
+import type * as React from 'react'
+import { AddressAnatomy } from '#comps/address-anatomy'
+
+const EXAMPLE_ADDRESS = '07A3B1C2FDFDFDFDFDFDFDFDFDFDFDFDFDD4E5A7C3F19E'
+
+export function IntroView(): React.JSX.Element {
+ return (
+
+ {/* Hero */}
+
+
+ TIP-1022: Virtual Addresses
+
+
+ Precompile-native virtual addresses that auto-forward TIP-20 deposits
+ to a registered master wallet, eliminating sweep transactions entirely
+ for exchanges, ramps, and payment processors.
+
+
+
+ {/* Cards — each full width */}
+
+ {/* Motivation */}
+
+
+
+
+
+
+
+
+ {/* Address Layout — horizontal: anatomy left, field descriptions right */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* How It Works */}
+
+
+
+ Master calls registerVirtualMaster(salt) on the
+ registry precompile. The salt must satisfy a 32-bit proof-of-work.
+ One-time on-chain call.
+
+
+ Operator concatenates{' '}
+ masterId +{' '}
+ magic +{' '}
+ userTag off-chain. No
+ transaction needed. Unlimited deposit addresses.
+
+
+ Sender transfers TIP-20 tokens to a virtual address. The
+ precompile detects magic bytes, extracts masterId, looks up
+ master, and credits the master wallet directly.
+
+
+ Two Transfer events emitted for audit trail:
+
+
emit Transfer(sender, virtualAddr, amount)
+
emit Transfer(virtualAddr, master, amount)
+
+
+
+
+
+ {/* Key Properties */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Security & Limitations */}
+
+
+
+ Non-TIP-20 tokens sent to virtual addresses credit the literal
+ address and may be irrecoverable.
+
+
+ Wallets and explorers should display full addresses to distinguish
+ masterId and userTag.
+
+
+ Registrations are immutable. Use an upgradeable proxy or multisig
+ for key rotation.
+
+
+ TIP-403 policies are evaluated on the resolved master, not the
+ virtual alias.
+
+
+ No addresses generated yet. Click the button above.
+
+ )}
+
+
+ How it works: Virtual
+ addresses are{' '}
+ [masterId]
+
+ [FDFDFDFDFDFDFDFDFDFD]
+
+ [userTag]. When anyone
+ sends TIP-20 tokens to this address, the protocol auto-forwards to your
+ master wallet — {masterAddress.slice(0, 8)}…
+
+ What happens: The
+ TIP-20 precompile detects the virtual address format, resolves the
+ masterId to your registered master, and credits the master directly.
+ Two Transfer events are emitted:
+
+
+
+
+ Transfer(sender → virtual, amount)
+
+
+
+
+ Transfer(virtual → master, amount)
+
+
+
+
+ )}
+
+ )
+}
+
+export declare namespace StepTransfer {
+ type Props = {
+ virtualAddress: Address
+ masterAddress: string
+ }
+}
diff --git a/apps/virtual-addresses/src/comps/walkthrough/event-log.tsx b/apps/virtual-addresses/src/comps/walkthrough/event-log.tsx
new file mode 100644
index 000000000..b229c8a12
--- /dev/null
+++ b/apps/virtual-addresses/src/comps/walkthrough/event-log.tsx
@@ -0,0 +1,95 @@
+import type * as React from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+
+export function EventLog(props: EventLog.Props): React.JSX.Element {
+ const { entries } = props
+
+ return (
+