aljaz/mutiny-web
1
0
Fork 0
mirror of https://github.com/aljazceru/mutiny-web.git synced 2025-12-26 18:34:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

fake labels

Browse Source
This commit is contained in:
Paul Miller
2023-04-30 13:38:05 -05:00
parent 01df1dda24
commit 9d011a5927
3 changed files with 65 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/Activity.tsx
View File

@@ -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 }) {
</a>
</JsonModal>
<div class={THREE_COLUMNS} onClick={() => setOpen(!open())}>
{isReceive() ? <img src={receive} alt="receive arrow" /> : <img src={send} alt="send arrow" />}
<div class="flex items-center">
{isReceive() ? <img src={receive} alt="receive arrow" /> : <img src={send} alt="send arrow" />}
</div>
<div class={CENTER_COLUMN}>
<h2 class={MISSING_LABEL}>Unknown</h2>
{isReceive() ? <SmallAmount amount={props.item.received} /> : <SmallAmount amount={props.item.sent} />}
@@ -82,7 +86,9 @@ function InvoiceItem(props: { item: MutinyInvoice }) {
<>
<JsonModal open={open()} data={props.item} title="Lightning Transaction" setOpen={setOpen} />
<div class={THREE_COLUMNS} onClick={() => setOpen(!open())}>
{isSend() ? <img src={send} alt="send arrow" /> : <img src={receive} alt="receive arrow" />}
<div class="flex items-center">
{isSend() ? <img src={send} alt="send arrow" /> : <img src={receive} alt="receive arrow" />}
</div>
<div class={CENTER_COLUMN}>
<h2 class={MISSING_LABEL}>Unknown</h2>
<SmallAmount amount={props.item.amount_sats || 0} />
@@ -103,18 +109,26 @@ function Utxo(props: { item: UtxoItem }) {
const [open, setOpen] = createSignal(false)
const redshifted = createMemo(() => getRedshifted(props.item.outpoint));
return (
<>
<JsonModal open={open()} data={props.item} title="Unspent Transaction Output" setOpen={setOpen} />
<div class={THREE_COLUMNS} onClick={() => setOpen(!open())}>
<img src={receive} alt="receive arrow" />
<div class="flex items-center">
<img src={utxoIcon} alt="coin" />
</div>
<div class={CENTER_COLUMN}>
<h2 class={MISSING_LABEL}>Unknown</h2>
<div class="flex gap-2">
<Show when={redshifted()} fallback={<h2 class={MISSING_LABEL}>Unknown</h2>}>
<h2 class={REDSHIFT_LABEL}>Redshift</h2>
</Show>
</div>
<SmallAmount amount={props.item.txout.value} />
</div>
<div class={RIGHT_COLUMN}>
<SmallHeader class={spent() ? "text-m-red" : "text-m-green"}>
{spent() ? "SPENT" : "UNSPENT"}
{/* {spent() ? "SPENT" : "UNSPENT"} */}
</SmallHeader>
</div>
</div>

80
src/routes/Redshift.tsx
View File

@@ -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);
// <VStack>
createEffect(() => {
setRedshifted(true, props.redshift?.output_utxo)
})
// {/* {JSON.stringify(props.channel, null, 2)} */}
// <Amount amountSats={props.channel.size} />
// <KV key={"Peer"} value={props.channel.peer} />
// <KV key={"Outpoint"} value={props.channel.outpoint} />
// {/* TODO: don't hardcode this */}
// <a class="" href={mempoolTxUrl(props.channel.outpoint?.split(":")[0], "signet")} target="_blank" rel="noreferrer">
// View on mempool
// </a>
// </VStack>
const [utxos, { refetch: _refetchUtxos }] = createResource(getUtXos);
const inputUtxo = createMemo(() => {
console.log(utxos())
@@ -96,7 +88,7 @@ function RedshiftReport(props: { redshift: RedshiftResult }) {
<NiceP>We did it. Here's your new UTXO:</NiceP>
<Show when={utxos() && outputUtxo()}>
<Card>
<Utxo item={outputUtxo()!} redshifted />
<Utxo item={outputUtxo()!} />
</Card>
</Show>
</VStack>
@@ -104,11 +96,11 @@ function RedshiftReport(props: { redshift: RedshiftResult }) {
<NiceP>What happened?</NiceP>
<Card>
<VStack biggap>
<KV key="Input utxo">
{/* <KV key="Input utxo">
<Show when={utxos() && inputUtxo()}>
<Utxo item={inputUtxo()!} />
</Show>
</KV>
</KV> */}
<KV key="Starting amount">
<Amount amountSats={props.redshift.amount_sats} />
</KV>
@@ -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 (
<>
<div class={THREE_COLUMNS} onClick={props.onClick}>
@@ -155,7 +147,7 @@ export function Utxo(props: { item: UtxoItem, onClick?: () => void, redshifted?:
</div>
<div class={CENTER_COLUMN}>
<div class="flex gap-2">
<Show when={props.redshifted} fallback={<h2 class={MISSING_LABEL}>Unknown</h2>}>
<Show when={redshifted()} fallback={<h2 class={MISSING_LABEL}>Unknown</h2>}>
<h2 class={REDSHIFT_LABEL}>Redshift</h2>
</Show>
</div>
@@ -214,34 +206,6 @@ const KV: ParentComponent<{ key: string }> = (props) => {
)
}
const KVPre: ParentComponent<{ key: string }> = (props) => {
return (
<div class="flex flex-col gap-2">
<p class="text-sm font-semibold uppercase">{props.key}</p>
<pre class="whitespace-pre-wrap break-all">
{props.children}
</pre>
</div>
)
}
function SingleChannel(props: { channel: MutinyChannel }) {
return (
<VStack>
{/* {JSON.stringify(props.channel, null, 2)} */}
<Amount amountSats={props.channel.size} />
<KV key={"Peer"}>{props.channel.peer}</KV>
<KV key={"Outpoint"}>{props.channel.outpoint}</KV>
{/* TODO: don't hardcode this */}
<a class="" href={mempoolTxUrl(props.channel.outpoint?.split(":")[0], "signet")} target="_blank" rel="noreferrer">
View on mempool
</a>
</VStack>
)
}
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() {
<Match when={utxos.loading}>
<LoadingSpinner wide />
</Match>
<Match when={utxos.state === "ready" && utxos().length === 0}>
<Match when={utxos.state === "ready" && unredshiftedUtxos()?.length === 0}>
<code>No utxos (empty state)</code>
</Match>
<Match when={utxos.state === "ready" && utxos().length >= 0}>
<For each={utxos()}>
<Match when={utxos.state === "ready" && unredshiftedUtxos() && unredshiftedUtxos()!.length >= 0}>
<For each={unredshiftedUtxos()}>
{(utxo) =>
<Utxo item={utxo} onClick={() => setChosenUtxo(utxo)} />
}
@@ -319,13 +291,13 @@ export default function Redshift() {
<Match when={utxos.loading}>
<LoadingSpinner wide />
</Match>
<Match when={utxos.state === "ready" && utxos().length === 0}>
<Match when={utxos.state === "ready" && redshiftedUtxos()?.length === 0}>
<code>No utxos (empty state)</code>
</Match>
<Match when={utxos.state === "ready" && utxos().length >= 0}>
<For each={utxos()}>
<Match when={utxos.state === "ready" && redshiftedUtxos() && redshiftedUtxos()!.length >= 0}>
<For each={redshiftedUtxos()}>
{(utxo) =>
<Utxo redshifted item={utxo} />
<Utxo item={utxo} />
}
</For>
</Match>

19
src/utils/fakeLabels.ts Normal file
View File

@@ -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 }