fix: shard dropdown on main page,

routing improvements

src/App.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import "./index.css";
 import { Box, Grommet } from "grommet";
-import { HashRouter, BrowserRouter, useHistory } from "react-router-dom";
+import { BrowserRouter, useHistory } from "react-router-dom";
 
 import { Routes } from "src/Routes";
 import { AppHeader } from "src/components/appHeader";
@@ -19,11 +19,13 @@ import { Toaster, ToasterComponent } from "./components/ui/toaster";
 export const toaster = new Toaster();
 
 function App() {
-  return document.location.hash ? (
+  if (document.location.hash) {
-    <HashRouter>
+    document.location.href = `${
-      <AppWithHistory />
+      document.location.origin
-    </HashRouter>
+    }/${document.location.hash.slice(2)}`;
-  ) : (
+  }
+
+  return (
     <BrowserRouter>
       <AppWithHistory />
     </BrowserRouter>

src/components/dropdown/Dropdown.tsx

@@ -1,4 +1,4 @@
-import { Box, TextInput } from "grommet";
+import { Box, BoxProps, TextInput } from "grommet";
 import { CaretDownFill, CaretUpFill, Search } from "grommet-icons";
 import React, { Fragment } from "react";
 import styled, { css } from "styled-components";
@@ -7,6 +7,7 @@ export interface IDropdownProps<T = {}> {
   defaultValue?: T;
   value?: T;
   className?: string;
+  padDataList?: BoxProps["pad"];
   keyField: keyof T;
   renderValue: (dataItem: T) => JSX.Element;
   renderItem: (dataItem: T) => JSX.Element;
@@ -148,6 +149,7 @@ export class Dropdown<T = {}> extends React.Component<
       themeMode,
       itemHeight = "47px",
       itemStyles = {},
+      padDataList = "small",
     } = this.props;
 
     return (
@@ -167,15 +169,15 @@ export class Dropdown<T = {}> extends React.Component<
           {this.state.isOpen ? (
             <CaretUpFill
               onClick={(e) => {
-                console.log('CLICK') 
+                console.log("CLICK");
-                e.stopPropagation()
+                e.stopPropagation();
                 this.setState({ ...this.state, isOpen: false });
               }}
             />
           ) : (
             <CaretDownFill
               onClick={(e) => {
-                e.stopPropagation()
+                e.stopPropagation();
                 this.setState({ ...this.state, isOpen: true });
               }}
             />
@@ -183,10 +185,10 @@ export class Dropdown<T = {}> extends React.Component<
         </Value>
         {this.state.isOpen ? (
           <DataList
-            pad="xsmall"
             background="background"
             border={{ size: "xsmall", color: "border" }}
             style={{ borderRadius: "0px" }}
+            pad={padDataList}
           >
             {searchable ? (
               <TextInput

src/components/ui/ShardDropdown.tsx

@@ -4,6 +4,7 @@ import { useThemeMode } from "src/hooks/themeSwitcherHook";
 import { Dropdown } from "../dropdown/Dropdown";
 
 export function ShardDropdown(props: {
+  allShardsAvailable?: boolean;
   selected: string;
   onClick: (selected: string) => void;
 }) {
@@ -12,19 +13,40 @@ export function ShardDropdown(props: {
   return (
     <Dropdown
       themeMode={themeMode}
-      itemHeight={"30px"}
+      itemHeight={"0px"}
+      padDataList={"none"}
       items={
-        process.env.REACT_APP_AVAILABLE_SHARDS?.split(",").map((item) => ({
+        [
+          props.allShardsAvailable ? { value: "All shards" } : undefined,
+          ...(process.env.REACT_APP_AVAILABLE_SHARDS?.split(",").map(
+            (item) => ({
               value: item,
-        })) || []
+            })
+          ) || []),
+        ].filter((_) => _) as { value: string }[]
       }
       renderValue={(dataItem) => (
+        <Box justify={"center"} style={{ paddingTop: "2px" }}>
+          {dataItem.value === "All shards"
+            ? dataItem.value
+            : `Shard ${dataItem.value}`}
+        </Box>
+      )}
+      renderItem={(dataItem) => (
         <Box
-          justify={"center"}
+          direction={"row"}
-          style={{ paddingTop: "2px" }}
+          align={"baseline"}
-        >{`Shard ${dataItem.value}`}</Box>
+          style={{
+            paddingLeft: "5px",
+            marginBottom: "5px",
+            marginTop: dataItem.value === "All shards" ? "5px" : "0px",
+          }}
+        >
+          {dataItem.value === "All shards"
+            ? dataItem.value
+            : `Shard ${dataItem.value}`}
+        </Box>
       )}
-      renderItem={(dataItem) => <>{`Shard ${dataItem.value}`}</>}
       onClickItem={(item) => props.onClick(item.value)}
       value={{ value: props.selected }}
       itemStyles={{}}

src/pages/MainPage/index.tsx

@@ -11,6 +11,7 @@ import { LatestTransactionsTable } from "./LatestTransactionsTable";
 import { Block } from "src/types";
 import { getBlocks } from "src/api/client";
 import { calculateSecondPerBlocks, calculateSecondsPerBlock } from "./helpers";
+import { ShardDropdown } from "src/components/ui/ShardDropdown";
 
 const filter = {
   offset: 0,
@@ -25,6 +26,7 @@ export function MainPage() {
   const history = useHistory();
   const isLessDesktop = useMediaQuery({ maxDeviceWidth: breakpoints.desktop });
 
+  const [selectedShard, setSelectedShard] = useState<string>("0");
   const [blocks, setBlocks] = useState<Block[]>([]);
   const [blockLatency, setBlockLatency] = useState<number>(2.01);
 
@@ -38,9 +40,11 @@ export function MainPage() {
     const exec = async () => {
       try {
         let blocks = await Promise.all(
-          availableShards.map((shardNumber) =>
+          selectedShard === "All shards"
+            ? availableShards.map((shardNumber) =>
                 getBlocks([+shardNumber, filter])
               )
+            : [getBlocks([+selectedShard, filter])]
         );
 
         const blocksList = blocks.reduce((prev, cur, index) => {
@@ -48,7 +52,10 @@ export function MainPage() {
             ...prev,
             ...cur.map((item) => ({
               ...item,
-              shardNumber: +availableShards[index],
+              shardNumber:
+                selectedShard === "All shards"
+                  ? +availableShards[index]
+                  : +selectedShard,
             })),
           ];
           return prev;
@@ -61,7 +68,7 @@ export function MainPage() {
         );
 
         setBlockLatency(calculateSecondPerBlocks(blocks));
-        setBlockLatencyMap(calculateSecondsPerBlock(blocks))
+        setBlockLatencyMap(calculateSecondsPerBlock(blocks));
       } catch (err) {
         console.log(err);
       }
@@ -73,7 +80,7 @@ export function MainPage() {
     return () => {
       clearTimeout(tId);
     };
-  }, []);
+  }, [selectedShard]);
 
   return (
     <BaseContainer pad="0">
@@ -82,12 +89,22 @@ export function MainPage() {
         <BasePage style={{ flex: "1 1 100%" }}>
           <Box
             border={{ size: "xsmall", side: "bottom" }}
-            pad={{ bottom: "small" }}
             margin={{ bottom: "small" }}
+            direction={"row"}
+            align={"baseline"}
+            justify={"between"}
+            style={{ marginTop: "-7px" }}
           >
             <Text size="large" weight="bold">
               Latest Blocks
             </Text>
+            <Box style={{ maxWidth: "120px", minWidth: '120px' }} align={"start"}>
+              <ShardDropdown
+                allShardsAvailable={true}
+                selected={selectedShard}
+                onClick={(shardNumber) => setSelectedShard(shardNumber)}
+              />
+            </Box>
           </Box>
 
           <LatestBlocksTable blocks={blocks} />