feat: added Info if it's a deeplink

cardano-foundation · Aug 16, 2024 · c665ad8 · c665ad8
1 parent 2426804
commit c665ad8
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -8,7 +8,7 @@ import {
   CardContent,
   Typography,
   CardActions,
-  Button,
+  Button, Alert,
 } from "@mui/material";
 import Header from "src/components/Header";
 import Footer from "src/components/Footer";
@@ -29,7 +29,6 @@ const CardanoExplorer = () => {
   const query = useQuery();
   const path = useLocation().pathname.split("/").reverse()[0]
   const isDeepLink = acceptedDeepLinks.includes(path);
-  console.log(isDeepLink)
   const deepLinkResolver = new DeepLinkResolver(path, query);
 
   const explorers = {
@@ -134,12 +133,16 @@ const CardanoExplorer = () => {
   return (
     <>
       <Header />
+
       <Container maxWidth="lg" style={{ marginTop: "10px" }}>
         <Typography
           variant="h6"
           gutterBottom
         >
-          Select the Explorer of your choice {path}
+          Select the Explorer of your choice:
+          {isDeepLink &&
+              <Alert severity={"info"}>You will be forwarded to {path} {deepLinkResolver.getValue()} after choosing your favorite Explorer</Alert>
+          }
         </Typography>
         <Grid container spacing={3}>
           {selectedExplorer ? (

diff --git a/src/common/DeepLinkResolver.jsx b/src/common/DeepLinkResolver.jsx
@@ -17,13 +17,13 @@ class DeepLinkResolver {
     var link = baseLink;
     switch (this.mode) {
       case "epoch":
-        link += `epoch/${this.query.get("number")}`;
+        link += `epoch/${this.getValue()}`;
         break;
       case "block":
-        link += `block/${this.query.get("id")}`;
+        link += `block/${this.getValue()}`;
         break;
       case "transaction":
-        link += `tx/${this.query.get("tx")}`;
+        link += `tx/${this.getValue()}`;
         break;
     }
     return link;
@@ -33,13 +33,13 @@ class DeepLinkResolver {
     var link = baseLink;
     switch (this.mode) {
       case "epoch":
-        link += `epoch/${this.query.get("number")}`;
+        link += `epoch/${this.getValue()}`;
         break;
       case "block":
-        link += `search?filter=blocks&value=/${this.query.get("id")}`;
+        link += `search?filter=blocks&value=/${this.getValue()}`;
         break;
       case "transaction":
-        link += `transaction/${this.query.get("tx")}`;
+        link += `transaction/${this.getValue()}`;
         break;
     }
     return link;
@@ -49,17 +49,28 @@ class DeepLinkResolver {
     var link = baseLink;
     switch (this.mode) {
       case "epoch":
-        link += `epoch/${this.query.get("number")}`;
+        link += `epoch/${this.getValue()}`;
         break;
       case "block":
-        link += `block/${this.query.get("id")}`;
+        link += `block/${this.getValue()}`;
         break;
       case "transaction":
-        link += `tx/${this.query.get("tx")}`;
+        link += `tx/${this.getValue()}`;
         break;
     }
     return link;
   }
+
+  getValue() {
+    switch (this.mode) {
+      case "epoch":
+        return this.query.get("number");
+      case "block":
+        return this.query.get("id");
+      case "transaction":
+        return this.query.get("tx");
+    }
+  }
 }
 
 export default DeepLinkResolver;