Add EmbeddedWallet UI

packages/thirdweb/.eslintrc.cjs

@@ -31,7 +31,7 @@ const jsdocRuleOverrides = {
         "extension",
         "rpc",
         "transaction",
-        "wallet",
+        "walletConfig",
         "connectWallet",
         "theme",
         "locale",

packages/thirdweb/src/exports/react.ts

@@ -82,6 +82,11 @@ export {
   type SmartWalletConfigOptions,
 } from "../react/wallets/smartWallet/smartWalletConfig.js";
 
+export {
+  embeddedWalletConfig,
+  type EmbeddedWalletConfigOptions,
+} from "../react/wallets/embedded/embeddedWalletConfig.js";
+
 export type { SupportedTokens } from "../react/ui/ConnectWallet/defaultTokens.js";
 export { defaultTokens } from "../react/ui/ConnectWallet/defaultTokens.js";
 

packages/thirdweb/src/exports/wallets.ts

@@ -94,6 +94,7 @@ export {
 export { coinbaseMetadata } from "../wallets/coinbase/coinbaseMetadata.js";
 
 export { embeddedWallet } from "../wallets/embedded/core/wallet/index.js";
+export { embeddedWalletMetadata } from "../wallets/embedded/core/wallet/index.js";
 export {
   type MultiStepAuthArgsType,
   type SingleStepAuthArgsType,

packages/thirdweb/src/react/types/wallets.ts

@@ -4,7 +4,7 @@ import type { Wallet } from "../../wallets/interfaces/wallet.js";
 import type { DAppMetaData } from "../../wallets/types.js";
 
 /**
- * @wallet
+ * @walletConfig
  */
 export type WalletConfig = {
   category?: "socialLogin" | "walletLogin";
@@ -65,6 +65,9 @@ export type WalletConfig = {
   personalWalletConfigs?: WalletConfig[];
 };
 
+/**
+ * @walletConfig
+ */
 export type ScreenConfig = {
   /**
    * Hide or show the Modal that the screen is rendered in. This is useful if you want to open up another Modal as part of the wallet connection process and want to hide the current Modal to avoid showing multiple Modals at the same time
@@ -97,20 +100,9 @@ export type ScreenConfig = {
 };
 
 /**
- * @wallet
+ * @walletConfig
  */
-export type ConnectUIProps = {
-  /**
-   * The wallet config object of the wallet
-   * You can use this to use the wallet's properties / methods like `metadata`, `create`, `isInstalled` etc in your UI
-   */
-  walletConfig: WalletConfig;
-
-  /**
-   * Information about the screen that the wallet's UI and functions to control certain aspects of the screen
-   */
-  screenConfig: ScreenConfig;
-
+export type WalletConfigConnection = {
   /**
    * when wallet connection is complete, call the `complete` function with the `wallet` instance
    */
@@ -134,21 +126,71 @@ export type ConnectUIProps = {
 };
 
 /**
- * @wallet
+ * @walletConfig
  */
-export type SelectUIProps = {
+export type WalletConfigSelection = {
   /**
    * Call this function to "select" your wallet and move to next step of showing the "connectUI"
    */
   select: () => void;
 
+  /**
+   * This is true if there are no other wallets to select from and this wallet is the only option
+   */
+  isSingularOption: boolean;
+
+  /**
+   * Arbitrary data saved in Context by `selection.saveData`
+   */
+  data: any;
+
+  /**
+   * Save Arbitrary data in Context which later can be accessed via `selection.data`
+   */
+  saveData: (data: any) => void;
+};
+
+/**
+ * Props provided to the `WalletConfig.connectUI` component
+ * @walletConfig
+ */
+export type ConnectUIProps = {
+  /**
+   * The wallet config object of the wallet
+   * You can use this to use the wallet's properties / methods like `metadata`, `create`, `isInstalled` etc in your UI
+   */
+  walletConfig: WalletConfig;
+
   /**
    * Information about the screen that the wallet's UI and functions to control certain aspects of the screen
    */
   screenConfig: ScreenConfig;
 
   /**
-   * This is true if there are no other wallets to select from and this wallet is the only option
+   * Methods and properties for wallet connection
    */
-  isSingularOption: boolean;
+  connection: WalletConfigConnection;
+
+  selection: {
+    /**
+     * Arbitrary data saved in Context by `selection.saveData`
+     */
+    data: any;
+
+    /**
+     * Save Arbitrary data in Context which can be accessed via `selection.data` in connect UI
+     */
+    saveData: (data: any) => void;
+  };
+};
+
+/**
+ * Props provided to the `WalletConfig.selectUI` component
+ * @walletConfig
+ */
+export type SelectUIProps = ConnectUIProps & {
+  /**
+   * Methods and properties for wallet selection
+   */
+  selection: WalletConfigSelection;
 };

packages/thirdweb/src/react/ui/ConnectWallet/Modal/ConnectModalContent.tsx

@@ -1,5 +1,6 @@
 import {
   ModalConfigCtx,
+  SetModalConfigCtx,
   // SetModalConfigCtx,
 } from "../../../providers/wallet-ui-states-provider.js";
 import { useCallback, useContext } from "react";
@@ -32,7 +33,7 @@ export const ConnectModalContent = (props: {
   const { wallets, client, dappMetadata } = useThirdwebProviderProps();
   // const disconnect = useDisconnect();
   const modalConfig = useContext(ModalConfigCtx);
-  // const setModalConfig = useContext(SetModalConfigCtx);
+  const setModalConfig = useContext(SetModalConfigCtx);
   // const activeWalletConnectionStatus = useActiveWalletConnectionStatus();
   // const setActiveWalletConnectionStatus = useSetActiveWalletConnectionStatus();
   // const activeWallet = useActiveWallet();
@@ -44,6 +45,16 @@ export const ConnectModalContent = (props: {
   const onConnect = modalConfig.onConnect;
   const isWideModal = modalSize === "wide";
 
+  const saveData = useCallback(
+    (data: any) => {
+      setModalConfig((prev) => ({
+        ...prev,
+        data: data,
+      }));
+    },
+    [setModalConfig],
+  );
+
   // const { user } = useUser();
   // const authConfig = useThirdwebAuthContext();
 
@@ -121,6 +132,12 @@ export const ConnectModalContent = (props: {
     size: modalConfig.modalSize,
   };
 
+  const connection = {
+    done: handleConnected,
+    chain: modalConfig.chain,
+    chains: modalConfig.chains,
+  };
+
   const walletList = (
     <WalletSelector
       title={title}
@@ -131,6 +148,7 @@ export const ConnectModalContent = (props: {
       selectWallet={setScreen}
       selectUIProps={{
         screenConfig: screenConfig,
+        connection: connection,
       }}
     />
   );
@@ -144,15 +162,19 @@ export const ConnectModalContent = (props: {
       <ConnectUI
         walletConfig={walletConfig}
         screenConfig={screenConfig}
-        done={handleConnected}
-        createInstance={() => {
-          return walletConfig.create({
-            client,
-            dappMetadata,
-          });
+        connection={{
+          ...connection,
+          createInstance: () => {
+            return walletConfig.create({
+              client,
+              dappMetadata,
+            });
+          },
+        }}
+        selection={{
+          data: modalConfig.data,
+          saveData,
         }}
-        chains={modalConfig.chains}
-        chain={modalConfig.chain}
       />
     );
   };

packages/thirdweb/src/react/ui/ConnectWallet/WalletSelector.tsx

@@ -1,8 +1,9 @@
 import { ChevronLeftIcon } from "@radix-ui/react-icons";
-import { useContext, useState, useRef, useEffect } from "react";
+import { useContext, useState, useRef, useEffect, useCallback } from "react";
 import { useTWLocale } from "../../providers/locale-provider.js";
 import {
   ModalConfigCtx,
+  SetModalConfigCtx,
   // SetModalConfigCtx,
 } from "../../providers/wallet-ui-states-provider.js";
 import type { WalletConfig, SelectUIProps } from "../../types/wallets.js";
@@ -27,14 +28,11 @@ import { TWIcon } from "./icons/twIcon.js";
 import { Text } from "../components/text.js";
 import { PoweredByThirdweb } from "./PoweredByTW.js";
 import { useScreenContext } from "./Modal/screen.js";
+import { useThirdwebProviderProps } from "../../hooks/others/useThirdwebProviderProps.js";
 
 type WalletSelectUIProps = {
   screenConfig: SelectUIProps["screenConfig"];
-  // activeWalletConnectionStatus: SelectUIProps["activeWalletConnectionStatus"];
-  // connected: SelectUIProps["connected"];
-  // setActiveWalletConnectionStatus: SelectUIProps["setActiveWalletConnectionStatus"];
-  // activeWallet?: SelectUIProps["activeWallet"];
-  // activeWalletAddress?: SelectUIProps["activeWalletAddress"];
+  connection: Omit<SelectUIProps["connection"], "createInstance">;
 };
 
 // temp
@@ -446,9 +444,19 @@ const WalletSelection: React.FC<{
   maxHeight?: string;
   selectUIProps: WalletSelectUIProps;
 }> = (props) => {
-  // const modalConfig = useContext(ModalConfigCtx);
-  // const setModalConfig = useContext(SetModalConfigCtx);
+  const { client, dappMetadata } = useThirdwebProviderProps();
+  const modalConfig = useContext(ModalConfigCtx);
+  const setModalConfig = useContext(SetModalConfigCtx);
   const walletConfigs = sortWalletConfigs(props.walletConfigs);
+  const saveData = useCallback(
+    (data: any) => {
+      setModalConfig({
+        ...modalConfig,
+        data,
+      });
+    },
+    [modalConfig, setModalConfig],
+  );
 
   return (
     <WalletList>
@@ -461,13 +469,24 @@ const WalletSelection: React.FC<{
             {walletConfig.selectUI ? (
               <walletConfig.selectUI
                 screenConfig={props.selectUIProps.screenConfig}
-                select={() => {
-                  props.selectWallet(walletConfig);
-                  // setModalConfig((config) => ({ ...config, data }));
+                selection={{
+                  select: () => {
+                    props.selectWallet(walletConfig);
+                  },
+                  isSingularOption: walletConfigs.length === 1,
+                  data: modalConfig.data,
+                  saveData: saveData,
+                }}
+                connection={{
+                  ...props.selectUIProps.connection,
+                  createInstance: () => {
+                    return walletConfig.create({
+                      client,
+                      dappMetadata,
+                    });
+                  },
                 }}
-                isSingularOption={walletConfigs.length === 1}
-                // {...props.selectUIProps}
-                // connect={walletConfig.connect}
+                walletConfig={walletConfig}
               />
             ) : (
               <WalletEntryButton
@@ -487,7 +506,7 @@ const WalletSelection: React.FC<{
 /**
  * @internal
  */
-function WalletEntryButton(props: {
+export function WalletEntryButton(props: {
   walletConfig: WalletConfig;
   selectWallet: () => void;
 }) {

packages/thirdweb/src/react/wallets/coinbase/coinbaseConfig.tsx

@@ -108,7 +108,7 @@ function CoinbaseSDKWalletConnectUI(props: {
   const locale = useTWLocale().wallets.injectedWallet(
     connectUIProps.walletConfig.metadata.name,
   );
-  const { createInstance, done, chain } = connectUIProps;
+  const { createInstance, done, chain } = connectUIProps.connection;
   const [qrCodeUri, setQrCodeUri] = useState<string | undefined>(undefined);
 
   const scanStarted = useRef(false);