web3 react readonly provider error fix

1import { StrictMode, Component } from 'react'
2import { createWeb3ReactRoot, Web3ReactProvider } from '@web3-react/core'
3import * as uniwallet from 'uni-wallet-connect'
4import '../styles/global.css'
5import '@reach/dialog/styles.css'
6
7// TODO fix this
8class ErrorBoundaryWeb3ProviderNetwork extends Component {
9  constructor(props) {
10    super(props)
11    this.state = { hasError: false }
12  }
13
14  static getDerivedStateFromError() {
15    // Update state so the next render will show the fallback UI.
16    return { hasError: true }
17  }
18  render() {
19    let Web3ProviderNetwork
20    try {
21      Web3ProviderNetwork = createWeb3ReactRoot('NETWORK')
22    } catch (e) {
23      return <>{this.props.children}</>
24    }
25    if (this.state.hasError) {
26      return <>{this.props.children}</>
27    }
28    return <Web3ProviderNetwork getLibrary={uniwallet.getLibrary}>{this.props.children}</Web3ProviderNetwork>
29  }
30}
31export default function App({ Component, pageProps }) {
32  return (
33    <StrictMode>
34      <Web3ReactProvider getLibrary={uniwallet.getLibrary}>
35        <ErrorBoundaryWeb3ProviderNetwork>
36          <Component {...pageProps} />
37        </ErrorBoundaryWeb3ProviderNetwork>
38      </Web3ReactProvider>
39    </StrictMode>
40  )
41}
42
43

1import React from "react";
2import  * as uniwallet from "uni-wallet-connect";
3import {
4  AppWrapper,
5  HeaderWrapper,
6  BodyWrapper,
7  Marginer,
8  HeaderFrame,
9  HeaderControls,
10} from "./index.styles";
11const {
12  Web3StatusManager,
13  Web3StatusProvider,
14  Updaters,
15  URLWarning,
16  CurrentBlockNumber,
17  Popups,
18  Web3Status,
19}  = uniwallet;
20
21// Example layout
22export function Layout({ children }: { children: JSX.Element }) {
23  return (
24    <AppWrapper>
25      <Web3StatusProvider>
26        <URLWarning />
27        <Updaters />
28        <HeaderWrapper>
29          <HeaderFrame>
30            <HeaderControls>
31              <Web3Status />
32            </HeaderControls>
33          </HeaderFrame>
34        </HeaderWrapper>
35        <BodyWrapper>
36          <CurrentBlockNumber />
37          <Popups />
38          <Web3StatusManager>{children}</Web3StatusManager>
39          <Marginer />
40        </BodyWrapper>
41      </Web3StatusProvider>
42    </AppWrapper>
43  );
44}
45
46