diff --git a/src/ErrorBoundary.tsx b/src/ErrorBoundary.tsx new file mode 100644 index 0000000..1052b06 --- /dev/null +++ b/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 { + 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

Something went wrong. Please try again later.

; + } + + return this.props.children; + } +} + +export default ErrorBoundary; diff --git a/src/components/TokenGetter/form.tsx b/src/components/TokenGetter/form.tsx index 1018ffa..15232b1 100644 --- a/src/components/TokenGetter/form.tsx +++ b/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({}) 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.' diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx index 5eb44ae..dedb755 100644 --- a/src/components/common/Header/index.tsx +++ b/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
-
+ return ( +
+
{!isMobile() && ( @@ -37,4 +35,5 @@ export const Header = () => {
)}
+ ) } diff --git a/src/contexts/wallets.tsx b/src/contexts/wallets.tsx index 8fa7c18..42b1186 100644 --- a/src/contexts/wallets.tsx +++ b/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({ @@ -23,7 +24,8 @@ export const WalletContext = createContext({ 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 ( - + {children} ) diff --git a/src/index.tsx b/src/index.tsx index e2d3f85..70bd06c 100644 --- a/src/index.tsx +++ b/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( - + + + );