@web3-react/core#Web3ReactProvider JavaScript 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.js    From sorbet-finance with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <Web3ReactProvider getLibrary={getLibrary}>
    <Web3ProviderNetwork getLibrary={getLibrary}>
      <ContextProviders>
        <Provider store={store}>
          <Updaters />
          <ThemeProvider>
            <>
              <GlobalStyle />
              <App />
            </>
          </ThemeProvider>
        </Provider>
      </ContextProviders>
    </Web3ProviderNetwork>
  </Web3ReactProvider>,
  document.getElementById('root')
)
Example #2
Source File: unlock.jsx    From yuni.finance with MIT License 6 votes vote down vote up 
render() {
    const { classes, closeModal } = this.props;

    return (
      <div className={ classes.root }>
        <div className={ classes.closeIcon } onClick={ closeModal }><CloseIcon /></div>
        <div className={ classes.contentContainer }>
          <Web3ReactProvider getLibrary={getLibrary}>
            <MyComponent closeModal={ closeModal} />
          </Web3ReactProvider>
        </div>
      </div>
    )
  }
Example #3
Source File: unlock.jsx    From ygov-finance with MIT License 6 votes vote down vote up 
render() {
    const { classes, closeModal, t } = this.props;

    return (
      <div className={ classes.root }>
        <div className={ classes.closeIcon } onClick={ closeModal }><CloseIcon /></div>
        <div className={ classes.contentContainer }>
          <Web3ReactProvider getLibrary={getLibrary}>
            <MyComponent closeModal={ closeModal} t={t} />
          </Web3ReactProvider>
        </div>
      </div>
    )
  }
Example #4
Source File: unlock.jsx    From iliquidate-finance with MIT License 6 votes vote down vote up 
render() {
    const { classes, closeModal, t } = this.props;

    return (
      <div className={ classes.root }>
        <div className={ classes.closeIcon } onClick={ closeModal }><CloseIcon /></div>
        <div className={ classes.contentContainer }>
          <Web3ReactProvider getLibrary={getLibrary}>
            <MyComponent closeModal={ closeModal} t={t} />
          </Web3ReactProvider>
        </div>
      </div>
    )
  }
Example #5
Source File: unlock.jsx    From ileverage-finance with MIT License 6 votes vote down vote up 
render() {
    const { classes, closeModal, t } = this.props;

    return (
      <div className={ classes.root }>
        <div className={ classes.closeIcon } onClick={ closeModal }><CloseIcon /></div>
        <div className={ classes.contentContainer }>
          <Web3ReactProvider getLibrary={getLibrary}>
            <MyComponent closeModal={ closeModal} t={t} />
          </Web3ReactProvider>
        </div>
      </div>
    )
  }
Example #6
Source File: index.js    From Smart-Swap-Protocol with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <Web3ReactProvider getLibrary={getLibrary}>
    <Web3ProviderNetwork getLibrary={getLibrary}>
      <ContextProviders>
        <Updaters />
        <ThemeProvider>
          <>
            <GlobalStyle />
            <App />
          </>
        </ThemeProvider>
      </ContextProviders>
    </Web3ProviderNetwork>
  </Web3ReactProvider>,
  document.getElementById('root')
)
Example #7
Source File: App.jsx    From locked.fyi with MIT License 6 votes vote down vote up 
function App() {
  const [box, setBox] = useState(null)
  const [space, setSpace] = useState(null)

  return (
    <Router basename={process.env.BASE_PATH}>
      <Web3ReactProvider getLibrary={getLibrary}>
        <BoxContent.Provider value={{ setBox, box, space, setSpace }}>
          <Layout>
            <Routes />
          </Layout>
        </BoxContent.Provider>
      </Web3ReactProvider>
    </Router>
  )
}
Example #8
Source File: index.js    From pine-interface with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <Web3ReactProvider getLibrary={getLibrary}>
    <Web3ProviderNetwork getLibrary={getLibrary}>
      <ContextProviders>
        <Provider store={store}>
          <Updaters />
          <ThemeProvider>
            <>
              <GlobalStyle />
              <App />
            </>
          </ThemeProvider>
        </Provider>
      </ContextProviders>
    </Web3ProviderNetwork>
  </Web3ReactProvider>,
  document.getElementById('root')
)
Example #9
Source File: index.js    From swap-frontend with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <Web3ReactProvider getLibrary={getLibrary}>
    <Web3ProviderNetwork getLibrary={getLibrary}>
      <ContextProviders>
        <Updaters />
        <ThemeProvider>
          <>
            <GlobalStyle />
            <App />
          </>
        </ThemeProvider>
      </ContextProviders>
    </Web3ProviderNetwork>
  </Web3ReactProvider>,
  document.getElementById('root')
)
Example #10
Source File: index.js    From uniswap-v1-frontend with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <Web3ReactProvider getLibrary={getLibrary}>
    <Web3ProviderNetwork getLibrary={getLibrary}>
      <ContextProviders>
        <Updaters />
        <ThemeProvider>
          <>
            <GlobalStyle />
            <App />
          </>
        </ThemeProvider>
      </ContextProviders>
    </Web3ProviderNetwork>
  </Web3ReactProvider>,
  document.getElementById('root')
)
Example #11
Source File: unlock.js    From vote-incentives with GNU General Public License v3.0 6 votes vote down vote up 
render() {
    const { classes, closeModal } = this.props;

    return (
      <div className={classes.root}>
        {closeModal && (
          <div className={classes.closeIcon} onClick={closeModal}>
            <CloseIcon />
          </div>
        )}
        <div className={classes.contentContainer}>
          <Web3ReactProvider getLibrary={getLibrary}>
            <MyComponent closeModal={closeModal} />
          </Web3ReactProvider>
        </div>
      </div>
    );
  }
Example #12
Source File: unlock.jsx    From crv.finance with MIT License 6 votes vote down vote up 
render() {
    const { classes, closeModal } = this.props;

    return (
      <div className={ classes.root }>
        <div className={ classes.closeIcon } onClick={ closeModal }><CloseIcon /></div>
        <div className={ classes.contentContainer }>
          <Web3ReactProvider getLibrary={getLibrary}>
            <MyComponent closeModal={ closeModal} />
          </Web3ReactProvider>
        </div>
      </div>
    )
  }
Example #13
Source File: index.js    From gnosis-safe-delegate-dapp with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
      <GlobalStyles />
      <ThemeProvider theme={theme}>
          <Web3ReactProvider getLibrary={getLibrary}>
            <App />
          </Web3ReactProvider>
      </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);
Example #14
Source File: withWeb3Provider.js    From origin-dollar with MIT License 6 votes vote down vote up 
withWeb3Provider = (WrappedComponent) => {
  function getLibrary(provider) {
    const library = new Web3Provider(provider)
    library.pollingInterval = 12000
    return library
  }

  const Wrapper = (props) => {
    return (
      <Web3ReactProvider getLibrary={getLibrary}>
        <WrappedComponent {...props} />
      </Web3ReactProvider>
    )
  }

  if (WrappedComponent.getInitialProps) {
    Wrapper.getInitialProps = async (ctx) => {
      const componentProps = await WrappedComponent.getInitialProps(ctx)
      return componentProps
    }
  }

  return Wrapper
}
Example #15
Source File: index.js    From dshop with MIT License 6 votes vote down vote up 
Providers = () => {
  return (
    <HashRouter>
      <Web3ReactProvider getLibrary={getLibrary}>
        <Web3ReactNetworkProvider getLibrary={getLibrary}>
          <DshopProvider>
            <PreviewBanner
              wrapperClassName="text-sm py-2 bg-white text-black"
              className="container flex justify-between"
            />
            <Switch>
              <Route path="/order" component={Confirmation} />
              <Route component={Storefront} />
            </Switch>
          </DshopProvider>
        </Web3ReactNetworkProvider>
      </Web3ReactProvider>
    </HashRouter>
  )
}
Example #16
Source File: index.js    From dshop with MIT License 6 votes vote down vote up 
Providers = () => {
  return (
    <HashRouter>
      <Web3ReactProvider getLibrary={getLibrary}>
        <Web3ReactNetworkProvider getLibrary={getLibrary}>
          <DshopProvider>
            <PreviewBanner
              wrapperClassName="text-sm py-2 bg-white text-black"
              className="container flex justify-between"
            />
            <Storefront />
          </DshopProvider>
        </Web3ReactNetworkProvider>
      </Web3ReactProvider>
    </HashRouter>
  )
}
Example #17
Source File: index.js    From Artion-Client with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <Provider store={store}>
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <Web3ReactManager>
          <App fullScreen />
        </Web3ReactManager>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </Provider>,
  document.getElementById('root')
);
Example #18
Source File: index.jsx    From semaphore_auth with MIT License 6 votes vote down vote up 
App = () => {
  initStorage()
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <ToastProvider>
        <Layout>
          <RouteTabs />
        </Layout>
      </ToastProvider>
    </Web3ReactProvider>
  )
}
Example #19
Source File: _app.js    From pure.finance with MIT License 5 votes vote down vote up 
App = ({ Component, pageProps }) => (
  <Web3ReactProvider getLibrary={getLibrary}>
    <PureContextProvider>
      <Component {...pageProps} />
    </PureContextProvider>
  </Web3ReactProvider>
)
Example #20
Source File: App.js    From lrc-staking-dapp with MIT License 5 votes vote down vote up 
App = () => (
  <Web3ReactProvider getLibrary={(provider) => new Web3(provider)}>
    <ThemeWrapper>
      <CssBaseline />
      <Router />
    </ThemeWrapper>
  </Web3ReactProvider>
)
Example #21
Source File: BasicLayout.js    From acy-dex-interface with MIT License 4 votes vote down vote up 
BasicLayout =props=> {
  // constructor(props) {
  //   super(props);
  //   getPageTitle = memoizeOne(getPageTitle);
  //   matchParamsPath = memoizeOne(matchParamsPath, isEqual);
  // }

  // componentDidMount() {
  //   const {
  //     dispatch,
  //     route: { routes, authority },
  //   } = props;
  //   // dispatch({
  //   //   type: 'user/fetchCurrent',
  //   // });
  //   dispatch({
  //     type: 'setting/getSetting',
  //   });
  //   dispatch({
  //     type: 'menu/getMenuData',
  //     payload: { routes, authority },
  //   });
  // }
  useEffect(() => {
    const {
      dispatch,
      route: { routes, authority },
    } = props;
    // dispatch({
    //   type: 'user/fetchCurrent',
    // });
    dispatch({
      type: 'setting/getSetting',
    });
    dispatch({
      type: 'menu/getMenuData',
      payload: { routes, authority },
    });
  },[])
  // 根据不同页面切换背景色
  const [bgColor,setBgColor]=useState('radialBg');
  useEffect(() => {
    const {
      location: { pathname },
    } = props;
    if(pathname.indexOf('/market')>-1){
      setBgColor('marketRadialBg');
    }
    if(pathname.indexOf('/exchange')>-1){
      setBgColor('radialBg');
    }
    if(pathname.indexOf('/liquidity')>-1){
      setBgColor('liquidityRadialBg');
    }
    if(pathname.indexOf('/farms')>-1){
      setBgColor('farmsRadialBg');
    }
    if(pathname.indexOf('/dao')>-1){
      setBgColor('daoRadialBg');
    }
    if(pathname.indexOf('/launchpad')>-1){
      setBgColor('launchpadRadialBg');
    }
    if(pathname.indexOf('/perpetual')>-1){
      setBgColor('launchpadRadialBg');
    }
    if(pathname.indexOf('/stablecoin')>-1){
      setBgColor('stableCoinRadialBg');
    }
    if(pathname.indexOf('/stats')>-1){
      setBgColor('statsRadialBg');
    }
  })
  // componentDidUpdate(preProps) {
  //   // After changing to phone mode,
  //   // if collapsed is true, you need to click twice to display
  //   const { collapsed, isMobile } = props;
  //   if (isMobile && !preProps.isMobile && !collapsed) {
  //     handleMenuCollapse(false);
  //   }
  // }

 const  getContext=()=> {
    const { location, breadcrumbNameMap } = props;
    return {
      location,
      breadcrumbNameMap,
    };
  }

  const matchParamsPath = (pathname, breadcrumbNameMap) => {
    const pathKey = Object.keys(breadcrumbNameMap).find(key => pathToRegexp(key).test(pathname));
    return breadcrumbNameMap[pathKey];
  };

  const getRouterAuthority = (pathname, routeData) => {
    let routeAuthority = ['noAuthority'];
    const getAuthority = (key, routes) => {
      routes.forEach(route => {
        if (route.path && pathToRegexp(route.path).test(key)) {
          routeAuthority = route.authority;
        } else if (route.routes) {
          routeAuthority = getAuthority(key, route.routes);
        }
        return route;
      });
      return routeAuthority;
    };
    return getAuthority(pathname, routeData);
  };

  const getPageTitle = (pathname, breadcrumbNameMap) => {
    const currRouterData = matchParamsPath(pathname, breadcrumbNameMap);

    if (!currRouterData) {
      return title;
    }
    const pageName = formatMessage({
      id: currRouterData.locale || currRouterData.name,
      defaultMessage: currRouterData.name,
    });

    return `${pageName} - ${title}`;
  };

  const getLayoutStyle = () => {
    const { fixSiderbar, isMobile, collapsed, layout } = props;
    if (fixSiderbar && layout !== 'topmenu' && !isMobile) {
      return {
        paddingLeft: collapsed ? '80px' : '256px',
      };
    }
    return null;
  };

  const handleMenuCollapse = collapsed => {
    const { dispatch } = props;
    dispatch({
      type: 'global/changeLayoutCollapsed',
      payload: collapsed,
    });
  };

  const renderSettingDrawer = () => {
    // Do not render SettingDrawer in production
    // unless it is deployed in preview.pro.ant.design as demo
    if (process.env.NODE_ENV === 'production' && APP_TYPE !== 'site') {
      return null;
    }
    return <SettingDrawer />;
  };

  const getLibrary=(provider, connector)=> {
    return new Web3Provider(provider); // this will vary according to whether you use e.g. ethers or web3.js
  }
  
    const {
      navTheme,
      layout: PropsLayout,
      children,
      location: { pathname },
      isMobile,
      menuData,
      breadcrumbNameMap,
      route: { routes },
      fixedHeader,
    } = props;
    const isTop = PropsLayout === 'topmenu';
    const routerConfig = getRouterAuthority(pathname, routes);
    const contentStyle = !fixedHeader ? { paddingTop: 0 } : {};
    const layout = 
      <Layout>
        {/* Conditional rendering: show Sidebar only in certain pages */}
        {pathname.indexOf('/launchpad')>-1 && false &&
        <Sidebar />
        }
        <Layout 
          style={{ ...getLayoutStyle(), minHeight: '100vh' }
            // background: styles.radialBg
          } 
          className={styles[bgColor]}
        >
          <SideMenu menuData={menuData} handleMenuCollapse={handleMenuCollapse} logo={logo} isMobile={isMobile} {...props} />
          <Content className={styles.content} style={contentStyle}>
            <Header menuData={menuData} handleMenuCollapse={handleMenuCollapse} logo={logo} isMobile={isMobile} {...props} />
            {children}
          </Content>
          {/* <Footer /> */}
        </Layout>
      </Layout>;
    return (
      <React.Fragment>
        <DocumentTitle title={getPageTitle(pathname, breadcrumbNameMap)}>
          <ContainerQuery query={query}>
            {params => (
              <Context.Provider value={getContext()}>
                <Web3ReactProvider getLibrary={getLibrary}>
                  <div className={classNames(params)}>{layout}</div>
                </Web3ReactProvider>
              </Context.Provider>
            )}
          </ContainerQuery>
        </DocumentTitle>
        {/* <Suspense fallback={<PageLoading />}>{renderSettingDrawer()}</Suspense> */}
      </React.Fragment>
    );
}