add validation

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 }}

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)
+      }
+    ),
 })

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>
   )

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

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
+}

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
 }