Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add logic to parse network name from URL #65

Merged
merged 3 commits into from
Feb 19, 2024
Merged

Add logic to parse network name from URL #65

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
45c7acb
Add logic for network name from URL
Pabl0cks Feb 15, 2024
dbc67fe
use chainId from global AbiNinja state instead
technophile-04 Feb 19, 2024
a82f670
fix full page reload when network name + select methods
technophile-04 Feb 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 54 additions & 39 deletions packages/nextjs/pages/[contractAddress]/[network].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,66 +27,81 @@ const ContractDetailPage = () => {
const { contractAddress, network } = router.query as ParsedQueryContractDetailsPage;
const [contractData, setContractData] = useState<ContractData>({ abi: [], address: contractAddress });
const [isLoading, setIsLoading] = useState(true);
const [chainId, setChainId] = useState<number>(1);
const [error, setError] = useState<string | null>(null);
const contractName = contractData.address;
const { contractAbi: storedAbi, setMainChainId } = useAbiNinjaState(state => ({
contractAbi: state.contractAbi,
setMainChainId: state.setMainChainId,
}));

const getNetworkName = (chainId: string) => {
const chain = Object.values(chains).find(chain => chain.id === parseInt(chainId));
const getNetworkName = (chainId: number) => {
const chain = Object.values(chains).find(chain => chain.id === chainId);
return chain ? chain.name : "Unknown Network";
};

useEffect(() => {
if (network) {
setMainChainId(parseInt(network));
}
}, [network, setMainChainId]);
let normalizedNetwork = network.toLowerCase();
if (normalizedNetwork === "ethereum" || normalizedNetwork === "mainnet") {
normalizedNetwork = "homestead"; // chain.network for mainnet in viem/chains
}

useEffect(() => {
const fetchContractAbi = async () => {
setIsLoading(true);
const chain = Object.values(chains).find(chain => chain.network === normalizedNetwork);

if (storedAbi && storedAbi.length > 0) {
setContractData({ abi: storedAbi, address: contractAddress });
setError(null);
setIsLoading(false);
return;
let parsedNetworkId = 1;
if (chain) {
parsedNetworkId = chain.id;
} else {
parsedNetworkId = parseInt(network);
}

try {
const abi = await fetchContractABIFromAnyABI(contractAddress, parseInt(network));
if (!abi) throw new Error("Got empty or undefined ABI from AnyABI");
setContractData({ abi, address: contractAddress });
setError(null);
} catch (error) {
console.error("Error fetching ABI from AnyABI: ", error);
console.log("Trying to fetch ABI from Etherscan...");
setMainChainId(parsedNetworkId);
setChainId(parsedNetworkId);

const fetchContractAbi = async () => {
setIsLoading(true);

if (storedAbi && storedAbi.length > 0) {
setContractData({ abi: storedAbi, address: contractAddress });
setError(null);
setIsLoading(false);
return;
}

try {
const abiString = await fetchContractABIFromEtherscan(contractAddress, parseInt(network));
const parsedAbi = JSON.parse(abiString);
setContractData({ abi: parsedAbi, address: contractAddress });
const abi = await fetchContractABIFromAnyABI(contractAddress, parsedNetworkId);
if (!abi) throw new Error("Got empty or undefined ABI from AnyABI");
setContractData({ abi, address: contractAddress });
setError(null);
} catch (etherscanError: any) {
console.error("Error fetching ABI from Etherscan: ", etherscanError);
setError(etherscanError.message || "Error occurred while fetching ABI");
} catch (error: any) {
console.error("Error fetching ABI from AnyABI: ", error);
setError(error.message || "Error occurred while fetching ABI");
console.log("Trying to fetch ABI from Etherscan...");
try {
const abiString = await fetchContractABIFromEtherscan(contractAddress, parsedNetworkId);
const parsedAbi = JSON.parse(abiString);
setContractData({ abi: parsedAbi, address: contractAddress });
setError(null);
} catch (etherscanError: any) {
console.error("Error fetching ABI from Etherscan: ", etherscanError);
setError(etherscanError.message || "Error occurred while fetching ABI");
}
} finally {
setIsLoading(false);
}
} finally {
setIsLoading(false);
}
};
};

if (contractAddress && network) {
if (isAddress(contractAddress)) {
fetchContractAbi();
} else {
setIsLoading(false);
setError("Please enter a valid address");
if (contractAddress && network) {
if (isAddress(contractAddress)) {
fetchContractAbi();
} else {
setIsLoading(false);
setError("Please enter a valid address");
}
}
}
}, [contractAddress, network, storedAbi]);
}, [contractAddress, network, storedAbi, setMainChainId]);

return (
<>
Expand All @@ -106,7 +121,7 @@ const ContractDetailPage = () => {
<h2 className="text-2xl pt-2 flex items-end">{error}</h2>
<p className="break-all">
There was an error loading the contract <strong>{contractAddress}</strong> on{" "}
<strong>{getNetworkName(network)}</strong>.
<strong>{getNetworkName(chainId)}</strong>.
</p>
<p className="pb-2">Make sure the data is correct and you are connected to the right network.</p>

Expand Down
Loading