[txHash].tsx page UI improvements

[portdeveloper]

Description

Currently, if the value of a function argument is 0, it is not shown in txHash page because of the already existing logic:

By explicitly checking for undefined, we let the 0 survive javascript's evaluation :). In Javascript 0 is a falsy value so it defaults to "" because of ||.

Also, when the function name and the arguments take too much space, the table looks a bit off due to the scrollbar.

Here is a video showing the two problems.

Untitled.mp4

This PR solves that problem by utilizing tailwind-scrollbar, and using it in the Function called row in [txHash].tsx page.
Furthermore, I think tailwind-scrollbar can serve people using scaffold-eth 2 well when designing good-looking dApps.

Here is the video after implementing the solutions suggested by this PR.

Also increased the Data row's textarea's height to a fixed value of 150px

chrome_SDxT2bJU6u.mp4

Let me know what you think about these improvements/fixes! I am open to any kind of feedback.

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: portdev.eth

[rin-st]

hey @portdeveloper ! Thanks for improvements! Added some comments

[technophile-04]

Tysm @portdeveloper the fix looks great,

I would rather remove tailwind-scrollbar and keep it as browser default because on Mac it doesn't look that bad :

Always btw love the idea of showing the scroll bar on for function function instead of the whole container 🙌

[portdeveloper]

Thanks for the feedback @technophile-04 ! Time for me to get a mac I guess lol

[technophile-04]

Tysm @portdeveloper !! While testing I noticed a small bug which is present on main branch too :

We are not showing the function name called on /blockexplorer page :

Could you please look into it too ? Also please feel free to tackle it in a different PR if it's too serious and hard 🙌

[portdeveloper]

Tysm @portdeveloper !! While testing I noticed a small bug which is present on main branch too :

We are not showing the function name called on /blockexplorer page :

Could you please look into it too ? Also please feel free to tackle it in a different PR if it's too serious and hard 🙌

Fixed by using decodeTransactionData in useFetchBlocks. Somehow we forgot it while migrating to viem. Thanks for noticing!

[technophile-04]

Fixed by using decodeTransactionData in useFetchBlocks. Somehow we forgot it while migrating to viem. Thanks for noticing!

Tysm great catch !!