Skip to content
This repository was archived by the owner on Apr 21, 2025. It is now read-only.

Commit 1da6f40

Browse files
futurepaulfuturepaul
committed
add avatar and fiddle with balance box
1 parent ea7179c commit 1da6f40

File tree

6 files changed

+116
-85
lines changed

6 files changed

+116
-85
lines changed

‎src/assets/generic-avatar.jpg‎

2.32 KB
Loading

‎src/components/BalanceBox.tsx‎

Lines changed: 98 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import {
77
AmountSats,
88
FancyCard,
99
Indicator,
10-
InfoBox
10+
InfoBox,
11+
VStack
1112
} from "~/components";
1213
import { useI18n } from "~/i18n/context";
1314
import { useMegaStore } from "~/state/megaStore";
@@ -68,109 +69,127 @@ export function BalanceBox(props: { loading?: boolean; small?: boolean }) {
6869
</Show>
6970
</Match>
7071
<Match when={true}>
71-
<FancyCard>
72-
{/* <button onClick={() => setMinimized(true)}>Minimize</button> */}
73-
<Show when={!props.loading} fallback={<LoadingShimmer />}>
74-
<Switch>
75-
<Match when={state.safe_mode}>
76-
<div class="flex flex-col gap-1">
77-
<InfoBox accent="red">
78-
{i18n.t("common.error_safe_mode")}
79-
</InfoBox>
80-
</div>
81-
</Match>
82-
<Match when={true}>
72+
<VStack>
73+
<FancyCard title="Lightning">
74+
{/* <button onClick={() => setMinimized(true)}>Minimize</button> */}
75+
<Show
76+
when={!props.loading}
77+
fallback={<LoadingShimmer />}
78+
>
79+
<Switch>
80+
<Match when={state.safe_mode}>
81+
<div class="flex flex-col gap-1">
82+
<InfoBox accent="red">
83+
{i18n.t("common.error_safe_mode")}
84+
</InfoBox>
85+
</div>
86+
</Match>
87+
<Match when={true}>
88+
<div class="flex flex-col gap-1">
89+
<div class="text-2xl">
90+
<AmountSats
91+
amountSats={
92+
state.balance?.lightning ||
93+
0
94+
}
95+
icon="lightning"
96+
denominationSize="lg"
97+
/>
98+
</div>
99+
<div class="text-lg text-white/70">
100+
<AmountFiat
101+
amountSats={
102+
state.balance?.lightning ||
103+
0
104+
}
105+
denominationSize="sm"
106+
/>
107+
</div>
108+
</div>
109+
</Match>
110+
</Switch>
111+
</Show>
112+
</FancyCard>
113+
<Show when={state.federations && state.federations.length}>
114+
<FancyCard title="Fedimint">
115+
<Show
116+
when={!props.loading}
117+
fallback={<LoadingShimmer />}
118+
>
119+
<hr class="my-2 border-m-grey-750" />
83120
<div class="flex flex-col gap-1">
84121
<div class="text-2xl">
85122
<AmountSats
86123
amountSats={
87-
state.balance?.lightning || 0
124+
state.balance?.federation || 0
88125
}
89-
icon="lightning"
126+
icon="community"
90127
denominationSize="lg"
91128
/>
92129
</div>
93130
<div class="text-lg text-white/70">
94131
<AmountFiat
95132
amountSats={
96-
state.balance?.lightning || 0
133+
state.balance?.federation || 0n
97134
}
98135
denominationSize="sm"
99136
/>
100137
</div>
101138
</div>
102-
</Match>
103-
</Switch>
139+
</Show>
140+
</FancyCard>
104141
</Show>
105-
<Show when={state.federations && state.federations.length}>
142+
<FancyCard title="On-chain">
143+
{/* <hr class="my-2 border-m-grey-750" /> */}
106144
<Show
107145
when={!props.loading}
108146
fallback={<LoadingShimmer />}
109147
>
110-
<hr class="my-2 border-m-grey-750" />
111-
<div class="flex flex-col gap-1">
112-
<div class="text-2xl">
113-
<AmountSats
114-
amountSats={
115-
state.balance?.federation || 0
116-
}
117-
icon="community"
118-
denominationSize="lg"
119-
/>
148+
<div class="flex justify-between">
149+
<div class="flex flex-col gap-1">
150+
<div class="text-2xl">
151+
<AmountSats
152+
amountSats={totalOnchain()}
153+
icon="chain"
154+
denominationSize="lg"
155+
/>
156+
</div>
157+
<div class="text-lg text-white/70">
158+
<AmountFiat
159+
amountSats={totalOnchain()}
160+
denominationSize="sm"
161+
/>
162+
</div>
120163
</div>
121-
<div class="text-lg text-white/70">
122-
<AmountFiat
123-
amountSats={
124-
state.balance?.federation || 0n
125-
}
126-
denominationSize="sm"
127-
/>
164+
<div class="flex flex-col items-end justify-between gap-1">
165+
<Show
166+
when={state.balance?.unconfirmed != 0n}
167+
>
168+
<Indicator>
169+
{i18n.t("common.pending")}
170+
</Indicator>
171+
</Show>
172+
<Show
173+
when={state.balance?.unconfirmed === 0n}
174+
>
175+
<div />
176+
</Show>
177+
<Show when={usableOnchain() > 0n}>
178+
<div class="self-end justify-self-end">
179+
<A href="/swap" class={STYLE}>
180+
<img
181+
src={shuffle}
182+
alt="swap"
183+
class="h-6 w-6"
184+
/>
185+
</A>
186+
</div>
187+
</Show>
128188
</div>
129189
</div>
130190
</Show>
131-
</Show>
132-
<hr class="my-2 border-m-grey-750" />
133-
<Show when={!props.loading} fallback={<LoadingShimmer />}>
134-
<div class="flex justify-between">
135-
<div class="flex flex-col gap-1">
136-
<div class="text-2xl">
137-
<AmountSats
138-
amountSats={totalOnchain()}
139-
icon="chain"
140-
denominationSize="lg"
141-
/>
142-
</div>
143-
<div class="text-lg text-white/70">
144-
<AmountFiat
145-
amountSats={totalOnchain()}
146-
denominationSize="sm"
147-
/>
148-
</div>
149-
</div>
150-
<div class="flex flex-col items-end justify-between gap-1">
151-
<Show when={state.balance?.unconfirmed != 0n}>
152-
<Indicator>
153-
{i18n.t("common.pending")}
154-
</Indicator>
155-
</Show>
156-
<Show when={state.balance?.unconfirmed === 0n}>
157-
<div />
158-
</Show>
159-
<Show when={usableOnchain() > 0n}>
160-
<div class="self-end justify-self-end">
161-
<A href="/swap" class={STYLE}>
162-
<img
163-
src={shuffle}
164-
alt="swap"
165-
class="h-6 w-6"
166-
/>
167-
</A>
168-
</div>
169-
</Show>
170-
</div>
171-
</div>
172-
</Show>
173-
</FancyCard>
191+
</FancyCard>
192+
</VStack>
174193
</Match>
175194
</Switch>
176195
);

‎src/components/LabelCircle.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { createResource, createSignal, JSX, Match, Switch } from "solid-js";
22
import { Dynamic } from "solid-js/web";
33

4+
import avatar from "~/assets/generic-avatar.jpg";
45
import off from "~/assets/icons/download-channel.svg";
56
import on from "~/assets/icons/upload-channel.svg";
67
import { HackActivityType } from "~/components";
@@ -88,6 +89,9 @@ export function LabelCircle(props: {
8889
<Match when={props.channel === "ChannelClose"}>
8990
<img src={off} alt="channel close" />
9091
</Match>
92+
<Match when={text() === "?"}>
93+
<img src={avatar} alt="avatar" />
94+
</Match>
9195
<Match when={true}>{text()}</Match>
9296
</Switch>
9397
</Circle>

‎src/components/layout/Misc.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,14 @@ export const FancyCard: ParentComponent<{
6666
tag?: JSX.Element;
6767
}> = (props) => {
6868
return (
69-
<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">
70-
{props.children}
71-
</div>
69+
<VStack smallgap>
70+
<div class="mt-2 pl-4">
71+
<SmallHeader>{props.title}</SmallHeader>
72+
</div>
73+
<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">
74+
{props.children}
75+
</div>
76+
</VStack>
7277
);
7378
};
7479

‎src/routes/Main.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,9 +138,12 @@ export function WalletHeader(props: { loading: boolean }) {
138138
image_url={profileImage()}
139139
onClick={() => navigate("/profile")}
140140
/>
141-
<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">
141+
<button
142+
onClick={() => navigate("/profile")}
143+
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"
144+
>
142145
<BalanceBox small loading={state.wallet_loading} />
143-
</div>
146+
</button>
144147
<Circle onClick={() => navigate("/settings")}>
145148
<img
146149
src="/mutiny-pixel-m.png"

‎src/routes/Profile.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export function Profile() {
8383
</A>
8484
</Show>
8585
</div>
86-
<LargeHeader>Accounts</LargeHeader>
86+
{/* <LargeHeader>Accounts</LargeHeader> */}
8787
<BalanceBox loading={state.wallet_loading} />
8888
<div class="h-4" />
8989
</DefaultMain>

0 commit comments

Comments
 (0)