aljaz/mutiny-web
1
0
Fork 0
mirror of https://github.com/aljazceru/mutiny-web.git synced 2025-12-18 06:44:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add federation balance to home screen

Browse Source
This commit is contained in:
Tony Giorgio
2023-11-30 22:28:57 -06:00
committed by Tony Giorgio
parent 0144da4320
commit fe3acb5974
3 changed files with 44 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/icons/community.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 481 B

6
src/components/Amount.tsx
View File

@@ -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>

35
src/components/BalanceBox.tsx
View File

@@ -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">