Merge pull request #250 from getAlby/fix/canvas-qr

fix: use canvas QR instead of data URL to prevent CSP error
getAlby · Aug 14, 2024 · bff76dc · bff76dc
2 parents ffeba2b + 817a066
commit bff76dc
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -36,13 +36,13 @@ You can use Bitcoin Connect without any build tools:
 
 ```html
 <script type="module">
-  import {launchModal} from 'https://esm.sh/@getalby/[email protected].1'; // jsdelivr.net, skypack.dev also work
+  import {launchModal} from 'https://esm.sh/@getalby/[email protected].2'; // jsdelivr.net, skypack.dev also work
 
   // use Bitcoin connect API normally...
   launchModal();
 
   // or if you just want access to the web components:
-  import 'https://esm.sh/@getalby/[email protected].1';
+  import 'https://esm.sh/@getalby/[email protected].2';
 </script>
 
 <!-- Bitcoin Connect components are now available -->

diff --git a/demos/html/index.html b/demos/html/index.html
@@ -5,7 +5,7 @@
     <meta charset="utf-8" />
     <title>Bitcoin Connect</title>
     <script type="module">
-      import {onConnected} from 'https://esm.sh/@getalby/[email protected].1';
+      import {onConnected} from 'https://esm.sh/@getalby/[email protected].2';
       onConnected((provider) => {
         console.log('Connected with provider', provider);
       });

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@getalby/bitcoin-connect",
-  "version": "3.6.1",
+  "version": "3.6.2",
   "description": "Web components to connect to a lightning wallet and power a website with WebLN",
   "type": "module",
   "source": "src/index.ts",

diff --git a/react/package.json b/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@getalby/bitcoin-connect-react",
-  "version": "3.6.1",
+  "version": "3.6.2",
   "type": "module",
   "source": "src/index.ts",
   "main": "./dist/index.cjs",
@@ -27,7 +27,7 @@
     "build": "microbundle --globals react=React --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react"
   },
   "dependencies": {
-    "@getalby/bitcoin-connect": "^3.6.1"
+    "@getalby/bitcoin-connect": "^3.6.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.21",

diff --git a/react/yarn.lock b/react/yarn.lock
@@ -1018,10 +1018,10 @@
     "@babel/helper-validator-identifier" "^7.22.5"
     to-fast-properties "^2.0.0"
 
-"@getalby/bitcoin-connect@^3.6.1":
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/@getalby/bitcoin-connect/-/bitcoin-connect-3.6.1.tgz#4bdc7f95770a905e231572cc56f64cc213569ca2"
-  integrity sha512-zrBOc956MQVYmFEULh7C38TBK8Ks+xCgRBcLDu06mBB8aCL/HH/4y7TsKkqM34+jqWUP92j3KBkVAbmtEUjHkw==
+"@getalby/bitcoin-connect@^3.6.2":
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/@getalby/bitcoin-connect/-/bitcoin-connect-3.6.2.tgz#2395b4a91d00dcfec5b9c2e6f5e998f1b2c66e03"
+  integrity sha512-JttIpbKWbkS5WA62S2xHQ2I6Ld5azJi99BLVcgjJoM6szpE4tlSuZi+oASduG8XTFMsiQ1GU57nqfiVXrv9ZyA==
   dependencies:
     "@getalby/lightning-tools" "^5.0.3"
     "@getalby/sdk" "^3.6.1"

diff --git a/src/components/pages/bc-send-payment.ts b/src/components/pages/bc-send-payment.ts
@@ -199,25 +199,45 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
       return null;
     }
 
-    const errorCorrectionLevel = 'L';
-    const qr = qrcode(0, errorCorrectionLevel);
-    qr.addData(this.invoice);
-    qr.make();
+    const invoice = this.invoice;
+
+    // wait for the canvas to be added to the dom, then render it
+    setTimeout(() => {
+      const canvas = this.shadowRoot?.getElementById('qr') as HTMLCanvasElement;
+      if (!canvas) {
+        console.error('qr canvas not found');
+        return;
+      }
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        console.error('could not get context for qr canvas');
+        return;
+      }
+
+      const errorCorrectionLevel = 'L';
+      const qr = qrcode(0, errorCorrectionLevel);
+      qr.addData(invoice);
+      qr.make();
+      const moduleCount = qr.getModuleCount();
+      canvas.width = moduleCount * 4;
+      canvas.height = moduleCount * 4;
+      qr.renderTo2dContext(ctx, 4);
+    }, 100);
 
     return html`
       <!-- add margin only on dark mode because on dark mode the qr has a white border -->
       <a href="lightning:${this.invoice}" class="dark:mt-2">
-        <img src=${qr.createDataURL(4)} class="rounded-lg"></img>
+        <canvas id="qr" class="rounded-lg"></canvas>
       </a>
       <a
         @click=${this._copyInvoice}
         class="
         flex gap-1
         mt-4
-        ${classes['text-brand-mixed']} ${
-      classes.interactive
-    } font-semibold text-xs"
-        >
+        ${classes[
+          'text-brand-mixed'
+        ]} ${classes.interactive} font-semibold text-xs"
+      >
         ${this._hasCopiedInvoice ? copiedIcon : copyIcon}
         ${this._hasCopiedInvoice ? 'Copied!' : 'Copy Invoice'}
       </a>