feat: add explorer links

across-protocol · Oct 31, 2023 · 673752a · 673752a
1 parent 8275683
commit 673752a
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 3 deletions.
diff --git a/src/views/DepositStatus/components/DepositStatusUpperCard.tsx b/src/views/DepositStatus/components/DepositStatusUpperCard.tsx
@@ -140,6 +140,10 @@ export function DepositStatusUpperCard({
         depositTxCompletedTimestampSeconds={depositTxCompletedTime}
         depositTxElapsedSeconds={depositTxElapsedSeconds}
         fillTxElapsedSeconds={fillTxElapsedSeconds}
+        fillTxHash={fillQuery.data?.fillTxHashes[0]}
+        depositTxHash={depositTxHash}
+        fromChainId={fromChainId}
+        toChainId={toChainId}
       />
     </Wrapper>
   );

diff --git a/src/views/DepositStatus/components/DepositTimesCard.tsx b/src/views/DepositStatus/components/DepositTimesCard.tsx
@@ -10,19 +10,28 @@ import { Text, CardWrapper } from "components";
 
 import { ElapsedTime } from "./ElapsedTime";
 import { DepositStatus } from "../types";
+import { getChainInfo } from "utils";
 
 type Props = {
   status: DepositStatus;
   depositTxCompletedTimestampSeconds?: number;
   depositTxElapsedSeconds?: number;
   fillTxElapsedSeconds?: number;
+  fillTxHash?: string;
+  depositTxHash?: string;
+  fromChainId: number;
+  toChainId: number;
 };
 
 export function DepositTimesCard({
   status,
   depositTxCompletedTimestampSeconds,
   depositTxElapsedSeconds,
   fillTxElapsedSeconds,
+  fillTxHash,
+  depositTxHash,
+  fromChainId,
+  toChainId,
 }: Props) {
   const isDepositing = status === "depositing";
   const isFilled = status === "filled";
@@ -41,7 +50,12 @@ export function DepositTimesCard({
           <ElapsedTime
             elapsedSeconds={depositTxElapsedSeconds}
             isCompleted
-            StatusIcon={<CheckIcon />}
+            StatusIcon={
+              <CheckIconExplorerLink
+                txHash={depositTxHash}
+                chainId={fromChainId}
+              />
+            }
           />
         ) : (
           <DateWrapper>
@@ -52,7 +66,10 @@ export function DepositTimesCard({
                   ).toFormat("d MMM yyyy - t")
                 : "-"}
             </Text>
-            <CheckIcon />
+            <CheckIconExplorerLink
+              txHash={depositTxHash}
+              chainId={fromChainId}
+            />
           </DateWrapper>
         )}
       </Row>
@@ -64,7 +81,16 @@ export function DepositTimesCard({
           <ElapsedTime
             elapsedSeconds={fillTxElapsedSeconds}
             isCompleted={isFilled}
-            StatusIcon={isFilled ? <CheckIcon /> : <StyledLoadingIcon />}
+            StatusIcon={
+              isFilled ? (
+                <CheckIconExplorerLink
+                  txHash={fillTxHash}
+                  chainId={toChainId}
+                />
+              ) : (
+                <StyledLoadingIcon />
+              )
+            }
           />
         )}
       </Row>
@@ -100,6 +126,30 @@ export function DepositTimesCard({
   );
 }
 
+function CheckIconExplorerLink({
+  txHash,
+  chainId,
+}: {
+  txHash?: string;
+  chainId: number;
+}) {
+  const chainInfo = getChainInfo(chainId);
+
+  if (!txHash) {
+    return <CheckIcon />;
+  }
+
+  return (
+    <a
+      href={chainInfo.constructExplorerLink(txHash)}
+      target="_blank"
+      rel="noreferrer"
+    >
+      <CheckIcon />
+    </a>
+  );
+}
+
 const Row = styled.div`
   display: flex;
   width: 100%;