feat(playground): update in-app wallet auth options and components (#…

…4757)
thirdweb-dev · Sep 23, 2024 · b85fe2a · b85fe2a
1 parent 5293fba
commit b85fe2a
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 31 deletions.
diff --git a/apps/playground-web/src/app/connect/in-app-wallet/page.tsx b/apps/playground-web/src/app/connect/in-app-wallet/page.tsx
@@ -1,5 +1,5 @@
 import { CodeExample } from "@/components/code/code-example";
-import { StyledConnectEmbed } from "../../../components/styled-connect-embed";
+import { InAppConnectEmbed } from "../../../components/in-app-wallet/connect-button";
 import ThirdwebProvider from "../../../components/thirdweb-provider";
 
 export default function Page() {
@@ -28,7 +28,7 @@ function AnyAuth() {
       </div>
 
       <CodeExample
-        preview={<StyledConnectEmbed />}
+        preview={<InAppConnectEmbed />}
         code={`import { inAppWallet } from "thirdweb/wallets";
         import { ConnectEmbed } from "thirdweb/react";
 
@@ -37,7 +37,21 @@ function AnyAuth() {
           inAppWallet(
             // built-in auth methods
             { auth: {
-              options: ["email", "phone", "passkey", "google", "apple", "facebook"]
+              options: [ 
+              "google",
+              "x",
+              "apple",
+              "discord",
+              "facebook",
+              "farcaster",
+              "telegram",
+              "coinbase",
+              "line",
+              "email",
+              "phone",
+              "passkey",
+              "guest",
+              ]
               }
             }
             // or bring your own auth endpoint

diff --git a/apps/playground-web/src/components/in-app-wallet/connect-button.tsx b/apps/playground-web/src/components/in-app-wallet/connect-button.tsx
@@ -1,36 +1,32 @@
 "use client";
-
-import { THIRDWEB_CLIENT } from "@/lib/client";
-import { useTheme } from "next-themes";
-import { ConnectButton } from "thirdweb/react";
-import type { ConnectButtonProps } from "thirdweb/react";
+import {} from "thirdweb/react";
 import { inAppWallet } from "thirdweb/wallets/in-app";
-import { chain } from "./constants";
-
-export function InAppConnectButton(
-  props?: Omit<ConnectButtonProps, "client" | "theme">,
-) {
-  const { theme } = useTheme();
+import { StyledConnectEmbed } from "../styled-connect-embed";
 
+export function InAppConnectEmbed() {
   return (
-    <ConnectButton
-      client={THIRDWEB_CLIENT}
-      theme={theme === "light" ? "light" : "dark"}
-      connectButton={{
-        label: "Sign in",
-      }}
-      supportedNFTs={{
-        "84532": ["0x638263e3eAa3917a53630e61B1fBa685308024fa"],
-      }}
+    <StyledConnectEmbed
       wallets={[
         inAppWallet({
-          smartAccount: {
-            chain,
-            sponsorGas: true,
+          auth: {
+            options: [
+              "google",
+              "x",
+              "apple",
+              "discord",
+              "facebook",
+              "farcaster",
+              "telegram",
+              "coinbase",
+              "line",
+              "email",
+              "phone",
+              "passkey",
+              "guest",
+            ],
           },
         }),
       ]}
-      {...props}
     />
   );
 }
diff --git a/apps/playground-web/src/components/in-app-wallet/sponsored-tx.tsx b/apps/playground-web/src/components/in-app-wallet/sponsored-tx.tsx
@@ -8,6 +8,7 @@ import {
   useActiveAccount,
   useReadContract,
 } from "thirdweb/react";
+import { inAppWallet } from "thirdweb/wallets";
 import { THIRDWEB_CLIENT } from "../../lib/client";
 import { StyledConnectButton } from "../styled-connect-button";
 import { editionDropContract, editionDropTokenId } from "./constants";
@@ -29,10 +30,26 @@ export function SponsoredInAppTxPreview() {
     <div className="flex flex-col">
       <div className="flex justify-center">
         <StyledConnectButton
-          accountAbstraction={{
-            sponsorGas: true,
-            chain: baseSepolia,
-          }}
+          wallets={[
+            inAppWallet({
+              auth: {
+                options: [
+                  "google",
+                  "x",
+                  "discord",
+                  "telegram",
+                  "email",
+                  "phone",
+                  "passkey",
+                  "guest",
+                ],
+              },
+              smartAccount: {
+                chain: baseSepolia,
+                sponsorGas: true,
+              },
+            }),
+          ]}
         />
       </div>
       {isNftLoading ? (