Skip to content

Commit

Permalink
QR Code UI Update (#1106)
Browse files Browse the repository at this point in the history 
* init new design

* small screen layout + positioning

* some cleanup

* enable vertical scroll

* revert naming

* margin tweaks to account for larger QR code size

* final tweaks

* fix small screen margin

* close behaviors + entrance animation
  • Loading branch information
@Funkatronics
Funkatronics authored Mar 1, 2025
1 parent a70907b commit 7803db7
Show file tree
Hide file tree
Showing 3 changed files with 251 additions and 111 deletions.
21 changes: 13 additions & 8 deletions js/packages/wallet-standard-mobile/src/embedded-modal/modal.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ export default class EmbeddedModal {
this.injectQRCodeHTML = this.injectQRCodeHTML.bind(this);
this.open = this.open.bind(this);
this.close = this.close.bind(this);
this.connect = this.connect.bind(this);
this._connect = this._connect.bind(this);
this._handleKeyDown = this._handleKeyDown.bind(this);

this._root = document.getElementById('mobile-wallet-adapter-embedded-root-ui');
}
Expand Down Expand Up @@ -53,7 +54,7 @@ export default class EmbeddedModal {
private async populateQRCode(qrUrl: string) {
const qrcodeContainer = document.getElementById('mobile-wallet-adapter-embedded-modal-qr-code-container');
if (qrcodeContainer) {
const qrCodeElement = await QRCode.toCanvas(qrUrl, { width: 400 });
const qrCodeElement = await QRCode.toCanvas(qrUrl, { width: 200, margin: 0 });
if (qrcodeContainer.firstElementChild !== null) {
qrcodeContainer.replaceChild(qrCodeElement, qrcodeContainer.firstElementChild);
} else qrcodeContainer.appendChild(qrCodeElement);
Expand Down Expand Up @@ -89,18 +90,17 @@ export default class EmbeddedModal {
private attachEventListeners() {
if (!this._root) return;

const closeBtn = this._root.querySelector('#mobile-wallet-adapter-embedded-modal-close');
const cancelBtn = this._root.querySelector('#cancel-btn');
const connectBtn = this._root.querySelector('#connect-btn');
connectBtn?.addEventListener('click', this._connect);

closeBtn?.addEventListener('click', () => this.close());
cancelBtn?.addEventListener('click', () => this.close());
connectBtn?.addEventListener('click', () => this.connect());
const closers = [...this._root.querySelectorAll('[data-modal-close]')];
closers.forEach(closer => closer?.addEventListener('click', this.close));
}

open() {
console.debug('Modal open');
if (this._root) {
document.addEventListener('keydown', this._handleKeyDown);
this._root.style.display = 'flex';
this.setConnectionStatus('not-connected'); // Reset status when opening
}
Expand All @@ -109,12 +109,13 @@ export default class EmbeddedModal {
close() {
console.debug('Modal close');
if (this._root) {
document.removeEventListener('keydown', this._handleKeyDown);
this._root.style.display = 'none';
this.setConnectionStatus('not-connected'); // Reset status when closing
}
}

private connect() {
private _connect() {
console.log('Connecting...');
// Mock connection
this.setConnectionStatus('connecting');
Expand All @@ -125,4 +126,8 @@ export default class EmbeddedModal {
console.log('Connected!');
}, 5000); // 5 seconds delay
}

private _handleKeyDown(event: KeyboardEvent) {
if (event.key === 'Escape') this.close();
}
}
60 changes: 51 additions & 9 deletions js/packages/wallet-standard-mobile/src/embedded-modal/qrcode-html.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,54 @@
export const QRCodeHtml = `
<div class="mobile-wallet-adapter-embedded-modal-content">
<button id="mobile-wallet-adapter-embedded-modal-close" class="mobile-wallet-adapter-embedded-modal-close">
<svg width="14" height="14">
<path d="M14 12.461 8.3 6.772l5.234-5.233L12.006 0 6.772 5.234 1.54 0 0 1.539l5.234 5.233L0 12.006l1.539 1.528L6.772 8.3l5.69 5.7L14 12.461z" />
</svg>
</button>
<h1>Scan to connect</h1>
<p class="mobile-wallet-adapter-embedded-modal-subtitle">Use your wallet app to scan the QR Code and connect.</p>
<div id="mobile-wallet-adapter-embedded-modal-qr-code-container" />
<div class="mobile-wallet-adapter-embedded-modal-container">
<div data-modal-close style="position: absolute; width: 100%; height: 100%;"></div>
<div class="mobile-wallet-adapter-embedded-modal-card">
<div>
<button data-modal-close class="mobile-wallet-adapter-embedded-modal-close">
<svg width="14" height="14">
<path d="M 6.7125,8.3036995 1.9082,13.108199 c -0.2113,0.2112 -0.4765,0.3168 -0.7957,0.3168 -0.3192,0 -0.5844,-0.1056 -0.7958,-0.3168 C 0.1056,12.896899 0,12.631699 0,12.312499 c 0,-0.3192 0.1056,-0.5844 0.3167,-0.7958 L 5.1212,6.7124995 0.3167,1.9082 C 0.1056,1.6969 0,1.4317 0,1.1125 0,0.7933 0.1056,0.5281 0.3167,0.3167 0.5281,0.1056 0.7933,0 1.1125,0 1.4317,0 1.6969,0.1056 1.9082,0.3167 L 6.7125,5.1212 11.5167,0.3167 C 11.7281,0.1056 11.9933,0 12.3125,0 c 0.3192,0 0.5844,0.1056 0.7957,0.3167 0.2112,0.2114 0.3168,0.4766 0.3168,0.7958 0,0.3192 -0.1056,0.5844 -0.3168,0.7957 L 8.3037001,6.7124995 13.1082,11.516699 c 0.2112,0.2114 0.3168,0.4766 0.3168,0.7958 0,0.3192 -0.1056,0.5844 -0.3168,0.7957 -0.2113,0.2112 -0.4765,0.3168 -0.7957,0.3168 -0.3192,0 -0.5844,-0.1056 -0.7958,-0.3168 z" />
</svg>
</button>
</div>
<div>
<div>
<svg class="mobile-wallet-adapter-embedded-modal-icon" width="100%" height="100%">
<circle r="52" cx="53" cy="53" fill="#99b3be" stroke="#000000" stroke-width="2"/>
<path d="m 53,82.7305 c -3.3116,0 -6.1361,-1.169 -8.4735,-3.507 -2.338,-2.338 -3.507,-5.1625 -3.507,-8.4735 0,-3.3116 1.169,-6.1364 3.507,-8.4744 2.3374,-2.338 5.1619,-3.507 8.4735,-3.507 3.3116,0 6.1361,1.169 8.4735,3.507 2.338,2.338 3.507,5.1628 3.507,8.4744 0,3.311 -1.169,6.1355 -3.507,8.4735 -2.3374,2.338 -5.1619,3.507 -8.4735,3.507 z m 0.007,-5.25 c 1.8532,0 3.437,-0.6598 4.7512,-1.9793 1.3149,-1.3195 1.9723,-2.9058 1.9723,-4.7591 0,-1.8526 -0.6598,-3.4364 -1.9793,-4.7512 -1.3195,-1.3149 -2.9055,-1.9723 -4.7582,-1.9723 -1.8533,0 -3.437,0.6598 -4.7513,1.9793 -1.3148,1.3195 -1.9722,2.9058 -1.9722,4.7591 0,1.8527 0.6597,3.4364 1.9792,4.7512 1.3195,1.3149 2.9056,1.9723 4.7583,1.9723 z m -28,-33.5729 -3.85,-3.6347 c 4.1195,-4.025 8.8792,-7.1984 14.2791,-9.52 5.4005,-2.3223 11.2551,-3.4834 17.5639,-3.4834 6.3087,0 12.1634,1.1611 17.5639,3.4834 5.3999,2.3216 10.1596,5.495 14.2791,9.52 l -3.85,3.6347 C 77.2999,40.358 73.0684,37.5726 68.2985,35.5514 63.5292,33.5301 58.4296,32.5195 53,32.5195 c -5.4297,0 -10.5292,1.0106 -15.2985,3.0319 -4.7699,2.0212 -9.0014,4.8066 -12.6945,8.3562 z m 44.625,10.8771 c -2.2709,-2.1046 -4.7962,-3.7167 -7.5758,-4.8361 -2.7795,-1.12 -5.7983,-1.68 -9.0562,-1.68 -3.2579,0 -6.2621,0.56 -9.0125,1.68 -2.7504,1.1194 -5.2903,2.7315 -7.6195,4.8361 L 32.5189,51.15 c 2.8355,-2.6028 5.9777,-4.6086 9.4263,-6.0174 3.4481,-1.4087 7.133,-2.1131 11.0548,-2.1131 3.9217,0 7.5979,0.7044 11.0285,2.1131 3.43,1.4088 6.5631,3.4146 9.3992,6.0174 z"/>
</svg>
<div class="mobile-wallet-adapter-embedded-modal-title">Remote Mobile Wallet Adapter</div>
</div>
<div>
<div>
<h4 class="mobile-wallet-adapter-embedded-modal-qr-label">
Open your wallet and scan this code
</h4>
</div>
<div id="mobile-wallet-adapter-embedded-modal-qr-code-container" class="mobile-wallet-adapter-embedded-modal-qr-code-container"></div>
</div>
</div>
<div class="mobile-wallet-adapter-embedded-modal-divider"><hr></div>
<div>
<div class="mobile-wallet-adapter-embedded-modal-subtitle">
Follow the instructions on your device. When you're finished, this screen will update.
</div>
<div class="mobile-wallet-adapter-embedded-modal-progress-badge">
<div>
<div class="spinner">
<div class="leftWrapper">
<div class="left">
<div class="circle"></div>
</div>
</div>
<div class="rightWrapper">
<div class="right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
<div>Waiting for scan</div>
</div>
</div>
</div>
</div>
`;
Loading

0 comments on commit 7803db7

Please sign in to comment.