diff --git a/src/components/block/BlockDetails.tsx b/src/components/block/BlockDetails.tsx index 8acb704..85d2039 100644 --- a/src/components/block/BlockDetails.tsx +++ b/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 = ({ blockNumber, }) => { const [showDetails, setShowDetails] = useState(true); + const [isNewAddress, setIsNewAddress] = useState(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 = ({ key === "shard" ? ( {blockNumber} ) : ( - blockDisplayValues(block, key, (block as any)[key]) + blockDisplayValues(block, key, (block as any)[key], isNewAddress) ); arr.push({ key, value } as tableEntry); diff --git a/src/components/block/helpers.tsx b/src/components/block/helpers.tsx index 8210833..7f92c0a 100644 --- a/src/components/block/helpers.tsx +++ b/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,18 +121,39 @@ const emptyMixHash = export const blockPropertyDisplayValues: any = { // @ts-ignore - number: (value: any) => ( + number: (value: any, data, isNewAddress) => ( <> - -   - {value > 0 && ( - - + + + toaster.show({ + message: () => ( + + + Copied to clipboard + + ), + }) + } + /> +   + +   + {value > 0 && ( + + + + )} + + - )} - - - + ), 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) && ( <> (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) { {items.sort(sortByOrder).map((i) => ( //@ts-ignore - + ))} ); @@ -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 ( ); } @@ -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 ( <> -
- {binanceAddressMap[value] ? ` (${binanceAddressMap[value]})` : null} + +
+ {binanceAddressMap[value] ? ` (${binanceAddressMap[value]})` : null} + ); }, @@ -203,7 +248,6 @@ const addressPropertyDisplayValues: Record< description: (value) => <>{value}, transactionHash: (value) =>
, circulatingSupply: (value, data) => ( - - ), };