diff --git a/src/assets/icons/qr_lightning.svg b/src/assets/icons/qr_lightning.svg new file mode 100644 index 0000000..015d726 --- /dev/null +++ b/src/assets/icons/qr_lightning.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/qr_nostrich.svg b/src/assets/icons/qr_nostrich.svg new file mode 100644 index 0000000..e7be846 --- /dev/null +++ b/src/assets/icons/qr_nostrich.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/LnQrCodeModal/LnQrCodeModal.tsx b/src/components/LnQrCodeModal/LnQrCodeModal.tsx index 703d479..1a438d6 100644 --- a/src/components/LnQrCodeModal/LnQrCodeModal.tsx +++ b/src/components/LnQrCodeModal/LnQrCodeModal.tsx @@ -61,7 +61,7 @@ const LnQrCodeModal: Component<{
- +
{description()}
diff --git a/src/components/ProfileQrCodeModal/ProfileQrCodeModal.tsx b/src/components/ProfileQrCodeModal/ProfileQrCodeModal.tsx index 8b8ff14..8bfd5cd 100644 --- a/src/components/ProfileQrCodeModal/ProfileQrCodeModal.tsx +++ b/src/components/ProfileQrCodeModal/ProfileQrCodeModal.tsx @@ -39,10 +39,12 @@ const ProfileQrCodeModal: Component<{ pubkey: { title: 'Public key', data: `nostr:${props.profile.npub || hexToNpub(props.profile.pubkey)}`, + type: 'nostr', }, lnAddress: { title: 'Lightning address', data: `lightning:${props.profile.lud16 || props.profile.lud06}`, + type: 'lightning', } }); @@ -98,7 +100,7 @@ const ProfileQrCodeModal: Component<{ {([key, info]) => - + } diff --git a/src/components/QrCode/QrCode.tsx b/src/components/QrCode/QrCode.tsx index 74f85c2..8cdaa0e 100644 --- a/src/components/QrCode/QrCode.tsx +++ b/src/components/QrCode/QrCode.tsx @@ -1,19 +1,29 @@ import QRCodeStyling from 'qr-code-styling'; -import { Component, createEffect, onMount } from 'solid-js'; +import { Component, createEffect } from 'solid-js'; -import primalLogoFire from '../../assets/icons/logo_fire.svg' -import primalLogoIce from '../../assets/icons/logo_ice.svg' -import { useSettingsContext } from '../../contexts/SettingsContext'; +import qrNostrich from '../../assets/icons/qr_nostrich.svg' +import qrLightning from '../../assets/icons/qr_lightning.svg' import styles from './QrCode.module.scss'; -const QrCode: Component<{ data: string }> = (props) => { +const QrCode: Component<{ data: string, type?: string }> = (props) => { let qrSlot: HTMLDivElement | undefined; - const settings = useSettingsContext(); + const qrTypes = ['nostr', 'lightning']; - const isIce = () => ['midnight', 'ice'].includes(settings?.theme || ''); + const qrType = () => { + const t = props.type && qrTypes.includes(props.type) ? + props.type : + 'nostr'; + + const qrImages: Record = { + nostr: qrNostrich, + lightning: qrLightning, + } + + return qrImages[t]; + }; createEffect(() => { const qrCode = new QRCodeStyling({ @@ -21,17 +31,17 @@ const QrCode: Component<{ data: string }> = (props) => { height: 280, type: "svg", data: props.data, - margin: 6, - image: isIce() ? primalLogoIce : primalLogoFire, + margin: 1, + image: qrType(), qrOptions: { typeNumber: 0, mode: "Byte", errorCorrectionLevel :"Q", }, imageOptions: { - hideBackgroundDots: true, + hideBackgroundDots: false, imageSize:0.2, - margin: 4, + margin: 0, }, dotsOptions:{ type: "rounded",