Improve Debug with information for inherited functions

[FilipHarald]

I've been using SE for some time now to experiment with smart contracts. For me the debug UI is perfect for testing out the functions. However, once I start extending the contracts with existing standards like Ownable I get a bit confused which functions are inherited and which I wrote.

My suggestion is that we either group the functions by where it is inherited from, or that we in some other way signal it to the developer.

I already have an idea on how to show it in the UI, but I'm first curious to hear if others think this is a good idea. And also, I need some guidance on how I can get these kind of information. I guess it's only available in compile-time?

[carletex]

Hey @FilipHarald , this is a cool idea! I could see having some UI indicator next to inherited functions/vars + showing your contract functions/vars first... and inherited ones second.

However not sure how easy it is to pull this off. If you want to do some digging: check packages/hardhat/deploy/99_generateTsAbis.ts (generates the deployedContracts.ts file that the front-end uses). We could try getting the data there and store an "inherited" prop array with the names of inherited data => the frontend could check that when rendering the debug UI component.

Not sure if there is a better way, but feel free to explore!

Thanks!

[FilipHarald]

Alright, I got it working now. I've done it here for the write contracts. I sort so that contract defined functions comes on top. Also, this will group the inherited functions by their origin 👍 .

I'm thinking of changing * to an icon or perhaps ℹ️ .

I'm not sure how I should do with the tooltip though, preferably it shouldn't break the contract path string. In the latest changes I try to build my own tooltip. It's not working yet, and I'm not sure it's a good approach. This is how it looks with normal tooltip.

function-origin.mp4

[carletex]

Hey @FilipHarald, it's looking great!! Good job getting the info we needed from the deployments folder (part 2 will be the foundry branch, but no worries about this for now)

Could you draft a PR so we test and iterate over the UI?

Thanks!!

[FilipHarald]

#564