gift link page

5 files changed, 64 insertions, 19 deletions

diff --git a/src/routes/(app)/fund/[id]/+layout.server.ts b/src/routes/(app)/fund/[id]/+layout.server.ts
new file mode 100644
index 00000000..3669eb7d
--- /dev/null
+++ b/src/routes/(app)/fund/[id]/+layout.server.ts
@@ -0,0 +1,12 @@
+import getRates from "$lib/rates";
+import { get } from "$lib/utils";
+
+export const load = async ({ depends, params: { id }, parent }) => {
+	depends("app:payments");
+	const data = await get(`/fund/${id}`);
+	data.managers = await get(`/fund/${id}/managers`);
+	const rates = await getRates();
+	const { user } = await parent();
+	data.rate = rates[user?.currency || "USD"];
+	return data;
+};
diff --git a/src/routes/(app)/fund/[id]/+page.server.ts b/src/routes/(app)/fund/[id]/+page.server.ts
index a4f402af..cd2bd979 100644
--- a/src/routes/(app)/fund/[id]/+page.server.ts
+++ b/src/routes/(app)/fund/[id]/+page.server.ts
@@ -1,17 +1,6 @@
-import getRates from "$lib/rates";
-import { auth, get, post } from "$lib/utils";
+import { auth, post } from "$lib/utils";
 import { redirect } from "@sveltejs/kit";
 
-export const load = async ({ depends, params: { id }, parent }) => {
-	depends("app:payments");
-	const data = await get(`/fund/${id}`);
-	data.managers = await get(`/fund/${id}/managers`);
-	const rates = await getRates();
-	const { user } = await parent();
-	data.rate = rates[user?.currency || "USD"];
-	return data;
-};
-
 export const actions = {
 	default: async ({ cookies, locals, params }) => {
 		const { user } = locals;
diff --git a/src/routes/(app)/fund/[id]/+page.svelte b/src/routes/(app)/fund/[id]/+page.svelte
index 7f465512..da869fed 100644
--- a/src/routes/(app)/fund/[id]/+page.svelte
+++ b/src/routes/(app)/fund/[id]/+page.svelte
@@ -111,14 +111,11 @@
           ></iconify-icon>
           <div class="my-auto">{$t("payments.shareLink")}</div>
         </a>
-        <button
-          onclick={() => copy(`${$page.url.href}/sweep`)}
-          class="btn !w-auto grow"
-        >
-          <iconify-icon noobserver icon="ph:copy-bold" width="32"
+        <a href={`${$page.url.pathname}/gift`} class="btn !w-auto grow">
+          <iconify-icon noobserver icon="ph:gift-bold" width="32"
           ></iconify-icon>
-          <div class="my-auto">{$t("payments.sweep")}</div>
-        </button>
+          <div class="my-auto">{$t("payments.giftLink")}</div>
+        </a>
         <!-- <a href={`/qr/${lnurlw}`} class="btn !w-auto grow"> -->
         <!--   <iconify-icon -->
         <!--     noobserver -->
diff --git a/src/routes/(app)/fund/[id]/gift/+page.server.ts b/src/routes/(app)/fund/[id]/gift/+page.server.ts
new file mode 100644
index 00000000..50be31f7
--- /dev/null
+++ b/src/routes/(app)/fund/[id]/gift/+page.server.ts
@@ -0,0 +1,7 @@
+export const load = async ({ params, parent }) => {
+	const p = await parent();
+	console.log(p);
+	const { amount, rate } = p;
+	const { id } = params;
+	return { amount, id, rate };
+};
diff --git a/src/routes/(app)/fund/[id]/gift/+page.svelte b/src/routes/(app)/fund/[id]/gift/+page.svelte
new file mode 100644
index 00000000..ed38c06d
--- /dev/null
+++ b/src/routes/(app)/fund/[id]/gift/+page.svelte
@@ -0,0 +1,40 @@
+<script>
+  import Amount from "$comp/Amount.svelte";
+  import { t } from "$lib/translations";
+  import { page } from "$app/stores";
+  import Icon from "$comp/Icon.svelte";
+  import Qr from "$comp/Qr.svelte";
+  import { loc, copy } from "$lib/utils";
+
+  let { data } = $props();
+  let { id, user, amount, rate } = $derived(data);
+  let text = $page.url.href.replace("gift", "sweep");
+  let currency = user ? user.currency : "CAD";
+  let locale = loc(user);
+</script>
+
+<div class="container px-4 max-w-4xl mx-auto space-y-5 pb-10">
+  <h1 class="text-center text-2xl font-semibold">{$t("payments.gift")}</h1>
+
+  <Amount {amount} {currency} {rate} {locale} />
+
+  <div class="text-secondary shadow-lg p-8 mx-auto text-center space-y-2">
+    <p>{$t("payments.giftDesc1")}</p>
+    <p>{$t("payments.giftDesc2")}</p>
+  </div>
+
+  <div class="flex gap-1">
+    <button
+      type="button"
+      class="btn break-all !h-auto flex-nowrap p-4 font-normal leading-normal !w-auto grow"
+      onclick={() => copy(text)}
+    >
+      <iconify-icon noobserver icon="ph:copy-bold" width="32"></iconify-icon>
+      <div class="my-auto">{text}</div>
+    </button>
+
+    <a href={`/qr/${encodeURIComponent(text)}`} class="btn !w-auto">
+      <iconify-icon icon="ph:qr-code-bold" width={32}></iconify-icon>
+    </a>
+  </div>
+</div>