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

fancy amount editable

Browse Source
This commit is contained in:
Paul Miller
2023-04-14 10:30:45 -05:00
parent 222909b308
commit 8cbdf8edd4
8 changed files with 313 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/BalanceBox.tsx
View File

@@ -1,7 +1,7 @@
import { Motion, Presence } from "@motionone/solid";
import { createResource, Show, Suspense } from "solid-js";
import { ButtonLink, SmallHeader } from "~/components/layout";
import { Button, ButtonLink, FancyCard, LoadingSpinner, SmallHeader } from "~/components/layout";
import { useMegaStore } from "~/state/megaStore";
import { Amount } from "./Amount";
@@ -25,46 +25,34 @@ export default function BalanceBox() {
const [balance, { refetch: refetchBalance }] = createResource(fetchBalance);
return (
<Presence>
<Motion
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.5, easing: [0.87, 0, 0.13, 1] }}
>
<div class='border border-white rounded-xl border-b-4 p-4 flex flex-col gap-2'>
<SmallHeader>
Lightning Balance
</SmallHeader>
<div onClick={refetchBalance}>
<Suspense fallback={"..."}>
<Show when={balance()}>
<div class="flex flex-col gap-4">
<Amount amountSats={balance()?.lightning} showFiat />
<SmallHeader>
On-Chain Balance
</SmallHeader>
<Amount amountSats={balance()?.confirmed} showFiat />
<Show when={balance()?.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-xl'>SAT</span>
</div>
</div>
</Show>
</div>
</Show>
</Suspense>
</div>
<div class="flex gap-2 py-4">
<ButtonLink href="/send" intent="green">Send</ButtonLink>
<ButtonLink href="/receive" intent="blue">Receive</ButtonLink>
</div>
</div>
</Motion>
</Presence>
<>
<FancyCard title="Lightning">
<Suspense fallback={<Amount amountSats={0} showFiat loading={true} />}>
<Amount amountSats={balance()?.lightning} showFiat loading={balance.loading} />
</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">
<Suspense fallback={<Amount amountSats={0} showFiat loading={true} />}>
<Amount amountSats={balance()?.confirmed} showFiat loading={balance.loading} />
</Suspense>
<Suspense>
<Show when={balance()?.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>
</div>
</div>
</Show>
</Suspense>
<Button onClick={() => refetchBalance()}>Sync</Button>
</FancyCard>
</>
)
}