feat: add generic msg on failed transactions in toasts

[Jonatan-Chaverri]

Task name here

Fixes #573

Types of change

• Feature
• Bug
• Enhancement

Comments (optional)

[metalboyrick]

GM @Jonatan-Chaverri , thanks for your PR! You got the idea right. Leaving some comments and thoughts for improvement

1. Can we improve the style? (fix the padding and margins)

2. Can we have a clickable link that points us to the specific log from the toast? so that it is easier to trace the error logs for other developers

3. Can we extract some common errors like insufficient balance or approval required? We can discuss this further if you think this is possible / not possible

[metalboyrick]

GM @Jonatan-Chaverri, any updates on this?

[Jonatan-Chaverri]

@metalboyrick I will work on this today and provide an update at the EOD

[Jonatan-Chaverri]

@metalboyrick I have addressed the first two requests.

For the third, we can have a file similar to this
https://github.com/starknet-io/types-js/blob/main/src/api/errors.ts#L107

and translate each code to a more verbose error message, is that what you mean? if not, please elaborate a little more. Thanks.

[metalboyrick]

@Jonatan-Chaverri Yeah something like that would be great, because it gives better clarity to users rather than some strange JSON. You can try out some common ones like insufficient balance, no approval. (be mindful of which errors are common which errors can be user-specific)

[Jonatan-Chaverri]

@metalboyrick I updated the PR, let me know your thoughts, thanks.

[metalboyrick]

Thanks for the fix!

Can fix the styling ser, please make sure the margins and paddings are not too wide, we do not need the dark background as well.

Also, I did not see the common error po up when transferring insufficient balance

[Jonatan-Chaverri]

@metalboyrick ok, made some changes to fix the margins, this is how it looks now

Also, I tried getting insufficient balance error to test too and this is the error content my function is getting

TypeError: Failed to fetch does not match any known common error so that's why it is not showing in the toast.

I'm not aware of how all starknet common errors are printed, so the file I created is based on assumptions that at least keywords will appear in the error, but again is not 100% reliable until we can confirm that (or if you know how to confirm error messages, you can point me to it and I will update)

[metalboyrick]

@Jonatan-Chaverri for the margins, refer to how the transaction success modal looks, use that as the reference, i think u have a bit too much padding there (this should be easy fix)

As for the errors, you can trial-and-error on what these common errors produce as text, and we can use these keywords are reference for now (not a nice solution but we can make do with this for now), ideally we can decode the bytes somehow

thoughts? @gianalarcon @Nadai2010 @0xquantum3labs @jrcarlos2000 if you have any tips to give?

[Jonatan-Chaverri]

@metalboyrick ok, I updated the modal. Success modal is just rendering some content (string, or at least that's what I saw in most places) while I'm trying to render a custom reactNode content, so I can't just use the same, but I removed all padding now, so this is how it looks like.

Regarding the error messages I'm not sure how to replicate them all from the tool, that's out of my expertise. Sorry. But will wait to hear if someone has other tips.

[gianalarcon]

@Jonatan-Chaverri for the margins, refer to how the transaction success modal looks, use that as the reference, i think u have a bit too much padding there (this should be easy fix)

As for the errors, you can trial-and-error on what these common errors produce as text, and we can use these keywords are reference for now (not a nice solution but we can make do with this for now), ideally we can decode the bytes somehow

thoughts? @gianalarcon @Nadai2010 @0xquantum3labs @jrcarlos2000 if you have any tips to give?

After a contract is deployed, and we start interacting with this contract, some errors might arises, since these errors comes from starknet nodes, most of the time it just returns a big text with a lot of information(as showed on the issue description ), and usually the most important info is located at the end of this big text, and most of the errors are kind

[gianalarcon]

Thanks for your contribution @Jonatan-Chaverri. I left a comment

[Jonatan-Chaverri]

Could you at least point out the exact errors you mean by "common errors" so I can try to reproduce them?

[gianalarcon]

Could you at least point out the exact errors you mean by "common errors" so I can try to reproduce them?

Yes, totally agree, we should provide more context on the issue description so you can easily reproduce the errors. I think our team to work on this first. WDYT @metalboyrick ?

[metalboyrick]

Gm ser @Jonatan-Chaverri , I think for now we can keep the first half of the PR (the transaction message). Can we remove all logics on the verbose error part but still keep the console notifications part?

[metalboyrick]

I will merge this after that is done

[Jonatan-Chaverri]

GM, all done, please check @metalboyrick