Challenge 3 v2

[rin-st]

• connected to contracts
• updated wagmi/viem
• refactored
• added roll animation (old images)
• added prize
• added readme
• added tests

TODOs

• add images to readme (please add it someone 😄 )
• add new rolling images

tested with this riggedRoll contract https://goerli.etherscan.io/address/0x4eade1dc595e1d62f2f63b8e05ea86835ebfe9ec#code

cc @Ifechukwudaniel can't add you to reviewers, please check

[technophile-04]

Tysm Rinat !! Just tried it out and was able to go through the challenge nicely!

I think todo which are remaining are :

• Update Readme with image and minor changes like 01_deploy_riggedRoll.~js~ => 01_deploy_riggedRoll.ts

• comment out stuff which we tell people to uncomment while following challenge like :

  Uncomment the code in packages/nextjs/pages/dice.tsx to show a riggedRoll button and contract balance on the main UI tab

Some small nitpicks :

We can completely ignore this not a big deal at all !

Thanks again 🙌 !!

[rin-st]

Thank you for review Shiv!

Updated videos, readme and commented rigged roll button

Some small nitpicks :

I saw it but it was for screens less than 1500px. But updated to col-spans 3/2 instead of 3/1

We can completely ignore this not a big deal at all !

What's wrong with last image? If you're about dice bg, I can't change it, it's inside video

[ZakGriffith]

This is looking and working excellent, thanks for the work put in! Did a full pass on it (didn't check the readMe yet) and it's functioning great! Here are my finding on other things.

I saw it but it was for screens less than 1500px. But updated to col-spans 3/2 instead of 3/1

I agree that it still gets weird when the width gets too low. Would it help to push it all to vertical and have the events show under the dice buttons and animation if it goes under a certain width? For me, the width where it goes off is 1260px wide.

When the animation switches from the unlimited roll to the finishing roll, it is a bit more jarring than I anticipated. I don't believe there is anything we can do about this and it's such a simple thing it's not worth any extra work. Overall it looks great.

In my opinion we should cap the events displayed in both the Roll Events and Winner Events to 13 or even 10. That will avoid the events going past the dice animation and should look a little cleaner.

It is unusual then you can swap just one of the winner events between USD/ETH. It should do all events when one is clicked.

We currently have just the Rigged Roll button commented out. Should we uncomment the entire section including the Header, address, and balance? The readMe would need slightly adjusted as well.

When deployed to sepolia, the price displayed as $0.00 even though the contract did have the .05 ETH. The same happened to the riggedRoll contract balance after it was funded. Will do further tests on this.

All that being said, I vote we merge this PR into the challenge, then I can create the above as issues to avoid this PR turning into a days long PR with 100 comments. 😂😂 Get's hard to read once they get bloated. Nice work all!

[rin-st]

Thanks for comments @ZakGriffith !

Updated tables, now they looks better, like events table in other challenges.

For me, the width where it goes off is 1260px wide.

Image below is for less than 1200 resolution. We don't optimize challenges for low resolutions and I think this one looks better than some others

In my opinion we should cap the events displayed in both the Roll Events and Winner Events to 13 or even 10.

capped to 10 like in the image

It is unusual then you can swap just one of the winner events between USD/ETH. It should do all events when one is clicked.

now it changes for every row when clicked

Should we uncomment the entire section including the Header, address, and balance? The readMe would need slightly adjusted as well.

I don't know 🤷 . We can do it, but basically, RiggedRoll address and balance exists from the start of the challenge.

When deployed to sepolia, the price displayed as $0.00 even though the contract did have the .05 ETH. The same happened to the riggedRoll contract balance after it was funded. Will do further tests on this.

Don't have time for it today, will check tomorrow

Also, before merging keep in mind that I still didn't change old faucet image and didn't add app screenshots to the readme. Feel free to add it if you have time

Thank you! 🙏

[Pabl0cks]

Great job Rinat! 🙌🔥 Testing has been very smooth and it's looking great for me.

I've added screenshots to the Readme and did a couple of small tweaks to have the same row height in both tables, and align middle div to the events divs.

If the technical execution of those tweaks was not correct or if you feel they shouldn't look like this, feel free to revert 😊

[Pabl0cks]

During my tests, at some point I found some issue with the Roll Events refresh, where some roll events were not showing there, but they were showing in Winner Events. Doing a navigator refresh did fix it.

If I can reproduce it I'll add it as Issue, to fix in a future PR 🙌

[technophile-04]

Tysm all !! Its looking really great and I think we have covered all main the functionality nicely 🙌 !! Merging this now we can create another set of PRs / issue if we need some final touches/updates 🙌

---

Pushed small tweaks at 40a9447 to solve :

1 . The UI was breaking when you switch to sepolia to any other chain and your hardhat was not running, I think the reason putting try/catch inside useEffect because of which error was not getting caught inside catch block :

checkout this discussion -> https://stackoverflow.com/questions/67597120/data-is-undefined-in-try-catch-block-inside-useeffect-using-async-await-but-wor

Wrapping it inside a function does seem to solve the problem 🙌

2 .

When deployed to sepolia, the price displayed as $0.00 even though the contract did have the .05 ETH. The same happened to the riggedRoll contract balance after it was funded. Will do further tests on this.

Also fixed this problem at 40a9447 this seems a problem at SE-2 too : )

It seems wagmi chain sepolia has nativeCurrencySymbol as "SEP" instead of "ETH" and we had this guard condition in fetchPriceUniswap :

if (configuredNetwork.nativeCurrency.symbol !== "ETH") {
return 0
}

which was returning price as 0