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

---
 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 +
 4 files changed, 48 insertions(+), 13 deletions(-)
 create mode 100644 src/routes/(app)/qr/[text]/[icon]/+server.ts

(limited to 'src')

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 }) {
 		},
 	});
 }
+
-- 
cgit v1.2.3