{props.loading ? "..." : prettyPrintAmount(props.amountSats)} SATS @@ -32,7 +32,7 @@ export function Amount(props: {
Bugs? Feedback?{" "}
-
- Create an issue
-
+
+
-
)
+ return (
+ - -
-- -
-
+
+ );
}
-const STYLE = "px-2 py-1 rounded-xl border border-neutral-400 text-sm flex gap-2 items-center font-semibold"
+const STYLE =
+ "px-2 py-1 rounded-xl border border-neutral-400 text-sm flex gap-2 items-center font-semibold";
export default function BalanceBox(props: { loading?: boolean }) {
- const [state, _actions] = useMegaStore();
+ const [state, _actions] = useMegaStore();
- const emptyBalance = () => (state.balance?.confirmed || 0n) === 0n && (state.balance?.lightning || 0n) === 0n
+ const emptyBalance = () =>
+ (state.balance?.confirmed || 0n) === 0n &&
+ (state.balance?.lightning || 0n) === 0n &&
+ (state.balance?.unconfirmed || 0n) === 0n;
- const navigate = useNavigate()
+ const navigate = useNavigate();
- return (
- <>
- + +
++ +
+
-
-
-
-
- 
-
-
-
-
- Unconfirmed Balance
-
-
-
- {prettyPrintAmount(state.balance?.unconfirmed)} SATS
-
-
-
-
-
-
- )
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
}
diff --git a/src/components/KitchenSink.tsx b/src/components/KitchenSink.tsx
index bfa9cef..7b90dfd 100644
--- a/src/components/KitchenSink.tsx
+++ b/src/components/KitchenSink.tsx
@@ -11,170 +11,187 @@ import { ConfirmDialog } from "~/components/Dialog";
import { showToast } from "~/components/Toaster";
import { ImportExport } from "~/components/ImportExport";
import { Network } from "~/logic/mutinyWalletSetup";
+import { ExternalLink } from "./layout/ExternalLink";
// TODO: hopefully I don't have to maintain this type forever but I don't know how to pass it around otherwise
-type RefetchPeersType = (info?: unknown) => MutinyPeer[] | Promise- {">"} {props.peer.alias ? props.peer.alias : props.peer.pubkey} -
-
- {JSON.stringify(props.peer, null, 2)}
-
-
- + {">"} {props.peer.alias ? props.peer.alias : props.peer.pubkey} +
+
+ {JSON.stringify(props.peer, null, 2)}
+
+
+ - {">"} {props.channel.peer} -
-
- {JSON.stringify(props.channel, null, 2)}
-
-
- Mempool Link
-
-
-
- Are you sure you want to close this channel?
-+ {">"} {props.channel.peer} +
+
+ {JSON.stringify(props.channel, null, 2)}
+
+ Are you sure you want to close this channel?
+
- {JSON.stringify(newChannel()?.outpoint, null, 2)}
-
- {newChannel()?.outpoint}
-
- Mempool Link
-
- {creationError()?.message}
-
+ {JSON.stringify(newChannel()?.outpoint, null, 2)}
+
+ {newChannel()?.outpoint}
+ {creationError()?.message}
+
-
-
- {props.children}
-
-
-
-
-
-
- {props.title}
-
-
-
- 
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
+
-
-
-
-
-
-
- }
-
-
- )
+ {choice.label}
+
-
-
-
- {choice.label}
- {choice.caption}
- {choice.caption}
+
- 
;
+}
diff --git a/src/components/successfail/MegaEx.tsx b/src/components/successfail/MegaEx.tsx
new file mode 100644
index 0000000..7468d15
--- /dev/null
+++ b/src/components/successfail/MegaEx.tsx
@@ -0,0 +1,5 @@
+import megaex from "~/assets/icons/megaex.png";
+
+export function MegaEx() {
+ return 
;
+}
diff --git a/src/components/successfail/SuccessModal.tsx b/src/components/successfail/SuccessModal.tsx
new file mode 100644
index 0000000..1c3e13f
--- /dev/null
+++ b/src/components/successfail/SuccessModal.tsx
@@ -0,0 +1,43 @@
+import { Dialog } from "@kobalte/core";
+import { JSX } from "solid-js";
+import { Button, LargeHeader } from "~/components/layout";
+import { DIALOG_CONTENT, DIALOG_POSITIONER } from "~/styles/dialogs";
+
+type SuccessModalProps = {
+ title: string;
+ open: boolean;
+ setOpen: (open: boolean) => void;
+ children?: JSX.Element;
+ onConfirm?: () => void;
+ confirmText?: string;
+};
+
+export function SuccessModal(props: SuccessModalProps) {
+ const onNice = () => {
+ props.onConfirm ? props.onConfirm() : props.setOpen(false);
+ };
+
+ //
- {props.title && {props.title} }
- {props.tag && props.tag}
-
- {props.children}
+export const FancyCard: ParentComponent<{
+ title?: string;
+ subtitle?: string;
+ tag?: JSX.Element;
+}> = (props) => {
+ return (
+
+
+ );
+};
export const SafeArea: ParentComponent = (props) => {
return (
diff --git a/src/components/successfail/MegaCheck.tsx b/src/components/successfail/MegaCheck.tsx
new file mode 100644
index 0000000..a681a62
--- /dev/null
+++ b/src/components/successfail/MegaCheck.tsx
@@ -0,0 +1,5 @@
+import megacheck from "~/assets/icons/megacheck.png";
+
+export function MegaCheck() {
+ return
+
+ {props.children}
+
+ {props.title && {props.title} }
+ {props.subtitle && {props.subtitle} }
- )
-}
+ {props.tag && props.tag}
+
+ return (
+
+
+
+
+ );
+}
diff --git a/src/root.css b/src/root.css
index a69d595..f5540cc 100644
--- a/src/root.css
+++ b/src/root.css
@@ -50,4 +50,4 @@ select {
background-position: right 0.75rem center;
background-size: 20px 20px;
background-repeat: no-repeat;
-}
+}
\ No newline at end of file
diff --git a/src/routes/Receive.tsx b/src/routes/Receive.tsx
index 17129c6..0a56d0d 100644
--- a/src/routes/Receive.tsx
+++ b/src/routes/Receive.tsx
@@ -7,254 +7,285 @@ import { useMegaStore } from "~/state/megaStore";
import { objectToSearchParams } from "~/utils/objectToSearchParams";
import mempoolTxUrl from "~/utils/mempoolTxUrl";
import { Amount } from "~/components/Amount";
-import { FullscreenModal } from "~/components/layout/FullscreenModal";
import { BackLink } from "~/components/layout/BackLink";
import { TagEditor } from "~/components/TagEditor";
import { StyledRadioGroup } from "~/components/layout/Radio";
import { showToast } from "~/components/Toaster";
import { useNavigate } from "solid-start";
-import megacheck from "~/assets/icons/megacheck.png";
import { AmountCard } from "~/components/AmountCard";
import { ShareCard } from "~/components/ShareCard";
import { BackButton } from "~/components/layout/BackButton";
import { MutinyTagItem } from "~/utils/tags";
import { Network } from "~/logic/mutinyWalletSetup";
+import { SuccessModal } from "~/components/successfail/SuccessModal";
+import { MegaCheck } from "~/components/successfail/MegaCheck";
+import { ExternalLink } from "~/components/layout/ExternalLink";
type OnChainTx = {
- transaction: {
- version: number
- lock_time: number
- input: Array<{
- previous_output: string
- script_sig: string
- sequence: number
- witness: Array
- }>
- output: Array<{
- value: number
- script_pubkey: string
- }>
- }
- txid: string
- received: number
- sent: number
- confirmation_time: {
- height: number
- timestamp: number
- }
-}
+ transaction: {
+ version: number;
+ lock_time: number;
+ input: Array<{
+ previous_output: string;
+ script_sig: string;
+ sequence: number;
+ witness: Array;
+ }>;
+ output: Array<{
+ value: number;
+ script_pubkey: string;
+ }>;
+ };
+ txid: string;
+ received: number;
+ sent: number;
+ confirmation_time: {
+ height: number;
+ timestamp: number;
+ };
+};
-const RECEIVE_FLAVORS = [{ value: "unified", label: "Unified", caption: "Sender decides" }, { value: "lightning", label: "Lightning", caption: "Fast and cool" }, { value: "onchain", label: "On-chain", caption: "Just like Satoshi did it" }]
+const RECEIVE_FLAVORS = [
+ { value: "unified", label: "Unified", caption: "Sender decides" },
+ { value: "lightning", label: "Lightning", caption: "Fast and cool" },
+ { value: "onchain", label: "On-chain", caption: "Just like Satoshi did it" }
+];
-type ReceiveFlavor = "unified" | "lightning" | "onchain"
-type ReceiveState = "edit" | "show" | "paid"
+type ReceiveFlavor = "unified" | "lightning" | "onchain";
+type ReceiveState = "edit" | "show" | "paid";
type PaidState = "lightning_paid" | "onchain_paid";
export default function Receive() {
- const [state, _actions] = useMegaStore()
- const navigate = useNavigate();
+ const [state, _actions] = useMegaStore();
+ const navigate = useNavigate();
- const [amount, setAmount] = createSignal("")
- const [receiveState, setReceiveState] = createSignal("edit")
- const [bip21Raw, setBip21Raw] = createSignal();
- const [unified, setUnified] = createSignal("")
- const [shouldShowAmountEditor, setShouldShowAmountEditor] = createSignal(true)
+ const [amount, setAmount] = createSignal("");
+ const [receiveState, setReceiveState] = createSignal("edit");
+ const [bip21Raw, setBip21Raw] = createSignal();
+ const [unified, setUnified] = createSignal("");
+ const [shouldShowAmountEditor, setShouldShowAmountEditor] = createSignal(true);
- // Tagging stuff
- const [selectedValues, setSelectedValues] = createSignal([]);
+ // Tagging stuff
+ const [selectedValues, setSelectedValues] = createSignal([]);
- // The data we get after a payment
- const [paymentTx, setPaymentTx] = createSignal();
- const [paymentInvoice, setPaymentInvoice] = createSignal();
+ // The data we get after a payment
+ const [paymentTx, setPaymentTx] = createSignal();
+ const [paymentInvoice, setPaymentInvoice] = createSignal();
- // The flavor of the receive
- const [flavor, setFlavor] = createSignal("unified");
+ // The flavor of the receive
+ const [flavor, setFlavor] = createSignal("unified");
- const receiveString = createMemo(() => {
- if (unified() && receiveState() === "show") {
- if (flavor() === "unified") {
- return unified();
- } else if (flavor() === "lightning") {
- return bip21Raw()?.invoice ?? "";
- } else if (flavor() === "onchain") {
- return bip21Raw()?.address ?? "";
- }
+ const receiveString = createMemo(() => {
+ if (unified() && receiveState() === "show") {
+ if (flavor() === "unified") {
+ return unified();
+ } else if (flavor() === "lightning") {
+ return bip21Raw()?.invoice ?? "";
+ } else if (flavor() === "onchain") {
+ return bip21Raw()?.address ?? "";
+ }
+ }
+ });
+ function clearAll() {
+ setAmount("");
+ setReceiveState("edit");
+ setBip21Raw(undefined);
+ setUnified("");
+ setPaymentTx(undefined);
+ setPaymentInvoice(undefined);
+ setSelectedValues([]);
+ }
+
+ async function processContacts(contacts: Partial[]): Promise {
+ console.log("Processing contacts", contacts);
+
+ if (contacts.length) {
+ const first = contacts![0];
+
+ if (!first.name) {
+ console.error("Something went wrong with contact creation, proceeding anyway");
+ return [];
+ }
+
+ if (!first.id && first.name) {
+ console.error("Creating new contact", first.name);
+ const c = new Contact(first.name, undefined, undefined, undefined);
+ const newContactId = await state.mutiny_wallet?.create_new_contact(c);
+ if (newContactId) {
+ return [newContactId];
}
- })
+ }
- function clearAll() {
- setAmount("")
- setReceiveState("edit")
- setBip21Raw(undefined)
- setUnified("")
- setPaymentTx(undefined)
- setPaymentInvoice(undefined)
- setSelectedValues([])
+ if (first.id) {
+ console.error("Using existing contact", first.name, first.id);
+ return [first.id];
+ }
}
- async function processContacts(contacts: Partial[]): Promise {
- console.log("Processing contacts", contacts)
+ console.error("Something went wrong with contact creation, proceeding anyway");
+ return [];
+ }
- if (contacts.length) {
- const first = contacts![0];
+ async function getUnifiedQr(amount: string) {
+ const bigAmount = BigInt(amount);
+ try {
+ const tags = await processContacts(selectedValues());
+ const raw = await state.mutiny_wallet?.create_bip21(bigAmount, tags);
+ // Save the raw info so we can watch the address and invoice
+ setBip21Raw(raw);
- if (!first.name) {
- console.error("Something went wrong with contact creation, proceeding anyway")
- return []
- }
-
- if (!first.id && first.name) {
- console.error("Creating new contact", first.name)
- const c = new Contact(first.name, undefined, undefined, undefined);
- const newContactId = await state.mutiny_wallet?.create_new_contact(c);
- if (newContactId) {
- return [newContactId];
- }
- }
-
- if (first.id) {
- console.error("Using existing contact", first.name, first.id)
- return [first.id];
- }
-
- }
-
- console.error("Something went wrong with contact creation, proceeding anyway")
- return []
+ const params = objectToSearchParams({
+ amount: raw?.btc_amount,
+ lightning: raw?.invoice
+ });
+ return `bitcoin:${raw?.address}?${params}`;
+ } catch (e) {
+ showToast(new Error("Couldn't create invoice. Are you asking for enough?"));
+ console.error(e);
}
+ }
- async function getUnifiedQr(amount: string) {
- const bigAmount = BigInt(amount);
- try {
- const tags = await processContacts(selectedValues());
- const raw = await state.mutiny_wallet?.create_bip21(bigAmount, tags);
- // Save the raw info so we can watch the address and invoice
- setBip21Raw(raw);
+ async function onSubmit(e: Event) {
+ e.preventDefault();
- const params = objectToSearchParams({
- amount: raw?.btc_amount,
- lightning: raw?.invoice
- })
+ const unifiedQr = await getUnifiedQr(amount());
- return `bitcoin:${raw?.address}?${params}`
+ setUnified(unifiedQr || "");
+ setReceiveState("show");
+ setShouldShowAmountEditor(false);
+ }
- } catch (e) {
- showToast(new Error("Couldn't create invoice. Are you asking for enough?"))
- console.error(e)
- }
+ async function checkIfPaid(bip21?: MutinyBip21RawMaterials): Promise {
+ if (bip21) {
+ console.log("checking if paid...");
+ const lightning = bip21.invoice;
+ const address = bip21.address;
+
+ const invoice = await state.mutiny_wallet?.get_invoice(lightning);
+
+ if (invoice && invoice.paid) {
+ setReceiveState("paid");
+ setPaymentInvoice(invoice);
+ return "lightning_paid";
+ }
+
+ const tx = (await state.mutiny_wallet?.check_address(address)) as OnChainTx | undefined;
+
+ if (tx) {
+ setReceiveState("paid");
+ setPaymentTx(tx);
+ return "onchain_paid";
+ }
}
+ }
- async function onSubmit(e: Event) {
- e.preventDefault();
+ const [paidState, { refetch }] = createResource(bip21Raw, checkIfPaid);
- const unifiedQr = await getUnifiedQr(amount())
+ const network = state.mutiny_wallet?.get_network() as Network;
- setUnified(unifiedQr || "")
- setReceiveState("show")
- setShouldShowAmountEditor(false)
- }
-
- async function checkIfPaid(bip21?: MutinyBip21RawMaterials): Promise {
- if (bip21) {
- console.log("checking if paid...")
- const lightning = bip21.invoice
- const address = bip21.address
-
- const invoice = await state.mutiny_wallet?.get_invoice(lightning)
-
- if (invoice && invoice.paid) {
- setReceiveState("paid")
- setPaymentInvoice(invoice)
- return "lightning_paid"
- }
-
- const tx = await state.mutiny_wallet?.check_address(address) as OnChainTx | undefined;
-
- if (tx) {
- setReceiveState("paid")
- setPaymentTx(tx)
- return "onchain_paid"
- }
- }
- }
-
- const [paidState, { refetch }] = createResource(bip21Raw, checkIfPaid);
-
- const network = state.mutiny_wallet?.get_network() as Network;
-
- createEffect(() => {
- const interval = setInterval(() => {
- if (receiveState() === "show") refetch();
- }, 1000); // Poll every second
- onCleanup(() => {
- clearInterval(interval);
- });
+ createEffect(() => {
+ const interval = setInterval(() => {
+ if (receiveState() === "show") refetch();
+ }, 1000); // Poll every second
+ onCleanup(() => {
+ clearInterval(interval);
});
+ });
- return (
-
-
-
- setReceiveState("edit")} title="Edit" />
-
- Checking}>Receive Bitcoin
-
-
-
+
+
+
+ {
+ if (!open) clearAll();
+ }}
+ onConfirm={() => {
+ clearAll();
+ navigate("/");
+ }}
+ >
+
+
+
+ {
+ if (!open) clearAll();
+ }}
+ onConfirm={() => {
+ clearAll();
+ navigate("/");
+ }}
+ >
+
+ View Transaction
+
+
+
+
+
+
+
+ );
}
\ No newline at end of file
diff --git a/src/routes/Send.tsx b/src/routes/Send.tsx
index 36c06f2..b4c8f3f 100644
--- a/src/routes/Send.tsx
+++ b/src/routes/Send.tsx
@@ -21,7 +21,6 @@ import { StyledRadioGroup } from "~/components/layout/Radio";
import { ParsedParams, toParsedParams } from "./Scanner";
import { showToast } from "~/components/Toaster";
import eify from "~/utils/eify";
-import { FullscreenModal } from "~/components/layout/FullscreenModal";
import megacheck from "~/assets/icons/megacheck.png";
import megaex from "~/assets/icons/megaex.png";
import mempoolTxUrl from "~/utils/mempoolTxUrl";
@@ -33,6 +32,8 @@ import { AmountCard } from "~/components/AmountCard";
import { MutinyTagItem } from "~/utils/tags";
import { BackButton } from "~/components/layout/BackButton";
import { Network } from "~/logic/mutinyWalletSetup";
+import { SuccessModal } from "~/components/successfail/SuccessModal";
+import { ExternalLink } from "~/components/layout/ExternalLink";
export type SendSource = "lightning" | "onchain";
@@ -121,7 +122,7 @@ function DestinationInput(props: {
class="p-2 rounded-lg bg-white/10 placeholder-neutral-400"
/>
+
+
+ {props.children}
+
+
+
+
+
+ {props.title}
+
+
+
+
+
+
+
-
+
+
+ setReceiveState("edit")} title="Edit" />
+
+ Checking}>
+ Receive Bitcoin
+
+
+
+
-
-
-
- { if (!open) clearAll() }}
- onConfirm={() => { clearAll(); navigate("/"); }}
- >
-
-
-
- { if (!open) clearAll() }}
- onConfirm={() => { clearAll(); navigate("/"); }}
- >
-
-
-
-
-
-
-
- )
+
+
+
+
+
-
+
+
-
-
-
-
-
- Show or share this code with the sender
-
-
-
-
+
+ Show or share this code with the sender
+