Added a way to switch shardId for specific block number

src/components/block/BlockDetails.tsx

@@ -7,10 +7,11 @@ import {
   blockDisplayValues,
 } from "./helpers";
 import { TipContent } from "src/components/ui";
-import { Box, DataTable, Tip, Anchor, Text } from "grommet";
-
+import {Box, DataTable, Tip, Anchor, Text, Select} from "grommet";
 import { CircleQuestion, CaretDownFill, CaretUpFill } from "grommet-icons";
 import { useWindowFocused } from "src/hooks/useWindowFocusHook";
+import { config } from "../../config";
+const { availableShards } = config
 
 const columns = [
   {
@@ -39,16 +40,43 @@ const columns = [
 
 type BlockDetailsProps = {
   block: Block;
-  blockNumber: number;
+  blockShardId: number;
+  isShardIdSelectAvailable?: boolean;
+  onSelectShardId?: (shardId: number) => void;
 };
 type tableEntry = {
   key: string;
   value: any;
 };
 
+interface ShardIdSelectProps {
+  blockShardId: number
+  onSelectShardId?: (shardId: number) => void
+}
+
+const ShardIdSelect = (props: ShardIdSelectProps) => {
+  const {blockShardId, onSelectShardId = () => {}} = props
+  const value = blockShardId.toString()
+  const options = availableShards.map((id) => id.toString())
+  const renderOption = (option: string) => <Box pad={'small'}><Text size={'small'}>Shard {option}</Text></Box>
+
+  return <Box width={'xsmall'} style={{ fontSize: 'small' }}>
+    <Select
+        options={options}
+        value={value}
+        onChange={({ option }) => onSelectShardId(+option)}
+        disabled={false}
+    >
+      {renderOption}
+    </Select>
+  </Box>
+}
+
 export const BlockDetails: FunctionComponent<BlockDetailsProps> = ({
   block,
-  blockNumber,
+  blockShardId,
+  isShardIdSelectAvailable = false,
+  onSelectShardId
 }) => {
   const [showDetails, setShowDetails] = useState(true);
   const [isNewAddress, setIsNewAddress] = useState<boolean>(false);
@@ -65,18 +93,21 @@ export const BlockDetails: FunctionComponent<BlockDetailsProps> = ({
     return () => clearTimeout(tId);
   }, [block]);
 
-  const keys = Object.keys({ ...block, shard: blockNumber });
+  const keys = Object.keys({ ...block, shard: blockShardId });
   const sortedKeys = keys.sort(
     (a, b) => blockPropertySort[b] - blockPropertySort[a]
   );
+  const shardIdView = isShardIdSelectAvailable
+      ? <ShardIdSelect blockShardId={blockShardId} onSelectShardId={onSelectShardId} />
+      : <Text size={"small"}>{blockShardId}</Text>
   // show 8 till gas used
   const filteredKeys = sortedKeys.filter((k, i) => showDetails || i < 8);
   const blockData = filteredKeys.reduce((arr, key) => {
     // @ts-ignore
     const value =
-      key === "shard" ? (
-        <Text size={"small"}>{blockNumber}</Text>
-      ) : (
+      key === "shard"
+          ? shardIdView
+          : (
         blockDisplayValues(block, key, (block as any)[key], isNewAddress)
       );
 

src/components/ui/Tooltip.tsx

@@ -24,7 +24,7 @@ export const TipContent = (props: { message: string | JSX.Element, showArrow?: b
     background="backgroundTip"
     pad={{ top: 'xxsmall', left: 'small', right: 'small', bottom: 'xxsmall' }}
     round={{ size: 'xsmall' }}
-    style={{ position: 'relative', color: 'white', width: 'fit-content' }}
+    style={{ position: 'relative', color: 'white', width: 'fit-content', maxWidth: '260px' }}
   >
     <Box>{message}</Box>
     {props.showArrow &&

src/pages/BlockPage.tsx

@@ -7,83 +7,75 @@ import { getBlockByNumber, getBlockByHash } from "src/api/client";
 import React, { useEffect, useState } from "react";
 import { Heading } from "grommet";
 import { config } from "../config";
+const { availableShards } = config
 
 export const BlockPage = () => {
   // hash or number
   // @ts-ignore
   const { id } = useParams();
+  const [isBlockLoading, setBlockLoading] = useState(false);
   const [block, setBlock] = useState<Block | null>(null);
-  const [blockNumber, setBlockNumber] = useState<number>(0);
+  const [blockShardId, setBlockShardId] = useState<null | number>(null)
 
-  const { availableShards } = config
+  const isIdParamNumber = "" + +id === id
 
   useEffect(() => {
-    let cleanupFunction = false;
+    let isBlockFetching = true;
 
-    const exec = async () => {
-      let block;
-      if ("" + +id === id) {
+    const findBlock = async () => {
+      const shardsList = blockShardId === null
+          ? [...availableShards]  // Search in all available shards
+          : [blockShardId]        // Search in specific shardId
+      setBlock(null)
+      setBlockLoading(true)
+      for(let i=0; i < shardsList.length; i++) { // Search block on each shard until it will be found or not
+        const shardId = shardsList[i]
         try {
-          block = await getBlockByNumber([0, +id]);
-          setBlockNumber(0);
-        } catch {
-          try {
-            if (!block && availableShards.find((i) => i === 1)) {
-              block = await getBlockByNumber([1, +id]);
-              setBlockNumber(1);
-            }
-          } catch {
-            try {
-              if (!block && availableShards.find((i) => i === 2)) {
-                block = await getBlockByNumber([2, +id]);
-                setBlockNumber(2);
-              }
-            } catch {
-              if (!block && availableShards.find((i) => i === 3)) {
-                block = await getBlockByNumber([3, +id]);
-                setBlockNumber(3);
-              }
-            }
-          }
-        }
-      } else {
-        try {
-          block = await getBlockByHash([0, id]);
-          setBlockNumber(0);
-        } catch {
-          try {
-            if (!block && availableShards.find((i) => i === 1)) {
-              block = await getBlockByHash([1, id]);
-              setBlockNumber(1);
-            }
-          } catch {
-            try {
-              if (!block && availableShards.find((i) => i === 2)) {
-                block = await getBlockByHash([2, id]);
-                setBlockNumber(2);
-              }
-            } catch {
-              if (!block && availableShards.find((i) => i === 3)) {
-                block = await getBlockByHash([3, id]);
-                setBlockNumber(3);
-              }
-            }
+          if (isBlockFetching) {
+            const blockData = isIdParamNumber
+                ? await getBlockByNumber([shardId, +id])
+                : await getBlockByHash([shardId, id]);
+            setBlock(blockData as Block);
+            setBlockShardId(shardId);
+            break
+          } else {
+            break
           }
+        } catch (e) {
+          console.log(`Block with id/hash "${id}" not found on shard "${shardId}"`)
         }
       }
-      if (!cleanupFunction) {
-        setBlock(block as Block);
-      }
-    };
-    exec();
+      setBlockLoading(false)
+    }
+
+    findBlock();
 
     return () => {
-      cleanupFunction = true;
+      isBlockFetching = false
     };
-  }, [id]);
+  }, [id, blockShardId]);
 
   if (!block) {
-    return null;
+    if (!isIdParamNumber) {
+      return null
+    }
+    const blockDetails = { number: id } as Block
+    return (
+        <>
+          <Heading size="xsmall" margin={{ top: "0" }}>
+            Block <b>#{id}
+            {!isBlockLoading && ' not found'}</b>
+          </Heading>
+          <BasePage>
+            <BlockDetails
+                block={blockDetails}
+                blockShardId={blockShardId || 0}
+                isShardIdSelectAvailable={isIdParamNumber}
+                onSelectShardId={(shardId: number) => setBlockShardId(shardId)}
+            />
+          </BasePage>
+        </>
+    );
   }
 
   return (
@@ -92,7 +84,12 @@ export const BlockPage = () => {
         Block <b>#{block.number}</b>
       </Heading>
       <BasePage>
-        <BlockDetails block={block} blockNumber={blockNumber} />
+        <BlockDetails
+            block={block}
+            blockShardId={blockShardId || 0}
+            isShardIdSelectAvailable={isIdParamNumber}
+            onSelectShardId={(shardId: number) => setBlockShardId(shardId)}
+        />
       </BasePage>
     </>
   );