First Try of a generalized Drizzle Based Transaction Component with Context.Consumer

ContractSend.tsx

/* global web3 */
import React from 'react';
import { DrizzleContext } from "drizzle-react";
import { drizzleProviderFactory } from '../../Provider';


type IDrizzleContext = {
  drizzle: object
  drizzleState: object
  initialized: boolean
}


type IContractSendProps = {
  contractName: string
}


export class ContractSend extends React.Component<IContractSendProps> {
  private drizzle
  private initialized
  private drizzleState

  send(methodName, parameters){
    const contract = this.drizzle.contracts[this.props.contractName]

    if(!this.initialized) throw Error('Drizzle not initialized')
    if(!contract) throw Error('contractName not found')
    if(!contract.methods[methodName]) throw Error('methodName not found')
    
    // get correct abi
    const abi = contract.abi.find( item => item.name === methodName )

    // check if inputs are matching
    if(Object.keys(parameters).length !== abi.inputs.length) throw Error(`${parameters.length} parameters given. But expected ${abi.inputs.length}`)
    
    // check if parameter type matches inputs
    // TODO: collect params in correct order
    const params = abi.inputs.map( input => {
      return parameters[input.name]
    })

    // check if all names are correct and all parameters are there
    if(params.length === 0 
    || params.length !== abi.inputs.length) throw Error('parameter name mismatch!')

    // TODO check parameters for correct types!
    //

    // all seems good make the transaction!
    contract.methods[methodName].cacheSend(params, {from: web3._provider.selectedAddress})

    // create transactions and keep the transaction hash in the store
    // contract.methods.deposit.cacheSend(4,{from:'0x0000000000000000000000000000000000000000'})

    // just create transaction and not care about it
    // contract.methods.deposit(4).send({from:'0x0000000000000000000000000000000000000000'})
  }

  render(){
    return <DrizzleContext.Consumer>
    { ({drizzle, drizzleState, initialized} : DrizzleContext) => {
      this.drizzle = drizzle
      this.drizzleState = drizzleState
      this.initialized = initialized
    }}
    </DrizzleContext.Consumer>
  }
}