make onchain donation address dynamic

.env.example

@@ -2,6 +2,7 @@ BTCMAP_KEY=
 GITHUB_API_KEY=
 LNBITS_API_KEY=
 LNBITS_URL=
+LNBITS_WALLET_ID=
 OPENCAGE_API_KEY=
 SERVER_CRYPTO_KEY=
 SERVER_INIT_VECTOR=

src/components/DonationOption.svelte

@@ -20,15 +20,13 @@
 		class="mx-auto flex w-full items-center justify-between rounded-xl bg-lightBlue px-4 py-4 text-body dark:bg-white/[0.15] dark:text-white md:w-[475px] md:justify-center md:space-x-4 md:px-0 md:py-3"
 	>
 		<!-- value -->
-		<span class="hidden lowercase md:block"
-			>{text === 'Lightning' ? `${value.slice(0, 41)}...` : value}</span
-		>
+		<span class="hidden lowercase md:block">{value.slice(0, 41)}...</span>
 		<span class="block uppercase md:hidden"
 			>{text}
 			<img
 				src={text === 'Lightning' ? '/icons/ln-highlight.svg' : '/icons/btc-highlight.svg'}
 				alt="protocol"
-				class="mb-1 inline"
+				class="mb-1 inline dark:rounded-full dark:bg-white dark:p-0.5"
 			/>
 		</span>
 

src/routes/support-us/+page.server.ts

@@ -0,0 +1,25 @@
+import { LNBITS_API_KEY, LNBITS_URL, LNBITS_WALLET_ID } from '$env/static/private';
+import axios from 'axios';
+import axiosRetry from 'axios-retry';
+import type { PageServerLoad } from './$types';
+
+axiosRetry(axios, { retries: 3, retryDelay: axiosRetry.exponentialDelay });
+
+export const load: PageServerLoad = async () => {
+	const headers = {
+		'X-API-Key': `${LNBITS_API_KEY}`,
+		'Content-type': 'application/json'
+	};
+
+	try {
+		const address = await axios.get(
+			`https://${LNBITS_URL}/watchonly/api/v1/address/${LNBITS_WALLET_ID}`,
+			{ headers }
+		);
+
+		return { address: address.data.address };
+	} catch (error) {
+		console.log(error);
+		return { address: 'bc1qqmy5c03clt6a72aq0ys5jzm2sjnws3qr05nvmz' };
+	}
+};

src/routes/support-us/+page.svelte

@@ -9,9 +9,14 @@
 	} from '$lib/comp';
 	import { theme } from '$lib/store';
 	import type { DonationType } from '$lib/types';
-	import { detectTheme } from '$lib/utils';
+	import { detectTheme, warningToast } from '$lib/utils';
+	import QRCode from 'qrcode';
+	import type { Action } from 'svelte/action';
+	import type { PageData } from './$types';
 
-	let onchain = 'bc1qqmy5c03clt6a72aq0ys5jzm2sjnws3qr05nvmz';
+	export let data: PageData;
+
+	let onchain = data.address;
 	const lnurlp = 'LNURL1DP68GURN8GHJ7CM0WFJJUCN5VDKKZUPWDAEXWTMVDE6HYMRS9ARKXVN4W5EQPSYZ34';
 
 	let showQr = false;
@@ -22,6 +27,20 @@
 		showQr = true;
 	};
 
+	const renderQr: Action<HTMLCanvasElement> = (node) => {
+		QRCode.toCanvas(
+			node,
+			network === 'Lightning' ? 'lightning:' + lnurlp : 'bitcoin:' + onchain,
+			{ width: window.innerWidth > 640 ? 256 : 200 },
+			function (error: any) {
+				if (error) {
+					warningToast('Could not generate QR, please try again or contact BTC Map.');
+					console.error(error);
+				}
+			}
+		);
+	};
+
 	const company = [
 		{ url: 'https://coinos.io/', title: 'coinos', logo: 'coinos.svg', logoDark: 'coinos-dark.svg' },
 		{ url: 'https://www.walletofsatoshi.com/', title: 'Wallet of Satoshi', logo: 'wos.svg' },
@@ -83,12 +102,9 @@
 
 							<!-- qr -->
 							<a href={network === 'Lightning' ? `lightning:${lnurlp}` : `bitcoin:${onchain}`}>
-								<img
-									src={network === 'Lightning'
-										? '/images/lightning-qr.svg'
-										: '/images/onchain-qr.svg'}
-									alt="qr"
-									class="mx-auto h-[256px] w-[256px] rounded-xl border-4 border-link transition-colors hover:border-hover"
+								<canvas
+									use:renderQr
+									class="mx-auto h-[200px] w-[200px] rounded-xl border-4 border-link transition-colors hover:border-hover sm:h-[256px] sm:w-[256px]"
 								/>
 							</a>