2

I'm using Drizzle and react-hooks in my new open source project, but cacheSend outputs always "cacheSend is not a function"

This line of code with send works as expected

const stackId = contract.methods.createMerchant(value.name, value.category, value.weburl).send({from: drizzleState.accounts[0]})

Instead using cacheSend returns an error "cacheSend is not a function"

const stackId = contract.methods["createMerchant"].cacheSend(value.name, value.category, value.weburl, {
  from: drizzleState.accounts[0]
})

Every time I use cacheSend in this project I get the "cacheSend is not a function" error

My index.js where I set the Drizzle options

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

// import drizzle functions and contract artifact
import { Drizzle } from "drizzle";
import Coupoken from "./contracts/Coupoken.json";

// let drizzle know what contracts we want and how to access our test blockchain
const options = {
  contracts: [Coupoken],
  web3: {
    fallback: {
      type: "ws",
      url: "ws://127.0.0.1:9545",
    },
  },
};

// setup drizzle
const drizzle = new Drizzle(options);

ReactDOM.render(<App drizzle={drizzle}/>, document.getElementById('root'));

This is my App.js where I load my components

import React, { useState, useEffect, Fragment } from 'react'
import ReadString from "./ReadString";
import SetString from "./SetString";
import SetMerchant from "./SetMerchant";
import SetCoupon from "./SetCoupon";

const App = props => {
  const [drizzleReadinessState, setDrizzleReadinessState] = useState({drizzleState: null, loading: true})
  const { drizzle } = props

  useEffect(
    () => {
      const unsubscribe = drizzle.store.subscribe( () => {
        // every time the store updates, grab the state from drizzle
        const drizzleState = drizzle.store.getState()
        // check to see if it's ready, if so, update local component state
        if (drizzleState.drizzleStatus.initialized) {
          setDrizzleReadinessState({drizzleState: drizzleState, loading: false})
        }
      })
      return () => {
        unsubscribe()
      }
    }, [drizzle.store, drizzleReadinessState]
  )

  return (
    drizzleReadinessState.loading ?
      "Loading Drizzle..."
      :
      <Fragment>
        <ReadString drizzle={drizzle} drizzleState={drizzleReadinessState.drizzleState} />
        <SetString drizzle={drizzle} drizzleState={drizzleReadinessState.drizzleState} />
        <SetMerchant drizzle={drizzle} drizzleState={drizzleReadinessState.drizzleState} />
        <SetCoupon drizzle={drizzle} drizzleState={drizzleReadinessState.drizzleState} />
      </Fragment>
  )
}

export default App

My component

import React, { useState } from "react"
import { useForm } from "react-hook-form";

const SetMerchant = props => {
  const [stackId, setStackID] = useState(null)
  const { drizzle, drizzleState } = props
  const { Coupoken } = drizzleState.contracts

  const { register, handleSubmit, watch, errors } = useForm();
  const onSubmit = data => {
    setValue(data)
  };


  const setValue = value => {
    const contract = drizzle.contracts.Coupoken
    console.log(contract.methods["createMerchant"]);
    // let drizzle know we want to call the `set` method with `value`
    const stackId = contract.methods["createMerchant"].cacheSend(value.name, value.category, value.weburl, {
      from: drizzleState.accounts[0]
    })
    // save the `stackId` for later reference
    setStackID(stackId)
  }

  const getTxStatus = () => {
    // get the transaction states from the drizzle state
    const { transactions, transactionStack } = drizzleState

    // get the transaction hash using our saved `stackId`
    const txHash = transactionStack[stackId]

    // if transaction hash does not exist, don't display anything
    if (!txHash) return null;

    // otherwise, return the transaction status
    return `Transaction status: ${transactions[txHash] && transactions[txHash].status}`
  }

  return (
    <div>
      <h2>Register Merchant</h2>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="row">
          <div className="six columns">
            <label htmlFor="name">Name</label>
            <input name="name" className="u-full-width" ref={register({ required: true, pattern: /^[A-Za-z]+$/i, maxLength: 40})} />
            {errors.name && <span>Use a valid input</span>}
          </div>
          <div className="six columns">
            <label htmlFor="name">Category</label>
            <input name="category" className="u-full-width" ref={register({ required: true, pattern: /^[A-Za-z]+$/i, maxLength: 40 })} />
            {errors.category && <span>Use a valid input</span>}
          </div>
        </div>
        <div className="row">
          <div className="u-full-width">
            <label htmlFor="weburl">Website</label>
            <input name="weburl" className="u-full-width" ref={register({ required: true, maxLength: 40 })} />
            {errors.weburl && <span>Use a valid input</span>}
            </div>
          </div>
        <input className="button-primary" type="submit" value="Submit" />
      </form>
      <div>{getTxStatus()}</div>
    </div>
  )
}

export default SetMerchant

The github repo is available here

Thank you for your time

2

Solved rolling back open zeppelin to 2.5.1 and using pragma 0.5.0, drizzle may have some incompatibility issues with the last open zeppelin version that uses pragma 0.6 version. Drizzle has compatibility issues with solidity 0.6.

| improve this answer | |
  • The same error happens when using MyStringStore example contract, so I am not sure it's an incompatibility with open zeppelin. – Thykof Jul 9 at 12:14
  • 1
    @Thykof Drizzle has compatibility issues with solidity 0.6, rolling back to 0.5 (oz 2.5.1) solves the problem – Lorenzo Zaccagnini Jul 11 at 9:31
  • Is it related to sending transactions twice? – SalahAdDin Sep 3 at 13:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.