Merge pull request #372 from xmtp-labs/dj/extend-wallets

Extend wallets

src/controllers/SideNavController.tsx

@@ -10,7 +10,7 @@ export const SideNavController = () => {
   const resetXmtpState = useXmtpStore((s) => s.resetXmtpState);
   const clientName = useXmtpStore((s) => s.clientName);
   const clientAvatar = useXmtpStore((s) => s.clientAvatar);
-  const { disconnect: disconnectWagmi, reset: resetWagmi } = useDisconnect();
+  const { reset: resetWagmi } = useDisconnect();
 
   return (
     <SideNav
@@ -20,7 +20,6 @@ export const SideNavController = () => {
       onDisconnect={() => {
         void disconnect();
         wipeKeys(client?.address ?? "");
-        disconnectWagmi();
         resetWagmi();
         resetXmtpState();
       }}

src/main.tsx

@@ -2,12 +2,22 @@ import "./polyfills";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "@rainbow-me/rainbowkit/styles.css";
-import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import {
+  connectorsForWallets,
+  RainbowKitProvider,
+} from "@rainbow-me/rainbowkit";
 import { configureChains, createClient, WagmiConfig } from "wagmi";
 import { publicProvider } from "wagmi/providers/public";
 import { attachmentContentTypeConfig, XMTPProvider } from "@xmtp/react-sdk";
 import { mainnet } from "wagmi/chains";
 import { infuraProvider } from "wagmi/providers/infura";
+import {
+  coinbaseWallet,
+  metaMaskWallet,
+  rainbowWallet,
+  trustWallet,
+  walletConnectWallet,
+} from "@rainbow-me/rainbowkit/wallets";
 import App from "./controllers/AppController";
 import { isAppEnvDemo } from "./helpers";
 import { mockConnector } from "./helpers/mockConnector";
@@ -24,11 +34,22 @@ const { chains, provider, webSocketProvider } = configureChains(
   ],
 );
 
-const { connectors } = getDefaultWallets({
-  appName: "XMTP Inbox Web",
-  projectId: import.meta.env.VITE_PROJECT_ID,
-  chains,
-});
+const projectId = import.meta.env.VITE_PROJECT_ID;
+const appName = "XMTP Inbox Web";
+
+const connectors = connectorsForWallets([
+  {
+    groupName: "Wallets",
+    wallets: [
+      // Alpha order
+      coinbaseWallet({ appName, chains }),
+      metaMaskWallet({ chains, projectId }),
+      rainbowWallet({ chains, projectId }),
+      trustWallet({ projectId, chains }),
+      walletConnectWallet({ chains, projectId }),
+    ],
+  },
+]);
 
 const wagmiDemoClient = createClient({
   autoConnect: true,

src/pages/index.tsx

@@ -15,7 +15,7 @@ const OnboardingPage = () => {
   const { openConnectModal } = useConnectModal();
   const { client, isLoading, status, setStatus, resolveCreate, resolveEnable } =
     useInitXmtpClient();
-  const { disconnect: disconnectWagmi, reset: resetWagmi } = useDisconnect();
+  const { reset: resetWagmi } = useDisconnect();
   const { disconnect: disconnectClient } = useClient();
 
   useEffect(() => {
@@ -61,7 +61,6 @@ const OnboardingPage = () => {
           }
           setStatus(undefined);
           wipeKeys(address ?? "");
-          disconnectWagmi();
           resetWagmi();
           resetXmtpState();
         }}