diff --git a/src/components/Activity.tsx b/src/components/Activity.tsx index ef29eb5..9c2dbbf 100644 --- a/src/components/Activity.tsx +++ b/src/components/Activity.tsx @@ -1,13 +1,15 @@ import send from '~/assets/icons/send.svg'; import receive from '~/assets/icons/receive.svg'; import { ButtonLink, Card, LoadingSpinner, SmallAmount, SmallHeader, VStack } from './layout'; -import { For, Match, ParentComponent, Suspense, Switch, createMemo, createResource, createSignal } from 'solid-js'; +import { For, Match, ParentComponent, Show, Suspense, Switch, createMemo, createResource, createSignal } from 'solid-js'; import { useMegaStore } from '~/state/megaStore'; import { MutinyInvoice } from '@mutinywallet/mutiny-wasm'; import { prettyPrintTime } from '~/utils/prettyPrintTime'; import { JsonModal } from '~/components/JsonModal'; import mempoolTxUrl from '~/utils/mempoolTxUrl'; import wave from "~/assets/wave.gif" +import utxoIcon from '~/assets/icons/coin.svg'; +import { getRedshifted } from '~/utils/fakeLabels'; 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' @@ -56,7 +58,9 @@ function OnChainItem(props: { item: OnChainTx }) {
setOpen(!open())}> - {isReceive() ? receive arrow : send arrow} +
+ {isReceive() ? receive arrow : send arrow} +

Unknown

{isReceive() ? : } @@ -82,7 +86,9 @@ function InvoiceItem(props: { item: MutinyInvoice }) { <>
setOpen(!open())}> - {isSend() ? send arrow : receive arrow} +
+ {isSend() ? send arrow : receive arrow} +

Unknown

@@ -103,18 +109,26 @@ function Utxo(props: { item: UtxoItem }) { const [open, setOpen] = createSignal(false) + const redshifted = createMemo(() => getRedshifted(props.item.outpoint)); + return ( <>
setOpen(!open())}> - receive arrow +
+ coin +
-

Unknown

+
+ Unknown}> +

Redshift

+
+
- {spent() ? "SPENT" : "UNSPENT"} + {/* {spent() ? "SPENT" : "UNSPENT"} */}
diff --git a/src/routes/Redshift.tsx b/src/routes/Redshift.tsx index f0a3bdd..af3711a 100644 --- a/src/routes/Redshift.tsx +++ b/src/routes/Redshift.tsx @@ -12,13 +12,12 @@ import { ProgressBar } from "~/components/layout/ProgressBar"; import { MutinyChannel } from "@mutinywallet/mutiny-wasm"; import mempoolTxUrl from "~/utils/mempoolTxUrl"; import { Amount } from "~/components/Amount"; - +import { getRedshifted, setRedshifted } from "~/utils/fakeLabels"; type ShiftOption = "utxo" | "lightning" type ShiftStage = "choose" | "observe" | "success" | "failure" - 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 @@ -65,18 +64,11 @@ function RedshiftReport(props: { redshift: RedshiftResult }) { return utxos.find((utxo) => utxo.outpoint === outpoint); } - const [utxos, { refetch: _refetchUtxos }] = createResource(getUtXos); - // + createEffect(() => { + setRedshifted(true, props.redshift?.output_utxo) + }) - // {/* {JSON.stringify(props.channel, null, 2)} */} - // - // - // - // {/* TODO: don't hardcode this */} - // - // View on mempool - // - // + const [utxos, { refetch: _refetchUtxos }] = createResource(getUtXos); const inputUtxo = createMemo(() => { console.log(utxos()) @@ -96,7 +88,7 @@ function RedshiftReport(props: { redshift: RedshiftResult }) { We did it. Here's your new UTXO: - + @@ -104,11 +96,11 @@ function RedshiftReport(props: { redshift: RedshiftResult }) { What happened? - + {/* - + */} @@ -145,8 +137,8 @@ function RedshiftReport(props: { redshift: RedshiftResult }) { 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); +export function Utxo(props: { item: UtxoItem, onClick?: () => void }) { + const redshifted = createMemo(() => getRedshifted(props.item.outpoint)); return ( <>
@@ -155,7 +147,7 @@ export function Utxo(props: { item: UtxoItem, onClick?: () => void, redshifted?:
- Unknown}> + Unknown}>

Redshift

@@ -214,34 +206,6 @@ const KV: ParentComponent<{ key: string }> = (props) => { ) } -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(); @@ -273,6 +237,14 @@ export default function Redshift() { } }) + const redshiftedUtxos = createMemo(() => { + return utxos()?.filter((utxo) => getRedshifted(utxo.outpoint)) + }) + + const unredshiftedUtxos = createMemo(() => { + return utxos()?.filter((utxo) => !getRedshifted(utxo.outpoint)) + }) + function resetState() { setShiftStage("choose"); setShiftType("utxo"); @@ -300,11 +272,11 @@ export default function Redshift() { - + No utxos (empty state) - = 0}> - + = 0}> + {(utxo) => setChosenUtxo(utxo)} /> } @@ -319,13 +291,13 @@ export default function Redshift() { - + No utxos (empty state) - = 0}> - + = 0}> + {(utxo) => - + } diff --git a/src/utils/fakeLabels.ts b/src/utils/fakeLabels.ts new file mode 100644 index 0000000..e528ef2 --- /dev/null +++ b/src/utils/fakeLabels.ts @@ -0,0 +1,19 @@ +// Simple storage for fake labels +// For each outpoint string, we can store a boolean whether it's redshifted or not + +function setRedshifted(redshifted: boolean, outpoint?: string,) { + if (outpoint === undefined) return; + localStorage.setItem(outpoint, redshifted.toString()) +} + +function getRedshifted(outpoint: string): boolean { + const redshifted = localStorage.getItem(outpoint) + if (redshifted === null) { + return false + } + return redshifted === 'true' +} + +const TEST_UTXO = "47651763fbd74488a478aad80e4205c3e34bbadcfc42b5cd9557ef12a15ab00c:1" + +export { setRedshifted, getRedshifted, TEST_UTXO } \ No newline at end of file