Skip to content

feat(virtual-addresses): React Flow graph walkthrough#844

Draft
decofe wants to merge 1 commit intorusowsky/virtual-addresses-demofrom
rusowsky/virtual-addresses-react-flow
Draft

feat(virtual-addresses): React Flow graph walkthrough#844
decofe wants to merge 1 commit intorusowsky/virtual-addresses-demofrom
rusowsky/virtual-addresses-react-flow

Conversation

@decofe
Copy link
Copy Markdown
Member

@decofe decofe commented Apr 15, 2026

Replaces the 3-column panel walkthrough with a React Flow graph visualization inspired by the cross-border payments demo.

Changes

  • 5-node graph: Exchange/Master, Virtual Registry, Virtual Address, Sender, TIP-1022 Resolver
  • 6 GSAP-animated edges with draw-in + particle effects
  • Step-by-step flow: register → derive → send → resolve → receive
  • Timeline bar at bottom, keyboard navigation (←/→/Space), autoplay
  • Simplified zustand store: numeric step machine replacing granular string substeps
  • Added @xyflow/react and gsap dependencies
  • Deleted old panel components (exchange, protocol, sender, guide-overlay, event-log, status-badge)

Architecture

              [ Virtual Registry ]
                     ↑       ↓
                register   lookup
[ Exchange/Master ] ←———→ [ TIP-1022 Resolver ]
        ↓                       ↑
     derive                  detect
        ↓                       ↑
  [ Virtual Address ] ← send ← [ Sender ]

Existing server API endpoints unchanged.

Prompted by: rusowsky

@socket-security
Copy link
Copy Markdown

socket-security Bot commented Apr 15, 2026

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Addedgsap@​3.15.097100998990
Added@​xyflow/​react@​12.10.29710010093100

View full report

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 15, 2026

Bundle Size Report

Metric Size Δ Change
Total 4.1 MB -674.5 KB (-13.8%)
Gzip 1.2 MB -110.4 KB (-8.3%)
Brotli 1.0 MB -88.8 KB (-7.7%)
Chunk changes (>1KB)
Chunk Change
assets/KeyManager.js (removed) -477.4 KB
assets/QueryBuilder.js (removed) -423.4 KB
assets/router.js -303.0 KB
assets/wagmi.config.js -166.8 KB
assets/_hash.js -128.9 KB
assets/BaseTanStackRouterDevtoolsPanel-Bmws3ikM.js (removed) -99.5 KB
assets/Intro.js (removed) -66.0 KB
assets/createSsrRpc.js (removed) -43.8 KB
assets/isAddressEqual.js -32.5 KB
assets/path.js (removed) -30.6 KB
assets/FloatingTanStackRouterDevtools-B7vy70jP.js (removed) -24.4 KB
assets/_layout.js -21.4 KB
assets/stringify.js (removed) -19.7 KB
assets/Hash.js -16.4 KB
assets/address.js -14.1 KB
assets/getAction.js -13.0 KB
assets/base.js (removed) -12.8 KB
assets/utils.js -10.1 KB
assets/token.server.js (removed) -9.8 KB
assets/Address.js -9.7 KB
...and 36 more

Compared against main branch (baseline from 2/4/2026, 5:13:51 PM)

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 15, 2026

Cloudflare Deployments

App Environment Status Preview
explorer devnet [OK] Deployed View Preview
explorer mainnet [OK] Deployed View Preview
explorer testnet [OK] Deployed View Preview
fee-payer devnet [OK] Deployed View Preview
fee-payer moderato [OK] Deployed View Preview
fee-payer privy [OK] Deployed View Preview
og - [OK] Deployed View Preview
tokenlist - [OK] Deployed View Preview

…aph demo

Inspired by the cross-border payments PayrollDemoFlow, replaces the 3-column
panel walkthrough with a React Flow graph visualization of the TIP-1022 flow:

- 5 nodes: Exchange, Virtual Registry, Virtual Address, Sender, TIP-1022 Resolver
- 6 GSAP-animated edges with draw-in, particles, and subtitle slide-in
- Black label pills with Tempo icon on edges (potemkin style)
- Step-by-step progression (register → derive → send → resolve → receive)
- Timeline bar, keyboard navigation (←/→/Space), autoplay
- Numeric step machine replacing granular string-based substeps
- Keeps existing server API endpoints unchanged

Co-authored-by: 0xrusowsky <90208954+0xrusowsky@users.noreply.github.com>
Amp-Thread-ID: https://ampcode.com/threads/T-019d90b2-ce1e-755b-b116-ceaa45170a1e
@decofe decofe force-pushed the rusowsky/virtual-addresses-react-flow branch from 9a828ac to 9304646 Compare April 15, 2026 13:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants