cleanup and refactor

src/components/BalanceBox.tsx

@@ -1,5 +1,5 @@
 import { A, useNavigate } from "@solidjs/router";
-import { createResource, Match, Show, Switch } from "solid-js";
+import { createResource, Match, Show, Suspense, Switch } from "solid-js";
 
 import shuffle from "~/assets/icons/shuffle.svg";
 import {
@@ -56,18 +56,6 @@ export function BalanceBox(props: { loading?: boolean }) {
     const usableOnchain = () =>
         (state.balance?.confirmed || 0n) + (state.balance?.unconfirmed || 0n);
 
-    async function fetchFederations() {
-        // Log the attempt to fetch federations
-        console.log("Attempting to fetch federations...");
-        const result = await state.mutiny_wallet?.list_federations();
-        console.log("Fetched federations:", result);
-        return result ?? [];
-    }
-
-    const [federations, { refetch }] = createResource(fetchFederations, {
-        // storage: createDeepSignal
-    });
-
     return (
         <>
             <FancyCard>
@@ -103,43 +91,11 @@ export function BalanceBox(props: { loading?: boolean }) {
                         </Match>
                     </Switch>
                 </Show>
-
+                <Show when={!props.loading && !state.safe_mode}>
-                <Show when={federations.latest && federations().length}>
+                    <Suspense>
-                    <hr class="my-2 border-m-grey-750" />
+                        <FederationsBalance />
-                    <Show when={!props.loading} fallback={<LoadingShimmer />}>
+                    </Suspense>
-                        <Switch>
-                            <Match when={state.safe_mode}>
-                                <div class="flex flex-col gap-1">
-                                    <InfoBox accent="red">
-                                        {i18n.t("common.error_safe_mode")}
-                                    </InfoBox>
-                                </div>
-                            </Match>
-                            <Match when={true}>
-                                <div class="flex flex-col gap-1">
-                                    <div class="text-2xl">
-                                        <AmountSats
-                                            amountSats={
-                                                state.balance?.federation || 0
-                                            }
-                                            icon="community"
-                                            denominationSize="lg"
-                                        />
-                                    </div>
-                                    <div class="text-lg text-white/70">
-                                        <AmountFiat
-                                            amountSats={
-                                                state.balance?.federation || 0n
-                                            }
-                                            denominationSize="sm"
-                                        />
-                                    </div>
-                                </div>
-                            </Match>
-                        </Switch>
-                    </Show>
                 </Show>
-
                 <hr class="my-2 border-m-grey-750" />
                 <Show when={!props.loading} fallback={<LoadingShimmer />}>
                     <div class="flex justify-between">
@@ -201,3 +157,39 @@ export function BalanceBox(props: { loading?: boolean }) {
         </>
     );
 }
+
+function FederationsBalance() {
+    const [state, _actions] = useMegaStore();
+
+    async function fetchFederations() {
+        const result = await state.mutiny_wallet?.list_federations();
+        return result ?? [];
+    }
+
+    const [federations] = createResource(fetchFederations);
+
+    return (
+        <Show when={federations() && federations().length}>
+            <hr class="my-2 border-m-grey-750" />
+            <Switch>
+                <Match when={true}>
+                    <div class="flex flex-col gap-1">
+                        <div class="text-2xl">
+                            <AmountSats
+                                amountSats={state.balance?.federation || 0}
+                                icon="community"
+                                denominationSize="lg"
+                            />
+                        </div>
+                        <div class="text-lg text-white/70">
+                            <AmountFiat
+                                amountSats={state.balance?.federation || 0n}
+                                denominationSize="sm"
+                            />
+                        </div>
+                    </div>
+                </Match>
+            </Switch>
+        </Show>
+    );
+}

src/i18n/en/translations.ts

@@ -537,8 +537,11 @@ export default {
             title: "Manage Federations",
             federation_code_label: "Federation code",
             federation_code_required: "Federation code can't be blank",
+            federation_added_success: "Federation added successfully",
             add: "Add",
-            remove: "Remove"
+            remove: "Remove",
+            expires: "Expires",
+            federation_id: "Federation ID"
         },
         gift: {
             give_sats_link: "Give sats as a gift",

src/routes/settings/ManageFederations.tsx

@@ -18,34 +18,24 @@ import {
 } from "~/components";
 import { useI18n } from "~/i18n/context";
 import { useMegaStore } from "~/state/megaStore";
-import { eify } from "~/utils";
+import { eify, timeAgo } from "~/utils";
 
 type FederationForm = {
     federation_code: string;
 };
 
-function fetchFederations() {
+type MutinyFederationIdentity = {
-    const [state, _actions] = useMegaStore();
+    federation_id: string;
-    try {
+    federation_name: string;
-        // Log the attempt to fetch federations
+    welcome_message: string;
-        console.log('Attempting to fetch federations...');
+    federation_expiry_timestamp: number;
-        const result = state.mutiny_wallet?.list_federations();
+};
-        console.log('Fetched federations:', result);
-        return result ?? [];
-    } catch (e) {
-        console.error('Error fetching federations:', e);
-        return [];
-    }
-}
 
-function AddFederationForm({ refetch }) {
+function AddFederationForm(props: { refetch: () => void }) {
     const i18n = useI18n();
-    const [state, actions] = useMegaStore();
+    const [state, _actions] = useMegaStore();
     const [error, setError] = createSignal<Error>();
     const [success, setSuccess] = createSignal("");
-    const [federationData, setFederationData] = createSignal({ federation_code: "" });
-    const [isDirty, setIsDirty] = createSignal(false);
-    const [isValid, setIsValid] = createSignal(false);
 
     const [feedbackForm, { Form, Field }] = createForm<FederationForm>({
         initialValues: {
@@ -53,52 +43,49 @@ function AddFederationForm({ refetch }) {
         }
     });
 
-    const handleInputChange = (value) => {
+    const handleSubmit: SubmitHandler<FederationForm> = async (
-        setFederationData({ federation_code: value });
+        f: FederationForm
-        setIsDirty(true);
+    ) => {
-        validateForm(value);
+        setSuccess("");
-    };
+        setError(undefined);
-
+        try {
-    const validateForm = (value) => {
+            const federation_code = f.federation_code.trim();
-        const isValid = value.trim().length > 0; // Add more validation logic as needed
+            const newFederation =
-        setIsValid(isValid);
+                await state.mutiny_wallet?.new_federation(federation_code);
-    };
+            console.log("New federation added:", newFederation);
-
+            setSuccess(
-
+                i18n.t("settings.manage_federations.federation_added_success")
-const handleSubmit: SubmitHandler<FederationForm> = async (f: FederationForm) => {
+            );
-    try {
+            await props.refetch();
-        if (!isValid()) {
+        } catch (e) {
-            setError(new Error("Form is invalid"));
+            console.error("Error submitting federation:", e);
-            return;
+            setError(eify(e));
         }
-
+    };
-        const federation_code = federationData().federation_code.trim();
-        const newFederation = await state.mutiny_wallet?.new_federation(federation_code);
-        console.log('New federation added:', newFederation);
-        setSuccess("Federation added successfully!");
-        setFederationData({ federation_code: "" }); // Reset the form data
-
-        // Now, refetch federations
-        console.log('Refetching federations...');
-        await refetch();
-    } catch (e) {
-        console.error('Error submitting federation:', e);
-        setError(eify(e));
-    }
-};
 
     return (
         <Form onSubmit={handleSubmit}>
             <VStack>
-                <Field name="federation_code">
+                <Field
+                    name="federation_code"
+                    validate={[
+                        required(
+                            i18n.t(
+                                "settings.manage_federations.federation_code_required"
+                            )
+                        )
+                    ]}
+                >
                     {(field, props) => (
                         <TextField
                             {...props}
-                            value={federationData().federation_code}
+                            {...field}
-                            onInput={(e) => handleInputChange(e.currentTarget.value)}
                             error={field.error}
-                            label={i18n.t("settings.manage_federations.federation_code_label")}
+                            label={i18n.t(
+                                "settings.manage_federations.federation_code_label"
+                            )}
                             placeholder="fedi1..."
+                            required
                         />
                     )}
                 </Field>
@@ -110,7 +97,7 @@ const handleSubmit: SubmitHandler<FederationForm> = async (f: FederationForm) =>
                 </Show>
                 <Button
                     loading={false}
-                    disabled={!isDirty() || !isValid()}
+                    disabled={!feedbackForm.touched || feedbackForm.invalid}
                     intent="blue"
                     type="submit"
                 >
@@ -121,15 +108,18 @@ const handleSubmit: SubmitHandler<FederationForm> = async (f: FederationForm) =>
     );
 }
 
-function ListAndRemoveFederations({ federations, refetch }) {
+function ListAndRemoveFederations(props: {
+    federations?: MutinyFederationIdentity[];
+    refetch: () => void;
+}) {
     const i18n = useI18n();
     const [state, _actions] = useMegaStore();
     const [error, setError] = createSignal<Error>();
 
-    const removeFederation = async (federationId) => {
+    const removeFederation = async (federationId: string) => {
         try {
             await state.mutiny_wallet?.remove_federation(federationId);
-            refetch();
+            props.refetch();
         } catch (e) {
             console.error(e);
             setError(eify(e));
@@ -138,19 +128,45 @@ function ListAndRemoveFederations({ federations, refetch }) {
 
     return (
         <VStack>
-            <For each={federations() ?? []}>
+            <For each={props.federations ?? []}>
-                {(federationId) => (
+                {(fed) => (
                     <FancyCard>
-                        <KeyValue key="Federation ID">
+                        <Show when={fed.federation_name}>
-                            <MiniStringShower text={federationId} />
+                            <header class={`font-semibold`}>
+                                {fed.federation_name}
+                            </header>
+                        </Show>
+                        <Show when={fed.welcome_message}>
+                            <p>{fed.welcome_message}</p>
+                        </Show>
+                        <Show when={fed.federation_expiry_timestamp}>
+                            <KeyValue
+                                key={i18n.t(
+                                    "settings.manage_federations.expires"
+                                )}
+                            >
+                                <time>
+                                    {timeAgo(fed.federation_expiry_timestamp)}
+                                </time>
+                            </KeyValue>
+                        </Show>
+                        <KeyValue
+                            key={i18n.t(
+                                "settings.manage_federations.federation_id"
+                            )}
+                        >
+                            <MiniStringShower text={fed.federation_id} />
                         </KeyValue>
-                        <Button intent="red" onClick={() => removeFederation(federationId)}>
+                        <Button
+                            intent="red"
+                            onClick={() => removeFederation(fed.federation_id)}
+                        >
                             {i18n.t("settings.manage_federations.remove")}
                         </Button>
                     </FancyCard>
                 )}
             </For>
-            <Show when={(federations() ?? []).length === 0}>
+            <Show when={(props.federations ?? []).length === 0}>
                 <div>No federations available.</div>
             </Show>
             <Show when={error()}>
@@ -162,16 +178,18 @@ function ListAndRemoveFederations({ federations, refetch }) {
 
 export function ManageFederations() {
     const i18n = useI18n();
-    const [state, actions] = useMegaStore();
+    const [state, _actions] = useMegaStore();
 
-    const fetchFederations = async () => {
+    async function fetchFederations() {
         try {
-            return await state.mutiny_wallet?.list_federations() ?? [];
+            const result =
+                (await state.mutiny_wallet?.list_federations()) as MutinyFederationIdentity[];
+            return result ?? [];
         } catch (e) {
             console.error(e);
             return [];
         }
-    };
+    }
 
     const [federations, { refetch }] = createResource(fetchFederations);
 
@@ -179,10 +197,18 @@ export function ManageFederations() {
         <MutinyWalletGuard>
             <SafeArea>
                 <DefaultMain>
-                    <BackLink href="/settings" title={i18n.t("settings.header")} />
+                    <BackLink
-                    <LargeHeader>{i18n.t("settings.manage_federations.title")}</LargeHeader>
+                        href="/settings"
-		    <AddFederationForm refetch={refetch} federations={federations} />
+                        title={i18n.t("settings.header")}
-                    <ListAndRemoveFederations federations={federations} refetch={refetch} />
+                    />
+                    <LargeHeader>
+                        {i18n.t("settings.manage_federations.title")}
+                    </LargeHeader>
+                    <AddFederationForm refetch={refetch} />
+                    <ListAndRemoveFederations
+                        federations={federations.latest}
+                        refetch={refetch}
+                    />
                 </DefaultMain>
                 <NavBar activeTab="settings" />
             </SafeArea>