blockworks-foundation
/
pyth-crosschain
mirror of https://github.com/blockworks-foundation/pyth-crosschain.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

explorer: load data sooner 

Change-Id: I52afde5d252330d8d8bfdf2f4b72c8d3672af857
This commit is contained in:
justinschuldt 2021-10-29 07:25:58 -05:00 committed by Justin Schuldt
parent 4b510d8aa1
commit 84de7c2fd0
3 changed files with 34 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
explorer/src/components/ExplorerStats/DailyCountLineChart.tsx
View File

@ -98,9 +98,9 @@ const DailyCountLineChart = (props: DailyCountProps) => {
colors={({ color }) => color} colors={({ color }) => color}
data={data} data={data}
curve={"monotoneX"} curve={"monotoneX"}
margin={{ top: 10, right: 40, bottom: 160, left: 40 }} margin={{ top: 10, right: 40, bottom: 160, left: 60 }}
xScale={{ type: 'point' }} 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} enableGridX={false}
axisTop={null} axisTop={null}
axisRight={null} axisRight={null}
@ -109,9 +109,6 @@ const DailyCountLineChart = (props: DailyCountProps) => {
tickSize: 5, tickSize: 5,
tickPadding: 5, tickPadding: 5,
tickRotation: 0, tickRotation: 0,
legend: 'count',
legendOffset: -40,
legendPosition: 'middle'
}} }}
pointSize={4} pointSize={4}
pointColor={{ theme: 'background' }} pointColor={{ theme: 'background' }}

57
explorer/src/components/ExplorerStats/ExplorerStats.tsx
View File

@ -44,7 +44,8 @@ const Stats: React.FC<StatsProps> = ({ emitterChain, emitterAddress }) => {
const [totals, setTotals] = useState<Totals>() const [totals, setTotals] = useState<Totals>()
const [recent, setRecent] = useState<Recent>() const [recent, setRecent] = useState<Recent>()
const [polling, setPolling] = useState(true); const [address, setAddress] = useState<StatsProps["emitterAddress"]>()
const [chain, setChain] = useState<StatsProps["emitterChain"]>()
const [lastFetched, setLastFetched] = useState<number>() const [lastFetched, setLastFetched] = useState<number>()
const [pollInterval, setPollInterval] = useState<NodeJS.Timeout>() const [pollInterval, setPollInterval] = useState<NodeJS.Timeout>()
const [controller, setController] = useState<AbortController>(new AbortController()) const [controller, setController] = useState<AbortController>(new AbortController())
@ -125,29 +126,34 @@ const Stats: React.FC<StatsProps> = ({ emitterChain, emitterAddress }) => {
clearInterval(pollInterval) clearInterval(pollInterval)
setPollInterval(undefined) setPollInterval(undefined)
} }
if (polling) { // abort any in-flight requests
// abort any in-flight requests controller.abort()
controller.abort() // create a new controller for the new fetches, add it to state
// create a new controller for the new fetches, add it to state const newController = new AbortController();
const newController = new AbortController(); setController(newController)
setController(newController) // create a signal for requests
// create a signal for requests const { signal } = newController;
const { signal } = newController; // start polling
// start polling let interval = setInterval(() => {
let interval = setInterval(() => { getData({ emitterChain, emitterAddress }, baseUrl, signal)
getData({ emitterChain, emitterAddress }, baseUrl, signal).catch(err => { }, 5000)
console.error('failed fetching data. err: ', err) setPollInterval(interval)
})
}, 5000)
setPollInterval(interval)
}
} }
useEffect(() => { 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() controller.abort()
setTotals(undefined) setTotals(undefined)
setRecent(undefined) setRecent(undefined)
pollingController(emitterChain, emitterAddress, activeNetwork.endpoints.bigtableFunctionsBase) pollingController(emitterChain, emitterAddress, activeNetwork.endpoints.bigtableFunctionsBase)
// hold chain & address in state to detect changes
setChain(emitterChain)
setAddress(emitterAddress)
}, [emitterChain, emitterAddress, activeNetwork.endpoints.bigtableFunctionsBase]) }, [emitterChain, emitterAddress, activeNetwork.endpoints.bigtableFunctionsBase])
useEffect(() => { useEffect(() => {
@ -156,7 +162,7 @@ const Stats: React.FC<StatsProps> = ({ emitterChain, emitterAddress }) => {
clearInterval(pollInterval) clearInterval(pollInterval)
} }
}; };
}, [polling, pollInterval, activeNetwork.endpoints.bigtableFunctionsBase]) }, [pollInterval, activeNetwork.endpoints.bigtableFunctionsBase])
let title = "Recent messages" let title = "Recent messages"
let hideTableTitles = false let hideTableTitles = false
@ -179,20 +185,19 @@ const Stats: React.FC<StatsProps> = ({ emitterChain, emitterAddress }) => {
<ChainOverviewCard totalDays={daysSinceDataStart} totals={totals} dataKey="5" title={ChainID[5]} Icon={PolygonIcon} /> <ChainOverviewCard totalDays={daysSinceDataStart} totals={totals} dataKey="5" title={ChainID[5]} Icon={PolygonIcon} />
</div> </div>
} }
<Spin spinning={!totals && !recent} style={{ width: '100%', height: 500 }} /> <Spin spinning={!totals && !recent} style={{ width: '100%', height: 500 }} >
<div> <div>
{totals?.DailyTotals &&
<DailyCountLineChart <DailyCountLineChart
dailyCount={totals?.DailyTotals} dailyCount={totals?.DailyTotals || {}}
lastFetched={lastFetched} lastFetched={lastFetched}
title="messages/day" title="messages/day"
emitterChain={emitterChain} emitterChain={emitterChain}
emitterAddress={emitterAddress} emitterAddress={emitterAddress}
/>} />
</div> </div>
{recent && <RecentMessages recent={recent} lastFetched={lastFetched} title={title} hideTableTitles={hideTableTitles} />}
{recent && <RecentMessages recent={recent} lastFetched={lastFetched} title={title} hideTableTitles={hideTableTitles} />}
</Spin>
</> </>
) )
} }

2
explorer/src/components/Payload/DecodePayload.tsx
View File

@ -260,7 +260,7 @@ const DecodePayload = (props: DecodePayloadProps) => {
{props.showSummary && payloadBundle ? ( {props.showSummary && payloadBundle ? (
payloadBundle.type === "assetMeta" ? (<> payloadBundle.type === "assetMeta" ? (<>
{chainEnums[payloadBundle.payload.tokenChain]}&nbsp; {payloadBundle.payload.symbol} {payloadBundle.payload.name} {"AssetMeta:"}&nbsp;{chainEnums[payloadBundle.payload.tokenChain]}&nbsp; {payloadBundle.payload.symbol} {payloadBundle.payload.name}
</>) : </>) :
payloadBundle.type === "tokenTransfer" ? (<> payloadBundle.type === "tokenTransfer" ? (<>
{"native "}{chainEnums[payloadBundle.payload.originChain]}{' asset -> '}{chainEnums[payloadBundle.payload.targetChain]} {"native "}{chainEnums[payloadBundle.payload.originChain]}{' asset -> '}{chainEnums[payloadBundle.payload.targetChain]}