gaspersic/solana
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix explorer bugs (#11336)

Browse Source 
* Fix race condition in explorer details fetching

* Fix SOL delta rendering bug
This commit is contained in:
Justin Starry
2020-08-02 22:29:40 +08:00
committed by GitHub
parent 4052008c42
commit 433f262290
2 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
explorer/src/components/AccountDetails.tsx
View File

@ -20,6 +20,7 @@ import {
useFetchAccountOwnedTokens, useFetchAccountOwnedTokens,
useAccountOwnedTokens, useAccountOwnedTokens,
} from "providers/accounts/tokens"; } from "providers/accounts/tokens";
import { useCluster, ClusterStatus } from "providers/cluster";
type Props = { address: string }; type Props = { address: string };
export default function AccountDetails({ address }: Props) { export default function AccountDetails({ address }: Props) {
@ -51,11 +52,13 @@ function AccountCards({ pubkey }: { pubkey: PublicKey }) {
const address = pubkey.toBase58(); const address = pubkey.toBase58();
const info = useAccountInfo(address); const info = useAccountInfo(address);
const refresh = useFetchAccountInfo(); const refresh = useFetchAccountInfo();
const { status } = useCluster();
// Fetch account on load // Fetch account on load
React.useEffect(() => { React.useEffect(() => {
if (pubkey && !info) fetchAccount(pubkey); if (pubkey && !info && status === ClusterStatus.Connected)
}, [address]); // eslint-disable-line react-hooks/exhaustive-deps fetchAccount(pubkey);
}, [address, status]); // eslint-disable-line react-hooks/exhaustive-deps
if (!info || info.status === FetchStatus.Fetching) { if (!info || info.status === FetchStatus.Fetching) {
return <LoadingCard />; return <LoadingCard />;

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

@ -6,7 +6,7 @@ import {
FetchStatus, FetchStatus,
} from "../providers/transactions"; } from "../providers/transactions";
import { useFetchTransactionDetails } from "providers/transactions/details"; import { useFetchTransactionDetails } from "providers/transactions/details";
import { useCluster } from "providers/cluster"; import { useCluster, ClusterStatus } from "providers/cluster";
import { import {
TransactionSignature, TransactionSignature,
SystemProgram, SystemProgram,
@ -49,12 +49,13 @@ function StatusCard({ signature }: Props) {
const status = useTransactionStatus(signature); const status = useTransactionStatus(signature);
const refresh = useFetchTransactionStatus(); const refresh = useFetchTransactionStatus();
const details = useTransactionDetails(signature); const details = useTransactionDetails(signature);
const { firstAvailableBlock } = useCluster(); const { firstAvailableBlock, status: clusterStatus } = useCluster();
// Fetch transaction on load // Fetch transaction on load
React.useEffect(() => { React.useEffect(() => {
if (!status) fetchStatus(signature); if (!status && clusterStatus === ClusterStatus.Connected)
}, [signature]); // eslint-disable-line react-hooks/exhaustive-deps fetchStatus(signature);
}, [signature, clusterStatus]); // eslint-disable-line react-hooks/exhaustive-deps
if (!status || status.fetchStatus === FetchStatus.Fetching) { if (!status || status.fetchStatus === FetchStatus.Fetching) {
return <LoadingCard />; return <LoadingCard />;
@ -229,9 +230,9 @@ function AccountsCard({ signature }: Props) {
if (change === 0) return ""; if (change === 0) return "";
const sols = lamportsToSolString(change); const sols = lamportsToSolString(change);
if (change > 0) { if (change > 0) {
return <span className="badge badge-soft-success">{"+" + sols}</span>; return <span className="badge badge-soft-success">+{sols}</span>;
} else { } else {
return <span className="badge badge-soft-warning">{"-" + sols}</span>; return <span className="badge badge-soft-warning">-{sols}</span>;
} }
}; };