From e98488774f3c8028bfe0c224b164342ff7054112 Mon Sep 17 00:00:00 2001 From: dmitrystas Date: Fri, 30 Aug 2024 10:28:51 +0200 Subject: [PATCH 1/2] Add AdaStat deeplinks --- src/App.jsx | 187 +++++++++++++------------------- src/common/DeepLinkResolver.jsx | 36 ++++-- 2 files changed, 99 insertions(+), 124 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 6a53e384..c3539837 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,17 +1,6 @@ import React, { useState, useEffect } from "react"; import { useLocation } from "react-router-dom"; -import { - Container, - Grid, - Card, - CardMedia, - CardContent, - Typography, - Alert, - styled, - Stack, - Chip, -} from "@mui/material"; +import { Container, Grid, Card, CardMedia, CardContent, Typography, Alert, styled, Stack, Chip } from "@mui/material"; import Header from "src/components/Header"; import Footer from "src/components/Footer"; import DeepLinkResolver from "src/common/DeepLinkResolver.jsx"; @@ -81,24 +70,21 @@ const CardanoExplorer = () => { const listOfExplorers = { cExplorer: { name: "Cexplorer.io", - description: - "Ideal for those who need comprehensive data on Cardano's blockchain thanks to its robust analytical tools.", + description: "Ideal for those who need comprehensive data on Cardano's blockchain thanks to its robust analytical tools.", image: cExplorerLogo, url: deepLinkResolver.getCExplorerLink("https://cexplorer.io/"), isDeepLink: true, }, cardanoScan: { name: "Cardano Scan", - description: - "Essential for users seeking detailed and reliable data on a feature rich explorer.", + description: "Essential for users seeking detailed and reliable data on a feature rich explorer.", url: deepLinkResolver.getCardanoScanLink("https://cardanoscan.io/"), image: cardanoScanLogo, isDeepLink: true, }, poolPM: { name: "Pool PM", - description: - "Essential for NFT enthusiasts and creators who need to monitor and showcase their assets. Dynamic tool for visualizing NFTs. ", + description: "Essential for NFT enthusiasts and creators who need to monitor and showcase their assets. Dynamic tool for visualizing NFTs. ", url: "https://pool.pm/", image: poolPmLogo, isDeepLink: false, @@ -112,96 +98,78 @@ const CardanoExplorer = () => { }, adaStat: { name: "AdaStat", - description: - "Ideal for analysts and researcher who need to advanced statistical analyses and network monitoring.", - url: "https://adastat.net/", + description: "Ideal for analysts and researcher who need to advanced statistical analyses and network monitoring.", + url: deepLinkResolver.getAdaStatLink("https://adastat.net/"), image: adaStatLogo, - isDeepLink: false, + isDeepLink: true, }, explorer: { name: "Explorer (Beta)", - description: - "Focused on enterprises and policymakers. Currently under development, built by Cardano Foundation.", - url: deepLinkResolver.getCFBetaExplorerLink( - "https://beta.explorer.cardano.org/en/" - ), + description: "Focused on enterprises and policymakers. Currently under development, built by Cardano Foundation.", + url: deepLinkResolver.getCFBetaExplorerLink("https://beta.explorer.cardano.org/en/"), image: betaExplorer, isDeepLink: true, }, poolTool: { name: "PoolTool", - description: - "Essential for those who need to make informed staking decisions. Provides data on the performance of pools. ", + description: "Essential for those who need to make informed staking decisions. Provides data on the performance of pools. ", url: "https://pooltool.io/", image: poolTool, isDeepLink: false, }, }; - const sortedExplorers = Object.entries(listOfExplorers).sort((a,b) => 0.5 - Math.random()); + const sortedExplorers = Object.entries(listOfExplorers).sort((a, b) => 0.5 - Math.random()); if (isKnownDeepLink) { sortedExplorers.sort(([, a], [, b]) => b.isDeepLink - a.isDeepLink); } - const selectedExplorer = - listOfExplorers[path] || listOfExplorers[query.get("section")]; + const selectedExplorer = listOfExplorers[path] || listOfExplorers[query.get("section")]; - const explorerCards = sortedExplorers.map( - ([key, explorer]) => ( - - ( + + + - - - - - - {explorer.name} - - {isKnownDeepLink && ( + + + + {explorer.name} + + {isKnownDeepLink && ( + } - label={ - !explorer.isDeepLink - ? "link not available" - : "link available" - } + label={!explorer.isDeepLink ? "link not available" : "link available"} size="small" variant={!explorer.isDeepLink ? "outlined" : ""} - />)} - - - {explorer.description} - - - - - - ) - ); + /> + )} + + + {explorer.description} + + + + + + )); return ( @@ -209,7 +177,7 @@ const CardanoExplorer = () => { - {isKnownDeepLink && deepLinkResolver.isCorrectPathVariable() && ( + {isKnownDeepLink && deepLinkResolver.isCorrectPathVariable() && ( { borderRadius: "16px", }} > - You will be forwarded to {path} {deepLinkResolver.getValue()}{" "} - after choosing your favorite Explorer + You will be forwarded to {path} {deepLinkResolver.getValue()} after choosing your favorite Explorer )} {isDeepLink && !isKnownDeepLink && ( - - - DeepLink "{path}" not matching any of the correct paths: {acceptedDeepLinks.join(", ")}. - If this is a bug, please create an issue in Github. - - + + + DeepLink "{path}" not matching any of the correct paths: {acceptedDeepLinks.join(", ")}. If this is a bug, please create an issue in Github. + + )} {isDeepLink && isKnownDeepLink && !deepLinkResolver.isCorrectPathVariable() && ( - - - You need to set "{deepLinkResolver.getCorrectPathVariable()}" for Deeplink {path}. - If this is a bug, please create an issue in Github. - - - ) - } + + + You need to set "{deepLinkResolver.getCorrectPathVariable()}" for Deeplink {path}. If this is a bug, please create an issue in Github. + + + )} Select the Explorer of your choice @@ -266,12 +230,7 @@ const CardanoExplorer = () => { > {selectedExplorer ? ( - + diff --git a/src/common/DeepLinkResolver.jsx b/src/common/DeepLinkResolver.jsx index 2cbec010..4a0fb0e1 100644 --- a/src/common/DeepLinkResolver.jsx +++ b/src/common/DeepLinkResolver.jsx @@ -1,21 +1,18 @@ import React from "react"; const screens = Object.freeze({ - transaction: 'transaction', - epoch: 'epoch', - block: 'block', -}) + transaction: "transaction", + epoch: "epoch", + block: "block", +}); class DeepLinkResolver { - constructor(path, query) { - this.mode = path.split("/").reverse()[0].replace('.html',''); + this.mode = path.split("/").reverse()[0].replace(".html", ""); this.query = query; } - - - getCExplorerLink (baseLink) { + getCExplorerLink(baseLink) { var link = baseLink; switch (this.mode) { case "epoch": @@ -72,6 +69,25 @@ class DeepLinkResolver { return link; } + getAdaStatLink(baseLink) { + var link = baseLink; + switch (this.mode) { + case "epoch": + link += `epochs/${this.getValue()}`; + break; + case "block": + link += `blocks/${this.getValue()}`; + break; + case "transaction": + link += `transactions/${this.getValue()}`; + break; + case "address": + link += `addresses/${this.getValue()}`; + break; + } + return link; + } + getValue() { switch (this.mode) { case "epoch": @@ -112,4 +128,4 @@ class DeepLinkResolver { } } -export default DeepLinkResolver; \ No newline at end of file +export default DeepLinkResolver; From 936764dff6699400e56f0e1f42793c958eb1da5f Mon Sep 17 00:00:00 2001 From: dmitrystas Date: Fri, 30 Aug 2024 10:36:21 +0200 Subject: [PATCH 2/2] Restore original formatting --- src/App.jsx | 185 +++++++++++++++++++------------- src/common/DeepLinkResolver.jsx | 17 +-- 2 files changed, 123 insertions(+), 79 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index c3539837..443b0643 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,6 +1,17 @@ import React, { useState, useEffect } from "react"; import { useLocation } from "react-router-dom"; -import { Container, Grid, Card, CardMedia, CardContent, Typography, Alert, styled, Stack, Chip } from "@mui/material"; +import { + Container, + Grid, + Card, + CardMedia, + CardContent, + Typography, + Alert, + styled, + Stack, + Chip, +} from "@mui/material"; import Header from "src/components/Header"; import Footer from "src/components/Footer"; import DeepLinkResolver from "src/common/DeepLinkResolver.jsx"; @@ -70,21 +81,24 @@ const CardanoExplorer = () => { const listOfExplorers = { cExplorer: { name: "Cexplorer.io", - description: "Ideal for those who need comprehensive data on Cardano's blockchain thanks to its robust analytical tools.", + description: + "Ideal for those who need comprehensive data on Cardano's blockchain thanks to its robust analytical tools.", image: cExplorerLogo, url: deepLinkResolver.getCExplorerLink("https://cexplorer.io/"), isDeepLink: true, }, cardanoScan: { name: "Cardano Scan", - description: "Essential for users seeking detailed and reliable data on a feature rich explorer.", + description: + "Essential for users seeking detailed and reliable data on a feature rich explorer.", url: deepLinkResolver.getCardanoScanLink("https://cardanoscan.io/"), image: cardanoScanLogo, isDeepLink: true, }, poolPM: { name: "Pool PM", - description: "Essential for NFT enthusiasts and creators who need to monitor and showcase their assets. Dynamic tool for visualizing NFTs. ", + description: + "Essential for NFT enthusiasts and creators who need to monitor and showcase their assets. Dynamic tool for visualizing NFTs. ", url: "https://pool.pm/", image: poolPmLogo, isDeepLink: false, @@ -98,78 +112,96 @@ const CardanoExplorer = () => { }, adaStat: { name: "AdaStat", - description: "Ideal for analysts and researcher who need to advanced statistical analyses and network monitoring.", + description: + "Ideal for analysts and researcher who need to advanced statistical analyses and network monitoring.", url: deepLinkResolver.getAdaStatLink("https://adastat.net/"), image: adaStatLogo, isDeepLink: true, }, explorer: { name: "Explorer (Beta)", - description: "Focused on enterprises and policymakers. Currently under development, built by Cardano Foundation.", - url: deepLinkResolver.getCFBetaExplorerLink("https://beta.explorer.cardano.org/en/"), + description: + "Focused on enterprises and policymakers. Currently under development, built by Cardano Foundation.", + url: deepLinkResolver.getCFBetaExplorerLink( + "https://beta.explorer.cardano.org/en/" + ), image: betaExplorer, isDeepLink: true, }, poolTool: { name: "PoolTool", - description: "Essential for those who need to make informed staking decisions. Provides data on the performance of pools. ", + description: + "Essential for those who need to make informed staking decisions. Provides data on the performance of pools. ", url: "https://pooltool.io/", image: poolTool, isDeepLink: false, }, }; - const sortedExplorers = Object.entries(listOfExplorers).sort((a, b) => 0.5 - Math.random()); + const sortedExplorers = Object.entries(listOfExplorers).sort((a,b) => 0.5 - Math.random()); if (isKnownDeepLink) { sortedExplorers.sort(([, a], [, b]) => b.isDeepLink - a.isDeepLink); } - const selectedExplorer = listOfExplorers[path] || listOfExplorers[query.get("section")]; + const selectedExplorer = + listOfExplorers[path] || listOfExplorers[query.get("section")]; - const explorerCards = sortedExplorers.map(([key, explorer]) => ( - - - ( + + - - - - - {explorer.name} - - {isKnownDeepLink && ( - + + + + + {explorer.name} + + {isKnownDeepLink && (} - label={!explorer.isDeepLink ? "link not available" : "link available"} + label={ + !explorer.isDeepLink + ? "link not available" + : "link available" + } size="small" variant={!explorer.isDeepLink ? "outlined" : ""} - /> - )} - - - {explorer.description} - - - - - - )); + />)} + + + {explorer.description} + + + + + + ) + ); return ( @@ -177,7 +209,7 @@ const CardanoExplorer = () => { - {isKnownDeepLink && deepLinkResolver.isCorrectPathVariable() && ( + {isKnownDeepLink && deepLinkResolver.isCorrectPathVariable() && ( { borderRadius: "16px", }} > - You will be forwarded to {path} {deepLinkResolver.getValue()} after choosing your favorite Explorer + You will be forwarded to {path} {deepLinkResolver.getValue()}{" "} + after choosing your favorite Explorer )} {isDeepLink && !isKnownDeepLink && ( - - - DeepLink "{path}" not matching any of the correct paths: {acceptedDeepLinks.join(", ")}. If this is a bug, please create an issue in Github. - - + + + DeepLink "{path}" not matching any of the correct paths: {acceptedDeepLinks.join(", ")}. + If this is a bug, please create an issue in Github. + + )} {isDeepLink && isKnownDeepLink && !deepLinkResolver.isCorrectPathVariable() && ( - - - You need to set "{deepLinkResolver.getCorrectPathVariable()}" for Deeplink {path}. If this is a bug, please create an issue in Github. - - - )} + + + You need to set "{deepLinkResolver.getCorrectPathVariable()}" for Deeplink {path}. + If this is a bug, please create an issue in Github. + + + ) + } Select the Explorer of your choice @@ -230,7 +266,12 @@ const CardanoExplorer = () => { > {selectedExplorer ? ( - + @@ -264,4 +305,4 @@ function App() { ); } -export default App; +export default App; \ No newline at end of file diff --git a/src/common/DeepLinkResolver.jsx b/src/common/DeepLinkResolver.jsx index 4a0fb0e1..2f30767c 100644 --- a/src/common/DeepLinkResolver.jsx +++ b/src/common/DeepLinkResolver.jsx @@ -1,18 +1,21 @@ import React from "react"; const screens = Object.freeze({ - transaction: "transaction", - epoch: "epoch", - block: "block", -}); + transaction: 'transaction', + epoch: 'epoch', + block: 'block', +}) class DeepLinkResolver { + constructor(path, query) { - this.mode = path.split("/").reverse()[0].replace(".html", ""); + this.mode = path.split("/").reverse()[0].replace('.html',''); this.query = query; } - getCExplorerLink(baseLink) { + + + getCExplorerLink (baseLink) { var link = baseLink; switch (this.mode) { case "epoch": @@ -128,4 +131,4 @@ class DeepLinkResolver { } } -export default DeepLinkResolver; +export default DeepLinkResolver; \ No newline at end of file