more tweaks

MutinyWallet · Jan 18, 2024 · 3d1e664 · 3d1e664
1 parent fefb7d0
commit 3d1e664
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 55 deletions.
diff --git a/src/components/MeOrEverybody.tsx b/src/components/MeOrEverybody.tsx
@@ -0,0 +1,68 @@
+import { createSignal, Show, Suspense } from "solid-js";
+
+import {
+    BalanceBox,
+    CombinedActivity,
+    LoadingShimmer,
+    NostrActivity,
+    VStack
+} from "~/components";
+import { useI18n } from "~/i18n/context";
+import { useMegaStore } from "~/state/megaStore";
+
+export function MeOrEverybody() {
+    const i18n = useI18n();
+    const [state, _actions] = useMegaStore();
+
+    // const safari = iosNotNative();
+
+    const [activeView, setActiveView] = createSignal<"me" | "everybody">("me");
+
+    function toggleActive() {
+        setActiveView(activeView() === "me" ? "everybody" : "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"
+                    }}
+                    onClick={toggleActive}
+                >
+                    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"
+                    }}
+                    onClick={toggleActive}
+                >
+                    Everybody
+                </button>
+            </div>
+
+            <Show when={activeView() === "me"}>
+                <VStack>
+                    <Suspense>
+                        <Show
+                            when={!state.wallet_loading}
+                            fallback={<LoadingShimmer />}
+                        >
+                            <CombinedActivity />
+                        </Show>
+                    </Suspense>
+                </VStack>
+            </Show>
+            <Show when={activeView() === "everybody"}>
+                <Suspense fallback={<LoadingShimmer />}>
+                    <NostrActivity />
+                </Suspense>
+            </Show>
+        </>
+    );
+}
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -50,3 +50,4 @@ export * from "./FeeDisplay";
 export * from "./ReceiveWarnings";
 export * from "./SimpleInput";
 export * from "./LabelCircle";
+export * from "./MeOrEverybody";
diff --git a/src/root.css b/src/root.css
@@ -9,8 +9,8 @@ body {
 
 html {
     @apply h-[100dvh] overscroll-none;
-    /* @apply bg-m-grey-975; */
-    @apply bg-black;
+    @apply bg-m-grey-975;
+    /* @apply bg-black; */
 }
 
 #root {

diff --git a/src/routes/NewMain.tsx b/src/routes/NewMain.tsx
@@ -4,6 +4,7 @@ import { createSignal, JSX, Show, Suspense } from "solid-js";
 import scan from "~/assets/icons/scan.svg";
 import settings from "~/assets/icons/settings.svg";
 import {
+    AmountSats,
     BalanceBox,
     BetaWarningModal,
     Card,
@@ -31,6 +32,8 @@ import { FeedbackLink } from "~/routes/Feedback";
 import { useMegaStore } from "~/state/megaStore";
 import { iosNotNative } from "~/utils/platform";
 
+import { ActualSearch } from "./Search";
+
 function Circle(props: { children: JSX.Element }) {
     return (
         <div class="flex h-[3rem] w-[3rem] flex-none items-center justify-center overflow-clip rounded-full border-b border-t border-b-white/10 border-t-white/50 bg-m-grey-800 text-3xl uppercase">
@@ -40,17 +43,6 @@ function Circle(props: { children: JSX.Element }) {
 }
 
 export function NewMain() {
-    const i18n = useI18n();
-    const [state, _actions] = useMegaStore();
-
-    // const safari = iosNotNative();
-
-    const [activeView, setActiveView] = createSignal<"me" | "everybody">("me");
-
-    function toggleActive() {
-        setActiveView(activeView() === "me" ? "everybody" : "me");
-    }
-
     return (
         <SafeArea>
             <DefaultMain zeroBottomPadding={true}>
@@ -63,7 +55,7 @@ export function NewMain() {
                     />
                     <div class="relative grid justify-center rounded-lg border-b border-t border-b-white/10 border-t-white/40 bg-black px-4 py-2">
                         <h1 class="crt whitespace-nowrap text-right text-2xl font-light">
-                            74,928 <span class="text-lg font-light">SATS</span>
+                            <AmountSats icon="lightning" amountSats={74420n} />
                         </h1>
                     </div>
                     <Circle>
@@ -78,46 +70,9 @@ export function NewMain() {
                         />
                     </Circle>
                 </div>
-                <SimpleInput placeholder="Search" value="" onInput={() => {}} />
-                <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"
-                        }}
-                        onClick={toggleActive}
-                    >
-                        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"
-                        }}
-                        onClick={toggleActive}
-                    >
-                        Everybody
-                    </button>
-                </div>
-                <Show when={activeView() === "me"}>
-                    <VStack>
-                        <Suspense>
-                            <Show
-                                when={!state.wallet_loading}
-                                fallback={<LoadingShimmer />}
-                            >
-                                <CombinedActivity />
-                            </Show>
-                        </Suspense>
-                    </VStack>
-                </Show>
-                <Show when={activeView() === "everybody"}>
-                    <Suspense fallback={<LoadingShimmer />}>
-                        <NostrActivity />
-                    </Suspense>
-                </Show>
+                {/* <SimpleInput placeholder="Search" value="" onInput={() => {}} /> */}
+
+                <ActualSearch />
 
                 {/* <hr class="border-t border-m-grey-700" /> */}
                 {/* <LoadingIndicator /> */}

diff --git a/src/routes/Search.tsx b/src/routes/Search.tsx
@@ -19,10 +19,12 @@ import close from "~/assets/icons/close.svg";
 import paste from "~/assets/icons/paste.svg";
 import scan from "~/assets/icons/scan.svg";
 import {
+    CombinedActivity,
     ContactEditor,
     ContactFormValues,
     LabelCircle,
     LoadingShimmer,
+    MeOrEverybody,
     NavBar,
     showToast
 } from "~/components";
@@ -69,7 +71,7 @@ export function Search() {
     );
 }
 
-function ActualSearch() {
+export function ActualSearch() {
     const [searchValue, setSearchValue] = createSignal("");
     const [debouncedSearchValue, setDebouncedSearchValue] = createSignal("");
     const [state, actions] = useMegaStore();
@@ -283,6 +285,11 @@ function ActualSearch() {
                     </button>
                 </Show>
             </div>
+            <Show when={!searchValue()}>
+                <Suspense fallback={<LoadingShimmer />}>
+                    <MeOrEverybody />
+                </Suspense>
+            </Show>
             <Show when={searchState() !== "notsendable"}>
                 <Button intent="green" onClick={handleContinue}>
                     Continue