Add logic to parse network name from URL

[Pabl0cks]

Description

Currently users can manually set their url to open the ContractDetail page for their desired contract, by typing /{contractAddress}/{chainId} => for example gitcoin in mainnet: /0xde30da39c46104798bb5aa3fe8b9e0e1f348163f/1

This PR adds the possibility of using {chainName} or {chainId} indistinctly, so it's easier for most users to create their URLs manually => Using {chainName} for the same example: /0xde30da39c46104798bb5aa3fe8b9e0e1f348163f/mainnet

Some considerations

• In this initial approach I'm comparing the network name from the URL with chain.network from viem/chains, but I've realized some networks got a weird chain.network (mainnet for example), I solved it with this hacky code:
  if (normalizedNetwork === "ethereum" || normalizedNetwork === "mainnet") { normalizedNetwork = "homestead"; }

• Creating local variable parsedNetworkId instead of just using the new chainId state because I was having problems with the refresh of the value, sometimes was fetching the ABI with the wrong value.

Not sure if that's the correct way to solve both issues.

Related Issues

Closes #38

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
abi-ninja-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 19, 2024 11:29am

[portdeveloper]

LGTM!
Also how about letting the users paste in just the contract address to load the contract on mainnet instead of having to write /CONTRACT_ADDRESS/CHAIN_NAME?

So the user would just do /CONTRACT_ADDRESS and it would load that contract on mainnet. Maybe not in this PR but lmk what you think! Nevertheless, amazing work🫡

[carletex]

So the user would just do /CONTRACT_ADDRESS and it would load that contract on mainnet. Maybe not in this PR but lmk what you think! Nevertheless, amazing work🫡

I like this! I think the OG abi ninja had it.

We can tackle it in another PR. Up to you all.

Thanks ! <3

[technophile-04]

Tysm @Pabl0cks !

Just pushed a small bug fix at a82f670 to avoid full page load, it was happening when you use network name and start selecting functions from UI :

Page reload while selecting methods

Screen.Recording.2024-02-19.at.4.46.25.PM.mov

So the user would just do /CONTRACT_ADDRESS and it would load that contract on mainnet. Maybe not in this PR but lmk what you think! Nevertheless, amazing work🫡

I like this! I think the OG abi ninja had it.

+++ , I thought we could easily achieve it by adding redirects into next.config.ts or middleware.ts but lol it was not working as intended but I might be missing something ! Keeping it for another PR will create an issue for it 🙌

[Pabl0cks]

Thx @portdeveloper @carletex and @technophile-04 for the review ♥

Just pushed a small bug fix at a82f670 to avoid full page load, it was happening when you use network name and start selecting functions from UI :

Nice catch and fix! 🙌 and thanks for implementing the global state for chainId!!