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

Fix bug causing eager fetching of rich list

This commit is contained in:
Justin Starry 2020-05-23 18:02:53 +08:00 committed by Michael Vines
parent 94531f0879
commit e962d40815
4 changed files with 58 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
explorer/src/components/SupplyCard.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import { useSupply, useFetchSupply } from "providers/supply";
import { useSupply, useFetchSupply, Status } from "providers/supply";
import LoadingCard from "./common/LoadingCard";
import ErrorCard from "./common/ErrorCard";
import { lamportsToSolString } from "utils";
@ -9,11 +9,18 @@ export default function SupplyCard() {
const supply = useSupply();
const fetchSupply = useFetchSupply();
if (typeof supply === "boolean") {
if (supply) return <LoadingCard />;
// Fetch supply on load
React.useEffect(() => {
fetchSupply();
}, []); // eslint-disable-line react-hooks/exhaustive-deps
if (supply === Status.Disconnected) {
return <ErrorCard text="Not connected to the cluster" />;
}
if (supply === Status.Idle || supply === Status.Connecting)
return <LoadingCard />;
if (typeof supply === "string") {
return <ErrorCard text={supply} retry={fetchSupply} />;
}

13
explorer/src/components/TopAccountsCard.tsx
View File

@ -2,7 +2,7 @@ import React from "react";
import { Link } from "react-router-dom";
import { AccountBalancePair } from "@solana/web3.js";
import Copyable from "./Copyable";
import { useRichList, useFetchRichList } from "providers/richList";
import { useRichList, useFetchRichList, Status } from "providers/richList";
import LoadingCard from "./common/LoadingCard";
import ErrorCard from "./common/ErrorCard";
import { lamportsToSolString } from "utils";
@ -11,11 +11,18 @@ export default function TopAccountsCard() {
const richList = useRichList();
const fetchRichList = useFetchRichList();
if (typeof richList === "boolean") {
if (richList) return <LoadingCard />;
// Fetch on load
React.useEffect(() => {
fetchRichList();
}, []); // eslint-disable-line react-hooks/exhaustive-deps
if (richList === Status.Disconnected) {
return <ErrorCard text="Not connected to the cluster" />;
}
if (richList === Status.Idle || richList === Status.Connecting)
return <LoadingCard />;
if (typeof richList === "string") {
return <ErrorCard text={richList} retry={fetchRichList} />;
}

28
explorer/src/providers/richList.tsx
View File

@ -3,13 +3,19 @@ import React from "react";
import { AccountBalancePair, Connection } from "@solana/web3.js";
import { useCluster, ClusterStatus } from "./cluster";
export enum Status {
Idle,
Disconnected,
Connecting
}
type RichList = {
accounts: AccountBalancePair[];
totalSupply: number;
circulatingSupply: number;
};
type State = RichList | boolean | string;
type State = RichList | Status | string;
type Dispatch = React.Dispatch<React.SetStateAction<State>>;
const StateContext = React.createContext<State | undefined>(undefined);
@ -17,13 +23,16 @@ const DispatchContext = React.createContext<Dispatch | undefined>(undefined);
type Props = { children: React.ReactNode };
export function RichListProvider({ children }: Props) {
const [state, setState] = React.useState<State>(false);
const { status, url } = useCluster();
const [state, setState] = React.useState<State>(Status.Idle);
const { status: clusterStatus, url } = useCluster();
React.useEffect(() => {
if (status === ClusterStatus.Connecting) setState(false);
if (status === ClusterStatus.Connected) fetch(setState, url);
}, [status, url]);
if (state !== Status.Idle) {
if (clusterStatus === ClusterStatus.Connecting)
setState(Status.Disconnected);
if (clusterStatus === ClusterStatus.Connected) fetch(setState, url);
}
}, [clusterStatus, url]); // eslint-disable-line react-hooks/exhaustive-deps
return (
<StateContext.Provider value={state}>
@ -35,7 +44,8 @@ export function RichListProvider({ children }: Props) {
}
async function fetch(dispatch: Dispatch, url: string) {
dispatch(true);
dispatch(Status.Connecting);
try {
const connection = new Connection(url, "max");
const supply = (await connection.getSupply()).value;
@ -43,9 +53,9 @@ async function fetch(dispatch: Dispatch, url: string) {
await connection.getLargestAccounts({ filter: "circulating" })
).value;
// Update state if selected cluster hasn't changed
// Update state if still connecting
dispatch(state => {
if (!state) return state;
if (state !== Status.Connecting) return state;
return {
accounts,
totalSupply: supply.total,

28
explorer/src/providers/supply.tsx
View File

@ -3,7 +3,13 @@ import React from "react";
import { Supply, Connection } from "@solana/web3.js";
import { useCluster, ClusterStatus } from "./cluster";
type State = Supply | boolean | string;
export enum Status {
Idle,
Disconnected,
Connecting
}
type State = Supply | Status | string;
type Dispatch = React.Dispatch<React.SetStateAction<State>>;
const StateContext = React.createContext<State | undefined>(undefined);
@ -11,13 +17,16 @@ const DispatchContext = React.createContext<Dispatch | undefined>(undefined);
type Props = { children: React.ReactNode };
export function SupplyProvider({ children }: Props) {
const [state, setState] = React.useState<State>(false);
const { status, url } = useCluster();
const [state, setState] = React.useState<State>(Status.Idle);
const { status: clusterStatus, url } = useCluster();
React.useEffect(() => {
if (status === ClusterStatus.Connecting) setState(false);
if (status === ClusterStatus.Connected) fetch(setState, url);
}, [status, url]);
if (state !== Status.Idle) {
if (clusterStatus === ClusterStatus.Connecting)
setState(Status.Disconnected);
if (clusterStatus === ClusterStatus.Connected) fetch(setState, url);
}
}, [clusterStatus, url]); // eslint-disable-line react-hooks/exhaustive-deps
return (
<StateContext.Provider value={state}>
@ -29,14 +38,15 @@ export function SupplyProvider({ children }: Props) {
}
async function fetch(dispatch: Dispatch, url: string) {
dispatch(true);
dispatch(Status.Connecting);
try {
const connection = new Connection(url, "max");
const supply = (await connection.getSupply()).value;
// Update state if selected cluster hasn't changed
// Update state if still connecting
dispatch(state => {
if (!state) return state;
if (state !== Status.Connecting) return state;
return supply;
});
} catch (err) {