Merge branch 'feature/slow-tx-by-nonce' into develop
This commit is contained in:
commit
9630ac9912
183
src/Address.tsx
183
src/Address.tsx
|
@ -1,183 +1,28 @@
|
|||
import React, { useEffect, useContext, useCallback } from "react";
|
||||
import {
|
||||
useParams,
|
||||
useNavigate,
|
||||
Routes,
|
||||
Route,
|
||||
useSearchParams,
|
||||
} from "react-router-dom";
|
||||
import { Tab } from "@headlessui/react";
|
||||
import Blockies from "react-blockies";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faCircleNotch } from "@fortawesome/free-solid-svg-icons/faCircleNotch";
|
||||
import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons/faQuestionCircle";
|
||||
import StandardFrame from "./StandardFrame";
|
||||
import StandardSubtitle from "./StandardSubtitle";
|
||||
import AddressOrENSNameNotFound from "./components/AddressOrENSNameNotFound";
|
||||
import Copy from "./components/Copy";
|
||||
import Faucet from "./components/Faucet";
|
||||
import NavTab from "./components/NavTab";
|
||||
import SourcifyLogo from "./sourcify/SourcifyLogo";
|
||||
import AddressTransactionResults from "./address/AddressTransactionResults";
|
||||
import Contracts from "./address/Contracts";
|
||||
import { RuntimeContext } from "./useRuntime";
|
||||
import { useAddressOrENS } from "./useResolvedAddresses";
|
||||
import { useSourcifyMetadata } from "./sourcify/useSourcify";
|
||||
import { ChecksummedAddress } from "./types";
|
||||
import { useHasCode } from "./useErigonHooks";
|
||||
import { useChainInfo } from "./useChainInfo";
|
||||
import React from "react";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import AddressMainPage from "./AddressMainPage";
|
||||
|
||||
const AddressTransactionByNonce = React.lazy(
|
||||
() => import("./AddressTransactionByNonce")
|
||||
);
|
||||
|
||||
/**
|
||||
* This is the default handler for /address/* URL path.
|
||||
*
|
||||
* It can redirect to different child components depending on search
|
||||
* query params, so it is not possible to use default path routing
|
||||
* mechanisms to declarative-model them.
|
||||
*/
|
||||
const Address: React.FC = () => {
|
||||
const { provider } = useContext(RuntimeContext);
|
||||
const { addressOrName, direction } = useParams();
|
||||
if (addressOrName === undefined) {
|
||||
throw new Error("addressOrName couldn't be undefined here");
|
||||
}
|
||||
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const urlFixer = useCallback(
|
||||
(address: ChecksummedAddress) => {
|
||||
navigate(
|
||||
`/address/${address}${
|
||||
direction ? "/" + direction : ""
|
||||
}?${searchParams.toString()}`,
|
||||
{ replace: true }
|
||||
);
|
||||
},
|
||||
[navigate, direction, searchParams]
|
||||
);
|
||||
const [checksummedAddress, isENS, error] = useAddressOrENS(
|
||||
addressOrName,
|
||||
urlFixer
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isENS || checksummedAddress === undefined) {
|
||||
document.title = `Address ${addressOrName} | Otterscan`;
|
||||
} else {
|
||||
document.title = `Address ${checksummedAddress} | Otterscan`;
|
||||
}
|
||||
}, [addressOrName, checksummedAddress, isENS]);
|
||||
|
||||
const hasCode = useHasCode(provider, checksummedAddress, "latest");
|
||||
const addressMetadata = useSourcifyMetadata(
|
||||
hasCode ? checksummedAddress : undefined,
|
||||
provider?.network.chainId
|
||||
);
|
||||
|
||||
const { network, faucets } = useChainInfo();
|
||||
|
||||
// Search address by nonce === transaction @ nonce
|
||||
const [searchParams] = useSearchParams();
|
||||
const rawNonce = searchParams.get("nonce");
|
||||
if (rawNonce !== null) {
|
||||
return (
|
||||
<AddressTransactionByNonce
|
||||
checksummedAddress={checksummedAddress}
|
||||
rawNonce={rawNonce}
|
||||
/>
|
||||
);
|
||||
return <AddressTransactionByNonce rawNonce={rawNonce} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<StandardFrame>
|
||||
{error ? (
|
||||
<AddressOrENSNameNotFound
|
||||
addressOrENSName={addressOrName}
|
||||
supportsENS={provider?.network.ensAddress !== undefined}
|
||||
/>
|
||||
) : (
|
||||
checksummedAddress && (
|
||||
<>
|
||||
<StandardSubtitle>
|
||||
<div className="flex space-x-2 items-baseline">
|
||||
<Blockies
|
||||
className="self-center rounded"
|
||||
seed={checksummedAddress.toLowerCase()}
|
||||
scale={3}
|
||||
/>
|
||||
<span>Address</span>
|
||||
<span className="font-address text-base text-gray-500">
|
||||
{checksummedAddress}
|
||||
</span>
|
||||
<Copy value={checksummedAddress} rounded />
|
||||
{/* Only display faucets for testnets who actually have any */}
|
||||
{network === "testnet" && faucets && faucets.length > 0 && (
|
||||
<Faucet address={checksummedAddress} rounded />
|
||||
)}
|
||||
{isENS && (
|
||||
<span className="rounded-lg px-2 py-1 bg-gray-200 text-gray-500 text-xs">
|
||||
ENS: {addressOrName}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</StandardSubtitle>
|
||||
<Tab.Group>
|
||||
<Tab.List className="flex space-x-2 border-l border-r border-t rounded-t-lg bg-white">
|
||||
<NavTab href={`/address/${addressOrName}`}>Overview</NavTab>
|
||||
{hasCode && (
|
||||
<NavTab href={`/address/${addressOrName}/contract`}>
|
||||
<span
|
||||
className={`flex items-baseline space-x-2 ${
|
||||
addressMetadata === undefined ? "italic opacity-50" : ""
|
||||
}`}
|
||||
>
|
||||
<span>Contract</span>
|
||||
{addressMetadata === undefined ? (
|
||||
<span className="self-center">
|
||||
<FontAwesomeIcon
|
||||
className="animate-spin"
|
||||
icon={faCircleNotch}
|
||||
/>
|
||||
</span>
|
||||
) : addressMetadata === null ? (
|
||||
<span className="self-center text-red-500">
|
||||
<FontAwesomeIcon icon={faQuestionCircle} />
|
||||
</span>
|
||||
) : (
|
||||
<span className="self-center">
|
||||
<SourcifyLogo />
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</NavTab>
|
||||
)}
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
<Routes>
|
||||
<Route
|
||||
index
|
||||
element={
|
||||
<AddressTransactionResults address={checksummedAddress} />
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="txs/:direction"
|
||||
element={
|
||||
<AddressTransactionResults address={checksummedAddress} />
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="contract"
|
||||
element={
|
||||
<Contracts
|
||||
checksummedAddress={checksummedAddress}
|
||||
rawMetadata={addressMetadata}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
</>
|
||||
)
|
||||
)}
|
||||
</StandardFrame>
|
||||
);
|
||||
// Standard address main page with tabs
|
||||
return <AddressMainPage />;
|
||||
};
|
||||
|
||||
export default Address;
|
||||
|
|
|
@ -0,0 +1,170 @@
|
|||
import React, { useEffect, useCallback, useContext } from "react";
|
||||
import {
|
||||
Routes,
|
||||
Route,
|
||||
useNavigate,
|
||||
useParams,
|
||||
useSearchParams,
|
||||
} from "react-router-dom";
|
||||
import { Tab } from "@headlessui/react";
|
||||
import Blockies from "react-blockies";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faCircleNotch } from "@fortawesome/free-solid-svg-icons/faCircleNotch";
|
||||
import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons/faQuestionCircle";
|
||||
import StandardFrame from "./StandardFrame";
|
||||
import StandardSubtitle from "./StandardSubtitle";
|
||||
import AddressOrENSNameNotFound from "./components/AddressOrENSNameNotFound";
|
||||
import Copy from "./components/Copy";
|
||||
import Faucet from "./components/Faucet";
|
||||
import NavTab from "./components/NavTab";
|
||||
import SourcifyLogo from "./sourcify/SourcifyLogo";
|
||||
import AddressTransactionResults from "./address/AddressTransactionResults";
|
||||
import Contracts from "./address/Contracts";
|
||||
import { RuntimeContext } from "./useRuntime";
|
||||
import { useHasCode } from "./useErigonHooks";
|
||||
import { useChainInfo } from "./useChainInfo";
|
||||
import { useAddressOrENS } from "./useResolvedAddresses";
|
||||
import { useSourcifyMetadata } from "./sourcify/useSourcify";
|
||||
import { ChecksummedAddress } from "./types";
|
||||
|
||||
type AddressMainPageProps = {};
|
||||
|
||||
const AddressMainPage: React.FC<AddressMainPageProps> = ({}) => {
|
||||
const { addressOrName, direction } = useParams();
|
||||
if (addressOrName === undefined) {
|
||||
throw new Error("addressOrName couldn't be undefined here");
|
||||
}
|
||||
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const urlFixer = useCallback(
|
||||
(address: ChecksummedAddress) => {
|
||||
navigate(
|
||||
`/address/${address}${
|
||||
direction ? "/" + direction : ""
|
||||
}?${searchParams.toString()}`,
|
||||
{ replace: true }
|
||||
);
|
||||
},
|
||||
[navigate, direction, searchParams]
|
||||
);
|
||||
const [checksummedAddress, isENS, error] = useAddressOrENS(
|
||||
addressOrName,
|
||||
urlFixer
|
||||
);
|
||||
|
||||
const { provider } = useContext(RuntimeContext);
|
||||
const hasCode = useHasCode(provider, checksummedAddress, "latest");
|
||||
const addressMetadata = useSourcifyMetadata(
|
||||
hasCode ? checksummedAddress : undefined,
|
||||
provider?.network.chainId
|
||||
);
|
||||
|
||||
const { network, faucets } = useChainInfo();
|
||||
|
||||
useEffect(() => {
|
||||
if (isENS || checksummedAddress === undefined) {
|
||||
document.title = `Address ${addressOrName} | Otterscan`;
|
||||
} else {
|
||||
document.title = `Address ${checksummedAddress} | Otterscan`;
|
||||
}
|
||||
}, [addressOrName, checksummedAddress, isENS]);
|
||||
|
||||
return (
|
||||
<StandardFrame>
|
||||
{error ? (
|
||||
<AddressOrENSNameNotFound
|
||||
addressOrENSName={addressOrName}
|
||||
supportsENS={provider?.network.ensAddress !== undefined}
|
||||
/>
|
||||
) : (
|
||||
checksummedAddress && (
|
||||
<>
|
||||
<StandardSubtitle>
|
||||
<div className="flex space-x-2 items-baseline">
|
||||
<Blockies
|
||||
className="self-center rounded"
|
||||
seed={checksummedAddress.toLowerCase()}
|
||||
scale={3}
|
||||
/>
|
||||
<span>Address</span>
|
||||
<span className="font-address text-base text-gray-500">
|
||||
{checksummedAddress}
|
||||
</span>
|
||||
<Copy value={checksummedAddress} rounded />
|
||||
{/* Only display faucets for testnets who actually have any */}
|
||||
{network === "testnet" && faucets && faucets.length > 0 && (
|
||||
<Faucet address={checksummedAddress} rounded />
|
||||
)}
|
||||
{isENS && (
|
||||
<span className="rounded-lg px-2 py-1 bg-gray-200 text-gray-500 text-xs">
|
||||
ENS: {addressOrName}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</StandardSubtitle>
|
||||
<Tab.Group>
|
||||
<Tab.List className="flex space-x-2 border-l border-r border-t rounded-t-lg bg-white">
|
||||
<NavTab href={`/address/${addressOrName}`}>Overview</NavTab>
|
||||
{hasCode && (
|
||||
<NavTab href={`/address/${addressOrName}/contract`}>
|
||||
<span
|
||||
className={`flex items-baseline space-x-2 ${
|
||||
addressMetadata === undefined ? "italic opacity-50" : ""
|
||||
}`}
|
||||
>
|
||||
<span>Contract</span>
|
||||
{addressMetadata === undefined ? (
|
||||
<span className="self-center">
|
||||
<FontAwesomeIcon
|
||||
className="animate-spin"
|
||||
icon={faCircleNotch}
|
||||
/>
|
||||
</span>
|
||||
) : addressMetadata === null ? (
|
||||
<span className="self-center text-red-500">
|
||||
<FontAwesomeIcon icon={faQuestionCircle} />
|
||||
</span>
|
||||
) : (
|
||||
<span className="self-center">
|
||||
<SourcifyLogo />
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</NavTab>
|
||||
)}
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
<Routes>
|
||||
<Route
|
||||
index
|
||||
element={
|
||||
<AddressTransactionResults address={checksummedAddress} />
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="txs/:direction"
|
||||
element={
|
||||
<AddressTransactionResults address={checksummedAddress} />
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="contract"
|
||||
element={
|
||||
<Contracts
|
||||
checksummedAddress={checksummedAddress}
|
||||
rawMetadata={addressMetadata}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
</>
|
||||
)
|
||||
)}
|
||||
</StandardFrame>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddressMainPage;
|
|
@ -1,24 +1,47 @@
|
|||
import React, { useContext, useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import React, { useCallback, useContext, useEffect, useState } from "react";
|
||||
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
|
||||
import StandardFrame from "./StandardFrame";
|
||||
import AddressOrENSNameNotFound from "./components/AddressOrENSNameNotFound";
|
||||
import AddressOrENSNameInvalidNonce from "./components/AddressOrENSNameInvalidNonce";
|
||||
import AddressOrENSNameNoTx from "./components/AddressOrENSNameNoTx";
|
||||
import { ChecksummedAddress } from "./types";
|
||||
import { transactionURL } from "./url";
|
||||
import { useTransactionBySenderAndNonce } from "./useErigonHooks";
|
||||
import { RuntimeContext } from "./useRuntime";
|
||||
import { useAddressOrENS } from "./useResolvedAddresses";
|
||||
import { ChecksummedAddress } from "./types";
|
||||
import { transactionURL } from "./url";
|
||||
|
||||
type AddressTransactionByNonceProps = {
|
||||
checksummedAddress: ChecksummedAddress | undefined;
|
||||
rawNonce: string;
|
||||
};
|
||||
|
||||
const AddressTransactionByNonce: React.FC<AddressTransactionByNonceProps> = ({
|
||||
checksummedAddress,
|
||||
rawNonce,
|
||||
}) => {
|
||||
const { provider } = useContext(RuntimeContext);
|
||||
|
||||
const { addressOrName, direction } = useParams();
|
||||
if (addressOrName === undefined) {
|
||||
throw new Error("addressOrName couldn't be undefined here");
|
||||
}
|
||||
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const urlFixer = useCallback(
|
||||
(address: ChecksummedAddress) => {
|
||||
navigate(
|
||||
`/address/${address}${
|
||||
direction ? "/" + direction : ""
|
||||
}?${searchParams.toString()}`,
|
||||
{ replace: true }
|
||||
);
|
||||
},
|
||||
[navigate, direction, searchParams]
|
||||
);
|
||||
const [checksummedAddress, , ensError] = useAddressOrENS(
|
||||
addressOrName,
|
||||
urlFixer
|
||||
);
|
||||
|
||||
// Calculate txCount ONLY when asked for latest nonce
|
||||
const [txCount, setTxCount] = useState<number | undefined>();
|
||||
useEffect(() => {
|
||||
|
@ -54,14 +77,21 @@ const AddressTransactionByNonce: React.FC<AddressTransactionByNonceProps> = ({
|
|||
checksummedAddress,
|
||||
nonce !== undefined && isNaN(nonce) ? undefined : nonce
|
||||
);
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Invalid ENS
|
||||
if (ensError) {
|
||||
return (
|
||||
<StandardFrame>
|
||||
<AddressOrENSNameNotFound
|
||||
addressOrENSName={addressOrName}
|
||||
supportsENS={provider?.network.ensAddress !== undefined}
|
||||
/>
|
||||
</StandardFrame>
|
||||
);
|
||||
}
|
||||
|
||||
// Loading...
|
||||
if (
|
||||
checksummedAddress === undefined ||
|
||||
nonce === undefined ||
|
||||
txHash === undefined
|
||||
) {
|
||||
if (checksummedAddress === undefined || nonce === undefined) {
|
||||
return <StandardFrame />;
|
||||
}
|
||||
|
||||
|
@ -86,6 +116,11 @@ const AddressTransactionByNonce: React.FC<AddressTransactionByNonceProps> = ({
|
|||
);
|
||||
}
|
||||
|
||||
// Valid nonce, waiting tx load
|
||||
if (txHash === undefined) {
|
||||
return <StandardFrame />;
|
||||
}
|
||||
|
||||
// Valid nonce, but no tx found
|
||||
if (txHash === null) {
|
||||
return (
|
||||
|
|
Loading…
Reference in New Issue