Integrate EIP-6963 modal on ConnectWallet page

oasisprotocol · Apr 19, 2024 · 08196a0 · 08196a0
1 parent 032bfa5
commit 08196a0
Showing 1 changed file with 45 additions and 5 deletions.
diff --git a/src/pages/ConnectWallet/index.tsx b/src/pages/ConnectWallet/index.tsx
@@ -5,10 +5,24 @@ import { UnknownNetworkError } from '../../utils/errors'
 import { Alert } from '../../components/Alert'
 import { METAMASK_HOME_PAGE } from '../../constants/config'
 import { useWeb3 } from '../../hooks/useWeb3'
+import { WalletModal } from '../../components/WalletModal'
+import { ProviderType } from '../../providers/Web3Context.ts'
+import { useEIP6963 } from '../../hooks/useEIP6963.ts'
+import { useEIP1193 } from '../../hooks/useEIP1193.ts'
 
 export const ConnectWallet: FC = () => {
-  const { connectWallet, switchNetwork, isProviderAvailable } = useWeb3()
+  const {
+    state: { isEIP6963ProviderAvailable },
+  } = useEIP6963()
+  const { isEIP1193ProviderAvailable } = useEIP1193()
+  const {
+    state: { providerType },
+    connectWallet,
+    switchNetwork,
+    isProviderAvailable,
+  } = useWeb3()
   const [isLoading, setIsLoading] = useState(false)
+  const [isWalletModalOpen, setIsWalletModalOpen] = useState(false)
   const [error, setError] = useState('')
   const [providerAvailable, setProviderAvailable] = useState(true)
   const [isUnknownNetwork, setIsUnknownNetwork] = useState(false)
@@ -22,12 +36,33 @@ export const ConnectWallet: FC = () => {
 
     init()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [window.ethereum])
+  }, [])
+
+  useEffect(() => {
+    const setAvailable = async () => {
+      setProviderAvailable((await isEIP1193ProviderAvailable()) || isEIP6963ProviderAvailable)
+    }
+
+    setAvailable()
+  }, [isEIP1193ProviderAvailable, isEIP6963ProviderAvailable])
+
+  const handleProviderConnectionType = () => {
+    // This is async version of EIP-6963
+    if (isEIP6963ProviderAvailable) {
+      setIsWalletModalOpen(true)
+
+      return
+    }
+
+    handleConnectWallet(ProviderType.EIP1193)
+  }
+
+  const handleConnectWallet = async (walletProviderType: ProviderType = providerType) => {
+    setIsWalletModalOpen(false)
 
-  const handleConnectWallet = async () => {
     setIsLoading(true)
     try {
-      await connectWallet()
+      await connectWallet(walletProviderType)
     } catch (ex) {
       if (ex instanceof UnknownNetworkError) {
         setIsUnknownNetwork(true)
@@ -86,7 +121,7 @@ export const ConnectWallet: FC = () => {
                 Please connect your wallet to get started.
               </p>
 
-              <Button onClick={handleConnectWallet} disabled={isLoading} fullWidth>
+              <Button onClick={handleProviderConnectionType} disabled={isLoading} fullWidth>
                 Connect wallet
               </Button>
               {error && <Alert variant="danger">{error}</Alert>}
@@ -108,6 +143,11 @@ export const ConnectWallet: FC = () => {
           )}
         </>
       )}
+      <WalletModal
+        isOpen={isWalletModalOpen}
+        closeModal={() => setIsWalletModalOpen(false)}
+        next={() => handleConnectWallet(ProviderType.EIP6963)}
+      />
     </>
   )
 }