From 1da6f40dbfcdb3c926eacc102b9580afdaeabe22 Mon Sep 17 00:00:00 2001
From: Paul Miller <paul@paul.lol>
Date: Tue, 30 Jan 2024 15:43:46 +0000
Subject: [PATCH] add avatar and fiddle with balance box

---
 src/assets/generic-avatar.jpg  | Bin 0 -> 2376 bytes
 src/components/BalanceBox.tsx  | 177 ++++++++++++++++++---------------
 src/components/LabelCircle.tsx |   4 +
 src/components/layout/Misc.tsx |  11 +-
 src/routes/Main.tsx            |   7 +-
 src/routes/Profile.tsx         |   2 +-
 6 files changed, 116 insertions(+), 85 deletions(-)
 create mode 100644 src/assets/generic-avatar.jpg

diff --git a/src/assets/generic-avatar.jpg b/src/assets/generic-avatar.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..53004a9c4d3a1b39665975c2ea19601e01d47865
GIT binary patch
literal 2376
zcmbtWc{r47AAZI#Gg)UOO^BH|l%2+sQAoCI#nG7*%96b-kz}HoV=6nvm$fWeMwupS
zE5e8@*%DHi>SP%alRf8E=X_Uxb$!?M-M@GH-OulNuIGC1`@Mee`s?)(fIetyVG3X{
z0ANsn^&#*l;QI~)1k@%d1O@o{1q4NfgrN|X#E4;_LlV0kD-NAXJEWy|C}}G0RMgbh
z*4DQ&w{mx<!T#R`)}H|kYGXfe*bcyhfx$7b^+q5C5j=3%#$Nvgl=33@kf`-Rfcn9&
zKL2;@zjxkp=n+0RxyE@u9u~o%03h%!x$gxgI;3Z0Mj{IEt%G9=3R$M~33{T=$K@y>
zQWU!N=#72{LZ7v?Oh+Bqo5=KYIpyXcX751oo!N&2B6;T|CB;9Abuml`J&ci=C~!f>
zmKz$X+P3Ree_o7t|Es0DhOmh>=i%(^*bfp~m6hX#G5FlM$3VEVvewPhbyC)}s_KbY
z&w=2%Y&5KgEUDw?5;1!O;s}TB4Yc}zIN7Bub-_u?ae3a}M7=Y%0q{)MmOmYmE6doG
zmoeKO!~}4I!`!=Rhv*q4r4l!ZR{)YRpIOkTM5nV8BwGN`>u9yw|8VrON*e&kV||`z
z8ur6d6aag321!!?(S`K>ikfU>?->C=g>#|xY~^UYv}7j$n>j1~*H1cWIk?0&FWmyt
zm;1=+vM82%bcpY4)-51edt#o`fj^GNK0}w~7{>!--|~g2G`vGdKgtwCPe9fI>CgRY
zPX}_L*SAr1S0ud`kQJCuC+}SM?(fel-me?Ci@hfR&e<3LYS?eqrmF0T153BjcW$2_
z7+7(r8uGu^Br#a=2dWv>Z`)QZ11T@|v*tf^{jN9<`bYB1>o4ZR|Ht`wG~j{ollNde
zfDg`#5k;sQqHzKL*bgGtfe0#aEo5FVM}}6Kdwh`Stnr9l5b<!ZPg->=!>#~rETHGq
zu9kSrF(YfI^KEk+1*`tHd$?!uv16{`p(o~es<EKgvv-DxlvpF4Xb@nG5R$-l<y&%W
zsSTA!lu1Zlf>&3*X}pB<$il0xBi;q(_bx)?5JB+1DIFm_==ilY`e3T;3@cFrs*Jrz
z8plk{G_k}=><XkUTtB=JS0>$TQ0^HR%fy)|wzdw(?%w0t6f15JuM@PQ;c=(j>-JHS
zPS8|aTN{Zf4-a;mu4n%7-lv|5oId_&Hw2j%zLz7zw1}fr#0H~r%JtNAPi=#>Yl39;
z#zM+g^6w(qxz$2LOeo#F6zu(__bqaY#60uNU-cqcAj>8)L9Oa(wzd9^gIso^Z1db$
zgXP$4*Gv{U>>gvNbV<YY&a9A=^kekzY(FIIS>W{H&kn0vm8oZQ!?`#L3P<6;@7~~R
z^qKLpjKRMZBB+Au4TAWzFZsjlkb`2ddS0{<4SSM?b&DPR?3wUMnRL%kSFyD|mxi?+
zjo0Ruk8&4jc}=mrGJmRjbzPOa)~U|QF)NuYt7E#R;=WjJRVAfZ=+6myyHWd!;!i|T
zP^X*Hv$Joc*y_)<s0a?)vLQneAw$4myhsEb!N>RAeJ~z4FTmh6_(atWjSipOyhGM5
zFc~d&3Afud=zhKCetTw@TL2}u`yZ>o4Irzy4d1u($F*b0I_<IrhG!G)42UE9vN$Ga
zM4?&g1L27wv!1m+IoYyeg*UHZ0W$m+-@fL^a}W9F7xJ<s<X7cqr~IAF1#p{jW9ciT
z_`&c8X;@iRPLg<GeqS1WyzoPYDl6@=_#-=KVS_+c&&yWVbg~FyyN*Svf;ryFGdMt;
zYGOpMCfw0C`|IV|freuOCW@nVv&b726}v0!!l`u$7j6_3Zn0y;YmP43`&9P6hmHOA
zL4?C)BG@(Y_yX6f(X$NlI#A>^?e+A^dw<<G@<jr>#8S%w`+PaSD|D?Au8w6HlQoI7
zr0(obZV!pyW@nB?M2is`DTiFmM6LfiGi0oM(Oqd;MT<b&lT<2<^dqDt)3R%+;*qV&
zvI4yP81!*a2Xw^BE+t(m<NNd`J|+cK6JNYUuO7n#vNc1YKWLMS9g@3gq1gxDP0sXC
z_Ao1E4VL)_60hWxokv*XANkC*rsO_Iroww2g?_WS&jXL!7E#!*{Z3Mapdu=>rRi<d
z>`<pAE@d0P`k0C`7h~U>x6oeC!g4+qrI(DiQjq7%ahdvYPOr<QTHf#{8P!n3w72wL
zRhvtgOt8`}HM5!1felNwXP9}qUC@xrDGDNNF(xhAQrAHy0#HyyB2#;*g?nhxg2L5b
zFwCe3uG(hWJU>-0WC=f;e0hAB(N{$G3py(D)jvv{mmqext3YPpTuh8*@~ZjL<}35s
zoZJKtq(iTIZSso!opqopb%hJV1=faZ9PVM6Dv81;_$tGWo+kw@rqW|<gtotJ4$C-)
zX_6#LQDWO~Tci}$05KY=T<)71t-3BTE@URu@AQc?N8bA%Jz$ZdY2Q&(HYwM^WW{x`
zMs7J<r&C%ABtFk4earXpA@mkSW5Na3YzGi8W_C2E7EdtnM1?uEX%z=Ui;!0~!VgY6
z=-CAd3iM^Y&%awjIDYOx^@Hu>!k()_x9;D=MH#h8`XF+Wtp_S1m)^*CYgyO|dy0nb
z+;+`}yxl6vutu<@J#lx9FO6R0yx7zmIHAX3CFTiFvJb)yjOx#+rDj%NjnL6eRPr|o
zO^H)~s=I2o?5;zgQ_NlDrHB3I=k#q<JzRx*n7QE;jr5t-QrdX1+3)%L*vm76{630a
z5y?CEJt}JJ>f9<?z$k9?TXB3Cw%UDbfmrQfuXo=4<T{A-+-MD$pMEF4f5}llS_=$j
P06^p~Dxhxgy<*^R9B;#t

literal 0
HcmV?d00001

diff --git a/src/components/BalanceBox.tsx b/src/components/BalanceBox.tsx
index 59a3fedf4..9c7452f76 100644
--- a/src/components/BalanceBox.tsx
+++ b/src/components/BalanceBox.tsx
@@ -7,7 +7,8 @@ import {
     AmountSats,
     FancyCard,
     Indicator,
-    InfoBox
+    InfoBox,
+    VStack
 } from "~/components";
 import { useI18n } from "~/i18n/context";
 import { useMegaStore } from "~/state/megaStore";
@@ -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>
     );
diff --git a/src/components/LabelCircle.tsx b/src/components/LabelCircle.tsx
index d2fc359ee..aacd91dd7 100644
--- a/src/components/LabelCircle.tsx
+++ b/src/components/LabelCircle.tsx
@@ -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";
@@ -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>
diff --git a/src/components/layout/Misc.tsx b/src/components/layout/Misc.tsx
index 728aaae83..5f199a096 100644
--- a/src/components/layout/Misc.tsx
+++ b/src/components/layout/Misc.tsx
@@ -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>
     );
 };
 
diff --git a/src/routes/Main.tsx b/src/routes/Main.tsx
index 7286156d4..b6e84a908 100644
--- a/src/routes/Main.tsx
+++ b/src/routes/Main.tsx
@@ -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"
diff --git a/src/routes/Profile.tsx b/src/routes/Profile.tsx
index b466fadfc..7170060c7 100644
--- a/src/routes/Profile.tsx
+++ b/src/routes/Profile.tsx
@@ -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>