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

styling pass

Browse Source
This commit is contained in:
Paul Miller
2023-04-15 11:01:40 -05:00
parent d36adad34c
commit 3c94312a9f
17 changed files with 230 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/BalanceBox.tsx
View File

@@ -1,4 +1,4 @@
import { createResource, Show, Suspense } from "solid-js";
import { createResource, createSignal, Show, Suspense } from "solid-js";
import { Button, ButtonLink, FancyCard } from "~/components/layout";
import { useMegaStore } from "~/state/megaStore";
import { Amount } from "./Amount";
@@ -10,46 +10,68 @@ function prettyPrintAmount(n?: number | bigint): string {
return n.toLocaleString()
}
function SyncingIndicator() {
return (
<div class="box-border animate-pulse px-2 py-1 -my-1 bg-white/70 rounded text-xs uppercase text-black">Syncing</div>
)
}
export default function BalanceBox() {
const [state, _] = useMegaStore();
const fetchBalance = async () => {
console.log("Refetching balance");
const fetchOnchainBalance = async () => {
console.log("Refetching onchain balance");
await state.node_manager?.sync();
const balance = await state.node_manager?.get_balance();
return balance
};
const [balance, { refetch: refetchBalance }] = createResource(fetchBalance);
// TODO: it's hacky to do these separately, but ln doesn't need the sync so I don't want to wait
const fetchLnBalance = async () => {
console.log("Refetching ln balance");
const balance = await state.node_manager?.get_balance();
return balance
};
const [onChainBalance, { refetch: refetchOnChainBalance }] = createResource(fetchOnchainBalance);
const [lnBalance, { refetch: refetchLnBalance }] = createResource(fetchLnBalance);
function refetchBalance() {
refetchLnBalance();
refetchOnChainBalance();
}
return (
<>
<FancyCard title="Lightning">
<Suspense fallback={<Amount amountSats={0} showFiat loading={true} />}>
<Amount amountSats={balance()?.lightning} showFiat loading={balance.loading} />
<Show when={lnBalance()}>
<Amount amountSats={lnBalance()?.lightning} showFiat />
</Show>
</Suspense>
</FancyCard>
<div class="flex gap-2 py-4">
<ButtonLink href="/send" intent="green">Send</ButtonLink>
<ButtonLink href="/receive" intent="blue">Receive</ButtonLink>
</div>
<FancyCard title="On-Chain">
<FancyCard title="On-Chain" tag={onChainBalance.loading && <SyncingIndicator />}>
<Suspense fallback={<Amount amountSats={0} showFiat loading={true} />}>
<Amount amountSats={balance()?.confirmed} showFiat loading={balance.loading} />
<div onClick={refetchBalance}>
<Amount amountSats={onChainBalance()?.confirmed} showFiat loading={onChainBalance.loading} />
</div>
</Suspense>
<Suspense>
<Show when={balance()?.unconfirmed}>
<Show when={onChainBalance()?.unconfirmed}>
<div class="flex flex-col gap-2">
<header class='text-sm font-semibold uppercase text-white/50'>
Unconfirmed Balance
</header>
<div class="text-white/50">
{prettyPrintAmount(balance()?.unconfirmed)} <span class='text-sm'>SATS</span>
{prettyPrintAmount(onChainBalance()?.unconfirmed)} <span class='text-sm'>SATS</span>
</div>
</div>
</Show>
</Suspense>
<Button onClick={() => refetchBalance()}>Sync</Button>
</FancyCard>
</>
)