@web3-react/core#Web3ReactProvider TypeScript Examples

The following examples show how to use @web3-react/core#Web3ReactProvider. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx    From dxvote with GNU Affero General Public License v3.0 7 votes vote down vote up 
Root = () => {
  return (
    <GlobalErrorBoundary>
      <Web3ReactProvider getLibrary={getLibrary}>
        <MultichainProvider>
          <ThemeProvider>
            <HashRouter>
              <SplitApp />
            </HashRouter>
          </ThemeProvider>
        </MultichainProvider>
      </Web3ReactProvider>
    </GlobalErrorBoundary>
  );
}
Example #2
Source File: index.tsx    From skeleton-web3-interface with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <StrictMode>
    <FixedGlobalStyle />
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <Provider store={store}>
          <Updaters />
          <ThemeProvider>
            <ThemedGlobalStyle />
            <HashRouter>
              <App />
            </HashRouter>
          </ThemeProvider>
        </Provider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </StrictMode>,
  document.getElementById('root')
)
Example #3
Source File: Default.tsx    From tokenlog with MIT License 6 votes vote down vote up 
export function Default() {
  return (
    <div>
      <BetaBanner />
      <BrowserRouter>
        <Web3ReactProvider getLibrary={getWeb3Provider}>
          <Header />

          <Suspense fallback={<Loader />}>
            <div className="container">
              <Switch>
                <Route exact path="/">
                  <Home />
                </Route>
                <Route exact path="/:org">
                  <Organization />
                </Route>
                <Route exact path="/:org/:repo">
                  <Repository />
                </Route>
                <Route exact path="/:org/:repo/stats">
                  <Stats />
                </Route>
                <Route exact path="/:org/:repo/settings">
                  <Settings />
                </Route>
                <Redirect to="/" />
              </Switch>
            </div>
          </Suspense>

          <Footer />
        </Web3ReactProvider>
      </BrowserRouter>
    </div>
  );
}
Example #4
Source File: index.tsx    From contraktor with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Web3ReactProvider getLibrary={getWeb3Provider}>
        <div>
          <Header />
        </div>
        <div className="container">
          <Switch>
            <Route exact path="/"><HomePage /></Route>
            <Route exact path="/contracts/:address"><ContractPage /></Route>
            <Route exact path="/explore"><ExplorePage /></Route>
            <Route exact path="/explore/:name"><ProjectPage /></Route>
            <Redirect to="/" />
          </Switch>
        </div>
      </Web3ReactProvider>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);
Example #5
Source File: Providers.tsx    From vvs-ui with GNU General Public License v3.0 6 votes vote down vote up 
Providers: React.FC = ({ children }) => {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <Provider store={store}>
        <ToastsProvider>
          <HelmetProvider>
            <ThemeProviderWrapper>
              <LanguageProvider>
                <RefreshContextProvider>
                  <ModalProvider>{children}</ModalProvider>
                </RefreshContextProvider>
              </LanguageProvider>
            </ThemeProviderWrapper>
          </HelmetProvider>
        </ToastsProvider>
      </Provider>
    </Web3ReactProvider>
  )
}
Example #6
Source File: index.tsx    From sushiswap-exchange with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <StrictMode>
    <FixedGlobalStyle />
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <Provider store={store}>
          <Updaters />
          <ThemeProvider>
            <ThemedGlobalStyle />
            <App />
          </ThemeProvider>
        </Provider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </StrictMode>,
  document.getElementById('root')
)
Example #7
Source File: index.tsx    From forward.swaps with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <StrictMode>
    <FixedGlobalStyle />
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <Blocklist>
          <Provider store={store}>
            <Updaters />
            <ThemeProvider>
              <ThemedGlobalStyle />
              <HashRouter>
                <App />
              </HashRouter>
            </ThemeProvider>
          </Provider>
        </Blocklist>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </StrictMode>,
  document.getElementById('root')
)
Example #8
Source File: Root.tsx    From nft-market with MIT License 6 votes vote down vote up 
Root = () => {
  return (
    <Router basename={process.env.PUBLIC_URL}>
      <Header />
      <Web3ReactProvider getLibrary={getLibrary}>
        <Connect>
          <Container>
            <Switch>
              <PrivateRoute path="/profile" component={Profile} />
              <Route exact path="/" component={Marketplace} />
            </Switch>
            <TransactionProgress />
          </Container>
        </Connect>
      </Web3ReactProvider>
    </Router>
  )
}
Example #9
Source File: Providers.tsx    From panther-frontend-dex with GNU General Public License v3.0 6 votes vote down vote up 
Providers: React.FC = ({ children }) => {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <Provider store={store}>
          <ThemeContextProvider>
            <ModalProvider>{children}</ModalProvider>
          </ThemeContextProvider>
        </Provider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  )
}
Example #10
Source File: index.tsx    From nouns-monorepo with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <ChainSubscriber />
      <React.StrictMode>
        <Web3ReactProvider
          getLibrary={
            provider => new Web3Provider(provider) // this will vary according to whether you use e.g. ethers or web3.js
          }
        >
          <ApolloProvider client={client}>
            <PastAuctions />
            <DAppProvider config={useDappConfig}>
              <LanguageProvider>
                <App />
              </LanguageProvider>
              <Updaters />
            </DAppProvider>
          </ApolloProvider>
        </Web3ReactProvider>
      </React.StrictMode>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root'),
);
Example #11
Source File: Providers.tsx    From pancake-swap-exchange-testnet with GNU General Public License v3.0 6 votes vote down vote up 
Providers: React.FC = ({ children }) => {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <Provider store={store}>
          <ThemeContextProvider>
            <ModalProvider>{children}</ModalProvider>
          </ThemeContextProvider>
        </Provider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  )
}
Example #12
Source File: Providers.tsx    From mozartfinance-swap-interface with GNU General Public License v3.0 6 votes vote down vote up 
Providers: React.FC = ({ children }) => {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <Provider store={store}>
          <ThemeContextProvider>
            <ModalProvider>{children}</ModalProvider>
          </ThemeContextProvider>
        </Provider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  )
}
Example #13
Source File: Providers.tsx    From goose-frontend-amm with GNU General Public License v3.0 6 votes vote down vote up 
Providers: React.FC = ({ children }) => {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <Provider store={store}>
          <ThemeContextProvider>
            <ModalProvider>{children}</ModalProvider>
          </ThemeContextProvider>
        </Provider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  )
}
Example #14
Source File: Providers.tsx    From glide-frontend with GNU General Public License v3.0 6 votes vote down vote up 
Providers: React.FC = ({ children }) => {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <Provider store={store}>
        <ToastsProvider>
          <HelmetProvider>
            <ThemeProviderWrapper>
              <LanguageProvider>
                <RefreshContextProvider>
                  <ModalProvider>{children}</ModalProvider>
                </RefreshContextProvider>
              </LanguageProvider>
            </ThemeProviderWrapper>
          </HelmetProvider>
        </ToastsProvider>
      </Provider>
    </Web3ReactProvider>
  )
}
Example #15
Source File: index.tsx    From dyp with Do What The F*ck You Want To Public License 6 votes vote down vote up 
ReactDOM.render(
  <StrictMode>
    <FixedGlobalStyle />
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <Provider store={store}>
          <Updaters />
          <ThemeProvider>
            <ThemedGlobalStyle />
            <HashRouter>
              <App />
            </HashRouter>
          </ThemeProvider>
        </Provider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </StrictMode>,
  document.getElementById('root')
)
Example #16
Source File: index.tsx    From cheeseswap-interface with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <StrictMode>
    <FixedGlobalStyle />
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <Provider store={store}>
          <Updaters />
          <ThemeProvider>
            <ThemedGlobalStyle />
            <App />
          </ThemeProvider>
        </Provider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </StrictMode>,
  document.getElementById('root')
)
Example #17
Source File: Providers.tsx    From cheeseswap-interface with GNU General Public License v3.0 6 votes vote down vote up 
Providers: React.FC = ({ children }) => {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <Provider store={store}>
          <ThemeContextProvider>
            <ModalProvider>{children}</ModalProvider>
          </ThemeContextProvider>
        </Provider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  )
}
Example #18
Source File: index.tsx    From sybil-interface with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <StrictMode>
    <FixedGlobalStyle />
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <Provider store={store}>
          <Updaters />
          <ThemeProvider>
            <ThemedGlobalStyle />
            <HashRouter>
              <App />
            </HashRouter>
          </ThemeProvider>
        </Provider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </StrictMode>,
  document.getElementById('root')
)
Example #19
Source File: _app.tsx    From hypertext with GNU General Public License v3.0 6 votes vote down vote up 
render(): JSX.Element {
    const { Component } = this.props
    return (
      <>
        <Head>
          <title key="title">Hypertext</title>
        </Head>
        <Base />
        <Web3ReactProvider getLibrary={getLibrary}>
          <ThemeProvider theme={theme}>
            <CSSReset />
            <FunctionalApp Component={Component} />
          </ThemeProvider>
        </Web3ReactProvider>
      </>
    )
  }
Example #20
Source File: index.tsx    From cuiswap with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <>
    <FixedGlobalStyle />
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <Provider store={store}>
          <Updaters />
          <ThemeProvider>
            <>
              <ThemedGlobalStyle />
              <App />
            </>
          </ThemeProvider>
        </Provider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </>,
  document.getElementById('root')
)
Example #21
Source File: _app.tsx    From dope-monorepo with GNU General Public License v3.0 5 votes vote down vote up 
export default function CreateDopeApp({ Component, pageProps, router }: AppProps) {
  const { pathname } = router;

  // Will probably want a better solution to conditionally
  // wrap components with providers when we have more of them.
  // This should be ok for now.
  const shouldIncludeRollYourOwn = pathname.includes('/roll-your-own');

  return (
    <>
      <GlobalStyles />
      <ChakraProvider theme={theme}>
        <QueryClientProvider client={queryClient}>
          <Hydrate state={pageProps.dehydratedState}>
            <Web3ReactProvider getLibrary={getLibrary}>
              <StarknetProvider>
                <RollYourOwnProvider>
                  <FullScreenProvider>
                    <main>
                      <PageLoadingIndicator />
                      <DesktopIconList />
                      {shouldIncludeRollYourOwn ? (
                        <RollYourOwnProvider>
                          <Component {...pageProps} />
                        </RollYourOwnProvider>
                      ) : (
                        <Component {...pageProps} />
                      )}
                    </main>
                  </FullScreenProvider>
                </RollYourOwnProvider>
              </StarknetProvider>
            </Web3ReactProvider>
            {process.env.NODE_ENV === 'development' && <ReactQueryDevtools initialIsOpen={false} />}
          </Hydrate>
        </QueryClientProvider>
      </ChakraProvider>
    </>
  );
}
Example #22
Source File: App.tsx    From ether-swr with MIT License 5 votes vote down vote up 
App = () => {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <Wallet />
    </Web3ReactProvider>
  )
}
Example #23
Source File: App.tsx    From interface-v2 with GNU General Public License v3.0 5 votes vote down vote up 
App: React.FC = () => {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <Provider store={store}>
          <Updaters />
          <Providers>
            <Popups />
            <StyledThemeProvider>
              <Gelato>
                <Web3ReactManager>
                  <Switch>
                    <Route exact path='/'>
                      <PageLayout>
                        <LandingPage />
                      </PageLayout>
                    </Route>
                    <Route exact path='/swap'>
                      <PageLayout>
                        <SwapPage />
                      </PageLayout>
                    </Route>
                    <Route exact path='/pools'>
                      <PageLayout>
                        <PoolsPage />
                      </PageLayout>
                    </Route>
                    <Route exact path='/farm'>
                      <PageLayout>
                        <FarmPage />
                      </PageLayout>
                    </Route>
                    <Route exact path='/dragons'>
                      <PageLayout>
                        <DragonPage />
                      </PageLayout>
                    </Route>
                    <Route exact path='/convert'>
                      <PageLayout>
                        <ConvertQUICKPage />
                      </PageLayout>
                    </Route>
                    <Route exact path='/analytics'>
                      <PageLayout>
                        <AnalyticsHeader />
                        <AnalyticsOverview />
                      </PageLayout>
                    </Route>
                    <Route exact path='/analytics/tokens'>
                      <PageLayout>
                        <AnalyticsHeader />
                        <AnalyticsTokens />
                      </PageLayout>
                    </Route>
                    <Route exact path='/analytics/pairs'>
                      <PageLayout>
                        <AnalyticsHeader />
                        <AnalyticsPairs />
                      </PageLayout>
                    </Route>
                    <Route exact path='/analytics/token/:id'>
                      <PageLayout>
                        <AnalyticsTokenDetails />
                      </PageLayout>
                    </Route>
                    <Route exact path='/analytics/pair/:id'>
                      <PageLayout>
                        <AnalyticsPairDetails />
                      </PageLayout>
                    </Route>
                  </Switch>
                </Web3ReactManager>
              </Gelato>
            </StyledThemeProvider>
          </Providers>
        </Provider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  );
}
Example #24
Source File: WalletProvider.tsx    From index-ui with MIT License 5 votes vote down vote up 
function UseWalletProviderWrapper(props: UseWalletProviderWrapperPropTypes) {
  return (
    <Web3ReactProvider getLibrary={(ethereum) => ethereum}>
      <WalletProvider {...props} />
    </Web3ReactProvider>
  )
}
Example #25
Source File: App.tsx    From lp-inspector with MIT License 4 votes vote down vote up 
function App() {
  const [contractAddress, setContractAddress] = useState("");
  const [routercontractAddress, setRouterContractAddress] = useState(
    PANCAKE_ROUTER
  );
  const [address, setAddress] = useState<string>(
    wa.web3 ? "" : localStorage.getItem("address") || ""
  );
  const [showDetails, setShowDetails] = useState<boolean>(false);

  useEffect(() => {
    setShowDetails(contractAddress !== "" && routercontractAddress !== "");

    return () => {
      setShowDetails(false);
    };
  }, [routercontractAddress, contractAddress, showDetails]);

  function updateWalletAddress(_address: string) {
    setAddress(_address);
    localStorage.setItem("address", _address);
  }

  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <div className="app-container">
        <div className="app-content-container">
          <div className="app-header">
            <div className="app-header-left">
              <FontAwesomeIcon icon={faSearchDollar} className="app-icon" />
              <h1>How much is my LP worth?</h1>
            </div>
            {wa.web3 && (
              <ConnectWallet callback={setAddress}>Connect</ConnectWallet>
            )}
          </div>
          {address || !wa.web3 ? (
            <>
              {!wa.web3 && (
                <AddressInput
                  placeholder="Enter your address"
                  label="Your address"
                  defaultValue={address}
                  callback={updateWalletAddress}
                />
              )}
              <AddressInput
                placeholder="Enter Masterchef address"
                label="MasterChef address"
                presets={masterChefPresets}
                callback={setContractAddress}
              />
              <AddressInput
                placeholder="Enter Router address"
                label="Router address (default to Pancakeswap)"
                defaultValue={routercontractAddress}
                presets={routerPresets}
                callback={setRouterContractAddress}
              />
              <div className="app-details-section">
                {showDetails ? (
                  <BalanceDetails
                    address={address}
                    contractAddress={contractAddress}
                    routerContractAddress={routercontractAddress}
                  />
                ) : (
                  <p>Fill contract addresses above to see details here.</p>
                )}
              </div>
            </>
          ) : (
            <p className="app-connect-wallet-first">
              Connect wallet to use the app.
            </p>
          )}
          <Footer showDonate={address !== ""} />
        </div>
      </div>
    </Web3ReactProvider>
  );
}
Example #26
Source File: index.tsx    From luaswap-interface with GNU General Public License v3.0 4 votes vote down vote up 
// const StyleLoader = styled.div`
//   position: relative;
//   width: 100%;
//   height: 100vh;
//   img {
//     animation: spin 2s linear infinite;
//     position: absolute;
//     top: 50%;
//     left: 50%;
//     transform: translate(-50%, -50%);
//   }
//   @keyframes spin {
//     0% {
//       transform: rotate(0deg);
//     }
//     100% {
//       transform: rotate(360deg);
//     }
//   }
// `
// function Loading() {
//   return (
//     <>
//       <StyleLoader>
//         <img src={ImgLoader} alt="Loading" />
//       </StyleLoader>
//     </>
//   )
// }

// function PoolsData({ children }: { children: React.ReactNode }) {
//   const [pools, setPools] = useState([])
//   const { chainId } = useWeb3React()
//   const IsTomo = IsTomoChain(chainId)
//   const supportedPoolsUrl = IsTomo ? TOMO_SUPPORTED_POOL : SUPPORTED_POOL
//   useEffect(() => {
//     async function poolSupport() {
//       let response
//       try {
//         response = await fetch(supportedPoolsUrl)
//         const data = await response.json()
//         //@ts-ignore
//         window.pools = data
//         //@ts-ignore
//         setPools(data)
//       } catch (error) {
//         console.debug(error)
//         //@ts-ignore
//         window.pools = []
//       }
//     }

//     poolSupport()
//   }, [IsTomo])

//   return pools.length > 0 ? <>{children}</> : <Loading />
// }

ReactDOM.render(
  <StrictMode>
    <FixedGlobalStyle />
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <Provider store={store}>
          <Updaters />
          <ThemeProvider>
            <ThemedGlobalStyle />
            {/* <PoolsData> */}
            <SushiProvider>
              {/* <TransactionProvider> */}
              <FarmsProvider>
                <HashRouter>
                  <ModalsProvider>
                    <App />
                  </ModalsProvider>
                </HashRouter>
              </FarmsProvider>
              {/* </TransactionProvider> */}
            </SushiProvider>
            {/* </PoolsData> */}
          </ThemeProvider>
        </Provider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </StrictMode>,
  document.getElementById('root')
)