diff --git a/src/assets/icons/coin.svg b/src/assets/icons/coin.svg new file mode 100644 index 0000000..70d2f97 --- /dev/null +++ b/src/assets/icons/coin.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/routes/Receive.tsx b/src/routes/Receive.tsx index f63a527..772c8e3 100644 --- a/src/routes/Receive.tsx +++ b/src/routes/Receive.tsx @@ -265,7 +265,7 @@ export default function Receive() { { if (!open) clearAll() }}>
- party + party
diff --git a/src/routes/Redshift.tsx b/src/routes/Redshift.tsx index e0139af..f0a3bdd 100644 --- a/src/routes/Redshift.tsx +++ b/src/routes/Redshift.tsx @@ -1,4 +1,4 @@ -import { createEffect, createMemo, createResource, createSignal, For, Match, onMount, Suspense, Switch } from "solid-js"; +import { Component, createEffect, createMemo, createResource, createSignal, For, Match, onMount, ParentComponent, Show, Suspense, Switch } from "solid-js"; import { CENTER_COLUMN, MISSING_LABEL, REDSHIFT_LABEL, RIGHT_COLUMN, THREE_COLUMNS, UtxoItem } from "~/components/Activity"; import { Card, DefaultMain, LargeHeader, LoadingSpinner, NiceP, NodeManagerGuard, SafeArea, SmallAmount, SmallHeader, VStack } from "~/components/layout"; import { BackLink } from "~/components/layout/BackLink"; @@ -6,37 +6,164 @@ import { StyledRadioGroup } from "~/components/layout/Radio"; import NavBar from "~/components/NavBar"; import { useMegaStore } from "~/state/megaStore"; import wave from "~/assets/wave.gif" +import utxoIcon from '~/assets/icons/coin.svg'; +import { Button } from "~/components/layout/Button"; +import { ProgressBar } from "~/components/layout/ProgressBar"; +import { MutinyChannel } from "@mutinywallet/mutiny-wasm"; +import mempoolTxUrl from "~/utils/mempoolTxUrl"; +import { Amount } from "~/components/Amount"; + type ShiftOption = "utxo" | "lightning" type ShiftStage = "choose" | "observe" | "success" | "failure" -const SHIFT_OPTIONS = [{ value: "utxo", label: "UTXO", caption: "Trade your UTXO for a fresh UTXO" }, { value: "lightning", label: "Lightning", caption: "Convert your UTXO into Lightning" }] +type OutPoint = string; // Replace with the actual TypeScript type for OutPoint +type RedshiftStatus = any; // Replace with the actual TypeScript type for RedshiftStatus +type RedshiftRecipient = any; // Replace with the actual TypeScript type for RedshiftRecipient +type PublicKey = any; // Replace with the actual TypeScript type for PublicKey -import receive from '~/assets/icons/receive.svg'; -import { Button } from "~/components/layout/Button"; -import { ProgressBar } from "~/components/layout/ProgressBar"; +interface RedshiftResult { + id: bigint; + input_utxo: OutPoint; + status: RedshiftStatus; + recipient: RedshiftRecipient; + output_utxo?: OutPoint; + introduction_channel?: OutPoint; + output_channel?: OutPoint; + introduction_node: PublicKey; + amount_sats: bigint; + change_amt?: bigint; + fees_paid: bigint; +} + +const dummyRedshift: RedshiftResult = { + id: BigInt(1), + input_utxo: "44036599c37d590899e8d5d92086028695d2c2966fdc354ce1da9a9eac610a53:1", + status: {}, // Replace with a dummy value for RedshiftStatus + recipient: {}, // Replace with a dummy value for RedshiftRecipient + output_utxo: "44036599c37d590899e8d5d92086028695d2c2966fdc354ce1da9a9eac610a53:1", + introduction_channel: "a7773e57f8595848a635e9af105927cac9ecaf292d71a76456ae0455bd3c9c64:0", + output_channel: "a7773e57f8595848a635e9af105927cac9ecaf292d71a76456ae0455bd3c9c64:0", + introduction_node: {}, // Replace with a dummy value for PublicKey + amount_sats: BigInt(1000000), + change_amt: BigInt(12345), + fees_paid: BigInt(2500), +}; + +function RedshiftReport(props: { redshift: RedshiftResult }) { + const [state, _actions] = useMegaStore(); + + const getUtXos = async () => { + console.log("Getting utxos"); + return await state.node_manager?.list_utxos() as UtxoItem[]; + } + + function findUtxoByOutpoint(outpoint?: string, utxos: UtxoItem[] = []): UtxoItem | undefined { + if (!outpoint) return undefined; + return utxos.find((utxo) => utxo.outpoint === outpoint); + } + + const [utxos, { refetch: _refetchUtxos }] = createResource(getUtXos); + // + + // {/* {JSON.stringify(props.channel, null, 2)} */} + // + // + // + // {/* TODO: don't hardcode this */} + // + // View on mempool + // + // + + const inputUtxo = createMemo(() => { + console.log(utxos()) + const foundUtxo = findUtxoByOutpoint(props.redshift.input_utxo, utxos()) + console.log("Found utxo:", foundUtxo) + return foundUtxo + }) + + const outputUtxo = createMemo(() => { + return findUtxoByOutpoint(props.redshift.output_utxo, utxos()) + }) + + return ( + + + + We did it. Here's your new UTXO: + + + + + + + + What happened? + + + + + + + + + + + + + + + + + + + 
{props.redshift.introduction_channel}
+ + View on mempool + + + + + + 
{props.redshift.output_channel}
+ + View on mempool + + + + + + + + + + ) +} + +const SHIFT_OPTIONS = [{ value: "utxo", label: "UTXO", caption: "Trade your UTXO for a fresh UTXO" }, { value: "lightning", label: "Lightning", caption: "Convert your UTXO into Lightning" }] export function Utxo(props: { item: UtxoItem, onClick?: () => void, redshifted?: boolean }) { const spent = createMemo(() => props.item.is_spent); - - return ( <> -
- receive arrow - +
+
+ coin +
- {props.redshifted &&

RS

} - {!props.item.redshifted &&

Unknown

} + Unknown}> +

Redshift

+
- {props.item?.is_spent ? "SPENT" : "UNSPENT"} + {/* {props.item?.is_spent ? "SPENT" : "UNSPENT"} */}
@@ -49,28 +176,14 @@ const FAKE_STATES = ["Creating a new node", "Opening a channel", "Sending funds function ShiftObserver(props: { setShiftStage: (stage: ShiftStage) => void }, utxo: UtxoItem) { const [fakeStage, setFakeStage] = createSignal(2); - // onMount(() => { - // const interval = setInterval(() => { - // console.log("intervaling") - // if (fakeStage() === FAKE_STATES.length - 1) { - // clearInterval(interval) - // props.setShiftStage("success"); - // } else { - // setFakeStage((fakeStage() + 1)) - // } - // // cont() - // }, 1000) - // // return () => clearInterval(interval); - // }) - const [sentAmount, setSentAmount] = createSignal(0); onMount(() => { const interval = setInterval(() => { if (sentAmount() === 200000) { - // clearInterval(interval) - // props.setShiftStage("success"); - setSentAmount((0)) + clearInterval(interval) + props.setShiftStage("success"); + // setSentAmount((0)) } else { setSentAmount((sentAmount() + 50000)) @@ -92,22 +205,67 @@ function ShiftObserver(props: { setShiftStage: (stage: ShiftStage) => void }, ut ) } +const KV: ParentComponent<{ key: string }> = (props) => { + return ( +
+

{props.key}

+ {props.children} +
+ ) +} + +const KVPre: ParentComponent<{ key: string }> = (props) => { + return ( +
+

{props.key}

+ 
+                {props.children}
+
+
+ ) +} + +function SingleChannel(props: { channel: MutinyChannel }) { + return ( + + + {/* {JSON.stringify(props.channel, null, 2)} */} + + {props.channel.peer} + {props.channel.outpoint} + {/* TODO: don't hardcode this */} + + View on mempool + + + ) +} + export default function Redshift() { const [state, _actions] = useMegaStore(); - const [shiftStage, setShiftStage] = createSignal("observe"); + const [shiftStage, setShiftStage] = createSignal("choose"); const [shiftType, setShiftType] = createSignal("utxo"); const [chosenUtxo, setChosenUtxo] = createSignal(); const getUtXos = async () => { console.log("Getting utxos"); - const utxos = await state.node_manager?.list_utxos() as UtxoItem[]; - return utxos; + return await state.node_manager?.list_utxos() as UtxoItem[]; + } + + const getChannels = async () => { + console.log("Getting channels"); + await state.node_manager?.sync() + const channels = await state.node_manager?.list_channels() as Promise; + console.log(channels) + return channels + } const [utxos, { refetch: _refetchUtxos }] = createResource(getUtXos); + const [channels, { refetch: _refetchChannels }] = createResource(getChannels); createEffect(() => { if (chosenUtxo()) { @@ -167,7 +325,7 @@ export default function Redshift() { = 0}> {(utxo) => - + } @@ -180,11 +338,8 @@ export default function Redshift() { - - We did it. Here's your new UTXO: - - - + +