diff --git a/explorer/src/App.tsx b/explorer/src/App.tsx index 3d4236e8a..bf5195bf5 100644 --- a/explorer/src/App.tsx +++ b/explorer/src/App.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Link } from "react-router-dom"; +import { Link, Switch, Route, Redirect } from "react-router-dom"; import ClusterStatusButton from "./components/ClusterStatusButton"; import AccountsCard from "./components/AccountsCard"; @@ -9,10 +9,11 @@ import TransactionModal from "./components/TransactionModal"; import AccountModal from "./components/AccountModal"; import Logo from "./img/logos-solana/light-explorer-logo.svg"; import { useCurrentTab, Tab } from "./providers/tab"; +import { TX_PATHS } from "./providers/transactions"; +import { ACCOUNT_PATHS } from "./providers/accounts"; function App() { const [showClusterModal, setShowClusterModal] = React.useState(false); - const currentTab = useCurrentTab(); return ( <>
-
-
- {currentTab === "Transactions" ? : null} -
-
-
-
- {currentTab === "Accounts" ? : null} -
-
+ + + + + + + + + + +
diff --git a/explorer/src/providers/accounts.tsx b/explorer/src/providers/accounts.tsx index e8f2fb034..22f50913b 100644 --- a/explorer/src/providers/accounts.tsx +++ b/explorer/src/providers/accounts.tsx @@ -122,14 +122,20 @@ function reducer(state: State, action: Action): State { return state; } -export const ACCOUNT_PATHS = ["account", "accounts", "address", "addresses"]; +export const ACCOUNT_PATHS = [ + "/account", + "/accounts", + "/address", + "/addresses" +]; function urlAddresses(): Array { const addresses: Array = []; ACCOUNT_PATHS.forEach(path => { - const params = findGetParameter(path)?.split(",") || []; - const segments = findPathSegment(path)?.split(",") || []; + const name = path.slice(1); + const params = findGetParameter(name)?.split(",") || []; + const segments = findPathSegment(name)?.split(",") || []; addresses.push(...params); addresses.push(...segments); }); diff --git a/explorer/src/providers/tab.tsx b/explorer/src/providers/tab.tsx index 18f8b3694..31c9ea0ca 100644 --- a/explorer/src/providers/tab.tsx +++ b/explorer/src/providers/tab.tsx @@ -9,7 +9,10 @@ const StateContext = React.createContext(undefined); type TabProviderProps = { children: React.ReactNode }; export function TabProvider({ children }: TabProviderProps) { const location = useLocation(); - const paths = location.pathname.slice(1).split("/"); + const paths = location.pathname + .slice(1) + .split("/") + .map(name => `/${name}`); let tab: Tab = "Transactions"; if (ACCOUNT_PATHS.includes(paths[0].toLowerCase())) { tab = "Accounts"; diff --git a/explorer/src/providers/transactions.tsx b/explorer/src/providers/transactions.tsx index e7a9f09d2..69271b18b 100644 --- a/explorer/src/providers/transactions.tsx +++ b/explorer/src/providers/transactions.tsx @@ -138,20 +138,21 @@ function reducer(state: State, action: Action): State { } export const TX_PATHS = [ - "tx", - "txs", - "txn", - "txns", - "transaction", - "transactions" + "/tx", + "/txs", + "/txn", + "/txns", + "/transaction", + "/transactions" ]; function urlSignatures(): Array { const signatures: Array = []; TX_PATHS.forEach(path => { - const params = findGetParameter(path)?.split(",") || []; - const segments = findPathSegment(path)?.split(",") || []; + const name = path.slice(1); + const params = findGetParameter(name)?.split(",") || []; + const segments = findPathSegment(name)?.split(",") || []; signatures.push(...params); signatures.push(...segments); });