diff --git a/explorer/src/components/ExplorerStats/DailyCountLineChart.tsx b/explorer/src/components/ExplorerStats/DailyCountLineChart.tsx index d2e9a2ff..f4352c40 100644 --- a/explorer/src/components/ExplorerStats/DailyCountLineChart.tsx +++ b/explorer/src/components/ExplorerStats/DailyCountLineChart.tsx @@ -98,9 +98,9 @@ const DailyCountLineChart = (props: DailyCountProps) => { colors={({ color }) => color} data={data} curve={"monotoneX"} - margin={{ top: 10, right: 40, bottom: 160, left: 40 }} + margin={{ top: 10, right: 40, bottom: 160, left: 60 }} xScale={{ type: 'point' }} - yScale={{ type: 'linear', min: 'auto', max: 'auto', stacked: false, reverse: false }} + yScale={{ type: 'linear', min: 0, max: 'auto', stacked: false, reverse: false }} enableGridX={false} axisTop={null} axisRight={null} @@ -109,9 +109,6 @@ const DailyCountLineChart = (props: DailyCountProps) => { tickSize: 5, tickPadding: 5, tickRotation: 0, - legend: 'count', - legendOffset: -40, - legendPosition: 'middle' }} pointSize={4} pointColor={{ theme: 'background' }} diff --git a/explorer/src/components/ExplorerStats/ExplorerStats.tsx b/explorer/src/components/ExplorerStats/ExplorerStats.tsx index 6d0beb11..2fb999d7 100644 --- a/explorer/src/components/ExplorerStats/ExplorerStats.tsx +++ b/explorer/src/components/ExplorerStats/ExplorerStats.tsx @@ -44,7 +44,8 @@ const Stats: React.FC = ({ emitterChain, emitterAddress }) => { const [totals, setTotals] = useState() const [recent, setRecent] = useState() - const [polling, setPolling] = useState(true); + const [address, setAddress] = useState() + const [chain, setChain] = useState() const [lastFetched, setLastFetched] = useState() const [pollInterval, setPollInterval] = useState() const [controller, setController] = useState(new AbortController()) @@ -125,29 +126,34 @@ const Stats: React.FC = ({ emitterChain, emitterAddress }) => { clearInterval(pollInterval) setPollInterval(undefined) } - if (polling) { - // abort any in-flight requests - controller.abort() - // create a new controller for the new fetches, add it to state - const newController = new AbortController(); - setController(newController) - // create a signal for requests - const { signal } = newController; - // start polling - let interval = setInterval(() => { - getData({ emitterChain, emitterAddress }, baseUrl, signal).catch(err => { - console.error('failed fetching data. err: ', err) - }) - }, 5000) - setPollInterval(interval) - } + // abort any in-flight requests + controller.abort() + // create a new controller for the new fetches, add it to state + const newController = new AbortController(); + setController(newController) + // create a signal for requests + const { signal } = newController; + // start polling + let interval = setInterval(() => { + getData({ emitterChain, emitterAddress }, baseUrl, signal) + }, 5000) + setPollInterval(interval) } + useEffect(() => { + // getData if first load (no totals or recents), or emitterAddress/emitterChain changed. + if (!totals && !recent || emitterAddress !== address || emitterChain !== chain) { + getData({ emitterChain, emitterAddress }, activeNetwork.endpoints.bigtableFunctionsBase, new AbortController().signal) + } controller.abort() setTotals(undefined) setRecent(undefined) + pollingController(emitterChain, emitterAddress, activeNetwork.endpoints.bigtableFunctionsBase) + // hold chain & address in state to detect changes + setChain(emitterChain) + setAddress(emitterAddress) }, [emitterChain, emitterAddress, activeNetwork.endpoints.bigtableFunctionsBase]) useEffect(() => { @@ -156,7 +162,7 @@ const Stats: React.FC = ({ emitterChain, emitterAddress }) => { clearInterval(pollInterval) } }; - }, [polling, pollInterval, activeNetwork.endpoints.bigtableFunctionsBase]) + }, [pollInterval, activeNetwork.endpoints.bigtableFunctionsBase]) let title = "Recent messages" let hideTableTitles = false @@ -179,20 +185,19 @@ const Stats: React.FC = ({ emitterChain, emitterAddress }) => { } - -
- {totals?.DailyTotals && + +
} -
- - {recent && } + /> +
+ {recent && } +
) } diff --git a/explorer/src/components/Payload/DecodePayload.tsx b/explorer/src/components/Payload/DecodePayload.tsx index cce41617..d177562f 100644 --- a/explorer/src/components/Payload/DecodePayload.tsx +++ b/explorer/src/components/Payload/DecodePayload.tsx @@ -260,7 +260,7 @@ const DecodePayload = (props: DecodePayloadProps) => { {props.showSummary && payloadBundle ? ( payloadBundle.type === "assetMeta" ? (<> - {chainEnums[payloadBundle.payload.tokenChain]}  {payloadBundle.payload.symbol} {payloadBundle.payload.name} + {"AssetMeta:"} {chainEnums[payloadBundle.payload.tokenChain]}  {payloadBundle.payload.symbol} {payloadBundle.payload.name} ) : payloadBundle.type === "tokenTransfer" ? (<> {"native "}{chainEnums[payloadBundle.payload.originChain]}{' asset -> '}{chainEnums[payloadBundle.payload.targetChain]}