Add useEthereumProvider hook

hooks/useEthereumProvider.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import detectEthereumProvider from '@metamask/detect-provider';
+import type { ExternalProvider } from '@ethersproject/providers';
+
+export function useEthereumProvider() {
+  const [ethereumProvider, setEthereumProvider] =
+    useState<ExternalProvider | null>(null);
+  const [isMetaMask, setIsMetaMask] = useState(false);
+
+  useEffect(() => {
+    async function detectProvider() {
+      const provider = (await detectEthereumProvider()) as ExternalProvider;
+      setEthereumProvider(provider);
+
+      if (provider === window.ethereum) {
+        setIsMetaMask(!!provider);
+      }
+    }
+
+    detectProvider();
+
+    // cleanup
+    return () => {
+      setEthereumProvider(null);
+      setIsMetaMask(false);
+    };
+  }, []);
+
+  return { ethereumProvider, isMetaMask };
+}