aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/lib/socket.js5
-rw-r--r--src/lib/store.js2
-rw-r--r--src/routes/[username]/index.svelte7
-rw-r--r--src/routes/__layout.svelte2
-rw-r--r--src/routes/invoice/[id].svelte206
-rw-r--r--src/routes/support.svelte (renamed from src/routes/[username]/support.svelte)0
6 files changed, 128 insertions, 94 deletions
diff --git a/src/lib/socket.js b/src/lib/socket.js
index c7c541e1..4898f481 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -1,5 +1,5 @@
import { get } from 'svelte/store';
-import { rate, user, token } from '$lib/store';
+import { rate, user, token, invoicePaid, preferredCurrency } from '$lib/store';
let interval, socket;
@@ -18,13 +18,14 @@ export const messages = (data) => ({
},
payment() {
- console.log(data, 'payment');
+ invoicePaid.set(true);
},
connected: auth,
login() {
user.set(data);
+ preferredCurrency.set(data.currency);
}
});
diff --git a/src/lib/store.js b/src/lib/store.js
index 6f4a9515..f910dfa6 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -18,3 +18,5 @@ export const user = writable();
export const invoiceAmount = writable();
export const invoiceAmountFiat = writable();
export const token = persisted('token');
+export const invoicePaid = writable();
+export const preferredCurrency = writable();
diff --git a/src/routes/[username]/index.svelte b/src/routes/[username]/index.svelte
index a53b94cc..6e3978ad 100644
--- a/src/routes/[username]/index.svelte
+++ b/src/routes/[username]/index.svelte
@@ -7,8 +7,7 @@
import { copy } from '$lib/utils';
export let username;
- //this needs to be pulled from user
- let lightning = 'lnbc1p3dzl8tpp5jgq2dxefjdhvmvs3uvtjc';
+ let lightningAddress = `${username}@coinos.io`;
onMount(async () => {
if (browser) {
@@ -39,7 +38,7 @@
setTimeout(() => (qrSkeleton = false), 100);
const handleCopy = () => {
- copy(lightning);
+ copy(lightningAddress);
toast.push('Copied!', {
theme: {
'--toastBarBackground': '#2F855A'
@@ -84,7 +83,7 @@
<div
class="bg-primary font-semibold rounded-xl text-sm py-2 px-3 flex flex-wrap justify-center items-center"
>
- <span>{lightning}</span>
+ <span>{lightningAddress}</span>
<button on:click={handleCopy}>
<Icon icon="copy" style="ml-2" />
</button>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index b2cb8aae..406c29e2 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -11,7 +11,7 @@
import { LoadingSplash } from '$comp';
browser && ($token ||= $session.token);
- let protectedRoutes = [/receive/];
+ let protectedRoutes = [/receive/, /customers/, /dashboard/, /settings/, /transactions/];
let ready = false;
onMount(() => {
diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte
index 0f5a1437..0bb6c41a 100644
--- a/src/routes/invoice/[id].svelte
+++ b/src/routes/invoice/[id].svelte
@@ -1,16 +1,16 @@
<script>
+ import { toast } from '@zerodevx/svelte-toast';
import { get, post, reverseFormat } from '$lib/utils';
import { browser } from '$app/env';
- import { user } from '$lib/store';
- import { Icon } from '$comp';
+ import { user, invoicePaid, preferredCurrency } from '$lib/store';
+ import { Icon, Image } from '$comp';
import { goto } from '$app/navigation';
import { onMount } from 'svelte';
+ import { copy } from '$lib/utils';
export let amount, rate, text, username;
- let mobileMenu;
- $: logMobileParent(showMobileTip);
- let logMobileParent = () => mobileMenu && console.log(mobileMenu.offsetParent);
+ console.log($user);
$: amountFiat = parseFloat(((amount * rate) / 100000000).toFixed(2));
@@ -50,7 +50,7 @@
$: totalAmountFormatted = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
- }).format(amountFiat + tipAmount);
+ }).format(amountFiat + parseFloat(tipAmount));
const amountFormatted = new Intl.NumberFormat('en-US', {
maximumFractionDigits: 0
@@ -67,6 +67,8 @@
const handleTipButtonClick = (amount) => {
customTipAmount = '';
+ customInput.value = '';
+
if (amount === 'None') {
tipPercent = 0;
} else {
@@ -119,27 +121,42 @@
};
let customInput;
+
+ const handleCopy = () => {
+ copy(text);
+ toast.push('Copied!', {
+ theme: {
+ '--toastBarBackground': '#2F855A'
+ }
+ });
+ };
+
+ const handleDoneClick = () => {
+ if ($user) {
+ goto(`/${user.username}/receive`);
+ } else {
+ goto('/');
+ }
+ };
</script>
-<div class:full-shadow={showMobileTip}>
- {#if $user}
+{#if $user && !invoicePaid}
+ <div class:full-shadow={showMobileTip}>
<button class="ml-5 md:ml-20 mt-5 md:mt-10" on:click={handleBackButton}>
<Icon icon="arrow-left" style="w-10" />
</button>
- {/if}
<div class="flex justify-center items-center mb-20 md:mt-[20px] px-3">
<div
class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 space-x-0 lg:space-x-24"
>
- <!-- tipping section -->
- <div
- bind:this={mobileMenu}
- class="absolute {showMobileTip
- ? 'top-[calc(100vh - 100%)]'
- : 'top-[calc(100vh)]'} left-0 bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 md:static text-center space-y-5 z-50"
- >
- <h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
+ <!-- tipping section -->
+ <div
+ class="w-[100%] md:w-auto absolute {showMobileTip
+ ? 'bottom-0'
+ : '-bottom-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 left-0 md:static text-center space-y-5"
+ >
+ <h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
<div>
<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
@@ -148,51 +165,54 @@
<span class="block text-secondary text-sm">{tipPercent}%</span>
</div>
- <input
- id="slider"
- type="range"
- min="0"
- max="100"
- value={tipPercent}
- class="px-2"
- on:input={(e) => {
- customTipAmount = '';
- tipPercent = e.target.value;
- }}
- />
+ <input
+ id="slider"
+ type="range"
+ min="0"
+ max="100"
+ value={tipPercent}
+ class="px-2"
+ on:input={(e) => {
+ customTipAmount = '';
+ customInput.value = '';
+ tipPercent = e.target.value;
+ }}
+ />
- <div>
- {#each tipAmounts as amount}
- <button
- class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {tipPercent ===
- amount.slice(0, 2) ||
- ((tipPercent === 0 || tipPercent === '0') && amount === 'None')
- ? '!bg-black text-white'
- : ''}"
- on:click={() => handleTipButtonClick(amount)}>{amount}</button
- >
- {/each}
+ <div>
+ {#each tipAmounts as amount}
+ <button
+ class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {customTipAmount
+ ? ''
+ : tipPercent === amount.slice(0, 2) ||
+ ((tipPercent === 0 || tipPercent === '0') && amount === 'None')
+ ? '!bg-black text-white'
+ : ''}"
+ on:click={() => handleTipButtonClick(amount)}>{amount}</button
+ >
+ {/each}
- <div class="relative">
- <span
- class="absolute top-[20px] left-5 font-semibold {!customTipAmount
- ? 'opacity-50'
- : 'opacity-100'}">$</span
- >
- <input
- bind:this={customInput}
- type="number"
- min="0"
- on:input={(e) => handleCustomTipAmount(e)}
- class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
- placeholder="Other"
- />
- <button
- class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
- ? !customTipAmount && !tipAmount
+ <div class="relative">
+ <span
+ class="absolute top-[20px] left-5 font-semibold {!customTipAmount
? 'opacity-50'
- : 'opacity-100'
- : !customTipAmount
+ : 'opacity-100'}">$</span
+ >
+ <input
+ bind:this={customInput}
+ type="number"
+ min="0"
+ on:input={(e) => handleCustomTipAmount(e)}
+ class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
+ placeholder="Other"
+ />
+ <button
+ class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
+ ? !customTipAmount && !tipAmount
+ ? 'opacity-50'
+ : 'opacity-100'
+ : !customTipAmount
+
? 'opacity-50'
: 'opacity-100'}"
disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
@@ -238,42 +258,54 @@
>Scan to pay <span class="text-black font-semibold">{username}</span></span
>
- <div
- bind:this={qr}
- class="border {showMobileTip
- ? 'border-gray-400'
- : 'border-lightgrey'} rounded-3xl block md:flex md:p-5 justify-center items-center h-[300px] md:h-[342px] w-[250px] md:w-[342px] relative"
- />
+ <div
+ bind:this={qr}
+ on:click={handleCopy}
+ class="border {showMobileTip
+ ? 'border-gray-400'
+ : 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center cursor-pointer"
+ />
- <div class="px-5 space-y-3">
- <div class="flex justify-between">
- <span class="font-semibold text-sm">Invoice</span>
- <span class="font-semibold text-sm"
- >{invoiceAmountFiatFormatted}
- <span class="text-secondary font-normal">{`(${amountFormatted} SATS)`}</span></span
- >
- </div>
+ <div class="px-5 space-y-3">
+ <div class="flex justify-between">
+ <span class="font-semibold text-sm">Invoice</span>
+ <span class="font-semibold text-sm"
+ >{invoiceAmountFiatFormatted}
+ <span class="text-secondary font-normal">{`(${amountFormatted} SATS)`}</span></span
+ >
+ </div>
- <div class="flex justify-between">
- <span class="font-semibold text-sm">Tip</span>
- <span class="font-semibold text-sm"
- >{tipAmountFormatted}
- <span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
- >
- </div>
+ <div class="flex justify-between">
+ <span class="font-semibold text-sm">Tip</span>
+ <span class="font-semibold text-sm"
+ >{tipAmountFormatted}
+ <span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
+ >
+ </div>
- <div class="flex justify-between">
- <span class="font-bold">Total</span>
- <span class="font-bold"
- >{totalAmountFormatted}
- <span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span></span
- >
+ <div class="flex justify-between">
+ <span class="font-bold">Total</span>
+ <span class="font-bold"
+ >{totalAmountFormatted}
+ <span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span></span
+ >
+ </div>
</div>
</div>
</div>
</div>
</div>
-</div>
+{:else}
+ <div class="text-center mt-20 md:mt-0">
+ <Image image="success" style="w-full md:w-3/4 xl:w-1/2 mx-auto max-w-3xl" />
+ <h1 class="text-3xl md:text-4xl font-bold mb-6">Payment Successful!</h1>
+ <h2 class="text-2xl md:text-3xl font-semibold">{totalAmountFormatted} {$preferredCurrency}</h2>
+ <h3 class="text-secondary md:text-lg mb-6 mt-1">({totalAmountSats} SATS)</h3>
+ <button class="bg-black text-white rounded-2xl w-20 py-3 font-bold" on:click={handleDoneClick}>
+ Done
+ </button>
+ </div>
+{/if}
<style>
#slider {
diff --git a/src/routes/[username]/support.svelte b/src/routes/support.svelte
index 1935b156..1935b156 100644
--- a/src/routes/[username]/support.svelte
+++ b/src/routes/support.svelte
generated by cgit v1.2.3 (git 2.51.0) at 2026-11-02 10:58:44 +0000