Add buttons for opening signer app, copying connect link
All checks were successful
CI / Lint (push) Successful in 49s
CI / Test (push) Successful in 59s

This commit is contained in:
2026-05-05 07:02:08 +02:00
parent 60936ed2f5
commit 1140ecfe41
2 changed files with 56 additions and 3 deletions

View File

@@ -41,6 +41,40 @@ export default class NostrConnectComponent extends Component {
}
}
@action
async copyConnectUri() {
const text = this.nostrAuth.connectUri;
try {
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(text);
} else {
const textArea = document.createElement('textarea');
textArea.value = text;
textArea.style.position = 'fixed';
textArea.style.top = '0';
textArea.style.left = '0';
textArea.style.opacity = '0';
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
const successful = document.execCommand('copy');
document.body.removeChild(textArea);
if (!successful) {
throw new Error('Fallback copy failed');
}
}
this.toast.show('Connection link copied to clipboard');
} catch (err) {
console.error('Failed to copy text: ', err);
alert('Failed to copy link');
}
}
<template>
<div class="nostr-connect-modal">
<h2>Connect with Nostr</h2>
@@ -59,7 +93,7 @@ export default class NostrConnectComponent extends Component {
class="btn btn-outline"
type="button"
disabled
title="No Nostr extension found in your browser."
title="No Nostr extension found in your browser"
>
Browser Extension (Not Found)
</button>
@@ -79,9 +113,20 @@ export default class NostrConnectComponent extends Component {
{{#if this.nostrAuth.isMobile}}
<p>Waiting for you to approve the connection in your mobile signer
app...</p>
<div class="mobile-connect-actions">
<a href={{this.nostrAuth.connectUri}} class="btn btn-primary">
Open Signer App
</a>
<button
class="btn btn-outline"
type="button"
{{on "click" this.copyConnectUri}}
>
Copy Connection Link
</button>
</div>
{{else}}
<p>Scan this QR code with a compatible Nostr signer app (like
Amber):</p>
<p>Scan this QR code with a Nostr signer app (like Amber):</p>
<div class="qr-code-container">
<canvas {{qrCode this.nostrAuth.connectUri}}></canvas>
</div>