Decompile ABI using a heimdall-rs backend

[portdeveloper]

Description

This PR:

• Calls a simple heimdall-rs backend to get the abi of a contract
• Implements steps instead of tabs in the ui
• Enriches notifications to provide better UX.

https://github.com/BuidlGuidl/abi.ninja/assets/108868128/a1d7e508-6607-47ad-a431-0fd2ea209196

ToDo - Improvements

• [x] go back button looks bad on smaller viewports, also its placement can be better
• [ ] code cleanup

Additional Information

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

Related Issues

_Closes #63

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[bot]]

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	Apr 19, 2024 4:45pm

[portdeveloper]

linkt to the commit The way I made the height of the component here is tricky... I basically used the same div with an empty char instead of the go back button.

https://github.com/BuidlGuidl/abi.ninja/assets/108868128/d051ac39-f19f-4b6f-a53b-f6bd2e1028f0

I am aware this is a bad practice, and will try to fix it asap!

Also, lmk if you know any easier/cleaner way of doing this, I feel like I have one in my head somewhere but can't recall it...

[Pabl0cks]

Good job @portdeveloper incorporating heimdall-rs into abi.ninja!! 👾

Last week in London we reviewed the new workflow a bit, and I think we could get some designer help to simplify the UI to make it a bit smoother. Asked Andrea for help and she is going to play a bit in figma to propose a way to simplify it.

As soon as we get the design I'll send it to review 🙌

[Pabl0cks]

Andrea sent us the new UI/UX proposal, let me know what do you think @portdeveloper ! 🙌

The workflow would be something like this:

• User access abi.ninja, we delete the tabs and only leave the contract address input (+ quick access)
• User enters an address and clicks "Load Contract"
  • If contract is verified on the selected network => ContractDetailPage loads with the ABI data
  • If contract is not verified, we let the user choose between Decompyle (beta) and Manually import

We have those design proposals for the "contract not verified" window.

I personally like option 1 and 3, probably 1 is the simplest. I think we can leave network dropdown styles as they are right now for simplicity, don't need to follow the design 100%.

[portdeveloper]

https://github.com/BuidlGuidl/abi.ninja/assets/108868128/d4085f90-fcac-4e92-a70e-c17219739065

Updated the UI according to Andrea's design, but merging the current styles with hers. Honestly, the new UI looks much better, I am really excited for it!

[carletex]

Getting an error when I try to search for an address in Goerli. Maybe it's just a localhost problem.

I think we should remove Goerli from ABI Ninja since it's deprecated. https://blog.ethereum.org/2023/11/30/goerli-lts-update

---

Not sure how far we are from merging, but before we do, should we put Heimdall backend in a BG account? Maybe we can deploy a new instance from Port's gulltoppr or just adding admin@bg to the existing one. For the sake of paying (if needed), security and not having a single person behind it (as we do with all the BG servers)

Thank you all!!

[portdeveloper]

@technophile-04 Yes, you are right, heimdall-rs currently cannot decompile that contract and returns with an error, but my backend does not handle it gracefully. For now I am adding a check for abi array length which returns if the array length is 0. Tomorrow I will fix the backend to handle this kind of errors better. Thanks for pointing this out!

[technophile-04]

should we put Heimdall backend in a BG account? Maybe we can deploy a new instance from Port's gulltoppr or just adding admin@bg to the existing one. For the sake of paying (if needed), security and not having a single person behind it (as we do with all the BG servers)

I think we are just only waiting on this right ? Because it looks really great for first iteration !

Also @portdeveloper could you please resolve conflicts in packages/nextjs/page/index.tsx

[portdeveloper]

Thanks for reminding me the conflicts!

Here is the repo for the backend, I use fly.io for deployment so a simple flyctl launch is enough for deploying the backend.

[carletex]

Here is the repo for the backend, I use fly.io for deployment so a simple flyctl launch is enough for deploying the backend.

🫡 Thanks Port!

I'll do this during the week. I'll hit you up If I have any issues.

---

There is still a conflict in index.tsx

[portdeveloper]

Sorry about the conflicts 😢 , fixed!

[carletex]

Just added the envar to Vercel.

When you guys feel that is ready.... feel free to merge!!

[technophile-04]

Tested it nicely and working great !!!!

Unverfied contract on baseSepolia : 0xFB30C0790128b97e3aC540E6124e512E37c47D00 (Heimdall Working) Unverfied contract on base mainnet : 0x3A6AE1e6aD00518bDcd485a6B4d428fb9c9a3120 (Heimdall not working) Unverfied contract on base mainnet : 0xD7c77458e33502f2E5eC04b481463aeCdDd4acd0 (Heimdall working)

Obviously, I think it won't be able to decode each and every contract but its 60% of time able to do so on my random testing

Will, merge this probably tomorrow 🙌

[Pabl0cks]

Been testing it, looks good to me!!

• Is working normally on verified contracts
• Unverified with ABI is still working (can test my sepolia contract 0x60b99996e28c40d5e78ea217e897b93a6fabcdae with the ABI on the txt file from my previous comments)
• Unverified with decompile is working quite well, checked with my contract and some random contracts:
  • My sepolia contract 0x60b99996e28c40d5e78ea217e897b93a6fabcdae is still working nicely
  • Unverified on Base (working): 0x9ba6d87ce0c721e9e7b8d8cac12a5334c8898f59
  • Unverified on Mainnet (+ proxy) (working): 0x758ed0650bdf2ac3bf4a48440c3eb2f6d2bb42a5
  • Unverified on OP mainnet (not working): 0x2e42f214467f647fe687fd9a2bf3baddfa737465
  • Unverified on OP mainnet (working): 0x38edf0a0d32b5c8e23284da87d078062a3f772a7
  • Unverified on OP mainnet (not working): 0x1c8317517070c197ccaaa047662468f1b4055baa