diff --git a/README.md b/README.md index 7389951..0425442 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ This repo hosts the code behind [Bitfeed](https://bits.monospace.live), a live v - [Umbrel](https://getumbrel.com) (coming soon) - [Citadel](https://runcitadel.space/) - [Docker](https://github.com/bitfeed-project/bitfeed/blob/master/DOCKER.md) -- [Build from source](https://github.com/bitfeed-project/bitfeed/blob/master/README.md#installing-and-building-bitfeed) +- [Build from source](#installing-and-building-bitfeed) ## Installing and Building Bitfeed diff --git a/client/package-lock.json b/client/package-lock.json index 7e1777b..c00f26e 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -1,12 +1,12 @@ { "name": "bitfeed-client", - "version": "2.1.0", + "version": "2.1.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "bitfeed-client", - "version": "2.1.0", + "version": "2.1.3", "dependencies": { "@babel/core": "^7.16.5", "@babel/preset-env": "^7.16.5", @@ -31,7 +31,8 @@ "sass": "^1.49.0", "sirv-cli": "^1.0.14", "svelte": "^3.44.3", - "svelte-preprocess": "^4.10.1" + "svelte-preprocess": "^4.10.1", + "svelte-select": "^4.4.7" } }, "node_modules/@babel/code-frame": { @@ -4063,6 +4064,11 @@ } } }, + "node_modules/svelte-select": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-4.4.7.tgz", + "integrity": "sha512-fIf9Z8rPI6F8naHZ9wjXT0Pv5gLyhdHAFkHFJnCfVVfELE8e82uOoF0xEVQP6Kir+b4Q5yOvNAzZ61WbSU6A0A==" + }, "node_modules/through2": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", @@ -7205,6 +7211,11 @@ "strip-indent": "^3.0.0" } }, + "svelte-select": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-4.4.7.tgz", + "integrity": "sha512-fIf9Z8rPI6F8naHZ9wjXT0Pv5gLyhdHAFkHFJnCfVVfELE8e82uOoF0xEVQP6Kir+b4Q5yOvNAzZ61WbSU6A0A==" + }, "through2": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", diff --git a/client/package.json b/client/package.json index 6bb9086..2c28571 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "bitfeed-client", - "version": "2.1.2", + "version": "2.1.3", "scripts": { "build": "rollup -c", "dev": "rollup -c -w", @@ -30,6 +30,7 @@ "sass": "^1.49.0", "sirv-cli": "^1.0.14", "svelte": "^3.44.3", - "svelte-preprocess": "^4.10.1" + "svelte-preprocess": "^4.10.1", + "svelte-select": "^4.4.7" } } diff --git a/client/src/components/BlockInfo.svelte b/client/src/components/BlockInfo.svelte index b6293d1..c9ad972 100644 --- a/client/src/components/BlockInfo.svelte +++ b/client/src/components/BlockInfo.svelte @@ -6,7 +6,7 @@ import Icon from '../components/Icon.svelte' import closeIcon from '../assets/icon/cil-x-circle.svg' import { shortBtcFormat, longBtcFormat, timeFormat, integerFormat } from '../utils/format.js' - import { exchangeRates, localCurrency } from '../stores.js' + import { exchangeRates, settings } from '../stores.js' import { formatCurrency } from '../utils/fx.js' const dispatch = createEventDispatcher() @@ -21,10 +21,10 @@ $: { if (block && block.value) { - const rate = $exchangeRates[$localCurrency] + const rate = $exchangeRates[$settings.currency] let local if (rate && rate.last) { - local = formatCurrency($localCurrency, (block.value/100000000) * rate.last, { compact: true }) + local = formatCurrency($settings.currency, (block.value/100000000) * rate.last, { compact: true }) } else { local = null } diff --git a/client/src/components/DonationOverlay.svelte b/client/src/components/DonationOverlay.svelte index a8dac7f..14df844 100644 --- a/client/src/components/DonationOverlay.svelte +++ b/client/src/components/DonationOverlay.svelte @@ -5,7 +5,7 @@ import { onMount } from 'svelte' import Overlay from '../components/Overlay.svelte' import TierCard from './sponsor/TierCard.svelte' import SatoshiSlider from './sponsor/SatoshiSlider.svelte' -import Pill from '../components/Pill.svelte' +import Pill from './util/Pill.svelte' import Icon from '../components/Icon.svelte' import boltIcon from '../assets/icon/cil-bolt-filled.svg' import chainIcon from '../assets/icon/cil-link.svg' diff --git a/client/src/components/Settings.svelte b/client/src/components/Settings.svelte index 6aeee19..6fc1bd0 100644 --- a/client/src/components/Settings.svelte +++ b/client/src/components/Settings.svelte @@ -2,25 +2,49 @@ import config from '../config.js' import analytics from '../utils/analytics.js' import SidebarMenuItem from '../components/SidebarMenuItem.svelte' -import { settings, nativeAntialias, exchangeRates, localCurrency, haveMessages } from '../stores.js' +import { settings, nativeAntialias, exchangeRates, haveMessages } from '../stores.js' +import { currencies } from '../utils/fx.js' function toggle(setting) { - $settings[setting] = !$settings[setting] - analytics.trackEvent('settings', setting, $settings[setting] ? 'on' : 'off') + if (settingConfig[setting] != null && settingConfig[setting].valueType === 'bool') { + onChange(setting, !$settings[setting]) + } } +function onChange(setting, value) { + $settings[setting] = value + analytics.trackEvent('settings', setting, $settings[setting]) +} + +const currencyOptions = Object.keys(currencies).map(code => { + return { + value: code, + label: `${currencies[code].char} ${currencies[code].name}`, + tags: [code, currencies[code].name, ...currencies[code].countries] + } +}) + let settingConfig = { showNetworkStatus: { - label: 'Network Status' + label: 'Network Status', + valueType: 'bool' }, darkMode: { - label: 'Dark Mode' + label: 'Dark Mode', + valueType: 'bool' + }, + currency: { + label: 'Fiat Currency', + type: 'dropdown', + valueType: 'string', + options: currencyOptions }, vbytes: { label: 'Size by', type: 'pill', falseLabel: 'value', - trueLabel: 'vbytes' + trueLabel: 'vbytes', + valueType: 'bool' }, } $: { @@ -28,21 +52,24 @@ $: { settingConfig.fancyGraphics = false } else { settingConfig.fancyGraphics = { - label: 'Fancy Graphics' + label: 'Fancy Graphics', + valueType: 'bool' } } if (config.messagesEnabled && $haveMessages) { settingConfig.showMessages = { - label: 'Message Bar' + label: 'Message Bar', + valueType: 'bool' } } } $: { - const rate = $exchangeRates[$localCurrency] + const rate = $exchangeRates[$settings.currency] if (rate && rate.last) { settingConfig.showFX = { - label: '₿ Price' + label: '₿ Price', + valueType: 'bool' } } else { settingConfig.showFX = false @@ -58,6 +85,6 @@ function getSettings(setting) { {#each Object.keys($settings) as setting (setting) } {#if settingConfig[setting]} - { toggle(setting) }} /> + { toggle(setting) }} on:input={(e) => { onChange(setting, e.detail)}} /> {/if} {/each} diff --git a/client/src/components/Sidebar.svelte b/client/src/components/Sidebar.svelte index d267c5e..f640ea1 100644 --- a/client/src/components/Sidebar.svelte +++ b/client/src/components/Sidebar.svelte @@ -49,54 +49,22 @@ function showBlock () { top: 20%; left: 100%; display: flex; - flex-direction: column; + flex-direction: column-reverse; justify-content: flex-start; align-items: flex-start; }
- {settings('settings')}} tooltip="Settings"> - - - -
- -
- - {settings('legend')}} tooltip="Key"> - - - -
- -
- - {settings('contact')}} tooltip="Contact"> - - - -
- -
- - openOverlay('about')} tooltip="About"> - - - - - {#if $haveSupporters } - openOverlay('supporters')} tooltip="Supporters"> + + {#if blockHidden } + showBlock()} tooltip="Show Latest Block"> - - - - {/if} - {#if config.donationsEnabled } - openOverlay('donation')} tooltip="Donate"> - - + +
+ +
{/if} {#if config.dev && config.debug} @@ -109,14 +77,47 @@ function showBlock () {
{/if} - {#if blockHidden } - showBlock()} tooltip="Show Latest Block"> + {#if config.donationsEnabled } + openOverlay('donation')} tooltip="Donate"> - + -
- -
{/if} + {#if $haveSupporters } + openOverlay('supporters')} tooltip="Supporters"> + + + + + {/if} + openOverlay('about')} tooltip="About"> + + + + + {settings('contact')}} tooltip="Contact"> + + + +
+ +
+ + {settings('legend')}} tooltip="Key"> + + + +
+ +
+ + {settings('settings')}} tooltip="Settings"> + + + +
+ +
+ diff --git a/client/src/components/SidebarMenuItem.svelte b/client/src/components/SidebarMenuItem.svelte index 71a5272..7569b84 100644 --- a/client/src/components/SidebarMenuItem.svelte +++ b/client/src/components/SidebarMenuItem.svelte @@ -1,12 +1,32 @@ -
+
{#if type === 'pill'} { label } - + + {:else if type === 'dropdown'} +
+