mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-10-01 17:31:13 +00:00
Use lightning and nostrich icons in qr codes
This commit is contained in:
parent
1a0c3cff04
commit
8d2124a56b
5
src/assets/icons/qr_lightning.svg
Normal file
5
src/assets/icons/qr_lightning.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="34" cy="34" r="34" fill="white"/>
|
||||
<circle cx="34" cy="34" r="30" fill="black"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M44.3873 30.576C44.6706 30.1806 44.3872 29.6314 43.8998 29.6314H36.8748L38.2774 20.4296C38.5218 19.1875 36.9153 18.4692 36.1475 19.4771L24.6231 36.3979C24.3235 36.7912 24.6049 37.3566 25.1002 37.3566H32.0821L30.6198 47.5905C30.3952 48.8445 32.0319 49.5315 32.7744 48.495L44.3873 30.576Z" fill="white"/>
|
||||
</svg>
|
After Width: | Height: | Size: 547 B |
5
src/assets/icons/qr_nostrich.svg
Normal file
5
src/assets/icons/qr_nostrich.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 5.4 KiB |
@ -61,7 +61,7 @@ const LnQrCodeModal: Component<{
|
||||
|
||||
<div class={styles.body}>
|
||||
<div class={styles.qrCode}>
|
||||
<QrCode data={props.lnbc || ''} />
|
||||
<QrCode data={props.lnbc || ''} type="lightning"/>
|
||||
</div>
|
||||
|
||||
<div class={styles.description}>{description()}</div>
|
||||
|
@ -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]) =>
|
||||
<Show when={info.data}>
|
||||
<Tabs.Content class={styles.tabContent} value={key}>
|
||||
<QrCode data={info.data} />
|
||||
<QrCode data={info.data} type={info.type} />
|
||||
</Tabs.Content>
|
||||
</Show>
|
||||
}
|
||||
|
@ -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<string, string> = {
|
||||
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",
|
||||
|
Loading…
Reference in New Issue
Block a user