trufflesuite / drizzle

Reactive Ethereum dapp UI suite
907 stars 238 forks source link

Can't fetch two contracts in the same project? #119

Open burgossrodrigo opened 3 years ago

burgossrodrigo commented 3 years ago

Almost all my issues were solved in using drizzle except one, the page aren't fetching the two contract adresses that i'm using in the same project.

Options file:

`import Web3 from "web3";
import BALANCE from "./contracts/BALANCE.json";
import Seth from "./contracts/Seth.json";

const options = {
  web3: {
    block: false,
    customProvider: new Web3("https://data-seed-prebsc-1-s1.binance.org:8545")
  },
  contracts: [BALANCE, Seth],
  events: {
    BALANCE: ["Transfer", "Approval"],
    Seth: ["Transfer", "Approval"]
  },
};

export default options;`

My component:

import React from "react";
import { newContextComponents } from "@drizzle/react-components";
import logo from "./logo.png";

const { AccountData, ContractData, ContractForm } = newContextComponents;

export default ({ drizzle, drizzleState }) => {
  // destructure drizzle and drizzleState from props
  return (
    <div className="App">
      <div>
        <img src={logo} alt="drizzle-logo" />
        <h1>Drizzle Examples</h1>
        <p>
          Examples of how to get started with Drizzle in various situations.
        </p>
      </div>

      <div className="section">
        <h2>Active Account</h2>
        <AccountData
          drizzle={drizzle}
          drizzleState={drizzleState}
          accountIndex={0}
          units="ether"
          precision={3}
        />
      </div>

      <div className="section">
        <h2>SETH</h2>
        <p>
          Here we have a form with custom, friendly labels. Also note the token
          symbol will not display a loading indicator. We've suppressed it with
          the <code>hideIndicator</code> prop because we know this variable is
          constant.
        </p>
        <p>
          <strong>Total Supply: </strong>
          <ContractData
            drizzle={drizzle}
            drizzleState={drizzleState}
            contract="Seth"
            method="totalSupply"
            methodArgs={[{ from: drizzleState.accounts[0] }]}
          />{" "}<br /><br />
          <strong>Symbol: </strong>
          <ContractData
            drizzle={drizzle}
            drizzleState={drizzleState}
            contract="Seth"
            method="symbol"
            />
        </p>

        <div className="section">
        <h2>BALANCE</h2>
            <p>
              <strong>Total Supply: </strong>
              <ContractData
                drizzle={drizzle}
                drizzleState={drizzleState}
                contract="BALANCE"
                method="tokenURI"
                methodArgs={[{ from: drizzleState.accounts[0] }]}
              />{" "}<br /><br />
            </p>
        </div>

      </div>
    </div>
  );
};

The page is almost one hour on "fetching" although if i remove BALANCE (which is a ERC721) i can retrieve the data from erc20 SETH.

Can someone help?