feat: enable sign in with wallet for ecosystems

.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/dashboard/src/components/wallets/ConnectWalletMiniPlayground/MiniPlayground.tsx

@@ -79,6 +79,7 @@ function usePlaygroundWallets() {
     github: false,
     coinbase: false,
     guest: false,
+    wallet: false,
   });
 
   const [enabledWallets, setEnabledWallets] = useState<WalletRecord>({

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/extensions/prebuilts/deploy-erc1155.test.ts

@@ -1,19 +1,19 @@
 import { describe, expect, it } from "vitest";
 import { ANVIL_CHAIN } from "../../../test/src/chains.js";
 import { TEST_CLIENT } from "../../../test/src/test-clients.js";
-import { TEST_ACCOUNT_A } from "../../../test/src/test-wallets.js";
+import { TEST_ACCOUNT_B } from "../../../test/src/test-wallets.js";
 import { getContract } from "../../contract/contract.js";
 import { name } from "../common/read/name.js";
 import { deployERC1155Contract } from "./deploy-erc1155.js";
 
-// skip this test suite if there is no secret key available to test with
-// TODO: remove reliance on secret key during unit tests entirely
+const account = TEST_ACCOUNT_B;
+
 describe.runIf(process.env.TW_SECRET_KEY)("deployERC1155", () => {
   it("should deploy ERC1155 drop", async () => {
     const address = await deployERC1155Contract({
       client: TEST_CLIENT,
       chain: ANVIL_CHAIN,
-      account: TEST_ACCOUNT_A,
+      account,
       type: "DropERC1155",
       params: {
         name: "EditionDrop",
@@ -35,7 +35,7 @@ describe.runIf(process.env.TW_SECRET_KEY)("deployERC1155", () => {
     const address = await deployERC1155Contract({
       client: TEST_CLIENT,
       chain: ANVIL_CHAIN,
-      account: TEST_ACCOUNT_A,
+      account,
       type: "TokenERC1155",
       params: {
         name: "Edition",

packages/thirdweb/src/extensions/prebuilts/deploy-pack.test.ts

@@ -1,14 +1,16 @@
 import { describe, expect, it } from "vitest";
 import { ANVIL_CHAIN } from "~test/chains.js";
 import { TEST_CLIENT } from "~test/test-clients.js";
-import { TEST_ACCOUNT_A } from "~test/test-wallets.js";
+import { TEST_ACCOUNT_C } from "~test/test-wallets.js";
 import { isAddress } from "../../utils/address.js";
 import { deployPackContract } from "./deploy-pack.js";
 
+const account = TEST_ACCOUNT_C;
+
 describe.runIf(process.env.TW_SECRET_KEY)("deploy-pack contract", () => {
   it("should deploy Pack contract", async () => {
     const address = await deployPackContract({
-      account: TEST_ACCOUNT_A,
+      account,
       client: TEST_CLIENT,
       chain: ANVIL_CHAIN,
       params: {

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

@@ -129,6 +129,7 @@
         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 @@
   inAppLocale: InAppWalletLocale;
   onBack: () => void;
   walletConnect: { projectId?: string } | undefined;
+  isLinking: boolean;
   meta?: {
     title?: string;
     titleIconUrl?: string;
@@ -61,16 +62,25 @@
     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 @@
         connectionPromise: Promise<Account | Profile[]>;
       };
       passkeyLogin?: boolean;
-      walletLogin?: boolean;
+      walletLogin?: {
+        linking: boolean;
+      };
     };
 
 const defaultAuthOptions: AuthOption[] = [
@@ -186,6 +188,7 @@
 
   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 @@
 
   function handleWalletLogin() {
     setData({
-      walletLogin: true,
+      walletLogin: {
+        linking: props.isLinking || false,
+      },
     });
     props.select();
   }
@@ -467,6 +472,18 @@
         />
       )}
 
+      {/* 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;

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

@@ -57,4 +57,5 @@ export default {
   passkey: "Clave de acceso",
   linkWallet: "Vincular una billetera",
   loginAsGuest: "Inicia sesión como invitado",
+  signInWithWallet: "Iniciar sesión con billetera",
 } satisfies InAppWalletLocale;

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

@@ -58,4 +58,5 @@ export default {
   passkey: "Passkey",
   linkWallet: "Lier un portefeuille",
   loginAsGuest: "Connectez-vous en tant qu'invité",
+  signInWithWallet: "Se connecter avec portefeuille",
 } satisfies InAppWalletLocale;

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

@@ -56,4 +56,5 @@ export default {
   passkey: "パスキー",
   linkWallet: "ウォレットをリンクする",
   loginAsGuest: "ゲストとしてログイン",
+  signInWithWallet: "ウォレットでログイン",
 } satisfies InAppWalletLocale;

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

@@ -54,4 +54,5 @@ export default {
   passkey: "비밀번호",
   linkWallet: "지갑 연결",
   loginAsGuest: "게스트로 로그인",
+  signInWithWallet: "지갑으로 로그인",
 } satisfies InAppWalletLocale;

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

@@ -57,4 +57,5 @@ export default {
   passkey: "Passkey",
   linkWallet: "Mag-link ng Wallet",
   loginAsGuest: "Mag-login bilang bisita",
+  signInWithWallet: "Mag-login gamit ang Wallet",
 } satisfies InAppWalletLocale;

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

@@ -41,6 +41,7 @@ export type InAppWalletLocale = {
   signInWithApple: string;
   signInWithFacebook: string;
   signInWithGoogle: string;
+  signInWithWallet: string;
   socialLoginScreen: {
     failed: string;
     instruction: string;

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

@@ -57,4 +57,5 @@ export default {
   passkey: "Passkey",
   linkWallet: "Link a Wallet",
   loginAsGuest: "Đăng nhập với tư cách khách",
+  signInWithWallet: "Đăng nhập bằng Wallet",
 } satisfies InAppWalletLocale;

packages/thirdweb/src/wallets/ecosystem/get-ecosystem-wallet-auth-options.ts

@@ -40,5 +40,11 @@
     );
   }
 
+  // siwe is the auth option in the backend, but we want to use wallet as the auth option in the frontend
+  if (data.authOptions?.includes("siwe")) {
+    data.authOptions = data.authOptions.filter((o: string) => o !== "siwe");
+    data.authOptions.push("wallet");
+  }
+
   return data ?? null;
 }

packages/thirdweb/src/wallets/in-app/core/authentication/getLoginPath.ts

@@ -3,8 +3,8 @@
 import { type AuthOption, authOptions } from "../../../../wallets/types.js";
 import type { Ecosystem } from "../wallet/types.js";
 
-const getLoginOptionRoute = (option: AuthOption | "wallet") => {
-  if (!authOptions.includes(option as AuthOption) && option !== "wallet") {
+const getLoginOptionRoute = (option: AuthOption) => {
+  if (!authOptions.includes(option as AuthOption)) {
     throw new Error(`Unknown auth option ${option}`);
   }
   switch (option) {
@@ -22,7 +22,7 @@
   mode = "popup",
   redirectUrl,
 }: {
-  authOption: AuthOption | "wallet";
+  authOption: AuthOption;
   client: ThirdwebClient;
   ecosystem?: Ecosystem;
   mode?: "popup" | "redirect" | "window";
@@ -60,7 +60,7 @@
   client,
   ecosystem,
 }: {
-  authOption: AuthOption | "wallet";
+  authOption: AuthOption;
   client: ThirdwebClient;
   ecosystem?: Ecosystem;
 }): string => {

packages/thirdweb/src/wallets/in-app/core/authentication/types.ts

@@ -112,7 +112,7 @@ export type OAuthRedirectObject = {
 
 // TODO: type this better for each auth provider
 export type Profile = {
-  type: AuthOption | "wallet";
+  type: AuthOption;
   details: {
     id?: string;
     email?: string;

packages/thirdweb/src/wallets/types.ts

@@ -41,6 +41,7 @@ export const authOptions = [
   "email",
   "phone",
   "passkey",
+  "wallet",
 ] as const;
 export type AuthOption = (typeof authOptions)[number];