fix: wallets disconnection

src/ErrorBoundary.tsx

@@ -0,0 +1,35 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    console.error("Error caught by ErrorBoundary:", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <h1>Something went wrong. Please try again later.</h1>;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/components/TokenGetter/form.tsx

@@ -2,7 +2,6 @@ import { useContext, useState } from 'react'
 import Button from '../common/Button'
 import { Input as NumericalInput } from '../common/NumericalInput'
 import { Loader } from '../common/Loader'
-import { useWeb3React } from '@web3-react/core'
 import { AxiosError } from 'axios'
 import { TokenSelect } from './TokenSelect'
 import { useHttp } from '../../utils/useHttp'
@@ -17,7 +16,6 @@ export default function Form(props: any) {
     }
   } = props
   const { post } = useHttp()
-  const { deactivate } = useWeb3React()
   const [amount, setAmount] = useState(0)
   const [token, setToken] = useState<any>({})
   const [isMaxAmountIncreased, setIsMaxAmointIncreased] = useState(false)
@@ -44,14 +42,6 @@ export default function Form(props: any) {
       .catch((err: AxiosError) => {
         const status = err.response?.status
 
-        if (status >= 500) {
-          try {
-            deactivate()
-          } catch (error) {
-            console.error(error)
-          }
-        }
-
         const details =
           status === 524
             ? 'The airdrop is taking longer than expected. Please check your tokens later.'

src/components/common/Header/index.tsx

@@ -1,20 +1,18 @@
+import { useContext } from 'react'
 import Logo from '@/assets/logo.svg'
-import { useWeb3React } from '@web3-react/core'
 import { isMobile } from '../../../config'
+import { WalletContext } from "../../../contexts/wallets";
 
 export const Header = () => {
-  const { deactivate, active } = useWeb3React()
+  const { connectedWallet, disconnectWallet } = useContext(WalletContext)
 
   async function disconnect() {
-    try {
-      deactivate()
-    } catch (ex) {
-      console.log(ex)
-    }
+    disconnectWallet()
   }
 
-  return <div className='w-full p-6 flex justify-between items-center relative z-10'>
-    <div onClick={disconnect} className={active ? 'cursor-pointer' : null}>
+  return (
+    <div className='w-full p-6 flex justify-between items-center relative z-10'>
+    <div onClick={disconnect} className={connectedWallet ? 'cursor-pointer' : ''}>
       <Logo />
     </div>
     {!isMobile() && (
@@ -37,4 +35,5 @@ export const Header = () => {
       </div>
     )}
   </div>
+  )
 }

src/contexts/wallets.tsx

@@ -15,6 +15,7 @@ interface WalletContextType {
   notification: string;
   handleConnectWallet: (wallet: EIP6963ProviderDetail) => void;
   setNotification: (message: string) => void;
+  disconnectWallet: () => void;
 }
 
 export const WalletContext = createContext<WalletContextType>({
@@ -23,7 +24,8 @@ export const WalletContext = createContext<WalletContextType>({
     currentProvider: null,
     notification: '',
     handleConnectWallet: (wallet: EIP6963ProviderDetail) => {},
-    setNotification: (message: string) => {}
+    setNotification: (message: string) => {},
+    disconnectWallet: () => {}
 })
 
 export const WalletProvider = ({ children }) => {
@@ -85,6 +87,7 @@ export const WalletProvider = ({ children }) => {
         setCurrentProvider(wallet.provider)
         connectNetwork(supportedProviders.get(wallet.info.rdns))!
     }
+
     useEffect(() => {
         window.addEventListener(EIP6963EventNames.Announce, onAnnounceProvider);
         /*
@@ -99,8 +102,14 @@ export const WalletProvider = ({ children }) => {
             window.removeEventListener(EIP6963EventNames.Announce, onAnnounceProvider)
         }
     }, [])
+
+    const disconnectWallet = () => {
+        setCurrentProvider(null)
+        setConnectedWallet('')
+    }
+
     return (
-        <WalletContext.Provider value={{ connectedWallet, currentProvider, handleConnectWallet, injectedProviders, notification, setNotification }}>
+        <WalletContext.Provider value={{ connectedWallet, currentProvider, handleConnectWallet, injectedProviders, notification, setNotification, disconnectWallet }}>
             {children}
         </WalletContext.Provider>
     )

src/index.tsx

@@ -1,10 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client';
 import App from './App'
+import ErrorBoundary from './ErrorBoundary'
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
   </React.StrictMode>
 );