feat: enable sign in with wallet for ecosystems

Author: joaquim-verges

.changeset/fifty-houses-punch.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Enable Sign in with Wallet for ecosystems

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/components/client/auth-options-form.client.tsx

@@ -227,7 +227,10 @@ export function AuthOptionsForm({ ecosystem }: { ecosystem: Ecosystem }) {
                             className="h-6 w-6"
                           />
                           <p className="text-center font-normal">
-                            {option.slice(0, 1).toUpperCase() + option.slice(1)}
+                            {option === "siwe"
+                              ? "Wallet"
+                              : option.slice(0, 1).toUpperCase() +
+                                option.slice(1)}
                           </p>
                           <div className="flex-1" />
                           <FormControl>

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/types.ts

@@ -1,6 +1,9 @@
 export const authOptions = [
   "email",
   "phone",
+  "passkey",
+  "siwe",
+  "guest",
   "google",
   "facebook",
   "x",
@@ -12,7 +15,6 @@ export const authOptions = [
   "apple",
   "coinbase",
   "line",
-  "guest",
 ] as const;
 
 export type Ecosystem = {

apps/playground-web/src/components/in-app-wallet/ecosystem.tsx

@@ -8,7 +8,7 @@ const getEcosystem = () => {
     process.env.NEXT_PUBLIC_IN_APP_WALLET_URL?.endsWith(".thirdweb-dev.com")
   ) {
     // dev ecosystem
-    return "ecosystem.bonfire-development";
+    return "ecosystem.catlovers";
   }
   // prod ecosystem
   return "ecosystem.new-age";

packages/thirdweb/src/react/web/wallets/ecosystem/EcosystemWalletConnectUI.tsx

@@ -129,6 +129,7 @@ function EcosystemWalletConnectUI(props: {
         done={done}
         onBack={goBackToMain || (() => setSelectionData({}))}
         locale={props.connectLocale}
+        isLinking={state.walletLogin.linking}
       />
     );
   }

packages/thirdweb/src/react/web/wallets/in-app/InAppWalletConnectUI.tsx

@@ -116,6 +116,7 @@ function InAppWalletConnectUI(props: {
         done={done}
         onBack={goBackToMain || (() => setSelectionData({}))}
         locale={props.connectLocale}
+        isLinking={state.walletLogin.linking}
       />
     );
   }

packages/thirdweb/src/react/web/wallets/in-app/WalletAuth.tsx

@@ -28,6 +28,7 @@ export function WalletAuth(props: {
   inAppLocale: InAppWalletLocale;
   onBack: () => void;
   walletConnect: { projectId?: string } | undefined;
+  isLinking: boolean;
   meta?: {
     title?: string;
     titleIconUrl?: string;
@@ -61,16 +62,25 @@ export function WalletAuth(props: {
     setStatus("loading");
     walletToConnect.current = walletToLink;
     try {
-      await linkProfile({
-        client: props.client,
-        strategy: "wallet",
-        wallet: walletToLink,
-        chain: wallet.getChain() || defineChain(1),
-        ecosystem,
-      }).catch((e) => {
-        setError(e.message);
-        throw e;
-      });
+      if (props.isLinking) {
+        await linkProfile({
+          client: props.client,
+          strategy: "wallet",
+          wallet: walletToLink,
+          chain: wallet.getChain() || defineChain(1),
+          ecosystem,
+        }).catch((e) => {
+          setError(e.message);
+          throw e;
+        });
+      } else {
+        await wallet.connect({
+          client: props.client,
+          strategy: "wallet",
+          wallet: walletToLink,
+          chain: walletToLink.getChain() || defineChain(1),
+        });
+      }
       addConnectedWallet(walletToLink);
       done();
     } catch {

packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -57,7 +57,9 @@ export type ConnectWalletSelectUIState =
         connectionPromise: Promise<Account | Profile[]>;
       };
       passkeyLogin?: boolean;
-      walletLogin?: boolean;
+      walletLogin?: {
+        linking: boolean;
+      };
     };
 
 const defaultAuthOptions: AuthOption[] = [
@@ -186,6 +188,7 @@ export const ConnectWalletSocialOptions = (
 
   const passKeyEnabled = authOptions.includes("passkey");
   const guestEnabled = authOptions.includes("guest");
+  const siweEnabled = authOptions.includes("wallet");
 
   const placeholder =
     inputMode === "email" ? locale.emailPlaceholder : locale.phonePlaceholder;
@@ -306,7 +309,9 @@ export const ConnectWalletSocialOptions = (
 
   function handleWalletLogin() {
     setData({
-      walletLogin: true,
+      walletLogin: {
+        linking: props.isLinking || false,
+      },
     });
     props.select();
   }
@@ -467,6 +472,18 @@ export const ConnectWalletSocialOptions = (
         />
       )}
 
+      {/* SIWE login */}
+      {siweEnabled && (
+        <WalletTypeRowButton
+          client={props.client}
+          icon={getSocialIcon("")}
+          onClick={() => {
+            handleWalletLogin();
+          }}
+          title={locale.signInWithWallet}
+        />
+      )}
+
       {/* Guest login */}
       {guestEnabled && (
         <WalletTypeRowButton

packages/thirdweb/src/react/web/wallets/shared/locale/de.ts

@@ -58,4 +58,5 @@ export default {
   passkey: "Passkey",
   linkWallet: "Verknüpfen Sie eine Brieftasche",
   loginAsGuest: "Melden Sie sich als Gast an",
+  signInWithWallet: "Mit Wallet anmelden",
 } satisfies InAppWalletLocale;

packages/thirdweb/src/react/web/wallets/shared/locale/en.ts

@@ -55,6 +55,7 @@ export default {
   signInWithPhone: "Sign in with phone number",
   phoneRequired: "Phone number is required",
   passkey: "Passkey",
+  signInWithWallet: "Sign in with Wallet",
   linkWallet: "Link a Wallet",
   loginAsGuest: "Continue as guest",
 } satisfies InAppWalletLocale;