fix: its often not clear when a new site

was loaded #23

src/components/block/BlockDetails.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useState } from "react";
+import React, { FunctionComponent, useEffect, useState } from "react";
 import { Block } from "../../types";
 import {
   blockPropertyDisplayNames,
@@ -51,6 +51,18 @@ export const BlockDetails: FunctionComponent<BlockDetailsProps> = ({
   blockNumber,
 }) => {
   const [showDetails, setShowDetails] = useState(true);
+  const [isNewAddress, setIsNewAddress] = useState<boolean>(false);
+
+  useEffect(() => {
+    let tId = 0;
+    const getActiveIndex = () => {
+      setIsNewAddress(true);
+      tId = window.setTimeout(() => setIsNewAddress(false), 1000);
+    };
+    getActiveIndex();
+
+    return () => clearTimeout(tId);
+  }, [block]);
 
   const keys = Object.keys({ ...block, shard: blockNumber });
   const sortedKeys = keys.sort(
@@ -64,7 +76,7 @@ export const BlockDetails: FunctionComponent<BlockDetailsProps> = ({
       key === "shard" ? (
         <Text size={"small"}>{blockNumber}</Text>
       ) : (
-        blockDisplayValues(block, key, (block as any)[key])
+        blockDisplayValues(block, key, (block as any)[key], isNewAddress)
       );
 
     arr.push({ key, value } as tableEntry);

src/components/block/helpers.tsx

@@ -21,6 +21,12 @@ import { toaster } from "src/App";
 import { Box, Text } from "grommet";
 import styled from "styled-components";
 
+export const StyledBox = styled(Box)`
+  transition: all 0.2s linear;
+  border-radius: 2px;
+  padding-left: 5px;
+`;
+
 const Icon = styled(StatusGood)`
   margin-right: 5px;
 `;
@@ -115,8 +121,28 @@ const emptyMixHash =
 
 export const blockPropertyDisplayValues: any = {
   // @ts-ignore
-  number: (value: any) => (
+  number: (value: any, data, isNewAddress) => (
     <>
+      <StyledBox
+        direction={"row"}
+        background={isNewAddress ? "backgroundSuccess" : ""}
+        style={{ maxWidth: "125px" }}
+        align={"center"}
+      >
+        <CopyBtn
+          value={value}
+          onClick={() =>
+            toaster.show({
+              message: () => (
+                <Box direction={"row"} align={"center"} pad={"small"}>
+                  <Icon size={"small"} color={"headerText"} />
+                  <Text size={"small"}>Copied to clipboard</Text>
+                </Box>
+              ),
+            })
+          }
+        />
+         &nbsp;
         <BlockNumber number={value} />
         &nbsp;
         {value > 0 && (
@@ -127,6 +153,7 @@ export const blockPropertyDisplayValues: any = {
         <Link to={`/block/${+value + 1}`}>
           <FormNextLink size="small" color="brand" />
         </Link>
+      </StyledBox>
     </>
   ),
   transactions: (value: any[]) =>
@@ -188,13 +215,18 @@ export const blockPropertyDisplayValues: any = {
   size: (value: any) => <>{formatNumber(+value)}</>,
 };
 
-export const blockDisplayValues = (block: Block, key: string, value: any) => {
+export const blockDisplayValues = (
+  block: Block,
+  key: string,
+  value: any,
+  isNewAddress: boolean
+) => {
   const f = blockPropertyDisplayValues[key];
 
   let displayValue = value;
 
   if (f) {
-    displayValue = f(value, block);
+    displayValue = f(value, block, isNewAddress);
   } else {
     if (Array.isArray(value)) {
       displayValue = value.join(", ");
@@ -217,7 +249,7 @@ export const blockDisplayValues = (block: Block, key: string, value: any) => {
         key
       ) &&
         !["0x", "0", 0, null].includes(displayValue) &&
-        !["miner"].find((item) => item === key) && (
+        !["miner", "number"].find((item) => item === key) && (
           <>
             <CopyBtn
               value={value}

src/pages/AddressPage/AddressDetails.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Box, Text, Tip } from "grommet";
 import {
   Address,
@@ -15,7 +15,13 @@ import { ONEValueDropdown } from "src/components/ui/OneValueDropdown";
 import { binanceAddressMap } from "src/config/BinanceAddressMap";
 import { useERC1155Pool } from "src/hooks/ERC1155_Pool";
 import { CircleQuestion } from "grommet-icons";
+import styled from "styled-components";
 
+export const StyledBox = styled(Box)`
+  transition: all .2s linear;
+  border-radius: 2px;
+  padding-left: 5px;
+`
 interface AddressDetailsProps {
   address: string;
   contracts: AddressDetails | null;
@@ -27,12 +33,24 @@ export function AddressDetailsDisplay(props: AddressDetailsProps) {
   const { address, contracts, tokens, balance } = props;
   const erc20Map = useERC20Pool();
   const erc1155Map = useERC1155Pool();
+  const [isNewAddress, setIsNewAddress] = useState<boolean>(false);
 
   const erc20Token = erc20Map[address] || null;
   const type = getType(contracts, erc20Token);
   const erc1151data = erc1155Map[address] || {};
   const { meta = {}, ...restErc1151data } = erc1151data;
 
+  useEffect(() => {
+    let tId = 0;
+    const getActiveIndex = () => {
+      setIsNewAddress(true);
+      tId = window.setTimeout(() => setIsNewAddress(false), 1000);
+    };
+    getActiveIndex();
+
+    return () => clearTimeout(tId);
+  }, [address]);
+
   const data = {
     ...contracts,
     ...erc20Token,
@@ -53,7 +71,13 @@ export function AddressDetailsDisplay(props: AddressDetailsProps) {
     <Box>
       {items.sort(sortByOrder).map((i) => (
         //@ts-ignore
-        <DetailItem key={i} name={i} data={data} type={type} />
+        <DetailItem
+          key={i}
+          name={i}
+          data={data}
+          type={type}
+          isNewAddress={isNewAddress}
+        />
       ))}
     </Box>
   );
@@ -83,8 +107,13 @@ export const Item = (props: { label: any; value: any }) => {
   );
 };
 
-function DetailItem(props: { data: any; name: string; type: TAddressType }) {
-  const { data, name, type } = props;
+function DetailItem(props: {
+  data: any;
+  name: string;
+  type: TAddressType;
+  isNewAddress: boolean;
+}) {
+  const { data, name, type, isNewAddress } = props;
 
   if (
     !addressPropertyDisplayNames[name] ||
@@ -97,7 +126,12 @@ function DetailItem(props: { data: any; name: string; type: TAddressType }) {
   return (
     <Item
       label={addressPropertyDisplayNames[name](data, { type })}
-      value={addressPropertyDisplayValues[name](data[name], data, { type })}
+      value={addressPropertyDisplayValues[name](
+        data[name],
+        data,
+        { type },
+        isNewAddress
+      )}
     />
   );
 }
@@ -128,13 +162,24 @@ const addressPropertyDisplayNames: Record<
 
 const addressPropertyDisplayValues: Record<
   string,
-  (value: any, data: any, options: { type: TAddressType }) => React.ReactNode
+  (
+    value: any,
+    data: any,
+    options: { type: TAddressType },
+    isNewAddress: boolean
+  ) => React.ReactNode
 > = {
-  address: (value, data, options: { type: TAddressType }) => {
+  address: (value, data, options: { type: TAddressType }, isNewAddress) => {
     return (
       <>
+        <StyledBox
+          direction={"row"}
+          background={isNewAddress ? "backgroundSuccess" : ""}
+          style={{ maxWidth: "550px" }}
+        >
           <Address address={value} displayHash />
           {binanceAddressMap[value] ? ` (${binanceAddressMap[value]})` : null}
+        </StyledBox>
       </>
     );
   },
@@ -203,7 +248,6 @@ const addressPropertyDisplayValues: Record<
   description: (value) => <>{value}</>,
   transactionHash: (value) => <Address address={value} type={"tx"} />,
   circulatingSupply: (value, data) => (
-
     <Box direction={"row"}>
       <TokenValue
         value={value}
@@ -227,7 +271,6 @@ const addressPropertyDisplayValues: Record<
         </span>
       </Tip>
     </Box>
-
   ),
 };