Add prefetch to nonce +-2

This commit is contained in:
Willian Mitsuda 2021-12-27 21:16:33 -03:00
parent 0d2a1a593d
commit f1db3f2348
3 changed files with 81 additions and 49 deletions

View File

@ -14,7 +14,7 @@ const NavButton: React.FC<NavButtonProps> = ({
}) => {
if (disabled || txHash === undefined) {
return (
<span className="bg-link-blue bg-opacity-10 text-gray-400 rounded px-2 py-1 text-xs">
<span className="bg-link-blue bg-opacity-10 text-gray-300 rounded px-2 py-1 text-xs">
{children}
</span>
);
@ -22,7 +22,7 @@ const NavButton: React.FC<NavButtonProps> = ({
return (
<NavLink
className="transition-colors bg-link-blue bg-opacity-10 text-link-blue hover:bg-opacity-100 hover:text-white disabled:bg-link-blue disabled:text-gray-400 disabled:cursor-default rounded px-2 py-1 text-xs"
className="bg-link-blue bg-opacity-10 text-link-blue hover:bg-opacity-100 hover:text-white rounded px-2 py-1 text-xs"
to={transactionURL(txHash)}
>
{children}

View File

@ -6,9 +6,11 @@ import NavButton from "./NavButton";
import { ChecksummedAddress } from "../types";
import { RuntimeContext } from "../useRuntime";
import {
prefetchTransactionBySenderAndNonce,
useTransactionBySenderAndNonce,
useTransactionCount,
} from "../useErigonHooks";
import { useSWRConfig } from "swr";
type NavNonceProps = {
sender: ChecksummedAddress;
@ -34,8 +36,27 @@ const NavNonce: React.FC<NavNonceProps> = ({ sender, nonce }) => {
count !== undefined ? count - 1 : undefined
);
// Prefetch
const swrConfig = useSWRConfig();
const prefetch = () => {
if (provider && sender && nonce !== undefined) {
prefetchTransactionBySenderAndNonce(
swrConfig,
provider,
sender,
nonce - 2
);
prefetchTransactionBySenderAndNonce(
swrConfig,
provider,
sender,
nonce + 2
);
}
};
return (
<div className="pl-2 self-center flex space-x-1">
<div className="pl-2 self-center flex space-x-1" onMouseEnter={prefetch}>
<NavButton txHash={prevTxHash} disabled={nonce === 0}>
<FontAwesomeIcon icon={faChevronLeft} />
</NavButton>

View File

@ -6,6 +6,7 @@ import { Contract } from "@ethersproject/contracts";
import { defaultAbiCoder } from "@ethersproject/abi";
import { BigNumber } from "@ethersproject/bignumber";
import { arrayify, hexDataSlice, isHexString } from "@ethersproject/bytes";
import useSWR, { useSWRConfig } from "swr";
import { getInternalOperations } from "./nodeFunctions";
import {
TokenMetas,
@ -507,24 +508,52 @@ export const useTransactionCount = (
provider: JsonRpcProvider | undefined,
sender: ChecksummedAddress | undefined
): number | undefined => {
const [count, setCount] = useState<number | undefined>();
const { data, error } = useSWR(
provider && sender ? { provider, sender } : null,
async ({ provider, sender }): Promise<number | undefined> =>
provider.getTransactionCount(sender)
);
useEffect(() => {
// Reset
setCount(undefined);
if (error) {
return undefined;
}
return data;
};
if (provider === undefined || sender === undefined) {
return;
}
type TransactionBySenderAndNonceKey = {
provider: JsonRpcProvider;
sender: ChecksummedAddress;
nonce: number;
};
const readCount = async () => {
const _count = await provider.getTransactionCount(sender);
setCount(_count);
};
readCount();
}, [provider, sender]);
const getTransactionBySenderAndNonceFetcher = async ({
provider,
sender,
nonce,
}: TransactionBySenderAndNonceKey): Promise<string | undefined> => {
const result = (await provider.send("ots_getTransactionBySenderAndNonce", [
sender,
nonce,
])) as string;
return count;
// Empty or success
if (result === "0x") {
return undefined;
}
return result;
};
export const prefetchTransactionBySenderAndNonce = (
{ cache, mutate }: ReturnType<typeof useSWRConfig>,
provider: JsonRpcProvider,
sender: ChecksummedAddress,
nonce: number
) => {
const key: TransactionBySenderAndNonceKey = { provider, sender, nonce };
if (cache.get(key)) {
mutate(key, getTransactionBySenderAndNonceFetcher(key));
}
};
export const useTransactionBySenderAndNonce = (
@ -532,37 +561,19 @@ export const useTransactionBySenderAndNonce = (
sender: ChecksummedAddress | undefined,
nonce: number | undefined
): string | undefined => {
const [txHash, setTxHash] = useState<string | undefined>();
const { data, error } = useSWR<
string | undefined,
any,
TransactionBySenderAndNonceKey | null
>(
provider && sender && nonce !== undefined
? { provider, sender, nonce }
: null,
getTransactionBySenderAndNonceFetcher
);
useEffect(() => {
// Reset
setTxHash(undefined);
if (
provider === undefined ||
sender === undefined ||
nonce === undefined ||
nonce < 0
) {
return;
}
const readTxHash = async () => {
const result = (await provider.send(
"ots_getTransactionBySenderAndNonce",
[sender, nonce]
)) as string;
// Empty or success
if (result === "0x") {
setTxHash(undefined);
return;
}
setTxHash(result);
};
readTxHash();
}, [provider, sender, nonce]);
return txHash;
if (error) {
return undefined;
}
return data;
};