Add federation balance to home screen

src/assets/icons/community.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512">
+    <path fill="white" d="M12,17a4,4,0,1,1,4-4A4,4,0,0,1,12,17Zm6,4a3,3,0,0,0-3-3H9a3,3,0,0,0-3,3v3H18ZM18,8a4,4,0,1,1,4-4A4,4,0,0,1,18,8ZM6,8a4,4,0,1,1,4-4A4,4,0,0,1,6,8Zm0,5A5.968,5.968,0,0,1,7.537,9H3a3,3,0,0,0-3,3v3H6.349A5.971,5.971,0,0,1,6,13Zm11.651,2H24V12a3,3,0,0,0-3-3H16.463a5.952,5.952,0,0,1,1.188,6Z"/>
+</svg>

src/components/Amount.tsx

@@ -2,6 +2,7 @@ import { Show } from "solid-js";
 
 import bolt from "~/assets/icons/bolt.svg";
 import chain from "~/assets/icons/chain.svg";
+import community from "~/assets/icons/community.svg";
 import { useI18n } from "~/i18n/context";
 import { useMegaStore } from "~/state/megaStore";
 import { satsToFormattedFiat } from "~/utils";
@@ -15,7 +16,7 @@ function prettyPrintAmount(n?: number | bigint): string {
 
 export function AmountSats(props: {
     amountSats: bigint | number | undefined;
-    icon?: "lightning" | "chain" | "plus" | "minus";
+    icon?: "lightning" | "community" | "chain" | "plus" | "minus";
     denominationSize?: "sm" | "lg" | "xl";
 }) {
     const i18n = useI18n();
@@ -24,6 +25,9 @@ export function AmountSats(props: {
             <Show when={props.icon === "lightning"}>
                 <img src={bolt} alt="lightning" class="h-[18px]" />
             </Show>
+            <Show when={props.icon === "community"}>
+                <img src={community} alt="community" class="h-[18px]" />
+            </Show>
             <Show when={props.icon === "chain"}>
                 <img src={chain} alt="chain" class="h-[18px]" />
             </Show>

src/components/BalanceBox.tsx

@@ -42,6 +42,7 @@ export function BalanceBox(props: { loading?: boolean }) {
     const emptyBalance = () =>
         (state.balance?.confirmed || 0n) === 0n &&
         (state.balance?.lightning || 0n) === 0n &&
+        (state.balance?.federation || 0n) === 0n &&
         (state.balance?.force_close || 0n) === 0n &&
         (state.balance?.unconfirmed || 0n) === 0n;
 
@@ -91,6 +92,40 @@ export function BalanceBox(props: { loading?: boolean }) {
                     </Switch>
                 </Show>
 
+                <hr class="my-2 border-m-grey-750" />
+                <Show when={!props.loading} fallback={<LoadingShimmer />}>
+                    <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?.lightning + state.balance?.federation || 0
+                                        }
+                                        denominationSize="sm"
+                                    />
+                                </div>
+                            </div>
+                        </Match>
+                    </Switch>
+                </Show>
+
                 <hr class="my-2 border-m-grey-750" />
                 <Show when={!props.loading} fallback={<LoadingShimmer />}>
                     <div class="flex justify-between">