├── .gitignore ├── .gitpod.yml ├── README.md ├── build ├── asset-manifest.json ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json ├── robots.txt └── static │ ├── css │ ├── main.1ea66bba.css │ └── main.1ea66bba.css.map │ └── js │ ├── main.0e2989e0.js │ ├── main.0e2989e0.js.LICENSE.txt │ └── main.0e2989e0.js.map ├── cache └── solidity-files-cache.json ├── config-overrides.js ├── hardhat.config.js ├── index.html ├── package.json ├── postcss.config.js ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── screenshots ├── 0.gif ├── 1.gif └── 3.gif ├── scripts ├── deploy.js └── seed.js ├── src ├── App.jsx ├── abis │ ├── @openzeppelin │ │ └── contracts │ │ │ ├── access │ │ │ └── Ownable.sol │ │ │ │ ├── Ownable.dbg.json │ │ │ │ └── Ownable.json │ │ │ ├── security │ │ │ └── ReentrancyGuard.sol │ │ │ │ ├── ReentrancyGuard.dbg.json │ │ │ │ └── ReentrancyGuard.json │ │ │ └── utils │ │ │ ├── Context.sol │ │ │ ├── Context.dbg.json │ │ │ └── Context.json │ │ │ ├── Counters.sol │ │ │ ├── Counters.dbg.json │ │ │ └── Counters.json │ │ │ └── math │ │ │ └── SafeMath.sol │ │ │ ├── SafeMath.dbg.json │ │ │ └── SafeMath.json │ ├── build-info │ │ └── 07c767d2c410cb819d9a32ba392f0dd3.json │ ├── contractAddress.json │ └── src │ │ └── contracts │ │ └── PlayToEarn.sol │ │ ├── PlayToEarn.dbg.json │ │ └── PlayToEarn.json ├── components │ ├── Chat.jsx │ ├── ChatButton.jsx │ ├── CreateGame.jsx │ ├── Footer.jsx │ ├── Game.jsx │ ├── GameInfo.jsx │ ├── GameList.jsx │ ├── GameResult.jsx │ ├── Header.jsx │ ├── Hero.jsx │ ├── InvitationList.jsx │ ├── InviteModal.jsx │ └── index.jsx ├── contracts │ └── PlayToEarn.sol ├── index.css ├── index.jsx ├── pages │ ├── GamePlay.jsx │ ├── Home.jsx │ ├── Invitations.jsx │ └── MyGames.jsx ├── services │ ├── blockchain.jsx │ └── chat.jsx └── store │ ├── faker.jsx │ └── index.jsx ├── tailwind.config.js ├── test └── PlayToEarn.test.js ├── txt.txt └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | .env -------------------------------------------------------------------------------- /.gitpod.yml: -------------------------------------------------------------------------------- 1 | # This configuration file was automatically generated by Gitpod. 2 | # Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml) 3 | # and commit this file to your remote git repository to share the goodness with others. 4 | 5 | # Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart 6 | 7 | tasks: 8 | - init: npm install && npm run build 9 | command: npm run start 10 | 11 | 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # How to Build a Web3 Play-To-Earn Money Dapp with React, Solidity, and CometChat 2 | 3 | Access the [Teaching Guide Here](https://docs.google.com/document/d/13bBRyAO0bEwRt776FXbYgWm6-OBFiUu6zTeOgRbXXyI/edit?usp=sharing). 4 | 5 | This example shows How to Build a Web3 Play-To-Earn Dapp with React, Solidity, and CometChat: 6 | 7 |  8 | 9 |
Chat
62 | 68 |No Chat yet...
} 76 | {messages.map((msg, i) => ( 77 |118 | {text} 119 |
120 |Create Game
79 | 85 |166 | Time taken: {calculateElapsedTime()} seconds 167 |
*/} 168 |
11 | This game is hosted by{' '}
12 |
13 | {truncate(game.owner, 4, 4, 11)}
14 |
15 | , with{' '}
16 |
17 | {game.participants} participants
18 | {' '}
19 | joining from the globe and{' '}
20 |
21 | {game.acceptees} person(s){' '}
22 |
23 | already onboarded.
24 |
25 |
26 | We have{' '}
27 |
28 | {game.challenges} challenges
29 | {' '}
30 | to be complete in this game, and the rewards of{' '}
31 |
32 | {game.stake * game.participants} ETH
33 | {' '}
34 | will be shared amongst the{' '}
35 |
36 | {game.numberOfWinners} person(s)
37 | {' '}
38 | to emerge as winners.
39 |
40 |
41 | This game is scheduled for{' '}
42 |
43 | {timestampToDate(game.startDate)} - {timestampToDate(game.endDate)}
44 | {' '}
45 | and so far,
46 |
47 | {' '}
48 | {game.plays} person(s)
49 | {' '}
50 | have played and{' '}
51 |
52 | is {!game.paidOut && ' yet to be '} paidout
53 |
54 | .
55 |
{game.description}
20 |21 | Owner: {truncate(game.owner, 4, 4, 11)} 22 |
23 |24 | Starts on: {formatDate(game.startDate)} 25 |
26 |Player Scores
22 | 28 |14 | Get Ready To Unleash Your Inner Hero And Make Gaming Pay! 15 |
16 |65 | {invitation.accepted ? ( 66 | 67 | "{invitation.title}" game is yours to play 68 | 69 | ) : ( 70 | 71 | You've been invited to the "{invitation.title}" game 72 | 73 | )} 74 |
75 |Invite Player
47 | 53 |