From 5ce61478392305c0773babf7e321bc0c6909e676 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Fri, 19 Nov 2021 18:49:52 +0000
Subject: [PATCH] set up validator connection

---
 testnet-faucet/src/components/form.tsx        |  9 +++++--
 .../src/components/useValidtorClient.tsx      | 27 +++++++++++++++++++
 testnet-faucet/src/types.d.ts                 | 11 ++++++++
 3 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 testnet-faucet/src/components/useValidtorClient.tsx

diff --git a/testnet-faucet/src/components/form.tsx b/testnet-faucet/src/components/form.tsx
index 2e043ce410..15b52c449f 100644
--- a/testnet-faucet/src/components/form.tsx
+++ b/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>
diff --git a/testnet-faucet/src/components/useValidtorClient.tsx b/testnet-faucet/src/components/useValidtorClient.tsx
new file mode 100644
index 0000000000..c29475a7c2
--- /dev/null
+++ b/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 }
+}
diff --git a/testnet-faucet/src/types.d.ts b/testnet-faucet/src/types.d.ts
index 9b9471da0d..f0626d2bac 100644
--- a/testnet-faucet/src/types.d.ts
+++ b/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
+    }
+  }
+}