20 |
22 | )
23 | }
24 |
25 | renderPleaseEnable() {
26 | return (
27 | Please connect a Web3 provider
21 |
28 |
30 | )
31 | }
32 |
33 | renderEnabled = (params: IWeb3Context) => {
34 | return (
35 | Please enable your Web3 Provider
29 |
36 |
50 | this.renderGame(contractParams, params.address)
51 | }
52 | renderLoading={this.renderLoading}
53 | renderUnavailable={this.renderUnavailable}
54 | />
55 |
56 | )
57 | }
58 |
59 | renderLoading() {
60 | return Loading...
61 | }
62 |
63 | renderUnavailable() {
64 | return Error loading contract
65 | }
66 |
67 | renderGame(params: IContractContext, address: string) {
68 | return (
69 |
14 |
15 |
16 |
27 | )
28 | }
29 | }
30 |
31 | export default Coin
32 |
--------------------------------------------------------------------------------
/frontend/src/components/CoinPicker/CoinPicker.css:
--------------------------------------------------------------------------------
1 | .coin-picker-container {
2 | display: flex;
3 | width: 100%;
4 | }
5 |
6 | .coin-button-container {
7 | flex: 1;
8 | padding: 6px 12px;
9 | }
10 |
11 | .coin-picker-button-icon {
12 | width: 20px;
13 | height: 20px;
14 | margin-right: 6px;
15 | }
16 |
17 | .coin-picker-button {
18 | width: 100%;
19 | height: 100%;
20 | outline: none;
21 | filter: grayscale(100%);
22 | display: flex;
23 | align-items: center;
24 | justify-content: center;
25 | min-height: 42px;
26 | font-family: inherit;
27 | cursor: pointer;
28 | border-radius: 8px;
29 | color: white;
30 | font-size: 16px;
31 | font-weight: bold;
32 | border: 3px solid rgb(197,197,197);
33 | background-color: rgb(222,222,222);
34 | transition: 0.25s ease all
35 | }
36 |
37 | .coin-picker-button.active {
38 | cursor: default;
39 | filter: grayscale(0%);
40 | border-color: rgb(254,159,37);
41 | background-color: rgb(255,197,41);
42 | }
43 |
--------------------------------------------------------------------------------
/frontend/src/components/CoinPicker/CoinPicker.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import './CoinPicker.css'
3 | import TTUsdtImg from '../../assets/tt-usdt.png'
4 | import TTImg from '../../assets/icon_TT.png'
5 | import { ContractEnum } from '../../ContractEnum'
6 |
7 | interface ICoinPickerProps {
8 | active: ContractEnum
9 | changeContract(coin: ContractEnum): any
10 | }
11 |
12 | const buttons = [
13 | {
14 | name: ContractEnum.DoubleOrNothing,
15 | img: TTImg,
16 | text: 'TT'
17 | },
18 | {
19 | name: ContractEnum.TTUsdt,
20 | img: TTUsdtImg,
21 | text: 'TT USDT'
22 | },
23 | ]
24 |
25 | export class CoinPicker extends React.PureComponent
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
30 | {buttons.map(button => (
31 |
49 | )
50 | }
51 | }
52 |
53 | export default CoinPicker
54 |
--------------------------------------------------------------------------------
/frontend/src/components/ContractLoader/ContractLoader.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import ContractProvider, {
4 | ContractConsumer,
5 | IContractContext
6 | } from '../../contexts/ContractContext/ContractContext'
7 | import { Signer } from 'ethers'
8 |
9 | interface IContractData {
10 | abi: any[]
11 | address: string
12 | signer: Signer
13 | }
14 |
15 | interface IContractLoaderProps {
16 | contractData: IContractData[]
17 | renderLoading(params: IContractContext): React.ReactNode
18 | renderEnabled(params: IContractContext): React.ReactNode
19 | renderUnavailable(params: IContractContext): React.ReactNode
20 | }
21 |
22 | interface IContractLoaderState {
23 | contracts: IContractData[]
24 | }
25 |
26 | export class ContractLoader extends React.PureComponent<
27 | IContractLoaderProps,
28 | IContractLoaderState
29 | > {
30 | static getDerivedStateFromProps(props: IContractLoaderProps) {
31 | return {
32 | contracts: props.contractData.map(data => ({
33 | ...data,
34 | checkOnLoad: true
35 | }))
36 | }
37 | }
38 | state: IContractLoaderState = {
39 | contracts: []
40 | }
41 |
42 | renderContractState = (params: IContractContext) => {
43 | // @ts-ignore
44 | if (Object.keys(params).find(key => params[key].loading)) {
45 | return this.props.renderLoading(params)
46 | // @ts-ignore
47 | } else if (Object.keys(params).find(key => params[key].error)) {
48 | return this.props.renderUnavailable(params)
49 | }
50 | return this.props.renderEnabled(params)
51 | }
52 |
53 | render() {
54 | return (
55 |
32 |
46 |
47 | ))}
48 |
15 |
26 | )
27 | }
28 | }
29 |
30 | export default Display
31 |
--------------------------------------------------------------------------------
/frontend/src/components/Game/Game.css:
--------------------------------------------------------------------------------
1 | .game-container {
2 | display: flex;
3 | max-width: 420px;
4 | width: 95%;
5 | margin: auto;
6 | align-items: center;
7 | flex-direction: column;
8 | margin-top: 1em;
9 | }
10 |
11 | .display-container {
12 | margin-bottom: 1.5em;
13 | width: 100%;
14 | }
15 |
16 | .coin-display-container {
17 | position: relative;
18 | width: 90%;
19 | }
20 |
21 | .coin-display-container img {
22 | width: 100%;
23 | }
24 |
25 | .flip {
26 | animation: flip 0.5s linear 3;
27 | }
28 |
29 | .container {
30 | text-align: center;
31 | margin-bottom: 1em;
32 | }
33 |
34 | .center {
35 | position: absolute;
36 | top: 50%;
37 | left: 50%;
38 | transform: translate(-50%,-50%)
39 | }
40 |
41 | .coin {
42 | transform-style: preserve-3d;
43 | transform: rotateX(15deg);
44 | transition: all 0.5s linear;
45 | }
46 |
47 | .button {
48 | outline: none;
49 | border: none;
50 | height: 60px;
51 | width: 150px;
52 | background-color: transparent;
53 | background-size: contain;
54 | background-repeat: no-repeat;
55 | transition: all 0.25s ease;
56 | }
57 |
58 | .button[disabled] {
59 | filter: grayscale(1);
60 | }
61 |
62 | .bet-button {
63 | background-image: url("../../assets/ig_bet_btn.png");
64 | }
65 |
66 |
67 | .reset-button {
68 | background-image: url("../../assets/ig_reset_btn.png");
69 | }
70 |
71 | .double-button {
72 | background-image: url("../../assets/ig_double_btn.png");
73 | }
74 |
75 |
76 | @keyframes flip {
77 | 0% {
78 | transform: rotateX(10deg);
79 | }
80 | 100% {
81 | transform: rotateX(370deg);
82 | }
83 | }
84 |
85 | #debug-messages {
86 | background-image: none;
87 | background-color: white;
88 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
89 | }
90 |
--------------------------------------------------------------------------------
/frontend/src/components/Game/Game.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import './Game.css'
3 | import Coin from '../Coin/Coin'
4 | import Display from '../Display/Display'
5 | import cardSrc from '../../assets/ig_coin_card.png'
6 | import CoinPicker from '../CoinPicker/CoinPicker'
7 | import { ContractEnum } from '../../ContractEnum'
8 | import { formatUnits } from 'ethers/utils'
9 |
10 | interface IGameProps {
11 | active: ContractEnum
12 | changeContract(coin: ContractEnum): any
13 | playGame(): any
14 | double(): any
15 | reset(): any
16 | flipping: boolean
17 | disabled: boolean
18 | win: boolean
19 | balance: string
20 | betAmount: number
21 | decimals: number
22 | symbol: string
23 | }
24 |
25 | interface IGameState {
26 | animating: boolean
27 | }
28 |
29 | export class Game extends React.PureComponent
16 |
21 | Balance:
17 |
18 | {parseFloat(balance).toFixed(2)} {symbol}
19 |
20 |
22 |
25 | Bet Size:
23 | {betAmount} {symbol}
24 |
56 |
93 | )
94 | }
95 | }
96 |
97 | export default Game
98 |
--------------------------------------------------------------------------------
/frontend/src/components/Header/Header.css:
--------------------------------------------------------------------------------
1 | .header {
2 | z-index: 2000;
3 | padding: 1em 1.5em;
4 | background: rgb(72,25,124);
5 | color: white;
6 | display: flex;
7 | justify-content: space-between;
8 | align-items: center;
9 | }
10 |
11 | .header-reward {
12 | display: flex;
13 | justify-content: center;
14 | align-items: center;
15 | }
16 |
17 | .reward-container {
18 | border-radius: 5px;
19 | margin: 0 8px;
20 | background: rgb(42,14,74);
21 | padding: 2px 8px;
22 | }
23 |
24 | .arrow-circle {
25 | transition: 0.25s all;
26 | }
27 |
28 | .arrow-circle.open {
29 | transform: rotateX(180deg);
30 | }
31 |
--------------------------------------------------------------------------------
/frontend/src/components/Header/Header.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import './Header.css'
3 | import { ReactComponent as ArrowCircle } from '../../assets/ic_arrow-down-circle.svg'
4 | import ReferralRules from '../ReferralRules/ReferralRules'
5 | interface IHeaderProps {
6 | address: string
7 | rewards: string
8 | refereeCount: string
9 | activeTimestamp: number
10 | }
11 | interface IHeaderState {
12 | open: boolean
13 | }
14 |
15 | export class Header extends React.PureComponent
58 |
60 |
61 | 
62 |
73 |
63 |
72 | {
66 | this.setState({ animating: false })
67 | }}
68 | >
69 |
71 |
74 |
79 |
80 |
81 |
86 |
91 |
92 |
41 |
53 | {open && (
54 | Double or Nothing
42 |
43 |
52 | Reward
44 |
45 | {this.calcualteEther(this.props.rewards)}
46 |
47 |
28 |
31 | )
32 | }
33 |
34 | referralLink = () => {
35 | return window.location.origin + `?referrer=${this.props.address}`
36 | }
37 |
38 | copy = () => {
39 | const input = document.createElement('input')
40 | document.body.append(input)
41 | input.value = this.referralLink()
42 | input.select()
43 | document.execCommand('copy')
44 | document.body.removeChild(input)
45 | this.setState({ clicked: true })
46 | }
47 |
48 | renderColumn(header: string, val: string, className: string) {
49 | return (
50 | {title}
29 | {val}
30 |
51 |
54 | )
55 | }
56 |
57 | renderCountdown({
58 | hours,
59 | minutes,
60 | seconds,
61 | completed
62 | }: CountdownRenderProps) {
63 | function paddingTime(val: number) {
64 | return ('00' + val).slice(-2)
65 | }
66 |
67 | return completed ? (
68 | 00:00:00
69 | ) : (
70 |
71 | {paddingTime(hours)}:{paddingTime(minutes)}:{paddingTime(seconds)}
72 |
73 | )
74 | }
75 |
76 | render() {
77 | const { clicked } = this.state
78 | const { refereeCount, reward, activeTimestamp } = this.props
79 | return (
80 | {header}
52 | {val}
53 |
81 |
137 | )
138 | }
139 | }
140 |
141 | export default ReferralRules
142 |
--------------------------------------------------------------------------------
/frontend/src/components/Web3Loader/Web3Loader.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Web3Provider, {
3 | IWeb3Context,
4 | Web3Consumer
5 | } from '../../contexts/Web3Context/Web3Context'
6 |
7 | interface IWeb3LoaderProps {
8 | renderWeb3Incapable(params: IWeb3Context): React.ReactNode
9 | renderEnabling(params: IWeb3Context): React.ReactNode
10 | renderEnabled(params: IWeb3Context): React.ReactNode
11 | renderUnabled(params: IWeb3Context): React.ReactNode
12 | }
13 | interface IWeb3LoaderState {}
14 |
15 | export class Web3Loader extends React.PureComponent<
16 | IWeb3LoaderProps,
17 | IWeb3LoaderState
18 | > {
19 | renderAppState = (params: IWeb3Context) => {
20 | if (!params.signer) {
21 | return this.props.renderWeb3Incapable(params)
22 | } else if (params.enabling) {
23 | return this.props.renderEnabling(params)
24 | } else if (params.enabled) {
25 | return this.props.renderEnabled(params)
26 | }
27 | return this.props.renderUnabled(params)
28 | }
29 |
30 | render() {
31 | return (
32 |
82 |
136 |
83 | Share Your Referral Link to Earn More Rewards!
84 |
85 | Your Referral Link
86 |
87 |
95 | {this.referralLink()}
88 |
94 |
96 | {this.renderStat('Total Referral Reward', reward)}
97 | {this.renderStat('Number of Referees', refereeCount)}
98 | {this.renderStat(
99 | 'Your referral active time',
100 |
106 |
107 |
135 | Referral Rule
108 |
109 | For every transaction, 3% of the transaction value is reserved for
110 | the referrers. 60 % of the reserved amount is added to the first
111 | level referrer’s bonus pool, 30% is added to the 2nd level
112 | referrer’s bonus pool, and 10% is added to the 3rd level
113 | referrer’s bonus pool.
114 |
115 |
116 | {this.renderColumn('Bonus Rate', '%', 'dark')}
117 | {this.renderColumn('Level 1', '60 %', 'light')}
118 | {this.renderColumn('Level 2', '30 %', 'med')}
119 | {this.renderColumn('Level 3', '10 %', 'dark')}
120 |
121 |
122 |
123 | As a referrer, you will be awarded 50% of your bonus pool if you
124 | have 4 or less referees, 75% of the pool if you have 5 -24
125 | referees, and 100% if you have 25 or more referees.
126 |
127 |
128 |
129 | {this.renderColumn('Referee Amount', '%', 'dark')}
130 | {this.renderColumn('1-4', '50 %', 'dark')}
131 | {this.renderColumn('5-24', '75 %', 'med')}
132 | {this.renderColumn('25+', '100 %', 'light')}
133 |
134 |
190 | {this.state.debugMessages.map((message, index) => (
192 |
193 | )
194 | }
195 | }
196 |
197 | export default DoubleGameContainer
198 |
--------------------------------------------------------------------------------
/frontend/src/containers/Erc677GameContainer/Erc677GameContainer.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Contract } from 'ethers'
3 | import { BigNumber, bigNumberify, parseUnits } from 'ethers/utils'
4 | import Game from '../../components/Game/Game'
5 | import Header from '../../components/Header/Header'
6 | import { ContractEnum } from '../../ContractEnum'
7 | import { TransactionReceipt, TransactionResponse } from 'ethers/providers'
8 |
9 | interface IErc677GameContainerProps {
10 | contract: Contract
11 | address: string
12 | gameAddress: string
13 | contractName: ContractEnum
14 | changeContract(coin: ContractEnum): any
15 | }
16 |
17 | interface IAccountInfo {
18 | reward: string
19 | referredCount: string
20 | activeTimestamp: number
21 | }
22 |
23 | interface IErc677GameContainerState {
24 | betAmount: number
25 | balance: string
26 | disabled: boolean
27 | flipping: boolean
28 | win: boolean
29 | accountInfo: IAccountInfo
30 | decimals: number
31 | }
32 |
33 | const INITIAL_AMOUNT = 0.5
34 |
35 | export class Erc677GameContainer extends React.PureComponent<
36 | IErc677GameContainerProps,
37 | IErc677GameContainerState
38 | > {
39 | interval?: NodeJS.Timeout
40 |
41 | constructor(props: IErc677GameContainerProps) {
42 | super(props)
43 | this.state = {
44 | betAmount: INITIAL_AMOUNT,
45 | balance: '',
46 | win: true,
47 | disabled: false,
48 | flipping: false,
49 | accountInfo: {
50 | reward: '0',
51 | referredCount: '0',
52 | activeTimestamp: Date.now()
53 | },
54 | decimals: 6
55 | }
56 | this.watchBalance()
57 | }
58 |
59 | componentWillUnmount(): void {
60 | if (this.interval) {
61 | clearInterval(this.interval)
62 | }
63 | }
64 |
65 | watchBalance = () => {
66 | this.interval = setInterval(() => {
67 | this.props.contract
68 | .balanceOf(this.props.address)
69 | .then((bal: BigNumber) => this.props.contract.decimals()
70 | .then((d: number) => {
71 | this.setState({ balance: bal.toString(), decimals: d })
72 | }
73 | ))
74 | }, 500)
75 | }
76 |
77 | play = (val: number) => {
78 | this.setState({ disabled: true })
79 |
80 | this.props.contract.decimals().then((d:number) => {
81 | console.log(d)
82 | this.props.contract
83 | .transferAndCall(
84 | this.props.gameAddress,
85 | parseUnits(val.toString(), d),
86 | '0xfae',
87 | {
88 | gasPrice: bigNumberify('1000000000').toHexString(),
89 | gasLimit: bigNumberify('100000').toHexString()
90 | }
91 | )
92 | .then((trans: TransactionResponse) => {
93 | this.setState({ flipping: true })
94 | return trans.wait()
95 | })
96 | .then((receipt: TransactionReceipt) => {
97 | //@ts-ignore
98 | const didWin = !!receipt.events.find(
99 | //@ts-ignore
100 | evt =>
101 | evt.event === 'Transfer' &&
102 | evt.args.to.toLowerCase() === this.props.address.toLowerCase()
103 | )
104 |
105 | this.setState({
106 | flipping: false,
107 | win: didWin
108 | })
109 | })
110 | .finally(() => {
111 | this.setState({ disabled: false, flipping: false })
112 | })
113 | })
114 | }
115 |
116 | playGame = () => {
117 | this.play(this.state.betAmount)
118 | }
119 |
120 | double = () => {
121 | const newBet = this.state.betAmount * 2
122 | this.setState({ betAmount: newBet })
123 | this.play(newBet)
124 | }
125 |
126 | reset = () => {
127 | this.setState({ betAmount: INITIAL_AMOUNT })
128 | }
129 |
130 | render() {
131 | const {
132 | disabled,
133 | flipping,
134 | win,
135 | balance,
136 | betAmount,
137 | accountInfo,
138 | decimals
139 | } = this.state
140 | return (
141 | <>
142 | {message}
))}
191 |