thirdweb-example · jarrodwatts · Nov 8, 2022
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -18,14 +18,11 @@ const magicLinkConnector = new MagicConnector({
   },
 });
 
-// Array of wallet connectors you want to use for your dApp.
-const connectors = [magicLinkConnector];
-
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <ThirdwebProvider
       desiredChainId={activeChainId}
-      walletConnectors={connectors}
+      walletConnectors={[magicLinkConnector, "metamask", "walletConnect"]}
       chainRpc={{
         [ChainId.Mumbai]: "https://rpc-mumbai.maticvigil.com",
       }}

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,12 +1,19 @@
 import styles from "./styles/Home.module.css";
-import { useAddress, useDisconnect } from "@thirdweb-dev/react";
+import {
+  useAddress,
+  useDisconnect,
+  useMetamask,
+  useWalletConnect,
+} from "@thirdweb-dev/react";
 import type { NextPage } from "next";
 import { useState } from "react";
 import { useMagic } from "@thirdweb-dev/react/evm/connectors/magic";
 
 const Home: NextPage = () => {
   const address = useAddress(); // Hook to grab the currently connected user's address.
   const connectWithMagic = useMagic(); // Hook to connect with Magic Link.
+  const connectMetamask = useMetamask();
+  const connectWalletConnect = useWalletConnect();
   const disconnectWallet = useDisconnect(); // Hook to disconnect from the connected wallet.
 
   const [email, setEmail] = useState<string>(""); // State to hold the email address the user entered.
@@ -83,6 +90,11 @@ const Home: NextPage = () => {
               >
                 Login
               </a>
+
+              <button onClick={() => connectMetamask()}>Metamask</button>
+              <button onClick={() => connectWalletConnect()}>
+                WalletConnect
+              </button>
             </div>
           </>
         )}