coinbase smart wallet

pkgs/frontend/app/components/SwitchNetwork.tsx

@@ -0,0 +1,22 @@
+import { currentChain } from "hooks/useViem";
+import { useActiveWallet } from "hooks/useWallet";
+import { type FC, useEffect } from "react";
+
+export const SwitchNetwork: FC = () => {
+  const { connectedWallet } = useActiveWallet();
+
+  useEffect(() => {
+    const switchChain = async () => {
+      if (
+        connectedWallet &&
+        Number(connectedWallet.chainId) !== currentChain.id
+      ) {
+        await connectedWallet.switchChain(currentChain.id);
+      }
+    };
+
+    switchChain();
+  }, [connectedWallet]);
+
+  return <></>;
+};

pkgs/frontend/app/root.tsx

@@ -9,8 +9,10 @@ import {
   Scripts,
   ScrollRestoration,
 } from "@remix-run/react";
+import { currentChain } from "hooks/useViem";
 import { goldskyClient } from "utils/apollo";
 import { Header } from "./components/Header";
+import { SwitchNetwork } from "./components/SwitchNetwork";
 import { ChakraProvider } from "./components/chakra-provider";
 import { useInjectStyles } from "./emotion/emotion-client";
 
@@ -49,11 +51,21 @@ export default function App() {
       <PrivyProvider
         appId={import.meta.env.VITE_PRIVY_APP_ID}
         config={{
+          appearance: {
+            walletList: ["coinbase_wallet"],
+          },
           embeddedWallets: {
             createOnLogin: "users-without-wallets",
           },
+          externalWallets: {
+            coinbaseWallet: {
+              connectionOptions: "smartWalletOnly",
+            },
+          },
+          supportedChains: [currentChain],
         }}
       >
+        <SwitchNetwork />
         <ChakraProvider>
           <Container
             bg="#fffdf8"

pkgs/frontend/hooks/useWallet.ts

@@ -98,15 +98,18 @@ export const useSmartAccountClient = (wallets: ConnectedWallet[]) => {
 export const useAccountClient = (wallets: ConnectedWallet[]) => {
   const [client, setClient] =
     useState<WalletClient<CustomTransport, typeof currentChain, Account>>();
+  const [wallet, setWallet] = useState<ConnectedWallet>();
 
   useEffect(() => {
     const create = async () => {
       setClient(undefined);
+      setWallet(undefined);
+
       if (!wallets[0]) return;
       const wallet = wallets[0];
+      setWallet(wallet);
 
       const provider = await wallet.getEthereumProvider();
-
       const walletClient = createWalletClient({
         chain: currentChain,
         transport: custom(provider),
@@ -119,12 +122,13 @@ export const useAccountClient = (wallets: ConnectedWallet[]) => {
     create();
   }, [wallets]);
 
-  return client;
+  return { client, wallet };
 };
 
 export const useActiveWallet = () => {
   const { wallets } = useWallets();
-  const walletClient = useAccountClient(wallets);
+  const { client: walletClient, wallet: connectedWallet } =
+    useAccountClient(wallets);
   const smartWalletClient = useSmartAccountClient(wallets);
 
   const isConnectingEmbeddedWallet = useMemo(() => {
@@ -140,5 +144,5 @@ export const useActiveWallet = () => {
     return smartWalletClient ? smartWalletClient : walletClient;
   }, [walletClient, smartWalletClient, isConnectingEmbeddedWallet]);
 
-  return { wallet, isSmartWallet, isConnectingEmbeddedWallet };
+  return { wallet, connectedWallet, isSmartWallet, isConnectingEmbeddedWallet };
 };