From 02fb2e56ca94babb20376e36066363e9da57d5b3 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Tue, 15 Feb 2022 16:34:41 +0000
Subject: [PATCH] add validation

---
 testnet-faucet/src/components/form/index.tsx  | 16 +++++----
 .../src/components/form/validationSchema.ts   | 12 ++++---
 testnet-faucet/src/components/header.tsx      |  3 --
 testnet-faucet/src/context/index.tsx          | 35 +++++++++++++------
 testnet-faucet/src/hooks/useLocalStorage.ts   | 33 +++++++++++++++++
 testnet-faucet/src/utils.ts                   |  1 +
 6 files changed, 75 insertions(+), 25 deletions(-)
 create mode 100644 testnet-faucet/src/hooks/useLocalStorage.ts

diff --git a/testnet-faucet/src/components/form/index.tsx b/testnet-faucet/src/components/form/index.tsx
index c39c9e250b..143a4e502d 100644
--- a/testnet-faucet/src/components/form/index.tsx
+++ b/testnet-faucet/src/components/form/index.tsx
@@ -33,12 +33,14 @@ export const Form = () => {
     useContext(GlobalContext)
 
   const onSubmit: SubmitHandler<TFormData> = async (data) => {
-    const nymts = getCoinValue(data.amount)
-    await requestTokens({
-      address: data.address,
-      unymts: nymts.toString(),
-      nymts: data.amount,
-    })
+    if (+data.amount < 101) {
+      const nymts = getCoinValue(data.amount)
+      await requestTokens({
+        address: data.address,
+        unymts: nymts.toString(),
+        nymts: data.amount,
+      })
+    }
     resetForm()
   }
 
@@ -60,7 +62,7 @@ export const Form = () => {
         disabled={isSubmitting}
       />
       <TextField
-        label="Amount (NYMT)"
+        label="Amount (max 101 NYMT)"
         fullWidth
         {...register('amount')}
         sx={{ mb: 2 }}
diff --git a/testnet-faucet/src/components/form/validationSchema.ts b/testnet-faucet/src/components/form/validationSchema.ts
index 9be8cc5e27..4aaeca8a6c 100644
--- a/testnet-faucet/src/components/form/validationSchema.ts
+++ b/testnet-faucet/src/components/form/validationSchema.ts
@@ -5,8 +5,12 @@ export const validationSchema = Yup.object().shape({
   address: Yup.string().strict().trim('Cannot have leading space').required(),
   amount: Yup.string()
     .required()
-    .test('valid-amount', 'A valid amount is required', (amount) => {
-      if (!amount) return false
-      return validAmount(amount)
-    }),
+    .test(
+      'valid-amount',
+      'A valid amount is required. (max 101 nymt)',
+      (amount) => {
+        if (!amount) return false
+        return validAmount(amount)
+      }
+    ),
 })
diff --git a/testnet-faucet/src/components/header.tsx b/testnet-faucet/src/components/header.tsx
index d12e8ce51a..5b6f0ea0ad 100644
--- a/testnet-faucet/src/components/header.tsx
+++ b/testnet-faucet/src/components/header.tsx
@@ -25,9 +25,6 @@ export const Header = () => {
             </Typography>
           )}
         </Grid>
-        <Grid item xs={12} md={6}>
-          <Balance />
-        </Grid>
       </Grid>
     </Box>
   )
diff --git a/testnet-faucet/src/context/index.tsx b/testnet-faucet/src/context/index.tsx
index 4c882d56ba..5e01086e9f 100644
--- a/testnet-faucet/src/context/index.tsx
+++ b/testnet-faucet/src/context/index.tsx
@@ -2,6 +2,7 @@ import { createContext, useEffect, useState } from 'react'
 import ClientValidator, {
   nativeToPrintable,
 } from '@nymproject/nym-validator-client'
+import { useLocalStorage } from '../hooks/useLocalStorage'
 
 export const urls = {
   blockExplorer: 'https://sandbox-blocks.nymtech.net',
@@ -25,7 +26,8 @@ type TGlobalContext = {
 
 export const GlobalContext = createContext({} as TGlobalContext)
 
-const { VALIDATOR_ADDRESS, MNEMONIC, TESTNET_URL_1, ACCOUNT_ADDRESS } = process.env
+const { VALIDATOR_ADDRESS, MNEMONIC, TESTNET_URL_1, ACCOUNT_ADDRESS } =
+  process.env
 
 export enum EnumRequestType {
   balance = 'balance',
@@ -58,6 +60,8 @@ export const GlobalContextProvider: React.FC = ({ children }) => {
     setValidator(Validator)
   }
 
+  const [lsState, setLsState] = useLocalStorage<boolean>('hasUsedFaucet', false)
+
   useEffect(() => {
     if (loadingState.isLoading) {
       setError(undefined)
@@ -95,16 +99,23 @@ export const GlobalContextProvider: React.FC = ({ children }) => {
     nymts: string
   }) => {
     setTokenTransfer(undefined)
-    setLoadingState({ isLoading: true, requestType: EnumRequestType.tokens })
-    try {
-      await validator?.send(ACCOUNT_ADDRESS, address, [
-        { amount: unymts, denom: 'unymt' },
-      ])
-      setTokenTransfer({ address, amount: nymts })
-    } catch (e) {
-      setError(`An error occured during the transfer request: ${e}`)
-    } finally {
-      setLoadingState({ isLoading: false, requestType: undefined })
+    if (!lsState) {
+      setLoadingState({ isLoading: true, requestType: EnumRequestType.tokens })
+      try {
+        await validator?.send(ACCOUNT_ADDRESS, address, [
+          { amount: unymts, denom: 'unymt' },
+        ])
+        setTokenTransfer({ address, amount: nymts })
+        setLsState(true)
+      } catch (e) {
+        setError(
+          'The faucet is currently running dry. Please try again in a minute.'
+        )
+      } finally {
+        setLoadingState({ isLoading: false, requestType: undefined })
+      }
+    } else {
+      setError('Funds are no longer available')
     }
   }
 
@@ -123,3 +134,5 @@ export const GlobalContextProvider: React.FC = ({ children }) => {
     </GlobalContext.Provider>
   )
 }
+
+// 1 min > 101 nymt
diff --git a/testnet-faucet/src/hooks/useLocalStorage.ts b/testnet-faucet/src/hooks/useLocalStorage.ts
new file mode 100644
index 0000000000..3bc0e06c62
--- /dev/null
+++ b/testnet-faucet/src/hooks/useLocalStorage.ts
@@ -0,0 +1,33 @@
+import { useState } from 'react'
+
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    if (typeof window === 'undefined') {
+      return initialValue
+    }
+    try {
+      const item = window.localStorage.getItem(key)
+
+      return item ? JSON.parse(item) : initialValue
+    } catch (error) {
+      console.log(error)
+      return initialValue
+    }
+  })
+
+  const setValue = (value: T | ((val: T) => T)) => {
+    try {
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value
+
+      setStoredValue(valueToStore)
+
+      if (typeof window !== 'undefined') {
+        window.localStorage.setItem(key, JSON.stringify(valueToStore))
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  }
+  return [storedValue, setValue] as const
+}
diff --git a/testnet-faucet/src/utils.ts b/testnet-faucet/src/utils.ts
index 5453a4236c..b0b37da80d 100644
--- a/testnet-faucet/src/utils.ts
+++ b/testnet-faucet/src/utils.ts
@@ -7,5 +7,6 @@ export const getCoinValue = (raw: string): number => {
 
 export const validAmount = (amount: string): boolean => {
   if (isNaN(+amount)) return false
+  if (+amount > 101) return false
   return true
 }