aljaz/mutiny-web
1
0
Fork 0
mirror of https://github.com/aljazceru/mutiny-web.git synced 2025-12-19 07:14:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

format everything with prettier

Browse Source
This commit is contained in:
Paul Miller
2023-06-06 09:56:59 -05:00
parent 2d99da5245
commit 53272434d8
93 changed files with 5806 additions and 4364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/components/BalanceBox.tsx
View File

@@ -6,71 +6,90 @@ import { A, useNavigate } from "solid-start";
import shuffle from "~/assets/icons/shuffle.svg";
export function LoadingShimmer() {
return (
<div class="flex flex-col gap-2 animate-pulse">
<h1 class="text-4xl font-light">
<div class="w-[12rem] rounded bg-neutral-700 h-[2.5rem]" />
</h1>
<h2 class="text-xl font-light text-white/70">
<div class="w-[8rem] rounded bg-neutral-700 h-[1.75rem]" />
</h2>
</div>
);
return (
<div class="flex flex-col gap-2 animate-pulse">
<h1 class="text-4xl font-light">
<div class="w-[12rem] rounded bg-neutral-700 h-[2.5rem]" />
</h1>
<h2 class="text-xl font-light text-white/70">
<div class="w-[8rem] rounded bg-neutral-700 h-[1.75rem]" />
</h2>
</div>
);
}
const STYLE =
"px-2 py-1 rounded-xl border border-neutral-400 text-sm flex gap-2 items-center font-semibold";
"px-2 py-1 rounded-xl border border-neutral-400 text-sm flex gap-2 items-center font-semibold";
export default function BalanceBox(props: { loading?: boolean }) {
const [state, _actions] = useMegaStore();
const [state, _actions] = useMegaStore();
const emptyBalance = () =>
(state.balance?.confirmed || 0n) === 0n &&
(state.balance?.lightning || 0n) === 0n &&
(state.balance?.force_close || 0n) === 0n &&
(state.balance?.unconfirmed || 0n) === 0n;
const emptyBalance = () =>
(state.balance?.confirmed || 0n) === 0n &&
(state.balance?.lightning || 0n) === 0n &&
(state.balance?.force_close || 0n) === 0n &&
(state.balance?.unconfirmed || 0n) === 0n;
const navigate = useNavigate();
const navigate = useNavigate();
const totalOnchain = () => (state.balance?.confirmed || 0n) + (state.balance?.unconfirmed || 0n) + (state.balance?.force_close || 0n);
const totalOnchain = () =>
(state.balance?.confirmed || 0n) +
(state.balance?.unconfirmed || 0n) +
(state.balance?.force_close || 0n);
return (
<>
<FancyCard title="Lightning">
<Show when={!props.loading} fallback={<LoadingShimmer />}>
<Amount amountSats={state.balance?.lightning || 0} showFiat />
</Show>
</FancyCard>
return (
<>
<FancyCard title="Lightning">
<Show when={!props.loading} fallback={<LoadingShimmer />}>
<Amount
amountSats={state.balance?.lightning || 0}
showFiat
/>
</Show>
</FancyCard>
<FancyCard
title="On-Chain"
subtitle={((Number(state.balance?.unconfirmed) || 0) + (Number(state.balance?.force_close) || 0)) ? "Unconfirmed" : undefined}
>
<Show when={!props.loading} fallback={<LoadingShimmer />}>
<div class="flex justify-between">
<Amount amountSats={totalOnchain()} showFiat />
<Show when={!emptyBalance()}>
<div class="self-end justify-self-end">
<A href="/swap" class={STYLE}>
<img src={shuffle} alt="swap" class="h-8 w-8" />
</A>
</div>
</Show>
</div>
</Show>
</FancyCard>
<div class="flex gap-2 py-4">
<Button
onClick={() => navigate("/send")}
disabled={emptyBalance() || props.loading}
intent="green"
>
Send
</Button>
<Button onClick={() => navigate("/receive")} disabled={props.loading} intent="blue">
Receive
</Button>
</div>
</>
);
<FancyCard
title="On-Chain"
subtitle={
(Number(state.balance?.unconfirmed) || 0) +
(Number(state.balance?.force_close) || 0)
? "Unconfirmed"
: undefined
}
>
<Show when={!props.loading} fallback={<LoadingShimmer />}>
<div class="flex justify-between">
<Amount amountSats={totalOnchain()} showFiat />
<Show when={!emptyBalance()}>
<div class="self-end justify-self-end">
<A href="/swap" class={STYLE}>
<img
src={shuffle}
alt="swap"
class="h-8 w-8"
/>
</A>
</div>
</Show>
</div>
</Show>
</FancyCard>
<div class="flex gap-2 py-4">
<Button
onClick={() => navigate("/send")}
disabled={emptyBalance() || props.loading}
intent="green"
>
Send
</Button>
<Button
onClick={() => navigate("/receive")}
disabled={props.loading}
intent="blue"
>
Receive
</Button>
</div>
</>
);
}