From c2d798b8825cc3c5011069f4bcdf2c7dd5234292 Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Sun, 13 Jul 2025 23:05:57 -0700
Subject: tap qr

---
 bun.lockb                                          | Bin 290051 -> 291945 bytes
 package.json                                       |   4 ++-
 src/components/Qr.svelte                           |  12 ++++----
 .../(app)/[username]/accepted/[text]/+page.svelte  |  15 +++++-----
 src/routes/(app)/qr/[text]/[icon]/+server.ts       |  33 +++++++++++++++++++++
 src/routes/(app)/qr/[text]/raw/+server.ts          |   1 +
 static/images/bitcoin-logo.png                     | Bin 0 -> 99084 bytes
 static/images/nfc.png                              | Bin 0 -> 118238 bytes
 static/images/tap.png                              | Bin 375651 -> 110037 bytes
 9 files changed, 51 insertions(+), 14 deletions(-)
 create mode 100644 src/routes/(app)/qr/[text]/[icon]/+server.ts
 create mode 100644 static/images/bitcoin-logo.png
 create mode 100644 static/images/nfc.png

diff --git a/bun.lockb b/bun.lockb
index 2a601932..92720150 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index a2241d3c..dfe2b380 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,8 @@
   },
   "type": "module",
   "dependencies": {
-    "cordova-plugin-android-notch": "^1.0.3"
+    "canvas": "^3.1.2",
+    "cordova-plugin-android-notch": "^1.0.3",
+    "qrcode": "^1.5.4"
   }
 }
diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte
index 5f159442..da4ceb00 100644
--- a/src/components/Qr.svelte
+++ b/src/components/Qr.svelte
@@ -1,7 +1,11 @@
 <script>
   import screenfull from "screenfull";
-  let { text } = $props();
+  let { icon, text } = $props();
   let qr = $state();
+
+  let src = `/qr/${encodeURIComponent(text)}`;
+  if (icon) src += `/${icon}`;
+  else src += "/raw";
 </script>
 
 <div
@@ -10,9 +14,5 @@
   onclick={() => screenfull.toggle(qr)}
   onkeydown={() => screenfull.toggle(qr)}
 >
-  <img
-    src={`/qr/${encodeURIComponent(text)}/raw`}
-    class="mx-auto"
-    alt="QR Code"
-  />
+  <img {src} class="mx-auto" alt="QR Code" />
 </div>
diff --git a/src/routes/(app)/[username]/accepted/[text]/+page.svelte b/src/routes/(app)/[username]/accepted/[text]/+page.svelte
index d96e48e2..1984cf81 100644
--- a/src/routes/(app)/[username]/accepted/[text]/+page.svelte
+++ b/src/routes/(app)/[username]/accepted/[text]/+page.svelte
@@ -9,15 +9,16 @@
 </script>
 
 <div class="px-2">
-  <div class="border-8 border-black p-8 max-w-[710px] mx-auto mt-20 space-y-5">
+  <div class="border-8 border-black p-8 max-w-[580px] mx-auto mt-20 space-y-2 rounded-3xl">
     <div class="flex gap-2 mx-auto justify-center">
-      <img src="/images/bitcoin.png" class="w-16 h-16 my-auto" />
-      <h3 class="text-5xl font-bold text-center my-auto">
-        Bitcoin Accepted Here
-      </h3>
+      <!-- <img src="/images/bitcoin.png" class="w-16 h-16 my-auto" /> -->
+      <img src="/images/bitcoin-logo.png" class="my-auto w-[400px]" />
+      <!-- <h3 class="text-5xl font-bold text-center my-auto"> -->
+      <!--   bitcoin -->
+      <!-- </h3> -->
     </div>
-    <Qr {text} />
-    <div class="text-center text-4xl font-bold">
+    <Qr {text} icon="nfc.png" />
+    <div class="text-center text-4xl font-bold break-all">
       coinos.io/{username.toLowerCase()}
     </div>
     {#if nfc}
diff --git a/src/routes/(app)/qr/[text]/[icon]/+server.ts b/src/routes/(app)/qr/[text]/[icon]/+server.ts
new file mode 100644
index 00000000..c2825877
--- /dev/null
+++ b/src/routes/(app)/qr/[text]/[icon]/+server.ts
@@ -0,0 +1,33 @@
+import { createCanvas, loadImage } from "canvas";
+import QRCode from "qrcode";
+
+export async function GET({ params }) {
+	const { icon, text } = params;
+	const size = 600;
+
+	const canvas = createCanvas(size, size);
+	await QRCode.toCanvas(canvas, text, {
+		errorCorrectionLevel: "H",
+		width: size,
+	});
+
+	const ctx = canvas.getContext("2d");
+
+	const logo = await loadImage(`static/images/${icon}`);
+	const logoSize = size * 0.3;
+	ctx.drawImage(
+		logo,
+		(size - logoSize) / 2,
+		(size - logoSize) / 2,
+		logoSize,
+		logoSize,
+	);
+
+	const buffer = canvas.toBuffer("image/png");
+	return new Response(buffer, {
+		headers: {
+			"Content-Type": "image/png",
+			"Cache-Control": "public, max-age=31536000, immutable",
+		},
+	});
+}
diff --git a/src/routes/(app)/qr/[text]/raw/+server.ts b/src/routes/(app)/qr/[text]/raw/+server.ts
index a24d3a3c..a2626c4d 100644
--- a/src/routes/(app)/qr/[text]/raw/+server.ts
+++ b/src/routes/(app)/qr/[text]/raw/+server.ts
@@ -14,3 +14,4 @@ export async function GET({ params }) {
 		},
 	});
 }
+
diff --git a/static/images/bitcoin-logo.png b/static/images/bitcoin-logo.png
new file mode 100644
index 00000000..c9bdae0a
Binary files /dev/null and b/static/images/bitcoin-logo.png differ
diff --git a/static/images/nfc.png b/static/images/nfc.png
new file mode 100644
index 00000000..9d86d727
Binary files /dev/null and b/static/images/nfc.png differ
diff --git a/static/images/tap.png b/static/images/tap.png
index 7e4b659e..a6622111 100644
Binary files a/static/images/tap.png and b/static/images/tap.png differ
-- 
cgit v1.2.3