fix: LNBits Price source switch

package.json

@@ -63,7 +63,8 @@
 		"nostr-tools": "^2.7.1",
 		"patch-package": "^8.0.0",
 		"svelte-bootstrap-icons": "^3.1.1",
-		"svelte-i18n": "^4.0.0"
+		"svelte-i18n": "^4.0.0",
+		"svelte-multiselect": "^11.0.0-rc.1"
 	},
 	"resolutions": {
 		"es5-ext": ">=0.10.64",

src/lib/components/settings/DataSourceSettings.svelte

@@ -138,5 +138,31 @@
 				size={$uiSettings.inputSize}
 			/>
 		{/if}
+		<Row>
+			<SettingsSwitch
+				id="lnbitsEnabled"
+				bind:checked={$settings.lnbitsEnabled}
+				label="{$_('section.settings.lnbitsEnabled')} ({$_('restartRequired')})"
+				size={$uiSettings.inputSize}
+			/>
+		</Row>
+		{#if $settings.lnbitsEnabled}
+			<SettingsInput
+				id="lnbitsInstance"
+				label={$_('section.settings.lnbitsInstance')}
+				bind:value={$settings.lnbitsInstance}
+				required={true}
+				size={$uiSettings.inputSize}
+			>
+				<InputGroupText>
+					<Input
+						type="checkbox"
+						bind:checked={$settings.lnbitsHttps}
+						bsSize={$uiSettings.inputSize}
+					/>
+					HTTPS
+				</InputGroupText>
+			</SettingsInput>
+		{/if}
 	</ToggleHeader>
 </Row>

src/lib/components/settings/ScreenSpecificSettings.svelte

@@ -5,9 +5,49 @@
 	import ToggleHeader from '../ToggleHeader.svelte';
 	import { uiSettings } from '$lib/uiSettings';
 	import { DataSourceType } from '$lib/types/dataSource';
-
+	import { onMount } from 'svelte';
+	import MultiSelect from 'svelte-multiselect';
 	export let settings;
 	export let isOpen = false;
+
+	let availableCurrencies: string[] = [];
+	let prevLnbitsEnabled: boolean;
+
+	function updateCurrencies(enabled: boolean) {
+		if (enabled) {
+			fetch(`https://${$settings.lnbitsInstance}/api/v1/currencies`)
+				.then((res) => res.json())
+				.then((data) => {
+					availableCurrencies = data;
+				});
+		} else {
+			// Remove any currencies from actCurrencies that aren't in availableCurrencies
+			$settings.actCurrencies = $settings.actCurrencies.filter((curr: string) =>
+				$settings.availableCurrencies.includes(curr)
+			);
+			activeCurrencies = $settings.actCurrencies;
+			availableCurrencies = $settings.availableCurrencies;
+		}
+	}
+
+	let activeCurrencies: { label: string; value: string }[] = [];
+
+	onMount(() => {
+		prevLnbitsEnabled = $settings.lnbitsEnabled;
+		updateCurrencies($settings.lnbitsEnabled);
+	});
+
+	$: {
+		if (prevLnbitsEnabled !== $settings.lnbitsEnabled) {
+			prevLnbitsEnabled = $settings.lnbitsEnabled;
+			updateCurrencies($settings.lnbitsEnabled);
+		}
+		if (!activeCurrencies.length) {
+			activeCurrencies = $settings.actCurrencies;
+		} else {
+			$settings.actCurrencies = activeCurrencies;
+		}
+	}
 </script>
 
 <Row>
@@ -75,16 +115,6 @@
 				size={$uiSettings.inputSize}
 				col={{ md: '6', xl: '12', xxl: '6' }}
 			/>
-
-			{#if !$settings.actCurrencies}
-				<SettingsSwitch
-					id="fetchEurPrice"
-					bind:checked={$settings.fetchEurPrice}
-					label="{$_('section.settings.fetchEuroPrice')} ({$_('restartRequired')})"
-					size={$uiSettings.inputSize}
-					col={{ md: '6', xl: '12', xxl: '6' }}
-				/>
-			{/if}
 		</Row>
 		<Row>
 			<h5>{$_('section.settings.screens')}</h5>
@@ -104,22 +134,14 @@
 			<Row>
 				<h5>{$_('section.settings.currencies')}</h5>
 				<small>{$_('restartRequired')}</small>
-				{#if $settings.availableCurrencies}
-					{#each $settings.availableCurrencies as c}
-						<Col md="6" xl="12" xxl="6">
-							<div class="form-check form-control-{$uiSettings.inputSize}">
-								<input
-									id="currency_{c}"
-									bind:group={$settings.actCurrencies}
-									value={c}
-									type="checkbox"
-									class="form-check-input"
+				<Col>
+					<MultiSelect
+						options={availableCurrencies}
+						bind:value={activeCurrencies}
+						placeholder={$_('section.settings.currencies')}
+						--sms-options-bg="var(--bs-body-bg, #212529)"
 					/>
-								<label class="form-check-label" for="currency_{c}">{c}</label>
-							</div>
 				</Col>
-					{/each}
-				{/if}
 			</Row>
 		{/if}
 	</ToggleHeader>

src/lib/locales/en.json

@@ -90,7 +90,9 @@
 			"dndStartHour": "Start hour",
 			"dndStartMinute": "Start minute",
 			"dndEndHour": "End hour",
-			"dndEndMinute": "End minute"
+			"dndEndMinute": "End minute",
+			"lnbitsEnabled": "LNBits multi-currency integration",
+			"lnbitsInstance": "LNbits instance hostname"
 		},
 		"control": {
 			"systemInfo": "System info",

src/routes/Status.svelte

@@ -306,9 +306,6 @@
 							</span>
 						{/if}
 					{/if}
-					{#if $settings.fetchEurPrice}
-						<small>{$_('section.status.fetchEuroNote')}</small>
-					{/if}
 				</p>
 			{/if}
 		</CardBody>

static/swagger.json

@@ -343,10 +343,6 @@
 			"Settings": {
 				"type": "object",
 				"properties": {
-					"fetchEurPrice": {
-						"type": "boolean",
-						"description": "Fetch EUR price instead of USD"
-					},
 					"fgColor": {
 						"type": "string",
 						"default": 16777215,

static/swagger.yml

@@ -232,9 +232,6 @@ components:
     Settings:
       type: object
       properties:
-        fetchEurPrice:
-          type: boolean
-          description: Fetch EUR price instead of USD
         fgColor:
           type: string
           default: 16777215

tests/playwright/test.ts

@@ -73,28 +73,6 @@ test('time values can not be zero or negative', async ({ page }) => {
 	}
 });
 
-test('info message when fetch eur price is enabled', async ({ page }) => {
-	delete (settingsJson as { actCurrencies?: string[] }).actCurrencies;
-
-	await page.goto('/');
-	await page.getByRole('button', { name: 'Show all' }).click();
-
-	const inputField = 'input#fetchEurPrice';
-	const switchElement = await page.locator(inputField);
-
-	expect(switchElement).toBeTruthy();
-	const isSwitchEnabled = await switchElement.isChecked();
-	expect(isSwitchEnabled).toBe(false);
-
-	await expect(page.getByText('the WS Price connection will show')).toBeHidden();
-
-	await switchElement.click();
-	const isSwitchNowEnabled = await switchElement.isChecked();
-	expect(isSwitchNowEnabled).toBe(true);
-
-	await expect(page.getByText('the WS Price connection will show')).toBeVisible();
-});
-
 test('npub values will be converted to hex pubkeys', async ({ page }) => {
 	await page.goto('/');
 	await page.getByRole('button', { name: 'Show all' }).click();

tests/shared.ts

@@ -84,7 +84,6 @@ export const settingsJson = {
 	mcapBigChar: true,
 	mdnsEnabled: true,
 	otaEnabled: true,
-	fetchEurPrice: false,
 	hostnamePrefix: 'btclock',
 	hostname: 'btclock-d60b14',
 	ip: '192.168.20.231',

yarn.lock

@@ -3144,11 +3144,38 @@ svelte-i18n@^4.0.0:
     sade "^1.8.1"
     tiny-glob "^0.2.9"
 
+svelte-multiselect@^11.0.0-rc.1:
+  version "11.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/svelte-multiselect/-/svelte-multiselect-11.0.0-rc.1.tgz#1238a6b768902afbdde23165e6dc922555f27342"
+  integrity sha512-dyUzja9AJfDejfafDj6PKNk3F51HavArevkJxZ0upJKUlPnPx5pDKY24BQYQvUpitTqVtsEoHevKr93WebBtwA==
+  dependencies:
+    svelte "4.2.12"
+
 svelte-preprocess@^6.0.2:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-6.0.3.tgz#fdc1f9dc41b6f22bf8b1f059e9f21eaaae181eeb"
   integrity sha512-PLG2k05qHdhmRG7zR/dyo5qKvakhm8IJ+hD2eFRQmMLHp7X3eJnjeupUtvuRpbNiF31RjVw45W+abDwHEmP5OA==
 
+svelte@4.2.12:
+  version "4.2.12"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-4.2.12.tgz#13d98d2274d24d3ad216c8fdc801511171c70bb1"
+  integrity sha512-d8+wsh5TfPwqVzbm4/HCXC783/KPHV60NvwitJnyTA5lWn1elhXMNWhXGCJ7PwPa8qFUnyJNIyuIRt2mT0WMug==
+  dependencies:
+    "@ampproject/remapping" "^2.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+    "@jridgewell/trace-mapping" "^0.3.18"
+    "@types/estree" "^1.0.1"
+    acorn "^8.9.0"
+    aria-query "^5.3.0"
+    axobject-query "^4.0.0"
+    code-red "^1.0.3"
+    css-tree "^2.3.1"
+    estree-walker "^3.0.3"
+    is-reference "^3.0.1"
+    locate-character "^3.0.0"
+    magic-string "^0.30.4"
+    periscopic "^3.1.0"
+
 svelte@^4.2.19:
   version "4.2.19"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-4.2.19.tgz#4e6e84a8818e2cd04ae0255fcf395bc211e61d4c"