-
Notifications
You must be signed in to change notification settings - Fork 3
Closed
Labels
UICSS and layout relatedCSS and layout relatedpages/walletTask specifically for `/wallet` pageTask specifically for `/wallet` page
Milestone
Description
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
-
/walletshows 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 relatedCSS and layout relatedpages/walletTask specifically for `/wallet` pageTask specifically for `/wallet` page