neu-fi / regen-bingo Goto Github PK
View Code? Open in Web Editor NEWMonorepo for both backend and contract developments of Regen Bingo!
Home Page: https://regen.bingo
Monorepo for both backend and contract developments of Regen Bingo!
Home Page: https://regen.bingo
When the game is ended, all the pages must reflect the state.
In the landing page; there could be information on the card that has won the game and the transaction.
We can listen the events for drawnNumbers but when the user refresh the page or opens the page after numbers are drawn we have to get the numbers directly from the contract. In this case we will not able to show the transaction hash or timestamp.
Instead of the empty card, let's show the latest minted card on the landing page.
Let's sort the my-cards table and be efficient while doing so.
Here's my proposal:
For sorting, we can keep array of cards state. The array could be updated if cards change or their image/numbersCount are updated.
When the user switches to the correct network, the app must react by loading the state. This must happen in all the pages.
The screen recording below is only for the lucky numbers page:
Tests for the failing RegenBingo.ts scenario must be fixed.
This article seems to be a good one for testing Chainlink VRF with the required mock: https://dev.to/abhikbanerjee99/testing-your-chainlink-vrf-powered-smart-contract-m3i
The countdown displays states as 1 Seconds
, 1 Minutes,
etc. These should be fixed.
We should use react-toastify's "promise" toasts for created transactions. Disabling the button after approval is not looking nice to my eyes.
In case there is more than 5 seconds until a new button can be drawn:
I think we can have a 5 seconds buffer as it takes a couple of seconds to interact with MetaMask and then wait for the tx to be included in a block.
The draw numbers must work on hardhat deployments with the mock.
I haven't figured out how we should be doing this. There could be a backend job that responds on randomWords queries on hardhat networks. The best approach would be to look for examples.
Oytun wrote on #93:
If a user draw numbers continuously, another user is always seeing the loading spinner on My-Cards page since it re-fetchs the list depending on event.
Suggestion: We can trigger the re-fetch for a certain amount of time instead of for every event, OR we can add a manual refresh button.
IMO: We better keep track of cards and their numbers & only refresh them.
Mint button can be disabled after the minting period ends.
I've added the function for multiple mints. We should add it to the frontend as well. However, we better design the UX first.
Getting the minted cards metada from the contract
my-cards page doesn't list cards on page refresh, but it works after clicking the page's tab from another page.
All of the tests are failing, fix the tests.
We decided to use primes larger than 2^128 in the contract. Here are 15 such primes in order generated by bigprimes.org:
345748237736302043954346415468961719667
346898908343340269085095797543225285067
349436888172124469953802313936204793639
350775825975224662536471623247112070683
351826028875514156289400300739130052693
352412280970268348994551642119472945107
352481965297794116322788845643729736229
359319764875976259388138010914940262119
359319764875976259388138010914940262119
364474025646518244225535015089205405063
365535512377247765880241266596284033459
366207651054021111846380872598610590333
370011511959930685076007398472051834473
375675342105268259527879793250735537607
385276465729037003106999007892189232991
They are all larger than 2^128:
340282366920938463463374607431768211456
Let's use them in the code and let's use the same primes for all layouts.
The collision case is the following:
(seed % prime1) % 10 = (seed % prime2) % 10
(seed % prime1)*a + x = (seed % prime2)*b + x
where x < 10
(seed % prime1)*a = (seed % prime2)*b
Example collisions are found with the following case:
seed = prime1*prime2*c + d
seed
must be larger than the largest prime in the list above. This must be assured with an assert
call.
Having primes larger than 2^128 would make it impossible to come up with uint256 seed
s However, collisions would still be found randomly.
If collisions are not there:
seed = prime1*a + x = prime2*b + y
and x % 10 != y % 10
If you have account A with 3 cards and account B with 0 cards.
If you've connected account A and seeing 3 cards, when you connect account B you still see these 3 cards.
AFAIK.
How to replicate:
What I see:
Two "Switch to Goerli" toasts.
What is expected.
One toast.
Inspect the cause of the issue. Do not just bandaid this behavior. We better have a single component dealing with this problem, not one.
On wrong networks, instead of seeing the wallet address and balance, there must be a switch network button.
This commit introduced custom colors to the project: 52d68a8
Tailwind has plethora of colors and we should use them: https://tailwindcss.com/docs/customizing-colors
The primary reason for using Tailwind is not to maintain css and to be able to understand class names. Read https://tailwindcss.com/docs/utility-first for more details.
There can be 90 lucky numbers so they will not look good in the same page with bingo cards. We should seperate them.
There should be a test that mints an NFT and checks for the text in the rolling string. The test could mint an NFT, decode it, and look for such a substring in the SVG code: Donating 0.05 ETH · The Gitcoin Alpha Round · 0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2 · January 31, 2023 23:59 UTC
While drawing the very first number, drawn numbers table is not updated immediately. But If there is at least one number drawn, DrawNumber succesfully updates the table. We should look onto that.
@hantuzun After I pulled the latest version of main branch I've started to getting this error
Instead of "05/01/2021, 03:00:00 PM", we should show when these are drawn like "1 second ago".
You can use Intl.RelativeTimeFormat.
Uploading Screen Recording 2023-01-17 at 15.14.19.mov…
The button is waiting for the second toast, staying disabled more than necessary.
The countdown doesn't work and on the landing page we always see the "lucky numbers can be drawn" text.
Calculate required LINK amount for each randomness request according to chainlink docs.
The text below is hardcoded now:
Donating 0.05 ETH · Gitcoin Alpha Round · 0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2 · January 31, 2023
Generate the text from the following parameters:
Donating
should be changed to Donated
when the game ends.
First, these parameters should be added to the constructor. Deployment scripts must be updated as well. Then, these parameters must be passed to RegenBingoMetadata and finally to RegenBingoSVG.
Building routes and pages for "cards" and "cards/[id]"
We can take notes from Hypercerts' implementation: https://github.com/Network-Goods/hypercerts-protocol/blob/main/contracts
I suggest having a RegenBingoMetadata library with these external functions:
generateContractURI
function generateContractURI() external view returns (string memory)
generateTokenURI
function generateTokenURI(uint256 tokenId, uint256[9][3] numbers, bool[9][3] covered) external view virtual returns (string memory)
So I tried the app on my mobile through my local network. Connect wallet button displays RainbowKit modal, Metamask button redirects to the Metamask app, but, there is no connection approval etc. When I turned back to the App, there was an error related to "WalletConnect" (wtf?). Forgot to take screenshots. Details will be added.
Phone details:
iPhone 14
iOS 16.2
There should be a single environment variables file and that should be .env
at root.
The button on https://www.rainbowkit.com/ works flawlessly on wrong networks.
This doc is about how to support chains: https://www.rainbowkit.com/docs/custom-chains
However, last night, in some cases the button was going invisible when connecting to wrong networks. There were no logs in the console. The behavior was like the following:
In case the network is not supported, the Connect Wallet button must turn to a red Wrong Network button.
I remember in one case where the button was invisible and then turned visible. And in another case the issue was resolved when I restarted the frontend server (yarn dev
). These suggest me that the issue is about an external API rate limiting the frontend.
Afterwards the app stopped loading for me, which suggests that even more.
I think there is an issue with another part of the code (Most likely the Greeting contract's pooling logic) that enters into a loop, sending hundreds of requests in a fraction of a second and gets the app rate limited immediately on wrong networks.
The problem is probably in the SetGreeting and/or GetGreeting components.
When I've 11 cards, https://regen.bingo/my-cards takes a couple of seconds to load. It should load immidiately.
Given a transaction hash like 0x9d4509c900053df30cb352ed3a6b17b1c61621b8ce99b497c790acaa62e28e9a
display it as 0x9d45....8e9a
and when clicked, open https://etherscan.io/tx/0x9d4509c900053df30cb352ed3a6b17b1c61621b8ce99b497c790acaa62e28e9a in a new tab.
We've used the library from: https://github.com/RollaProject/solidity-datetime
Let's use this https://www.npmjs.com/package/@quant-finance/solidity-datetime. Make sure that we use the exact version: 2.2.0
. We don't want to upgrade to 2.2.1
etc. if this untrusted quant-finance pushes an update. This could be done by setting the version as "2.2.0"
. More information here: https://maxleiter.com/blog/pin-dependencies
When this update is done, we would be removing the source files from the repository and importing the libraries as we do with openzeppelin libraries.
It's the time to integrate Chainlink VRF.
The documentations are available on:
Here's the example contract getting randomness from Chainlink docs: https://remix.ethereum.org/#url=https://docs.chain.link/samples/VRF/VRFv2DirectFundingConsumer.sol
I suggest asking for the random number once in the startDrawPeriod function and recording a seed for the following reasons:
If we agree on this, we'd only need to modify startDrawPeriod() and add fulfillRandomWords(...)
. fulfillRandomWords(...)
could store the random word as a variable. And then we could use that variable and nonces in drawNumber()
only by changing the variables we put into the hash functions.
Design considerations:
fulfillRandomWords
function.@daggerhashimoto you should review this issue.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.