diff --git a/src/assets/mutiny-pixel-logo.png b/src/assets/mutiny-pixel-logo.png new file mode 100644 index 0000000..a79a2b4 Binary files /dev/null and b/src/assets/mutiny-pixel-logo.png differ diff --git a/src/components/Amount.tsx b/src/components/Amount.tsx index d54c48e..2db04aa 100644 --- a/src/components/Amount.tsx +++ b/src/components/Amount.tsx @@ -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 (
-

- {props.loading ? "..." : prettyPrintAmount(props.amountSats)} -   - SATS -

+
+ + lightning + + + chain + +

+ {props.loading + ? "..." + : prettyPrintAmount(props.amountSats)} +   + SATS +

+
-

+

≈ {props.loading ? "..." : amountInUsd()}  USD

diff --git a/src/components/App.tsx b/src/components/App.tsx index 2308871..42de8d5 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -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() {
-
- logo +
+ -
+
{state.mutiny_wallet?.get_network()}
- Activity + Settings
diff --git a/src/components/BalanceBox.tsx b/src/components/BalanceBox.tsx index 581e66b..6373adf 100644 --- a/src/components/BalanceBox.tsx +++ b/src/components/BalanceBox.tsx @@ -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 ( <> - + }> - - - +
}>
- - -
- - swap - -
- + +
+ + Pending + + +
+ + +
+ + swap + +
+ +
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx index 290d626..ecb2e56 100644 --- a/src/components/layout/index.tsx +++ b/src/components/layout/index.tsx @@ -54,18 +54,7 @@ export const FancyCard: ParentComponent<{ tag?: JSX.Element; }> = (props) => { return ( -
-
-
- {props.title && {props.title}} - {props.subtitle && ( - - {props.subtitle} - - )} -
- {props.tag && props.tag} -
+
{props.children}
); @@ -154,7 +143,7 @@ export const LoadingSpinner = (props: { big?: boolean; wide?: boolean }) => { ); }; -export const Hr = () => ; +export const Hr = () => ; export const LargeHeader: ParentComponent<{ action?: JSX.Element }> = ( props diff --git a/src/root.css b/src/root.css index b942007..108aafe 100644 --- a/src/root.css +++ b/src/root.css @@ -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]; } diff --git a/src/routes/Activity.tsx b/src/routes/Activity.tsx index 9337ad0..5506e1c 100644 --- a/src/routes/Activity.tsx +++ b/src/routes/Activity.tsx @@ -92,18 +92,7 @@ export default function Activity() { - - Settings - - } - > - Activity - + Activity diff --git a/tailwind.config.cjs b/tailwind.config.cjs index c8cb8a6..d567037 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -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":