[thirdweb] feat: Add activeWallet prop to PayEmbed (#6335)

Author: joaquim-verges

.changeset/fifty-pandas-trade.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": minor
+---
+
+Add `activeWallet` prop to `PayEmbed` to pre select a wallet in the UI

apps/playground-web/src/app/connect/auth/page.tsx

@@ -134,6 +134,7 @@ import {
 import { THIRDWEB_CLIENT } from "@/lib/client";
 import { type SiweAuthOptions, useConnectModal } from "thirdweb/react";
 
+// server actions
 const auth: SiweAuthOptions = {
   isLoggedIn: (address) => isLoggedIn(address),
   doLogin: (params) => login(params),
@@ -151,6 +152,7 @@ export function AuthHook() {
       auth.doLogout();
     } else {
       connect({
+        client: THIRDWEB_CLIENT,
         auth,
       });
     }

apps/playground-web/src/components/auth/auth-hook.tsx

@@ -12,6 +12,7 @@ import {
   useConnectModal,
   useSiweAuth,
 } from "thirdweb/react";
+import { THIRDWEB_CLIENT } from "../../lib/client";
 import { Button } from "../ui/button";
 
 const auth: SiweAuthOptions = {
@@ -36,10 +37,8 @@ export function AuthHook() {
       await doLogout();
     } else {
       await connect({
+        client: THIRDWEB_CLIENT,
         auth,
-        onConnect: (wallet) => {
-          console.log("connected to", wallet);
-        },
       });
     }
   };

apps/playground-web/src/components/pay/embed.tsx

@@ -7,7 +7,6 @@ import {
   arbitrumNova,
   base,
   defineChain,
-  sepolia,
   treasure,
 } from "thirdweb/chains";
 import { PayEmbed, getDefaultToken } from "thirdweb/react";
@@ -18,18 +17,7 @@ export function StyledPayEmbedPreview() {
   return (
     <div className="flex flex-col items-center justify-center">
       <StyledConnectButton
-        chains={[
-          base,
-          defineChain(466),
-          arbitrum,
-          treasure,
-          arbitrumNova,
-          sepolia,
-        ]}
-        accountAbstraction={{
-          chain: base,
-          sponsorGas: true,
-        }}
+        chains={[base, defineChain(466), arbitrum, treasure, arbitrumNova]}
         supportedTokens={{
           466: [
             {
@@ -57,23 +45,9 @@ export function StyledPayEmbedPreview() {
             },
           ],
         }}
-        detailsButton={{
-          displayBalanceToken: {
-            466: "0x675C3ce7F43b00045a4Dab954AF36160fb57cB45",
-            8453: getDefaultToken(base, "USDC")?.address ?? "",
-            42161: "0x539bde0d7dbd336b79148aa742883198bbf60342",
-            [arbitrumNova.id]: "0xb5130f4767ab0acc579f25a76e8f9e977cb3f948",
-          },
-        }}
       />
       <div className="h-10" />
       <PayEmbed
-        connectOptions={{
-          accountAbstraction: {
-            chain: base,
-            sponsorGas: true,
-          },
-        }}
         client={THIRDWEB_CLIENT}
         theme={theme === "light" ? "light" : "dark"}
         payOptions={{

packages/thirdweb/src/react/web/ui/PayEmbed.tsx

@@ -130,6 +130,11 @@ export type PayEmbedProps = {
    */
   hiddenWallets?: WalletId[];
 
+  /**
+   * The wallet that should be pre-selected in the PayEmbed UI.
+   */
+  activeWallet?: Wallet;
+
   style?: React.CSSProperties;
 
   className?: string;
@@ -308,6 +313,12 @@ export function PayEmbed(props: PayEmbedProps) {
     }
   }, [props.connectOptions?.chains, connectionManager]);
 
+  useEffect(() => {
+    if (props.activeWallet) {
+      connectionManager.setActiveWallet(props.activeWallet);
+    }
+  }, [props.activeWallet, connectionManager]);
+
   let content = null;
   const metadata =
     props.payOptions && "metadata" in props.payOptions