Merge pull request #221 from cardano-foundation/staging

Updated faucets

package.json

@@ -25,6 +25,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-ga": "^2.7.0",
+    "react-google-recaptcha": "^2.1.0",
     "react-icons": "^3.10.0",
     "react-syntax-highlighter": "^12.2.1",
     "react-transition-group": "^4.3.0",

resources/content/articles/en/2020-05-04_04-00-00_faucet-en.md

@@ -25,6 +25,6 @@ You access the testnet faucet using a form below, where you need to enter an add
 1. Enter the address you want to top up in the field below.
 2. Click 'Request'.
 3. Funds will be accessible in 5-10 minutes.
-4. When you have finished using your test tokens, please return them to the faucet so that other members of the community can use them. Please return your test tokens to this address: **ca1s44h5hytev8d9wty220ckglvj7ewm3yetyug8a29pu2lj5dff28sy2yf8yj**
+4. When you have finished using your test tokens, please return them to the faucet so that other members of the community can use them. Please return your test tokens to this address: **ca1qhnyzcajgahztg0v6ngvn8jjud46pj8xcl82z279qe0hlkq43chgz2jccha**
 
 <!-- include components/ITNFaucet -->

resources/content/global/global-en.md

@@ -34,6 +34,7 @@ content:
     success_heading: Success
     verify_transaction_hash: 'Please verify the following transaction hash:'
     transaction_successful: Your transaction has been successful and __{{ amount }}__ have been sent to __{{ address }}__.
+    please_complete_recaptcha: Please complete the ReCAPTCHA
   downloaders_content:
     version: Version
     sha_checksum: SHA256 checksum

src/components/Faucet.js

@@ -1,4 +1,4 @@
-import React, { useState, Fragment } from 'react'
+import React, { useState, Fragment, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import Box from '@material-ui/core/Box'
@@ -9,6 +9,7 @@ import CircularProgress from '@material-ui/core/CircularProgress'
 import Markdown from '@input-output-hk/front-end-core-components/components/Markdown'
 import Link from '@input-output-hk/front-end-core-components/components/Link'
 import moment from 'moment'
+import ReCaptcha from 'react-google-recaptcha'
 import GlobalContentQuery from '../queries/GlobalContentQuery'
 
 const Container = styled(Box)`
@@ -29,12 +30,14 @@ const LoadingContainer = styled.div`
 
 const DEFAULT_VALUES = {
   address: '',
-  apiKey: ''
+  apiKey: '',
+  reCaptcha: false
 }
 
 const DEFAULT_ERRORS = {
   address: '',
-  apiKey: ''
+  apiKey: '',
+  reCaptcha: ''
 }
 
 const statuses = {
@@ -43,15 +46,21 @@ const statuses = {
   success: 'success'
 }
 
-const FaucetInner = ({ content, getEndpoint, hasApiKey, getTransactionURL }) => {
+const FaucetInner = ({ content, getEndpoint, hasApiKey, getTransactionURL, reCaptcha }) => {
   const [ values, setValues ] = useState(DEFAULT_VALUES)
   const [ errors, setErrors ] = useState(DEFAULT_ERRORS)
   const [ serverError, setServerError ] = useState('')
   const [ result, setResult ] = useState(null)
   const [ status, setStatus ] = useState(statuses.ready)
+  const reCaptchaRef = useRef(null)
 
   const valueOnChange = (key) => (e) => {
-    setValues({ ...values, [key]: e.target.value })
+    if (key === 'reCaptcha') {
+      setValues({ ...values, [key]: e })
+    } else {
+      setValues({ ...values, [key]: e.target.value })
+    }
+
     setErrors({ ...errors, [key]: '' })
   }
 
@@ -72,6 +81,7 @@ const FaucetInner = ({ content, getEndpoint, hasApiKey, getTransactionURL }) =>
   const onSubmit = async (e) => {
     e.preventDefault()
     const newErrors = {}
+    if (!values.reCaptcha) newErrors.reCaptcha = content.faucet_content.please_complete_recaptcha
     if (Object.keys(newErrors).length > 0) {
       setErrors(newErrors)
       return
@@ -81,16 +91,14 @@ const FaucetInner = ({ content, getEndpoint, hasApiKey, getTransactionURL }) =>
     setServerError('')
     setStatus(statuses.loading)
     try {
-      const url = getEndpoint({ address: values.address, apiKey: values.apiKey })
+      const endpointParams = { address: values.address, apiKey: values.apiKey }
+      if (reCaptcha) endpointParams.reCaptchaResponse = values.reCaptcha
+      const url = getEndpoint(endpointParams)
       const result = await fetch(url, { method: 'POST' })
       const jsonResult = await result.json()
       if (result.status === 200 && jsonResult.success === false) {
-        if (jsonResult.txid === 'ERROR') {
-          setErrors({ ...errors, address: content.faucet_content.invalid_address })
-        } else {
-          setServerError(content.faucet_content.server_error)
-        }
-
+        if (jsonResult.txid === 'ERROR') setErrors({ ...errors, address: content.faucet_content.invalid_address })
+        setServerError(content.faucet_content.server_error)
         setStatus(statuses.ready)
       } else if (result.status === 200) {
         setResult({ txid: jsonResult.txid, amount: jsonResult.amount })
@@ -129,6 +137,13 @@ const FaucetInner = ({ content, getEndpoint, hasApiKey, getTransactionURL }) =>
     setResult(null)
   }
 
+  useEffect(() => {
+    if (reCaptchaRef.current && serverError) {
+      reCaptchaRef.current.reset()
+      setValues({ ...values, reCaptcha: null })
+    }
+  }, [ reCaptchaRef, serverError ])
+
   return (
     <Fragment>
       {[ statuses.ready, statuses.loading ].includes(status) &&
@@ -169,6 +184,20 @@ const FaucetInner = ({ content, getEndpoint, hasApiKey, getTransactionURL }) =>
                 />
               </Box>
             }
+            {reCaptcha &&
+              <Box marginBottom={2}>
+                {errors.reCaptcha &&
+                  <Typography color='error'>
+                    <strong>{errors.reCaptcha}</strong>
+                  </Typography>
+                }
+                <ReCaptcha
+                  sitekey={reCaptcha.sitekey}
+                  onChange={valueOnChange('reCaptcha')}
+                  ref={reCaptchaRef}
+                />
+              </Box>
+            }
             <Box display='flex' justifyContent='flex-end'>
               <Button disabled={status === statuses.loading} type='submit' color='primary' variant='contained'>
                 {content.faucet_content.request_funds}
@@ -210,17 +239,22 @@ FaucetInner.propTypes = {
   content: PropTypes.object.isRequired,
   getEndpoint: PropTypes.func.isRequired,
   hasApiKey: PropTypes.bool.isRequired,
-  getTransactionURL: PropTypes.func
+  getTransactionURL: PropTypes.func,
+  reCaptcha: PropTypes.shape({
+    version: PropTypes.number.isRequired,
+    sitekey: PropTypes.string.isRequired
+  })
 }
 
-const Faucet = ({ getEndpoint, hasApiKey, getTransactionURL }) => (
+const Faucet = ({ getEndpoint, hasApiKey, getTransactionURL, reCaptcha }) => (
   <GlobalContentQuery
     render={content => (
       <FaucetInner
         content={content}
         getEndpoint={getEndpoint}
         hasApiKey={hasApiKey}
         getTransactionURL={getTransactionURL}
+        reCaptcha={reCaptcha}
       />
     )}
   />
@@ -229,7 +263,11 @@ const Faucet = ({ getEndpoint, hasApiKey, getTransactionURL }) => (
 Faucet.propTypes = {
   getEndpoint: PropTypes.func.isRequired,
   hasApiKey: PropTypes.bool.isRequired,
-  getTransactionURL: PropTypes.func
+  getTransactionURL: PropTypes.func,
+  reCaptcha: PropTypes.shape({
+    version: PropTypes.number.isRequired,
+    sitekey: PropTypes.string.isRequired
+  })
 }
 
 export default Faucet

src/components/MarkdownComponents/ByronFaucet.js

@@ -3,8 +3,12 @@ import Faucet from '../Faucet'
 
 export default () => (
   <Faucet
-    getEndpoint={({ address, apiKey }) => `https://faucet2.cardano-testnet.iohkdev.io/send-money/${address}?apiKey=${apiKey}`}
+    getEndpoint={({ address, apiKey, reCaptchaResponse }) => `https://faucet2.cardano-testnet.iohkdev.io/send-money/${address}?apiKey=${apiKey}&g-recaptcha-response=${reCaptchaResponse}`}
     hasApiKey
     getTransactionURL={({ txid }) => `https://cardano-explorer.cardano-testnet.iohkdev.io/tx/${txid}`}
+    reCaptcha={{
+      version: 2,
+      sitekey: '6LeUZ64ZAAAAAMHWlSUqsT2bt8HS5fZXngoyeMRB'
+    }}
   />
 )

src/components/MarkdownComponents/ITNFaucet.js

@@ -3,8 +3,12 @@ import Faucet from '../Faucet'
 
 export default () => (
   <Faucet
-    getEndpoint={({ address }) => `https://faucet.beta.jormungandr-testnet.iohkdev.io/send-money/${address}`}
+    getEndpoint={({ address, reCaptchaResponse }) => `https://faucet.nightly.jormungandr-testnet.iohkdev.io/send-money/${address}?g-recaptcha-response=${reCaptchaResponse}`}
     hasApiKey={false}
     getTransactionURL={({ txid }) => `https://shelleyexplorer.cardano.org/transaction/${txid}/`}
+    reCaptcha={{
+      version: 2,
+      sitekey: '6LceO68ZAAAAAGNXLK1IrL89KjzFykvld-sChtFr'
+    }}
   />
 )

src/components/MarkdownComponents/ShelleyHaskellFaucet.js

@@ -3,7 +3,11 @@ import Faucet from '../Faucet'
 
 export default () => (
   <Faucet
-    getEndpoint={({ address, apiKey }) => `https://faucet.shelley-testnet.dev.cardano.org/send-money/${address}?apiKey=${apiKey}`}
+    getEndpoint={({ address, apiKey, reCaptchaResponse }) => `https://faucet.shelley-testnet.dev.cardano.org/send-money/${address}?apiKey=${apiKey}&g-recaptcha-response=${reCaptchaResponse}`}
     hasApiKey
+    reCaptcha={{
+      version: 2,
+      sitekey: '6LemMq8ZAAAAADN_Iw6z3dSl0QC_tLRjJPHo9JNF'
+    }}
   />
 )

src/queries/GlobalContentQuery.js

@@ -46,6 +46,7 @@ const GlobalContentQuery = ({ render }) => (
                         success_heading
                         verify_transaction_hash
                         transaction_successful
+                        please_complete_recaptcha
                       }
                       downloaders_content {
                         version