Skip to content

Commit

Permalink
Merge pull request #250 from getAlby/fix/canvas-qr
Browse files Browse the repository at this point in the history
fix: use canvas QR instead of data URL to prevent CSP error
  • Loading branch information
rolznz authored Aug 14, 2024
2 parents ffeba2b + 817a066 commit bff76dc
Show file tree
Hide file tree
Showing 6 changed files with 39 additions and 19 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down
2 changes: 1 addition & 1 deletion demos/html/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
4 changes: 2 additions & 2 deletions react/package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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",
Expand Down
8 changes: 4 additions & 4 deletions react/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
38 changes: 29 additions & 9 deletions src/components/pages/bc-send-payment.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit bff76dc

Please sign in to comment.