Staking tx amount fix (#26)

* fix: search bar fix if number input, add badge (#2)

* fix: search bar fix if number input, add badge
for type in search bar, horfix for direct link in inventory page

* fix: theme mode blink page

* fix: write boolean in tx page

* fix: styles for contract tab in address page

* fix: remove btn

* fix: env, results per page go to first page
in grid. fix path for REACT_APP_EXPLORER_V1_API_URL

* Update .env.example

* fix: improve

* fix: stable .env

* fix: improve tx

* fix: no update grid if tab not changed

* fix: revert .env file

* fix: add .env.development to gitignore

* env var description

* Update .env

* fix: set to REACT_APP_PROD_ADDRESS socket

* Update .env

* fix: timeout for ERCpools

* fix: timeout instead intervals

* fix: setTimeout

* fix: catch erc pools requests

* fix: remove catch section

* fix: hashRouter instead BrowserRouter

* fix: merge

* fix: routes fix

* fix: improvements

* fix: circulatingSupply name fix

* fix: improve all issue tasks,
fix tokens drop view

* fix: both routers support

* fix: transaction fee, gas price on tx page

* Fix empty tx

* fix: shard dropdown on main page,
routing improvements

* fix: add amount field in stacking-tx

* fix: amount on address page

* fix: staking tx table fields improvements
latency for shars fix, amount staking-tx fix

Co-authored-by: potvik <57394565+potvik@users.noreply.github.com>
Co-authored-by: Hype <hypnagonia@gmail.com>
Co-authored-by: yuriy <yuriy.menkov@latoken.com>

src/components/metrics/index.tsx

@@ -227,10 +227,12 @@ function BlockLatency(params: { latency: number; latencyPerBlock: number[] }) {
                       direction={"column"}
                       align={"start"}
                       justify={"center"}
-                      margin={'small'}
+                      margin={"small"}
                     >
                       <Text size={"small"}>Shard {index}</Text>
-                      <Text size="small" weight="bold">{item.toFixed(2)}s</Text>
+                      <Text size="small" weight="bold">
+                        {item.toFixed(2)}s
+                      </Text>
                     </Box>
                   ))}
                 </Box>

src/components/transaction/TransactionDetails.tsx

@@ -61,6 +61,7 @@ const getColumns = ({ type = "" }) => [
 type TransactionDetailsProps = {
   transaction: RPCStakingTransactionHarmony;
   type?: TransactionSubType;
+  stakingData?: boolean;
   logs?: Log[];
   errorMsg: string | undefined;
   shorMoreHide?: boolean;
@@ -134,6 +135,7 @@ export const TransactionDetails: FunctionComponent<TransactionDetailsProps> = ({
   logs = [],
   errorMsg,
   shorMoreHide, 
+  stakingData, 
 }) => {
   const [showDetails, setShowDetails] = useState(false);
 
@@ -156,7 +158,17 @@ export const TransactionDetails: FunctionComponent<TransactionDetailsProps> = ({
     gasPrice: <Box justify="center">{CalculateFee(transaction)}</Box>,
   }; 
 
-  const keys = Object.keys(newTransaction).filter((key) => key !== "gas");
+  const keys = Object.keys(newTransaction).filter((key) => {
+    if (stakingData) {
+      return (
+        ["tokenTransfers", "transactionFee", "gasPrice", "Status"].indexOf(
+          key
+        ) === -1
+      );
+    } else {
+      return key !== "gas";
+    }
+  }); 
   const sortedKeys = keys
     .sort((a, b) => transactionPropertySort[b] - transactionPropertySort[a])
     .filter((k) => showDetails || ["r", "s", "v"].indexOf(k) === -1);

src/components/ui/ShardDropdown.tsx

@@ -17,7 +17,7 @@ export function ShardDropdown(props: {
       padDataList={"none"}
       items={
         [
-          props.allShardsAvailable ? { value: "All shards" } : undefined,
+props.allShardsAvailable ? { value: "All Shards" } : undefined,
           ...(process.env.REACT_APP_AVAILABLE_SHARDS?.split(",").map(
             (item) => ({
               value: item,
@@ -27,7 +27,7 @@ export function ShardDropdown(props: {
       }
       renderValue={(dataItem) => (
         <Box justify={"center"} style={{ paddingTop: "2px" }}>
-          {dataItem.value === "All shards"
+          {dataItem.value === "All Shards"
             ? dataItem.value
             : `Shard ${dataItem.value}`}
         </Box>
@@ -37,12 +37,13 @@ export function ShardDropdown(props: {
           direction={"row"}
           align={"baseline"}
           style={{ 
-            paddingLeft: "5px",
+            paddingLeft: "7px",
             marginBottom: "5px",
-            marginTop: dataItem.value === "All shards" ? "5px" : "0px",
+            marginTop: dataItem.value === "All Shards" ? "5px" : "0px",
           }}
         >
-          {dataItem.value === "All shards"
+          {dataItem.value === "All Shards"
+
             ? dataItem.value
             : `Shard ${dataItem.value}`}
         </Box>

src/pages/MainPage/index.tsx

@@ -39,21 +39,32 @@ export function MainPage() {
     let tId = 0 as any;
     const exec = async () => {
       try {
+        let allBlocks = [];
         let blocks = await Promise.all(
-          selectedShard === "All shards"
+          selectedShard === "All Shards"
             ? availableShards.map((shardNumber) =>
                 getBlocks([+shardNumber, filter])
               )
             : [getBlocks([+selectedShard, filter])]
         );
 
+        if (selectedShard === "All Shards") {
+          allBlocks = blocks;
+        } else {
+          allBlocks = await Promise.all(
+            availableShards.map((shardNumber) =>
+              getBlocks([+shardNumber, filter])
+            )
+          );
+        }
+
         const blocksList = blocks.reduce((prev, cur, index) => {
           prev = [
             ...prev,
             ...cur.map((item) => ({
               ...item,
               shardNumber:
-                selectedShard === "All shards"
+                selectedShard === "All Shards"
                   ? +availableShards[index]
                   : +selectedShard,
             })),
@@ -67,8 +78,8 @@ export function MainPage() {
             .slice(0, 10)
         );
 
-        setBlockLatency(calculateSecondPerBlocks(blocks));
-        setBlockLatencyMap(calculateSecondsPerBlock(blocks));
+        setBlockLatency(calculateSecondPerBlocks(allBlocks));
+        setBlockLatencyMap(calculateSecondsPerBlock(allBlocks));
       } catch (err) {
         console.log(err);
       }
@@ -98,7 +109,10 @@ export function MainPage() {
             <Text size="large" weight="bold">
               Latest Blocks
             </Text>
-            <Box style={{ maxWidth: "120px", minWidth: '120px' }} align={"start"}>
+            <Box
+              style={{ maxWidth: "120px", minWidth: "120px" }}
+              align={"start"}
+            >
               <ShardDropdown
                 allShardsAvailable={true}
                 selected={selectedShard}

src/pages/StackingTransactionPage/index.tsx

@@ -56,9 +56,12 @@ export const StakingTransactionPage = () => {
                 ...tx.msg,
                 amount: amount,
               }
-            : restTxMsg
+            : tx.type === "EditValidator"
+            ? restTxMsg
+            : tx.msg
         }
         type={subTypeMap[tx.type] || ""}
+        stakingData
         errorMsg={""}
         shorMoreHide={true}
       />