aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/AppHeader.svelte11
-rw-r--r--src/components/Avatar.svelte2
-rw-r--r--src/routes/(app)/[username]/+page.svelte99
-rw-r--r--src/routes/(app)/[username]/receive/[...recipient]/+page.svelte8
-rw-r--r--src/routes/(app)/[username]/request/+page.svelte8
-rw-r--r--src/routes/(app)/[username]/request/sent/+page.svelte10
-rw-r--r--src/routes/(app)/[username]/transactions/[...page]/+page.svelte43
-rw-r--r--src/routes/(app)/invoice/[id]/+layout.server.js1
-rw-r--r--src/routes/(app)/invoice/[id]/+page.svelte60
-rw-r--r--src/routes/(app)/invoice/[id]/paid/+page.svelte10
-rw-r--r--src/routes/(app)/invoice/[id]/tip/+page.server.js6
-rw-r--r--src/routes/(app)/invoice/[id]/tip/+page.svelte4
-rw-r--r--src/routes/(app)/sent/+page.svelte9
13 files changed, 151 insertions, 120 deletions
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 7d03ec84..e0b5d002 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -107,16 +107,15 @@
{#each menuButtons as { href, icon, key }}
<li>
<a {href}>
- <button
- class="flex justify-center items-center font-semibold hover:opacity-80"
+ <button class="flex justify-center items-center font-semibold hover:opacity-80"
><Icon {icon} style="mr-2 w-6 md:w-8" /> {$t(key)}
</button>
</a>
</li>
{/each}
</ul>
- <hr class="my-4" />
- <a href="/"><img src="/images/logo.svg" alt="Coinos"></a>
+ <hr class="my-4" />
+ <a href="/"><img src="/images/logo.svg" alt="Coinos" /></a>
</div>
</OutClick>
</div>
@@ -128,7 +127,9 @@
</a>
{/if}
</nav>
- <div class="absolute md:w-[64px] md:mx-auto left-[calc(50vw-64px)] -bottom-[64px]">
+ <div
+ class="absolute md:w-[64px] md:mx-auto lg:left-[138px] left-[calc(50vw-64px)] -bottom-[64px]"
+ >
<Avatar user={subject} />
</div>
</header>
diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte
index d2d83977..054279ec 100644
--- a/src/components/Avatar.svelte
+++ b/src/components/Avatar.svelte
@@ -4,7 +4,7 @@
export let user;
export let size = 32;
- export let disabled = false;
+ export let disabled = false;
$: s = size.toString();
</script>
diff --git a/src/routes/(app)/[username]/+page.svelte b/src/routes/(app)/[username]/+page.svelte
index 4edfaa38..328f5bbe 100644
--- a/src/routes/(app)/[username]/+page.svelte
+++ b/src/routes/(app)/[username]/+page.svelte
@@ -10,59 +10,78 @@
let followed = false;
</script>
-<div class="container px-4 flex flex-wrap sm:flex-nowrap mb-4">
- <div class="w-full sm:w-[340px] pt-20 space-y-5 mr-4">
- <h1 class="text-3xl font-bold text-center sm:text-left">{subject.username}</h1>
+<div class="container mx-auto w-full x-4 mb-4 flex flex-wrap">
+ <div class="w-[240px] pt-20 space-y-5 lg:absolute left-20 mx-auto">
+ <h1 class="text-3xl font-bold text-center mx-auto lg:text-left">{subject.username}</h1>
- <div class="text-secondary w-64">
+ <div class="text-secondary mx-auto text-center lg:text-left lg:mx-0">
{subject.address && subject.address !== 'null' ? subject.address : ''}
</div>
{#if user?.username !== subject.username}
- <div>
- <a href={`/${subject.username}/receive`}>
- <button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2">
- Pay now
- </button>
- </a>
+ <div class="flex flex-wrap gap-2 w-full">
+ <div class="w-full flex">
+ <a href={`/${subject.username}/receive`} class="mx-auto">
+ <button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-40">
+ <div class="mx-auto flex">
+ <div style="mr-1">⚡️</div>
+ <div>Lightning</div>
+ </div>
+ </button>
+ </a>
+ </div>
- {#if user}
- <a href={`/${subject.username}/request`}>
- <button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2"
- >Ask to pay</button
- >
+ <div class="w-full flex">
+ <a href={`/${subject.username}/address`} class="mx-auto">
+ <button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-40">
+ <div class="mx-auto flex">
+ <img src="/images/bitcoin.svg" class="w-5 my-auto mr-1" />
+ <div>Bitcoin</div>
+ </div>
+ </button>
</a>
- {/if}
+ </div>
- <a href={`/${subject.username}/address`}>
- <button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2">
- Bitcoin address
- </button>
- </a>
+ {#if user}
+ <div class="w-full flex">
+ <a href={`/${subject.username}/request`} class="mx-auto">
+ <button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-40">
+ <div class="mx-auto flex">
+ <Icon icon="support" style="mr-1" />
+ <div>Invoice</div>
+ </div>
+ </button>
+ </a>
+ </div>
+ {/if}
</div>
{/if}
</div>
- <div class="space-y-5 mt-5 sm:mt-20 mx-auto max-w-lg">
- <img {src} class="w-[300px] mx-auto" on:click={() => copy(text)} alt="Lightning address" />
+ <div class="w-full flex">
+ <div class="space-y-5 mt-5 lg:pt-20 mx-auto max-w-lg">
+ <div class="border-2 rounded-[20%] w-[380px] py-6 mx-auto">
+ <img {src} class="mx-auto" on:click={() => copy(text)} alt="Lightning address" />
+ </div>
- <div class="bg-primary font-semibold rounded-xl text-sm p-3 flex">
- <div class="my-auto font-semibold text-lg w-full text-center">{text}</div>
- <button class="ml-auto hover:opacity-80" on:click={() => copy(text)}>
- <Icon icon="copy" />
- </button>
- </div>
+ <div class="bg-primary font-semibold rounded-3xl text-sm p-3 flex">
+ <div class="my-auto font-semibold text-lg w-full text-center">{text}</div>
+ <button class="ml-auto hover:opacity-80" on:click={() => copy(text)}>
+ <Icon icon="copy" />
+ </button>
+ </div>
- {#if user?.username === subject.username}
- <p class="text-secondary mb-1">
- This <a
- href="https://lightningaddress.com"
- class="underline"
- target="_blank"
- rel="noreferrer">lightning address</a
- > is like an email for bitcoin. You can publish it on your website or business cards and use
- it multiple times.
- </p>
- {/if}
+ {#if user?.username === subject.username}
+ <p class="text-secondary mb-1">
+ This <a
+ href="https://lightningaddress.com"
+ class="underline"
+ target="_blank"
+ rel="noreferrer">lightning address</a
+ > is like an email for bitcoin. You can publish it on your website or business cards and use
+ it multiple times.
+ </p>
+ {/if}
+ </div>
</div>
</div>
diff --git a/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte b/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
index 41958cd0..76e5e124 100644
--- a/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
+++ b/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
@@ -68,12 +68,10 @@
<Numpad bind:amount bind:currency />
<button
type="submit"
- class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold {!amount
- ? 'opacity-50'
- : 'opacity-100 hover:opacity-80'}"
- disabled={!amount}
+ class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold
+ opacity-100 hover:opacity-80"
>
- Next
+ {amount ? 'Next' : "Sender's choice"}
</button>
</div>
</form>
diff --git a/src/routes/(app)/[username]/request/+page.svelte b/src/routes/(app)/[username]/request/+page.svelte
index 6e7eb08a..6422b794 100644
--- a/src/routes/(app)/[username]/request/+page.svelte
+++ b/src/routes/(app)/[username]/request/+page.svelte
@@ -9,11 +9,11 @@
let { subject, user } = data;
</script>
-<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
+<button class="ml-5 md:ml-20 mt-10 hover:opacity-80" on:click={back}>
<Icon icon="arrow-left" style="w-10" />
</button>
-<div class="container max-w-lg px-4 mx-auto">
+<div class="container max-w-lg px-4 mx-auto mt-10 space-y-5">
<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">Request an invoice</h1>
<form method="POST" use:enhance class="space-y-5">
@@ -22,7 +22,7 @@
<textarea
name="memo"
- placeholder="You can use this field to describe your order"
+ placeholder="Use this field to describe your order"
class="w-full p-4 border rounded-xl h-48"
/>
@@ -31,7 +31,7 @@
type="submit"
class="bg-black text-white border rounded-full px-6 py-2 font-bold mx-auto"
>
- Submit Request
+ Submit
</button>
</div>
</form>
diff --git a/src/routes/(app)/[username]/request/sent/+page.svelte b/src/routes/(app)/[username]/request/sent/+page.svelte
index 1ee2cde1..4995bfb2 100644
--- a/src/routes/(app)/[username]/request/sent/+page.svelte
+++ b/src/routes/(app)/[username]/request/sent/+page.svelte
@@ -11,10 +11,8 @@
<Icon icon="check" style="mx-auto" />
</div>
<h1 class="text-3xl md:text-4xl font-bold mb-6">Request sent</h1>
-
- <a href={`/${subject.username}`}>
- <button class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80">
- Done
- </button>
- </a>
</div>
+
+<a href={`/${subject.username}`}>
+ <div class="opacity-0 w-screen h-screen fixed top-24 left-0 z-50" />
+</a>
diff --git a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
index c7007af4..5d8377d4 100644
--- a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
@@ -71,9 +71,13 @@
{$t('user.transactions.header')}
</h1>
- <div class="container w-full mx-auto md:text-lg px-4 max-w-xl">
- <div class="flex text-md text-secondary flex-wrap mb-4">
- <select class="md:hidden bg-white border p-4 rounded-full" on:change={change}>
+ <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
+ <div class="flex text-md text-secondary flex-wrap relative">
+ <Icon icon="clock" style="absolute left-4 top-4 opacity-50 md:hidden" />
+ <select
+ class="md:hidden bg-white border rounded-full text-center w-36 h-14"
+ on:change={change}
+ >
{#each presets as { start, end, title }, i}
<option
selected={selection === i}
@@ -87,14 +91,17 @@
class:active={selection === i}
href={`/${user.username}/transactions/${getUnixTime(start) + '/'}1`}
>
- <button class="rounded-full border py-2 px-5 hover:opacity-80 mb-2">
+ <button class="rounded-full border px-4 hover:opacity-80 h-14 w-20">
<div class="my-auto">{title}</div>
</button>
</a>
{/each}
</div>
- <button class="ml-auto rounded-xl border py-2 px-5 hover:opacity-80 mb-2 flex" on:click={csv}>
- <Icon icon="save" style="opacity-50 mr-2" />
+ <button
+ class="ml-auto rounded-full border px-4 w-36 hover:opacity-80 flex h-14"
+ on:click={csv}
+ >
+ <Icon icon="save" style="opacity-50 mr-2 my-auto" />
<div class="my-auto">Export</div>
</button>
</div>
@@ -111,10 +118,10 @@
{/if}
</div>
- <div class="space-y-10">
+ <div class="text-base">
{#each $txns as tx}
- <div class="grid grid-cols-3 border-b pb-5">
- <div class="whitespace-nowrap">
+ <div class="grid grid-cols-3 border-b h-24">
+ <div class="whitespace-nowrap my-auto">
<div class="mb-1 font-bold">
{f(tx.amount * (tx.rate / sats), tx.currency)}
@@ -136,24 +143,32 @@
</span>
</div>
- <div class="flex">
+ <div class="flex my-auto">
{#if tx.with}
<a href={`/${tx.with.username}`} class="mx-auto">
<div class="flex">
<div class="my-auto">
- <Avatar user={tx.with} size={12} />
+ <Avatar user={tx.with} size={20} />
</div>
<div class="my-auto ml-1 text-secondary">{tx.with.username}</div>
</div>
</a>
{:else}
- <div class="mx-auto text-secondary">
- {tx.amount > 0 ? (tx.confirmed ? 'Received' : 'Pending') : 'Sent'}
+ <div class="mx-auto text-secondary flex">
+ {#if tx.network === 'lightning'}
+ <div class="text-6xl">⚡️</div>
+ {:else}
+ <img src="/images/bitcoin.svg" class="w-16 my-auto mr-2" />
+ {/if}
+
+ <div class="my-auto">
+ {tx.amount > 0 ? (tx.confirmed ? 'Received' : 'Pending') : 'Sent'}
+ </div>
</div>
{/if}
</div>
- <div class="text-secondary text-right">
+ <div class="text-secondary text-right text-sm my-auto">
<div>
{format(parseISO(tx.createdAt), 'h:mm aaa')}
</div>
diff --git a/src/routes/(app)/invoice/[id]/+layout.server.js b/src/routes/(app)/invoice/[id]/+layout.server.js
index 48d92a36..b4d7d496 100644
--- a/src/routes/(app)/invoice/[id]/+layout.server.js
+++ b/src/routes/(app)/invoice/[id]/+layout.server.js
@@ -8,6 +8,7 @@ export async function load({ depends, params, url }) {
let { id } = params;
let invoice = await get(`/invoice?uuid=${id}`);
let { amount, received, pending } = invoice;
+ amount = parseInt(amount);
let paid = (!amount && (received || pending)) || (amount > 0 && received + pending >= amount);
if (paid && !url.pathname.endsWith('paid')) throw redirect(307, `/invoice/${id}/paid`);
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index 46b0f07e..50495724 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -73,11 +73,11 @@
};
</script>
-<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
+<button class="ml-5 mt-5 sm:mt-10 hover:opacity-80" on:click={back}>
<Icon icon="arrow-left" style="w-10" />
</button>
-<div class="container mx-auto max-w-lg px-4 space-y-2 md:space-y-5">
+<div class="container mx-auto max-w-lg px-4 space-y-2 sm:space-y-5">
<div>
<h1 class="text-secondary text-center text-xl">Please pay</h1>
@@ -93,25 +93,35 @@
</div>
</div>
- {#if !user || user.username === username || showQr}
- <div class="mx-auto">
- <img {src} class:p-4={full} class="w-[300px] mx-auto" bind:this={qr} on:click={toggle} />
+ <div class="w-full !mt-5 sm:!mt-8">
+ <div class="relative mx-auto w-[330px] h-[330px]">
+ <img {src} class:p-4={full} class="w-[300px] mx-auto pt-1" bind:this={qr} on:click={toggle} />
+ <div class="border-2 rounded-[20%] w-[330px] -top-[10px] absolute h-[330px]" />
</div>
+ </div>
- {#if address}
- <div class="text-secondary">{address}</div>
- {/if}
-
- <div class="flex gap-2 justify-center">
- <button
- class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80"
- on:click={() => copy(text)}
- ><Icon icon="copy" style="mr-1" />
- <div>Copy</div></button
- >
- </div>
+ {#if address}
+ <div class="text-secondary text-center">{address}</div>
{/if}
+ <div class="flex gap-2 justify-center">
+ <button
+ class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80"
+ on:click={() => copy(text)}
+ ><Icon icon="copy" style="mr-1" />
+ <div>Copy</div></button
+ >
+
+ {#if user && user.username !== username}
+ <a href={`/send/${invoice.uuid}`}>
+ <button class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80">
+ <Icon icon="send" style="mr-1" />
+ <div class="my-auto">Pay</div>
+ </button>
+ </a>
+ {/if}
+ </div>
+
<div class="space-y-2 w-80 mx-auto">
{#if invoice.tip}
<div class="flex justify-between">
@@ -141,22 +151,6 @@
</div>
{/if}
</div>
-
- {#if user && user.username !== username}
- <div class="mx-auto my-auto flex gap-2 justify-center">
- <a href={`/send/${invoice.uuid}`}>
- <button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80">
- Pay now
- </button>
- </a>
- <button
- class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80"
- on:click={() => (showQr = !showQr)}
- >
- {showQr ? 'Hide' : 'Show'} QR
- </button>
- </div>
- {/if}
</div>
<style>
diff --git a/src/routes/(app)/invoice/[id]/paid/+page.svelte b/src/routes/(app)/invoice/[id]/paid/+page.svelte
index 60bc4592..ec80c14d 100644
--- a/src/routes/(app)/invoice/[id]/paid/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/paid/+page.svelte
@@ -54,10 +54,8 @@
{/if}
</h3>
{/if}
-
- <a href={`/${user.username}/receive`}>
- <button class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80">
- {$t('invoice.done')}
- </button>
- </a>
</div>
+
+<a href={`/${user.username}/receive`}>
+ <div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50" />
+</a>
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.server.js b/src/routes/(app)/invoice/[id]/tip/+page.server.js
index 1068f273..dd618b8a 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.server.js
+++ b/src/routes/(app)/invoice/[id]/tip/+page.server.js
@@ -1,4 +1,10 @@
import invoice from '$lib/invoice';
+import { redirect } from '@sveltejs/kit';
+
+export async function load({ parent }) {
+ let { invoice } = await parent();
+ if (!invoice.amount) throw redirect(307, `/invoice/${invoice.uuid}`);
+}
export const actions = {
default: invoice
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.svelte b/src/routes/(app)/invoice/[id]/tip/+page.svelte
index 74c1639e..ca0a0437 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/tip/+page.svelte
@@ -102,7 +102,9 @@
$invoices[id] = { amount, id, network, rate, received, text, tip, username };
$: browser &&
- $invoices[id]?.received >= $invoices[id]?.amount &&
+ ($invoices[id]?.amount > 0
+ ? $invoices[id]?.received >= $invoices[id]?.amount
+ : $invoices[id]?.received) &&
goto(($invoices[id].memo === 'launch' && '/launch/purchase') || `/invoice/${id}/paid`);
$: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
diff --git a/src/routes/(app)/sent/+page.svelte b/src/routes/(app)/sent/+page.svelte
index 4b73e651..c7c88383 100644
--- a/src/routes/(app)/sent/+page.svelte
+++ b/src/routes/(app)/sent/+page.svelte
@@ -26,9 +26,8 @@
{f(fiat, user.currency)}
</h2>
<h3 class="text-secondary md:text-lg mb-6 mt-1">{sat(amount)}</h3>
- <a href={`/${user.username}/transactions`}>
- <button class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80">
- {$t('invoice.done')}
- </button>
- </a>
</div>
+
+<a href={`/${user.username}/transactions`}>
+ <div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50" />
+</a>
generated by cgit v1.2.3 (git 2.51.0) at 2026-10-15 11:35:20 +0000