Skip to content

Commit

Permalink
home design is getting there
Browse files Browse the repository at this point in the history
  • Loading branch information
@futurepaul
futurepaul committed Jan 22, 2024
1 parent 3d1e664 commit 8a3e44d
Show file tree
Hide file tree
Showing 22 changed files with 967 additions and 431 deletions.
4 changes: 2 additions & 2 deletions src/assets/icons/scan.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/icons/search.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
200 changes: 97 additions & 103 deletions src/components/BalanceBox.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { A, useNavigate } from "@solidjs/router";

Check warning on line 1 in src/components/BalanceBox.tsx

View workflow job for this annotation

GitHub Actions / code_quality 

'useNavigate' is defined but never used. Allowed unused vars must match /^_/u
import { Match, Show, Switch } from "solid-js";
import { createSignal, Match, Show, Switch } from "solid-js";

Check warning on line 2 in src/components/BalanceBox.tsx

View workflow job for this annotation

GitHub Actions / code_quality 

'createSignal' is defined but never used. Allowed unused vars must match /^_/u

import shuffle from "~/assets/icons/shuffle.svg";
import {
Expand Down Expand Up @@ -35,19 +35,10 @@ export function LoadingShimmer(props: { center?: boolean }) {
const STYLE =
"px-2 py-1 rounded-xl text-sm flex gap-2 items-center font-semibold";

export function BalanceBox(props: { loading?: boolean }) {
export function BalanceBox(props: { loading?: boolean; small?: boolean }) {
const [state, _actions] = useMegaStore();
const i18n = useI18n();

const emptyBalance = () =>
(state.balance?.confirmed || 0n) === 0n &&
(state.balance?.lightning || 0n) === 0n &&
(state.balance?.federation || 0n) === 0n &&
(state.balance?.force_close || 0n) === 0n &&
(state.balance?.unconfirmed || 0n) === 0n;

const navigate = useNavigate();

const totalOnchain = () =>
(state.balance?.confirmed || 0n) +
(state.balance?.unconfirmed || 0n) +
Expand All @@ -57,118 +48,121 @@ export function BalanceBox(props: { loading?: boolean }) {
(state.balance?.confirmed || 0n) + (state.balance?.unconfirmed || 0n);

return (
<>
<FancyCard>
<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}>
<Switch>
<Match when={props.small}>
<h1 class="whitespace-nowrap text-right text-2xl font-light">
<AmountSats
amountSats={state.balance?.lightning || 0}
icon="lightning"
denominationSize="lg"
/>
</h1>
</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}>
<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>
<Show when={state.federations && state.federations.length}>
<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>
<Show when={state.federations && state.federations.length}>
</Show>
</Show>
<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>
<div class="flex gap-2 py-4">
<Button
onClick={() => navigate("/search")}
disabled={emptyBalance() || props.loading}
intent="green"
>
{i18n.t("common.send")}
</Button>
<Button
onClick={() => navigate("/receive")}
disabled={props.loading}
intent="blue"
>
{i18n.t("common.receive")}
</Button>
</div>
</>
</FancyCard>
</Match>
</Switch>
);
}
39 changes: 28 additions & 11 deletions src/components/MeOrEverybody.tsx → src/components/HomeSubnav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,45 +5,55 @@ import {
CombinedActivity,
LoadingShimmer,
NostrActivity,
PendingNwc,
VStack
} from "~/components";
import { useI18n } from "~/i18n/context";
import { useMegaStore } from "~/state/megaStore";

export function MeOrEverybody() {
export function HomeSubnav() {
const i18n = useI18n();

Check warning on line 15 in src/components/HomeSubnav.tsx

View workflow job for this annotation

GitHub Actions / code_quality 

'i18n' is assigned a value but never used. Allowed unused vars must match /^_/u
const [state, _actions] = useMegaStore();

// const safari = iosNotNative();

const [activeView, setActiveView] = createSignal<"me" | "everybody">("me");

function toggleActive() {
setActiveView(activeView() === "me" ? "everybody" : "me");
}
const [activeView, setActiveView] = createSignal<
"me" | "everybody" | "requests"
>("me");

return (
<>
<div class="flex gap-2">
<button
class="rounded bg-m-grey-700 px-2 py-1 text-sm"
classList={{
"bg-m-grey-800 text-m-grey-400":
activeView() === "everybody"
"bg-m-grey-800 text-m-grey-400": activeView() !== "me"
}}
onClick={toggleActive}
onClick={() => setActiveView("me")}
>
Just Me
</button>
<button
class="rounded bg-m-grey-700 px-2 py-1 text-sm"
classList={{
"bg-m-grey-800 text-m-grey-400": activeView() === "me"
"bg-m-grey-800 text-m-grey-400":
activeView() !== "everybody"
}}
onClick={toggleActive}
onClick={() => setActiveView("everybody")}
>
Everybody
</button>

<button
class="rounded bg-m-grey-700 px-2 py-1 text-sm"
classList={{
"bg-m-grey-800 text-m-grey-400":
activeView() !== "requests"
}}
onClick={() => setActiveView("requests")}
>
Requests
</button>
</div>

<Show when={activeView() === "me"}>
Expand All @@ -63,6 +73,13 @@ export function MeOrEverybody() {
<NostrActivity />
</Suspense>
</Show>
<Show when={activeView() === "requests"}>
<Suspense fallback={<LoadingShimmer />}>
<Show when={!state.wallet_loading && !state.safe_mode}>
<PendingNwc />
</Show>
</Suspense>
</Show>
</>
);
}
49 changes: 29 additions & 20 deletions src/components/IntegratedQR.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,8 @@ async function share(receiveString: string) {

export function IntegratedQr(props: {
value: string;
amountSats: string;
kind: ReceiveFlavor | "gift";
kind: ReceiveFlavor | "gift" | "lnAddress";
amountSats?: string;
}) {
const i18n = useI18n();
const [copy, copied] = useCopy({ copiedTimeout: 1000 });
Expand All @@ -84,25 +84,34 @@ export function IntegratedQr(props: {
<p class="text-xl font-bold">{i18n.t("common.copied")}</p>
</div>
</Show>
<div
class="flex w-full max-w-[256px] items-center py-4"
classList={{
"justify-between": props.kind !== "onchain",
"justify-end": props.kind === "onchain"
}}
>
<Show when={props.kind !== "onchain"}>
<div class="flex flex-col gap-1">
<div class="text-black">
<AmountSats amountSats={Number(props.amountSats)} />
</div>
<div class="text-sm text-black">
<AmountFiat amountSats={Number(props.amountSats)} />
<Show when={props.kind !== "lnAddress"}>
<div
class="flex w-full max-w-[256px] items-center py-4"
classList={{
"justify-between": props.kind !== "onchain",
"justify-end": props.kind === "onchain"
}}
>
<Show when={props.kind !== "onchain"}>
<div class="flex flex-col gap-1">
<div class="text-black">
<AmountSats
amountSats={Number(props.amountSats)}
/>
</div>
<div class="text-sm text-black">
<AmountFiat
amountSats={Number(props.amountSats)}
/>
</div>
</div>
</div>
</Show>
<KindIndicator kind={props.kind} />
</div>
</Show>
<KindIndicator kind={props.kind} />

Check failure on line 109 in src/components/IntegratedQR.tsx

View workflow job for this annotation

GitHub Actions / Build APK 

Type '"gift" | ReceiveFlavor | "lnAddress"' is not assignable to type '"gift" | ReceiveFlavor'.

Check failure on line 109 in src/components/IntegratedQR.tsx

View workflow job for this annotation

GitHub Actions / Build iOS 

Type '"gift" | ReceiveFlavor | "lnAddress"' is not assignable to type '"gift" | ReceiveFlavor'.
</div>
</Show>
<Show when={props.kind === "lnAddress"}>
<div class="py-4"></div>

Check warning on line 113 in src/components/IntegratedQR.tsx

View workflow job for this annotation

GitHub Actions / code_quality 

Empty components are self-closing
</Show>

<QRCodeSVG
value={props.value}
Expand Down
Loading

0 comments on commit 8a3e44d

Please sign in to comment.