Fix displaying of custom solidity errors

[technophile-04]

Description

This problem occurs when you have custom solidity errors and you try to read/write from Debug page :

Test YourContract.sol

//SPDX-License-Identifier: MIT
pragma solidity >=0.8.0 <0.9.0;

// Useful for debugging. Remove when deploying to a live network.
import "hardhat/console.sol";

error NOT_OWNER();

error MY_CUSTOM_ERROR(string message, uint value);

contract YourContract {
	// State Variables
	address public immutable owner;
	string public greeting = "Building Unstoppable Apps!!!";
	uint256 public totalCounter = 0;

	constructor(address _owner) {
		owner = _owner;
	}

	modifier isOwner() {
		if (msg.sender != owner) {
			revert NOT_OWNER();
		}
		_;
	}

	function revertWithCustomErrror(bool _shouldRevert) public view {
		if (_shouldRevert) {
			revert MY_CUSTOM_ERROR(
				"Error with my custom message",
				totalCounter
			);
		}
	}

	function revertWithRequire(bool _shouldRevert) public pure {
		require(!_shouldRevert, "Error with require message");
	}

	function setGreeting(string memory _newGreeting) public payable {
		// Change state variables
		greeting = _newGreeting;
		totalCounter += 1;
	}

	function withdraw() public isOwner {
		(bool success, ) = owner.call{ value: address(this).balance }("");
		require(success, "Failed to send Ether");
	}

	receive() external payable {}
}

Before (main branch) :

Screen.Recording.2023-12-03.at.12.13.17.AM.mov

After :

Screen.Recording.2023-12-03.at.12.05.25.AM.mov

Cause :

When passing abi to wagmi's native hooks we were just passing that function abi eg: abi: [functionABI] because of which wagmi was not able to parse the errors.

[carletex]

Works for me! Great job @technophile-04

[damianmarti]

Great improvement @technophile-04 !!

Everything looks great to me!

One small comment that is related to this change, but it really affects all the notifications. The text is cut in an unfriendly way at the end of each line, like for example on the second video:

"reas" -> "on" and "cu" -> "stom". Maybe changing the text-wrap CSS style is enough to fix it. Maybe we can create a new issue for this...

[technophile-04]

The text is cut in an unfriendly way at the end of each line, like for example on the second video:

Ohh yes ! lol it has been bugging me too for a while, just removed word break break-all className at fb2d440 :

Before	After

Like the Before one looks a bit better and smaller but I think it makes more sense to have After due to its nice readability.

I tried playing with some basic styles like adding positioning absolute to the "X" icon but still it didn't look that great maybe I think its better if we tackle it in another issue and tinker more with styles 🙌

[sverps]

Looks good. Added 1 small comment about removing the as any. Besides that, it looks good to go 👍

[carletex]

Ohh yes ! lol it has been bugging me too for a while, just removed word break break-all className at fb2d440 :

The problem with this is that big strings without spaces go over the edge

break-words should work, but it translates into overflow-wrap: break-word which for some reason, doesn't work.

If I apply word-break: break-word it works.

Maybe we need to tweak something about the container?

[carletex]

break-words should work, but it translates into overflow-wrap: break-word which for some reason, doesn't work.

It seems that overflow-x-hidden break-words make it work

[technophile-04]

The problem with this is that big strings without spaces go over the edge
It seems that overflow-x-hidden break-words make it work

Ohh yes! Tysm for the solution it works great !!, updated at f7e960a

[technophile-04]

Tysm all !! Merging this 🙌