Fix error handling

This commit is contained in:
Willian Mitsuda 2021-07-02 16:20:50 -03:00
parent 62df32b82f
commit 0c7cc1fc64
1 changed files with 79 additions and 69 deletions

View File

@ -36,6 +36,7 @@ const AddressTransactions: React.FC = () => {
const [checksummedAddress, setChecksummedAddress] = useState<string>(); const [checksummedAddress, setChecksummedAddress] = useState<string>();
const [isENS, setENS] = useState<boolean>(); const [isENS, setENS] = useState<boolean>();
const [error, setError] = useState<boolean>();
// If it looks like it is an ENS name, try to resolve it // If it looks like it is an ENS name, try to resolve it
useEffect(() => { useEffect(() => {
@ -50,6 +51,9 @@ const AddressTransactions: React.FC = () => {
if (resolvedAddress !== null) { if (resolvedAddress !== null) {
setENS(true); setENS(true);
setChecksummedAddress(resolvedAddress); setChecksummedAddress(resolvedAddress);
setError(false);
} else {
setError(true);
} }
}; };
resolveName(); resolveName();
@ -129,82 +133,88 @@ const AddressTransactions: React.FC = () => {
const [feeDisplay, feeDisplayToggler] = useFeeToggler(); const [feeDisplay, feeDisplayToggler] = useFeeToggler();
if (!checksummedAddress) {
return <></>;
}
return ( return (
<StandardFrame> <StandardFrame>
<StandardSubtitle> {error ? (
<div className="flex space-x-2 items-baseline"> <span className="text-base">
<Blockies "{params.addressOrName}" is not an ETH address or ENS name.
className="self-center rounded" </span>
seed={checksummedAddress.toLowerCase()} ) : (
scale={3} checksummedAddress && (
/>
<span>Address</span>
<span className="font-address text-base text-gray-500">
{checksummedAddress}
</span>
<Copy value={checksummedAddress} rounded />
{isENS && (
<span className="rounded-lg px-2 py-1 bg-gray-200 text-gray-500 text-xs">
ENS: {params.addressOrName}
</span>
)}
</div>
</StandardSubtitle>
<ContentFrame>
<div className="flex justify-between items-baseline py-3">
<div className="text-sm text-gray-500">
{page === undefined ? (
<>Waiting for search results...</>
) : (
<>{page.length} transactions on this page</>
)}
</div>
<UndefinedPageControl
address={params.addressOrName}
isFirst={controller?.isFirst}
isLast={controller?.isLast}
prevHash={page ? page[0].hash : ""}
nextHash={page ? page[page.length - 1].hash : ""}
disabled={controller === undefined}
/>
</div>
<ResultHeader
feeDisplay={feeDisplay}
feeDisplayToggler={feeDisplayToggler}
/>
{controller ? (
<> <>
{controller.getPage().map((tx) => ( <StandardSubtitle>
<TransactionItem <div className="flex space-x-2 items-baseline">
key={tx.hash} <Blockies
tx={tx} className="self-center rounded"
selectedAddress={params.addressOrName} seed={checksummedAddress.toLowerCase()}
feeDisplay={feeDisplay} scale={3}
/> />
))} <span>Address</span>
<div className="flex justify-between items-baseline py-3"> <span className="font-address text-base text-gray-500">
<div className="text-sm text-gray-500"> {checksummedAddress}
{page !== undefined && ( </span>
<>{page.length} transactions on this page</> <Copy value={checksummedAddress} rounded />
{isENS && (
<span className="rounded-lg px-2 py-1 bg-gray-200 text-gray-500 text-xs">
ENS: {params.addressOrName}
</span>
)} )}
</div> </div>
<UndefinedPageControl </StandardSubtitle>
address={params.addressOrName} <ContentFrame>
isFirst={controller.isFirst} <div className="flex justify-between items-baseline py-3">
isLast={controller.isLast} <div className="text-sm text-gray-500">
prevHash={page ? page[0].hash : ""} {page === undefined ? (
nextHash={page ? page[page.length - 1].hash : ""} <>Waiting for search results...</>
) : (
<>{page.length} transactions on this page</>
)}
</div>
<UndefinedPageControl
address={params.addressOrName}
isFirst={controller?.isFirst}
isLast={controller?.isLast}
prevHash={page ? page[0].hash : ""}
nextHash={page ? page[page.length - 1].hash : ""}
disabled={controller === undefined}
/>
</div>
<ResultHeader
feeDisplay={feeDisplay}
feeDisplayToggler={feeDisplayToggler}
/> />
</div> {controller ? (
<>
{controller.getPage().map((tx) => (
<TransactionItem
key={tx.hash}
tx={tx}
selectedAddress={checksummedAddress}
feeDisplay={feeDisplay}
/>
))}
<div className="flex justify-between items-baseline py-3">
<div className="text-sm text-gray-500">
{page !== undefined && (
<>{page.length} transactions on this page</>
)}
</div>
<UndefinedPageControl
address={params.addressOrName}
isFirst={controller.isFirst}
isLast={controller.isLast}
prevHash={page ? page[0].hash : ""}
nextHash={page ? page[page.length - 1].hash : ""}
/>
</div>
</>
) : (
<PendingResults />
)}
</ContentFrame>
</> </>
) : ( )
<PendingResults /> )}
)}
</ContentFrame>
</StandardFrame> </StandardFrame>
); );
}; };