getLibrary does not get called

[ArinCantCode]

Bug Description
Provided callback for getLibrary does not get triggered

My main component

 <Web3ReactProvider getLibrary={getLibrary}>
      <AppContainer>
        <Row>
          <Col col={12}>
            <PurchasesCarousel purchasesCarousel={me.purchasesCarousel} />
          </Col>
          <Media greaterThanOrEqual="lg">
            {mediaClassNames => {
              return (
                <PurchaseRoadWrapper className={mediaClassNames}>
                  <PurchaseRoad purchaseRoad={me.purchaseRoad} />
                </PurchaseRoadWrapper>
              )
            }}
          </Media>
          <BarWrapper col={true} order={[-1, -1, -1, 0]}>
            <SalePointsBar salePointsBar={me.salePointsBar} />
            <BenefitsBar benefitsBar={me.benefitsBar} />
          </BarWrapper>
        </Row>
      </AppContainer>
    </Web3ReactProvider>

getLibrary

function getLibrary(provider: any): Web3Provider {
  console.log("test")
  const library = new Web3Provider(provider)
  library.pollingInterval = 12000
  return library
}

Expected Behavior

see the log "test"

Current Behavior
My app renders but the getLibrary is never executed

Additional Context
I'm working with graphql and relay / storybooks so dunno if this setup breaks anything

[johnwildspring]

@ArinCantCode I am having this same issue. What did you do to fix?

[kuanlim990]

Fh

[Ucodia]

@ArinCantCode I ran into the same issue. I found that you also need to call the activate function with the connector of your choice. Here is an example that uses the browser extension provider (injected connector).

import React from "react";
import ReactDOM from "react-dom";
import { Web3ReactProvider, useWeb3React } from "@web3-react/core";
import { InjectedConnector } from "@web3-react/injected-connector";
import { Web3Provider } from "@ethersproject/providers";

const injected = new InjectedConnector({
  supportedChainIds: [1, 3, 4, 5, 42],
});

const getLibrary = (provider, connector) => {
  const library = new Web3Provider(provider);
  library.pollingInterval = 12000;
  return library;
};

const App = () => {
  const web3 = useWeb3React();

  const handleConnect = () => {
    try {
      web3.activate(injected, undefined, true);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <button onClick={handleConnect}>Connect</button>
      <p>
        <span>Status: {web3.active ? "🟢" : web3.error ? "🔴" : "🟠"}</span>
      </p>
      <pre>{JSON.stringify(web3, null, 2)}</pre>
    </div>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <Web3ReactProvider getLibrary={getLibrary}>
      <App />
    </Web3ReactProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

[PfanP]

Same issue

[nrgapple]

@ArinCantCode I ran into the same issue. I found that you also need to call the activate function with the connector of your choice. Here is an example that uses the browser extension provider (injected connector).

import React from "react";
import ReactDOM from "react-dom";
import { Web3ReactProvider, useWeb3React } from "@web3-react/core";
import { InjectedConnector } from "@web3-react/injected-connector";
import { Web3Provider } from "@ethersproject/providers";

const injected = new InjectedConnector({
  supportedChainIds: [1, 3, 4, 5, 42],
});

const getLibrary = (provider, connector) => {
  const library = new Web3Provider(provider);
  library.pollingInterval = 12000;
  return library;
};

const App = () => {
  const web3 = useWeb3React();

  const handleConnect = () => {
    try {
      web3.activate(injected, undefined, true);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <button onClick={handleConnect}>Connect</button>
      <p>
        <span>Status: {web3.active ? "🟢" : web3.error ? "🔴" : "🟠"}</span>
      </p>
      <pre>{JSON.stringify(web3, null, 2)}</pre>
    </div>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <Web3ReactProvider getLibrary={getLibrary}>
      <App />
    </Web3ReactProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Thanks for posting something that actually gives an example of a Web3Provider.