pot page improvementsnew-qr-scanner

5 files changed, 44 insertions, 47 deletions

diff --git a/src/locales/en.json b/src/locales/en.json
index c7d38583..8176ae4c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -234,6 +234,12 @@
 		}
 	},
 	"payments": {
+    "moneyPot": "Money Pot",
+    "addFunds": "Add Funds",
+    "takeFunds": "Take Funds",
+    "show": "Show",
+    "hide": "Hide",
+    "copyLink": "Copy Link",
     "total": "Total",
     "gainLoss": "Gain/Loss",
     "presentValue": "Present Value",
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 7b81b797..2de58873 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -88,29 +88,25 @@
 			{#if !user.balance}
 				<div class="mb-8">
 					<p class="text-secondary text-lg">
-          {$t("user.welcome")}
+						{$t('user.welcome')}
 					</p>
 				</div>
 			{/if}
 
-			<div class="flex gap-4 justify-center w-full">
-				<a href={`/${user.username}/receive`}>
-					<button
-						class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"
-					>
+			<div class="flex flex-wrap gap-4 justify-center w-full">
+				<a href={`/${user.username}/receive`} class="w-full md:w-60">
+					<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-full md:w-60">
 						<div class="mx-auto flex">
 							<Icon icon="numpad" style="my-auto h-6 mr-2" />
-              <div class="my-auto mt-1">{$t("user.requestPayment")}</div>
+							<div class="my-auto mt-1">{$t('user.requestPayment')}</div>
 						</div>
 					</button>
 				</a>
-				<a href={`/scan`}>
-					<button
-						class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"
-					>
+				<a href={`/scan`} class="w-full md:w-60">
+					<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-full md:w-60">
 						<div class="mx-auto flex">
 							<Icon icon="scan" style="my-auto h-6 mr-2" />
-              <div class="my-auto mt-1">{$t("user.send.scan")}</div>
+							<div class="my-auto mt-1">{$t('user.send.scan')}</div>
 						</div>
 					</button>
 				</a>
diff --git a/src/routes/(app)/[username]/payments/[...page]/+page.svelte b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
index adfaf680..611da44a 100644
--- a/src/routes/(app)/[username]/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
@@ -4,21 +4,13 @@
 	import { format } from 'date-fns';
 	import { newPayment, payments } from '$lib/store';
 	import { t } from '$lib/translations';
-	import { get, f, s, sat, sats } from '$lib/utils';
+	import { get, f, s, sat, sats, types } from '$lib/utils';
 	import { page } from '$app/stores';
 	import { differenceInDays, getUnixTime, sub } from 'date-fns';
 	import { goto, invalidate } from '$app/navigation';
 
 	export let data;
 
-	const types = {
-		internal: 'internal',
-		bitcoin: 'bitcoin',
-		lightning: 'lightning',
-		pot: 'pot',
-		classic: 'classic'
-	};
-
 	let { start, end, user, rates } = data;
 
 	let change = ({ target: { value } }) => goto(value);
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index 1da3f872..146975f5 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { t } from '$lib/translations';
-	import { back, copy, f, s, fiat, post, sats, success } from '$lib/utils';
+	import { back, copy, f, s, fiat, post, sats, success, types } from '$lib/utils';
 	import { Avatar, Icon } from '$comp';
 	import { format } from 'date-fns';
 	import { PUBLIC_EXPLORER as expl } from '$env/static/public';
@@ -42,6 +42,19 @@
 			</a>
 		</div>
 	{/if}
+	{#if p.type === types.pot}
+		<div>
+			<span class="text-lg text-secondary my-auto mr-2">{amount > 0 ? 'From' : 'To'}</span>
+      <a href={`/pot/${p.memo}`}>
+				<div class="flex">
+					<div class="my-auto">
+            <img src="/images/moneypot.png" class="w-12" alt="Pot" />
+					</div>
+					<div class="my-auto ml-1">{p.memo}</div>
+				</div>
+			</a>
+		</div>
+	{/if}
 	<div>
 		<span class="text-lg text-secondary">Amount</span>
 		<div>
diff --git a/src/routes/(app)/pot/[name]/+page.svelte b/src/routes/(app)/pot/[name]/+page.svelte
index aac70e8e..4cf05b13 100644
--- a/src/routes/(app)/pot/[name]/+page.svelte
+++ b/src/routes/(app)/pot/[name]/+page.svelte
@@ -25,13 +25,7 @@
 	let toggle = () => (show = !show);
 </script>
 
-<div class="container px-4 max-w-xl mx-auto mt-10 space-y-5">
-	<div class="w-full flex">
-		<a href="/" class="mx-auto">
-			<Icon icon="logo" />
-		</a>
-	</div>
-
+<div class="container px-4 max-w-4xl mx-auto mt-10 space-y-5">
 	<div class="flex justify-center items-center">
 		<div class="md:shadow-xl rounded-3xl md:px-10 pt-5 pb-10 space-y-5 w-full md:mx-5">
 			<div class="relative flex justify-center gap-2">
@@ -40,19 +34,14 @@
           <h1 class="text-2xl md:text-3xl font-semibold my-auto">Card {name}</h1>
 				{:else}
 					<img src="/images/moneypot.jpg" class="w-24" />
-					<h1 class="text-2xl md:text-3xl font-semibold my-auto">Money Pot</h1>
+          <div class="my-auto">
+            <h1 class="text-2xl font-semibold my-auto">{$t('payments.moneyPot')}</h1>
+          <h1 class="text-secondary my-auto">{name}</h1>
+          </div>
 				{/if}
 			</div>
-			<p class="text-secondary text-center">
-				Anyone who knows the URL to this page can add or take out funds from the pot
-			</p>
 			{#if show}
 				<img {src} class="mx-auto" alt={name} />
-
-				<button class="flex mx-auto mt-5" on:click={() => copy($page.url.pathname)}
-					><Icon icon="copy" style="w-10 max-w-none" />
-					<div class="my-auto">Copy</div></button
-				>
 			{/if}
 			<div class="flex justify-center gap-4">
 				<div class="my-auto">
@@ -71,7 +60,7 @@
 							class="rounded-full border py-3 px-2 font-bold hover:opacity-80 flex gap-1 w-full justify-center"
 						>
 							<Icon icon="plus" />
-							Add funds
+              {$t('payments.addFunds')}
 						</button>
 					</a>
 				</div>
@@ -81,7 +70,7 @@
 							class="rounded-full border py-3 px-2 font-bold hover:opacity-80 flex gap-1 w-full justify-center"
 						>
 							<Icon icon="minus" style="rotate-180" />
-							Take funds
+              {$t('payments.takeFunds')}
 						</button>
 					</a>
 				</div>
@@ -92,14 +81,15 @@
 					on:click={toggle}
 				>
 					<Icon icon="qr" style="invert" />
-					{show ? 'Hide' : 'Show'} QR
+					{show ? $t('payments.show') : $t('payments.hide')} QR
+				</button>
+				<button
+					class="rounded-full border py-3 px-2 font-bold hover:opacity-80 flex gap-1 w-full justify-center"
+          on:click={() => copy($page.url.pathname)}
+				>
+					<Icon icon="copy" style="w-6" />
+          {$t('payments.copyLink')}
 				</button>
-				<!-- <button -->
-				<!-- 	class="rounded-full border py-3 px-2 font-bold hover:opacity-80 flex gap-1 w-full justify-center" -->
-				<!-- > -->
-				<!-- 	<Icon icon="nfc" style="w-6" /> -->
-				<!-- 	Write Tag -->
-				<!-- </button> -->
 			</div>
 			<div class="text-base">
 				{#each payments as p}