set up validator connection

testnet-faucet/src/components/form.tsx

@@ -1,7 +1,7 @@
 import { Button, TextField, useMediaQuery } from '@mui/material'
 import { Box } from '@mui/system'
-import ClientValidator from '@nymproject/nym-validator-client'
 import { useForm, SubmitHandler } from 'react-hook-form'
+import { useValidatorClient } from './useValidtorClient'
 
 type TFormData = {
   address: string
@@ -23,7 +23,8 @@ export const Form = () => {
     setValue('amount', '')
   }
 
-  const checkBalance = async () => {}
+  const { getBalance } = useValidatorClient()
+
   return (
     <>
       <TextField
@@ -44,6 +45,10 @@ export const Form = () => {
           variant="outlined"
           sx={matches ? { mb: 1 } : { mr: 1 }}
           fullWidth={matches}
+          onClick={async () => {
+            const balance = await getBalance()
+            console.log(balance)
+          }}
         >
           Check Balance
         </Button>

testnet-faucet/src/components/useValidtorClient.tsx

@@ -0,0 +1,27 @@
+import ClientValidator from '@nymproject/nym-validator-client'
+import { useEffect, useState } from 'react'
+
+const { VALIDATOR_ADDRESS, MNEMONIC, TESTNET_URL_1, ACCOUNT_ADDRESS } =
+  process.env
+
+export const useValidatorClient = () => {
+  const [validator, setValidator] = useState<ClientValidator>()
+
+  const getValidator = async () => {
+    const Validator = await ClientValidator.connect(
+      VALIDATOR_ADDRESS,
+      MNEMONIC,
+      [TESTNET_URL_1],
+      ACCOUNT_ADDRESS
+    )
+    setValidator(Validator)
+  }
+
+  useEffect(() => {
+    getValidator()
+  }, [])
+
+  const getBalance = async () => await validator?.getBalance(ACCOUNT_ADDRESS)
+
+  return { getBalance }
+}

testnet-faucet/src/types.d.ts

@@ -2,3 +2,14 @@ declare module '*.svg' {
   const content: any
   export default content
 }
+
+namespace NodeJS {
+  export interface Process {
+    env: {
+      VALIDATOR_ADDRESS: string
+      MNEMONIC: string
+      TESTNET_URL_1: string
+      ACCOUNT_ADDRESS: string
+    }
+  }
+}