Calling two contracts in one componentDidMount()

Hi everyone

I have a question but first, let us see these contracts:

contract A{
    
    uint y=10;
    
    function addXY(uint _x) view  public returns (uint)  {
        return (_x+y);
    }
}

contract B{
    
    uint x =5;
    
    function getx() view external returns (uint)
    {
        return x;
    }
    
}

Using Drizzle, in the front end in componentDidMount() I am trying to call getx() in contract B to get x value and then pass it to addXY in contract A and finally get the return value from addXY. I am not sure if I got it right. This is my code

componentDidMount() {
    const { drizzleState, drizzle } = this.props;

    const B = this.props.drizzle.contracts.B;
    const dataKey1 = B.methods["getx"].cacheCall({});
    const x = drizzleState.contracts.B.getx[dataKey].value;

    const A = this.props.drizzle.contracts.A;
    const dataKey2 = A.methods["addXY"].cacheCall(x,{});
    const xy = drizzleState.contracts.A.addXY[dataKey2].value;

    console.log(xy);

    this.setState({ xy });
  }

Finally, I have come up with the below solution :slight_smile:. Basically we need 2 components: A.js and B.js where B.js is a parent of A.js so from B.js we cam call getx() in B.sol and then pass the returned value to A.js. I am not sure whether it could be done in a better way?

B.js

import React, { Component } from “react”;
import A from “./A”;

class B extends Component {
state = {
dataKey: null,
x: null
};

constructor() {
super();
}

componentDidMount() {
const { drizzle } = this.props;
const B = drizzle.contracts.B;
const dataKey = B.methods[“getx”].cacheCall();
this.setState({ dataKey });
}

render() {
console.log(“A render”);
const { drizzle, drizzleState } = this.props;
const { B } = this.props.drizzleState.contracts;
const { dataKey } = this.state;

let x;
let xy;

try {
  const xValue = B.getx[dataKey].value;
  x = `${xValue}`;

  xy = <Child _x={x} drizzle={drizzle} drizzleState={drizzleState}></Child>;
} catch (e) {
  x = 0;
}

return (
  <div>
    <p>x={x}</p>
    <p>xye={xy}</p>
  </div>
);

}
}
export default B;

A.js

import React, { Component } from “react”;

class A extends Component {
state = {};

constructor() {
super();
}

componentDidMount() {
console.log(“B componentDidMount”);
const { _x, drizzleState, drizzle } = this.props;
const A = drizzle.contracts.A;
const dataKey = A.methods[“addXY”].cacheCall(_x);
this.setState({ dataKey });
}

render() {
console.log(“B render”);

const { drizzle, drizzleState } = this.props;

const A = drizzleState.contracts.A;
const getXY = A.addXY[this.state.dataKey];
const xy = `${getXY && getXY.value}`;

return xy;

}
}
export default A;

Hi Faisal yes sounds like a good solution.

Drizzle works in 2 time:

  • step 1 - configuration of which function you want to call with which argument (in componentDidMount())
  • step 2 - getting the return value of the function call (in the render() function)

So I understand that you do 1 & 2 in the parent component, pass a value to the child, then do 1 and 2 again using the value from the parent.

Nice trick!