{props.positive && "+ "}{prettyPrint()}
SATS
@@ -74,6 +75,7 @@ function labelString(labels: MutinyTagItem[]) {
export function ActivityItem(props: { kind: "lightning" | "onchain", labels: MutinyTagItem[], amount: number | bigint, date?: number | bigint, positive?: boolean, onClick?: () => void }) {
const labels = () => sortLabels(props.labels)
+ const [state, _actions] = useMegaStore();
return (
props.onClick && props.onClick()}
@@ -93,7 +95,7 @@ export function ActivityItem(props: { kind: "lightning" | "onchain", labels: Mut
)
diff --git a/src/components/DetailsModal.tsx b/src/components/DetailsModal.tsx
new file mode 100644
index 0000000..71036ea
--- /dev/null
+++ b/src/components/DetailsModal.tsx
@@ -0,0 +1,142 @@
+import { Dialog } from "@kobalte/core";
+import { For, JSX, ParentComponent, Show, createMemo } from "solid-js";
+import { Hr, TinyButton, VStack } from "~/components/layout";
+import { MutinyInvoice } from "@mutinywallet/mutiny-wasm";
+import { OnChainTx } from "./Activity";
+
+import eyeIcon from "~/assets/icons/eye.svg"
+import close from "~/assets/icons/close.svg";
+import bolt from "~/assets/icons/bolt-black.svg";
+
+import { ActivityAmount } from "./ActivityItem";
+import { CopyButton } from "./ShareCard";
+import { prettyPrintTime } from "~/utils/prettyPrintTime";
+import { useMegaStore } from "~/state/megaStore";
+import { tagToMutinyTag } from "~/utils/tags";
+
+const OVERLAY = "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+const DIALOG_POSITIONER = "fixed inset-0 z-50 flex items-center justify-center"
+const DIALOG_CONTENT = "max-w-[500px] w-[90vw] max-h-[100dvh] overflow-y-scroll disable-scrollbars mx-4 p-4 bg-neutral-800/80 backdrop-blur-md shadow-xl rounded-xl border border-white/10"
+
+function LightningHeader(props: { info: MutinyInvoice }) {
+ const [state, _actions] = useMegaStore();
+
+ const tags = createMemo(() => {
+ if (props.info.labels.length) {
+ let contact = state.mutiny_wallet?.get_contact(props.info.labels[0]);
+ if (contact) {
+ return [tagToMutinyTag(contact)]
+ } else {
+ return []
+ }
+ } else {
+ return []
+ }
+ })
+
+ return (
+
+
+

+
+
{props.info.is_send ? "Lightning send" : "Lightning receive"}
+
+
+ {(tag) => (
+ { }}>
+ {tag.name}
+
+ )}
+
+
+ )
+}
+
+const KeyValue: ParentComponent<{ key: string }> = (props) => {
+ return (
+
+ {props.key}
+ {props.children}
+
+
+ )
+
+}
+
+function MiniStringShower(props: { text: string }) {
+ return (
+
+
{props.text}
+
+
+ )
+}
+
+function LightningDetails(props: { info: MutinyInvoice }) {
+ return (
+
+
+
+ {props.info.paid ? "Paid" : "Unpaid"}
+
+
+ {prettyPrintTime(Number(props.info.last_updated))}
+
+
+
+ {props.info.description}
+
+
+
+ {props.info.fees_paid?.toLocaleString() ?? 0}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export function DetailsModal(props: { title: string, open: boolean, data?: MutinyInvoice | OnChainTx, setOpen: (open: boolean) => void, children?: JSX.Element }) {
+ const json = createMemo(() => JSON.stringify(props.data, null, 2));
+
+ return (
+
props.setOpen(isOpen)}>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/ShareCard.tsx b/src/components/ShareCard.tsx
index 32ab3b3..abcc072 100644
--- a/src/components/ShareCard.tsx
+++ b/src/components/ShareCard.tsx
@@ -8,7 +8,7 @@ import { JsonModal } from "./JsonModal";
const STYLE = "px-4 py-2 rounded-xl border-2 border-white flex gap-2 items-center font-semibold"
-function ShareButton(props: { receiveString: string }) {
+export function ShareButton(props: { receiveString: string }) {
async function share(receiveString: string) {
// If the browser doesn't support share we can just copy the address
if (!navigator.share) {
@@ -45,20 +45,25 @@ export function StringShower(props: { text: string }) {
)
}
-export function ShareCard(props: { text?: string }) {
+export function CopyButton(props: { text?: string, title?: string }) {
const [copy, copied] = useCopy({ copiedTimeout: 1000 });
function handleCopy() {
copy(props.text ?? "")
}
+ return (
+
+ )
+}
+
+export function ShareCard(props: { text?: string }) {
return (
-
-
+
diff --git a/src/root.css b/src/root.css
index a544dea..72da87c 100644
--- a/src/root.css
+++ b/src/root.css
@@ -39,8 +39,3 @@ a {
#video-container .scan-region-highlight-svg {
display: none;
}
-
-/* Missing you sveltekit */
-dd {
- @apply mb-8 mt-2;
-}
diff --git a/src/utils/prettyPrintTime.ts b/src/utils/prettyPrintTime.ts
index de82a2a..6a94184 100644
--- a/src/utils/prettyPrintTime.ts
+++ b/src/utils/prettyPrintTime.ts
@@ -1,6 +1,5 @@
export function prettyPrintTime(ts: number) {
const options: Intl.DateTimeFormatOptions = {
- weekday: 'long',
year: 'numeric',
month: 'short',
day: 'numeric',