andremiras / etheroll

Provably fair dice game running on the Ethereum blockchain

Etheroll ReactJS

• Production: https://andremiras.github.io/etheroll/
• Staging: https://etheroll.herokuapp.com/

Experimental project running an alternative Etheroll frontend on ReactJS. If you're looking for the mobile app instead, see EtherollApp.

Closed down

The upstream project/smart-contract closed down. https://www.reddit.com/r/etheroll/comments/peeekh/etheroll_is_closing_down/

Run

make start

Install

make

Test

make lint
make test

Docker

We provide a Dockerfile that can be used for development or production. Build and run with:

docker-compose up

The application will be served on both port 80 (default HTTP) and 3000 (default Node.js port). Find out more reading the docker-compose.yml file.

Deployment

The app can be deployed on GitHub pages when releasing via:

make deploy

It can also be deployed on Heroku for staging:

git push heroku develop:master

etheroll's Issues

Setup basic translation

Make the setup so we can start translating the site into different languages.

CI testing

We need to setup Continuous Integration testing e.g. Travis making sure everything is OK after a push.
The CI should check both unit tests and linting.

Indicate to the user what is the potential profit for a given bet

Currently, the site only shows the "Bet size", the "Chance of winning" and the "Roll under".
To make the user experience clearer, it should also show the potential profit for the given parameters.
Two lines could be added below the "Roll under" section, similar to the EtherollApp:

• Roll under [A]
• With a wager of [B]
• For a profit of [C]

Also related to #17

Move the Alert component out from PlaceBet component

Currently the Alert component is embedded in the PlaceBet one.
It should be refactored and moved at least one level up.

Allow double-digit precision in wager amount

Currently, wager amount can only be incremented by 0.1 ETH. I would be nice to allow double-digit precision (by increment of 0.05).

Thanks!

Migrate to React Context API

https://reactjs.org/docs/context.html
This would help in implementing #61

Language selection dropdown

In #2 we implemented some basic translation. The browser locale is currently detected but it would be a plus to also be possible to let the user chose.
We may need to migrate to the React Context API or Redux in order to pass the locale prop to child components.

Publish an easy to use Etheroll library

Just like it was done for pyetheroll we could make a ready to use etheroll-js library to simplify building Etheroll based web-apps.

Provide a Dockerfile for building

That Dockerfile could be used for the CI, refs #7

Translate to chinese

Meaning adding a new file to https://github.com/AndreMiras/etheroll/tree/2020.03.07/src/translations

TypeError: a.fromWei(...).toNumber is not a function

https://sentry.io/andre-5t/etheroll-fe/issues/793889639/?referrer=github_plugin

TypeError: a.fromWei(...).toNumber is not a function
  at callback (components/PlaceBet.jsx:118:64)
  at None (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:99780)
  at None (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:6929)
  at i (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:25160)
  at None (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:9759)
...
(37 additional frame(s) were not displayed)

Investigate betting in fiat

Make it possible to bet in fiat via payment portals like Coinbase.
https://commerce.coinbase.com/

How could have a option to play on test net too?

I really would like to see etheroll have a option to play to mainnet or test net. I believe that it will not be difficult to do that. One step is to run smart contracts to the testnet and then change a little bit the UI. Am I correct? How do you think something like that could be implemented?

Still show roll history without MetaMask

While MetaMask should be required for betting, it should still be possible to see contract info or transactions history via direct web3 access rather than the injected MetaMask one.

Docker cache-from

Upload Docker image to registry on successful build and pull/build image from it

Contract pull DRY error handling

Currently each time we pull some info from the contract we're running through the following boilerplate:

      contract.web3Contract.minNumber((error, minNumber) => {
        if (error) {
          this.showFetchContractInfoWarning();
        }
        const minChances = minNumber - 1;
        this.setState({ minChances });
      });

Maybe these three error handling lines could be generalised/simplified.

Investigate react-web3

Consider using https://github.com/coopermaruyama/react-web3 for watching MetaMask changes (e.g. new account).

Update transaction list automatically

Currently the user has to refresh the page himself to see a fresh transaction list.
It would be best if this was done automatically.

Technically it should be implemented via Websockets and push notifications, but I'm not sure this is supported by web3.js. If not we will have to go for pulling anti-pattern via setInterval().

Transaction filter broken by React Router

Clicking to My transactions will now get caught by the React Router and lead to blank page: https://andremiras.github.io/etheroll/#/my-transactions

Write a coin toss game

Write a coin toss game that sets the chances to 50%.

Unit test bigger components

Currently bigger components like the RollUnder (previously PlaceBet) are not being unit tested.
This is because they have too many child components and rely on web3 a lot.
We should find a way to test them nonetheless because they may break.
See if a solution similar to Python unit test mocking is possible.

Upgrade to recent web3 version

In order to be able to connect to recent versions of MetaMask we need to update to recent web3 lib and request the user to login via ethereum.enable().

Test not exiting after sucess

Kinda related to upstream jestjs/jest#1456 even though we're not running firebase.
Also can see the issue with freshly created app from create-react-app.
--forceExit doesn't help and --detectOpenHandles doesn't print anything.

Show roll history

Show per account roll history.

Notification on roll result

Send user notification when his roll result was mined.
The playerRollDice notification should already be handled by Etherscan. But we still want the Oracle response transaction to be notifying the user if it's the result of his roll.

DRY getTransactionLogs & watchTransactionLogs

Both getTransactionLogs & watchTransactionLogs are repeating some code instead of sharing it

Roll debugger

Create a roll debugging tool to give details of a given roll, e.g.

• pending
• resolved (give both tx, roll and callback details)
  https://www.reddit.com/r/etheroll/comments/abkmfr/bets_without_results/

TypeError: Cannot read property 'PlayerNumber' of undefined

https://sentry.io/organizations/andre-5t/issues/1342188142/?referrer=github_plugin

TypeError: Cannot read property 'PlayerNumber' of undefined
  at None (components/CoinFlipTransactions.jsx:81:34)
  at Array.filter (<anonymous>)
  at c (components/CoinFlipTransactions.jsx:80:45)
  at setState (components/CoinFlip.jsx:35:35)
  at filterTransactions (components/BaseGame.jsx:158:5)
...
(41 additional frame(s) were not displayed)

Refactor/rename PlaceBet component

The component PlaceBet has too much logic, it should be broken down to sub-components and utils files.
Also it should be renamed to e.g. RollUnder.
The idea is we will soon have other games like the coin flip #11 and we would like to reuse/share code as much as possible between the two.

Docker image optimization

Optimize Docker image size and follow best practices.
Also share some of the build dependencies via the Makefile.

Setup error reporting

Setup error monitoring & report, e.g. via Sentry

TypeError: Cannot read property 'decode' of undefined

https://sentry.io/andre-5t/etheroll-fe/issues/796192163/?referrer=github_plugin

TypeError: Cannot read property 'decode' of undefined
  at decodeEvent (utils/etheroll-contract.js:63:61)
  at None (utils/etheroll-contract.js:129:55)
  at Array.map (<anonymous>)
  at callback (utils/etheroll-contract.js:129:38)
  at None (chrome-extension://cickkggoijngnjkmbmkibdhmklahopfi/inpage.js:1:99728)
...
(41 additional frame(s) were not displayed)

Detect when MetaMask is installed but not logged in and prompt an error

Currently an error is prompted when people visit the site without MetaMask installed in their browser (related to #5 ).
An error should also be prompted when people have MetaMask installed but are not logged in: "You need to be logged in with MetaMask to use the site".

Handle errors in the UI rather than in the console.log

We have a couple of errors that are handled via console.log() we should have no console.log() left but use the UI for error reporting.

Docker build/run Makefile target

The Makefile should be the single entry point to be used both by the CI and developers.
We need to add targets to simplify dev/CI workflows, such as docker build/run/tests...

Linter is not checking recursively

Running the linter doesn't seem to check recursively in directories by default. Hence the code is not currently linted.

Align chance of winning input and slider

Currently, when moving the Chance of winning slider, the value below it displays one number and the input displays another one.
See the screenshot attached

TypeError: Cannot read property 'endsWith' of undefined

https://sentry.io/andre-5t/etheroll-fe/issues/793896650/?referrer=github_plugin

TypeError: Cannot read property 'endsWith' of undefined
  at filterTransactions (components/PlaceBet.jsx:146:28)
  at onClick (components/PlaceBet.jsx:186:47)
  at apply (components/Transactions.jsx:84:23)
...
(12 additional frame(s) were not displayed)

Display roll result on screen

Not a priority, but it would be nice for the user experience to have a simple waiting text animation "Your roll is being processed..." after you click on "Roll" and display the result "You rolled [X]. You won / you lose" once the bet has been processed.

Related to #1

Translate to russian

Add the translation file there https://github.com/AndreMiras/etheroll/tree/2020.03.07/src/translations

Choose between head/tail

Make it possible for the user to choose between head or tail.
Since the current smart contract, doesn't store this information into the blockchain, we need to store the the user choice somewhere else.
Having a dedicated backend is not currently an option because it would involve more maintenance and more restrictive requirement. For instance it won't be possible to host the backend on GitHub pages.
We could think of a thirdparty DB storage service, like Firebase storage, but that means adding a new middleman.
The other option is to store the info browser side, e.g. session. This is most likely what we would try.
If the user bet choice can be found in its session, we display it, otherwise we default to e.g. Head.
It means the user could see different head/tail results from one browser to the other, but the win/loss would always be the same. So this probably needs to be explained in a note somewhere.

Edit:
Reddit conversation https://www.reddit.com/r/etheroll/comments/aa3hmj/build_any_chances_based_games_on_etheroll/

Show account balance

We should show the account balance when the user is connected to MetaMask

Error: invalid address

https://sentry.io/andre-5t/etheroll-fe/issues/796191719/?referrer=github_plugin

Error: invalid address
  at Array.map (<anonymous>)
  at None (components/PlaceBet.jsx:114:16)
  at None (<anonymous>)
...
(3 additional frame(s) were not displayed)

Coin flip game UX improvements

Try to make the coin flip game a bit more sexy, e.g. replacing some head/tail texts, by a (ethereum) coin image.

Introduce react router for multiple games

Build a draft router hierarchy for the other games, e.g. #11
https://reacttraining.com/react-router/web/guides/quick-start

To begin with the idea would be to have a simple hierarchy that simply hold two different games: Etheroll and coin flip.

Detect when MetaMask is not connected and prompt an error

If people visit the site without MetaMask they may thing there's nothing to see.
We should prompt a message saying it should be used with MetaMask.

Min and max bet size to come from smart contract

Currently min and max bet size are hard-coded, but it should come dynamically from the smart contract

Unit test LanguageUpdate component

Unit test the LanguageUpdate component introduced in 1b6292c

Setup unit testing

We should be able to unit test our component to see everything is working OK.

Setup web analytics

For instance Google Analytics.