post tx

skip-mev · Apr 29, 2024 · c46940f · c46940f
1 parent 42ee0dc
commit c46940f
Showing 1 changed file with 63 additions and 6 deletions.
diff --git a/src/components/PreviewRoute/index.tsx b/src/components/PreviewRoute/index.tsx
@@ -1,16 +1,18 @@
-import { ArrowLeftIcon, InformationCircleIcon } from "@heroicons/react/20/solid";
+import { ArrowLeftIcon, CheckCircleIcon, InformationCircleIcon } from "@heroicons/react/20/solid";
 import * as Sentry from "@sentry/react";
 import { RouteResponse } from "@skip-router/core";
 import { useMutation } from "@tanstack/react-query";
 import { useMemo, useState } from "react";
 import toast from "react-hot-toast";
 
+import { useAssets } from "@/context/assets";
 import { chainAddresses, useChainAddressesStore } from "@/context/chainAddresses";
 import { useDisclosureKey } from "@/context/disclosures";
 import { useSettingsStore } from "@/context/settings";
 import { txHistory } from "@/context/tx-history";
+import { useChains } from "@/hooks/useChains";
 import { useFinalityTimeEstimate } from "@/hooks/useFinalityTimeEstimate";
-import { useSkipClient } from "@/solve";
+import { useBroadcastedTxsStatus, useSkipClient } from "@/solve";
 import { isUserRejectedRequestError } from "@/utils/error";
 import { getExplorerUrl } from "@/utils/explorer";
 import { randomId } from "@/utils/random";
@@ -36,6 +38,8 @@ export const PreviewRoute = ({
   isAmountError?: boolean | string;
 }) => {
   const skipClient = useSkipClient();
+  const { getAsset } = useAssets();
+  const { data: chains } = useChains();
 
   const [isOpen, control] = disclosure;
   const actions = makeActionsV2({ route });
@@ -62,6 +66,10 @@ export const PreviewRoute = ({
   });
   const showLedgerWarning = _showLedgerWarning.cctp || _showLedgerWarning.ethermint;
   const [broadcastedTxs, setBroadcastedTxs] = useState<BroadcastedTx[]>([]);
+  const { data: statusData } = useBroadcastedTxsStatus({
+    txs: broadcastedTxs,
+    txsRequired: route.txsRequired,
+  });
 
   const estimatedFinalityTime = useFinalityTimeEstimate(route);
 
@@ -183,11 +191,10 @@ export const PreviewRoute = ({
         },
       );
     },
-    onSuccess: () => {
-      toast.success("Transaction submitted successfully");
-    },
   });
 
+  console.log(statusData, submitMutation);
+
   return (
     <div className="absolute inset-0 animate-fade-zoom-in rounded-3xl bg-white">
       <div className="flex h-full flex-col space-y-6 overflow-y-auto p-6 scrollbar-hide">
@@ -226,6 +233,56 @@ export const PreviewRoute = ({
           ))}
         </div>
         <div className="flex-1 space-y-4">
+          {broadcastedTxs.map(({ explorerLink, txHash }, i) => (
+            <div
+              key={`tx-${i}`}
+              className="flex items-center gap-4"
+            >
+              <div className="flex-1">
+                <p className="font-semibold">Transaction {i + 1}</p>
+              </div>
+              <div>
+                {explorerLink && txHash && (
+                  <a
+                    className="text-sm font-bold text-[#FF486E] hover:underline"
+                    href={explorerLink}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <span>
+                      <span>
+                        {txHash.slice(0, 6)}
+                        ...
+                        {txHash.slice(-6)}
+                      </span>
+                    </span>
+                  </a>
+                )}
+              </div>
+            </div>
+          ))}
+          {statusData?.isSuccess && submitMutation.isSuccess && (
+            <div className="flex flex-row items-center space-x-2 rounded-lg border-2 border-green-600 bg-green-100 p-2 px-4 font-medium text-green-800">
+              {/* <CheckCircleIcon className="h-7 w-7 text-green-800" /> */}
+              <p>
+                {route.doesSwap &&
+                  `Successfully swapped ${
+                    getAsset(route.sourceAssetDenom, route.sourceAssetChainID)?.recommendedSymbol ??
+                    route.sourceAssetDenom
+                  } for ${getAsset(route.destAssetDenom, route.destAssetChainID)?.recommendedSymbol ?? route.destAssetDenom}`}
+                {!route.doesSwap &&
+                  `Successfully transfered ${
+                    getAsset(route.sourceAssetDenom, route.sourceAssetChainID)?.recommendedSymbol ??
+                    route.sourceAssetDenom
+                  } from ${chains?.find((c) => c.chainID === route.sourceAssetChainID)?.prettyName} to ${chains?.find((c) => c.chainID === route.destAssetChainID)?.prettyName}`}
+              </p>
+            </div>
+          )}
+          {submitMutation?.isPending && broadcastedTxs.length === route.txsRequired && (
+            <p className="rounded-lg border-2 border-neutral-300 bg-neutral-100 p-4 py-2 font-medium text-neutral-400">
+              Your transaction is being processed. You can safely navigate away from this page.
+            </p>
+          )}
           {estimatedFinalityTime !== "" && (
             <AlertCollapse.Root type="info">
               <AlertCollapse.Trigger>EVM bridging finality time is {estimatedFinalityTime}</AlertCollapse.Trigger>
@@ -296,7 +353,7 @@ export const PreviewRoute = ({
               to complete
             </p>
           </div>
-          {submitMutation.isPending || (submitMutation.isSuccess && !submitMutation.isError) ? (
+          {submitMutation.isPending || submitMutation.isSuccess ? (
             <button
               className={cn(
                 "w-full rounded-md bg-[#FF486E] py-4 font-semibold text-white",