\n {title}\n
\n\n
\n );\n};\n\nStep.propTypes = {\n step: PropTypes.number.isRequired,\n inactive: PropTypes.bool.isRequired,\n disabled: PropTypes.bool.isRequired,\n title: PropTypes.string,\n display: PropTypes.bool,\n className: PropTypes.string,\n};\n\nStep.defaultProps = {\n disabled: false,\n inactive: false,\n className: '',\n};\n\nexport default Step;\n","import { createUseStyles } from 'react-jss'\n\nexport const useStyles = createUseStyles({\n spaced: {\n margin: '0 32px',\n },\n});\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Step from './components/Step';\nimport { useStyles } from './styles';\n\nconst Stepper = ({ steps, step }) => {\n const classes = useStyles();\n const stepComponents = steps.reduce((stepAccumulator, stepProps, index) => {\n if (!stepProps.display) return stepAccumulator;\n\n const addSpacer = index % 2 !== 0;\n\n const {\n title,\n } = stepProps;\n\n const currentStep = index + 1;\n const disabled = currentStep > step;\n const inactive = currentStep < step;\n\n const stepComponent = (\n \n \n
\n \n {stepComponents}\n
\n );\n}\n\nStepper.propTypes = {\n steps: PropTypes.arrayOf(\n PropTypes.shape({\n dispay: PropTypes.bool,\n disabled: PropTypes.bool,\n inactive: PropTypes.bool,\n title: PropTypes.string,\n })\n ),\n step: PropTypes.number.isRequired,\n};\n\nexport default Stepper;\n","import { createUseStyles } from 'react-jss'\n\nexport const useStyles = createUseStyles({\n spinner: {\n fontSize: '23px',\n '--fa-primary-color': '#FFFFFF',\n '--fa-secondary-color': '#414652',\n },\n button: {\n display: 'flex',\n flexDirection: 'row',\n padding: '10px 0',\n width: '100%',\n justifyContent: 'center',\n backgroundColor: '#111827',\n border: 'none',\n borderRadius: '10px',\n outline: 'none',\n cursor: 'pointer',\n },\n disabledButton: {\n cursor: 'not-allowed',\n },\n text: {\n fontFamily: 'Circular',\n fontWeight: 'bold',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#FFFFFF',\n marginLeft: '6px',\n },\n githubIcon: {\n fontSize: '23px',\n color: '#FFFFFF',\n },\n noHover: {\n cursor: 'default',\n '&:hover': {\n transform: 'scaleX(1)',\n }\n }\n});\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faGithub } from '@fortawesome/free-brands-svg-icons/faGithub';\nimport { faSpinnerThird } from '@fortawesome/pro-duotone-svg-icons/faSpinnerThird';\n\nimport { useStyles } from './styles';\n\nconst GithubButton = ({ hover, loading, onClick, className = '' }) => {\n const classes = useStyles();\n\n const handleClick = (e) => {\n if (!loading) {\n onClick(e);\n }\n }\n\n return (\n \n );\n}\n\nGithubButton.defaultProps = {\n loading: false,\n onClick: () => {},\n hover: true,\n};\n\nGithubButton.propTypes = {\n loading: PropTypes.bool,\n onClick: PropTypes.func,\n hover: PropTypes.bool,\n};\n\nexport default GithubButton;\n","import { createUseStyles } from 'react-jss'\n\nexport const useStyles = createUseStyles({\n container: {\n boxSizing: 'border-box',\n width: '100%',\n borderRadius: '10px',\n background: 'rgba(231, 232, 233, 0.5)',\n padding: '21px 23px',\n textAlign: 'left',\n },\n titleContainer: {\n fontSize: '16px',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n marginBottom: '12px',\n },\n infoIcon: {\n fontStyle: 'bold',\n color: '#292A2E',\n marginRight: '8px',\n },\n title: {\n fontFamily: 'Circular',\n fontWeight: 500,\n lineHeight: '20px',\n color: '#111827',\n },\n description: {\n fontFamily: 'Circular',\n fontSize: '16px',\n lineHeight: '22px',\n color: '#374151',\n },\n});\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faQuestionCircle } from '@fortawesome/pro-regular-svg-icons/faQuestionCircle';\n\nimport { useStyles } from './styles';\n\nconst InformationBox = ({ title, description }) => {\n const classes = useStyles();\n\n return (\n \n
\n );\n};\n\nInformationBox.propTypes = {\n title: PropTypes.string.isRequired,\n description: PropTypes.string.isRequired,\n};\n\nexport default InformationBox;\n","import { createUseStyles } from 'react-jss'\n\nexport const useStyles = createUseStyles({\n card: {\n position: 'relative',\n background: '#FFFFFF',\n boxShadow: '0px 2px 74px rgba(0, 0, 0, 0.08)',\n borderRadius: '25px',\n width: '500px',\n margin: 'auto',\n boxSizing: 'border-box',\n },\n contentContainer: {\n float: 'left',\n height: props => `${props.cardHeight}px`,\n backgroundColor: '#FFFFFF',\n boxShadow: '0px 2px 74px 0px #00000014',\n transition: 'height 1s ease',\n overflow: 'hidden',\n borderRadius: '25px',\n },\n clearer: {\n clear: 'both',\n },\n closedFaucet: {\n opacity: '50%',\n },\n});\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { useStyles } from './styles';\n\nconst BaseCard = ({ children, childrenRef, closedFaucet }) => {\n const [cardHeight, setCardHeight] = useState(null);\n\n const calculateHeight = () => {\n const { clientHeight: nextHeight } = childrenRef.current;\n\n\t\tif (cardHeight === nextHeight) return;\n\t\tsetCardHeight(nextHeight);\n };\n\n useEffect(() => {\n if (childrenRef !== null) calculateHeight();\n });\n\n const classes = useStyles({cardHeight});\n\n return (\n \n
\n \n {description}\n \n \n
\n );\n};\n\nBaseCard.propTypes = {\n children: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.node),\n PropTypes.node,\n ]).isRequired,\n childrenRef: PropTypes.shape({\n current: PropTypes.instanceOf(Element)\n }).isRequired,\n closedFaucet: PropTypes.bool.isRequired,\n};\n\nexport default BaseCard;\n","import { createUseStyles } from 'react-jss'\n\nexport const useStyles = createUseStyles({\n input: {\n width: '100%',\n padding: '10px 13px',\n fontFamily: 'Circular',\n fontStyle: 'normal',\n fontWeight: 'normal',\n fontSize: '16px',\n lineHeight: '24px',\n color: '#000000',\n boxSizing: 'border-box',\n borderRadius: '10px',\n border: 'none',\n outline: 'none',\n },\n containerBox: {\n width: '100%',\n boxSizing: 'border-box',\n boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.05)',\n borderRadius: '10px',\n border: '1px solid #D1D5DB',\n padding: '1px',\n '&:focus-within': {\n border: '2px solid #292A2E',\n padding: '0',\n },\n },\n});\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { useStyles } from './styles';\n\nconst InputBase = ({ className, placeholder, value, onChange, type }) => {\n const classes = useStyles();\n\n return (\n \n {children}\n
\n \n \n \n
\n );\n};\n\nInputBase.defaultProps = {\n placeholder: '',\n value: '',\n type: 'text',\n onChange: () => {},\n};\n\nInputBase.propTypes = {\n placeholder: PropTypes.string,\n value: PropTypes.string,\n type: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n};\n\nexport default InputBase;\n","import { createUseStyles } from 'react-jss'\n\nexport const useStyles = createUseStyles({\n button: {\n width: '100%',\n height: '44px',\n border: 'none',\n background: 'linear-gradient(94.95deg, #E0207B -1.41%, #692783 101.95%)',\n fallbacks: {\n background: '#E0207B'\n },\n borderRadius: '40px',\n fontFamily: 'Circular',\n fontSize: '16px',\n fontWeight: '700',\n lineHeight: '24px',\n color: '#FFFFFF',\n cursor: 'pointer'\n },\n disabledButton: {\n background: '#D9D9DA',\n cursor: 'not-allowed',\n },\n});\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useStyles } from './styles';\n\nconst GradientButton = ({ className, title, onClick, disabled, }) => {\n const classes = useStyles();\n\n return (\n \n \n {title}\n \n \n {action}\n \n \n
\n );\n};\n\nArrowButton.propTypes = {\n title: PropTypes.string.isRequired,\n action: PropTypes.string.isRequired,\n target: PropTypes.string.isRequired,\n rel: PropTypes.string.isRequired,\n href: PropTypes.string.isRequired,\n className: PropTypes.string,\n};\n\nArrowButton.defaultProps = {\n className: '',\n};\n\nexport default ArrowButton;\n","import React from 'react';\n\nexport const IconError = ({ className }) => (\n \n);","import { createUseStyles } from 'react-jss'\n\nexport const useStyles = createUseStyles({\n overrides: {\n '& .Toastify__toast': {\n padding: 0,\n width: 'auto',\n minHeight: 0,\n boxShadow: 'none',\n },\n '& .Toastify__toast-body': {\n padding: 0,\n width: '100%',\n height: 'auto',\n },\n '& .Toastify__progress-bar--default': {\n background: 'rgba(0, 0, 0, 0)',\n }\n },\n container: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n padding: '1rem',\n '&.error': {\n background: '#FEF2F2',\n }\n },\n circleClose: {\n width: '16px',\n height: '16px',\n },\n description: {\n color: '#991B1B',\n order: '0',\n margin: '0px 12px',\n lineHeight: '20px',\n width: '236px',\n },\n xClose: {\n fontStyle: 'normal',\n fontSize: '20px',\n '&.error': {\n color: '#991B1B',\n }\n }\n});\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ToastContainer, toast } from 'react-toastify';\nimport { IconError } from './icons';\n\nimport 'react-toastify/dist/ReactToastify.min.css';\nimport { useStyles } from './styles';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faTimes } from '@fortawesome/pro-regular-svg-icons/faTimes'\n\n// Pseudo Enum\nexport const ToastNotificationType = {\n Error: \"error\",\n};\n\nconst defaultCloseTimeout = 8000;\n\n/**\n * MsgBox is a costum child component, specifically for use in ToastContainer\n */\nconst MsgBox = ({ closeToast, message, notificationType }) => {\n const classes = useStyles();\n return (\n \n {\n notificationType === ToastNotificationType.Error &&\n
\n );\n};\n\n/**\n * Toast is a wrapper for ToastContainer, that provides css overrides\n * and other costumisation\n */\nconst Toast = () => {\n const classes = useStyles();\n\n return (\n { message }
\n \n
\n );\n};\n\nToast.propTypes = {\n message: PropTypes.string,\n notificationType: PropTypes.objectOf(PropTypes.shape(ToastNotificationType)),\n};\n\nexport default Toast;\n\n/**\n * ToastError triggers the visibility for the custom error Toast\n */\nexport const toastError = (message) => toast(\n
\n \n { setCopied(false) }}\n >\n \n \n Copy\n \n
\n \n \n \n \n
\n \n {prefix} {code}\n
\n \n );\n};\n\nCodeBox.defaultProps = {\n prefix: '$',\n};\n\nCodeBox.propTypes = {\n code: PropTypes.string.isRequired,\n prefix: PropTypes.string,\n};\n\nexport default CodeBox;\n","import { createUseStyles } from 'react-jss';\n\nexport const useStyles = createUseStyles({\n button: {\n border: 'none',\n background: 'inherit',\n cursor: 'pointer',\n outline: 'none',\n color: '#111827',\n fontFamily: 'Circular',\n fontStyle: 'normal',\n fontWeight: 500,\n fontSize: '16px',\n lineHeight: '20px',\n },\n backIcon: {\n marginRight: '9px',\n },\n});\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { useStyles } from './styles';\n\nconst GoBack = ({ prevStep, className }) => {\n const classes = useStyles();\n\n return (\n \n );\n};\n\nGoBack.propTypes = {\n prevStep: PropTypes.func.isRequired,\n};\n\nexport default GoBack;\n","import { createUseStyles } from 'react-jss'\n\nexport const useStyles = createUseStyles({\n container: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-evenly',\n alignItems: 'center',\n width: '100%',\n },\n '@keyframes bounce': {\n '0%, 50%, 100%': {\n transform: 'scale(0.8)',\n },\n '25%': {\n transform: 'scale(0.4)',\n },\n '75%': {\n transform: 'scale(1.0)',\n },\n },\n ball: {\n width: '2.5vw',\n height: '2.5vw',\n backgroundImage: 'linear-gradient(145deg, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0) 100%)',\n animation: '$bounce 1.5s 0.5s linear infinite',\n borderRadius: '100%',\n },\n blueBall: {\n\t backgroundColor: '#29ABE2',\n animationDelay: '-0.2s',\n },\n yellowBall: {\n backgroundColor: '#FBB03B',\n animationDelay: '-0.4s',\n },\n redBall: {\n backgroundColor: '#ED1E79',\n animationDelay: '-0.3s',\n },\n magentaBall: {\n backgroundColor: '#522785',\n animationDelay: '-0.1s',\n },\n});\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useStyles } from './styles';\n\nconst LoadingAnimation = ({ className }) => {\n const classes = useStyles();\n\n return (\n \n \n \n \n \n
\n )\n};\n\nLoadingAnimation.defaultProps = {\n className: '',\n};\n\nLoadingAnimation.propTypes = {\n className: PropTypes.string,\n};\n\nexport default LoadingAnimation;\n","import { createUseStyles } from 'react-jss'\n\nexport const useStyles = createUseStyles({\n cardContainer: {\n padding: '34px 36px 38px',\n },\n '@global': {\n '@font-face': [\n {\n fontFamily: 'Circular',\n src: 'url(\"fonts/CircularXXTT-Regular.ttf\") format(\"ttf\")',\n fontStyle: 'normal',\n fontWeight: 400,\n }\n ],\n },\n});\n","import { createUseStyles } from 'react-jss'\n\nexport const useStyles = createUseStyles({\n container: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n flexWrap: 'wrap',\n alignItems: 'center',\n width: '100%',\n \n '& > a': {\n minWidth: 'calc(50% - 10px)',\n marginBottom: '10px',\n }\n },\n});\n","import React from 'react';\n\nimport { ExternalLinkButton } from 'components';\nimport { useStyles } from './styles';\n\nconst buttonsConfig = [\n {\n key: 'canister_sdk',\n title: 'Canister SDK',\n href: 'https://sdk.dfinity.org/docs/index.html',\n },\n {\n key: 'quickstart_guide',\n title: 'Quickstart Guide',\n href: 'https://sdk.dfinity.org/docs/quickstart/quickstart-intro.html',\n },\n {\n key: 'interface_spec',\n title: 'Interface Spec',\n href: 'https://sdk.dfinity.org/docs/interface-spec/index.html',\n },\n {\n key: 'dev_forum',\n title: 'Dev Forum',\n href: 'http://forum.dfinity.org/',\n },\n];\n\nconst ExternalLinks = () => {\n const classes = useStyles();\n\n const buttons = buttonsConfig.map((buttonProps) => (\n \n {buttons}\n
\n );\n};\n\nexport default ExternalLinks;\n","import { createUseStyles } from 'react-jss'\n\nexport const useStyles = createUseStyles({\n container: {\n fontFamily: 'Circular',\n fontSize: '16px',\n marginTop: 27,\n padding: '26px 20px 31px',\n background: '#F3F4F4',\n borderRadius: '25px',\n },\n title: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n lineHeight: '20px',\n fontWeight: 700,\n color: '#292A2E',\n margin: '0 0 9px',\n },\n description: {\n lineHeight: '22px',\n fontWeight: 400,\n color: '#555659',\n margin: '0 0 19px',\n },\n redHeart: {\n margin: '0 5px',\n },\n twitterButton: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n margin: 0,\n width: '100%',\n border: 'none',\n outline: 'none',\n padding: '12px',\n boxSizing: 'border-box',\n color: '#FFFFFF',\n fontSize: '16px',\n lineHeight: '20px',\n fontWeight: 500,\n backgroundColor: '#292A2E',\n borderRadius: '40px',\n cursor: 'pointer',\n textDecoration: 'none',\n },\n twitterLogo: {\n height: '20px !important',\n marginRight: '7px',\n },\n});\n","export default __webpack_public_path__ + \"static/media/redHeart.da59c2f7.svg\";","import React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter';\n\nimport { useStyles } from './styles';\nimport RedHeart from './redHeart.svg';\n\nconst TWITTER_SHARE_CONFIG = {\n href: 'https://twitter.com/intent/tweet?text=Just%20claimed%20$20%20worth%20of%20cycles%20in%20the%20Cycles%20Faucet%20to%20get%20started%20developing%20canisters%20on%20@Dfinity%27s%20%23InternetComputer%20🔥',\n target: '_blank',\n rel: 'noreferrer',\n};\n\nconst TwitterShare = () => {\n const classes = useStyles();\n \n return (\n \n \n Share the love
\n \n
\n );\n};\n\nexport default TwitterShare;\n","import { createUseStyles } from 'react-jss'\n\nexport const useStyles = createUseStyles({\n title: {\n fontFamily: 'Circular',\n fontStyle: 'normal',\n fontWeight: 600,\n fontSize: '22px',\n lineHeight: '36px',\n color: '#111827',\n margin: '12px 0 0',\n },\n description: {\n fontFamily: 'Circular',\n fontStyle: 'normal',\n fontSize: '16px',\n lineHeight: '20px',\n color: '#374151',\n margin: '0 0 22px',\n },\n container: {\n backgroundColor: '#FFFFFF',\n },\n});\n","import React, { forwardRef } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { GoBack } from 'components';\nimport { ExternalLinks, TwitterShare } from './components';\nimport { useStyles } from './styles';\n\nconst AllSet = forwardRef(({ prevStep, className }, ref) => {\n const classes = useStyles();\n\n return (\n \n Share the love 
\n
\n \n Let your dev friends know to claim $20 in cycles and start building on the Internet Computer!\n
\n\n
\n );\n});\n\nAllSet.propTypes = {\n prevStep: PropTypes.func.isRequired,\n className: PropTypes.string,\n};\n\nAllSet.defaultProps = {\n className: '',\n};\n\nexport default AllSet;\n","export const WALLET_TYPES = {\n WALLET: 'CRYPTO',\n};\n","import { createUseStyles } from 'react-jss'\n\nexport const useStyles = createUseStyles({\n container: {\n fontWeight: 'normal',\n fontSize: '16px',\n lineHeight: '22px',\n backgroundColor: '#F3F4F4',\n width: '100%',\n padding: '26px 20px 23px',\n borderRadius: '25px',\n boxSizing: 'border-box',\n },\n bottomHint: {\n margin: '19px 0 0',\n textAlign: 'center',\n '& > span': {\n color: '#292A2E',\n fontWeight: 500,\n cursor: 'pointer',\n '&:hover': {\n textDecoration: 'underline',\n },\n },\n },\n titleContainer: {\n margin: '0 0 12px',\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n '& a': {\n color: '#111827',\n },\n '& a:visited': {\n color: '#111827',\n },\n },\n title: {\n margin: 0,\n fontSize: '16px',\n fontWeight: 700,\n lineHeight: '20px',\n color: '#111827',\n },\n description: {\n fontSize: '16px',\n lineHeight: '22px',\n color: '#555659',\n margin: 0,\n },\n codeboxContainer: {\n margin: '18px 0',\n },\n});\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport CodeBox from 'components/CodeBox';\nimport { WALLET_TYPES } from 'constants/index';\n\nimport { useStyles } from './styles';\n\nconst getDFXCommand = (walletId) => `dfx identity --network ic set-wallet --force ${walletId}`;\n\nconst DfxCommand = ({\n state,\n nextStep,\n}) => {\n const classes = useStyles();\n const walletId = state.walletId;\n\n return (\n \n You're all set\n
\n\n Ready to start building? Check out these resources to help you get started.\n
\n\n
\n );\n};\n\nDfxCommand.propTypes = {\n state: PropTypes.shape({\n walledId: PropTypes.string,\n }).isRequired,\n nextStep: PropTypes.func.isRequired,\n};\n\nexport default DfxCommand;\n","import { createUseStyles } from 'react-jss'\n\nexport const useStyles = createUseStyles({\n container: {\n fontFamily: 'Circular',\n fontStyle: 'normal',\n fontWeight: 'normal',\n fontSize: '16px',\n lineHeight: '20px',\n },\n balance: {\n background: 'linear-gradient(135deg, #656566 14.34%, #0C0C0C 85.29%)',\n width: '100%',\n margin: '20px 0',\n padding: '10px 36px',\n transform: 'translateX(-36px)',\n '& p, span': {\n color: '#FFFFFF',\n margin: 0,\n padding: 0,\n },\n '& > p': {\n fontSize: '16px',\n paddingBottom: '6px',\n },\n '& > div > span': {\n fontWeight: 'bold',\n fontSize: '22px',\n '&:nth-child(2)': {\n float: 'right', \n }\n },\n },\n identity: {\n color: '#374151',\n marginBottom: '20px',\n },\n viewLink: {\n fontWeight: 'normal',\n color: '#292A2E',\n fontSize: '14px',\n cursor: 'pointer',\n transition: 'opacity 0.2s',\n marginRight: '6px',\n '&:hover': {\n opacity: 0.7,\n },\n },\n idLine: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n '& > span': {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n },\n '&:nth-child(2)': {\n margin: '12px 0 0',\n },\n },\n boldId: {\n fontSize: '13px',\n fontWeight: '500',\n },\n idContainer: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n },\n viewLinkContainer: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'flex-end',\n alignItems: 'center',\n textDecoration: 'none',\n margin: '6px 0 0',\n },\n header: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between',\n },\n textContainer: {\n '& > p': {\n color: '#374151',\n margin: 0,\n padding: 0,\n },\n '& > h1': {\n fontWeight: '600',\n fontSize: '22px',\n lineHeight: '36px',\n color: '#111827',\n margin: 0,\n padding: 0,\n },\n display: 'flex',\n flexDirection: 'column',\n },\n partyHatImg: {\n width: '44px',\n height: '44px',\n }\n});\n","export default __webpack_public_path__ + \"static/media/congrats-popper.e41272a0.png\";","import React, { forwardRef } from 'react';\nimport PropTypes from 'prop-types';\nimport DfxCommand from './components/DfxCommand';\nimport { WALLET_TYPES } from 'constants/index';\nimport { useStyles } from './styles';\nimport congratsPopper from 'images/congrats-popper.png';\n\nconst Congratulations = forwardRef(({\n state,\n nextStep,\n className,\n}, ref) => {\n const classes = useStyles();\n\n const getWalletId = () => {\n return (\n \n
\n What's next?
\n\n Run the command below in the DFX CLI tool to set your default wallet.\n
\n\n
\n \n Done Running the Command? Click Here\n
\n \n Wallet ID\n {state.walletId}\n
\n );\n };\n\n return (\n \n
\n );\n});\n\nCongratulations.propTypes = {\n state: PropTypes.shape({\n walletType: PropTypes.string,\n principalId: PropTypes.string,\n }).isRequired,\n nextStep: PropTypes.func.isRequired,\n};\n\nexport default Congratulations;\n","import moment from 'moment';\n\n/**\n * IsNewGithubUser, check if use creation date as ISOString time, is less than 30 days?\n * @param {string} ISOstring \n * @returns boolean\n */\n export const isNewGithubUser = (ISOstring) => {\n const totalDays = (Date.now() - new Date(ISOstring)) / 1000 / 60 / 60 / 24;\n return totalDays <= 90;\n};\n\nexport const isActiveGithubUser = (ISOstring) => {\n const totalDays = (Date.now() - new Date(ISOstring)) / 1000 / 60 / 60 / 24;\n return totalDays <= 30;\n};\n\nconst getLastContribution = async (token, username) => {\n const headers = {\n 'Authorization': `bearer ${token}`,\n };\n\n const body = {\n \"query\": `query {\n viewer {\n contributionsCollection {\n endedAt\n }\n }\n }`\n };\n\n const response = await fetch('https://api.github.com/graphql', {\n method: 'POST',\n body: JSON.stringify(body),\n headers: headers\n });\n\n const data = await response.json();\n const dateString = data.data.viewer.contributionsCollection.endedAt;\n\n return dateString;\n}\n\n\nexport const isValidGithubUser = async (createdAt, updatedAt, token, username) => {\n const lastContributionString = await getLastContribution(token, username);\n\n // check if gh account has activity within last 30 days\n if (moment().subtract(30, \"days\").isAfter(moment(lastContributionString))) {\n return false;\n }\n\n return !isNewGithubUser(createdAt);\n};\n","import { createUseStyles } from 'react-jss'\n\nexport const useStyles = createUseStyles({\n container: {\n marginTop: '20px',\n },\n title: {\n textAlign: 'left',\n margin: '20px 0',\n fontFamily: 'Circular',\n fontWeight: 600,\n fontSize: '22px',\n lineHeight: '36px',\n },\n githubButton: {\n marginBottom: '25px',\n }\n});\n","import React, { useState } from 'react';\nimport LogRocket from 'logrocket';\nimport PropTypes from 'prop-types';\nimport { projectAuth } from 'config/firebase';\nimport { isValidGithubUser } from 'utils/github';\n\nimport { toastError } from 'components/Toast';\n\nimport { GithubButton, InformationBox } from 'components/index';\nimport { useStyles } from './styles';\n\n// Default texts\nconst description = 'Connecting to GitHub is to prevent bots and people from abusing the Cycles Faucet.';\nconst errorForGithubNewAccounts = 'The GitHub account must be at least 90 days old and have been active at least once in the past 30 days.'\nconst title = 'Why do I need to connect to GitHub?';\nconst defaultErrorMsgPrefix = 'Failed to login';\n\nconst Step1 = ({\n nextStep,\n closedFaucet,\n}) => {\n const classes = useStyles();\n const [loading, setLoading] = useState(false);\n const onClick = async () => {\n if (closedFaucet) {\n return false;\n }\n\n setLoading(true);\n\n try {\n const provider = new window.firebase.auth.GithubAuthProvider();\n const result = await projectAuth.signInWithPopup(provider);\n\n console.log('gh result : ', result);\n\n let db = window.firebase.firestore();\n\n const currentUser = window.firebase.auth().currentUser.uid;\n\n LogRocket.identify(result?.additionalUserInfo?.username, {\n name: result?.additionaluserinfo?.username,\n email: result?.user?.email,\n });\n\n db.collection(\"tokens\").doc(currentUser).set({\n token: result.credential.accessToken,\n })\n .then(() => {\n console.log(\"Document successfully written!\");\n })\n .catch((error) => {\n console.error(\"Error writing document: \", error);\n });\n\n isValidGithubUser(\n result?.additionalUserInfo?.profile?.created_at,\n result?.additionalUserInfo?.profile?.updated_at,\n result?.credential?.accessToken,\n result?.additionalUserInfo?.username,\n )\n .then((validAccount) => {\n if (validAccount) {\n nextStep();\n } else {\n // Triggers Toast to show up\n toastError(errorForGithubNewAccounts);\n setLoading(false);\n }\n });\n } catch(e) {\n console.error('Failed to login', e);\n toastError(`${defaultErrorMsgPrefix} ${e}`);\n setLoading(false);\n }\n };\n\n return (\n \n \n
\n \n 
\n
\n \n
\n Congrats!
\nYou claimed $20 worth of cycles.
\n\n
\n Balance
\n\n \n 15 TC\n \n \n $20.00\n \n
\n \n
\n \n Principal ID\n \n {state.principalId}\n \n
\n {getWalletId()}\n { state.walletType === WALLET_TYPES.CRYPTO && (\n \n \n View on IC\n \n \n \n )}\n \n
\n );\n};\n\nStep1.propTypes = {\n nextStep: PropTypes.func.isRequired,\n closedFaucet: PropTypes.bool.isRequired,\n};\n\nexport default Step1;\n","import { createUseStyles } from 'react-jss'\n\nexport const useStyles = createUseStyles({\n title: {\n fontFamily: 'Circular',\n fontStyle: 'normal',\n fontWeight: 600,\n fontSize: '22px',\n lineHeight: '36px',\n color: '#111827',\n margin: '20px 0 14px',\n },\n inputLabel: {\n fontFamily: 'Circular',\n fontStyle: 'normal',\n fontWeight: 500,\n fontSize: '14px',\n lineHeight: '20px',\n color: '#111827',\n margin: '0',\n marginBottom: '4px',\n },\n input: {\n marginBottom: '25px',\n },\n gradientButton: {\n marginBottom: '30px',\n },\n footer: {\n background: '#F3F4F4',\n borderRadius: '25px',\n padding: '26px 20px 30px',\n color: '#111827',\n fontSize: '16px',\n },\n footerSubtitle: {\n lineHeight: '20px',\n fontWeight: 500,\n margin: '0 0 12px',\n },\n footerDescription: {\n lineHeight: '22px',\n marginBottom: '18px',\n color: '#555659',\n\n '& > a': {\n textDecoration: 'none',\n color: '#555659',\n '&:hover': {\n textDecoration: 'underline',\n },\n },\n },\n link: {\n color: '#555659',\n '&:visited': {\n color: '#555659',\n },\n },\n boldedText: {\n color: '#000000 !important',\n fontWeight: 500,\n },\n});\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { InputBase, GradientButton, CodeBox } from 'components';\n\nimport { useStyles } from './styles';\n\nconst GET_PRINCIPAL_COMMAND = 'dfx identity get-principal';\nconst DFINITY_CANNISTER_TEXT = ' DFINITY’s Canister SDK ';\n\nconst Step2 = ({\n nextStep,\n state,\n setState,\n}) => {\n const classes = useStyles();\n\n const onChange = (e) => {\n setState({\n ...state,\n principalId: e.target.value,\n });\n };\n \n const onClick = () => {\n nextStep();\n };\n\n return (\n Connect to Github
\n\n \n
\n );\n};\n\nStep2.propTypes = {\n nextStep: PropTypes.func.isRequired,\n state: PropTypes.shape({\n principalId: PropTypes.string,\n }).isRequired,\n setState: PropTypes.func.isRequired,\n};\n\nexport default Step2;\n","import { createUseStyles } from 'react-jss'\n\nconst styles = createUseStyles({\n container: {\n borderRadius: 10,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n cursor: 'pointer',\n userSelect: 'none',\n },\n selected: {\n border: '2px solid #292A2E',\n boxShadow: '0px 0px 0px rgba(6, 44, 82, 0.1), 0px 1px 3px rgba(64, 66, 69, 0.12), 0px 2px 16px rgba(33, 43, 54, 0.08)',\n padding: '17px 16px 19px 20px',\n },\n unselected: {\n border: '1px solid #D1D5DB',\n boxShadow: '0px 0px 0px rgba(6, 44, 82, 0.1)',\n padding: '18px 15px 19px 21px',\n '&:hover': {\n border: '2px solid #A0A3AB',\n padding: '17px 16px 19px 20px',\n },\n },\n title: {\n fontFamily: 'Circular',\n lineHeight: '20px',\n marginBottom: '4px',\n fontSize: '16px',\n fontWeight: 500,\n },\n description: {\n fontFamily: 'Circular',\n lineHeight: '18px',\n fontSize: '14px',\n },\n icon: {\n marginRight: '15px',\n },\n waletLogo: {\n width: '34px',\n },\n disabled: {\n border: '1px solid #D1D5DB',\n justifyContent: 'start',\n cursor: 'not-allowed',\n '&:hover': {\n border: '1px solid #D1D5DB',\n padding: '18px 15px 19px 21px',\n }\n },\n disabledOpacity: {\n opacity: 0.6,\n },\n comingSoonTag: {\n marginTop: '-3px',\n fontSize: '14px',\n background: 'gainsboro',\n padding: '2px 8px',\n borderRadius: '5px',\n },\n disabledTitle: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n }\n});\n\nexport default styles;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport { WALLET_TYPES } from 'constants/index';\n\nimport useStyles from './styles';\n\nconst WalletOption = ({\n disabled,\n selected,\n title,\n description,\n onClick,\n walletType,\n icon,\n}) => {\n const classes = useStyles();\n\n const getIcon = () => {\n if (icon) {\n return (\n \n Enter DFX Principal ID\n
\n\n DFX Principal ID\n
\n\n
\n \n Need a Principal ID?\n
\n\n Run the command below in the DFX CLI tool available on\n
{getIcon()}
\n \n
\n \n );\n};\n\nWalletOption.defaultProps = {\n icon: '',\n};\n\nWalletOption.propTypes = {\n selected: PropTypes.bool.isRequired,\n title: PropTypes.string.isRequired,\n description: PropTypes.string.isRequired,\n onClick: PropTypes.func.isRequired,\n walletType: PropTypes.string.isRequired,\n icon: PropTypes.string,\n};\n\nexport default WalletOption;\n","var _path, _path2, _path3, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11, _defs;\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgPoweredByFleek(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 156,\n height: 27,\n viewBox: \"0 0 156 27\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M0.27832 18.8722H2.034V14.7813H4.42037C7.11923 14.7813 8.45446 13.1506 8.45446 11.0029C8.45446 8.86086 7.13059 7.23585 4.42605 7.23585H0.27832V18.8722ZM2.034 13.2927V8.74154H4.23855C5.97718 8.74154 6.68741 9.68472 6.68741 11.0029C6.68741 12.3211 5.97718 13.2927 4.26128 13.2927H2.034Z\",\n fill: \"url(#paint0_linear)\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M13.9431 19.0484C16.4033 19.0484 18.0113 17.2472 18.0113 14.5484C18.0113 11.8324 16.4033 10.0313 13.9431 10.0313C11.4829 10.0313 9.87491 11.8324 9.87491 14.5484C9.87491 17.2472 11.4829 19.0484 13.9431 19.0484ZM13.9488 17.6222C12.3408 17.6222 11.5908 16.2188 11.5908 14.5427C11.5908 12.8722 12.3408 11.4518 13.9488 11.4518C15.5454 11.4518 16.2954 12.8722 16.2954 14.5427C16.2954 16.2188 15.5454 17.6222 13.9488 17.6222Z\",\n fill: \"url(#paint1_linear)\"\n })), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M21.534 18.8722H23.2613L25.034 12.5711H25.1647L26.9374 18.8722H28.6704L31.2329 10.1449H29.4772L27.7783 16.5256H27.6931L25.9885 10.1449H24.2329L22.517 16.554H22.4317L20.7215 10.1449H18.9658L21.534 18.8722Z\",\n fill: \"url(#paint2_linear)\"\n })), _path4 || (_path4 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M36.3408 19.0484C38.2442 19.0484 39.5908 18.1109 39.9772 16.6904L38.3692 16.4006C38.0624 17.2245 37.3238 17.6449 36.3579 17.6449C34.9033 17.6449 33.926 16.7018 33.8806 15.0199H40.0851V14.4177C40.0851 11.2643 38.1988 10.0313 36.2215 10.0313C33.7897 10.0313 32.1874 11.8836 32.1874 14.5654C32.1874 17.2756 33.767 19.0484 36.3408 19.0484ZM33.8863 13.7472C33.9545 12.5086 34.8522 11.4347 36.2329 11.4347C37.551 11.4347 38.4147 12.412 38.4204 13.7472H33.8863Z\",\n fill: \"url(#paint3_linear)\"\n })), _path5 || (_path5 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M41.9701 18.8722H43.6689V13.5427C43.6689 12.4006 44.5496 11.5768 45.7542 11.5768C46.1064 11.5768 46.5042 11.6393 46.6405 11.679V10.054C46.4701 10.0313 46.1349 10.0143 45.9189 10.0143C44.8962 10.0143 44.0212 10.5938 43.703 11.5313H43.6121V10.1449H41.9701V18.8722Z\",\n fill: \"url(#paint4_linear)\"\n })), _path6 || (_path6 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M51.5596 19.0484C53.463 19.0484 54.8096 18.1109 55.1959 16.6904L53.588 16.4006C53.2812 17.2245 52.5425 17.6449 51.5766 17.6449C50.1221 17.6449 49.1448 16.7018 49.0993 15.0199H55.3039V14.4177C55.3039 11.2643 53.4175 10.0313 51.4403 10.0313C49.0084 10.0313 47.4062 11.8836 47.4062 14.5654C47.4062 17.2756 48.9857 19.0484 51.5596 19.0484ZM49.105 13.7472C49.1732 12.5086 50.0709 11.4347 51.4516 11.4347C52.7698 11.4347 53.6334 12.412 53.6391 13.7472H49.105Z\",\n fill: \"url(#paint5_linear)\"\n })), _path7 || (_path7 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M60.4559 19.0427C62.0468 19.0427 62.6718 18.0711 62.9786 17.5143H63.1207V18.8722H64.7797V7.23585H63.0809V11.5597H62.9786C62.6718 11.0199 62.0922 10.0313 60.4672 10.0313C58.3593 10.0313 56.8082 11.6961 56.8082 14.5256C56.8082 17.3495 58.3366 19.0427 60.4559 19.0427ZM60.8309 17.5938C59.3138 17.5938 58.5241 16.2586 58.5241 14.5086C58.5241 12.7756 59.2968 11.4745 60.8309 11.4745C62.3138 11.4745 63.1093 12.6847 63.1093 14.5086C63.1093 16.3438 62.2968 17.5938 60.8309 17.5938Z\",\n fill: \"url(#paint6_linear)\"\n })), _path8 || (_path8 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M71.5752 18.8722H73.2343V17.5143H73.3763C73.6832 18.0711 74.3081 19.0427 75.8991 19.0427C78.0127 19.0427 79.5468 17.3495 79.5468 14.5256C79.5468 11.6961 77.99 10.0313 75.882 10.0313C74.2627 10.0313 73.6775 11.0199 73.3763 11.5597H73.2741V7.23585H71.5752V18.8722ZM73.24 14.5086C73.24 12.6847 74.0354 11.4745 75.5184 11.4745C77.0582 11.4745 77.8309 12.7756 77.8309 14.5086C77.8309 16.2586 77.0354 17.5938 75.5184 17.5938C74.0582 17.5938 73.24 16.3438 73.24 14.5086Z\",\n fill: \"url(#paint7_linear)\"\n })), _path9 || (_path9 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M82.2158 22.1449C83.6192 22.1449 84.5056 21.412 85.0113 20.037L88.6079 10.1449H86.784L84.5738 16.9177H84.4829L82.2726 10.1449H80.4545L83.6476 18.9859L83.4374 19.5654C83.0056 20.7245 82.3976 20.8211 81.4658 20.5654L81.0567 21.9574C81.2613 22.0484 81.7045 22.1449 82.2158 22.1449Z\",\n fill: \"url(#paint8_linear)\"\n })), _path10 || (_path10 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M111.178 0L105.279 8.57891L108.849 8.2666L103.459 14.5966L107.365 14.255L94.1033 26.8722L100.066 18.2006L96.4382 18.518L101.676 12.2883L97.9164 12.6172L111.178 0Z\",\n fill: \"url(#paint9_linear)\"\n })), _path11 || (_path11 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M114.192 11.6651H112.637V10.191H114.192V8.49484C114.192 7.79481 114.367 7.21259 114.717 6.74815C115.067 6.28371 115.659 6.05149 116.494 6.05149C116.763 6.05149 117.035 6.07505 117.311 6.12217C117.587 6.16928 117.82 6.2265 118.008 6.29381V7.52558H116.958C116.298 7.52558 115.969 7.84866 115.969 8.49484V10.191H118.008V11.6651H115.969V20.8125H114.192V11.6651ZM119.422 6.21303H121.199V20.8125H119.422V6.21303ZM128.407 21.0548C126.698 21.0548 125.426 20.6039 124.591 19.7019C123.756 18.8 123.339 17.3999 123.339 15.5018C123.339 13.6036 123.756 12.2036 124.591 11.3017C125.426 10.3997 126.698 9.94873 128.407 9.94873C129.942 9.94873 131.09 10.3559 131.85 11.1704C132.611 11.9849 132.991 13.294 132.991 15.0979V15.9864H125.177C125.244 17.2115 125.537 18.1168 126.055 18.7024C126.573 19.288 127.357 19.5808 128.407 19.5808C129.256 19.5808 129.942 19.3856 130.467 18.9952C130.992 18.6048 131.255 18.0057 131.255 17.198H132.991C132.991 18.4365 132.564 19.3889 131.709 20.0553C130.854 20.7217 129.754 21.0548 128.407 21.0548ZM131.133 14.5123C131.133 12.4526 130.225 11.4228 128.407 11.4228C127.398 11.4228 126.641 11.6651 126.136 12.1498C125.631 12.6344 125.325 13.4219 125.217 14.5123H131.133ZM139.635 21.0548C137.925 21.0548 136.653 20.6039 135.818 19.7019C134.984 18.8 134.566 17.3999 134.566 15.5018C134.566 13.6036 134.984 12.2036 135.818 11.3017C136.653 10.3997 137.925 9.94873 139.635 9.94873C141.169 9.94873 142.317 10.3559 143.078 11.1704C143.838 11.9849 144.218 13.294 144.218 15.0979V15.9864H136.404C136.471 17.2115 136.764 18.1168 137.282 18.7024C137.8 19.288 138.585 19.5808 139.635 19.5808C140.483 19.5808 141.169 19.3856 141.694 18.9952C142.219 18.6048 142.482 18.0057 142.482 17.198H144.218C144.218 18.4365 143.791 19.3889 142.936 20.0553C142.081 20.7217 140.981 21.0548 139.635 21.0548ZM142.361 14.5123C142.361 12.4526 141.452 11.4228 139.635 11.4228C138.625 11.4228 137.868 11.6651 137.363 12.1498C136.858 12.6344 136.552 13.4219 136.444 14.5123H142.361ZM146.359 6.21303H148.136V15.4008L152.639 10.191H154.84L151.185 14.371L155.042 20.8125H152.982L150.074 15.6431L148.136 17.4807V20.8125H146.359V6.21303Z\",\n fill: \"url(#paint10_linear)\"\n })), _defs || (_defs = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"paint0_linear\",\n x1: 5.5,\n y1: 6.49999,\n x2: 155,\n y2: 19.5,\n gradientUnits: \"userSpaceOnUse\"\n }, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"#FFE701\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.34375,\n stopColor: \"#FA51D3\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.692708,\n stopColor: \"#10D9ED\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#52FF53\"\n })), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"paint1_linear\",\n x1: 5.5,\n y1: 6.49999,\n x2: 155,\n y2: 19.5,\n gradientUnits: \"userSpaceOnUse\"\n }, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"#FFE701\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.34375,\n stopColor: \"#FA51D3\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.692708,\n stopColor: \"#10D9ED\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#52FF53\"\n })), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"paint2_linear\",\n x1: 5.5,\n y1: 6.49999,\n x2: 155,\n y2: 19.5,\n gradientUnits: \"userSpaceOnUse\"\n }, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"#FFE701\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.34375,\n stopColor: \"#FA51D3\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.692708,\n stopColor: \"#10D9ED\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#52FF53\"\n })), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"paint3_linear\",\n x1: 5.5,\n y1: 6.49999,\n x2: 155,\n y2: 19.5,\n gradientUnits: \"userSpaceOnUse\"\n }, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"#FFE701\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.34375,\n stopColor: \"#FA51D3\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.692708,\n stopColor: \"#10D9ED\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#52FF53\"\n })), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"paint4_linear\",\n x1: 5.5,\n y1: 6.49999,\n x2: 155,\n y2: 19.5,\n gradientUnits: \"userSpaceOnUse\"\n }, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"#FFE701\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.34375,\n stopColor: \"#FA51D3\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.692708,\n stopColor: \"#10D9ED\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#52FF53\"\n })), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"paint5_linear\",\n x1: 5.5,\n y1: 6.49999,\n x2: 155,\n y2: 19.5,\n gradientUnits: \"userSpaceOnUse\"\n }, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"#FFE701\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.34375,\n stopColor: \"#FA51D3\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.692708,\n stopColor: \"#10D9ED\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#52FF53\"\n })), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"paint6_linear\",\n x1: 5.5,\n y1: 6.49999,\n x2: 155,\n y2: 19.5,\n gradientUnits: \"userSpaceOnUse\"\n }, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"#FFE701\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.34375,\n stopColor: \"#FA51D3\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.692708,\n stopColor: \"#10D9ED\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#52FF53\"\n })), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"paint7_linear\",\n x1: 5.5,\n y1: 6.49999,\n x2: 155,\n y2: 19.5,\n gradientUnits: \"userSpaceOnUse\"\n }, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"#FFE701\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.34375,\n stopColor: \"#FA51D3\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.692708,\n stopColor: \"#10D9ED\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#52FF53\"\n })), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"paint8_linear\",\n x1: 5.5,\n y1: 6.49999,\n x2: 155,\n y2: 19.5,\n gradientUnits: \"userSpaceOnUse\"\n }, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"#FFE701\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.34375,\n stopColor: \"#FA51D3\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.692708,\n stopColor: \"#10D9ED\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#52FF53\"\n })), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"paint9_linear\",\n x1: 5.5,\n y1: 6.49999,\n x2: 155,\n y2: 19.5,\n gradientUnits: \"userSpaceOnUse\"\n }, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"#FFE701\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.34375,\n stopColor: \"#FA51D3\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.692708,\n stopColor: \"#10D9ED\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#52FF53\"\n })), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"paint10_linear\",\n x1: 5.5,\n y1: 6.49999,\n x2: 155,\n y2: 19.5,\n gradientUnits: \"userSpaceOnUse\"\n }, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"#FFE701\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.34375,\n stopColor: \"#FA51D3\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.692708,\n stopColor: \"#10D9ED\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#52FF53\"\n })))));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgPoweredByFleek);\nexport default __webpack_public_path__ + \"static/media/powered-by-fleek.64fb0d06.svg\";\nexport { ForwardRef as ReactComponent };","export default __webpack_public_path__ + \"static/media/existingWalletIcon.8611c887.svg\";","export default __webpack_public_path__ + \"static/media/newWalletIcon.df6cb0a2.svg\";","import { createUseStyles } from 'react-jss'\n\nconst styles = createUseStyles({\n title: {\n fontFamily: 'Circular',\n fontStyle: 'normal',\n fontWeight: 600,\n fontSize: '22px',\n lineHeight: '36px',\n color: '#111827',\n margin: '14px 0',\n },\n container: {\n display: 'flex',\n flexDirection: 'column',\n },\n walletOptionContainer: {\n marginBottom: '15px',\n height: '100px',\n },\n inputLabel: {\n fontFamily: 'Circular',\n fontStyle: 'normal',\n fontWeight: 500,\n fontSize: '14px',\n lineHeight: '20px',\n color: '#111827',\n margin: '0',\n marginBottom: '4px',\n },\n input: {\n marginBottom: '25px',\n },\n topRow: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'flex-start',\n marginTop: '20px',\n },\n continueButton: {\n marginTop: '10px',\n },\n});\n\nexport default styles;\n","import React, { useState, useEffect } from 'react';\nimport { InputBase, GradientButton, GoBack } from 'components';\nimport { WALLET_TYPES } from 'constants/index';\n\nimport existingWalletIcon from './existingWalletIcon.svg';\nimport newWalletIcon from './newWalletIcon.svg';\n\nimport WalletOption from '../WalletOption';\n\nimport useStyles from './styles';\nconst ExistingWallet = ({\n claimCycles,\n setChangeContent,\n}) => {\n const [internalStep, setInternalStep] = useState(1);\n const [selectedWallet, setSelectedWallet] = useState('');\n const [existingWallet, setExistingWallet] = useState();\n const classes = useStyles();\n\n useEffect(() => {\n setChangeContent(`internal-step-${internalStep}`);\n }, [internalStep, setChangeContent]);\n\n const onInputChange = (e) => {\n setSelectedWallet(e.target.value);\n };\n\n if (internalStep === 2) {\n return (\n \n {title}\n {disabled && (\n Temporarily disabled\n )}\n
\n {description}
\n \n \n claimCycles(selectedWallet)}\n title=\"Continue\"\n className={'hvr-scale'}\n />\n
\n )\n }\n\n return (\n \n setInternalStep(1)} />\n
\n \n Enter Cycles Wallet ID\n
\n\n Cycles Wallet ID\n
\n\n {\n if (existingWallet) {\n setInternalStep(2)\n } else {\n claimCycles();\n }\n }}\n title=\"Continue\"\n className={`hvr-scale ${classes.continueButton}`}\n disabled={existingWallet === undefined}\n />\n
\n );\n};\n\nexport default ExistingWallet;\n","import { createUseStyles } from 'react-jss'\n\nconst styles = createUseStyles({\n walletOptionContainer: {\n marginBottom: '15px',\n height: '100px',\n },\n title: {\n fontFamily: 'Circular',\n fontStyle: 'normal',\n fontWeight: 600,\n fontSize: '22px',\n lineHeight: '36px',\n color: '#111827',\n margin: '20px 0 14px',\n },\n arrowButton: {\n margin: '10px 0 25px',\n },\n disclaimer: {\n fontFamily: 'Circular',\n fontStyle: 'normal',\n fontWeight: 'normal',\n fontSize: '14px',\n lineHeight: '18px',\n textAlign: 'center',\n color: '#374151',\n margin: '25px 0 0',\n },\n loadingContainer: {\n marginTop: '25px',\n },\n container: {\n display: 'flex',\n flexDirection: 'column',\n },\n});\n\nexport default styles;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { withdrawFunction } from 'config/firebase';\n\nimport { WalletOption, ExistingWallet } from './components';\nimport { WALLET_TYPES } from 'constants/index';\nimport useStyles from './styles';\nimport { ArrowButton, GradientButton, LoadingAnimation } from 'components';\n\nconst Step3 = ({\n nextStep,\n prevStep,\n state,\n setState,\n setCompleted,\n setChangeContent,\n setError,\n}) => {\n const [loading, setLoading] = useState(false);\n const classes = useStyles();\n\n const claimCycles = async (walletID = false) => {\n const payload = {\n data: {\n ...(walletID) && { cycleWalletId: walletID },\n principalId: state.principalId,\n walletType: 'cycleWallet',\n },\n };\n\n setChangeContent('loading-state-step-3');\n\n setLoading(true);\n withdrawFunction(payload)\n .then((response) => {\n setState({\n ...state,\n walletId: response.data.data.cycleWalletCanisterId,\n });\n setCompleted(true);\n nextStep();\n })\n .catch((error) => {\n setError(error.message);\n prevStep();\n });\n };\n\n if (loading) {\n return (\n \n Where do you want your Cycles?\n
\n\n setExistingWallet(true)}\n walletType={WALLET_TYPES.WALLET}\n selected={existingWallet === true}\n title=\"Use Existing Cycles Wallet\"\n description=\"Have a Cycles Wallet already? Receive your cycles to that Wallet ID.\"\n icon={existingWalletIcon}\n />\n
\n \n setExistingWallet(false)}\n walletType={WALLET_TYPES.WALLET}\n selected={existingWallet === false}\n title=\"Generate New Cycles Wallet\"\n description=\"Create a new cycles wallet and receive your cycles on that Wallet ID.\"\n icon={newWalletIcon}\n />\n
\n \n
\n );\n }\n\n return (\n \n Finishing a few things...\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n );\n});\n\nForm.propTypes = {\n step: PropTypes.number.isRequired,\n prevStep: PropTypes.func.isRequired,\n nextStep: PropTypes.func.isRequired,\n state: PropTypes.shape({\n walletType: PropTypes.string,\n }).isRequired,\n setState: PropTypes.func.isRequired,\n setStep: PropTypes.func.isRequired,\n setCompleted: PropTypes.func.isRequired,\n setChangeContent: PropTypes.func.isRequired,\n setError: PropTypes.func.isRequired,\n closedFaucet: PropTypes.bool.isRequired,\n};\n\nexport default Form;\n","import React, { useState, useEffect, createRef } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Switch,\n Route,\n useHistory,\n} from \"react-router-dom\";\nimport { useAuthState } from 'react-firebase-hooks/auth';\n\nimport { projectAuth } from 'config/firebase';\nimport { BaseCard } from 'components';\nimport ConfettiGenerator from \"confetti-js\";\nimport { PATHS, useStepper } from 'utils/stepper';\nimport { useStickyState } from 'utils/stickyState';\nimport ToastComponent, { toastError } from 'components/Toast';\n\nimport { useStyles } from './styles';\nimport { Congratulations, AllSet, Form } from './components';\n\nconst defaultState = {\n principalId: '',\n walletId: '',\n walletType: 'CRYPTO',\n email: '',\n githubId: '',\n};\n\nconst redirectErrors = ['Github account has already withdrawn cycles.', 'Principal has already withdrawn cycles.'];\n\nconst FormContainer = ({ completed, setCompleted, closedFaucet }) => {\n const history = useHistory();\n const [areConfettisTriggered, setAreConfettisTriggered] = useState(false);\n const [updatedStepper, setUpdatedStepper] = useState(false);\n const [ ,userLoading] = useAuthState(projectAuth);\n const { step, path, nextStep, prevStep, setStep } = useStepper(history);\n const [ locationKeys, setLocationKeys ] = useState([])\n\n const [state, setState] = useStickyState(defaultState, 'userInfuserInfoo');\n const [correctStep, setCorrectStep] = useStickyState(1, 'correctStep');\n const CONGRATULATIONS_STEP = 4;\n \n const [error, setError] = useState(false);\n const [changeContent, setChangeContent] = useState(null);\n const [childrenRef, setChildrenRef] = useState(null);\n\n useEffect(() => {\n if (error) {\n // Handle redirect\n if (redirectErrors.includes(error)) {\n setTimeout(() => {\n window.location.href = 'https://dfinity.org/developers/';\n }, 4000);\n }\n\n // Clear Error\n setTimeout(() => {\n setError(false)\n }, 8000) ;\n\n // Show Error\n toastError(error);\n }\n }, [error]);\n\n useEffect(() => {\n const ref = createRef();\n setChildrenRef(ref);\n }, [step, changeContent]);\n\n const classes = useStyles();\n\n useEffect(() => {\n history.push(path);\n }, [path, history]);\n\n useEffect(() => {\n if (completed && !updatedStepper) {\n setUpdatedStepper(true);\n setStep(CONGRATULATIONS_STEP);\n }\n }, [completed, setStep, setUpdatedStepper, updatedStepper]);\n\n useEffect(() => {\n if (correctStep === CONGRATULATIONS_STEP && !areConfettisTriggered) {\n const confettiElement = document.getElementById('confetti-canvas');\n const confettiSettings = {\n target: confettiElement,\n start_from_edge: true,\n rotate: true,\n respawn: false,\n max: 200,\n };\n const confetti = new ConfettiGenerator(confettiSettings);\n confetti.render();\n setAreConfettisTriggered(true);\n }\n }, [correctStep, areConfettisTriggered]);\n\n useEffect(() => {\n if (step !== correctStep) {\n setStep(correctStep);\n }\n }, [correctStep, step, setStep]);\n\n useEffect(() => {\n return history.listen(location => {\n if (history.action === 'PUSH') {\n setLocationKeys([ location.key ])\n }\n\n if (history.action === 'POP') {\n if (locationKeys[1] === location.key) {\n setLocationKeys(([ _, ...keys ]) => keys);\n } else {\n setLocationKeys((keys) => [ location.key, ...keys ]);\n setCorrectStep(step - 1);\n prevStep();\n }\n }\n })\n }, [locationKeys, history, prevStep, setCorrectStep, step]);\n\n useEffect(() => {\n if (closedFaucet && correctStep !== 1 && step !== 1) {\n setCorrectStep(1);\n setStep(1);\n }\n }, [closedFaucet, setCorrectStep, setStep, correctStep, step]);\n\n if (userLoading) {\n return null;\n }\n\n const handleNextStep = () => {\n setCorrectStep(step + 1);\n nextStep();\n };\n\n const handlePrevStep = () => {\n setCorrectStep(step - 1);\n prevStep();\n };\n\n const handleSetStep = (newStep) => {\n setCorrectStep(newStep);\n setStep(newStep);\n };\n\n return (\n \n
\n \n \n
\n );\n};\n\nexport default PoweredByFleek;\n","import { createUseStyles } from 'react-jss'\n\nexport const useStyles = createUseStyles({\n '@font-face': {\n fontFamily: 'Circular',\n src: 'url(\"fonts/CircularXXTT-Regular.ttf\") format(\"ttf\")',\n fontStyle: 'normal',\n fontWeight: 400,\n },\n app: {\n minHeight: '100vh',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n alignItems: 'center',\n },\n mainContent: {\n width: '100vw',\n },\n supportText: {\n width: '100%',\n margin: '0 auto 10px',\n fontSize: '15px',\n color: '#414652',\n textAlign: 'center',\n '& a': {\n color: '#414652',\n textDecoration: 'none',\n },\n '& a:visited': {\n color: '#414652',\n },\n },\n closedFaucetBanner: {\n height: 40,\n backgroundColor: '#28abe2',\n color: 'white',\n fontSize: 17,\n width: '100%',\n textAlign: 'center',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n '& > p': {\n margin: 0,\n }\n },\n});\n","import {\n Redirect,\n Route,\n} from \"react-router-dom\";\nimport LogRocket from 'logrocket';\n\nimport { PATHS } from 'utils/stepper';\nimport { useStickyState } from 'utils/stickyState';\nimport TopBar from './components/TopBar';\nimport FormContainer from './components/FormContainer';\nimport PoweredByFleek from './components/PoweredByFleek';\nimport Toast from './components/Toast'\nimport { useStyles } from './styles';\n\nLogRocket.init('fleek/faucet');\n\nconst closedFaucet = false;\n\nfunction App() {\n console.log('Started app in', process.env.NODE_ENV);\n const [completed, setCompleted] = useStickyState(false, 'completed');\n const classes = useStyles();\n\n return (\n <>\n \n \n
\n \n { closedFaucet && (\n
\n \n
\n )}\n \n Sorry, the faucet is out of cycles. Please check back later.\n
\n\n Having Issues? support@dfinity.org\n
\n