cleanup

skip-mev · Jan 18, 2024 · 1c20f1f · 1c20f1f
1 parent d0c9afe
commit 1c20f1f
Showing 1 changed file with 29 additions and 23 deletions.
diff --git a/src/components/RouteDisplay.tsx b/src/components/RouteDisplay.tsx
@@ -8,6 +8,7 @@ import { useAssets } from "@/context/assets";
 import { useChainByID } from "@/hooks/useChains";
 import { useBroadcastedTxsStatus } from "@/solve";
 
+import { AdaptiveLink } from "./AdaptiveLink";
 import { BroadcastedTx } from "./TransactionDialog/TransactionDialogContent";
 
 export interface SwapVenueConfig {
@@ -94,7 +95,7 @@ const TransferStep: FC<{
   const transfer = statusData?.transferSequence[operationCount];
 
   // We can assume that the transfer is successful when the state is TRANSFER_SUCCESS or TRANSFER_RECEIVED
-  const renderState = () => {
+  const transferState = useMemo(() => {
     switch (transfer?.state) {
       case "TRANSFER_SUCCESS":
         return (
@@ -124,6 +125,21 @@ const TransferStep: FC<{
       default:
         return <div className="w-2 h-2 bg-neutral-200 rounded-full" />;
     }
+  }, [transfer?.state]);
+
+  const renderExplorerLink = () => {
+    if (!transfer?.explorerLink) return null;
+    return (
+      <AdaptiveLink
+        className="text-xs font-semibold text-[#FF486E] underline"
+        href={transfer.explorerLink}
+      >
+        <span>
+          {transfer.explorerLink.split("/").at(-1)?.slice(0, 6)}…
+          {transfer.explorerLink.split("/").at(-1)?.slice(-6)}
+        </span>
+      </AdaptiveLink>
+    );
   };
 
   const { getAsset } = useAssets();
@@ -139,7 +155,7 @@ const TransferStep: FC<{
     return (
       <div className="flex items-center gap-2 justify-between">
         <div className="w-14 h-14 flex items-center justify-center flex-shrink-0">
-          {renderState()}
+          {transferState}
         </div>
         <div className="flex-1">
           <p className="text-sm text-neutral-500 break-all max-w-full">
@@ -153,6 +169,7 @@ const TransferStep: FC<{
               {destinationChain.prettyName}
             </span>
           </p>
+          {renderExplorerLink()}
         </div>
       </div>
     );
@@ -161,7 +178,7 @@ const TransferStep: FC<{
   return (
     <div className="flex items-center gap-2">
       <div className="w-14 h-14 flex items-center justify-center flex-shrink-0">
-        {renderState()}
+        {transferState}
       </div>
       <div className="max-w-[18rem]">
         <p className="text-sm text-neutral-500">
@@ -199,17 +216,7 @@ const TransferStep: FC<{
             {destinationChain.prettyName}
           </span>
         </p>
-        {transfer?.explorerLink && (
-          <AdaptiveLink
-            className="text-xs font-semibold text-[#FF486E] underline"
-            href={transfer.explorerLink}
-          >
-            <span>
-              {transfer.explorerLink.split("/").at(-1)?.slice(0, 6)}…
-              {transfer.explorerLink.split("/").at(-1)?.slice(-6)}
-            </span>
-          </AdaptiveLink>
-        )}
+        {renderExplorerLink()}
       </div>
     </div>
   );
@@ -240,7 +247,7 @@ const SwapStep: FC<{
   const swap = statusData?.transferSequence[operationCount];
 
   // as for swap operations, we can assume that the swap is successful if the previous transfer state is TRANSFER_SUCCESS
-  const renderState = () => {
+  const swapState = useMemo(() => {
     switch (swap?.state) {
       case "TRANSFER_RECEIVED":
         return (
@@ -264,31 +271,29 @@ const SwapStep: FC<{
       default:
         return <div className="w-2 h-2 bg-neutral-200 rounded-full" />;
     }
-  };
+  }, [swap?.state]);
 
   const renderExplorerLink = () => {
     if (!swap?.explorerLink) return null;
     if (swap?.state !== "TRANSFER_SUCCESS") return null;
     return (
-      <a
+      <AdaptiveLink
         className="text-xs font-semibold text-[#FF486E] underline"
         href={swap.explorerLink}
-        target="_blank"
-        rel="noopener noreferrer"
       >
         <span>
           {swap.explorerLink.split("/").at(-1)?.slice(0, 6)}…
           {swap.explorerLink.split("/").at(-1)?.slice(-6)}
         </span>
-      </a>
+      </AdaptiveLink>
     );
   };
 
   if (!assetIn && assetOut) {
     return (
       <div className="flex items-center gap-2">
         <div className="w-14 h-14 flex items-center justify-center">
-          {renderState()}
+          {swapState}
         </div>
         <div className="max-w-[18rem]">
           <p className="text-sm text-neutral-500">
@@ -317,6 +322,7 @@ const SwapStep: FC<{
             />{" "}
             <span className="font-semibold text-black">{venue.name}</span>
           </p>
+          {renderExplorerLink()}
         </div>
       </div>
     );
@@ -326,7 +332,7 @@ const SwapStep: FC<{
     return (
       <div className="flex items-center gap-2">
         <div className="w-14 h-14 flex items-center justify-center">
-          {renderState()}
+          {swapState}
         </div>
         <div>
           <p className="text-sm text-neutral-500">
@@ -360,7 +366,7 @@ const SwapStep: FC<{
   return (
     <div className="flex items-center gap-2">
       <div className="w-14 h-14 flex items-center justify-center">
-        {renderState()}
+        {swapState}
       </div>
       <div className="max-w-[18rem]">
         <p className="text-sm text-neutral-500">