Skip to content

Commit

Permalink
add avatar and fiddle with balance box
Browse files Browse the repository at this point in the history
  • Loading branch information
@futurepaul
futurepaul committed Jan 30, 2024
1 parent ea7179c commit 1da6f40
Show file tree
Hide file tree
Showing 6 changed files with 116 additions and 85 deletions.
Binary file added src/assets/generic-avatar.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
177 changes: 98 additions & 79 deletions src/components/BalanceBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import {
AmountSats,
FancyCard,
Indicator,
InfoBox
InfoBox,
VStack
} from "~/components";
import { useI18n } from "~/i18n/context";
import { useMegaStore } from "~/state/megaStore";
Expand Down Expand Up @@ -68,109 +69,127 @@ export function BalanceBox(props: { loading?: boolean; small?: boolean }) {
</Show>
</Match>
<Match when={true}>
<FancyCard>
{/* <button onClick={() => setMinimized(true)}>Minimize</button> */}
<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}>
<VStack>
<FancyCard title="Lightning">
{/* <button onClick={() => setMinimized(true)}>Minimize</button> */}
<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?.lightning ||
0
}
icon="lightning"
denominationSize="lg"
/>
</div>
<div class="text-lg text-white/70">
<AmountFiat
amountSats={
state.balance?.lightning ||
0
}
denominationSize="sm"
/>
</div>
</div>
</Match>
</Switch>
</Show>
</FancyCard>
<Show when={state.federations && state.federations.length}>
<FancyCard title="Fedimint">
<Show
when={!props.loading}
fallback={<LoadingShimmer />}
>
<hr class="my-2 border-m-grey-750" />
<div class="flex flex-col gap-1">
<div class="text-2xl">
<AmountSats
amountSats={
state.balance?.lightning || 0
state.balance?.federation || 0
}
icon="lightning"
icon="community"
denominationSize="lg"
/>
</div>
<div class="text-lg text-white/70">
<AmountFiat
amountSats={
state.balance?.lightning || 0
state.balance?.federation || 0n
}
denominationSize="sm"
/>
</div>
</div>
</Match>
</Switch>
</Show>
</FancyCard>
</Show>
<Show when={state.federations && state.federations.length}>
<FancyCard title="On-chain">
{/* <hr class="my-2 border-m-grey-750" /> */}
<Show
when={!props.loading}
fallback={<LoadingShimmer />}
>
<hr class="my-2 border-m-grey-750" />
<div class="flex flex-col gap-1">
<div class="text-2xl">
<AmountSats
amountSats={
state.balance?.federation || 0
}
icon="community"
denominationSize="lg"
/>
<div class="flex justify-between">
<div class="flex flex-col gap-1">
<div class="text-2xl">
<AmountSats
amountSats={totalOnchain()}
icon="chain"
denominationSize="lg"
/>
</div>
<div class="text-lg text-white/70">
<AmountFiat
amountSats={totalOnchain()}
denominationSize="sm"
/>
</div>
</div>
<div class="text-lg text-white/70">
<AmountFiat
amountSats={
state.balance?.federation || 0n
}
denominationSize="sm"
/>
<div class="flex flex-col items-end justify-between gap-1">
<Show
when={state.balance?.unconfirmed != 0n}
>
<Indicator>
{i18n.t("common.pending")}
</Indicator>
</Show>
<Show
when={state.balance?.unconfirmed === 0n}
>
<div />
</Show>
<Show when={usableOnchain() > 0n}>
<div class="self-end justify-self-end">
<A href="/swap" class={STYLE}>
<img
src={shuffle}
alt="swap"
class="h-6 w-6"
/>
</A>
</div>
</Show>
</div>
</div>
</Show>
</Show>
<hr class="my-2 border-m-grey-750" />
<Show when={!props.loading} fallback={<LoadingShimmer />}>
<div class="flex justify-between">
<div class="flex flex-col gap-1">
<div class="text-2xl">
<AmountSats
amountSats={totalOnchain()}
icon="chain"
denominationSize="lg"
/>
</div>
<div class="text-lg text-white/70">
<AmountFiat
amountSats={totalOnchain()}
denominationSize="sm"
/>
</div>
</div>
<div class="flex flex-col items-end justify-between gap-1">
<Show when={state.balance?.unconfirmed != 0n}>
<Indicator>
{i18n.t("common.pending")}
</Indicator>
</Show>
<Show when={state.balance?.unconfirmed === 0n}>
<div />
</Show>
<Show when={usableOnchain() > 0n}>
<div class="self-end justify-self-end">
<A href="/swap" class={STYLE}>
<img
src={shuffle}
alt="swap"
class="h-6 w-6"
/>
</A>
</div>
</Show>
</div>
</div>
</Show>
</FancyCard>
</FancyCard>
</VStack>
</Match>
</Switch>
);
Expand Down
4 changes: 4 additions & 0 deletions src/components/LabelCircle.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { createResource, createSignal, JSX, Match, Switch } from "solid-js";
import { Dynamic } from "solid-js/web";

import avatar from "~/assets/generic-avatar.jpg";
import off from "~/assets/icons/download-channel.svg";
import on from "~/assets/icons/upload-channel.svg";
import { HackActivityType } from "~/components";
Expand Down Expand Up @@ -88,6 +89,9 @@ export function LabelCircle(props: {
<Match when={props.channel === "ChannelClose"}>
<img src={off} alt="channel close" />
</Match>
<Match when={text() === "?"}>
<img src={avatar} alt="avatar" />
</Match>
<Match when={true}>{text()}</Match>
</Switch>
</Circle>
Expand Down
11 changes: 8 additions & 3 deletions src/components/layout/Misc.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,14 @@ export const FancyCard: ParentComponent<{
tag?: JSX.Element;
}> = (props) => {
return (
<div class="flex flex-col gap-2 rounded-xl border border-b-4 border-black/50 bg-m-grey-800 p-4 shadow-fancy-card">
{props.children}
</div>
<VStack smallgap>
<div class="mt-2 pl-4">
<SmallHeader>{props.title}</SmallHeader>
</div>
<div class="flex flex-col gap-2 rounded-xl border border-b-4 border-black/50 bg-m-grey-900 p-4 shadow-fancy-card">
{props.children}
</div>
</VStack>
);
};

Expand Down
7 changes: 5 additions & 2 deletions src/routes/Main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,9 +138,12 @@ export function WalletHeader(props: { loading: boolean }) {
image_url={profileImage()}
onClick={() => navigate("/profile")}
/>
<div class="crt relative grid justify-center rounded-lg border-b border-t border-b-white/10 border-t-white/40 bg-black px-4 py-2">
<button
onClick={() => navigate("/profile")}
class="crt relative grid justify-center rounded-lg border-b border-t border-b-white/10 border-t-white/40 bg-black px-4 py-2"
>
<BalanceBox small loading={state.wallet_loading} />
</div>
</button>
<Circle onClick={() => navigate("/settings")}>
<img
src="/mutiny-pixel-m.png"
Expand Down
2 changes: 1 addition & 1 deletion src/routes/Profile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ export function Profile() {
</A>
</Show>
</div>
<LargeHeader>Accounts</LargeHeader>
{/* <LargeHeader>Accounts</LargeHeader> */}
<BalanceBox loading={state.wallet_loading} />
<div class="h-4" />
</DefaultMain>
Expand Down

0 comments on commit 1da6f40

Please sign in to comment.