Feat/more chains

[portdeveloper]

Description

Since #107 was too big, I decided to break the PR in two:

1. More chains
2. Custom chains

This is the PR that implements all chains that viem supports.
As all chains from viem includes localhost, I have:

• Added the localhost to the dropdown menu
• Added hardhat to networks.ts
• Fixed a small gap in the logic in index.tsx that didnot put the contract address in the url bar if chain.id is 31337
• Disabled the blockexplorer link if the chain id is 31337

Additional Information

• I have read the contributing docs (if this is your first contribution)
• This is not a duplicate of any existing pull request

Related Issues

Closes #{issue number}

Note: If your changes are small and straightforward, you may skip the creation of an issue beforehand and remove this section. However, for medium-to-large changes, it is recommended to have an open issue for discussion and approval prior to submitting a pull request.

Your ENS/address:

[vercel]

@portdeveloper is attempting to deploy a commit to the BuidlGuidl Team on Vercel.

A member of the Team first needs to authorize it.

[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	Jun 19, 2024 2:25pm

[technophile-04]

Tysm Port! This is great! and everything works nicely, just added a couple of comments

---

Maybe some future improvements in other PR could be :

1. When users selects a chain from dialog box it gets added to select options of network dropdown to its corresponding group based on testnet or mainnet. Also we store in localstorage so that next time user visits abi.ninja he directly see in networks dropdown

2. Maybe some minor UI polish ?

   For example the cards color in light mode, in dark mode it looks perfect though :

   

[technophile-04]

Looks great!!

Just noticed a small things :

could you please add a small condition to say locahost instead of foundry if chain id is 31337 :

abi.ninja/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx

Line 49 in baeec4e

{chain.name}

[Pabl0cks]

GJ Port!! Looking good to me! 🙌

When users selects a chain from dialog box it gets added to select options of network dropdown to its corresponding group based on testnet or mainnet. Also we store in localstorage so that next time user visits abi.ninja he directly see in networks dropdown

I really like this idea. Maybe this feature could evolve to "✏ Edit Chains" or similar, where user can select which chains to show in the dropdown, and we can add the "Add new chain" feature in that modal too.

[technophile-04]

Hey port could you also please resolve conflicts in NetworksDropdown.tsx?

[portdeveloper]

Hey port could you also please resolve conflicts in NetworksDropdown.tsx?

Give me 15 minutes, I am implementing the save selected chains to localstorage feature

[technophile-04]

Thanks @portdeveloper , also noticed a small UX improvements we can do is when chain is selected and added in dropdown from modal. If you again open modal it shouldn't be present their.

And also we should ask Andrea if we can use some other icons for chains that are added

[technophile-04]

Really nice Port! Thanks!

just cc @Pabl0cks and @carletex once for final UI/UX feel if something we should tweak in this PR itself, we can iterate more later and also created #117.

Here is vercel deployed link: https://abi-ninja-v2-r9zqeunq6-buidlguidldao.vercel.app/

[Pabl0cks]

just cc @Pabl0cks and @carletex once for final UI/UX feel if something we should tweak in this PR itself, we can iterate more later and also created #117.

Here is vercel deployed link: https://abi-ninja-v2-r9zqeunq6-buidlguidldao.vercel.app/

I think the UI/UX feels good! But something is wrong when I search for contracts.

Trying with Gitcoin address from mainnet: 0xde30da39c46104798bb5aa3fe8b9e0e1f348163f

From the logs it seems like is trying to query for the address on Arbitrum instead:
GET https://anyabi.xyz/api/get-abi/42161/0xde30da39c46104798bb5aa3fe8b9e0e1f348163f 404 (Not Found)

UPDATE:
Only happens on first load because of the initialized value of network state. When you change the value of the dropdown it gets the chain id correctly, so when you change back to Ethereum it will work OK.

• Should we force the initial state of network to "1"?
• Or it's better to reorder the array returned from getTargetNetworks() to have Ethereum on the first position again? So our current initial state works: networks[0].id.toString()

[portdeveloper]

Oh thanks @Pabl0cks
I didn't even notice that bug!
How about we just...
const [network, setNetwork] = useState("1");?

I think simple works best here.

Pushing the change, feel free to make any modifs if you feel like it!

[technophile-04]

Or it's better to reorder the array returned from getTargetNetworks() to have Ethereum on the first position again? So our current initial state works: networks[0].id.toString()

nice catch !! Just to be sure also checked at other reference if it will cause any problem else where it seems fine 🙌

Thanks @portdeveloper and Pablo fore review ! Merging this !