feat: enable sign in with wallet for ecosystems (#5153)

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/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 @@ 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 {