a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change address tx by nonce url to addressOrName?nonce=? format

This commit is contained in:
Willian Mitsuda 2022-01-31 15:37:29 -03:00
parent 20fc443009
commit e6d60f1fcd
4 changed files with 81 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/Address.tsx
View File

@ -26,6 +26,13 @@ import { useMultipleMetadata } from "./sourcify/useSourcify";
import { ChecksummedAddress } from "./types";
import { useAddressesWithCode } from "./useErigonHooks";
const AddressTransactionByNonce = React.lazy(
() =>
import(
/* webpackChunkName: "addresstxbynonce", webpackPrefetch: true */ "./AddressTransactionByNonce"
)
);
const Address: React.FC = () => {
const { provider } = useContext(RuntimeContext);
const { addressOrName, direction } = useParams();
@ -79,6 +86,23 @@ const Address: React.FC = () => {
? metadatas[checksummedAddress]
: undefined;
// Search address by nonce === transaction @ nonce
const rawNonce = searchParams.get("nonce");
if (rawNonce !== null) {
let nonce: number | undefined = undefined;
try {
nonce = parseInt(rawNonce);
} catch (err) {
// ignore
}
return (
<AddressTransactionByNonce
checksummedAddress={checksummedAddress}
nonce={nonce}
/>
);
}
return (
<StandardFrame>
{error ? (

85
src/AddressTransaction.tsx
View File

@ -1,85 +0,0 @@
import React, { useCallback, useContext } 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 { ChecksummedAddress } from "./types";
import { transactionURL } from "./url";
import { useTransactionBySenderAndNonce } from "./useErigonHooks";
import { useAddressOrENS } from "./useResolvedAddresses";
import { RuntimeContext } from "./useRuntime";
const AddressTransaction: React.FC = () => {
const { provider } = useContext(RuntimeContext);
const navigate = useNavigate();
const { addressOrName } = useParams();
if (addressOrName === undefined) {
throw new Error("addressOrName couldn't be undefined here");
}
const [searchParams] = useSearchParams();
const urlFixer = useCallback(
(address: ChecksummedAddress) => {
navigate(`/address/${address}/tx?${searchParams.toString()}`, {
replace: true,
});
},
[navigate, searchParams]
);
const [checksummedAddress, , error] = useAddressOrENS(
addressOrName,
urlFixer
);
const rawNonce = searchParams.get("nonce");
let nonce: number | undefined = undefined;
try {
nonce = rawNonce === null ? undefined : parseInt(rawNonce);
} catch (err) {
// ignore
}
const txHash = useTransactionBySenderAndNonce(
provider,
checksummedAddress,
nonce
);
if (error) {
return (
<StandardFrame>
<AddressOrENSNameNotFound addressOrENSName={addressOrName} />
</StandardFrame>
);
}
if (checksummedAddress !== undefined && rawNonce === null) {
return (
<StandardFrame>
<AddressOrENSNameInvalidNonce
addressOrENSName={checksummedAddress}
nonce={"undefined"}
/>
</StandardFrame>
);
}
if (
checksummedAddress !== undefined &&
nonce !== undefined &&
txHash === null
) {
return (
<StandardFrame>
<AddressOrENSNameInvalidNonce
addressOrENSName={checksummedAddress}
nonce={nonce.toString()}
/>
</StandardFrame>
);
}
if (txHash) {
navigate(transactionURL(txHash));
}
return <StandardFrame />;
};
export default AddressTransaction;

57
src/AddressTransactionByNonce.tsx Normal file
View File

@ -0,0 +1,57 @@
import React, { useContext } from "react";
import { useNavigate } from "react-router-dom";
import StandardFrame from "./StandardFrame";
import AddressOrENSNameInvalidNonce from "./components/AddressOrENSNameInvalidNonce";
import { ChecksummedAddress } from "./types";
import { transactionURL } from "./url";
import { useTransactionBySenderAndNonce } from "./useErigonHooks";
import { RuntimeContext } from "./useRuntime";
type AddressTransactionByNonceProps = {
checksummedAddress: ChecksummedAddress | undefined;
nonce: number | undefined;
};
const AddressTransactionByNonce: React.FC<AddressTransactionByNonceProps> = ({
checksummedAddress,
nonce,
}) => {
const { provider } = useContext(RuntimeContext);
const txHash = useTransactionBySenderAndNonce(
provider,
checksummedAddress,
nonce
);
const navigate = useNavigate();
if (checksummedAddress !== undefined && nonce === undefined) {
return (
<StandardFrame>
<AddressOrENSNameInvalidNonce
addressOrENSName={checksummedAddress}
nonce={"undefined"}
/>
</StandardFrame>
);
}
if (
checksummedAddress !== undefined &&
nonce !== undefined &&
txHash === null
) {
return (
<StandardFrame>
<AddressOrENSNameInvalidNonce
addressOrENSName={checksummedAddress}
nonce={nonce.toString()}
/>
</StandardFrame>
);
}
if (txHash) {
navigate(transactionURL(txHash));
}
return <StandardFrame />;
};
export default AddressTransactionByNonce;

10
src/App.tsx
View File

@ -21,12 +21,6 @@ const Address = React.lazy(
() =>
import(/* webpackChunkName: "address", webpackPrefetch: true */ "./Address")
);
const AddressTransaction = React.lazy(
() =>
import(
/* webpackChunkName: "addresstx", webpackPrefetch: true */ "./AddressTransaction"
)
);
const Transaction = React.lazy(
() =>
import(/* webpackChunkName: "tx", webpackPrefetch: true */ "./Transaction")
@ -67,10 +61,6 @@ const App = () => {
path="address/:addressOrName/*"
element={<Address />}
/>
<Route
path="address/:addressOrName/tx/*"
element={<AddressTransaction />}
/>
<Route path="*" element={<Home />} />
</Route>
</Routes>