From 2face6a2b70c87f782a72fc29e12057f86fbcea4 Mon Sep 17 00:00:00 2001
From: Paul Miller <paul@paul.lol>
Date: Mon, 10 Apr 2023 17:32:43 -0500
Subject: [PATCH 1/3] Show unconfirmed balance

---
 src/components/BalanceBox.tsx | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/BalanceBox.tsx b/src/components/BalanceBox.tsx
index a5bf63d..1bb6435 100644
--- a/src/components/BalanceBox.tsx
+++ b/src/components/BalanceBox.tsx
@@ -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>

From 7d98ed97dfd7dfbd6d8b2da91655bb1f1cda71b3 Mon Sep 17 00:00:00 2001
From: Paul Miller <paul@paul.lol>
Date: Mon, 10 Apr 2023 17:33:19 -0500
Subject: [PATCH 2/3] Use staging in default env

---
 .env | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/.env b/.env
index 6ef7cd9..7bd9785 100644
--- a/.env
+++ b/.env
@@ -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"
\ No newline at end of file
+VITE_NETWORK="signet"
+VITE_PROXY="wss://p.mutinywallet.com"
+VITE_ESPLORA="https://mutinynet.com/api"
\ No newline at end of file

From 15c3bf80b7db9dfe333c49bba0183082c65dbe20 Mon Sep 17 00:00:00 2001
From: Paul Miller <paul@paul.lol>
Date: Mon, 10 Apr 2023 17:34:28 -0500
Subject: [PATCH 3/3] a taste of desktop friendliness

---
 src/components/App.tsx      |  2 +-
 src/components/NavBar.tsx   | 43 ++++++++++++++++++++-----------------
 src/components/Reload.tsx   |  2 --
 src/components/SafeArea.tsx |  2 +-
 src/routes/Scanner.tsx      |  8 +++----
 src/routes/Settings.tsx     |  2 +-
 6 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index f621694..563f673 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -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>
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 61b5d52..9c6e97d 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -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 >
+    )
 }
\ No newline at end of file
diff --git a/src/components/Reload.tsx b/src/components/Reload.tsx
index a5d6aba..0b2de17 100644
--- a/src/components/Reload.tsx
+++ b/src/components/Reload.tsx
@@ -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'
diff --git a/src/components/SafeArea.tsx b/src/components/SafeArea.tsx
index af411b2..64832d0 100644
--- a/src/components/SafeArea.tsx
+++ b/src/components/SafeArea.tsx
@@ -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 >
diff --git a/src/routes/Scanner.tsx b/src/routes/Scanner.tsx
index 5f3c231..f607702 100644
--- a/src/routes/Scanner.tsx
+++ b/src/routes/Scanner.tsx
@@ -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>
         </>
     );
diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
index b9e9def..dc1e065 100644
--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@@ -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>