new activity design

src/components/Activity.tsx

@@ -10,6 +10,7 @@ import mempoolTxUrl from '~/utils/mempoolTxUrl';
 import wave from "~/assets/wave.gif"
 import utxoIcon from '~/assets/icons/coin.svg';
 import { getRedshifted } from '~/utils/fakeLabels';
+import { ActivityItem } from './ActivityItem';
 
 export const THREE_COLUMNS = 'grid grid-cols-[auto,1fr,auto] gap-4 py-2 px-2 border-b border-neutral-800 last:border-b-0'
 export const CENTER_COLUMN = 'min-w-0 overflow-hidden max-w-full'
@@ -57,7 +58,15 @@ function OnChainItem(props: { item: OnChainTx }) {
                     Mempool Link
                 </a>
             </JsonModal>
-            <div class={THREE_COLUMNS} onClick={() => setOpen(!open())}>
+            <ActivityItem
+                kind={"onchain"}
+                labels={[]}
+                amount={isReceive() ? props.item.received : props.item.sent}
+                date={props.item.confirmation_time?.Confirmed?.time}
+                positive={isReceive()}
+                onClick={() => setOpen(!open())}
+            />
+            {/* <div class={THREE_COLUMNS} onClick={() => setOpen(!open())}>
                 <div class="flex items-center">
                     {isReceive() ? <img src={receive} alt="receive arrow" /> : <img src={send} alt="send arrow" />}
                 </div>
@@ -71,7 +80,7 @@ function OnChainItem(props: { item: OnChainTx }) {
                     </SmallHeader>
                     <SubtleText>{props.item.confirmation_time?.Confirmed ? prettyPrintTime(props.item.confirmation_time?.Confirmed?.time) : "Unconfirmed"}</SubtleText>
                 </div>
-            </div>
+            </div> */}
         </>
     )
 }
@@ -84,7 +93,8 @@ function InvoiceItem(props: { item: MutinyInvoice }) {
     return (
         <>
             <JsonModal open={open()} data={props.item} title="Lightning Transaction" setOpen={setOpen} />
-            <div class={THREE_COLUMNS} onClick={() => setOpen(!open())}>
+            <ActivityItem kind={"lightning"} labels={[]} amount={props.item.amount_sats || 0n} date={props.item.last_updated} positive={!isSend()} onClick={() => setOpen(!open())} />
+            {/* <div class={THREE_COLUMNS} onClick={() => setOpen(!open())}>
                 <div class="flex items-center">
                     {isSend() ? <img src={send} alt="send arrow" /> : <img src={receive} alt="receive arrow" />}
                 </div>
@@ -98,7 +108,7 @@ function InvoiceItem(props: { item: MutinyInvoice }) {
                     </SmallHeader>
                     <SubtleText>{prettyPrintTime(Number(props.item.expire))}</SubtleText>
                 </div>
-            </div >
+            </div > */}
         </>
     )
 }
@@ -243,7 +253,9 @@ export function CombinedActivity(props: { limit?: number }) {
         })
 
         invoices.forEach((invoice) => {
-            activity.push({ type: "lightning", item: invoice, time: Number(invoice.expire) })
+            if (invoice.paid) {
+                activity.push({ type: "lightning", item: invoice, time: Number(invoice.expire) })
+            }
         })
 
         if (props.limit) {

src/components/ActivityItem.tsx

@@ -0,0 +1,72 @@
+import { ParentComponent, createMemo } from "solid-js";
+import { InlineAmount } from "./AmountCard";
+import { satsToUsd } from "~/utils/conversions";
+import bolt from "~/assets/icons/bolt.svg"
+import chain from "~/assets/icons/chain.svg"
+import { timeAgo } from "~/utils/prettyPrintTime";
+
+export const ActivityAmount: ParentComponent<{ amount: string, price: number, positive?: boolean }> = (props) => {
+    const amountInUsd = createMemo(() => {
+        const parsed = Number(props.amount);
+        if (isNaN(parsed)) {
+            return props.amount;
+        } else {
+            return satsToUsd(props.price, parsed, true);
+        }
+    })
+
+    const prettyPrint = createMemo(() => {
+        const parsed = Number(props.amount);
+        if (isNaN(parsed)) {
+            return props.amount;
+        } else {
+            return parsed.toLocaleString();
+        }
+    })
+
+    return (
+        <div class="flex flex-col items-end">
+            <div class="text-base"
+                classList={{ "text-m-green": props.positive }}
+            >{props.positive && "+ "}{prettyPrint()}&nbsp;<span class="text-sm">SATS</span>
+            </div>
+            <div class="text-sm text-neutral-500">&#8776;&nbsp;{amountInUsd()}&nbsp;<span class="text-sm">USD</span></div>
+        </div>
+    )
+}
+
+function LabelCircle(props: { name: string }) {
+    return (
+        <div class="flex-none h-[3rem] w-[3rem] rounded-full flex items-center justify-center text-3xl uppercase border-t border-b border-t-white/50 border-b-white/10"
+            style={{ background: "gray" }}
+        >
+            {props.name[0] || "?"}
+        </div>
+    )
+}
+
+export function ActivityItem(props: { kind: "lightning" | "onchain", labels: string[], amount: number | bigint, date?: number | bigint, positive?: boolean, onClick?: () => void }) {
+    return (
+        <div
+            onClick={() => props.onClick && props.onClick()}
+            class="grid grid-cols-[auto_minmax(0,_1fr)_minmax(0,_max-content)] pb-4 gap-4 border-b border-neutral-800 last:border-b-0"
+            classList={{ "cursor-pointer": !!props.onClick }}
+        >
+            <div class="flex gap-2 md:gap-4 items-center">
+                <div class="">
+                    {props.kind === "lightning" ? <img src={bolt} alt="lightning" /> : <img src={chain} alt="onchain" />}
+                </div>
+                <div class="">
+                    <LabelCircle name={props.labels.length ? props.labels[0] : "?"} />
+                </div>
+            </div>
+            <div class="flex flex-col">
+                <span class="text-base font-semibold truncate" classList={{ "text-neutral-500": props.labels.length === 0 }}>{props.labels.length ? props.labels[0] : "Unknown"}</span>
+                <time class="text-sm text-neutral-500">{timeAgo(props.date)}</time>
+            </div>
+            <div class="">
+                <ActivityAmount amount={props.amount.toString()} price={30000} positive={props.positive} />
+            </div>
+        </div>
+    )
+}

src/components/App.tsx

@@ -21,11 +21,12 @@ export default function App() {
                     <ReloadPrompt />
                     <BalanceBox />
                     <Card title="Activity">
+                        <div class="p-1" />
                         <VStack>
                             <CombinedActivity limit={3} />
                             {/* <ButtonLink href="/activity">View All</ButtonLink> */}
-                            <A href="/activity" class="text-m-red active:text-m-red/80 text-xl font-semibold no-underline self-center">View All</A>
                         </VStack>
+                        <A href="/activity" class="text-m-red active:text-m-red/80 text-xl font-semibold no-underline self-center">View All</A>
                     </Card>
                 </DefaultMain>
                 <NavBar activeTab="home" />