\n {\n if (\n this.props.errorType &&\n (this.props.errorType === \"Invalid Contest\" || this.props.errorType === \"This contest has closed\")\n ) {\n this.props.router.navigate(\"/\");\n }\n this.props.setError(\"\");\n }}\n >\n 
\n
\n \n
\n \n {this.props.errorTitle ? this.props.errorTitle.toUpperCase() : \"Something went wrong\"}\n
\n \n
\n \n \n );\n }\n}\nconst mapDispatchToProps = (dispatch) => ({\n togglePopupRedux: (payload) => dispatch(togglePopupRedux(payload)),\n toggleConnectWalletRedux: (payload) => dispatch(toggleConnectWalletRedux(payload)),\n});\nconst mapStateToProps = (state) => ({\n getUser: getUser(state),\n});\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(ErrorPopup));\n","import { initializeConnector } from \"@web3-react/core\";\nimport { MetaMask } from \"@web3-react/metamask\";\n\nexport const [metaMask, metaMaskHooks] = initializeConnector((actions) => new MetaMask({ actions }));\n","import { CoinbaseWallet } from \"@web3-react/coinbase-wallet\";\nimport { initializeConnector } from \"@web3-react/core\";\n\nexport const [coinbaseWallet, coinbaseWalletHooks] = initializeConnector(\n (actions) =>\n new CoinbaseWallet({\n actions,\n options: {\n url: `https://mainnet.infura.io/v3/${process.env.REACT_APP_INFURA_KEY}`,\n appName: \"web3-react-demo\",\n },\n }),\n);\n","import { createSlice } from \"@reduxjs/toolkit\";\nimport { createSelector } from \"reselect\";\nimport { apiCallBegan } from \"./api\";\nimport jwt from \"jwt-decode\";\nimport moment from \"moment\";\n\nconst slice = createSlice({\n name: \"contests\",\n initialState: {\n contestDetails: null,\n loadingContestDetails: false,\n activeContests: [],\n loadingStatsArcade: false,\n loadingStatsLoot: false,\n contestStatsArcade: null,\n contestStatsLoot: null,\n loading: false,\n players: [],\n myGame: null,\n players1: null,\n myGame1: null,\n question: null,\n gameAvailable: true,\n lastTriviaGame: null,\n rates: null,\n empty: 0,\n allContests: [],\n pendingContests: [],\n pendingContestsLastKey: null,\n pendingContestsCount: null,\n allContestsData: null,\n loadingContestResult: true,\n contestResult: null,\n loadingP: false,\n lastFetchPendingContests: null,\n },\n\n reducers: {\n contestDetailsRequested: (misc, action) => {\n misc.loadingContestDetails = true;\n },\n contestDetailsReceived: (misc, action) => {\n misc.contestDetails = action.payload.data;\n misc.lastFetch = Date.now();\n misc.loadingContestDetails = false;\n },\n allContestReceived: (misc, action) => {\n let contestPayload = jwt(action?.payload)?.data;\n const typeOrder = { 3: 0, 1: 1, 2: 2 };\n contestPayload?.sort((a, b) => typeOrder[a.contestType] - typeOrder[b.contestType]);\n misc.allContests = contestPayload?.splice(0, 2);\n misc.allContestsData = jwt(action?.payload);\n misc.lastFetch = Date.now();\n misc.loadingContestDetails = false;\n },\n pendingContestRequested: (misc, action) => {\n misc.loadingP = true;\n },\n pendingContestReceived: (misc, action) => {\n misc.pendingContests = jwt(action?.payload)?.data;\n misc.pendingContestsLastKey = jwt(action?.payload)?.lastKey;\n misc.pendingContestsCount = jwt(action?.payload)?.totalCount;\n misc.loadingP = false;\n misc.lastFetchPendingContests = Date.now();\n },\n morePendingContestReceived: (misc, action) => {\n misc.pendingContests = [...misc.pendingContests, ...jwt(action?.payload)?.data];\n misc.pendingContestsLastKey = jwt(action?.payload)?.lastKey;\n misc.loadingP = false;\n misc.lastFetchPendingContests = Date.now();\n },\n contestDetailsRequestFailed: (misc, action) => {\n misc.loadingContestDetails = false;\n misc.contestDetails = null;\n misc.error = action.payload.message;\n },\n contestResultRequested: (misc, action) => {\n misc.loadingContestResult = true;\n },\n contestResultRequestFailed: (misc, action) => {\n misc.loadingContestResult = false;\n },\n contestResultReceived: (misc, action) => {\n misc.contestResult = action.payload.data;\n misc.lastFetch = Date.now();\n misc.loadingContestResult = false;\n },\n activeContestsRequested: (misc, action) => {\n misc.loading = true;\n },\n activeContestsReceived: (misc, action) => {\n misc.activeContests = action.payload.data;\n misc.lastFetch = Date.now();\n misc.loading = false;\n },\n statsArcadeRequested: (misc, action) => {\n misc.loadingStatsArcade = true;\n },\n statsLootRequested: (misc, action) => {\n misc.loadingStatsLoot = true;\n },\n contestStatsArcadeReceived: (misc, action) => {\n misc.contestStatsArcade = action.payload.data;\n misc.lastFetch = Date.now();\n misc.loadingStatsArcade = false;\n misc.loading = false;\n },\n contestStatsLootReceived: (misc, action) => {\n misc.contestStatsLoot = action.payload.data;\n misc.lastFetch = Date.now();\n misc.loadingStatsLoot = false;\n misc.loading = false;\n },\n statsArcadeRequestFailed: (misc, action) => {\n misc.loadingStatsArcade = false;\n },\n statsLootRequestFailed: (misc, action) => {\n misc.loadingStatsLoot = false;\n },\n leaderBoardReceived: (misc, action) => {\n misc.players = action.payload.data;\n misc.myGame = action.payload.myGame;\n if (action.payload.data.length < 2 || (action.payload.data.length === 2 && !action.payload.myGame)) {\n misc.empty += 1;\n }\n misc.lastFetch = Date.now();\n misc.loading = false;\n },\n dailyTriviaCheckReceived: (misc, action) => {\n misc.gameAvailable = action.payload.gameAvailable;\n misc.lastTriviaGame = action.payload.lastGame;\n misc.lastFetch = Date.now();\n misc.loading = false;\n },\n leaderBoardReceived2: (misc, action) => {\n misc.players1 = action.payload.data;\n misc.myGame1 = action.payload.myGame;\n misc.lastFetch = Date.now();\n misc.loading = false;\n },\n gameQuestionReceived: (misc, action) => {\n misc.question = action.payload;\n misc.lastFetch = Date.now();\n misc.loading = false;\n },\n activeContestsRequestFailed: (misc, action) => {\n misc.loading = false;\n misc.error = action.payload.message;\n },\n pendingContestFailed: (misc, action) => {\n misc.loadingP = false;\n misc.error = action.payload.message;\n },\n },\n});\n\nexport const {\n activeContestsRequested,\n activeContestsReceived,\n activeContestsRequestFailed,\n statsArcadeRequested,\n statsLootRequested,\n contestStatsArcadeReceived,\n contestStatsLootReceived,\n statsArcadeRequestFailed,\n statsLootRequestFailed,\n leaderBoardReceived,\n leaderBoardReceived2,\n gameQuestionReceived,\n dailyTriviaCheckReceived,\n contestDetailsReceived,\n contestDetailsRequested,\n contestDetailsRequestFailed,\n allContestReceived,\n contestResultReceived,\n contestResultRequested,\n contestResultRequestFailed,\n pendingContestRequested,\n pendingContestReceived,\n morePendingContestReceived,\n pendingContestFailed,\n} = slice.actions;\nexport default slice.reducer;\n\n// Action Creators\nconst gameUrl = \"game/\";\nconst contestUrl = \"contest/\";\nconst dailyTrivialGameUrl = \"dailyTriviagame/\";\n\nexport const loadContestDetailsStore = (id) => (dispatch) => {\n return dispatch(\n apiCallBegan({\n url: contestUrl + id,\n onStart: contestDetailsRequested.type,\n onSuccess: contestDetailsReceived.type,\n onError: contestDetailsRequestFailed.type,\n }),\n );\n};\nexport const loadContestDetails = (id, callback) => (dispatch) => {\n return dispatch(\n apiCallBegan({\n url: contestUrl + id,\n onStart: contestDetailsRequested.type,\n onSuccess: contestDetailsReceived.type,\n onError: contestDetailsRequestFailed.type,\n callback,\n }),\n );\n};\nexport const loadPendingContests = (params, callback) => (dispatch, getState) => {\n const more = params.more;\n delete params.more;\n const { lastFetchPendingContests } = getState().entities.contest;\n const diffInMinutes = moment().diff(moment(lastFetchPendingContests), \"minutes\");\n if (diffInMinutes < 10 && !more) return;\n return dispatch(\n apiCallBegan({\n url: contestUrl + \"past\",\n onStart: pendingContestRequested.type,\n onSuccess: !more ? pendingContestReceived.type : morePendingContestReceived.type,\n onError: pendingContestFailed.type,\n params,\n callback,\n }),\n );\n};\nexport const loadMyActiveGames = (callback) => (dispatch) => {\n return dispatch(\n apiCallBegan({\n url: gameUrl + \"active\",\n onStart: activeContestsRequested.type,\n onSuccess: activeContestsReceived.type,\n onError: activeContestsRequestFailed.type,\n callback,\n }),\n );\n};\nexport const loadContestResult = (id, callback) => (dispatch) => {\n return dispatch(\n apiCallBegan({\n url: contestUrl + \"results/\" + id,\n onStart: contestResultRequested.type,\n onSuccess: contestResultReceived.type,\n onError: contestResultRequestFailed.type,\n callback,\n }),\n );\n};\nexport const loadLeaderBoard = (params, callback) => (dispatch) => {\n return dispatch(\n apiCallBegan({\n url: gameUrl + \"leaderboard\",\n params,\n onStart: activeContestsRequested.type,\n onSuccess: leaderBoardReceived.type,\n onError: activeContestsRequestFailed.type,\n callback,\n }),\n );\n};\nexport const loadGameQuestion = (params, callback) => (dispatch) => {\n return dispatch(\n apiCallBegan({\n url: dailyTrivialGameUrl + \"getQuestion\",\n params,\n onStart: activeContestsRequested.type,\n onSuccess: gameQuestionReceived.type,\n onError: activeContestsRequestFailed.type,\n callback,\n }),\n );\n};\nexport const loadLeaderBoard1 = (params, callback) => (dispatch) => {\n return dispatch(\n apiCallBegan({\n url: gameUrl + \"leaderboard\",\n params,\n onStart: activeContestsRequested.type,\n onSuccess: leaderBoardReceived2.type,\n onError: activeContestsRequestFailed.type,\n callback,\n }),\n );\n};\nexport const loadAllContests = (params, callback) => (dispatch) => {\n return dispatch(\n apiCallBegan({\n url: contestUrl,\n onStart: activeContestsRequested.type,\n onSuccess: allContestReceived.type,\n onError: activeContestsRequestFailed.type,\n params,\n callback,\n }),\n );\n};\nexport const loadContestsStatsArcade = (id, callback) => (dispatch) => {\n const params = { sendAll: true };\n return dispatch(\n apiCallBegan({\n url: contestUrl + \"arcadeStats/\" + id,\n onStart: statsArcadeRequested.type,\n onSuccess: contestStatsArcadeReceived.type,\n onError: statsArcadeRequestFailed.type,\n callback,\n params,\n }),\n );\n};\nexport const loadContestsStatsLoot = (id, callback) => (dispatch) => {\n const params = { sendAll: true };\n return dispatch(\n apiCallBegan({\n url: contestUrl + \"lootStats/\" + id,\n onStart: statsLootRequested.type,\n onSuccess: contestStatsLootReceived.type,\n onError: statsLootRequestFailed.type,\n callback,\n params,\n }),\n );\n};\nexport const loadAllContestsStats = (id, params, callback) => (dispatch) => {\n return dispatch(\n apiCallBegan({\n url: contestUrl + \"stats/\" + id,\n params,\n onStart: activeContestsRequested.type,\n onSuccess: contestStatsArcadeReceived.type,\n onError: activeContestsRequestFailed.type,\n callback,\n }),\n );\n};\n\nexport const sendAnswer = (data, callback) => (dispatch) => {\n return dispatch(\n apiCallBegan({\n url: dailyTrivialGameUrl + \"sendAnswer\",\n method: \"POST\",\n data,\n callback,\n }),\n );\n};\nexport const dailyTriviaCheck = (callback) => (dispatch) => {\n return dispatch(\n apiCallBegan({\n url: dailyTrivialGameUrl + \"check/\",\n onStart: activeContestsRequested.type,\n onSuccess: dailyTriviaCheckReceived.type,\n onError: activeContestsRequestFailed.type,\n callback,\n }),\n );\n};\nexport const getContests = createSelector(\n (state) => state.entities.contest,\n (contests) => contests,\n);\n","import { Link } from \"react-router-dom\";\n\nconst Button = ({ classes, onClick, title, icon, href, target, iconLeft, iconWidth, iconHeight }) => {\n return (\n \n
\n \n 
\n
\n\n \n
\n\n {HtmlParser(this.props.error)}
\n\n {\n e.preventDefault();\n if (getUser.showConnectWalletAfter) {\n togglePopupRedux(true);\n toggleConnectWalletRedux(false);\n }\n if (\n this.props.errorType &&\n (this.props.errorType === \"Invalid Contest\" || this.props.errorType === \"This contest has closed\")\n ) {\n this.props.router.navigate(\"/contests\");\n }\n this.props.setError(\"\");\n }}\n >\n {this.props.errorType === \"Invalid Contest\" || this.props.errorType === \"This contest has closed\"\n ? \"BROWSE CONTESTS\"\n : getUser.showConnectWalletAfter\n ? \"CONNECT WALLET\"\n : \"DISMISS\"}\n \n {getUser.showConnectWalletAfter && (\n {\n e.preventDefault();\n if (getUser.showConnectWalletAfter) {\n toggleConnectWalletRedux(false);\n }\n this.props.setError(\"\");\n }}\n >\n DISMISS\n \n )}\n
\n \n 
\n
\n \n {typeof props.message === \"string\" ? props.message : \"Something went wrong\"}\n
\n \n );\n};\n\nexport default AlertError;\n","import { useEffect, useState } from \"react\";\nimport { Modal } from \"react-bootstrap\";\nimport { connect } from \"react-redux\";\nimport Slider from \"react-slick\";\nimport { getCookie } from \"utils/cookiesUtilities\";\n\n// Images\n\nimport { prepareData } from \"common/gtmDatalayer\";\nimport { contestEntry, getUser, loadProfile } from \"store/user\";\nimport { withRouter } from \"utils/withRouter\";\n\nconst HowItWorks = ({ showModal, toggleModal, bgGame }) => {\n const themeMode = getCookie(\"themeMode\");\n const [nav1, setNav1] = useState(null);\n const [nav2, setNav2] = useState(null);\n\n useEffect(() => {\n if (showModal) {\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push(\n prepareData({\n event: \"how_to_play\", // fixed value\n section: \"carousel\", // fixed value\n advanmcement: \"button\", // dynamic value\n step: \"1\", // dynamic value\n }),\n );\n }\n }, [showModal]);\n\n const options1 = {\n slidesToShow: 1,\n slidesToScroll: 1,\n arrows: false,\n fade: true,\n dots: true,\n adaptiveHeight: true,\n asNavFor: \".tuts-text-slider\",\n };\n const options2 = {\n slidesToShow: 1,\n slidesToScroll: 1,\n asNavFor: \".tuts-thumbnail-slider\",\n dots: false,\n arrows: false,\n adaptiveHeight: true,\n };\n const { description, desktopImage } = bgGame;\n return (\n <>\n \n setNav1(slider)}\n className=\"pb-0 tuts-thumbnail-slider w-100\"\n {...options1}\n asNavFor={nav2}\n key=\"hiw-slider-3\"\n >\n
\n \n \n );\n};\n\nconst mapDispatchToProps = (dispatch) => ({\n contestEntry: (data, callback) => dispatch(contestEntry(data, callback)),\n loadProfile: () => dispatch(loadProfile()),\n});\nconst mapStateToProps = (state) => ({\n getUser: getUser(state),\n});\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(HowItWorks));\n","import Skeleton from \"react-loading-skeleton\";\nimport { connect } from \"react-redux\";\nimport {\n checkEmail,\n checkUsername,\n contestEntry,\n getUser,\n loadBountyBoxes,\n loadProfile,\n loginUser,\n registerUser,\n resendOTP,\n resetPassword,\n toggleDiscordModalRedux,\n toggleHowToPlayRedux,\n toggleHTPRedux,\n togglePopupRedux,\n updateImage,\n verifyOTP,\n} from \"store/user\";\nimport { withRouter } from \"utils/withRouter\";\n\n// Images\nconst creditsImage = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/loot-arcade-winner-img.png\";\nconst lootIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/loot-logo-large.svg\";\nconst arcadeIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/ticketLogo-2.svg\";\n\nconst FreeCredits = ({ toggleModal, getUser, toggleHowToPlayRedux }) => {\n const userProfile = getUser.profile?.userProfile;\n return (\n <>\n \n
\n \n \n 
\n
\n \n setNav2(slider)}\n {...options2}\n asNavFor={nav1}\n key=\"hiw-slider-4\"\n className=\"pb-0 tuts-text-slider w-100\"\n >\n
\n \n {\n e.preventDefault();\n toggleModal(e);\n }}\n >\n DISMISS\n \n
\n \n How It Works
\n{description}
\n\n\n
\n \n );\n};\n\nconst mapDispatchToProps = (dispatch) => ({\n contestEntry: (data, callback) => dispatch(contestEntry(data, callback)),\n loadProfile: (callback) => dispatch(loadProfile(callback)),\n loginUser: (data, callback) => dispatch(loginUser(data, callback)),\n verifyOTP: (data, callback) => dispatch(verifyOTP(data, callback)),\n checkUsername: (data, callback) => dispatch(checkUsername(data, callback)),\n checkEmail: (data, callback) => dispatch(checkEmail(data, callback)),\n updateImage: (data, callback) => dispatch(updateImage(data, callback)),\n registerUser: (data, callback) => dispatch(registerUser(data, callback)),\n resendOTP: (data, callback) => dispatch(resendOTP(data, callback)),\n resetPassword: (data, callback) => dispatch(resetPassword(data, callback)),\n togglePopupRedux: (data) => dispatch(togglePopupRedux(data)),\n toggleHTPRedux: (data) => dispatch(toggleHTPRedux(data)),\n toggleHowToPlayRedux: (data) => dispatch(toggleHowToPlayRedux(data)),\n toggleDiscordModalRedux: (data) => dispatch(toggleDiscordModalRedux(data)),\n loadBountyBoxes: (callback) => dispatch(loadBountyBoxes(callback)),\n});\nconst mapStateToProps = (state) => ({\n getUser: getUser(state),\n});\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(FreeCredits));\n","export const setToken = (refresh, auth) => {\n if (refresh) localStorage.setItem(\"x-refresh-token\", refresh);\n localStorage.setItem(\"x-auth-token\", auth);\n};\n\nexport const getToken = (type) => {\n if (type === \"refresh\") return localStorage.getItem(\"x-refresh-token\");\n if (type === \"auth\") return localStorage.getItem(\"x-auth-token\");\n return false;\n};\n\nexport const clearAllToken = () => {\n localStorage.clear();\n};\n\nexport const setProfile = (data) => {\n localStorage.setItem(\"data\", JSON.stringify(data));\n};\nexport const getProfile = () => {\n return JSON.parse(localStorage.getItem(\"data\"));\n};\n","import React, { useState } from \"react\";\nimport { Dropdown } from \"react-bootstrap\";\n\nconst DateDropDown = ({ onChangeDate }) => {\n const dayOptions = Array(31)\n .fill()\n .map((_, i) => ({ name: (i + 1).toString(), value: i + 1 }));\n const monthOptions = [\n { name: \"Jan\", value: 1 },\n { name: \"Feb\", value: 2 },\n { name: \"Mar\", value: 3 },\n { name: \"Apr\", value: 4 },\n { name: \"May\", value: 5 },\n { name: \"Jun\", value: 6 },\n { name: \"Jul\", value: 7 },\n { name: \"Aug\", value: 8 },\n { name: \"Sep\", value: 9 },\n { name: \"Oct\", value: 10 },\n { name: \"Nov\", value: 11 },\n { name: \"Dec\", value: 12 },\n ];\n const generateArrayOfYears = () => {\n const max = new Date().getFullYear();\n const min = max - 100;\n const years = [];\n\n for (var i = max; i >= min; i--) {\n years.push({ name: i, value: i });\n }\n return years;\n };\n const [day, setDay] = useState({});\n const [month, setMonth] = useState({});\n const [year, setYear] = useState({});\n\n const onChangeDay = ({ value, name }) => {\n setDay({ value, name });\n onChangeDate({ target: { name: \"date\", value: { years: year?.value, months: month?.value - 1, days: value } } });\n };\n const lastDayOfMonth = (month, year) => {\n const date = new Date();\n let d = 31;\n if (!isNaN(month)) {\n if (isNaN(year)) d = new Date(date.getFullYear(), parseInt(month), 0).getDate();\n else d = new Date(parseInt(year), parseInt(month), 0).getDate();\n }\n return d;\n };\n const lastMonthOfYear = (year) => {\n const date = new Date();\n let d = 12;\n\n if (!isNaN(year) && date.getFullYear() === year) d = date.getMonth() + 1;\n\n return d;\n };\n const onChangeMonth = ({ value, name }) => {\n const lastDay = lastDayOfMonth(value, year?.value);\n if (!isNaN(day?.value) && lastDay < day?.value) setDay({});\n setMonth({ value, name });\n onChangeDate({ target: { name: \"date\", value: { years: year?.value, months: value - 1, days: day?.value } } });\n };\n const onChangeYear = ({ value, name }) => {\n const lastDay = lastDayOfMonth(month?.value, value);\n if (!isNaN(day?.value) && lastDay < day?.value) setDay({});\n const lastMonth = lastMonthOfYear(value);\n if (!isNaN(month?.value) && lastMonth < month?.value) setMonth({});\n setYear({ value, name });\n onChangeDate({ target: { name: \"date\", value: { years: value, months: month?.value - 1, days: day?.value } } });\n };\n return (\n \n
\n ACCOUNT CREATED
\n\n
\n \n
\n PLAY ON US!
\nFREE ARCADE COINS & LOOT BUCKS DELIVERED.
\n\n
\n \n
\n \n 
\n
\n \n
\n \n {getUser.loading ? (\n
\n \n
\n )}\n \n 
\n
\n \n
\n {userProfile?.arcadeCoins?.toLocaleString(\"en-us\") ?? 0}
\n ARCADE COINS
\n \n {getUser.loading ? (\n
\n \n
\n )}\n \n 
\n
\n \n
\n \n {userProfile?.lootBonusCoins?.toLocaleString(undefined, {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n }) ?? 0}\n
\n FREE LOOT Bucks
\n \n
\n \n Now it’s time to show the community what you’ve got! Enter contests to rank the leaderboard & win prizes.\n
\n\n {\n e.preventDefault();\n toggleHowToPlayRedux(true);\n // togglePopupRedux(true);\n toggleModal();\n }}\n >\n Continue\n \n
\n \n
\n );\n};\n\nexport default DateDropDown;\n","import _ from \"lodash\";\nimport mixpanel from \"mixpanel-browser\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { connect } from \"react-redux\";\nimport {\n checkEmail,\n checkUsername,\n contestEntry,\n getUser,\n loadBountyBoxes,\n loadProfile,\n loginUser,\n registerUser,\n resendOTP,\n resetPassword,\n toggleDiscordModalRedux,\n toggleHowToPlayRedux,\n toggleHTPRedux,\n togglePopupRedux,\n updateImage,\n verifyOTP,\n} from \"store/user\";\nimport { getCookie } from \"utils/cookiesUtilities\";\nimport { setToken } from \"utils/localStorageServices\";\nimport { loadJS } from \"utils/misc\";\nimport { withRouter } from \"utils/withRouter\";\n\n// Components\nimport AlertError from \"common/alert/alertError\";\nimport DateDropDown from \"common/dateDropDown\";\nimport moment from \"moment\";\nimport { toast } from \"react-toastify\";\nimport { dateAsUtc } from \"utils/dateConversion\";\nimport { verisoulSessionId } from \"utils/verisoulUtils\";\nimport ErrorPopup from \"../../errorPopup\";\nimport { prepareData } from \"../../gtmDatalayer\";\nimport LoaderImg from \"../../loaderImag\";\n\n// Images\nconst logo = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/bgNewLogo.svg\";\nconst closeIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/close-icon.svg\";\nconst mailIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/mail-ad-icon.svg\";\nconst usernameIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/username.svg\";\nconst passwordIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/password.svg\";\nconst eyeIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/eye.svg\";\nconst loader = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/loader-grey.svg\";\nconst eyeOffIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/eye-off.svg\";\nconst creditImage = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/credit-image-20.jpg\";\nconst creditIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/credit-icon.svg\";\n\nconst HowItWorks = (props) => {\n const {\n showModal,\n toggleModal,\n getUser,\n loginUser,\n registerUser,\n verifyOTP,\n loadProfile,\n updateImage,\n checkEmail,\n checkUsername,\n toggleHowToPlayRedux,\n toggleHTPRedux,\n resendOTP,\n resetPassword,\n toggleDiscordModalRedux,\n onboardingType = \"login\",\n loadBountyBoxes,\n setTab,\n walletDetails,\n } = props;\n const aRef = useRef();\n const bRef = useRef();\n const cRef = useRef();\n const dRef = useRef();\n const eRef = useRef();\n\n // Component States\n const [data, setData] = useState({\n email: \"\",\n password: \"\",\n cPassword: \"\",\n userName: \"\",\n verificationCode1: \"\",\n verificationCode2: \"\",\n verificationCode3: \"\",\n verificationCode4: \"\",\n date: {},\n term: false,\n });\n\n const handleCheck = (e) => {\n const { name, checked } = e;\n const newData = structuredClone(data);\n const newError = structuredClone(errors);\n newData[name] = checked;\n if (checked) delete newError[name];\n setData(newData);\n\n setErrors(newError);\n };\n\n const onChange = async (e) => {\n const { name, value } = e.target;\n const newErr = type === \"login\" ? {} : structuredClone(errors);\n const otp = structuredClone(data);\n if (type === \"resetPassword2\" && name === \"password\") delete newErr.cPassword;\n if (\n name.includes(\"verificationCode\") &&\n ((value !== \"\" && otp[name] !== \"\") || (value !== \"\" && isNaN(parseInt(value))))\n )\n return;\n delete newErr[name];\n\n otp[name] = value;\n if (otp[name] !== \"\") {\n setData(otp);\n if (name === \"verificationCode1\") bRef.current.focus();\n if (name === \"verificationCode2\") cRef.current.focus();\n if (name === \"verificationCode3\") dRef.current.focus();\n if (name === \"verificationCode4\") eRef.current.focus();\n } else {\n setData(otp);\n }\n setErrors(newErr);\n };\n const onChange2 = async (e) => {\n const { name, value } = e.target;\n const newErr = structuredClone(errors);\n const otp = structuredClone(data);\n if ((value !== \"\" && otp[name] !== \"\") || (value !== \"\" && isNaN(parseInt(value)))) return;\n delete newErr[name];\n\n let multiVal = value?.split(\"\");\n if (value === \"\") {\n otp[name] = \"\";\n setData(otp);\n } else if (name === \"verificationCode1\" && value?.length > 1) {\n let multiVal = value?.split(\"\");\n otp.verificationCode1 = multiVal[0];\n otp.verificationCode2 = multiVal[1];\n otp.verificationCode3 = multiVal[2];\n otp.verificationCode4 = multiVal[3];\n eRef.current.focus();\n setData(otp);\n } else if (value?.length > 1) {\n otp[name] = multiVal[0];\n } else if (value?.length === 1) {\n otp[name] = value;\n setData(otp);\n if (name === \"verificationCode1\") bRef.current.focus();\n if (name === \"verificationCode2\") cRef.current.focus();\n if (name === \"verificationCode3\") dRef.current.focus();\n if (name === \"verificationCode4\") eRef.current.focus();\n } else {\n setData(otp);\n }\n setErrors(newErr);\n };\n const onChangeDate = (e) => {\n const { name, value } = e.target;\n const newErr = structuredClone(errors);\n const newData = structuredClone(data);\n delete newErr[name];\n newData[name] = value;\n\n if (value?.days && !isNaN(value?.months) && value?.years && moment().diff(moment(value), \"years\") < 18)\n newErr[name] = \"You must be 18 or older to create an account\";\n setData(newData);\n setErrors(newErr);\n };\n const [errors, setErrors] = useState({});\n const [type, setType] = useState(onboardingType ?? \"signup\");\n const [type2, setType2] = useState(\"\");\n const [showPass, setShowPass] = useState(false);\n const [showPass2, setShowPass2] = useState(false);\n const [loading, setLoading] = useState(false);\n const [loadingEmail, setLoadingEmail] = useState(false);\n const [loadingUsername, setLoadingUsername] = useState(false);\n const [loadingResendCode, setLoadingResendCode] = useState(false);\n const [showError, setShowError] = useState(false);\n const [isValidEmail, setIsValidEmail] = useState(false);\n const [isValidUserName, setIsValidUserName] = useState(false);\n const [isVerificationComplete, setIsVerificationComplete] = useState(false);\n const [otpSent, setOtpSent] = useState(false);\n const [finishSetup, setFinishSetup] = useState(false);\n\n // All useEffects for data re-rendering\n useEffect(() => {\n if (showModal) {\n if (process.env.REACT_APP_MIXPANEL === \"1\") {\n if (type === \"signup\") mixpanel.track(\"View email registration form\");\n if (type === \"login\") mixpanel.track(\"View login form \");\n }\n const { profile } = getUser;\n const { userProfile } = profile;\n if (!userProfile || !userProfile.walletAddress) {\n setType(onboardingType);\n }\n if (!_.isEmpty(userProfile)) {\n toggleModal();\n } else if (userProfile?.walletAddress) toggleModal();\n } else {\n clearData();\n }\n }, [showModal]);\n\n useEffect(() => {\n setErrors({});\n setIsValidEmail(false);\n setIsValidUserName(false);\n if (process.env.REACT_APP_MIXPANEL === \"1\" && showModal) {\n if (type === \"signup\") mixpanel.track(\"View registration Form\");\n if (type === \"verify\") mixpanel.track(\"View verification code prompt\");\n }\n if (process.env.REACT_APP_GA === \"1\" && showModal) {\n if (type === \"verify\") {\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push(\n prepareData({\n event: \"View verification code prompt\",\n }),\n );\n }\n }\n }, [type]);\n\n useEffect(() => {\n if (data.verificationCode1 && data.verificationCode2 && data.verificationCode3 && data.verificationCode4) {\n delete errors.verificationCode;\n }\n }, [data.verificationCode1, data.verificationCode2, data.verificationCode3, data.verificationCode4]);\n\n // Switch case method to get the title of the flyer\n const getTitle = () => {\n switch (type) {\n case \"signup\":\n return finishSetup ? \"Finish Setup\" : \"Create Account\";\n case \"resetPassword\":\n return \"Reset Password\";\n case \"resetPassword2\":\n return \"Reset Password\";\n case \"verify\":\n return isVerificationComplete ? \"Verification Complete\" : \"Verify Email Address\";\n default:\n return \"Login Now\";\n }\n };\n\n // Switch case method to get the sub-title of the flyer\n const getSubTitle = () => {\n switch (type) {\n case \"signup\":\n return \"Create an account in just a few clicks to reserve your place in the metaverse. \";\n case \"resetPassword\":\n return \"Enter your user account's verified email address and we will send you a four digit verification code.\";\n case \"resetPassword2\":\n return \"Enter your new password\";\n case \"verify\":\n return type2 === \"resetPassword\"\n ? \"Enter the 4 digit code that was delivered to your email to finish resetting your password. This code will expire in 15 minutes.\"\n : isVerificationComplete\n ? \"Play your first few games on us!\"\n : \"Enter the 4 digit code that was delivered to your email to finish setting up your account. This code will expire in 15 minutes.\";\n default:\n return \"Enter your username (or email address) & password to login.\";\n }\n };\n\n // Method to clear all the states\n const clearData = () => {\n setData({\n term: false,\n email: \"\",\n password: \"\",\n userName: \"\",\n verificationCode1: \"\",\n verificationCode2: \"\",\n verificationCode3: \"\",\n verificationCode4: \"\",\n date: {},\n });\n setIsVerificationComplete(false);\n setErrors({});\n setType(\"signup\");\n setShowPass(false);\n setLoading(false);\n setLoadingEmail(false);\n setLoadingUsername(false);\n setShowError(false);\n setIsValidEmail(false);\n setIsValidUserName(false);\n setType2(\"\");\n setShowPass2(false);\n setOtpSent(false);\n };\n\n // On Clicking on submit buttons data validation is done and api is called\n const handleSubmit = async (e) => {\n if (e) e.preventDefault();\n if (loading || loadingUsername || loadingEmail) return;\n let newErrors = structuredClone(errors);\n var mailformat =\n /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n // Validations of the data\n if (type === \"verify\") {\n if (!data.verificationCode1 || !data.verificationCode2 || !data.verificationCode3 || !data.verificationCode4) {\n newErrors.verificationCode = \"Please enter the 4 digit code sent to your email address\";\n }\n } else if (type === \"resetPassword\") {\n if (_.isEmpty(data.email)) {\n newErrors.email = \"Email is required\";\n }\n if (data.email && !mailformat.test(data.email)) {\n newErrors.email = \"Email is invalid\";\n }\n } else if (type === \"resetPassword2\") {\n if (_.isEmpty(data.password)) {\n newErrors.password = \"Password is required\";\n }\n if (data.password && data.password.length < 6) newErrors.password = \"Password must be at least 6 characters\";\n if (data.cPassword !== data.password) {\n newErrors.cPassword = \"Passwords do not match\";\n }\n } else {\n if (_.isEmpty(data.userName))\n newErrors.userName = type === \"login\" ? \"Username or email is required\" : \"Username is required\";\n\n if (type === \"signup\") {\n if (_.isEmpty(data.email)) {\n newErrors.email = \"Email is required\";\n }\n if (data.email && !mailformat.test(data.email)) {\n newErrors.email = \"Email is invalid\";\n }\n\n if (finishSetup) {\n if (!data.term) {\n newErrors.term = \"Please agree to the Burn Ghost Terms of Service\";\n }\n if (!data?.date?.days || isNaN(data?.date?.months) || !data?.date?.years)\n newErrors.date = \"Date of birth is required\";\n else if (moment().diff(moment(data?.date), \"years\") < 18)\n newErrors.date = \"You must be 18 or older to create an account\";\n }\n }\n if (_.isEmpty(data.password) && _.isEmpty(walletDetails)) {\n newErrors.password = \"Password is required\";\n }\n if (type === \"signup\" && data.password && data.password.length < 6)\n newErrors.password = \"Password must be at least 6 characters\";\n }\n\n if (!_.isEmpty(newErrors)) {\n if (type === \"signup\") {\n if (process.env.REACT_APP_GA === \"1\") {\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push(\n prepareData({\n event: \"Submit registration form_failure\",\n }),\n );\n }\n if (process.env.REACT_APP_MIXPANEL === \"1\") mixpanel?.track(\"Submit registration form_failure\");\n }\n return setErrors(newErrors);\n }\n setLoading(true);\n\n const { email, password, userName } = data;\n if (type === \"login\") {\n const sessionId = await verisoulSessionId();\n loginUser({ userName: userName.toLowerCase(), password, sessionId }, (loginRes) => {\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push(\n prepareData({\n event: \"login\", // fixed value\n }),\n );\n if (loginRes.status === 200) {\n toggleModal();\n\n localStorage.setItem(\"userProfile\", JSON.stringify(loginRes.data.userProfile));\n\n if (process.env.REACT_APP_MIXPANEL === \"1\") {\n mixpanel?.track(\"Login\", { Type: \"email\" });\n mixpanel.identify(loginRes?.data?.userProfile?.id);\n }\n setToken(false, loginRes.data.jwtToken);\n loadProfile((res) => {\n if (res?.data?.connectedWallet?.walletAddress) {\n loadBountyBoxes();\n }\n });\n window.innerWidth > 1280.98 && toggleDiscordModalRedux(true);\n } else {\n newErrors.password = loginRes.data.message;\n setErrors(newErrors);\n }\n setLoading(false);\n });\n } else if (type === \"signup\") {\n if (finishSetup) {\n if (process.env.REACT_APP_MIXPANEL === \"1\") {\n mixpanel?.track(\"Submit registration form_successful\");\n }\n if (process.env.REACT_APP_GA === \"1\") {\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push(\n prepareData({\n event: \"Submit email registration form_successful\",\n }),\n );\n }\n const sessionId = await verisoulSessionId();\n const referralCode = localStorage.getItem(\"referralCode\");\n const context = {\n hutk: getCookie(\"hubspotutk\"),\n pageUri: window?.location?.host,\n pageName: document?.title,\n };\n const payload = {\n email,\n userName: userName.toLocaleLowerCase(),\n dateOfBirth: parseInt(dateAsUtc(data?.date, \"x\")),\n sessionId,\n context,\n ...walletDetails,\n };\n if (password) {\n payload.password = password;\n }\n if (referralCode) {\n payload.referralCode = referralCode;\n }\n registerUser(payload, (signupRes) => {\n if (signupRes.status === 200) {\n localStorage.setItem(\"signup-token\", signupRes.data.token);\n setType(\"verify\");\n } else {\n toast(\n \n
\n \n \n \n {day?.name}\n \n \n {dayOptions.slice(0, lastDayOfMonth(month?.value, year?.value)).map(({ value, name }) => (\n onChangeDay({ value, name })}>{name} \n ))}\n \n \n
\n \n
\n \n \n \n {month?.name}\n \n \n {monthOptions?.slice(0, lastMonthOfYear(year?.value)).map(({ value, name }) => (\n onChangeMonth({ value, name })}>{name} \n ))}\n \n \n
\n \n
\n \n \n \n {year?.name}\n \n \n {generateArrayOfYears().map(({ value, name }) => (\n onChangeYear({ value, name })}>{name} \n ))}\n \n \n
\n \n \n
\n )}\n {/* password */}\n {(type === \"login\" ||\n (type === \"signup\" && !finishSetup && _.isEmpty(walletDetails)) ||\n type === \"resetPassword2\") && (\n \n 
\n
\n {!isVerificationComplete ? (\n {getTitle()}
\n{!finishSetup && getSubTitle()}
\n\n {/* username */}\n {!finishSetup && type !== \"verify\" && type !== \"resetPassword\" && type !== \"resetPassword2\" && (\n \n
\n )}\n {/* email */}\n {type === \"signup\" && !finishSetup && (\n \n {\n checkUsernameValidity(e.target.value);\n }}\n maxLength={type === \"signup\" ? 15 : false}\n value={data.userName}\n />\n 
\n
\n {errors.userName && \n 
\n
\n {errors.userName}
}\n \n {\n checkEmailValidity(e.target.value);\n }}\n />{\" \"}\n \n
\n {errors.email && \n 
\n
\n {errors.email}
}\n \n
{\" \"}\n {errors.password && \n
\n \n 
\n
\n \n {\n e.preventDefault();\n setShowPass(!showPass);\n }}\n >\n 
\n
\n {errors.password}
}\n \n )}\n {type === \"verify\" && (\n \n
\n )}\n {finishSetup && (\n \n
\n \n
\n \n
\n \n
\n \n
\n {errors.verificationCode && (\n {errors.verificationCode}
\n )}\n \n
\n )}\n {type === \"signup\" && finishSetup && (\n Date of Birth
\n {errors.date}
}\n \n
\n )}\n {type === \"resetPassword\" && (\n \n handleCheck({ name: \"term\", checked: !data.term })}\n checked={data.term}\n />\n \n
\n \n {\n checkEmailValidity2(e.target.value);\n setErrors({});\n }}\n />{\" \"}\n \n
\n {errors.email && \n \n
\n {errors.email}
}\n \n )}\n {type === \"resetPassword2\" && (\n \n
{\" \"}\n {errors.cPassword && \n
\n \n \n
\n \n {\n e.preventDefault();\n setShowPass2(!showPass2);\n }}\n >\n 
\n
\n {errors.cPassword}
}\n \n )}\n\n \n \n {loading ? (\n
\n \n ) : (\n \n
\n )}\n\n {!isVerificationComplete ? (\n \n
\n \n
\n \n
\n \n 
\n
\n \n
\n \n 
{isVerificationComplete} CREDITS\n
\n ADDed TO YOUR ACCOUNT
\n \n {type === \"signup\" && (\n \n Existing Account?{\" \"}\n {\n e.preventDefault();\n setType(\"login\");\n }}\n >\n {\" \"}\n Login\n {\" \"}\n \n )}\n {type === \"login\" && (\n <>\n \n Don’t have an account?{\" \"}\n {\n e.preventDefault();\n setData({\n email: \"\",\n password: \"\",\n cPassword: \"\",\n userName: \"\",\n verificationCode1: \"\",\n verificationCode2: \"\",\n verificationCode3: \"\",\n verificationCode4: \"\",\n term: false,\n date: {},\n });\n setType(\"signup\");\n }}\n >\n {\" \"}\n Create Account\n {\" \"}\n \n \n Forgot Password?{\" \"}\n {\n e.preventDefault();\n setType(\"resetPassword\");\n }}\n >\n {\" \"}\n Reset Password\n {\" \"}\n \n \n )}\n {type === \"verify\" && (\n \n {otpSent ? (\n Your code has been resent\n ) : (\n <>\n Didn’t receive a code?{\" \"}\n {loadingResendCode ? (\n \n {\" \"}\n Resend Code\n \n )}{\" \"}\n \n )}\n \n )}\n
\n ) : (\n <>\n \n {\n toggleHTPRedux(true);\n // togglePopupRedux(true);\n toggleModal(e);\n }}\n >\n Continue\n \n
\n \n )}\n \n\n \n
\n \n\n \n 
\n
\n {onboardingType === \"login\" ? \"Welcome Back!\" : \"Create Account\"}
\n\n
\n \n
\n \n
\n \n {\n if (process.env.REACT_APP_GA === \"1\") {\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push(\n prepareData({\n event: \"SignupGoogle_clicked\",\n }),\n );\n }\n if (process.env.REACT_APP_MIXPANEL === \"1\") mixpanel?.track(\"SignupGoogle_clicked\");\n loadGoogleAuthURL((res) => {\n if (res.status === 200) {\n window.location.href = res.data;\n }\n });\n localStorage.setItem(\"ssoAuth\", \"google\");\n }}\n />\n \n 
\n
\n \n
\n \n
\n \n
\n \n {\n if (process.env.REACT_APP_GA === \"1\") {\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push(\n prepareData({\n event: \"SignupDiscord_clicked\",\n }),\n );\n }\n if (process.env.REACT_APP_MIXPANEL === \"1\") mixpanel?.track(\"SignupDiscord_clicked\");\n loadDiscordAuthURL((res) => {\n if (res.status === 200) {\n window.location.href = res.data;\n }\n });\n localStorage.setItem(\"ssoAuth\", \"discord\");\n }}\n />\n \n \n
\n \n
\n \n
\n \n
\n \n {\n loadWalletMessageToSign();\n if (process.env.REACT_APP_GA === \"1\") {\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push(\n prepareData({\n event: \"SignupWallet_clicked\",\n }),\n );\n }\n if (process.env.REACT_APP_MIXPANEL === \"1\") mixpanel?.track(\"SignupWallet_clicked\");\n setTab(4);\n }}\n />\n \n \n
\n \n {\n if (process.env.REACT_APP_MIXPANEL === \"1\") mixpanel?.track(\"SignupEmail_clicked\");\n if (process.env.REACT_APP_GA === \"1\") {\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push(\n prepareData({\n event: \"SignupEmail_clicked\",\n }),\n );\n }\n setTab(2);\n }}\n >\n
\n \n
\n \n
\n \n \n
\n \n \n
\n Finish Setup
{\" \"}\n\n {/* \n
*/}\n \n {\n if (!e.target.value) {\n const newErrors = structuredClone(errors);\n newErrors.email = \"Email cannot be empty\";\n setErrors(newErrors);\n setIsValidEmail(false);\n return;\n }\n checkEmailValidity(e.target.value);\n }}\n />{\" \"}\n \n
\n {errors.email && \n \n
\n {errors.email}
}\n \n {\n if (!e.target.value) {\n const newErrors = structuredClone(errors);\n newErrors.userName = \"Username cannot be empty\";\n setErrors(newErrors);\n setIsValidUserName(false);\n return;\n }\n checkUsernameValidity(e.target.value);\n }}\n maxLength={15}\n value={data.userName}\n />\n \n
\n {errors.userName && \n \n
\n {errors.userName}
}\n \n
\n Date of Birth
\n {errors.date}
}\n \n
\n \n\n \n handleCheck({ name: \"term\", checked: !data.term })}\n checked={data.term}\n />\n \n
\n \n \n {loading ?
\n \n \n \n Have an existing Burn Ghost account?
\n {\n e.preventDefault();\n localStorage.setItem(\"logout\", \"true\");\n localStorage.setItem(\"`tryLogin`\", \"false\");\n localStorage.setItem(\"signed\", \"false\");\n localStorage.removeItem(\"x-auth-token\");\n verisoulLogout();\n localStorage.removeItem(\"userProfile\");\n setOptionsType(\"login\");\n setTab(1);\n }}\n >\n {\" \"}\n Sign in with Burn Ghost\n {\" \"}\n \n
\n \n );\n};\n\nconst mapDispatchToProps = (dispatch) => ({\n contestEntry: (data, callback) => dispatch(contestEntry(data, callback)),\n loadProfile: (callback) => dispatch(loadProfile(callback)),\n loginUser: (data, callback) => dispatch(loginUser(data, callback)),\n verifyOTP: (data, callback) => dispatch(verifyOTP(data, callback)),\n checkUsername: (data, callback) => dispatch(checkUsername(data, callback)),\n checkEmail: (data, callback) => dispatch(checkEmail(data, callback)),\n updateImage: (data, callback) => dispatch(updateImage(data, callback)),\n registerUser: (data, callback) => dispatch(registerUser(data, callback)),\n resendOTP: (data, callback) => dispatch(resendOTP(data, callback)),\n resetPassword: (data, callback) => dispatch(resetPassword(data, callback)),\n togglePopupRedux: (data) => dispatch(togglePopupRedux(data)),\n toggleHTPRedux: (data) => dispatch(toggleHTPRedux(data)),\n toggleHowToPlayRedux: (data) => dispatch(toggleHowToPlayRedux(data)),\n toggleDiscordModalRedux: (data) => dispatch(toggleDiscordModalRedux(data)),\n loadBountyBoxes: (callback) => dispatch(loadBountyBoxes(callback)),\n updateProfile: (data, callback) => dispatch(updateProfile(data, callback)),\n});\nconst mapStateToProps = (state) => ({\n getUser: getUser(state),\n});\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(UPDATEUSERNAME));\n","import { useWeb3React } from \"@web3-react/core\";\nimport ErrorPopup from \"common/errorPopup\";\nimport { prepareData } from \"common/gtmDatalayer\";\nimport mixpanel from \"mixpanel-browser\";\nimport React, { useEffect, useState } from \"react\";\nimport Skeleton from \"react-loading-skeleton\";\nimport { connect } from \"react-redux\";\nimport {\n getUser,\n loadBountyBoxes,\n loadMessageToSign,\n loadProfile,\n toggleDiscordModalRedux,\n walletLogin,\n} from \"store/user\";\nimport { setToken } from \"utils/localStorageServices\";\nimport { withRouter } from \"utils/withRouter\";\nimport { connectors } from \"web3/connectors\";\nimport { coinbaseWallet } from \"web3/connectors/coinbase\";\nimport { metaMask } from \"web3/connectors/metaMask\";\n\n// Images\nconst logo = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/bgNewLogo.svg\";\nconst greenIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/green-check-icon.svg\";\nconst loaderIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/loader-svg.svg\";\nconst wallet1 = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/t-mode-2.svg\";\nconst wallet2 = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/wallet-type-2.png\";\nconst wallet3 = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/wallet-type-3.png\";\n\nconst WalletLogin = (props) => {\n // const { setErrors, setGenesisError } = props || {};\n const [errors, setErrors] = useState();\n const [signMessage, setSignMessage] = React.useState(true);\n const [signature, setSignature] = React.useState(\"\");\n const [loadingWallet, setLoadingWallet] = React.useState(\"\");\n const [connectedWallet, setConnectedWallet] = React.useState(\"\");\n const { account, isActive, connector } = useWeb3React();\n const setProvider = (type) => {\n window.localStorage.setItem(\"provider\", type);\n };\n const deactivate = () => {\n if (connector.deactivate) {\n connector.deactivate();\n }\n connector?.resetState();\n };\n\n // Get signatures for different wallet connections\n useEffect(() => {\n if (account) {\n async function getSignature() {\n if (!signMessage) await signMessages();\n }\n getSignature();\n }\n }, [isActive]);\n\n // Get Messages to sign transaction\n useEffect(() => {\n clearData();\n }, []);\n\n // Reset states on modal close\n const clearData = () => {\n setSignature(\"\");\n setLoadingWallet(\"\");\n setConnectedWallet(\"\");\n setSignMessage(false);\n };\n\n // Connect wallet to the user account after signing the transaction\n const signMessages = async () => {\n // If metamask extension not found, show error\n if (!connector) return;\n if (!props.getUser.messageToSign) {\n return setErrors(\"Something went wrong. Please try again later.\");\n }\n try {\n // Sign message\n const signatureStr = props.getUser.messageToSign;\n const signature = await connector?.provider?.request({\n method: \"personal_sign\",\n params: [signatureStr, account],\n });\n setSignature(signature);\n setConnectedWallet(loadingWallet);\n props.setWalletDetails({ signature, walletAddress: account, message: signatureStr });\n // Login wallet API call\n props.walletLogin({ signature, walletAddress: account, message: signatureStr }, (res) => {\n if (res.status === 200) {\n if (process.env.REACT_APP_MIXPANEL == 1) mixpanel.track(\"Wallet Login Completed\");\n if (process.env.REACT_APP_GA == 1) {\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push(\n prepareData({\n event: \"Wallet Login Completed\",\n }),\n );\n }\n props.toggleModal();\n\n localStorage.setItem(\"userProfile\", JSON.stringify(res.data.userProfile));\n\n if (process.env.REACT_APP_MIXPANEL === \"1\") {\n mixpanel?.track(\"Login\", { Type: \"email\" });\n mixpanel.identify(res?.data?.userProfile?.id);\n }\n setToken(false, res.data.jwtToken);\n props.loadProfile((res) => {\n if (res?.data?.connectedWallet?.walletAddress) {\n props.loadBountyBoxes();\n }\n });\n window.innerWidth > 1280.98 && toggleDiscordModalRedux(true);\n } else {\n props.setOptionsType(\"signup\");\n props.setTab(2);\n }\n });\n } catch (error) {\n setLoadingWallet(\"\");\n setErrors(error?.message);\n deactivate();\n }\n };\n\n // Connect wallet to the user account after signing the transaction\n const activating = async (params) => {\n if (process.env.REACT_APP_MIXPANEL == 1) mixpanel?.track(\"Wallet Connection Initiated\");\n if (process.env.REACT_APP_GA == 1) {\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push(\n prepareData({\n event: \"Wallet Connection Initiated\",\n }),\n );\n }\n try {\n const connectorWallet = {\n injected: metaMask,\n coinbaseWallet: coinbaseWallet,\n };\n await connectorWallet[params]?.activate();\n } catch (error) {\n setLoadingWallet(\"\");\n setErrors(error?.message);\n }\n };\n return (\n <>\n {errors && (\n \n
\n
\n \n \n
\n\n {props.getUser.messageToSignLoading ? (\n Connect Wallet
\n\n
\n ) : (\n <>\n \n {\n if (connectedWallet) return;\n e.preventDefault();\n if (!window?.ethereum?.isMetaMask)\n return window.open(\"https://metamask.app.link/dapp/\" + process.env.REACT_APP_SITE_URL, \"_blank\");\n setSignMessage(false);\n activating(\"injected\");\n setProvider(\"injected\");\n setLoadingWallet(\"injected\");\n }}\n >\n
\n \n
\n \n 
\n ) : (\n \n )}\n
\n \n {\n e.preventDefault();\n if (connectedWallet) return;\n setLoadingWallet(\"coinbaseWallet\");\n setSignMessage(false);\n activating(\"coinbaseWallet\");\n setProvider(\"coinbaseWallet\");\n }}\n >\n
\n \n {/* \n
\n \n
\n \n {\n e.preventDefault();\n if (connectedWallet) return;\n setLoadingWallet(\"walletConnect\");\n setSignMessage(false);\n activating(\"walletConnect\");\n setProvider(\"walletConnect\");\n }}\n >\n
\n */}\n \n )}\n \n \n );\n};\n\nconst mapDispatchToProps = (dispatch) => ({\n walletLogin: (data, callback) => dispatch(walletLogin(data, callback)),\n loadProfile: () => dispatch(loadProfile()),\n loadBountyBoxes: (callback, hardRefresh) => dispatch(loadBountyBoxes(callback, hardRefresh)),\n loadMessageToSign: (callback) => dispatch(loadMessageToSign(callback)),\n toggleDiscordModalRedux: (data) => dispatch(toggleDiscordModalRedux(data)),\n});\nconst mapStateToProps = (state) => ({\n getUser: getUser(state),\n});\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(WalletLogin));\n","import { useEffect, useState } from \"react\";\nimport { Modal } from \"react-bootstrap\";\nimport { connect } from \"react-redux\";\nimport {\n checkEmail,\n checkUsername,\n contestEntry,\n getUser,\n loadBountyBoxes,\n loadProfile,\n loginUser,\n registerUser,\n resendOTP,\n resetPassword,\n toggleDiscordModalRedux,\n toggleHowToPlayRedux,\n toggleHTPRedux,\n togglePopupRedux,\n updateImage,\n verifyOTP,\n} from \"store/user\";\nimport { withRouter } from \"utils/withRouter\";\n\n// Components\nimport { useSearchParams } from \"react-router-dom\";\nimport FreeCredits from \"./freeCredits\";\nimport OnboardingEmail from \"./onboardingEmail\";\nimport OnboardingOptions from \"./onboardingOptions\";\nimport UpdateUsername from \"./updateUsername\";\nimport WalletLogin from \"./walletLogin\";\n\nconst HowItWorks = ({\n showModal,\n toggleModal,\n getUser,\n loginUser,\n registerUser,\n verifyOTP,\n loadProfile,\n updateImage,\n checkEmail,\n checkUsername,\n togglePopupRedux,\n toggleHowToPlayRedux,\n toggleHTPRedux,\n resendOTP,\n resetPassword,\n toggleDiscordModalRedux,\n onboardingType = \"login\",\n emptyProfiledata,\n}) => {\n const [tab, setTab] = useState(1);\n const [optionsType, setOptionsType] = useState(onboardingType);\n const [walletDetails, setWalletDetails] = useState({});\n const [searchParams, setSearchParams] = useSearchParams();\n const loginEmailProps = {\n showModal,\n toggleModal,\n getUser,\n loginUser,\n registerUser,\n verifyOTP,\n loadProfile,\n updateImage,\n checkEmail,\n checkUsername,\n togglePopupRedux,\n toggleHowToPlayRedux,\n toggleHTPRedux,\n resendOTP,\n resetPassword,\n toggleDiscordModalRedux,\n onboardingType: optionsType,\n };\n const [newAcc, setNewAcc] = useState(false);\n\n useEffect(() => {\n if (!showModal) {\n setTab(1);\n } else {\n setOptionsType(onboardingType);\n }\n const loginParam = searchParams.get(\"login\");\n const registerParam = searchParams.get(\"register\");\n if (loginParam) {\n searchParams.delete(\"login\");\n }\n if (registerParam) {\n searchParams.delete(\"register\");\n }\n if (loginParam || registerParam) setSearchParams(searchParams, { replace: true });\n }, [showModal]);\n\n useEffect(() => {\n if (emptyProfiledata) setTab(3);\n }, [emptyProfiledata]);\n return (\n \n
\n \n
\n \n {\n navigate(\"/contests\");\n }}\n >\n
\n {/* \n
\n \n 
\n
\n \n {\n setOnboardingType(\"signup\");\n setShowSignupModal(true);\n }}\n >\n
\n \n 
\n
\n \n
\n Create Account
\nBonus for new users only
\n\n 
\n
\n \n
\n Enter Loot Contests
\nWin tickets from your rank
\n\n 
\n
\n \n
\n */}\n \n Win Sweepstakes Prizes
\nEnter tickets for a shot to win
\n\n {\n setOnboardingType(\"signup\");\n setShowSignupModal(true);\n }}\n >\n Sign Up\n \n {\n setOnboardingType(\"login\");\n setShowSignupModal(true);\n }}\n >\n SIGN IN\n \n
\n \n \r\n
\r\n );\r\n}\r\n\r\nexport default DetailsModalCard;\r\n","//@web3-react/core v6 connectors, currently not in use\n\nimport { InjectedConnector } from \"@web3-react/injected-connector\";\nimport { WalletConnectConnector } from \"@web3-react/walletconnect-connector\";\nimport { WalletLinkConnector } from \"@web3-react/walletlink-connector\";\n\nlet chainIds = [];\nif (process.env.REACT_APP_MODE !== \"prod\") {\n chainIds = [80002];\n} else {\n chainIds = [1, 3, 4, 5, 137, 42];\n}\n\nconst injected = new InjectedConnector({\n supportedChainIds: chainIds,\n});\n\nconst walletconnect = new WalletConnectConnector({\n rpcUrl: `https://mainnet.infura.io/v3/${process.env.INFURA_KEY}`,\n bridge: \"https://bridge.walletconnect.org\",\n qrcode: true,\n});\n\nconst walletlink = new WalletLinkConnector({\n url: `https://mainnet.infura.io/v3/${process.env.INFURA_KEY}`,\n appName: \"web3-react-demo\",\n});\n\nexport const connectors = {\n injected: injected,\n walletConnect: walletconnect,\n coinbaseWallet: walletlink,\n};\n","import { useLocation, useNavigate, useParams } from \"react-router-dom\";\nimport { useWeb3React } from \"@web3-react/core\";\n\nexport const withRouter = (Component) => {\n function ComponentWithRouterProp(props) {\n let location = useLocation();\n let navigate = useNavigate();\n let params = useParams();\n const web3Functions = useWeb3React();\n return (\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n \r\n {title}
\r\n{subTitle}
\r\n\n
\n \n );\n};\nexport default Carousel;\n","export function SpinnerSVG() {\n return (\n \n
\n \n {carousels.map((carouselRef, i) => (\n
\n ))}\n \n
\n \n {images.map((image, index) => (\n \n {/* {index} */}\n {/* {(360 / images.length) * index} */}\n \n
\n ))}\n \n 
\n
\n );\n};\n\nexport default PieSection;\n","import React, { useEffect, useRef, useState, useCallback, useMemo } from \"react\";\nimport { useGSAP } from \"@gsap/react\";\nimport gsap from \"gsap\";\nimport useSound from \"use-sound\";\nimport { SpinnerSVG } from \"./SVG\";\nimport PieSection from \"./pieSection\";\nimport ConfettiJSON from \"../include/confetti.json\";\nimport Lottie from \"react-lottie-player\";\nimport { createRef } from \"react\";\n\nconst lottieRef = createRef(null);\nconst successIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/crypto-wallet-Success-1.png\";\n\nconst question = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/a.png\";\nconst dice = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/f.png\";\nconst dice2 = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/g.png\";\nconst dice3 = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/h.png\";\nconst dice4 = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/j.png\";\nconst key = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/k.png\";\nconst key1 = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/l.png\";\nconst key2 = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/m.png\";\nconst key3 = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/n.png\";\nconst spinsfx = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"sfx/spin.mp3\";\nconst win = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"sfx/win.mp3\";\nconst press = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"sfx/press.mp3\";\nconst tick = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"sfx/tick.wav\";\nconst bonusWin = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"sfx/bonus.mp3\";\nconst heartbeat = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"sfx/heartbeat.wav\";\n\nconst Spinner = ({ spinState, sections, setAllowClose, setShowSuccess }) => {\n const pointerRef = useRef(null);\n const wheelRef = useRef(null);\n const [bonus, setBonus] = useState(false);\n const [currentSection, setCurrentSection] = useState(null);\n const [spin, setSpin] = useState(false);\n const prevTick = useRef(null);\n\n // const rewardSections = createSections(sections);\n let newSec = sections?.filter((section) => (bonus ? section.spinnerLocation === 2 : section.spinnerLocation === 1));\n if (!bonus) {\n newSec.push({\n ...sections[0],\n angle: 0,\n image: question,\n value: \"Bonus\",\n color: \"#171717\",\n id: \"1\",\n });\n newSec.push({\n ...sections[3],\n angle: 180,\n image: question,\n value: \"Bonus\",\n color: \"#171717\",\n id: \"2\",\n });\n }\n\n const defaultColors = useMemo(\n () => sections?.reduce((obj, section) => ({ ...obj, [section?.position]: section?.color }), {}),\n [],\n );\n const [positionColor, setPositionColor] = useState(() =>\n sections?.reduce((obj, section) => ({ ...obj, [section?.position]: section?.color }), {}),\n );\n\n const baseColorLight = \"#1e1e1e\";\n const baseColorDark = \"#171717\";\n const highlightColor = \"#B56200\";\n const selectedColor = \"#04C100\";\n\n const [playPress] = useSound(press, { volume: 0.5 });\n const [playSpin] = useSound(spinsfx, { volume: 0.5 });\n const [playWin] = useSound(win, { volume: 0.5 });\n const [playTick] = useSound(tick, { volume: 0.5 });\n const [playBonus] = useSound(bonusWin, { volume: 0.5 });\n const [playHeartbeat] = useSound(heartbeat, { volume: 0.5 });\n\n const handleSpin = () => {\n if (!spin) {\n setSpin(true);\n playPress();\n playSpin();\n }\n };\n\n const findCurrentSection = useCallback((rotation) => {\n const currentRotation = ((rotation % 360) + 360) % 360; // Normalize rotation\n for (const section of sections) {\n let startAngle = section.angle - 30;\n let endAngle = section.angle + 30;\n\n // Special case for the top-center section crossing the 0-degree boundary\n if (section.angle === 0) {\n if (currentRotation >= 330 || currentRotation < 30) {\n return [section.position, section.id];\n }\n } else {\n if (startAngle < 0) startAngle += 360;\n if (endAngle >= 360) endAngle -= 360;\n\n if (currentRotation >= startAngle && currentRotation < endAngle) {\n return [section.position, section.id, section.type, section.value];\n }\n }\n }\n return null;\n }, []);\n\n const updateSectionColors = useCallback((rotation, finalColor = null) => {\n const newSection = findCurrentSection(rotation)[0];\n\n if (newSection !== currentSection) {\n setCurrentSection(newSection);\n\n sections.forEach((section) => {\n const color = section.position === newSection ? finalColor || highlightColor : section.color;\n\n document.documentElement.style.setProperty(`--${section.position}`, color);\n });\n }\n }, []);\n\n const checkAndPlayTick = useCallback(\n (currentRotation) => {\n const angles = [30, 90, 150, 210, 270, 330];\n const tolerance = 5; // Tolerance for floating-point precision\n const roundedRotation = Math.floor(currentRotation * -1);\n if (angles.some((angle) => Math.abs(roundedRotation - angle) < tolerance && prevTick.current !== angle)) {\n updateSectionColors(currentRotation - 15);\n playTick();\n prevTick.current = angles.find((angle) => Math.abs(roundedRotation - angle) < tolerance);\n }\n },\n [playTick, updateSectionColors],\n );\n\n const duration = bonus ? 5.0 : 5.25;\n const backout = bonus ? 0.0 : 0.6;\n\n useGSAP(() => {\n //useGSAP is similar to useEffect but it is used for GSAP animations\n // this triggers animations for the regular spin and bonus spin\n if (spin || bonus) {\n let delayComplete = false;\n\n const rotationArray = [1080, 1020, 1320, 1260, 1200, 1140];\n const index = spinState?.spinnerLocation === 2 && !bonus ? 0 : spinState?.angle / 60;\n const randomRotation = rotationArray[index];\n\n const randomBackout = Math.random() * 0.5 + backout;\n if (!bonus) {\n gsap.to(wheelRef.current, {\n rotate: randomRotation,\n duration: duration,\n ease: `back.out(${randomBackout})`,\n });\n }\n\n gsap.to(pointerRef.current, {\n rotation: -randomRotation,\n duration: duration,\n ease: `back.out(${randomBackout})`,\n onStart: () => {\n setTimeout(() => {\n delayComplete = true;\n }, 200);\n if (randomBackout >= 0.75) {\n setTimeout(() => {\n playTick();\n updateSectionColors((randomRotation % 360) * -1);\n }, duration * 1000 * 0.76);\n }\n },\n onUpdate: () => {\n const currentRotation = gsap.getProperty(pointerRef.current, \"rotation\") % 360;\n\n if (delayComplete) {\n checkAndPlayTick(currentRotation);\n }\n },\n onComplete: () => {\n const currentRotation = gsap.getProperty(pointerRef.current, \"rotation\") % 360;\n updateSectionColors(currentRotation, selectedColor);\n if (spinState?.spinnerLocation === 2 && !bonus) {\n gsap.to(pointerRef.current, {\n rotation: 0,\n duration: 0.0,\n\n delay: 1,\n onComplete: () => {\n setBonus(true);\n setTimeout(() => {\n playBonus();\n }, 1950);\n setTimeout(() => {\n setShowSuccess(true);\n setAllowClose(true);\n }, 6000);\n playHeartbeat();\n },\n });\n } else {\n setTimeout(() => {\n setShowSuccess(true);\n }, 2000);\n }\n setAllowClose(true);\n playWin();\n },\n });\n }\n }, [spin, bonus]);\n\n useEffect(() => {\n if (spinState) {\n handleSpin();\n }\n }, [spinState]);\n\n useEffect(() => {\n if (bonus) setAllowClose(false);\n }, [bonus]);\n\n return (\n {text}
\n \n
\n );\n};\nexport default Spinner;\n","import Carousel from \"./carousel\";\nimport React, { useState, useEffect } from \"react\";\nimport Spinner from \"./spinner\";\nimport { withRouter } from \"utils/withRouter\";\nimport { connect } from \"react-redux\";\nimport { getGame, loadSpinReward, loadSpinRewardsList, loadSlotRewardsList, loadSloReward } from \"store/game\";\nimport Skeleton from \"react-loading-skeleton\";\nimport LoaderImg from \"common/loaderImag\";\nimport ConfettiJSON from \"../include/confetti.json\";\nimport Lottie from \"react-lottie-player\";\nimport { createRef } from \"react\";\n\nconst lottieRef = createRef(null);\nconst successIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/winner-tropy-01.png\";\n\nconst MetagameSpinner = ({\n toggle,\n loadSpinRewardsList,\n loadSpinReward,\n handleClose,\n getAvailableDiceCall,\n loadSlotRewardsList,\n loadSloReward,\n}) => {\n const [spin, setSpin] = useState(0);\n const [rewards, setRewards] = useState(null);\n const [spinnerLoading, setSpinnerLoading] = useState(true);\n const [loading, setLoading] = useState(false);\n const [allowClose, setAllowClose] = useState(false);\n const [spinReward, setSpinReward] = useState(null);\n const [slotReward, setSlotReward] = useState(null);\n const [showSuccess, setShowSuccess] = useState(false);\n const [showConfetti, setShowConfetti] = useState(true);\n\n // if allowClose changed to tru then call getAvailableDiceCall\n useEffect(() => {\n if (allowClose) {\n getAvailableDiceCall();\n }\n }, [allowClose]);\n\n //reset the spin slottate to false when the toggle button is clicked\n useEffect(() => {\n if (toggle) {\n loadSlotRewardsList((res) => {\n if (res.status === 200) {\n setRewards(res?.data?.data?.[0]);\n setSpinnerLoading(false);\n }\n });\n } else {\n loadSpinRewardsList((res) => {\n if (res.status === 200) {\n setRewards(res?.data?.data);\n setSpinnerLoading(false);\n }\n });\n }\n }, []);\n useEffect(() => {\n setSpin(0);\n }, [toggle]);\n function handleSpin() {\n if (toggle && spin < 10) {\n setLoading(true);\n loadSloReward((res) => {\n if (res.status === 200) {\n setSlotReward(res?.data?.data);\n }\n setLoading(false);\n });\n setSpin(spin + 1);\n } else if (!toggle && spin === 0) {\n setLoading(true);\n loadSpinReward((res) => {\n if (res.status === 200) {\n setSpinReward(res?.data?.data);\n }\n setLoading(false);\n });\n setSpin(spin + 1);\n }\n }\n useEffect(() => {\n if (showSuccess)\n setTimeout(() => {\n setShowConfetti(false);\n }, 3500);\n }, [showSuccess]);\n\n console.log(\"slot:\", slotReward);\n return (\n \n \n \n
\n\n {newSec?.map((section, index) => (\n \n {spinnerLoading ? (\n <>\n (spin === 1 ? (showSuccess ? handleClose() : null) : handleSpin())}\n >\n {loading ?
\n );\n};\n\nconst mapDispatchToProps = (dispatch) => ({\n loadSpinRewardsList: (callback) => dispatch(loadSpinRewardsList(callback)),\n loadSpinReward: (callback) => dispatch(loadSpinReward(callback)),\n loadSlotRewardsList: (callback) => dispatch(loadSlotRewardsList(callback)),\n loadSloReward: (callback) => dispatch(loadSloReward(callback)),\n});\nconst mapStateToProps = (state) => ({\n getGame: getGame(state),\n});\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(MetagameSpinner));\n","import React from \"react\";\n\nconst IframeComponent = (props) => {\n return (\n <>\n \n
\n ) : !toggle ? (\n \n
\n {showConfetti && (\n {spinReward ? spinReward.value : slotReward?.rewardValue} Dice
\n \n
\n \n You won {spinReward ? spinReward.value : slotReward?.rewardValue} dice throws that you can use in\n the metagame\n
\n\n 
\n
\n \n
\n )}\n \n
\n );\n};\nexport default WonRewards;\n","import React, { useEffect, useState } from \"react\";\nimport { getUser, loadProfile, togglePopupRedux, toggleWalletPopupRedux, checkZRunNft } from \"store/user\";\nimport { withRouter } from \"utils/withRouter\";\nimport { connect } from \"react-redux\";\nimport DiscordChatModal from \"common/sections/discordChat\";\nimport Header from \"common/header\";\nimport DetailsModalCard from \"contests/components/common/detailsModalCard\";\nimport { Accordion } from \"react-bootstrap\";\nimport mixpanel from \"mixpanel-browser\";\nimport HowItWorks from \"contests/components/modals/howItWorks\";\nimport {\n cowitzerEnter,\n getAvailableDice,\n getBoard,\n getCard,\n getGame,\n getposition,\n getUserCardList,\n loadBgGameDetail,\n loadCowitzerLeaderBoard,\n rollDice,\n savePosition,\n} from \"store/game\";\n\nimport { getBoardGame, loadBgGames } from \"store/boardGame\";\n\nimport MetagameSpinner from \"metagameBoosts/metagameSpinner\";\nimport GameSectionBoard from \"./boardGame/gameSections\";\nimport WonRewards from \"metagameBoosts/wonRewards\";\n\nconst cardIcon1 = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/s-new-icon-1.png\";\nconst musicIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/music-000.png\";\nconst mutedIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/mute-icon-001.png\";\nconst sounds = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/Sound.svg\";\nconst musicMuted = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/Vector.svg\";\nconst pageIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/page-icon-02.svg\";\nconst logo = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/burnghostHorizontal.png\";\n\nwindow.MESSAGE_FACTORY = function (name, data) {\n console.log(\"MESSAGE_FACTORY\", name, data);\n return JSON.stringify({\n type: name,\n data: data,\n });\n};\nconst BoardGame = ({\n loadProfile,\n getUser,\n togglePopupRedux,\n toggleWalletPopupRedux,\n checkZRunNft,\n loadBgGames,\n loadBgGameDetail,\n cowitzerEnter,\n loadCowitzerLeaderBoard,\n getGame,\n savePosition,\n getposition,\n rollDice,\n getBoard,\n getAvailableDice,\n getUserCardList,\n getCard,\n getBoardGame,\n ...rest\n}) => {\n window.GC_API = {\n UserBalance: \"UserBalance\",\n GameLoaded: \"GameLoaded\",\n GameStart: \"GameStart\",\n setIsWaitingForNextRound: \"setIsWaitingForNextRound\",\n setIsTimerRunning: \"setIsTimerRunning\",\n setMultiplierValue: \"setMultiplierValue\",\n PlaceBet: \"PlaceBet\",\n Multiplier: \"Multiplier\",\n NewBet: \"NewBet\",\n CashOut: \"CashOut\",\n Last10Rounds: \"Last10Rounds\",\n multiplierValue: \"multiplierValue\",\n startingIn: \"startingIn\",\n mybets: \"mybets\",\n winner: \"winner\",\n dogBet: \"dogBet\",\n gameState: \"gameState\",\n setIsMuted: \"setIsMuted\",\n setIsBackgroundMuted: \"setIsBackgroundMuted\",\n RESET: \"RESET\",\n };\n\n const [showHowItWorks, setShowHowItWorks] = useState(false);\n const [howItWork, setHowItWork] = useState({});\n const [showGame, setShowGame] = useState(false);\n const [bgGameLoaded, setBgGameLoaded] = useState(false);\n const [music, setMusic] = useState(localStorage.getItem(\"musicMuted\") === \"true\");\n const [muted, setMuted] = useState(localStorage.getItem(\"soundMuted\") === \"true\");\n const [openSpinner, setOpenSpinner] = useState(false);\n const [slotSpinner, setSlotsSpinner] = useState(false);\n const [showWonRewards, setShowWonRewards] = useState(\"\");\n const [rewardValue, setRewardValue] = useState(0);\n const [randomGame, setRandomGame] = useState({});\n\n useEffect(() => {\n if (showGame) {\n console.log(\"getBoardGamegetBoardGame\", getBoardGame.bgGames);\n\n // select a random game\n const randomGame = getBoardGame.bgGames;\n setRandomGame(randomGame);\n }\n }, [showGame]);\n\n const toggleMusic = (e) => {\n if (e) e.preventDefault();\n updateSound(\"music\");\n setMusic(!music);\n };\n\n const toggleMute = (e) => {\n if (e) e.preventDefault();\n updateSound(\"sound\");\n setMuted(!muted);\n };\n\n const updateSound = (type) => {\n const iFrame = document.getElementById(\"iframe-container-boardGame\");\n if (!iFrame) return;\n\n if (type === \"music\") {\n const muteStateData = {\n musicMuted: !music,\n soundsMuted: muted,\n };\n // send MuteState message to iframe using MessageFactory\n iFrame.contentWindow.postMessage(window.MESSAGE_FACTORY(\"MuteState\", muteStateData), \"*\");\n\n localStorage.setItem(\"musicMuted\", muteStateData.musicMuted);\n }\n\n if (type === \"sound\") {\n const muteStateData = {\n musicMuted: music,\n soundsMuted: !muted,\n };\n // send MuteState message to iframe setIsBackgroundMuted\n iFrame.contentWindow.postMessage(window.MESSAGE_FACTORY(\"MuteState\", muteStateData), \"*\");\n\n localStorage.setItem(\"soundMuted\", muteStateData.soundsMuted);\n }\n iFrame?.focus();\n };\n const toggleHowItWorks = (e) => {\n if (e) e.preventDefault();\n setShowHowItWorks(!showHowItWorks);\n };\n useEffect(() => {\n loadProfile((res) => {\n if (res.status === 401) window.location.href = \"/contests\";\n });\n const slug = rest.router.params.slug;\n loadBgGameDetail(slug, (res) => {\n setHowItWork(res.data.data);\n setBgGameLoaded(res.data.data);\n });\n }, []);\n\n const rollDiceCall = () => {\n rollDice((res) => {\n getAvailableDiceCall();\n console.log(\"rollDiceCall\", res);\n const iFrame = document.getElementById(\"iframe-container-boardGame\");\n console.log(\"iFrame\", iFrame);\n iFrame.contentWindow.postMessage(\n window.MESSAGE_FACTORY(\"getDiceRoll\", {\n diceRoll: res.data,\n }),\n \"*\",\n );\n });\n };\n\n //getAvailableDiceCall\n const getAvailableDiceCall = () => {\n getAvailableDice((res) => {\n console.log(\"getAvailableDice\", res);\n // seding message to iframe\n const iFrame = document.getElementById(\"iframe-container-boardGame\");\n console.log(\"iFrame\", iFrame);\n iFrame.contentWindow.postMessage(\n window.MESSAGE_FACTORY(\"getAvailableDice\", {\n diceRoll: res.data.data,\n }),\n \"*\",\n );\n });\n };\n\n //get board\n const getBoardCall = () => {\n getBoard((res) => {\n console.log(\"getBoard\", res);\n // seding message to iframe\n const iFrame = document.getElementById(\"iframe-container-boardGame\");\n console.log(\"iFrame\", iFrame);\n iFrame.contentWindow.postMessage(\n window.MESSAGE_FACTORY(\"getBoard\", {\n getBoard: res.data.data,\n }),\n \"*\",\n );\n\n setTimeout(() => {\n getPositionCall();\n }, 1000);\n });\n };\n\n const getPositionCall = () => {\n getposition((res) => {\n console.log(\"getpositiongetposition\", res.data.dailyReward);\n if (!res.data.dailyReward) setOpenSpinner(true);\n\n if (res.data?.data?.positionLog) {\n const iFrame = document.getElementById(\"iframe-container-boardGame\");\n iFrame.contentWindow.postMessage(\n window.MESSAGE_FACTORY(\"getPosition\", {\n position: res.data.data,\n }),\n \"*\",\n );\n }\n });\n };\n\n useEffect(() => {\n if (!bgGameLoaded) return;\n if (process.env.REACT_APP_MIXPANEL == 1) {\n mixpanel?.track(\"Cowitzer Viewed\");\n }\n\n getposition((res) => {\n console.log(\"getpositiongetposition\", res.data.dailyReward);\n if (!res.data.dailyReward) setOpenSpinner(true);\n\n if (res.data?.data?.positionLog) {\n const iFrame = document.getElementById(\"iframe-container-boardGame\");\n iFrame.contentWindow.postMessage(\n window.MESSAGE_FACTORY(\"getPosition\", {\n position: res.data.data,\n }),\n \"*\",\n );\n }\n });\n\n //Loading iframe\n const iFrame = document.getElementById(\"iframe-container-boardGame\");\n\n //setTimeout(() => {\n iFrame.src = bgGameLoaded.url;\n //}, 1000);\n\n window.loading = false;\n window.launched = false;\n\n const savePositionCall = (position) => {\n console.log(\"savePosition\", position);\n savePosition({ position: position }, (res) => {\n console.log(\"savePosition\", res);\n if (res.data.icon.type === \"slot\") {\n setOpenSpinner(true);\n setSlotsSpinner(true);\n } else if (res.data.icon.type == \"spinner\") {\n setOpenSpinner(true);\n } else if (res.data.icon.type === \"dice\" || res.data.icon.type === \"coin\") {\n setShowWonRewards(res.data.icon.type);\n setRewardValue(res.data.icon.prizeValue);\n } else if (res.data.boardMyType.bgGameId) {\n loadBgGames(res.data.boardMyType.bgGameId, (res) => {\n console.log(res);\n setShowGame(true);\n });\n }\n });\n };\n\n const getCardCall = () => {\n getCard((res) => {\n console.log(\"getCardCall\", res);\n // seding message to iframe\n const iFrame = document.getElementById(\"iframe-container-boardGame\");\n console.log(\"iFrame\", iFrame);\n iFrame.contentWindow.postMessage(\n window.MESSAGE_FACTORY(\"getCartRecieved\", {\n data: res.data.data,\n }),\n \"*\",\n );\n });\n };\n\n const getUserCardListCall = () => {\n getUserCardList((res) => {\n console.log(\"getUserCardList\", res);\n // seding message to iframe\n const iFrame = document.getElementById(\"iframe-container-boardGame\");\n console.log(\"iFrame\", iFrame);\n iFrame.contentWindow.postMessage(\n window.MESSAGE_FACTORY(\"getUserCartListRecieved\", {\n diceRoll: res.data.data,\n }),\n \"*\",\n );\n });\n };\n\n const listener = (event) => {\n // Your existing event listener logic\n try {\n if (typeof event.data !== \"string\") return;\n const ourMessage = JSON.parse(event.data);\n console.log(\"111ourMessageourMessage===>\", ourMessage);\n if (ourMessage?.type) {\n switch (ourMessage.type) {\n case \"Position\":\n savePositionCall(ourMessage.data);\n break;\n case \"sendDiceRoll\":\n console.log(\"sendDiceRoll\");\n rollDiceCall();\n break;\n case \"gameLoaded\":\n getAvailableDiceCall();\n getPositionCall();\n getUserCardListCall();\n getBoardCall();\n break;\n case \"getCard\":\n getCardCall();\n break;\n case \"getUserCardList\":\n getUserCardListCall();\n break;\n default:\n\n // Handle other events if needed\n }\n }\n } catch (e) {\n // Ignore exception - not a message for us and couldn't JSON parse it\n console.log(e);\n }\n };\n\n window.addEventListener(\"message\", listener);\n }, [bgGameLoaded]);\n\n useEffect(() => {\n if (!showGame && bgGameLoaded) {\n //Loading iframe\n const iFrame = document.getElementById(\"iframe-container-boardGame\");\n if (!iFrame) return;\n iFrame.src = bgGameLoaded.url;\n }\n }, [showGame]);\n\n useEffect(() => {\n if (!getUser.profile.userProfile.lootBonusCoins) return;\n const iFrame = document.getElementById(\"iframe-container-boardGame\");\n iFrame.contentWindow.postMessage(\n window.MESSAGE_FACTORY(\"userProfile\", {\n lootBonusCoins: getUser.profile.userProfile,\n }),\n \"*\",\n );\n }, [getUser.profile.userProfile]);\n\n console.log(\"Position:\", openSpinner, slotSpinner);\n // User Profile data\n return (\n <>\n \n
\n \n \n
\n {showConfetti && (\n \n {rewardValue} {rewardType}\n
\n \n
\n \n You won {rewardValue} {rewardType} that you can use in the metagame\n
\n\n \n
\n \n
\n )}\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {localStorage.getItem(\"appLogin\") !== \"true\" && (\n
\n \n
\n )}\n {showGame ? (\n \n
\n ) : (\n \n \n {openSpinner && (\n {\n setSlotsSpinner(false);\n setOpenSpinner(false);\n }}\n />\n )}\n {showWonRewards && (\n {\n setShowWonRewards(false);\n setRewardValue(0);\n setShowWonRewards(\"\");\n }}\n rewardType={showWonRewards}\n rewardValue={rewardValue}\n />\n )}\n
\n )}\n Loading...
;\n};\n\nexport default withRouter(AppLogin);\n","import React, { Suspense, useEffect } from \"react\";\nimport { Routes, Route, useLocation } from \"react-router-dom\";\nimport mixpanel from \"mixpanel-browser\";\n// import IndexPage from \"./home/home\";\n// import Winners from \"./contests/winners.jsx\";\nimport { SkeletonTheme } from \"react-loading-skeleton\";\n// import Profile from \"./profile/profile\";\nimport { Web3ReactProvider } from \"@web3-react/core\";\nimport { ethers } from \"ethers\";\nimport { getUser, loadSlides, toggleDiscordModalRedux } from \"store/user\";\n\n// Contests\n// import Contests from \"./contests/contests\";\n// import ContestDetails from \"./contests/contestDetails\";\n// import ActiveContests from \"./contests/activeContestsListing.jsx\";\n\nimport LogRocket from \"logrocket\";\nimport setupLogRocketReact from \"logrocket-react\";\n\n// import NotFound from \"./common/404\";\n// import ServerError from \"./common/500\";\n// import CheckWallet from \"./common/checkWallet\";\n// import CheckWalletError from \"./common/checkWalletError\";\n// import InvalidUserAction from \"./common/invalidUserAction\";\n// import LandscapeOrientation from \"./common/landscapeOrientation\";\nimport { Helmet, HelmetProvider } from \"react-helmet-async\";\nimport { getCookie, setCookie } from \"./utils/cookiesUtilities\";\n// import ConnectNFTAccess from \"./access/connectNFT\";\n\n// Sweepstakes\n// import SweepstakesDetails from \"sweepstakes/sweepsDetails\";\n// import SweepstakeListings from \"sweepstakes/sweepsListing.jsx\";\n// import SweepstakeRulesListings from \"sweepstakes/sweepsRulesListing.jsx\";\n\n// Misc Components\n// import PrivacyPolicy from \"./miscScreens/privacyPolicy\";\n// import TermsAndConditions from \"./miscScreens/termsAndCondition\";\n// import SweepstakesRules from \"./miscScreens/sweepstakesRules.jsx\";\nimport { useState } from \"react\";\n// import UnderMaintance from \"./common/503\";\n\nimport { connect } from \"react-redux\";\nimport lazyWithPreload from \"react-lazy-with-preload\";\n// import GameDemo from \"gameDemo/gameDemo\";\nimport BoardGame from \"container/boardGame\";\nimport { metaMask, metaMaskHooks } from \"web3/connectors/metaMask\";\nimport { coinbaseWallet, coinbaseWalletHooks } from \"web3/connectors/coinbase\";\nimport AppLogin from \"appLogin\";\n// import Cookies from \"common/cookies.jsx\";\n// import CrashGame from \"container/crashGame.jsx\";\n// import CowitzerGame from \"container/cowitzerGame.jsx\";\n// import OpenLootbox from \"lootbox/openLootbox.jsx\";\n// import Leaderboard from \"leaderboard/leaderboard.jsx\";\n\nconst IndexPage = lazyWithPreload(() => import(\"./home/home\"));\nconst Winners = lazyWithPreload(() => import(\"./contests/winners.jsx\"));\nconst Profile = lazyWithPreload(() => import(\"./profile/profile\"));\nconst Contests = lazyWithPreload(() => import(\"./contests/contests\"));\n\nconst ContestDetails = lazyWithPreload(() => import(\"./contests/contestDetails\"));\n\nconst ActiveContests = lazyWithPreload(() => import(\"./contests/activeContestsListing.jsx\"));\nconst NotFound = lazyWithPreload(() => import(\"./common/404\"));\n\nconst ServerError = lazyWithPreload(() => import(\"./common/500\"));\nconst CheckWallet = lazyWithPreload(() => import(\"./common/checkWallet\"));\nconst CheckWalletError = lazyWithPreload(() => import(\"./common/checkWalletError\"));\nconst InvalidUserAction = lazyWithPreload(() => import(\"./common/invalidUserAction\"));\nconst LandscapeOrientation = lazyWithPreload(() => import(\"./common/landscapeOrientation\"));\n\nconst ConnectNFTAccess = lazyWithPreload(() => import(\"./access/connectNFT\"));\n// Sweepstakes\nconst SweepstakesDetails = lazyWithPreload(() => import(\"sweepstakes/sweepsDetails\"));\n// const SweepstakeListings = lazyWithPreload(() => import(\"sweepstakes/sweepsListing.jsx\"));\nconst SweepstakeRulesListings = lazyWithPreload(() => import(\"sweepstakes/sweepsRulesListing.jsx\"));\n\n// Misc Components\nconst PrivacyPolicy = lazyWithPreload(() => import(\"./miscScreens/privacyPolicy\"));\nconst TermsAndConditions = lazyWithPreload(() => import(\"./miscScreens/termsAndCondition\"));\n\nconst SweepstakesRules = lazyWithPreload(() => import(\"./miscScreens/sweepstakesRules.jsx\"));\nconst UnderMaintance = lazyWithPreload(() => import(\"./common/503\"));\nconst Cookies = lazyWithPreload(() => import(\"common/cookies.jsx\"));\nconst CrashGame = lazyWithPreload(() => import(\"container/crashGame.jsx\"));\n\nconst CowitzerGame = lazyWithPreload(() => import(\"container/cowitzerGame.jsx\"));\nconst OpenLootbox = lazyWithPreload(() => import(\"lootbox/openLootbox.jsx\"));\n// const Leaderboard = lazyWithPreload(() => import(\"leaderboard/leaderboard.jsx\"));\nconst Roadmap = lazyWithPreload(() => import(\"roadmap/roadmap\"));\nconst About = lazyWithPreload(() => import(\"about/about\"));\nconst GameDemo = lazyWithPreload(() => import(\"gameDemo/gameDemo\"));\n\nLogRocket.init(process.env.REACT_APP_LOGROCKET_ID, {\n mergeIframes: true,\n childDomains: [\"https://dev-games.burnghost.com\"],\n});\nif (process.env.REACT_APP_MIXPANEL === \"1\") {\n mixpanel.init(process.env.REACT_APP_MIXPANEL_TOKEN, {\n debug: true,\n track_pageview: true,\n persistence: \"localStorage\",\n });\n}\nsetupLogRocketReact(LogRocket);\n\nconst getLibrary = (provider) => {\n const library = new ethers.providers.Web3Provider(provider);\n library.pollingInterval = 8000; // frequency provider is polling\n return library;\n};\n\nconst App = ({ getUser, toggleDiscordModalRedux, loadSlides }) => {\n const location = useLocation();\n const themeMode = getCookie(\"themeMode\");\n const [transitionStage, setTransistionStage] = useState(\"fadeInTransition\");\n\n const [displayLocation, setDisplayLocation] = React.useState(location);\n\n //preload pages\n useEffect(() => {\n IndexPage?.preload();\n // SweepstakeListings?.preload();\n Contests?.preload();\n Winners?.preload();\n // Leaderboard?.preload();\n Profile?.preload();\n CheckWallet?.preload();\n CheckWalletError?.preload();\n\n ActiveContests?.preload();\n ContestDetails?.preload();\n UnderMaintance?.preload();\n InvalidUserAction?.preload();\n ServerError?.preload();\n NotFound?.preload();\n PrivacyPolicy?.preload();\n TermsAndConditions?.preload();\n ConnectNFTAccess?.preload();\n\n SweepstakesDetails?.preload();\n SweepstakeRulesListings?.preload();\n SweepstakesRules?.preload();\n\n CrashGame?.preload();\n CowitzerGame?.preload();\n OpenLootbox?.preload();\n LandscapeOrientation?.preload();\n Cookies?.preload();\n Roadmap?.preload();\n About?.preload();\n GameDemo?.preload();\n if (location.pathname === \"/\") loadSlides();\n }, []);\n\n useEffect(() => {\n if (\"/game-result-new\" === location.pathname) {\n if (location !== displayLocation) setTransistionStage(\"fadeOutTransition\");\n } else {\n setDisplayLocation(location);\n }\n }, [location, displayLocation]);\n\n //ScrollToTop\n useEffect(() => {\n window.scrollTo(0, 0);\n let _hsq = (window._hsq = window._hsq || []);\n _hsq.push([\"setPath\", location.pathname]);\n _hsq.push([\"trackPageView\"]);\n }, [location.pathname]);\n\n const cookiesShown = getCookie(\"notifyCookies\");\n const connectors = [\n [metaMask, metaMaskHooks],\n [coinbaseWallet, coinbaseWalletHooks],\n ];\n return (\n\n 
\n
\n );\n};\n\nexport default AlertClose;\n","import * as React from \"react\";\nimport * as Sentry from \"@sentry/react\";\nimport { BrowserTracing } from \"@sentry/tracing\";\n\nimport { BrowserRouter } from \"react-router-dom\";\n\nimport \"@fortawesome/fontawesome-svg-core/styles.css\";\nimport \"rc-slider/assets/index.css\";\nimport \"react-toastify/dist/ReactToastify.css\";\nimport \"react-loading-skeleton/dist/skeleton.css\";\nimport { injectStyle } from \"react-toastify/dist/inject-style\";\n\nimport App from \"./App\";\nimport { Provider } from \"react-redux\";\nimport configureStore from \"./store/configureStore\";\nimport { createRoot } from \"react-dom/client\";\nimport { ToastContainer } from \"react-toastify\";\nimport { setCookie } from \"./utils/cookiesUtilities\";\nimport AlertClose from \"./common/alert/alertClose\";\nimport { v4 as uuidv4 } from \"uuid\";\n\nconst container = document.getElementById(\"root\");\nconst root = createRoot(container);\nconst store = configureStore();\n\nconst deviceId = localStorage.getItem(\"deviceId\");\nif (!deviceId) {\n localStorage.setItem(\"deviceId\", uuidv4());\n}\nconst themeMode = \"dark\";\nsetCookie(\"themeMode\", themeMode);\n\nSentry.init({\n dsn: process.env.REACT_APP_SENTRY_DSN,\n integrations: [new BrowserTracing()],\n\n // Set tracesSampleRate to 1.0 to capture 100%\n // of transactions for performance monitoring.\n // We recommend adjusting this value in production\n tracesSampleRate: 1.0,\n});\n\n// TOASTIFY inject call\ninjectStyle();\nroot.render(\n