diff --git a/src/actions/send/Submit.tsx b/src/actions/send/Submit.tsx index 48e6e0e..a2ebd0e 100644 --- a/src/actions/send/Submit.tsx +++ b/src/actions/send/Submit.tsx @@ -1,24 +1,27 @@ -import { useStateObservable, state } from "@react-rxjs/core" -import { submitTransfer$, transferStatus$, senderChainId$ } from "./send" -import { useEffect, useState } from "react" import * as Progress from "@radix-ui/react-progress" +import { useStateObservable } from "@react-rxjs/core" +import { useEffect, useState } from "react" +import { senderChainId$, submitTransfer$, transferStatus$ } from "./send" +import { state } from "@react-rxjs/core" import { allChains, ChainId } from "@/api" -import { of } from "rxjs" +import { of, merge } from "rxjs" -const subscriptions = transferStatus$.subscribe() +const finalizedBlock$ = state( + (chainId: ChainId | "") => + chainId === "" ? of(null) : allChains[chainId].client.finalizedBlock$, + null, +) -// const finalizedBlock$ = state((chainId: ChainId | "") => -// chainId === "" ? of(null) : allChains[chainId].client.finalizedBlock$, -// ) +const subscriptions = state(merge(transferStatus$)).subscribe() export default function Submit() { const txStatus = useStateObservable(transferStatus$) const selectedChain = useStateObservable(senderChainId$)! - // const finalizedBlock = useStateObservable(finalizedBlock$(selectedChain)) - // const [firstBestBlock, setFirstBestBlock] = useState(null) + const finalizedBlock = useStateObservable(finalizedBlock$(selectedChain)) const [isSubmitting, setSubmitting] = useState(false) const [isTransacting, setIsTransacting] = useState(false) + const [statusLabel, setStatusLabel] = useState("") const [progress, setProgress] = useState(2) @@ -31,25 +34,37 @@ export default function Submit() { case "signed": { setProgress(25) setIsTransacting(true) + setStatusLabel("Transaction Signed successfully. Broadcasting...") break } case "broadcasted": setProgress(50) + setStatusLabel("Broadcasting complete. Sending to best blocks") break case "txBestBlocksState": setProgress(75) + setStatusLabel("In best blocks state: ") // set micro progress per block break case "finalized": setProgress(100) + setStatusLabel("Transaction completed successfully!") + + // setTimeout(() => ) break } }, [txStatus]) return ( -
+
{isTransacting ? ( <> +
+ {statusLabel} + {txStatus?.type === "txBestBlocksState" && txStatus.found === true + ? `${finalizedBlock?.number}/${txStatus.block.number}` + : null} +
- {txStatus?.type} ) : ( <>