\n setNav1(slider)}\n className=\"pb-0 tuts-thumbnail-slider w-100\"\n {...options1}\n asNavFor={nav2}\n key=\"hiw-slider\"\n >\n {type === \"onboarding\" && (\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 React, { Component } from \"react\";\nimport { withRouter } from \"../utils/withRouter\";\nimport { connect } from \"react-redux\";\nimport { subscribeNewsLetter } from \"../home/apis\";\nimport LoaderImg from \"./loaderImag\";\nimport HowItWorks from \"./howItWorks\";\n\nimport { Link } from \"react-router-dom\";\nimport { prepareData } from \"./gtmDatalayer\";\nimport { getCookie } from \"utils/cookiesUtilities\";\n\n// Images\nconst tick = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/tick-001.svg\";\nconst openSeaIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/open-sea-white.svg\";\nclass Header extends Component {\n state = {\n email: \"\",\n loading: false,\n showHowItWorks: false,\n confirmed: false,\n };\n\n componentDidMount() {}\n toggleHowItWorks = (e) => {\n if (e) e.preventDefault();\n this.setState({\n showHowItWorks: !this.state.showHowItWorks,\n });\n };\n render() {\n return (\n <>\n {\" \"}\n {\" \"}\n \n
\n )}\n \n
\n \n
\n \n 
\n
\n \n
\n \n 
\n
\n \n
\n \n \n 
\n
\n \n setNav2(slider)}\n {...options2}\n asNavFor={nav1}\n className=\"pb-0 tuts-text-slider w-100\"\n key=\"hiw-slider-2\"\n >\n {type === \"onboarding\" && (\n
\n \n {\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: \"2\", // dynamic value\n }),\n );\n e.preventDefault();\n nav1.slickNext();\n }}\n >\n NEXT\n \n
\n )}\n Welcome to Burn Ghost
\n \n Level up by playing fast, fun, & familiar original games. Just pick a contest, use your game arcade\n coins to enter and rank the leaderboard.\n \n \n\n {\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: \"2\", // dynamic value\n }),\n );\n e.preventDefault();\n nav1.slickNext();\n }}\n >\n NEXT\n \n
\n PLAY ORIGINAL GAMES
\n \n Immerse yourself in our exciting orignal game lineup, play for free with arcade coins awarded daily!\n \n \n\n {\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: \"2\", // dynamic value\n }),\n );\n e.preventDefault();\n nav1.slickNext();\n }}\n >\n NEXT\n \n
{\" \"}\n EVERYONE’S A WINNER
\n \n Regardless of your game score, you're always a winner here. Even last place on the leaderboard gets\n XP.\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: \"How to play modal_complete\",\n }),\n );\n }\n if (process.env.REACT_APP_MIXPANEL === \"1\") {\n mixpanel?.track(\"How to play modal_complete\");\n }\n toggleModal(e);\n }}\n >\n DISMISS\n \n
\n \n OPEN LOOT BOXES - WIN PRIZES
\n \n Open Loot Boxes & win real prizes. Use Loot Bucks to open Loot Boxes for your chances to score big\n with our physical & digital prizes!\n \n \n\n\n 
\n
\n {props.message}
\n \n );\n};\n\nexport default AlertSuccess;\n","import React, { Component } from \"react\";\nimport { getCookie } from \"../utils/cookiesUtilities\";\nimport Modal from \"react-bootstrap/Modal\";\nimport { getUser, loadProfile, loadTransactions, redeemToken, updateImage, updateProfile } from \"../store/user\";\nimport { connect } from \"react-redux\";\nimport { withRouter } from \"../utils/withRouter\";\nimport ErrorPopup from \"../common/errorPopup\";\nimport LoaderImg from \"../common/loaderImag\";\n\n//Images\nconst closeIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/close-icon.svg\";\nconst creditIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/credit-icon.svg\";\n\nclass RedeemReward extends Component {\n state = {\n showPopup: true,\n error: \"\",\n availableOption: [],\n selected: \"\",\n loading: false,\n };\n availableOption = [5000, 4000, 3000, 2000, 1000, 750, 500, 250, 100];\n setError = (error) => this.setState({ error });\n componentDidUpdate = (prevProps, prevState) => {\n if (this.props.tokenId && this.props.tokenId !== prevProps.tokenId) {\n var newData = this.availableOption.filter(\n (ed) => ed <= this.props.getUser.profile.data.find((eds) => eds.tokenId === this.props.tokenId).creditAmount,\n );\n\n if (newData.length === 1) {\n if (this.props.getUser.profile.data.find((eds) => eds.tokenId === this.props.tokenId).creditAmount > 100)\n newData = [\n this.props.getUser.profile.data.find((eds) => eds.tokenId === this.props.tokenId).creditAmount,\n newData[0],\n ];\n }\n if (newData.length === 0) {\n if (this.props.getUser.profile.data.find((eds) => eds.tokenId === this.props.tokenId).creditAmount > 0)\n newData.push(this.props.getUser.profile.data.find((eds) => eds.tokenId === this.props.tokenId).creditAmount);\n }\n\n this.setState({ availableOption: newData, selected: newData[0] });\n }\n };\n\n // Redeem reward function\n redeemReward = (e) => {\n e.preventDefault();\n this.setState({ loading: true });\n this.props.redeemToken({ token: this.state.selected, tokenId: this.props.tokenId }, (res) => {\n this.setState({ loading: false });\n this.props.togglePopup();\n if (res.status !== 200) {\n this.setError(res.data.message);\n }\n // GET API's for loading all the transactions and profile\n this.props.loadTransactions();\n this.props.loadProfile();\n });\n };\n render() {\n const themeMode = getCookie(\"themeMode\");\n return (\n <>\n \n
\n \n {this.state.error && \n
\n\n ADVANCED REDEMPTION
\n\n 
\n
\n \n \n
\n GAME CREDITS\n
\n \n 
{this.state.selected}\n
\n GAME CREDITS\n \n {this.state.availableOption.slice(0, 4).map((item, index) => (\n
\n {this.state.loading ? (\n this.setState({ selected: item })}>\n
\n ))}\n \n \n
\n ) : (\n this.props.tokenId &&\n this.props.getUser.profile.data.find((eds) => eds.tokenId === this.props.tokenId) && (\n \n REDEEM {this.state.selected}/\n {this.props.getUser.profile.data.find((eds) => eds.tokenId === this.props.tokenId) &&\n this.props.getUser.profile.data.find((eds) => eds.tokenId === this.props.tokenId).creditAmount}{\" \"}\n CREDITS\n
\n\n \n REDEEM\n \n
\n )\n )}\n \n REDEEM {this.state.selected}/\n {this.props.getUser.profile.data.find((eds) => eds.tokenId === this.props.tokenId) &&\n this.props.getUser.profile.data.find((eds) => eds.tokenId === this.props.tokenId)\n .creditAmount}{\" \"}\n CREDITS\n
\n\n \n {loading ?
\n
\n \n {loading ?
\n \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 localStorage.removeItem(\"referralCode\");\n localStorage.removeItem(\"campaignCode\");\n this.disconnect();\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push(\n prepareData({\n event: \"logout\", // fixed value\n }),\n );\n if (process.env.REACT_APP_MIXPANEL == 1) mixpanel?.track(\"Logout\");\n }}\n >\n 
\n Logout\n \n )}\n\n
\n \n {loading ? (\n
\n {/* \n {loading ? (\n <>\n
*/}\n \n
\n \n
\n {this.state.count?.played ?? 0}
\n GAMES PLAYED
\n \n
\n \n )}\n \n
\n {this.state.count?.sweepsStakesWon ?? 0}
\n SWEEPSTAKES WON
\n \n {loading ?
\n {connectedWallet ? (\n !loading && (\n \n {\n e.preventDefault();\n navigator.clipboard.writeText(connectedWallet.walletAddress);\n toast(
\n {truncateAddress(connectedWallet.walletAddress)}\n \n
\n )\n ) : (\n <>\n {!profileLoaded ? (\n \n {\n e.preventDefault();\n }}\n disabled\n >\n Your Wallet Address\n \n
\n )}\n \n )}\n\n \n
\n \n {loading ?
\n {loading ? (\n \n \n {userProfile.twitter}\n \n )\n )}\n {loading ? (\n \n {userProfile.instagram}\n \n )\n )}\n {loading ? (\n {\n e.preventDefault();\n navigator.clipboard.writeText(userProfile.website);\n toast(
\n {!loading && (\n \n {loading ? (\n {\n e.preventDefault();\n this.setState({ updateModal: true });\n }}\n >\n 
\n \n )}\n
\n \n this.setState({ updateModal: false })}\n >\n \n
\n \n
\n \n \n \n \n );\n }\n}\n\nconst mapDispatchToProps = (dispatch) => ({\n updateProfile: (data, callback) => dispatch(updateProfile(data, callback)),\n updateImage: (data, callback) => dispatch(updateImage(data, callback)),\n loadProfile: () => dispatch(loadProfile()),\n disconnectWallet: (callback) => dispatch(disconnectWallet(callback)),\n togglePopupRedux: (data) => dispatch(togglePopupRedux(data)),\n toggleWalletPopupRedux: (data) => dispatch(toggleWalletPopupRedux(data)),\n});\nconst mapStateToProps = (state) => ({\n getUser: getUser(state),\n});\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(ProfileGrid));\n","import React from \"react\";\r\n\r\n// Redux\r\nimport { connect } from \"react-redux\";\r\nimport { getUser, transferAsset, loadAvailableTickets, loadTransactions } from \"store/user\";\r\n\r\n// Images\r\nconst transferImg = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/transfer-1.png\";\r\nconst tetherIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/tether-icon.svg\";\r\n\r\nconst WithdrawInProgress = ({ amount }) => {\r\n return (\r\n <>\r\n EDIT PROFILE
\n\n You can set preferred display name, create your branded profile URL and manage other personal settings\n in your Burn Ghost profile.\n
\n\n
\n \n
\n \n
\n \n \n
\n \n @\n {\n this.onChange(e);\n }}\n value={this.state.data.userName}\n placeholder=\"Username\"\n onBlur={(e) => {\n if (this.state.data.userName?.length > 0 && this.state.data.userName?.length < 4) {\n this.setState({\n errorField: \"userName\",\n });\n }\n }}\n maxLength={15}\n />\n
{\" \"}\n {this.state.errorField === \"userName\" && (\n \n {\"Username must be of minimum 4 characters and maximum 15 characters. \"}\n
\n )}\n {this.state.errorField === \"userName\" && (\n {this.state.error}
\n )}\n \n \n
\n {\"Email must be a valid email\"}
\n )}\n \n \n
\n \n {\" \"}\n
\n\n \n \n {this.state.data && this.state.data.description ? this.state.data.description.length : 0}\n \n / 160\n
\n \n \n
\n \n @\n
\n \n \n
\n \n @\n
\n \n \n
\n \n @\n
\n \n \n \n We recommend an image
\n {this.state.errorField === \"image\" && (\n e.preventDefault()}\n >\n
\n \n {this.state.loadingImages ? (\n
\n \n We recommend an image
of at least 300x300. Gifs work too. Max 5mb.\n
\n {this.state.errorField === \"image\" && (\n {this.state.error}
\n )}\n {this.state.loadingImages ? (\n \n {this.state.loading ? (\n e.preventDefault()}\n >\n 0\n ? \"btn btn-default btn-md btn-block common-btn-gradient\"\n : \"btn btn-default btn-md btn-block disabled common-btn-gradient\"\n }\n onClick={this.onSubmit}\n >\n UPDATE PROFILE\n \n )}\n
\n \r\n
\r\n Confirmation
\r\n\r\n
\r\n \r\n \r\n );\r\n};\r\nconst mapDispatchToProps = (dispatch) => ({\r\n transferAsset: (data, callback) => dispatch(transferAsset(data, callback)),\r\n loadAvailableTickets: () => dispatch(loadAvailableTickets()),\r\n loadTransactions: () => dispatch(loadTransactions()),\r\n});\r\nconst mapStateToProps = (state) => ({\r\n getUser: getUser(state),\r\n});\r\nexport default connect(mapStateToProps, mapDispatchToProps)(WithdrawInProgress);\r\n","import React from \"react\";\r\n\r\n// Redux\r\nimport { connect } from \"react-redux\";\r\nimport { getUser, transferAsset, loadAvailableTickets, loadTransactions } from \"store/user\";\r\n\r\n// Images\r\n\r\nconst successIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/crypto-wallet-Success-1.png\";\r\nconst closeIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/coins-close-icon.svg\";\r\n\r\nconst WithdrawComplete = ({ toggleModal, responseData }) => {\r\n const url = new URL(process.env.REACT_APP_SITE_URL).hostname;\r\n const parts = url.split(\".\");\r\n const server = parts[0];\r\n return (\r\n <>\r\n \r\n
\r\n Transfer in Progress
\r\n \r\n
\r\n Your prize has been successfully withdrawn and transferred to your external wallet.
\r\n\r\n 
\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n Confirmation
\r\n \r\n\r\n
\r\n \r\n
\r\n Transfer Complete!
\r\n \r\n
\r\n Your prize has been successfully withdrawn and transferred to your external wallet.
\r\n\r\n 
\r\n
\r\n \r\n \r\n Confirm\r\n \r\n
{\" \"}\r\n \r\n );\r\n};\r\nconst mapDispatchToProps = (dispatch) => ({\r\n transferAsset: (data, callback) => dispatch(transferAsset(data, callback)),\r\n loadAvailableTickets: () => dispatch(loadAvailableTickets()),\r\n loadTransactions: () => dispatch(loadTransactions()),\r\n});\r\nconst mapStateToProps = (state) => ({\r\n getUser: getUser(state),\r\n});\r\nexport default connect(mapStateToProps, mapDispatchToProps)(WithdrawComplete);\r\n","import React, { useState, useRef } from \"react\";\r\n\r\n// Redux\r\nimport { connect } from \"react-redux\";\r\nimport { getUser, transferAsset, loadAvailableTickets, loadTransactions, resetPassCode } from \"store/user\";\r\nimport LoaderImg from \"common/loaderImag\";\r\n\r\n// Images\r\nconst closeIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/coins-close-icon.svg\";\r\nconst lockIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/locked-with-tick-clay-1.png\";\r\n\r\nconst ResetPasskey = ({ toggleModal, resetPassCode }) => {\r\n // OTP Refs\r\n const aORef = useRef();\r\n const bORef = useRef();\r\n const cORef = useRef();\r\n const dORef = useRef();\r\n const eORef = useRef();\r\n\r\n // Passcode Refs\r\n const aRef = useRef();\r\n const bRef = useRef();\r\n const cRef = useRef();\r\n const dRef = useRef();\r\n const eRef = useRef();\r\n\r\n // States\r\n const [page, setPage] = useState(1);\r\n const [loading, setLoading] = useState(false);\r\n const [otp, setotp] = useState({\r\n otp1: \"\",\r\n otp2: \"\",\r\n otp3: \"\",\r\n otp4: \"\",\r\n });\r\n const [data, setData] = useState({\r\n passKey1: \"\",\r\n passKey2: \"\",\r\n passKey3: \"\",\r\n passKey4: \"\",\r\n });\r\n const [errors, setErrors] = useState({});\r\n\r\n // Onchange function to handle change of number in \"Enter Verification Code\" screen\r\n const onChange = async (e) => {\r\n const { name, value } = e.target;\r\n const newErr = structuredClone(errors);\r\n if (newErr.otp) delete newErr.otp;\r\n const data = structuredClone(otp);\r\n\r\n if (name.includes(\"otp\") && ((value !== \"\" && data[name] !== \"\") || (value !== \"\" && isNaN(parseInt(value)))))\r\n return;\r\n delete newErr[name];\r\n\r\n let multiVal = value?.split(\"\");\r\n if (value === \"\") {\r\n data[name] = \"\";\r\n setotp(data);\r\n } else if (name === \"otp1\" && value?.length > 1) {\r\n let multiVal = value?.split(\"\");\r\n data.otp1 = multiVal[0];\r\n data.otp2 = multiVal[1];\r\n data.otp3 = multiVal[2];\r\n data.otp4 = multiVal[3];\r\n eORef.current.focus();\r\n setotp(data);\r\n } else if (value?.length > 1) {\r\n data[name] = multiVal[0];\r\n } else if (value?.length === 1) {\r\n data[name] = value;\r\n setotp(data);\r\n // Change focus to the next input after entering number in the current input\r\n if (name === \"otp1\") bORef.current.focus();\r\n if (name === \"otp2\") cORef.current.focus();\r\n if (name === \"otp3\") dORef.current.focus();\r\n if (name === \"otp4\") eORef.current.focus();\r\n } else {\r\n setotp(data);\r\n }\r\n\r\n setErrors(newErr);\r\n };\r\n\r\n // Onchange function to handle change of number in \"Reset Pass Key\" screen\r\n const onChange2 = async (e) => {\r\n const { name, value } = e.target;\r\n const newErr = structuredClone(errors);\r\n if (newErr.passKey) delete newErr.passKey;\r\n const passKey = structuredClone(data);\r\n\r\n if (\r\n name.includes(\"passKey\") &&\r\n ((value !== \"\" && passKey[name] !== \"\") || (value !== \"\" && isNaN(parseInt(value))))\r\n )\r\n return;\r\n delete newErr[name];\r\n\r\n let multiVal = value?.split(\"\");\r\n if (value === \"\") {\r\n passKey[name] = \"\";\r\n setData(passKey);\r\n } else if (name === \"passKey1\" && value?.length > 1) {\r\n let multiVal = value?.split(\"\");\r\n passKey.passKey1 = multiVal[0];\r\n passKey.passKey2 = multiVal[1];\r\n passKey.passKey3 = multiVal[2];\r\n passKey.passKey4 = multiVal[3];\r\n eRef.current.focus();\r\n setData(passKey);\r\n } else if (value?.length > 1) {\r\n passKey[name] = multiVal[0];\r\n } else if (value?.length === 1) {\r\n passKey[name] = value;\r\n setData(passKey);\r\n // Change focus to the next input after entering number in the current input\r\n if (name === \"passKey1\") bRef.current.focus();\r\n if (name === \"passKey2\") cRef.current.focus();\r\n if (name === \"passKey3\") dRef.current.focus();\r\n if (name === \"passKey4\") eRef.current.focus();\r\n } else {\r\n setData(passKey);\r\n }\r\n\r\n setErrors(newErr);\r\n };\r\n\r\n // Handle button click to reset pass key\r\n const handleSubmit = (e) => {\r\n if (e) e.preventDefault();\r\n if (loading) return;\r\n setLoading(true);\r\n const passcode = data.passKey1 + data.passKey2 + data.passKey3 + data.passKey4;\r\n const otpCode = otp.otp1 + otp.otp2 + otp.otp3 + otp.otp4;\r\n const payLoad = {\r\n passcode,\r\n otp: otpCode,\r\n };\r\n\r\n // Reset Pass Key API call\r\n resetPassCode(payLoad, (res) => {\r\n setLoading(false);\r\n if (res?.status == 200) {\r\n setPage(3); // Change to success screen\r\n } else {\r\n const newErrors = {};\r\n if (res?.data?.message === \"Invalid OTP\") {\r\n // Check for error to change to the \"Enter Verification Code\" screen\r\n newErrors.otp = res?.data?.message;\r\n setPage(1);\r\n } else {\r\n newErrors.passKey = res?.data?.message;\r\n }\r\n setErrors(newErrors);\r\n }\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n <>\r\n \r\n \r\n View on PolygonScan\r\n \r\n
\r\n \r\n
\r\n {page === 3 ? \"Reset Complete\" : \"Reset Pass Key\"}
\r\n \r\n\r\n {page === 1 ? (\r\n
\r\n ) : page === 2 ? (\r\n \r\n
\r\n Enter Verification Code
\r\n \r\n
\r\n \r\n Enter the 4 digit code that was delivered to your email to finish resetting your pass key. This code\r\n will expire in 15 minutes.\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {errors.otp && {errors.otp}
}\r\n \r\n
\r\n \r\n ) : (\r\n Enter New Pass Key
\r\n \r\n
\r\n Enter a new 4 digit Pass Key to secure your Burn Ghost wallet.
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {errors.passKey && {errors.passKey}
}\r\n \r\n
\r\n )}\r\n \r\n Success
\r\n \r\n
\r\n Your Pass Key has been successfully reset!
\r\n\r\n 
\r\n
\r\n \r\n {page === 1 ? (\r\n {\r\n e.preventDefault();\r\n setPage(2);\r\n }}\r\n >\r\n {loading ? \r\n {loading ?
\r\n \r\n \r\n );\r\n};\r\nconst mapDispatchToProps = (dispatch) => ({\r\n transferAsset: (data, callback) => dispatch(transferAsset(data, callback)),\r\n loadAvailableTickets: () => dispatch(loadAvailableTickets()),\r\n loadTransactions: () => dispatch(loadTransactions()),\r\n resetPassCode: (data, callback) => dispatch(resetPassCode(data, callback)),\r\n});\r\nconst mapStateToProps = (state) => ({\r\n getUser: getUser(state),\r\n});\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ResetPasskey);\r\n","import React, { useState, useRef } from \"react\";\r\n\r\n// Redux\r\nimport { connect } from \"react-redux\";\r\nimport { getUser, transferAsset, loadAvailableTickets, loadTransactions, sendPassCodeOTP } from \"store/user\";\r\n\r\n// Components\r\nimport LoaderImg from \"common/loaderImag\";\r\nimport WithdrawInProgress from \"./withdrawInProgress\";\r\nimport WithdrawComplete from \"./withdrawComplete\";\r\nimport ResetPasskey from \"./resetPasskey\";\r\n\r\nconst closeIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/coins-close-icon.svg\";\r\n\r\nconst WithdrawConfirmation = ({\r\n transferAsset,\r\n loadAvailableTickets,\r\n amount,\r\n walletAddress,\r\n tokenData,\r\n toggleModal,\r\n loadTransactions,\r\n sendPassCodeOTP,\r\n setTab,\r\n setMainErrors,\r\n}) => {\r\n // Refs\r\n const aRef = useRef();\r\n const bRef = useRef();\r\n const cRef = useRef();\r\n const dRef = useRef();\r\n const eRef = useRef();\r\n\r\n // States\r\n const [page, setPage] = useState(1);\r\n const [responseData, setResponseData] = useState(1);\r\n const [loading, setLoading] = useState(false);\r\n const [loadingReset, setLoadingReset] = useState(false);\r\n const [data, setData] = useState({\r\n passKey1: \"\",\r\n passKey2: \"\",\r\n passKey3: \"\",\r\n passKey4: \"\",\r\n });\r\n const [errors, setErrors] = useState({});\r\n\r\n // Onchange function handle for text input text changes\r\n const onChange = async (e) => {\r\n const { name, value } = e.target;\r\n const newErr = structuredClone(errors);\r\n if (newErr.passKey) delete newErr.passKey;\r\n const passKey = structuredClone(data);\r\n\r\n if (\r\n name.includes(\"passKey\") &&\r\n ((value !== \"\" && passKey[name] !== \"\") || (value !== \"\" && isNaN(parseInt(value))))\r\n )\r\n return;\r\n delete newErr[name];\r\n\r\n let multiVal = value?.split(\"\");\r\n if (value === \"\") {\r\n passKey[name] = \"\";\r\n setData(passKey);\r\n } else if (name === \"passKey1\" && value?.length > 1) {\r\n let multiVal = value?.split(\"\");\r\n passKey.passKey1 = multiVal[0];\r\n passKey.passKey2 = multiVal[1];\r\n passKey.passKey3 = multiVal[2];\r\n passKey.passKey4 = multiVal[3];\r\n eRef.current.focus();\r\n setData(passKey);\r\n } else if (value?.length > 1) {\r\n passKey[name] = multiVal[0];\r\n } else if (value?.length === 1) {\r\n passKey[name] = value;\r\n setData(passKey);\r\n // Change focus to the next input after entering number in the current input\r\n if (name === \"passKey1\") bRef.current.focus();\r\n if (name === \"passKey2\") cRef.current.focus();\r\n if (name === \"passKey3\") dRef.current.focus();\r\n if (name === \"passKey4\") eRef.current.focus();\r\n } else {\r\n setData(passKey);\r\n }\r\n\r\n setErrors(newErr);\r\n };\r\n\r\n // Handle withdraw after verifying pass key\r\n const handleSubmit = (e) => {\r\n if (e) e.preventDefault();\r\n if (loading) return;\r\n setLoading(true);\r\n setPage(2);\r\n const passcode = data.passKey1 + data.passKey2 + data.passKey3 + data.passKey4; // Convert to single variable\r\n const payLoad = {\r\n passcode,\r\n to: walletAddress,\r\n amount: parseFloat(amount),\r\n currencyId: tokenData?.id,\r\n };\r\n\r\n // Withdraw Asset API call\r\n transferAsset(payLoad, (res) => {\r\n setLoading(false);\r\n if (res?.status == 200) {\r\n setPage(3); // Change screen to success\r\n setResponseData(res?.data); // Data to show on the success screen\r\n loadAvailableTickets(); // Update user Wallet\r\n loadTransactions(); // Update user transactions\r\n } else {\r\n const newErrors = {};\r\n if (res?.data?.message == \"Invalid Pass key\") {\r\n newErrors.passKey = res?.data?.message;\r\n setErrors(newErrors);\r\n setPage(1);\r\n } else {\r\n setMainErrors(res?.data?.message);\r\n setTab(1);\r\n }\r\n }\r\n });\r\n };\r\n return (\r\n <>\r\n {page === 1 ? (\r\n <>\r\n \r\n
\r\n Confirm Transaction
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n Enter Pass Key
\r\n \r\n
\r\n Enter your 4-digit Pass Key to finalize the withdrawal of your assets.
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {errors.passKey && {errors.passKey}
}\r\n \r\n \r\n {loading ?
\r\n \r\n ) : page === 2 ? (\r\n \r\n Forgot your Pass Key?{\" \"}\r\n {loadingReset ? (\r\n {\r\n e.preventDefault();\r\n setLoadingReset(true);\r\n sendPassCodeOTP((res) => {\r\n if (res?.status === 200) {\r\n setPage(4);\r\n } else setErrors(res?.data?.message);\r\n setLoadingReset(false);\r\n });\r\n }}\r\n >\r\n Reset Pass Key\r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n Withdraw {tokenData?.title}
\r\n\r\n
\r\n \r\n
\r\n \r\n {tokenData?.balance?.toLocaleString(undefined, {\r\n minimumFractionDigits: 2,\r\n maximumFractionDigits: 2,\r\n }) ?? 0.0}{\" \"}\r\n {tokenData?.title}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n e.preventDefault()}\r\n />\r\n \r\n
\r\n \r\n
\r\n \r\n Estimated Duration: Up to a few minutes\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n {\r\n setErrors(\"\");\r\n setWalletAddress(e.target.value);\r\n }}\r\n />\r\n
\r\n {errors && (\r\n \r\n 
\r\n
\r\n \r\n {errors}\r\n
\r\n )}\r\n {/* {errors.passKey && {errors.passKey}
} */}\r\n \r\n {\r\n e.preventDefault();\r\n const validAdd = ethers.utils.isAddress(walletAddress);\r\n if (validAdd) {\r\n setTab(2);\r\n } else setErrors(\"Invalid Wallet Address\");\r\n }}\r\n >\r\n Withdraw\r\n \r\n
\r\n \r\n ) : (\r\n \n
\n ) : userProfile?.externalWalletAddress ? (\n \n
\n ) : (\n \n
\n \n ![\"\"](\"/include/images/connected-wallet-icon.svg\")
\n
\n \n \n
\n Connected
\n {truncateAddress(userProfile?.externalWalletAddress)}
\n \n \n {walletDisconnectLoading ?
\n \n \n
\n \n
\n \n
\n {step !== 1 && (\n REDEEM
\nConvert Tickets to USDT
\n\n
\n )}\n\n \n
\n \n 
\n
\n \n
\n\n {step !== 1 && (\n \n
\n \n
\n \n
\n \n 
\n
\n \n
\n 100 TICKETS = $2.00
\n \n
\n )}\n {step === 1 && (\n \n By clicking redeem now - a form will be provided to exchange your current tickets for USDT, delivered\n to the wallet address. Delivery can take up to 24 Hours.\n
\n\n
\n )}\n \n
\n \n
\n \n {\n setErrors(\"\");\n setWalletAddress(e.target.value);\n }}\n />\n
\n {errors && (\n \n \n
\n \n {errors}\n
\n )}\n \n \n {loading ?
\n \n ) : (\n \n
\n Confirmation
\n \n\n
\n \n
\n Request Received!
\n \n
\n We have received your request to exchange your tickets for USDT. Delivery can take up to 24 Hours.
\n\n \n
\n \n \n
\n \n );\n};\n\nconst mapDispatchToProps = (dispatch) => ({\n redeemTickets: (data, callback) => dispatch(redeemTickets(data, callback)),\n loadProfile: () => dispatch(loadProfile()),\n});\n\nexport default withRouter(connect(null, mapDispatchToProps)(TicketRedemptionModal));\n","import React, { Component } from \"react\";\n\nimport {\n getUser,\n loadProfile,\n redeemToken,\n loadNotifications,\n markNotificationAsRead,\n togglePurchaseCoinsRedux,\n changeUnreadCount,\n} from \"store/user\";\nimport { withRouter } from \"utils/withRouter\";\nimport { connect } from \"react-redux\";\n\nimport { Modal } from \"react-bootstrap\";\nimport RedeemReward from \"../../redeemReward\";\nimport Skeleton from \"react-loading-skeleton\";\nimport WithdrawModal from \"../modals/withdrawModal\";\nimport ExternalWalletGrid from \"./externalWalletGrid\";\nimport TicketRedemptionModal from \"../modals/ticketRedemptionModal\";\n// Images\nconst redeemRewardIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/redeem-w.png\";\nconst iconSvg = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/icon_.svg\";\nconst icon1 = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/icon-01.png\";\nconst closeIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/close-icon.svg\";\nconst ticketIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/new-ticket-logo.svg\";\nconst arcadeIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/ne-arcade-logo.svg\";\nconst lootIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/new-loot-logo.svg\";\nconst ticketBlackIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/ticketYellowBlack.svg\";\nconst usdtIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/tether-icon.svg\";\nconst xpAwardIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/xpLogoLight.svg\";\nconst ethIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/ethereum-coin-icon.svg\";\nconst xpIcon = process.env.REACT_APP_WEBSITE_ASSETS_URL + \"images/xp_noborder.svg\";\nclass Rewards extends Component {\n state = {\n error: \"\",\n rewardModal: false,\n showPopup: false,\n tokenId: 0,\n showWithdrawModal: false,\n showRedeemTickets: false,\n tokenData: null,\n };\n setError = (error) => this.setState({ error });\n togglePopup = (e, tokenId) =>\n this.setState({\n showPopup: !this.state.showPopup,\n tokenId: tokenId ? tokenId : 0,\n });\n toggleRedeemTickets = (e) => {\n if (e) e.preventDefault();\n this.setState({ showRedeemTickets: !this.state.showRedeemTickets });\n };\n toggleWithdrawModal = (e) => {\n if (e) e.preventDefault();\n this.setState({\n showWithdrawModal: !this.state.showWithdrawModal,\n });\n };\n\n redeemReward = (e) => {\n // this.props.loaderStart();\n e.preventDefault();\n this.setState({ rewardModal: false });\n this.props.redeemToken({ token: this.props.getUser.profile.data.numberOfTokens }, (res) => {\n // this.props.loaderComplete();\n if (res.status !== 200) {\n this.setError(res.data.message);\n }\n this.props.loadProfile();\n });\n };\n componentDidMount = () => {\n const { unreadCount, notifications } = this.props.getUser;\n if (unreadCount > 0) {\n const data = { ids: notifications.map((n) => n.id) };\n if (data.ids.length > 0) {\n this.props.markNotificationAsRead(data, () => {\n this.props.changeUnreadCount();\n });\n }\n }\n };\n render() {\n const { userProfile, data, connectedWallet } = this.props.getUser.profile;\n const { loading, notifications, availableTickets, usdtBalance, availableTicketsLoading } = this.props.getUser;\n const coinsLoading = availableTicketsLoading || loading;\n return (\n <>\n \n \n {loading ?
\n
\n \n \n {loading ?
\n \n {loading ?
\n )}\n
\n \n
\n \n
\n \n {!coinsLoading && (\n
\n {(coinsLoading || usdtBalance?.length > 0) && connectedWallet?.custodialWallet === 1 && (\n \n
\n )}\n BURN GHOST CREDITS
\n \n {/*
\n \n
*/}\n \n
\n {availableTickets > 0 && userProfile?.redeemTicketStatus !== 2 && (\n \n {coinsLoading ? (\n
\n \n
\n \n {coinsLoading ? (\n
\n {coinsLoading ?
\n \n \n {userProfile?.redeemTicketStatus ? \"Pending Request\" : \"REDEEM\"}\n \n
\n )}\n \n
\n \n
\n \n {coinsLoading ? (\n 
\n \n )}\n
\n \n
\n \n {coinsLoading ?
\n {coinsLoading ?
\n \n
\n \n
\n \n {coinsLoading ? (\n 
\n \n )}\n
\n \n
\n \n {coinsLoading ? (\n
\n {coinsLoading ?
\n \n
\n \n
\n \n {coinsLoading ? (\n 
\n \n )}\n
\n \n
\n \n {coinsLoading ?
\n {coinsLoading ?
\n \n {!coinsLoading && (\n
\n )}\n \n
\n )}\n PRIZES
\n \n {coinsLoading ? (\n
\n \n
\n ) : (\n usdtBalance?.map((token, index) => (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n ))\n )}\n \n
\n {connectedWallet.custodialWallet && token?.balance && token?.balance > 0 ? (\n \n {loading ? (\n
\n \n
\n \n {loading ? (\n
\n {loading ?
\n \n {\n this.setState({ tokenData: token }, () => {\n this.toggleWithdrawModal(e);\n });\n }}\n >\n Withdraw\n \n
\n ) : (\n \"\"\n )}\n \n
\n \n {loading ?
\n {notifications.length > 0 ? (\n <>\n {notifications &&\n notifications.length > 0 &&\n notifications.map((notif) => (\n
\n ))}\n \n ) : (\n {loading ?
\n {notifications.length > 0 ? (\n <>\n {notifications &&\n notifications.length > 0 &&\n notifications.map((notif) => (\n \n
{\" \"}\n {notif?.additionalData?.prizeType == 1 && (\n \n \n
\n \n
\n {notif.title}
\n{notif.subtitle}
\n\n {notif.type === \"WINNER\" ? (\n <>\n {notif?.additionalData?.prizeType == 2 ? (\n \n
\n \n )}\n
\n {notif?.additionalData?.coinQuantity}
\n ) : notif?.additionalData?.prizeType == 1 ? (\nNFT
\n ) : (\n <>WON\n )}\n \n ) : (\n <>\n\n \n {notif?.topic === \"LootBox\" ? (\n notif?.amountIcon?.medium ? (\n \n
\n \n )}\n \n {notif?.topic === \"LootBox\"\n ? \"\"\n : notif?.additionalData?.prizeType === 2\n ? notif?.additionalData?.currency\n : notif?.additionalData?.prizeType == 1\n ? \"AVAILABLE\"\n : notif?.amountType === 1\n ? \"ARCADE\"\n : notif?.amountType === 6\n ? \"XP\"\n : notif?.amountType === 2\n ? \"TICKETS\"\n : \"LOOT\"}\n
\n\n \n VIEW PRIZE\n \n
\n )}\n {notif?.topic === \"LootBox\" && (\n \n \n {notif?.transactionStatus === 2 ? \"COMPLETED\" : \"PENDING\"}\n \n
\n )}\n {loading ?
\n )}\n \n
\n {\" \"}\n \n
\n \n
\n \n 
\n
\n Profile Update
\n this.setError(\"\")}>\n \n
\n \n
\n \n 
\n
\n {this.state.error}
\n\n SWEEPSTAKES ACTIVITY\n
\n\n
\n \n ))}\n \n\n {myInstancesLastKey && (\n - \n {myInstances?.map((instance) => (\n
- \n \n\n
\n
\n{\" \"}\n{instance?.title}
{\" \"}\n\n\n\n Your Tickets: {instance?.myTotalEntryTickets ?? 0}\n\n\n Total Tickets: {instance?.totalEntryTickets ?? 0}\n\n\n\n\n\n\n
\n {instance?.status === 3 ? \"Completed\" : instance?.status === 8 ? \"Canceled\" : \"Active\"}\n
\n
\n
\n \n 
\n
\n \n
{\" \"}\n {title}
{\" \"}\n\n
\n \n {type}: {score?.toLocaleString(\"en-us\")}\n
\n \n
\n \n
\n \n {status === \"Running\"\n ? \"OPEN\"\n : status === \"To be cancelled\" || status === \"Cancelled\"\n ? \"CANCELED\"\n : \"CLOSED\"}\n
\n\n {/* Arcade Contest Activity */}\n \n {loading ?
\n {this.state.loadingMainArcade ? (\n
\n ) : (\n \"NO RECENT ACTIVITY\"\n )}\n\n {/* Loot Bucks Contest Activity */}\n \n {loading ?
\n {this.state.loadingMainArcade ? (\n \n {\n if (this.state.loadingArcades) return;\n this.setState({\n loadingArcades: true,\n });\n this.props.loadMoreActivities(arcadeActivityLastKey, () => {\n this.setState({ loadingArcades: false });\n });\n }}\n >\n {this.state.loadingArcades ? (\n 
\n ) : (\n \"SHOW MORE\"\n )}\n
\n )}\n - \n {activities.map((activity) => (\n <>\n
\n {loading ?
\n {this.state.loadingMainArcade ? (\n \n {\n if (this.state.loadingLoots) return;\n this.setState({\n loadingLoots: true,\n });\n this.props.loadMoreLootActivities(lootActivityLastKey, () => {\n this.setState({ loadingLoots: false });\n });\n }}\n >\n {this.state.loadingLoots ? (\n \n ) : (\n \"SHOW MORE\"\n )}\n
\n )}\n \n ) : (\n \"NO RECENT ACTIVITY\"\n )}\n\n - \n {lootActivities.map((activity) => (\n <>\n
\n {loading ?
\n {transactions?.data?.length === 0 ? (\n {loading ?
\n ) : (\n <>\n \n {\n if (this.state.loading) return;\n this.setState({\n page: this.state.page + 1,\n loading: true,\n });\n this.props.loadMoreTransactions(transactions?.lastKey, () => {\n this.setState({ loading: false });\n });\n }}\n >\n {this.state.loading ? (\n \n ) : (\n \"SHOW MORE\"\n )}\n
\n )}\n \n \n )}\n \n - \n {transactions?.data?.map((trans) => (\n
- \n \n\n\n\n\n\n
{trans.title}
\n\n\n\n {trans.transactionType === \"DR\" ? \"-\" : \"+\"} {trans.amount ?? 0}{\" \"}\n {trans?.amountType === 1\n ? \"ARCADE\"\n : trans?.amountType === 2\n ? \"TICKETS\"\n : trans?.amountType === 3\n ? \"LOOT\"\n : trans?.amountType === 6\n ? \"XP\"\n : \"USDT\"}\n
\n{moment(trans.createdAt).format(\"l\")}
\n \n ))}\n
\n {/*
\n \n );\n }\n}\n\nexport default Profile;\n"],"sourceRoot":""}\n
\n \n \n
\n \n
\n \n
\n - \n