I am using wagmi wallet connector and it give error whenever internet isn't connected and the whole screen went red to get rid of it I decided to put internet check on my app, I have used multiple way but none of them worked for me.
The following is the code of my index.js file
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from './store';
import { BrowserRouter } from 'react-router-dom';
import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
import { Web3Modal } from '@web3modal/react'
import { configureChains, createConfig, WagmiConfig } from 'wagmi'
import { InjectedConnector } from '@wagmi/core/connectors/injected'
import { WalletConnectConnector } from '@wagmi/core/connectors/walletConnect'
import { sepolia } from 'wagmi/chains'
const chains = [sepolia]
const projectId = '*****************'
const { publicClient, webSocketPublicClient } = configureChains(chains, [w3mProvider({ projectId })])
const wagmiConfig = createConfig({
connectors: [
new InjectedConnector({ chains }),
new WalletConnectConnector({
chains,
options: {
projectId: projectId,
},
}),
],
autoConnect: true,
connectors: w3mConnectors({ projectId, chains }),
publicClient, webSocketPublicClient
})
const ethereumClient = new EthereumClient(wagmiConfig, chains)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<Provider store={store}>
<WagmiConfig config={wagmiConfig}>
<App ethereumClient={w3mProvider} />
</WagmiConfig>
</Provider>
</BrowserRouter>
<Web3Modal projectId={projectId} ethereumClient={ethereumClient} />
</React.StrictMode>
);
reportWebVitals();
I have use multiple options to get rid of it but all of them got wasted, and the next code is of my App.js file
import React, { useState,useEffect } from 'react'
import Head from './Component/Head/Head'
import "./App.css"
import { ToastContainer, toast } from 'react-toastify';
import { loadFull } from "tsparticles";
import 'react-toastify/dist/ReactToastify.css';
import { Route, Routes } from 'react-router-dom';
import Main_home_page from './Component/Main_home_page/Main_home_page';
import Footer_up from './Component/Footer_up/Footer_up';
import Swap from './Component/Swap/Swap';
import {CrowdFundingProvider} from './Context/Crowdfunding'
import Index from './Index.jsx';
function App() {
const [isOnline, setIsOnline] = useState(navigator.onLine);
useEffect(() => {
const handleOnline = () => {
setIsOnline(true);
};
const handleOffline = () => {
setIsOnline(false);
};
window.addEventListener('online', handleOnline);
window.addEventListener('offline', handleOffline);
return () => {
window.removeEventListener('online', handleOnline);
window.removeEventListener('offline', handleOffline);
};
}, []);
useEffect(() => {
if (!isOnline) {
toast.warn("Check your Internet Connection.")
console.log('Offline: Please check your internet connection');
}
}, [isOnline]);
return (
<div className='' >
{isOnline?(
<div className='back'>
<CrowdFundingProvider>
<ToastContainer />
<Head />
<Routes>
<Route path='/' element={<Main_home_page />} />
<Route path='/Swap' element={<Swap />} />
<Route path='/Index' element={<Index/>}/>
</Routes>
<Footer_up />
</CrowdFundingProvider>
</div>
):
(
<div>
<h1>Check Your Connection</h1>
<p>Please check your internet connection and try again.</p>
</div>
)
}
</div>
)
}
export default App
I have used react-detect-offline for it also, but It also didn't work when I cover my all app in it them whole screen disappears without showing even single error even on console., here is my code for that, import React from "react";
import {Detector} from "react-detect-offline";
const CheckConnection=props=>{
return(
<>
<Detector
render={({online})=>(
online? props.chindren:
<div style={{paddingTop:'10px', textAlign:'center'}}>
<h1 style={{marginBottom:'5px'}}>No Connection</h1>
<h4 style={{margin:'0'}}>Please check your internet connection</h4>
</div>
)}
/>
</>
)
}
export default CheckConnection;
I tried my best to explain the problem. Kindly try to locate what mistake am I making and help me to get rid of it.