Skip to content

EZWallet: improve first-impression UX and simplify builder flow #139

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tacticalnoot merged 1 commit into from
May 8, 2026
Merged

EZWallet: improve first-impression UX and simplify builder flow #139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 15 additions & 11 deletions src/experiments/ezwallet/EZWalletApp.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
let csv = $state('');
let batchRows = $state<any[]>([]);
const auth = useAuthentication();
let status = $state('');
let status = $state('Ready to generate your first ticket.');
let tier = $state<'FREE' | 'EVENT' | 'POWER'>('FREE');

let tierPaid = $state<'FREE' | 'EVENT' | 'POWER'>('FREE');
Expand Down Expand Up @@ -46,6 +46,7 @@
}

function makeOne() {
status = 'Building your share link…';
const intent = buildIntent({
mode,
amount,
Expand All @@ -59,7 +60,7 @@
});
const p = encodeIntent(intent);
link = `${location.origin}/labs/ezwallet/drop?p=${p}`;
QRCode.toDataURL(link, { margin: 1, width: 320 }).then((d: string) => (qrData = d));
QRCode.toDataURL(link, { margin: 1, width: 320 }).then((d: string) => { qrData = d; status = 'QR ready — share the link or scan to review.'; });
}

function bulk() {
Expand Down Expand Up @@ -131,16 +132,17 @@

<section class="dashboard-grid">
<article class="glass-panel">
<h2 class="section-title">01 · Build Your Claim Ticket QR</h2>
<h2 class="section-title">01 · Build Your Claim Ticket</h2>
<p class="muted">Quick start: choose asset, add an optional amount, and generate.</p>
<div class="label">Asset</div>
<div class="pill-row">
<button class="asset-pill" class:active={asset === 'XLM'} onclick={() => (asset = 'XLM')}>XLM</button>
<button class="asset-pill" class:active={asset === 'USDC'} onclick={() => (asset = 'USDC')}>USDC</button>
</div>
<label>Mode
<select bind:value={mode}>
<option value="receive_request">Direct Claim Ticket</option>
<option value="event_drop">Event Ticket Drop</option>
<option value="receive_request">Direct claim ticket</option>
<option value="event_drop">Event ticket drop</option>
</select>
</label>
<label>Amount
Expand All @@ -149,20 +151,23 @@
<label>Destination
<input bind:value={destination} placeholder="Optional (G.../C...)" />
</label>
{#if mode === 'event_drop'}
<label>Event
<input bind:value={event} placeholder="Event name" />
</label>
{/if}
<label>Message
<input bind:value={message} placeholder="Message" />
<input bind:value={message} placeholder="Optional note for recipient" />
</label>
<div class="action-row">
<button class="holo-button" onclick={makeOne}>Generate QR</button>
<button class="soft-button" onclick={login}>Continue with Passkey</button>
<button class="soft-button" onclick={login}>Connect passkey wallet</button>
</div>
<p class="status">{status}</p>
</article>

<article class="glass-panel">
<h2 class="section-title">02 · Share Review Link</h2>
<h2 class="section-title">02 · Share & Review</h2>
<p class="safety">Review before signing. The QR carries claim intent metadata and never auto-sends funds.</p>
<div class="qr-frame">
{#if qrData}
Expand All @@ -183,7 +188,7 @@
</article>

<article class="glass-panel">
<h2 class="section-title">03 · Event & Batch Mode</h2>
<h2 class="section-title">03 · Batch Generation</h2>
<label>Plan
<select bind:value={tier}>
<option value="FREE">Free</option>
Expand All @@ -204,9 +209,8 @@
<button class="holo-button" onclick={bulk}>Generate batch</button>
{#if csv}<button class="soft-button" onclick={downloadCsv}>Export CSV manifest</button>{/if}
</div>
<p class="status">{status}</p>
<p class="muted">Rows generated: {batchRows.length}</p>
<p class="muted">Free plan is strictly limited to 1 generation. Any batch size above 1 requires a paid plan.</p>
<p class="muted">Free plan creates one ticket at a time. Batch sizes above 1 require Event or Power.</p>
</article>

<article class="glass-panel pricing-panel">
Expand Down
10 changes: 6 additions & 4 deletions src/experiments/ezwallet/EZWalletDropApp.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,14 @@
</script>
<div class="p-6 max-w-3xl mx-auto text-white">
<h1 class="text-2xl font-bold">Stellar Claim Ticket</h1>
<p>Review the ticket payload details, confirm destination, then sign only if everything is correct.</p>
<p>This page is safe to open. Review details first, then connect and sign only if everything looks right.</p>
{#if errors.length}<p class="text-red-400">{errors.join(', ')}</p>{:else if intent}
<ul><li>Mode: {intent.mode}</li><li>Asset: {intent.asset.code}</li><li>Amount: {intent.amount || '—'}</li><li>Destination: {intent.destination || 'choose later'}</li><li>Event: {intent.event || '—'}</li><li>Message: {intent.message || '—'}</li><li>Network: public</li></ul>
<p class="text-yellow-300">No transaction has been sent. This QR stores claim intent metadata; signer approval is still required.</p>
<button onclick={login}>Continue with Passkey</button>
<button onclick={()=>navigator.clipboard.writeText(raw)}>Copy Intent</button>
<a href="/labs/ezwallet">Generate Another QR</a>
<div class="mt-4 flex flex-wrap gap-3">
<button class="px-3 py-2 rounded bg-white/10" onclick={login}>Connect passkey wallet</button>
<button class="px-3 py-2 rounded bg-white/10" onclick={()=>navigator.clipboard.writeText(raw)}>Copy intent</button>
<a class="px-3 py-2 rounded bg-white/10" href="/labs/ezwallet">Create another ticket</a>
</div>
{/if}
</div>