aljaz/mutiny-web
1
0
Fork 0
mirror of https://github.com/aljazceru/mutiny-web.git synced 2025-12-18 14:54:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

home screen redesign

Browse Source
This commit is contained in:
Paul Miller
2023-06-21 11:34:55 -05:00
parent ff97d59f6c
commit d570f224a1
8 changed files with 71 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/mutiny-pixel-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 823 B

27
src/components/Amount.tsx
View File

@@ -1,6 +1,8 @@
import { Show } from "solid-js";
import { useMegaStore } from "~/state/megaStore";
import { satsToUsd } from "~/utils/conversions";
import bolt from "~/assets/icons/bolt.svg";
import chain from "~/assets/icons/chain.svg";
function prettyPrintAmount(n?: number | bigint): string {
if (!n || n.valueOf() === 0) {
@@ -14,6 +16,7 @@ export function Amount(props: {
showFiat?: boolean;
loading?: boolean;
centered?: boolean;
icon?: "lightning" | "chain";
}) {
const [state, _] = useMegaStore();
@@ -22,16 +25,26 @@ export function Amount(props: {
return (
<div
class="flex flex-col gap-2"
class="flex flex-col gap-1"
classList={{ "items-center": props.centered }}
>
<h1 class="text-4xl font-light">
{props.loading ? "..." : prettyPrintAmount(props.amountSats)}
&nbsp;
<span class="text-xl">SATS</span>
</h1>
<div class="flex gap-2 items-center">
<Show when={props.icon === "lightning"}>
<img src={bolt} alt="lightning" class="h-[18px]" />
</Show>
<Show when={props.icon === "chain"}>
<img src={chain} alt="chain" class="h-[18px]" />
</Show>
<h1 class="text-2xl font-light">
{props.loading
? "..."
: prettyPrintAmount(props.amountSats)}
&nbsp;
<span class="text-base font-light">SATS</span>
</h1>
</div>
<Show when={props.showFiat}>
<h2 class="text-xl font-light text-white/70">
<h2 class="text-sm font-light text-white/70">
&#8776; {props.loading ? "..." : amountInUsd()}&nbsp;
<span class="text-sm">USD</span>
</h2>

19
src/components/App.tsx
View File

@@ -1,4 +1,3 @@
import logo from "~/assets/icons/mutiny-logo.svg";
import { DefaultMain, SafeArea, VStack, Card } from "~/components/layout";
import BalanceBox, { LoadingShimmer } from "~/components/BalanceBox";
import NavBar from "~/components/NavBar";
@@ -6,11 +5,12 @@ import ReloadPrompt from "~/components/Reload";
import { A } from "solid-start";
import { OnboardWarning } from "~/components/OnboardWarning";
import { CombinedActivity } from "./Activity";
import userClock from "~/assets/icons/user-clock.svg";
import { useMegaStore } from "~/state/megaStore";
import { Show } from "solid-js";
import { ExternalLink } from "./layout/ExternalLink";
import { BetaWarningModal } from "~/components/BetaWarningModal";
import settings from "~/assets/icons/settings.svg";
import pixelLogo from "~/assets/mutiny-pixel-logo.png";
export default function App() {
const [state, _actions] = useMegaStore();
@@ -19,24 +19,29 @@ export default function App() {
<SafeArea>
<DefaultMain>
<header class="w-full flex justify-between items-center mt-4 mb-2">
<div class="flex flex-col justify-center gap-2">
<img src={logo} class="h-10" alt="logo" />
<div class="flex items-center gap-2">
<img
id="mutiny-logo"
src={pixelLogo}
class="h-[25px] w-[75px]"
alt="Mutiny logo"
/>
<Show
when={
!state.wallet_loading &&
state.mutiny_wallet?.get_network() !== "bitcoin"
}
>
<div class="box-border px-2 py-1 -my-1 bg-white/70 rounded text-xs uppercase text-black w-fit">
<div class="box-border px-2 py-1 -my-1 text-white-400 bg-neutral-800 rounded text-xs uppercase w-fit">
{state.mutiny_wallet?.get_network()}
</div>
</Show>
</div>
<A
class="md:hidden p-2 hover:bg-white/5 rounded-lg active:bg-m-blue"
href="/activity"
href="/settings"
>
<img src={userClock} alt="Activity" class="h-8 w-8" />
<img src={settings} alt="Settings" class="h-6 w-6" />
</A>
</header>
<Show when={!state.wallet_loading}>

55
src/components/BalanceBox.tsx
View File

@@ -1,5 +1,5 @@
import { Show } from "solid-js";
import { Button, FancyCard } from "~/components/layout";
import { Button, FancyCard, Hr, Indicator } from "~/components/layout";
import { useMegaStore } from "~/state/megaStore";
import { Amount } from "./Amount";
import { A, useNavigate } from "solid-start";
@@ -19,7 +19,7 @@ export function LoadingShimmer() {
}
const STYLE =
"px-2 py-1 rounded-xl border border-neutral-400 text-sm flex gap-2 items-center font-semibold";
"px-2 py-1 rounded-xl text-sm flex gap-2 items-center font-semibold";
export default function BalanceBox(props: { loading?: boolean }) {
const [state, _actions] = useMegaStore();
@@ -39,38 +39,41 @@ export default function BalanceBox(props: { loading?: boolean }) {
return (
<>
<FancyCard title="Lightning">
<FancyCard>
<Show when={!props.loading} fallback={<LoadingShimmer />}>
<Amount
amountSats={state.balance?.lightning || 0}
showFiat
icon="lightning"
/>
</Show>
</FancyCard>
<FancyCard
title="On-Chain"
subtitle={
(Number(state.balance?.unconfirmed) || 0) +
(Number(state.balance?.force_close) || 0)
? "Unconfirmed"
: undefined
}
>
<hr class="my-2 border-m-grey-750" />
<Show when={!props.loading} fallback={<LoadingShimmer />}>
<div class="flex justify-between">
<Amount amountSats={totalOnchain()} showFiat />
<Show when={totalOnchain() != 0n }>
<div class="self-end justify-self-end">
<A href="/swap" class={STYLE}>
<img
src={shuffle}
alt="swap"
class="h-8 w-8"
/>
</A>
</div>
</Show>
<Amount
amountSats={totalOnchain()}
showFiat
icon="chain"
/>
<div class="flex flex-col items-end gap-1 justify-between">
<Show when={state.balance?.unconfirmed != 0n}>
<Indicator>Pending</Indicator>
</Show>
<Show when={state.balance?.unconfirmed === 0n}>
<div />
</Show>
<Show when={totalOnchain() != 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>

15
src/components/layout/index.tsx
View File

@@ -54,18 +54,7 @@ export const FancyCard: ParentComponent<{
tag?: JSX.Element;
}> = (props) => {
return (
<div class="border border-black/50 rounded-xl border-b-4 p-4 flex flex-col gap-2 bg-neutral-800/50 shadow-fancy-card">
<div class="w-full flex justify-between items-center">
<div class="flex gap-2">
{props.title && <SmallHeader>{props.title}</SmallHeader>}
{props.subtitle && (
<SmallHeader class="text-neutral-500">
{props.subtitle}
</SmallHeader>
)}
</div>
{props.tag && props.tag}
</div>
<div class="border border-black/50 rounded-xl border-b-4 p-4 flex flex-col gap-2 bg-m-grey-800 shadow-fancy-card">
{props.children}
</div>
);
@@ -154,7 +143,7 @@ export const LoadingSpinner = (props: { big?: boolean; wide?: boolean }) => {
);
};
export const Hr = () => <Separator.Root class="my-4 border-white/20" />;
export const Hr = () => <Separator.Root class="my-4 border-m-grey-750" />;
export const LargeHeader: ParentComponent<{ action?: JSX.Element }> = (
props

4
src/root.css
View File

@@ -8,6 +8,10 @@ body {
min-height: 100.3%;
}
#mutiny-logo {
image-rendering: pixelated;
}
.bg-gradient {
@apply bg-fixed bg-no-repeat bg-gradient-to-b from-black to-[#0b215b];
}

13
src/routes/Activity.tsx
View File

@@ -92,18 +92,7 @@ export default function Activity() {
<SafeArea>
<DefaultMain>
<BackLink />
<LargeHeader
action={
<A
class="md:hidden p-2 hover:bg-white/5 rounded-lg active:bg-m-blue"
href="/settings"
>
<img src={settings} alt="Settings" />
</A>
}
>
Activity
</LargeHeader>
<LargeHeader>Activity</LargeHeader>
<ContactRow />
<Tabs.Root defaultValue="mutiny">
<Tabs.List class="relative flex justify-around mt-4 mb-8 gap-1 bg-neutral-950 p-1 rounded-xl">

4
tailwind.config.cjs
View File

@@ -28,7 +28,9 @@ module.exports = {
"m-blue-dark": "hsla(220, 59%, 42%, 1)",
"m-red": "hsla(343, 92%, 54%, 1)",
"m-red-dark": "hsla(343, 92%, 44%, 1)",
"sidebar-gray": "hsla(222, 15%, 7%, 1)"
"sidebar-gray": "hsla(222, 15%, 7%, 1)",
"m-grey-800": "hsla(0, 0%, 12%, 1)",
"m-grey-750": "hsla(0, 0%, 17%, 1)"
},
backgroundImage: {
"fade-to-blue":