Next.js Web3 casino

About

This is a web3 casino dapp using mainly Next.js and material UI, in addition to: react, bootstrap, tailwind, scss, typescript and typechain in order to generate types for contract calls.

About typechain: it's a common problem that ethers and web3 libraries generate dinamically functions from json abi, so you can not use typescript with these libraries (unless you generate the types manually), typechain generates automatically the *.ts files using the SOLIDITY compiler *.json build files (compiler output) solving the problem.

Contracts testing against mainnet and test are also included using truffle and ganache

Webcome to the descentralized WEB3 CASINO!

The objective of this project is PURELY DIDACTIC

Exemplify how blockchain technology can be used to build a totally transparent open source web3 casino, rid of owner priviledges, using trusted third party services like chainlink in order to ensure fair bet solving, smart contracts designed and deployed on arbitrum blockchain and leading edge technologies like react, next, bootstrap, tailwind and open source web3 libraries that allows user authenticate himself, retrive contract data and sign transactions in order to perform bets.

Vercel deployment

Vercel enables built-in CI/CD for your frontend project https://web3-casino.vercel.app/

CI

We have talked about Vercel built-in CI/CD, however, we are using vercel CLI because we want full control of our CI/CD workflow, .yml files has been added for preview (dev branch) and production (main branch), code checks like prettier and linter are run in parallel with vercel build, once both finish successfully our built project is deployed on vercel

Also a separated file for CI has been added in order to test the contracts, it is a very simple version, if you want see something more elaborated that includes linter and prettifier for typescript tests files and solidity contracts together with codechecks for gas report and coveralls for solidity coverage you can check https://github.com/MiguelGGMM/HARDHAT_TEST_TEMPLATE

Previews and videos

How works?

-SOLIDITY directory enables you to test and deploy the web3 casino smart contracts, there is mainly 2 contracts, one is used for casino treasury where users deposit eth for bets and eth collected is stored, this contract exists for scalability and security reasons, will allows you to add new contracts that could be developed in near future and independently of how much contracts/games your casino have users will have to deposit their eth using always the same contract.
-There is some fee applied on users bet (5%) that will be used to buy LINK against uniswapV3 liquidity pool and fund chainlink subscription automatically for VRF (Verifiable Randomness Function -> bet solving).
-If bet solving takes too much users also can cancel their bet and get their funds back.
-There is a manual bet solving in case chainlink takes too much but ideally owners should renounce contract and use chainlink VRF.
-Bets amounts are in $ and price is calculated using a chainlink datafeed.
-CASINO_DAPP directory is the next DAPP used as UI to interact with the roulette, show data and sign transactions against the smart contracts.
-This project should work on any EVM based chain but contract addresses and chain settings has to be set on .env and .env.local files.

Quick start

The first thing you need to do is clone repo.

Before compile and deploy contracts you have to set some .env addresses following the .env.sample these address can vary depending on the chain you want to deploy, if you want deploy in arbitrum mainnet use the default values

To compile and test contracts against the arbitrum mainnet

cd SOLIDITY

Install libraries

pnpm install

Initialize ganache

pnpm run ganacheFork

Run the tests

pnpm run test

Deploy contracts against arbitrum mainnet

pnpm run deploy

If you want to verify the contracts you can use

pnpm run verify

If you want deploy against another chain, you can edit arbitrumOneMainnet in truffle-config.js, setting provider url, chain id and gas settings should do the trick, don't forget set your pk on .pk file and your block explorer key on .blockExplorerKey file if you want to verify the contracts.

Only casino treasury and roulette contracts will be verified, if you want to verify the internal roulette managers you have to do it manually using your blockchain explorer, providing the code and the constructor parameters encoded (you can use this to encode your parameters https://abi.hashex.org/).

Initialize the contracts bets following the test files and set the contract addresses RPC and chain on the .env.local, contract deployed by me are set by default

Run the client

cd ..
cd CASINO_DAPP/casino-dapp
pnpm install
pnpm run dev

Project Structure SOLIDITY

📦SOLIDITY                   // Solidity part of the project you will need for smart contract deployment and testing
 ┣ 📂build 
 ┃ ┗ 📂contracts             // automatically generated json output from compiler, is used by typechain to generate types
 ┣ 📂contracts 
 ┃ ┗ 📂current 
 ┃ ┃ ┣ 📂BasicLibraries      // basic smart contracts, most commonly used     
 ┃ ┃ ┣ 📂Chainlink           // chainlink interfaces in order to communicate with chainlink contract for random number generation and safe bet solving
 ┃ ┃ ┣ 📂Libraries           // casino treasury and roulette libraries
 ┃ ┃ ┣ 📂UniswapV3           // uniswap libraries, used to buy link against liquidity pair and fund chainlink susbcription manually
 ┃ ┃ ┣ 📜CasinoTreasury.sol  // casino treasury where users eth and eth for bets is stored, users only have to send eth to one unique contract
 ┃ ┃ ┗ 📜Roulette.sol        // main roulette contract
 ┣ 📂migrations              // contracts deployment
 ┃ ┗ 📜1_migration.js 
 ┣ 📂test                    // test files, you can check it using 'npm run test' after setting up ganache with 'npm run ganacheFork'
 ┃ ┗ 📜1_test_basic_ini.js 
 ┣ 📜.blockExplorerKey       // (remove .sample from blockExplorerKey.sample) the key used for smart contract verification
 ┣ 📜.blockExplorerKey.sample// empty .blockExplorerKey file
 ┣ 📜.env                    // (remove .sample from .env.sample) env file that contains the addresses variables required for smart contract deployment
 ┣ 📜.env.sample             // default .env file
 ┣ 📜.pk                     // (remove .sample from .pk.sample) the pk of the account you will use for deployment
 ┣ 📜.pk.sample              // empty .pk file
 ┣ 📜package.json            
 ┗ 📜truffle-config.js       // truffle config file where you can edit chain settings for test and deployment

Project Structure CASINO_DAPP

📦CASINO_DAPP\casino-dapp    // DAPP part of the project
┣📦app
┣📦custom-types              // custom typescript types
┃ ┗ 📜index.d.ts
┣📦public
┃ ┣ 📂assets
┃ ┃ ┣ 📂css                  // mainly bootstrap and tailwind css files
┃ ┃ ┣ 📂img                                 
┃ ┃ ┣ 📂js                   // soft-ui and bootstrap js
┃ ┃ ┣ 📂media                // roulette sounds
┃ ┃ ┃ ┗ 📂sounds
┃ ┃ ┃ ┃ ┣ 📜lose.mp3
┃ ┃ ┃ ┃ ┣ 📜roulette.mp3
┃ ┃ ┃ ┃ ┗ 📜winner.mp3
┃ ┃ ┗ 📂scss                 // scss files
┃ ┃ ┃ ┣ 📂soft-design-system
┃ ┃ ┃ ┣ 📂soft-ui-dashboard
┃ ┃ ┃ ┣ 📜soft-design-system.scss
┃ ┃ ┃ ┗ 📜soft-ui-dashboard.scss
┣📦redux                     // redux files
┃ ┣ 📂actions
┃ ┣ 📂reducers
┃ ┣ 📂types
┣📦src
┃ ┣ 📂abis                   // typescript files automatically generated by typechain
┃ ┣ 📂betsConfig             // bets config
┃ ┃ ┣ 📂contractConfig       // depends on contract settings
┃ ┃ ┃ ┗ 📜index.ts
┃ ┃ ┣ 📂debug                // debug file that can be used to simulate pending or pending claim bets              
┃ ┃ ┃ ┗ 📜debug.json
┃ ┃ ┣ 📂rouletteConfig       // roulette style customization   
┃ ┃ ┃ ┗ 📜index.ts
┃ ┃ ┣ 📂types
┃ ┃ ┃ ┗ 📜index.ts
┃ ┃ ┗ 📜index.ts             // load
┃ ┣ 📂components
┃ ┃ ┣ 📂ConnectWallet        // Button to connect your wallet
┃ ┃ ┃ ┣ 📜ConnectWallet.jsx
┃ ┃ ┃ ┗ 📜styles.js
┃ ┃ ┣ 📂DashboardLayout      // Main dapp components and layouts
┃ ┃ ┃ ┣ 📜home.jsx
┃ ┃ ┃ ┣ 📜index.jsx
┃ ┃ ┃ ┣ 📜sidebar.jsx
┃ ┃ ┃ ┗ 📜topbar.jsx
┃ ┃ ┣ 📂wallet               // Required libraries for wallet connection, supported chains are set here
┃ ┃ ┃ ┗ 📜connectors.js
┃ ┃ ┗ 📂Wheel                // Wheel components
┃ ┃ ┃ ┣ 📜confeti.tsx
┃ ┃ ┃ ┣ 📜dialogBetResult.jsx
┃ ┃ ┃ ┣ 📜index.tsx
┃ ┃ ┃ ┣ 📜operationsBox.jsx
┃ ┃ ┃ ┣ 📜roulette.jsx
┃ ┃ ┃ ┗ 📜roulettePaid.jsx
┃ ┣ 📂config                 // We load and type .env.local file variables
┃ ┃ ┗ 📜index.ts
┃ ┣ 📂hooks                  // Provides the required methods to connect/disconned your wallet and other data
┃ ┃ ┣ 📜useWeb3.tsx
┃ ┃ ┗ 📜web3.js
┃ ┣ 📂pages                  // Main pages
┃ ┃ ┣ 📜about.js                
┃ ┃ ┣ 📜index.js             // Start page
┃ ┃ ┣ 📜wheel-fortune.js     // Roulette page
┃ ┃ ┣ 📜_app.js
┃ ┃ ┗ 📜_document.js
┃ ┣ 📂services               // This services are used to read data from smart contracts and sign transactions, using typechain types and lib
┃ ┃ ┣ 📜CasinoTreasuryService.ts
┃ ┃ ┣ 📜CommonService.ts
┃ ┃ ┗ 📜RouletteService.ts
┃ ┣ 📂styles                    
┃ ┃ ┗ 📜wheel.js
┃ ┣ 📂ts                     // Ts files
┃ ┃ ┣ 📜const.ts
┃ ┃ ┣ 📜interfaces.ts
┃ ┃ ┗ 📜types.ts
┃ ┗ 📂utils                   
┃ ┃ ┣ 📜device.tsx           // Browser/mobile detection
┃ ┃ ┣ 📜fonts.css
┃ ┃ ┣ 📜SnackbarElement.js   // Snackbar used when we receive and error from a smart contract when we try read data or sign transactions
┃ ┃ ┗ 📜theme.js
┣📜.env.local                // Public environment vars where smart contract addresses default rpc and chain id are set
┣📜.eslintrc.json            // Linter config file
┣📜.gitignore
┣📜next.config.js            // Next config file
┣📜package.json
┣📜postcss.config.js         
┣📜tailwind.config.js        // Tailwind config file, you can define a prefix and specify files where you want use tailwind, custom styles...
┣📜tsconfig.json             // Typescript config file, include/exclude modules and files