Skip to content

/wallet: Embed Nimiq Wallet Demo via iframe and Enable Two-Way Communication #118

@onmax

Description

@onmax

What & Why

We need to embed the demo wallet at https://wallet-demo.nimiq.com into our /wallet page with an iframe and wire up two-way messaging so that any “Buy”, “Sell” or “Stake” action—whether clicked inside the iframe sidebar or in the bottom pill selector—opens the correct modal and updates the pill styles. This will provide a seamless, integrated demo experience for users.

Related PR: nimiq/wallet#263
Reference: Message structure in Demo.ts

✅ Tasks

  • Add an iframe component on the Demo page pointing to https://wallet-demo.nimiq.com
  • Implement a window.postMessage listener in the host app
  • Extend or reuse the message schema from Demo.ts to handle { action: 'buy' | 'sell' | 'stake' }
  • On receiving action: 'buy', open the Buy modal and highlight the “Buy” pill
  • Repeat for sell and stake
  • Verify in production that the iframe loads correctly and communication works end-to-end

✅ Done

  • /wallet shows a live iframe loading the demo wallet
  • Clicking “Buy”, “Sell” or “Stake” inside or outside the iframe opens the correct modal
  • The bottom pill selector updates its active style based on the last action
  • CI passes

Metadata

Metadata

Assignees

Labels

UICSS and layout relatedpages/walletTask specifically for `/wallet` page

Type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions