fix ben's problems

Author: futurepaul

src/assets/plus.png

@@ -5,7 +5,6 @@ import { createEffect, createSignal, For, Match, Show, Switch } from "solid-js";
 import shuffle from "~/assets/icons/shuffle.svg";
 import {
     ActivityDetailsModal,
-    ActivityItem,
     Card,
     HackActivityType,
     NiceP
@@ -44,11 +43,16 @@ export function UnifiedActivityItem(props: {
         return props.item.contacts[0];
     };
 
+    // TODO: figure out what other shit we should filter out
     const message = () => {
-        if (props.item.labels.length === 0) {
+        const filtered = props.item.labels.filter(
+            (l) => l !== "SWAP" && !l.startsWith("LN Channel:")
+        );
+        if (filtered.length === 0) {
             return undefined;
         }
-        return props.item.labels[0];
+
+        return filtered[0];
     };
 
     const shouldShowShuffle = () => {
@@ -69,6 +73,13 @@ export function UnifiedActivityItem(props: {
         if (props.item.labels.length > 0 && props.item.labels[0] === "SWAP") {
             return "swapped to";
         }
+        if (
+            props.item.labels.length > 0 &&
+            props.item.labels[0] === "Swept Force Close"
+        ) {
+            return undefined;
+        }
+
         return "sent";
     };
 
@@ -104,29 +115,34 @@ export function UnifiedActivityItem(props: {
 
     return (
         <>
-            <GenericItem
-                primaryAvatarUrl={
-                    shouldShowShuffle()
-                        ? shuffle
-                        : primaryContact()?.image_url || ""
-                }
-                primaryName={
-                    props.item.inbound
-                        ? primaryContact()?.name || "Unknown"
-                        : "You"
-                }
-                genericAvatar={shouldShowGeneric()}
-                verb={verb()}
-                message={message()}
-                secondaryName={secondaryName()}
-                amount={
-                    props.item.amount_sats
-                        ? BigInt(props.item.amount_sats || 0)
-                        : undefined
-                }
-                date={timeAgo(props.item.last_updated)}
-                accent={props.item.inbound ? "green" : undefined}
-            />
+            <button class="pt-3 first-of-type:pt-0" onClick={() => click()}>
+                <GenericItem
+                    primaryAvatarUrl={
+                        shouldShowShuffle()
+                            ? shuffle
+                            : primaryContact()?.image_url || ""
+                    }
+                    primaryName={
+                        props.item.inbound
+                            ? primaryContact()?.name || "Unknown"
+                            : "You"
+                    }
+                    genericAvatar={shouldShowGeneric()}
+                    verb={verb()}
+                    message={message()}
+                    secondaryName={secondaryName()}
+                    amount={
+                        props.item.amount_sats
+                            ? BigInt(props.item.amount_sats || 0)
+                            : undefined
+                    }
+                    date={timeAgo(props.item.last_updated)}
+                    accent={props.item.inbound ? "green" : undefined}
+                    visibility={
+                        props.item.kind === "Lightning" ? "private" : undefined
+                    }
+                />
+            </button>
             {/* <pre>{JSON.stringify(props.item, null, 2)}</pre> */}
         </>
         // <ActivityItem
@@ -143,7 +159,7 @@ export function UnifiedActivityItem(props: {
     );
 }
 
-export function CombinedActivity(props: { limit?: number }) {
+export function CombinedActivity() {
     const [state, _actions] = useMegaStore();
     const i18n = useI18n();
 
@@ -219,18 +235,6 @@ export function CombinedActivity(props: { limit?: number }) {
                         <NiceP>Don't forget to back up your seed words!</NiceP>
                     </Card>
                 </Match>
-                <Match when={props.limit && activity().length > props.limit}>
-                    <div class="flex w-full flex-col divide-y divide-m-grey-800 overflow-x-clip">
-                        <For each={activity().slice(0, props.limit)}>
-                            {(activityItem) => (
-                                <UnifiedActivityItem
-                                    item={activityItem}
-                                    onClick={openDetailsModal}
-                                />
-                            )}
-                        </For>
-                    </div>
-                </Match>
                 <Match when={activity().length >= 0}>
                     <div class="flex w-full flex-col divide-y divide-m-grey-800 overflow-x-clip">
                         <For each={activity()}>
@@ -244,15 +248,6 @@ export function CombinedActivity(props: { limit?: number }) {
                     </div>
                 </Match>
             </Switch>
-            {/* Only show on the home screen */}
-            <Show when={props.limit}>
-                <A
-                    href="/activity"
-                    class="self-center font-semibold text-m-red no-underline active:text-m-red/80"
-                >
-                    {i18n.t("activity.view_all")}
-                </A>
-            </Show>
         </>
     );
 }

src/components/Activity.tsx

@@ -217,11 +217,13 @@ function LightningDetails(props: { info: MutinyInvoice; tags?: TagItem }) {
                         </TinyButton>
                     </KeyValue>
                 </Show>
-                <KeyValue key={i18n.t("activity.transaction_details.status")}>
-                    {props.info.paid
-                        ? i18n.t("activity.transaction_details.paid")
-                        : i18n.t("activity.transaction_details.unpaid")}
-                </KeyValue>
+                <Show when={!props.info.paid}>
+                    <KeyValue
+                        key={i18n.t("activity.transaction_details.status")}
+                    >
+                        i18n.t("activity.transaction_details.unpaid")
+                    </KeyValue>
+                </Show>
                 <KeyValue key={i18n.t("activity.transaction_details.date")}>
                     <FormatPrettyPrint ts={Number(props.info.last_updated)} />
                 </KeyValue>
@@ -235,12 +237,7 @@ function LightningDetails(props: { info: MutinyInvoice; tags?: TagItem }) {
                 <KeyValue key={i18n.t("activity.transaction_details.invoice")}>
                     <MiniStringShower text={props.info.bolt11 ?? ""} />
                 </KeyValue>
-                <KeyValue
-                    key={i18n.t("activity.transaction_details.payment_hash")}
-                >
-                    <MiniStringShower text={props.info.payment_hash ?? ""} />
-                </KeyValue>
-                <Show when={props.info.paid}>
+                <Show when={props.info.paid && !props.info.inbound}>
                     <KeyValue
                         key={i18n.t(
                             "activity.transaction_details.payment_preimage"
@@ -371,11 +368,6 @@ function OnchainDetails(props: {
                         "Pending"
                     )}
                 </KeyValue>
-                <Show when={props.kind === "ChannelOpen" && channelInfo()}>
-                    <KeyValue key={i18n.t("activity.transaction_details.peer")}>
-                        <MiniStringShower text={channelInfo()?.peer ?? ""} />
-                    </KeyValue>
-                </Show>
                 <KeyValue key={i18n.t("activity.transaction_details.txid")}>
                     <div class="flex gap-1">
                         {/* Have to do all these shenanigans because css / html is hard */}

src/components/ActivityDetailsModal.tsx

@@ -8,13 +8,12 @@ export function ContactButton(props: {
     onClick: () => void;
 }) {
     return (
-        <div class="flex items-center gap-2">
+        <button class="flex items-center gap-2" onClick={() => props.onClick()}>
             <LabelCircle
                 name={props.contact.name}
                 image_url={props.contact.primal_image_url}
                 contact
                 label={false}
-                onClick={() => props.onClick()}
             />
             <div class="flex flex-1 flex-col items-start">
                 <h2 class="overflow-hidden overflow-ellipsis text-base font-semibold">
@@ -24,6 +23,6 @@ export function ContactButton(props: {
                     {props.contact.ln_address || ""}
                 </h3>
             </div>
-        </div>
+        </button>
     );
 }

src/components/ContactButton.tsx

@@ -11,7 +11,6 @@ import {
     MiniStringShower,
     showToast,
     SimpleDialog,
-    SmallHeader,
     VStack
 } from "~/components";
 import { useI18n } from "~/i18n/context";

src/components/ContactViewer.tsx

@@ -33,10 +33,10 @@ export function FabMenu(props: {
     return (
         <nav
             ref={(el) => (navRef = el)}
-            class="fixed bottom-[calc(2rem+5rem)]  rounded-xl bg-neutral-700/30 px-2 backdrop-blur-lg"
+            class="fixed rounded-xl bg-neutral-700/30 px-2 backdrop-blur-lg"
             classList={{
-                "right-8": props.right,
-                "left-8": props.left
+                "right-8 bottom-[calc(2rem+5rem)]": props.right,
+                "left-4 bottom-[calc(2rem+2rem)]": props.left
             }}
         >
             {props.children}

src/components/Fab.tsx

@@ -6,20 +6,20 @@ import redClose from "~/assets/icons/red-close.svg";
 import { Clock } from "~/assets/svg/Clock";
 import { Globe } from "~/assets/svg/Globe";
 import { PrivateEye } from "~/assets/svg/Private";
-import { LabelCircle, LoadingSpinner, SharpButton } from "~/components";
+import { LabelCircle, LoadingSpinner } from "~/components";
 
 export function GenericItem(props: {
     primaryAvatarUrl: string;
     secondaryAvatarUrl?: string;
     primaryName: string;
     secondaryName?: string;
-    verb: string;
+    verb?: string;
     amount?: bigint;
     date?: string;
     due?: string;
     message?: string;
     accent?: "green";
-    public?: boolean;
+    visibility?: "public" | "private";
     showFiat?: boolean;
     genericAvatar?: boolean;
     forceSecondary?: boolean;
@@ -48,21 +48,23 @@ export function GenericItem(props: {
                     onClick={props.primaryOnClick}
                 />
             </div>
-            <div class="flex flex-col items-start gap-1 px-2">
+            <div class="flex flex-col items-start justify-center gap-1 self-center px-2">
                 {/* TITLE TEXT */}
-                <h2 class="text-sm">
-                    <strong
-                        classList={{
-                            "text-m-grey-400": props.genericAvatar
-                        }}
-                    >
-                        {props.primaryName}
-                    </strong>
-                    <span class="font-light">{` ${props.verb} `}</span>
-                    <Show when={props.secondaryName}>
-                        <strong>{props.secondaryName}</strong>
-                    </Show>
-                </h2>
+                <Show when={props.primaryName && props.verb}>
+                    <h2 class="text-sm">
+                        <strong
+                            classList={{
+                                "text-m-grey-400": props.genericAvatar
+                            }}
+                        >
+                            {props.primaryName}
+                        </strong>
+                        <span class="font-light">{` ${props.verb} `}</span>
+                        <Show when={props.secondaryName}>
+                            <strong>{props.secondaryName}</strong>
+                        </Show>
+                    </h2>
+                </Show>
                 <div class="flex flex-wrap gap-1">
                     {/* AMOUNT */}
                     <Show when={props.amount}>
@@ -102,11 +104,11 @@ export function GenericItem(props: {
                 {/* DATE WITH SECOND AVATAR */}
                 <Show when={props.date}>
                     <div class="flex items-center gap-1 text-m-grey-400">
-                        <Show when={props.public}>
+                        <Show when={props.visibility === "public"}>
                             {/* <img src={globe} width={12} height={12} /> */}
                             <Globe />
                         </Show>
-                        <Show when={!props.public}>
+                        <Show when={props.visibility === "private"}>
                             <PrivateEye />
                             {/* <img src={privateEye} width={12} height={12} /> */}
                         </Show>
@@ -151,19 +153,19 @@ export function GenericItem(props: {
                     >
                         <div class="flex gap-4">
                             <button
-                                class="rounded border-b border-t border-b-white/10 border-t-white/50 bg-m-grey-750 active:-mb-[1px] active:mt-[1px]"
+                                class="flex h-10 w-10 items-center justify-center rounded border-b border-t border-b-white/10 border-t-white/50 bg-m-grey-750 p-1 active:-mb-[1px] active:mt-[1px]"
                                 onClick={() =>
                                     props.approveAction && props.approveAction()
                                 }
                             >
                                 <img
-                                    class="h-[1.5rem] w-[1.5rem]"
+                                    class="h-[2rem] w-[2rem]"
                                     src={greenCheck}
                                     alt="Approve"
                                 />
                             </button>
                             <button
-                                class="rounded border-b border-t border-b-white/10 border-t-white/50 bg-m-grey-750 active:-mb-[1px] active:mt-[1px]"
+                                class="flex h-10 w-10 items-center justify-center rounded border-b border-t border-b-white/10 border-t-white/50 bg-m-grey-750 p-1 active:-mb-[1px] active:mt-[1px]"
                                 onClick={() =>
                                     props.rejectAction && props.rejectAction()
                                 }

src/components/GenericItem.tsx

@@ -1,4 +1,10 @@
-import { createSignal, Show, Suspense } from "solid-js";
+import {
+    createEffect,
+    createResource,
+    createSignal,
+    Show,
+    Suspense
+} from "solid-js";
 
 import {
     CombinedActivity,
@@ -18,6 +24,23 @@ export function HomeSubnav() {
         "me" | "everybody" | "requests"
     >("me");
 
+    const [pending, { refetch }] = createResource(async () => {
+        try {
+            const pending =
+                await state.mutiny_wallet?.get_pending_nwc_invoices();
+            return pending?.length || 0;
+        } catch (e) {
+            console.error(e);
+            return 0;
+        }
+    });
+
+    createEffect(() => {
+        if (state.is_syncing) {
+            refetch();
+        }
+    });
+
     return (
         <>
             <div class="flex gap-2">
@@ -44,15 +67,27 @@ export function HomeSubnav() {
                 </button>
 
                 <button
-                    class="rounded px-2 py-1 text-sm"
+                    class="flex items-center gap-1 rounded px-2 py-1 text-sm"
                     classList={{
                         "bg-m-red": activeView() === "requests",
                         "bg-m-grey-800 text-m-grey-400":
                             activeView() !== "requests"
                     }}
                     onClick={() => setActiveView("requests")}
                 >
-                    Requests
+                    <span>Requests </span>
+                    <Suspense fallback={<></>}>
+                        <Show when={pending.latest && pending.latest > 0}>
+                            <span
+                                class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-xs"
+                                classList={{
+                                    "text-white": !!((pending.latest || 0) > 0)
+                                }}
+                            >
+                                {pending()}
+                            </span>
+                        </Show>
+                    </Suspense>
                 </button>
             </div>