Merge pull request #16 from MutinyWallet/desktop-a-little-bit

Desktop a little bit
This commit is contained in:
Paul Miller
2023-04-10 17:51:51 -05:00
committed by GitHub
8 changed files with 50 additions and 43 deletions

12
.env
View File

@@ -1,11 +1,11 @@
# LOCALHOST REGTEST
VITE_NETWORK="regtest"
VITE_PROXY="wss://p.mutinywallet.com"
VITE_ESPLORA="http://localhost:3003"
# VITE_NETWORK="regtest"
# VITE_PROXY="wss://p.mutinywallet.com"
# VITE_ESPLORA="http://localhost:3003"
#SIGNET
# VITE_NETWORK="signet"
# VITE_PROXY="wss://p.mutinywallet.com"
# VITE_ESPLORA="https://mutinynet.com/api"
VITE_NETWORK="signet"
VITE_PROXY="wss://p.mutinywallet.com"
VITE_ESPLORA="https://mutinynet.com/api"

View File

@@ -10,7 +10,7 @@ import KitchenSink from './KitchenSink';
export default function App() {
return (
<SafeArea>
<main class='flex flex-col gap-4 py-8 px-4'>
<main class='flex flex-col gap-4 py-8 px-4 max-w-[800px] mx-auto'>
<header>
<img src={logo} class="App-logo" alt="logo" />
</header>

View File

@@ -1,5 +1,4 @@
import { Motion, Presence } from "@motionone/solid";
import { MutinyBalance } from "@mutinywallet/node-manager";
import { createResource, Show, Suspense } from "solid-js";
import { ButtonLink } from "~/components/Button";
@@ -12,10 +11,6 @@ function prettyPrintAmount(n?: number | bigint): string {
return n.toLocaleString()
}
function prettyPrintBalance(b: MutinyBalance): string {
return prettyPrintAmount(b.confirmed.valueOf() + b.lightning.valueOf() + b.unconfirmed.valueOf())
}
export default function BalanceBox() {
const [state, _] = useMegaStore();
@@ -48,8 +43,21 @@ export default function BalanceBox() {
<h1 class='text-4xl font-light'>
<Suspense fallback={"..."}>
<Show when={balance()}>
{/* TODO: no-non-null-asssertion but type narrowing just isn't working */}
{prettyPrintBalance(balance()!)} <span class='text-xl'>SAT</span>
<div class="flex flex-col gap-4">
<div>
{prettyPrintAmount(balance()?.confirmed)} <span class='text-xl'>SAT</span>
</div>
<Show when={balance()?.unconfirmed}>
<div class="flex flex-col gap-2">
<header class='text-sm font-semibold uppercase text-white/50'>
Unconfirmed Balance
</header>
<div class="text-white/50">
{prettyPrintAmount(balance()?.unconfirmed)} <span class='text-xl'>SAT</span>
</div>
</div>
</Show>
</div>
</Show>
</Suspense>
</h1>

View File

@@ -7,24 +7,27 @@ import { A } from "solid-start";
type ActiveTab = 'home' | 'scan' | 'settings' | 'none';
export default function NavBar(props: { activeTab: ActiveTab }) {
const activeStyle = 'h-full border-t-2 border-b-2 border-b-black flex flex-col justify-center'
return (<nav class='bg-black fixed bottom-0 shadow-lg z-40 w-full safe-bottom'>
<ul class='h-16 flex justify-between px-16 items-center'>
<li class={props.activeTab === "home" ? activeStyle : ""}>
<A href="/">
<img src={mutiny_m} alt="home" />
</A>
</li>
<li class={props.activeTab === "scan" ? activeStyle : ""}>
<A href="/scanner">
<img src={scan} alt="scan" />
</A>
</li>
<li class={props.activeTab === "settings" ? activeStyle : ""}>
<A href="/settings">
<img src={settings} alt="settings" />
</A>
</li>
</ul>
</nav>)
const activeStyle = 'h-full border-t-2 border-b-2 border-b-black flex flex-col justify-center md:border-t-0 md:border-b-0 md:p-2 md:bg-white/20 md:rounded-xl'
const inactiveStyle = "md:p-2 md:hover:bg-white/10 md:rounded-xl"
return (
<nav class='bg-black fixed bottom-0 shadow-lg z-40 w-full safe-bottom md:top-0 md:bottom-auto md:left-0 md:w-auto md:h-full'>
<ul class='h-16 flex justify-between px-16 items-center md:flex-col md:justify-start md:gap-4 md:px-4 md:mt-4'>
<li class={props.activeTab === "home" ? activeStyle : inactiveStyle}>
<A href="/">
<img src={mutiny_m} alt="home" />
</A>
</li>
<li class={props.activeTab === "scan" ? activeStyle : inactiveStyle}>
<A href="/scanner">
<img src={scan} alt="scan" />
</A>
</li>
<li class={props.activeTab === "settings" ? activeStyle : inactiveStyle}>
<A href="/settings">
<img src={settings} alt="settings" />
</A>
</li>
</ul>
</nav >
)
}

View File

@@ -1,7 +1,5 @@
import type { Component } from 'solid-js'
import { Show } from 'solid-js'
// pwa-register doesn't have types apparently
// @ts-ignore
import { useRegisterSW } from 'virtual:pwa-register/solid'
import Card from './Card'
import { Button } from './Button'

View File

@@ -3,7 +3,7 @@ import { JSX } from "solid-js";
export default function SafeArea(props: { children: JSX.Element }) {
return (
<div class="safe-top safe-left safe-right safe-bottom">
<div class="disable-scrollbars max-h-screen h-full overflow-y-scroll">
<div class="disable-scrollbars max-h-screen h-full overflow-y-scroll md:pl-[8rem] md:pr-[6rem]">
{props.children}
</div>
</div >

View File

@@ -27,19 +27,17 @@ export default function Scanner() {
</div>
</div>
</Show>
<div class="w-full flex flex-col fixed bottom-[2rem] gap-8 px-8">
<div class="w-full flex flex-col items-center fixed bottom-[2rem] gap-8 px-8 bg-pink-500">
<Show when={scanResult()}
fallback={
<>
<div class="w-full max-w-[800px] flex flex-col gap-2">
<Button intent="blue" onClick={exit}>Paste Something</Button>
<Button onClick={exit}>Cancel</Button>
</>
</div>
}>
<Button intent="red" onClick={() => setScanResult(null)}>Try Again</Button>
<Button onClick={exit}>Cancel</Button>
</Show>
</div>
</>
);

View File

@@ -32,7 +32,7 @@ export default function Settings() {
return (
<SafeArea>
<main class='flex flex-col gap-4 py-8 px-4'>
<main class='flex flex-col gap-4 py-8 px-4 max-w-[800px] mx-auto'>
<Button onClick={clearWaitlistId}>Clear waitlist_id</Button>
<Button onClick={setTestWaitlistId}>Use test waitlist_id</Button>
<Button onClick={resetNode}>Reset node</Button>