feat: add scan qr option

README.md

@@ -53,7 +53,7 @@ You can get the ALBYHUB_URL, AUTH_TOKEN and ALBYHUB_NAME by logging into Alby Hu
 
 1. Run `fly deploy`
 
-## TODOs
+## Features
 
 - [x] One click wallet creation
 - [x] Show balance
@@ -67,7 +67,8 @@ You can get the ALBYHUB_URL, AUTH_TOKEN and ALBYHUB_NAME by logging into Alby Hu
 - [x] basic lightning addresses
 - [x] podcasting value tag
 - [x] daily wallet creation rate limit
-- [ ] scan QR
+- [x] scan QR
+- [ ] get Jim instance info via REST API
 - [ ] daily record of reserves + charts
 - [ ] per-connection limits (so one user cannot use all the liquidity provided by the service)
 - [ ] extra open actions (Alby Account, Mobile Wallet, Web Wallet, Nostrudel?, ...) & instructions

app/components/ScanQR.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import QRCode from "react-qr-code";
+
+export function ScanQR({ connectionSecret }: { connectionSecret: string }) {
+  const [showQR, setShowQR] = React.useState(false);
+  return (
+    <>
+      <button
+        className="w-80 btn btn-lg btn-primary"
+        onClick={() => setShowQR((current) => !current)}
+      >
+        {showQR ? "Hide QR" : "Scan QR"}
+      </button>
+      {showQR && (
+        <div className="w-full flex justify-center items-center p-8">
+          <QRCode size={256} value={connectionSecret} viewBox={`0 0 256 256`} />
+        </div>
+      )}
+    </>
+  );
+}

app/page.tsx

@@ -6,6 +6,7 @@ import { AlbyExtension } from "./components/AlbyExtension";
 import { Topup } from "./components/Topup";
 import { nwc } from "@getalby/sdk";
 import Link from "next/link";
+import { ScanQR } from "./components/ScanQR";
 
 export default function Home() {
   const [wallet, setWallet] = React.useState<Wallet>();
@@ -123,6 +124,7 @@ export default function Home() {
               >
                 Connect to Alby Account
               </a>
+              <ScanQR connectionSecret={wallet.connectionSecret} />
             </div>
 
             <p className="text-sm mt-4">

package.json

@@ -18,7 +18,8 @@
     "@prisma/client": "5.17.0",
     "next": "14.2.5",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-qr-code": "^2.0.15"
   },
   "devDependencies": {
     "@flydotio/dockerfile": "^0.5.8",

yarn.lock

@@ -2412,6 +2412,11 @@ punycode@^2.1.0:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
+[email protected]:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
+  integrity sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==
+
 qrcode-generator@^1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/qrcode-generator/-/qrcode-generator-1.4.4.tgz#63f771224854759329a99048806a53ed278740e7"
@@ -2435,6 +2440,14 @@ react-is@^16.13.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-qr-code@^2.0.15:
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/react-qr-code/-/react-qr-code-2.0.15.tgz#fbfc12952c504bcd64275647e9d1ea63251742ce"
+  integrity sha512-MkZcjEXqVKqXEIMVE0mbcGgDpkfSdd8zhuzXEl9QzYeNcw8Hq2oVIzDLWuZN2PQBwM5PWjc2S31K8Q1UbcFMfw==
+  dependencies:
+    prop-types "^15.8.1"
+    qr.js "0.0.0"
+
 react@^18:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"