add vss config option

src/i18n/en/translations.ts

@@ -437,6 +437,8 @@ export default {
             lsp_label: "LSP",
             lsp_caption:
                 "Lightning Service Provider. Automatically opens channels to you for inbound liquidity. Also wraps invoices for privacy.",
+            storage_label: "Storage",
+            storage_caption: "Encrypted VSS backup service.",
             error_lsp: "That doesn't look like a URL",
             save: "Save"
         },

src/root.tsx

@@ -8,15 +8,14 @@ import {
     Link,
     Meta,
     Scripts,
-    Title,
+    Title
 } from "solid-start";
 
 import "./root.css";
 
-
 import { ErrorDisplay, I18nProvider } from "~/components";
-import { Provider as MegaStoreProvider } from "~/state/megaStore";
 import { Router } from "~/router";
+import { Provider as MegaStoreProvider } from "~/state/megaStore";
 
 export default function Root() {
     return (

src/routes/settings/Servers.tsx

@@ -1,4 +1,5 @@
 import { createForm, url } from "@modular-forms/solid";
+import { createResource, Match, Suspense, Switch } from "solid-js";
 
 import {
     BackLink,
@@ -7,27 +8,29 @@ import {
     DefaultMain,
     ExternalLink,
     LargeHeader,
-    MutinyWalletGuard,
+    LoadingShimmer,
     NavBar,
     NiceP,
     SafeArea,
     showToast,
+    SimpleErrorDisplay,
     TextField
 } from "~/components";
 import { useI18n } from "~/i18n/context";
 import {
+    getSettings,
     MutinyWalletSettingStrings,
     setSettings
 } from "~/logic/mutinyWalletSetup";
-import { useMegaStore } from "~/state/megaStore";
 import { eify } from "~/utils";
 
-export function SettingsStringsEditor() {
+export function SettingsStringsEditor(props: {
+    initialSettings: MutinyWalletSettingStrings;
+}) {
     const i18n = useI18n();
-    const [state, _actions] = useMegaStore();
     const [settingsForm, { Form, Field }] =
         createForm<MutinyWalletSettingStrings>({
-            initialValues: state.settings
+            initialValues: props.initialSettings
         });
 
     async function handleSubmit(values: MutinyWalletSettingStrings) {
@@ -105,6 +108,20 @@ export function SettingsStringsEditor() {
                         />
                     )}
                 </Field>
+                <Field
+                    name="storage"
+                    validate={[url(i18n.t("settings.servers.error_lsp"))]}
+                >
+                    {(field, props) => (
+                        <TextField
+                            {...props}
+                            value={field.value}
+                            error={field.error}
+                            label={i18n.t("settings.servers.storage_label")}
+                            caption={i18n.t("settings.servers.storage_caption")}
+                        />
+                    )}
+                </Field>
                 <div />
                 <Button
                     type="submit"
@@ -118,23 +135,33 @@ export function SettingsStringsEditor() {
     );
 }
 
+function AsyncSettingsEditor() {
+    const [settings] = createResource<MutinyWalletSettingStrings>(getSettings);
+
+    return (
+        <Switch>
+            <Match when={settings.error}>
+                <SimpleErrorDisplay error={settings.error} />
+            </Match>
+            <Match when={settings.latest}>
+                <SettingsStringsEditor initialSettings={settings()!} />
+            </Match>
+        </Switch>
+    );
+}
+
 export default function Servers() {
     const i18n = useI18n();
     return (
-        <MutinyWalletGuard>
-            <SafeArea>
-                <DefaultMain>
-                    <BackLink
-                        href="/settings"
-                        title={i18n.t("settings.header")}
-                    />
-                    <LargeHeader>
-                        {i18n.t("settings.servers.title")}
-                    </LargeHeader>
-                    <SettingsStringsEditor />
-                </DefaultMain>
-                <NavBar activeTab="settings" />
-            </SafeArea>
-        </MutinyWalletGuard>
+        <SafeArea>
+            <DefaultMain>
+                <BackLink href="/settings" title={i18n.t("settings.header")} />
+                <LargeHeader>{i18n.t("settings.servers.title")}</LargeHeader>
+                <Suspense fallback={<LoadingShimmer />}>
+                    <AsyncSettingsEditor />
+                </Suspense>
+            </DefaultMain>
+            <NavBar activeTab="settings" />
+        </SafeArea>
     );
 }