fix most of tony's problems

MutinyWallet · Feb 19, 2024 · 34f55b0 · 34f55b0
1 parent a9a7346
commit 34f55b0
Show file tree

Hide file tree

Showing 15 changed files with 172 additions and 135 deletions.
diff --git a/src/components/Activity.tsx b/src/components/Activity.tsx
@@ -1,14 +1,15 @@
 import { TagItem } from "@mutinywallet/mutiny-wasm";
-import { cache, createAsync, revalidate } from "@solidjs/router";
-import { Plus, Search, Shuffle } from "lucide-solid";
+import { cache, createAsync, revalidate, useNavigate } from "@solidjs/router";
+import { Plus, Save, Search, Shuffle } from "lucide-solid";
 import { createEffect, createSignal, For, Match, Show, Switch } from "solid-js";
 
 import {
     ActivityDetailsModal,
-    Card,
+    ButtonCard,
     HackActivityType,
     NiceP
 } from "~/components";
+import { useI18n } from "~/i18n/context";
 import { useMegaStore } from "~/state/megaStore";
 import { timeAgo } from "~/utils";
 
@@ -145,10 +146,12 @@ export function UnifiedActivityItem(props: {
 
 export function CombinedActivity() {
     const [state, _actions] = useMegaStore();
+    const i18n = useI18n();
 
     const [detailsOpen, setDetailsOpen] = createSignal(false);
     const [detailsKind, setDetailsKind] = createSignal<HackActivityType>();
     const [detailsId, setDetailsId] = createSignal("");
+    const navigate = useNavigate();
 
     function openDetailsModal(id: string, kind: HackActivityType) {
         console.log("Opening details modal: ", id, kind);
@@ -195,36 +198,40 @@ export function CombinedActivity() {
             </Show>
             <Switch>
                 <Match when={activity().length === 0}>
-                    <Card>
-                        <NiceP>Welcome to the Mutiny.</NiceP>
-                    </Card>
-                    <Card>
-                        {/* <NiceP>TODO: copywriting lol</NiceP> */}
-                        <NiceP>
-                            <span>
-                                <Plus class="inline-block text-m-red" />
-                            </span>{" "}
-                            to receive your first sats.
-                        </NiceP>
-                        {/* <NiceP>
-                            {i18n.t(
-                                "activity.receive_some_sats_to_get_started"
-                            )}
-                        </NiceP> */}
-                    </Card>
-                    <Card>
-                        <NiceP>
-                            <span>
-                                <Search class="inline-block text-m-red" />
-                            </span>{" "}
-                            to find your friends on nostr.
-                        </NiceP>
-                    </Card>
-                    <Card>
-                        <NiceP>Don't forget to back up your seed words!</NiceP>
-                    </Card>
+                    <ButtonCard onClick={() => navigate("/receive")}>
+                        <div class="flex items-center gap-2">
+                            <Plus class="inline-block text-m-red" />
+                            <NiceP>{i18n.t("home.receive")}</NiceP>
+                        </div>
+                    </ButtonCard>
+                    <ButtonCard onClick={() => navigate("/search")}>
+                        <div class="flex items-center gap-2">
+                            <Search class="inline-block text-m-red" />
+                            <NiceP>{i18n.t("home.find")}</NiceP>
+                        </div>
+                    </ButtonCard>
+                    <Show when={!state.has_backed_up}>
+                        <ButtonCard
+                            onClick={() => navigate("/settings/backup")}
+                        >
+                            <div class="flex items-center gap-2">
+                                <Save class="inline-block text-m-red" />
+                                <NiceP>{i18n.t("home.backup")}</NiceP>
+                            </div>
+                        </ButtonCard>
+                    </Show>
                 </Match>
                 <Match when={activity().length >= 0}>
+                    <Show when={!state.has_backed_up}>
+                        <ButtonCard
+                            onClick={() => navigate("/settings/backup")}
+                        >
+                            <div class="flex items-center gap-2">
+                                <Save class="inline-block text-m-red" />
+                                <NiceP>{i18n.t("home.backup")}</NiceP>
+                            </div>
+                        </ButtonCard>
+                    </Show>
                     <div class="flex w-full flex-col divide-y divide-m-grey-800 overflow-x-clip">
                         <For each={activity()}>
                             {(activityItem) => (

diff --git a/src/components/ActualSearch.tsx b/src/components/ActualSearch.tsx
@@ -266,11 +266,6 @@ export function ActualSearch(props: { initialValue?: string }) {
                     </button>
                 </Show>
             </div>
-            {/* <Show when={!searchValue()}>
-                <Suspense fallback={<LoadingShimmer />}>
-                    <MeOrEverybody />
-                </Suspense>
-            </Show> */}
             <Show when={searchState() !== "notsendable"}>
                 <Button intent="green" onClick={handleContinue}>
                     Continue

diff --git a/src/components/Fab.tsx b/src/components/Fab.tsx
@@ -4,9 +4,17 @@ import { createSignal, JSX, onCleanup, onMount, Show } from "solid-js";
 
 import { Circle } from "~/components";
 
-function FabMenuItem(props: { onClick: () => void; children: JSX.Element }) {
+function FabMenuItem(props: {
+    onClick: () => void;
+    disabled: boolean;
+    children: JSX.Element;
+}) {
     return (
-        <button class="flex gap-2 px-2 py-4" onClick={() => props.onClick}>
+        <button
+            class="flex gap-2 px-2 py-4 disabled:opacity-50"
+            disabled={props.disabled}
+            onClick={() => props.onClick()}
+        >
             {props.children}
         </button>
     );
@@ -61,8 +69,8 @@ export function Fab(props: { onSearch: () => void; onScan: () => void }) {
                         <li>
                             <FabMenuItem
                                 onClick={() => {
-                                    setOpen(false);
                                     props.onSearch();
+                                    setOpen(false);
                                 }}
                             >
                                 <ArrowUpRight />
@@ -105,6 +113,7 @@ export function MiniFab(props: {
     onSend: () => void;
     onRequest: () => void;
     onScan: () => void;
+    sendDisabled?: boolean | undefined;
 }) {
     const [open, setOpen] = createSignal(false);
     return (
@@ -114,9 +123,10 @@ export function MiniFab(props: {
                     <ul class="flex flex-col divide-y divide-m-grey-400/25">
                         <li>
                             <FabMenuItem
+                                disabled={props.sendDisabled || false}
                                 onClick={() => {
-                                    setOpen(false);
                                     props.onSend();
+                                    setOpen(false);
                                 }}
                             >
                                 <ArrowUpRight />
@@ -126,8 +136,8 @@ export function MiniFab(props: {
                         <li>
                             <FabMenuItem
                                 onClick={() => {
-                                    setOpen(false);
                                     props.onRequest();
+                                    setOpen(false);
                                 }}
                             >
                                 <ArrowDownLeft />
@@ -138,8 +148,8 @@ export function MiniFab(props: {
                         <li>
                             <FabMenuItem
                                 onClick={() => {
-                                    setOpen(false);
                                     props.onScan();
+                                    setOpen(false);
                                 }}
                             >
                                 <Scan />

diff --git a/src/components/GenericItem.tsx b/src/components/GenericItem.tsx
@@ -96,7 +96,7 @@ export function GenericItem(props: {
                     </Show>
                     {/* OPTIONAL MESSAGE */}
                     <Show when={props.message}>
-                        <div class="font-regular line-clamp-1 min-w-0 flex-shrink break-all rounded-full bg-m-grey-800 px-2 text-xs leading-6">
+                        <div class="font-regular line-clamp-1 min-w-0 break-all rounded-full bg-m-grey-800 px-2 py-1 text-xs leading-6">
                             {props.message}
                         </div>
                     </Show>

diff --git a/src/components/HomeSubnav.tsx b/src/components/HomeSubnav.tsx
@@ -63,7 +63,7 @@ export function HomeSubnav() {
                     }}
                     onClick={() => setActiveView("everybody")}
                 >
-                    Everybody
+                    Friends
                 </button>
 
                 <button

diff --git a/src/components/NostrActivity.tsx b/src/components/NostrActivity.tsx
@@ -1,7 +1,16 @@
 import { MutinyWallet } from "@mutinywallet/mutiny-wasm";
 import { useNavigate } from "@solidjs/router";
-import { createEffect, createResource, For, Match, Switch } from "solid-js";
-
+import { Search } from "lucide-solid";
+import {
+    createEffect,
+    createResource,
+    For,
+    Match,
+    Show,
+    Switch
+} from "solid-js";
+
+import { ButtonCard, NiceP } from "~/components/layout";
 import { useI18n } from "~/i18n/context";
 import { useMegaStore } from "~/state/megaStore";
 import { fetchZaps, getPrimalImageUrl } from "~/utils";
@@ -109,6 +118,14 @@ export function NostrActivity() {
 
     return (
         <div class="flex w-full flex-col divide-y divide-m-grey-800 overflow-x-clip">
+            <Show when={!data.latest || data.latest?.zaps.length === 0}>
+                <ButtonCard onClick={() => navigate("/search")}>
+                    <div class="flex items-center gap-2">
+                        <Search class="inline-block text-m-red" />
+                        <NiceP>{i18n.t("home.find")}</NiceP>
+                    </div>
+                </ButtonCard>
+            </Show>
             <For each={data.latest?.zaps}>
                 {(zap) => (
                     <>

diff --git a/src/components/OnboardWarning.tsx b/src/components/OnboardWarning.tsx
diff --git a/src/components/PendingNwc.tsx b/src/components/PendingNwc.tsx
@@ -1,6 +1,6 @@
 import { TagItem } from "@mutinywallet/mutiny-wasm";
-import { A } from "@solidjs/router";
-import { Check, X } from "lucide-solid";
+import { A, useNavigate } from "@solidjs/router";
+import { Check, PlugZap, X } from "lucide-solid";
 import {
     createEffect,
     createResource,
@@ -11,7 +11,7 @@ import {
     Switch
 } from "solid-js";
 
-import { Card, InfoBox, NiceP } from "~/components";
+import { ButtonCard, Card, InfoBox, NiceP } from "~/components";
 import { useI18n } from "~/i18n/context";
 import { useMegaStore } from "~/state/megaStore";
 import {
@@ -36,6 +36,8 @@ export function PendingNwc() {
 
     const [error, setError] = createSignal<Error>();
 
+    const navigate = useNavigate();
+
     async function fetchPendingRequests() {
         const profiles = await state.mutiny_wallet?.get_nwc_profiles();
         if (!profiles) return [];
@@ -209,12 +211,12 @@ export function PendingNwc() {
                 </div>
             </Match>
             <Match when={true}>
-                <Card>
-                    <NiceP>
-                        No pending requests. Maybe you want to add a{" "}
-                        <A href="/settings/connections">Wallet Connection</A>?
-                    </NiceP>
-                </Card>
+                <ButtonCard onClick={() => navigate("/settings/connections")}>
+                    <div class="flex items-center gap-2">
+                        <PlugZap class="inline-block text-m-red" />
+                        <NiceP>{i18n.t("home.connection")}</NiceP>
+                    </div>
+                </ButtonCard>
             </Match>
         </Switch>
     );

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -27,7 +27,6 @@ export * from "./Logo";
 export * from "./Logs";
 export * from "./MoreInfoModal";
 export * from "./NavBar";
-export * from "./OnboardWarning";
 export * from "./PendingNwc";
 export * from "./Reader";
 export * from "./Reload";

diff --git a/src/components/layout/Misc.tsx b/src/components/layout/Misc.tsx
@@ -49,6 +49,20 @@ export const Card: ParentComponent<{
     );
 };
 
+export const ButtonCard: ParentComponent<{
+    onClick: () => void;
+}> = (props) => {
+    return (
+        <button
+            onClick={() => props.onClick()}
+            // class="flex flex-none items-center justify-center overflow-clip rounded-full border-b border-t border-b-white/10 border-t-white/50  text-3xl uppercase"
+            class="flex w-full flex-col gap-2 rounded-xl border-b border-t border-b-white/10 border-t-white/50 bg-neutral-900 p-4 active:-mb-[1px] active:mt-[1px]"
+        >
+            {props.children}
+        </button>
+    );
+};
+
 export const InnerCard: ParentComponent<{ title?: string }> = (props) => {
     return (
         <div class="flex flex-col gap-2 rounded-xl border border-white/10 bg-[rgba(255,255,255,0.05)] p-4">

diff --git a/src/i18n/en/translations.ts b/src/i18n/en/translations.ts
@@ -27,6 +27,17 @@ export default {
             "Mutiny is running in safe mode. Lightning is disabled.",
         self_hosted: "Self-hosted"
     },
+    home: {
+        receive: "Receive your first sats",
+        find: "Find your friends on nostr",
+        backup: "Secure your funds!",
+        connection: "Create a wallet connection"
+    },
+    profile: {
+        nostr_identity: "Nostr Identity",
+        add_lightning_address: "Add Lightning Address",
+        edit_profile: "Edit Profile"
+    },
     contacts: {
         new: "new",
         add_contact: "Add Contact",