add embeddedWallet by default, show email in details modal

thirdweb-dev · Feb 21, 2024 · 42b9ad3 · 42b9ad3
1 parent c5f742f
commit 42b9ad3
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 22 deletions.
diff --git a/packages/thirdweb/src/exports/react.ts b/packages/thirdweb/src/exports/react.ts
@@ -103,3 +103,5 @@ export {
   type SwapStatus,
   type SwapStatusParams,
 } from "../react/hooks/pay/useSwapStatus.js";
+
+export { defaultWallets } from "../react/wallets/defaultWallets.js";
diff --git a/packages/thirdweb/src/react/ui/ConnectWallet/Details.tsx b/packages/thirdweb/src/react/ui/ConnectWallet/Details.tsx
@@ -59,6 +59,7 @@ import {
   personalWalletToSmartAccountMap,
   smartWalletMetadata,
 } from "../../../wallets/smart/index.js";
+import type { EmbeddedWallet } from "../../../wallets/embedded/core/wallet/index.js";
 
 // TEMP
 const LocalWalletId = "localWallet";
@@ -357,7 +358,7 @@ export const ConnectedWalletDetails: React.FC<{
 
       <Container px="lg">
         <ConnectedToSmartWallet />
-        {/* <EmbeddedWalletEmail /> */}
+        <EmbeddedWalletEmail />
 
         {/* Send and Receive */}
         <Container
@@ -809,22 +810,33 @@ function ConnectedToSmartWallet() {
   return null;
 }
 
-// function EmbeddedWalletEmail() {
-//   const emailQuery = useEmbeddedWalletUserEmail();
-
-//   if (emailQuery.data) {
-//     return (
-//       <Container
-//         flex="row"
-//         center="x"
-//         style={{
-//           paddingBottom: spacing.md,
-//         }}
-//       >
-//         <Text size="sm">{emailQuery.data}</Text>
-//       </Container>
-//     );
-//   }
-
-//   return undefined;
-// }
+function EmbeddedWalletEmail() {
+  const user = useEmbeddedWalletUser();
+  if (user?.email) {
+    return (
+      <Container
+        flex="row"
+        center="x"
+        style={{
+          paddingBottom: spacing.md,
+        }}
+      >
+        <Text size="sm">{user.email}</Text>
+      </Container>
+    );
+  }
+
+  return undefined;
+}
+
+function useEmbeddedWalletUser() {
+  const activeWallet = useActiveWallet();
+  const user =
+    activeWallet &&
+    "isEmbeddedWallet" in activeWallet &&
+    "getUser" in activeWallet
+      ? (activeWallet as EmbeddedWallet).getUser()
+      : undefined;
+
+  return user;
+}
diff --git a/packages/thirdweb/src/react/wallets/defaultWallets.ts b/packages/thirdweb/src/react/wallets/defaultWallets.ts
@@ -1,11 +1,13 @@
 import type { WalletConfig } from "../types/wallets.js";
 import { coinbaseConfig } from "./coinbase/coinbaseConfig.js";
+import { embeddedWalletConfig } from "./embedded/embeddedWalletConfig.js";
 import { metamaskConfig } from "./metamask/metamaskConfig.js";
 import { rainbowConfig } from "./rainbow/rainbowConfig.js";
 import { walletConnectConfig } from "./walletConnect/walletConnectConfig.js";
 import { zerionConfig } from "./zerion/zerionConfig.js";
 
 export const defaultWallets: WalletConfig[] = [
+  /* @__PURE__ */ embeddedWalletConfig(),
   /* @__PURE__ */ metamaskConfig(),
   /* @__PURE__ */ coinbaseConfig(),
   /* @__PURE__ */ walletConnectConfig(),

diff --git a/packages/thirdweb/src/react/wallets/embedded/embeddedWalletConfig.tsx b/packages/thirdweb/src/react/wallets/embedded/embeddedWalletConfig.tsx
@@ -23,7 +23,7 @@ import type {
 
 export type EmbeddedWalletConfigOptions = {
   recommended?: boolean;
-  auth: {
+  auth?: {
     options: EmbeddedWalletAuth[];
   };
 };
@@ -50,7 +50,7 @@ export const embeddedWalletConfig = (
     "apple",
     "facebook",
   ];
-  const authOptions = options?.auth.options || defaultAuthOptions;
+  const authOptions = options?.auth?.options || defaultAuthOptions;
   const hasEmail = authOptions.includes("email");
   const hasSocial =
     (hasEmail && authOptions.length > 1) ||