diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/AppHeader.svelte | 18 | ||||
| -rw-r--r-- | src/components/Avatar.svelte | 3 | ||||
| -rw-r--r-- | src/routes/(app)/send/[...text]/+page.server.js | 6 | ||||
| -rw-r--r-- | src/routes/(app)/send/[...text]/+page.svelte | 125 |
4 files changed, 80 insertions, 72 deletions
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte index 54f0b223..4094e50c 100644 --- a/src/components/AppHeader.svelte +++ b/src/components/AppHeader.svelte @@ -57,15 +57,6 @@ ><Icon icon="numpad" style="mx-auto" /> </button> </a> - <a href={`/scan`}> - <button - class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page - .url.pathname === `/scan` - ? 'opacity-100' - : 'opacity-70 hover:opacity-80'}" - ><Icon icon="camera" style="mx-auto w-6" /> - </button> - </a> <a href={`/${user.username}/transactions`}> <button class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page @@ -85,6 +76,15 @@ {/if} </button> </a> + <a href={`/send`}> + <button + class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page + .url.pathname === `/send` + ? 'opacity-100' + : 'opacity-70 hover:opacity-80'}" + ><Icon icon="send" style="mx-auto w-6" /> + </button> + </a> <div class="relative"> <OutClick on:outclick={() => (showMenu = false)}> <button diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte index 092af740..d2d83977 100644 --- a/src/components/Avatar.svelte +++ b/src/components/Avatar.svelte @@ -4,10 +4,11 @@ export let user; export let size = 32; + export let disabled = false; $: s = size.toString(); </script> -<a href={`/${user.username}`}> +<a href={`/${user.username}`} class:pointer-events-none={disabled}> <div class="w-{s} h-{s} rounded-full border-4 border-white overflow-hidden bg-gradient-to-r {$colorTheme} flex justify-center items-center" > diff --git a/src/routes/(app)/send/[...text]/+page.server.js b/src/routes/(app)/send/[...text]/+page.server.js index 761f27dc..0061e895 100644 --- a/src/routes/(app)/send/[...text]/+page.server.js +++ b/src/routes/(app)/send/[...text]/+page.server.js @@ -1,6 +1,6 @@ import validate from 'bitcoin-address-validation'; import bip21 from 'bip21'; -import { get, post } from '$lib/utils'; +import { auth, get, post } from '$lib/utils'; import { invalid, redirect } from '@sveltejs/kit'; let parse = async (t, r) => { @@ -60,9 +60,11 @@ let parse = async (t, r) => { if (user) throw redirect(307, `/send/user/${t}`); }; -export async function load({ params, request }) { +export async function load({ cookies, params, request }) { let { text } = params; await parse(text, request); + let contacts = await get('/contacts', auth(cookies)); + return { contacts }; } export const actions = { diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte index 1311422e..053a538e 100644 --- a/src/routes/(app)/send/[...text]/+page.svelte +++ b/src/routes/(app)/send/[...text]/+page.svelte @@ -1,19 +1,22 @@ <script> + import { page } from '$app/stores'; import { fly } from 'svelte/transition'; import { enhance } from '$app/forms'; - import { onMount } from 'svelte'; + import { tick } from 'svelte'; import { browser } from '$app/environment'; import { t } from '$lib/translations'; - import { Icon, Spinner } from '$comp'; + import { Avatar, Icon, Spinner } from '$comp'; import { back, failure } from '$lib/utils'; + export let data; export let form; - let el; + let { contacts } = data; + + let el, textarea, text; let placeholder = 'Paste a bitcoin address, lightning invoice or coinos username'; - let text; - let focus = () => text === placeholder && (text = ''); + $: $page && setTimeout(() => textarea?.focus(), 0); let keypress = (e) => e.key === 'Enter' && (e.preventDefault() || el.click()); let paste = async () => { @@ -25,70 +28,72 @@ <Icon icon="arrow-left" style="w-10" /> </button> -<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-8"> - Send bitcoin or lightning -</h1> +<div class="container px-4 max-w-lg mx-auto space-y-5 mt-10"> + <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">Send</h1> + + <form method="POST" use:enhance> + {#if form?.error} + <div class="text-red-600 text-center" in:fly> + {form.error} + </div> + {/if} + <div class="mb-2"> + <input type="hidden" name="text" bind:value={text} /> -<form method="POST" class="container px-4 max-w-xl mx-auto" use:enhance> - {#if form?.error} - <div class="text-red-600 text-center" in:fly> - {form.error} + <textarea + {placeholder} + on:keypress={keypress} + class="w-full p-4 border rounded-xl h-48" + bind:value={text} + bind:this={textarea} + /> </div> - {/if} - <div class="mb-2"> - <label for="invoice" class="font-bold mb-1 block">To</label> - <input type="hidden" name="text" bind:value={text} /> - <textarea - {placeholder} - on:keypress={keypress} - class="w-full p-4 border rounded-xl h-48" - bind:value={text} - /> - </div> + <div class="flex justify-end"> + <a href="/scan"> + <button + type="button" + class="flex border rounded-full px-6 py-2 font-bold hover:opacity-80 mr-1" + > + <Icon icon="scan" style="mr-2 w-6 my-auto" /> + <div class="my-auto">Scan</div> + </button> + </a> - <div class="flex justify-end"> - <a href="/scan"> <button type="button" class="flex border rounded-full px-6 py-2 font-bold hover:opacity-80 mr-1" + on:click={paste} > - <Icon icon="scan" style="mr-2 w-6 my-auto" /> - <div class="my-auto">Scan</div> + <Icon icon="paste" style="mr-2 w-6 my-auto" /> + <div class="my-auto">Paste</div> </button> - </a> - <button - type="button" - class="flex border rounded-full px-6 py-2 font-bold hover:opacity-80 mr-1" - on:click={paste} - > - <Icon icon="paste" style="mr-2 w-6 my-auto" /> - <div class="my-auto">Paste</div> - </button> + <button + bind:this={el} + type="submit" + class="{!text + ? 'opacity-50' + : 'opacity-100 hover:opacity-80'} bg-black text-white border rounded-full px-6 py-2 font-bold" + > + Next + </button> + </div> + </form> - <button - bind:this={el} - type="submit" - class="{!text - ? 'opacity-50' - : 'opacity-100 hover:opacity-80'} bg-black text-white border rounded-full px-6 py-2 font-bold" - > - Next - </button> + {#if contacts.length} + <div class="space-y-5"> + <h1 class="px-3 md:px-0 text-xl font-semibold mt-10">Contacts</h1> + <div class="flex gap-4"> + {#each contacts as c} + <a href={`/${c.username}/receive`}> + <div class="text-center"> + <Avatar user={c} size={20} disabled={true} /> + <p class="text-lg break-words my-auto">{c.username}</p> + </div> + </a> + {/each} + </div> </div> -</form> - -<style> - .expandable-textarea { - font-family: inherit; - font-size: inherit; - - resize: both; - display: block; - overflow: hidden; - min-height: 48px; - line-height: 20px; - @apply block border rounded-2xl p-3 py-4 w-full; - } -</style> + {/if} +</div> |