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

Commit 5c7e85b

Browse files
futurepaulfuturepaul
committed
let's try a plus
1 parent c79661f commit 5c7e85b

File tree

7 files changed

+269
-121
lines changed

7 files changed

+269
-121
lines changed

‎src/assets/plus.png

234 Bytes
Loading

‎src/components/BalanceBox.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,13 +55,16 @@ export function BalanceBox(props: { loading?: boolean; small?: boolean }) {
5555
const usableOnchain = () =>
5656
(state.balance?.confirmed || 0n) + (state.balance?.unconfirmed || 0n);
5757

58+
const lightningPlusFedi = () =>
59+
(state.balance?.federation || 0n) + (state.balance?.lightning || 0n);
60+
5861
return (
5962
<Switch>
6063
<Match when={props.small}>
6164
<Show when={!props.loading} fallback={<LoadingShimmer small />}>
6265
<h1 class="whitespace-nowrap text-right text-2xl font-light">
6366
<AmountSats
64-
amountSats={state.balance?.lightning || 0}
67+
amountSats={lightningPlusFedi()}
6568
icon="lightning"
6669
denominationSize="lg"
6770
/>
@@ -122,7 +125,7 @@ export function BalanceBox(props: { loading?: boolean; small?: boolean }) {
122125
<AmountSats
123126
amountSats={
124127
state.balance?.federation ||
125-
0
128+
0n
126129
}
127130
icon="community"
128131
denominationSize="lg"

‎src/components/Fab.tsx

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
import { useNavigate } from "@solidjs/router";
2+
import { createSignal, JSX, onCleanup, onMount, Show } from "solid-js";
3+
4+
import receive from "~/assets/icons/receive.svg";
5+
import scan from "~/assets/icons/scan.svg";
6+
import send from "~/assets/icons/send.svg";
7+
import plus from "~/assets/plus.png";
8+
import { Circle, SharpButton } from "~/components";
9+
10+
export function FabMenu(props: {
11+
setOpen: (open: boolean) => void;
12+
children: JSX.Element;
13+
right?: boolean;
14+
left?: boolean;
15+
}) {
16+
let navRef: HTMLElement;
17+
18+
const handleClickOutside = (e: MouseEvent) => {
19+
if (e.target instanceof Element && !navRef.contains(e.target)) {
20+
e.stopPropagation();
21+
props.setOpen(false);
22+
}
23+
};
24+
25+
onMount(() => {
26+
document.body.addEventListener("click", handleClickOutside);
27+
});
28+
29+
onCleanup(() => {
30+
document.body.removeEventListener("click", handleClickOutside);
31+
});
32+
33+
return (
34+
<nav
35+
ref={(el) => (navRef = el)}
36+
class="fixed bottom-[calc(2rem+5rem)] rounded-xl bg-neutral-700/30 px-2 backdrop-blur-lg"
37+
classList={{
38+
"right-8": props.right,
39+
"left-8": props.left
40+
}}
41+
>
42+
{props.children}
43+
</nav>
44+
);
45+
}
46+
47+
export function Fab(props: { onSearch: () => void; onScan: () => void }) {
48+
const [open, setOpen] = createSignal(false);
49+
const navigate = useNavigate();
50+
51+
return (
52+
<>
53+
<Show when={open()}>
54+
<FabMenu setOpen={setOpen} right>
55+
<ul class="flex flex-col divide-y divide-m-grey-400/25">
56+
<li>
57+
<button
58+
class="flex gap-2 px-2 py-4"
59+
onClick={() => {
60+
setOpen(false);
61+
props.onSearch();
62+
}}
63+
>
64+
<img
65+
src={send}
66+
width={"24px"}
67+
height={"24px"}
68+
alt="Send"
69+
/>{" "}
70+
Send
71+
</button>
72+
</li>
73+
<li>
74+
<button
75+
class="flex gap-2 px-2 py-4"
76+
onClick={() => navigate("/receive")}
77+
>
78+
<img
79+
src={receive}
80+
width={"24px"}
81+
height={"24px"}
82+
alt="Receive"
83+
/>{" "}
84+
Recieve
85+
</button>
86+
</li>
87+
88+
<li>
89+
<button
90+
class="flex gap-2 px-2 py-4"
91+
onClick={() => {
92+
setOpen(false);
93+
props.onScan();
94+
}}
95+
>
96+
<img
97+
src={scan}
98+
width={"24px"}
99+
height={"24px"}
100+
alt="Scan"
101+
/>{" "}
102+
Scan
103+
</button>
104+
</li>
105+
</ul>
106+
</FabMenu>
107+
</Show>
108+
<div class="fixed bottom-8 right-8">
109+
<button onClick={() => setOpen(!open())}>
110+
<Circle size="large">
111+
<img
112+
src={plus}
113+
width={"24px"}
114+
height={"24px"}
115+
alt="Action"
116+
/>{" "}
117+
</Circle>
118+
</button>
119+
</div>
120+
</>
121+
);
122+
}
123+
124+
export function MiniFab(props: {
125+
onSend: () => void;
126+
onRequest: () => void;
127+
onScan: () => void;
128+
}) {
129+
const [open, setOpen] = createSignal(false);
130+
return (
131+
<>
132+
<Show when={open()}>
133+
<FabMenu setOpen={setOpen} left>
134+
<ul class="flex flex-col divide-y divide-m-grey-400/25">
135+
<li>
136+
<button
137+
class="flex gap-2 px-2 py-4"
138+
onClick={() => {
139+
setOpen(false);
140+
props.onSend();
141+
}}
142+
>
143+
<img
144+
src={send}
145+
width={"24px"}
146+
height={"24px"}
147+
alt="Send"
148+
/>{" "}
149+
Send
150+
</button>
151+
</li>
152+
<li>
153+
<button
154+
class="flex gap-2 px-2 py-4"
155+
onClick={() => props.onRequest()}
156+
>
157+
<img
158+
src={receive}
159+
width={"24px"}
160+
height={"24px"}
161+
alt="Request"
162+
/>{" "}
163+
Request
164+
</button>
165+
</li>
166+
167+
<li>
168+
<button
169+
class="flex gap-2 px-2 py-4"
170+
onClick={() => {
171+
setOpen(false);
172+
props.onScan();
173+
}}
174+
>
175+
<img
176+
src={scan}
177+
width={"24px"}
178+
height={"24px"}
179+
alt="Scan"
180+
/>{" "}
181+
Scan
182+
</button>
183+
</li>
184+
</ul>
185+
</FabMenu>
186+
</Show>
187+
<SharpButton onClick={() => setOpen(true)}>
188+
<img
189+
src={plus}
190+
width="24px"
191+
height="24px"
192+
style={{
193+
"image-rendering": "pixelated"
194+
}}
195+
/>
196+
</SharpButton>
197+
</>
198+
);
199+
}

‎src/components/HomeSubnav.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,19 @@ export function HomeSubnav() {
2222
<>
2323
<div class="flex gap-2">
2424
<button
25-
class="rounded bg-m-grey-700 px-2 py-1 text-sm"
25+
class="rounded px-2 py-1 text-sm"
2626
classList={{
27+
"bg-m-red": activeView() === "me",
2728
"bg-m-grey-800 text-m-grey-400": activeView() !== "me"
2829
}}
2930
onClick={() => setActiveView("me")}
3031
>
3132
Just Me
3233
</button>
3334
<button
34-
class="rounded bg-m-grey-700 px-2 py-1 text-sm"
35+
class="rounded px-2 py-1 text-sm"
3536
classList={{
37+
"bg-m-red": activeView() === "everybody",
3638
"bg-m-grey-800 text-m-grey-400":
3739
activeView() !== "everybody"
3840
}}
@@ -42,8 +44,9 @@ export function HomeSubnav() {
4244
</button>
4345

4446
<button
45-
class="rounded bg-m-grey-700 px-2 py-1 text-sm"
47+
class="rounded px-2 py-1 text-sm"
4648
classList={{
49+
"bg-m-red": activeView() === "requests",
4750
"bg-m-grey-800 text-m-grey-400":
4851
activeView() !== "requests"
4952
}}

‎src/components/SharpButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export function SharpButton(props: {
99
<button
1010
onClick={() => props.onClick()}
1111
disabled={props.disabled}
12-
class="flex items-center gap-2 rounded px-2 py-1 text-sm font-light text-m-grey-400 md:text-base"
12+
class="text-m-grey-300 flex items-center gap-2 rounded px-2 py-1 text-sm font-light md:text-base"
1313
classList={{
1414
"border-b border-t border-b-white/10 border-t-white/50 bg-m-grey-750 active:mt-[1px] active:-mb-[1px]":
1515
!props.disabled

0 commit comments

Comments
 (0)