React Component for Smart Contract ABI Interface

DappFunctionsForm.jsx

import React, { useState } from 'react';
import Modal from '../utils/Modal';
 
import {useOutletContext} from 'react-router-dom'

import {ethers} from 'ethers'

import FunctionSection from '@/views/components/FunctionSection.jsx'

function Main({contractAddress,contractAbi}) {
 

const [web3Store] = useOutletContext()
 
const callContractFn = async( funcName, funcArgs )=>{

  let provider = web3Store.provider

  let signer = provider.getSigner(web3Store.account)

  let contract = new ethers.Contract(contractAddress, contractAbi, signer);

  let response = await contract[funcName](...funcArgs)

  console.log({response})
  return response 
}



const contractFunctions = contractAbi.filter((frag)=> frag.type == 'function')
 

return (
    <div  >
        <div>
            Contract Functions 
        </div>

        <div>
            {contractFunctions.map((func,index)=>(

                <FunctionSection
                   key={index}
                  func={func} 
                  callContractFn={callContractFn} 
                />
               

            )) }
        </div>
 

    </div>
    
  );
}

export default Main;

FunctionInputField.jsx

import React, { useState } from 'react';
import Modal from '../utils/Modal';
 
import {useOutletContext} from 'react-router-dom'


 
function Main({fieldType, fieldName,onChange}) {
  
 

return (
    <div className="flex flex-col my-2" >
        <div> {fieldName}  </div>
        <input  
            className="border-2 border-gray-500 rounded p-1"
            onChange={ (evt)=> {
                onChange(  fieldName, evt.target.value)
            
            }}
        />
        
        
    </div>
    
  );
}

export default Main;

FunctionSection.jsx

import React, { useState } from 'react';
import Modal from '../utils/Modal';
 
import {useOutletContext} from 'react-router-dom'



import FunctionInputField from '@/views/components/FunctionInputField.jsx'


 
function Main({func, callContractFn}) {
  
const [web3Store] = useOutletContext()

let [outputMessage,setOutputMessage] = useState(undefined)
///let outputMessage = undefined 

let functionArguments = {}


const callFunction = async( funcName )=>{


    let funcArgNames = func.inputs.map((input)=> input.name)

    let funcArgs = funcArgNames.map((argName)=> functionArguments[argName])


    console.log('calling function ', funcName, funcArgs)

    let response = await callContractFn(funcName,funcArgs)
 

    if(response){
        setOutputMessage(response)
    }
}


const updateFunctionArgument = (  fieldName, fieldValue)=>{

console.log("updateFunctionArgument",  fieldName,fieldValue)
 

functionArguments[fieldName] = fieldValue


}





return (
              <div 
                className="p-2 my-2 border-2 border-gray-500 rounded flex flex-col"
               
                >
                 <div className="font-bold text-md mb-2">
                     {func.name}

                </div>


                <div  className="text-sm py-2 " >
                    <div className="flex flex-col">

                        {func.inputs.map((input,index)=>(

                            <div className="flex flex-row" key={index}>
                                <FunctionInputField
                                key={index}
                                fieldType={input.type}
                                fieldName={input.name}
                               
                                onChange={ updateFunctionArgument }
                                />
                            </div>

                        ))}
                    </div>

                    <button
                    className="bg-blue-500 hover:bg-blue-400 text-white p-2 rounded mt-2"
                    onClick={()=>{ callFunction( func.name ) }}>
                        Submit
                    </button>

                    {outputMessage &&
                        <div className="my-2 text-xs ">
                            {outputMessage}
                        </div>
                    }

                </div>

                </div>
    
  );
}

export default Main;