fix: enable default smart wallet chain for ecosystem page

Author: ElasticBottle

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

@@ -23,10 +23,15 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { Switch } from "@/components/ui/switch";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { NetworkSelectorButton } from "components/selects/NetworkSelectorButton";
 import { PlusIcon } from "lucide-react";
 import { useFieldArray, useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { isAddress } from "thirdweb";
+import { defineChain, isAddress } from "thirdweb";
+import {
+  useActiveWalletChain,
+  useSwitchActiveWalletChain,
+} from "thirdweb/react";
 import { getSocialIcon } from "thirdweb/wallets/in-app";
 import {
   DEFAULT_ACCOUNT_FACTORY_V0_6,
@@ -43,7 +48,6 @@ type AuthOptionsFormData = {
   customAuthEndpoint: string;
   customHeaders: { key: string; value: string }[];
   useSmartAccount: boolean;
-  chainIds: number[];
   sponsorGas: boolean;
   accountFactoryType: "v0.6" | "v0.7" | "custom";
   customAccountFactoryAddress: string;
@@ -57,7 +61,6 @@ export function AuthOptionsForm({ ecosystem }: { ecosystem: Ecosystem }) {
       customAuthEndpoint: ecosystem.customAuthOptions?.authEndpoint?.url || "",
       customHeaders: ecosystem.customAuthOptions?.authEndpoint?.headers || [],
       useSmartAccount: !!ecosystem.smartAccountOptions,
-      chainIds: [], // unused - TODO: remove from service
       sponsorGas: ecosystem.smartAccountOptions?.sponsorGas || false,
       accountFactoryType:
         ecosystem.smartAccountOptions?.accountFactoryAddress ===
@@ -85,7 +88,6 @@ export function AuthOptionsForm({ ecosystem }: { ecosystem: Ecosystem }) {
             )
             .optional(),
           useSmartAccount: z.boolean(),
-          chainIds: z.array(z.number()),
           sponsorGas: z.boolean(),
           accountFactoryType: z.enum(["v0.6", "v0.7", "custom"]),
           customAccountFactoryAddress: z.string().optional(),
@@ -136,6 +138,16 @@ export function AuthOptionsForm({ ecosystem }: { ecosystem: Ecosystem }) {
     },
   });
 
+  const switchChain = useSwitchActiveWalletChain();
+  const currentChain = useActiveWalletChain();
+  if (
+    ecosystem.smartAccountOptions?.defaultChainId &&
+    currentChain &&
+    currentChain.id !== ecosystem.smartAccountOptions?.defaultChainId
+  ) {
+    switchChain(defineChain(ecosystem.smartAccountOptions?.defaultChainId));
+  }
+
   const onSubmit = (data: AuthOptionsFormData) => {
     let customAuthOptions: Ecosystem["customAuthOptions"] | null = null;
     if (data.useCustomAuth && data.customAuthEndpoint) {
@@ -165,12 +177,22 @@ export function AuthOptionsForm({ ecosystem }: { ecosystem: Ecosystem }) {
           accountFactoryAddress = DEFAULT_ACCOUNT_FACTORY_V0_7;
           break;
         case "custom":
+          if (!data.customAccountFactoryAddress) {
+            toast.error("Please enter a custom account factory address");
+            return;
+          }
           accountFactoryAddress = data.customAccountFactoryAddress;
           break;
       }
 
+      if (!currentChain?.id) {
+        toast.error("Please select a default chain ID");
+        return;
+      }
       smartAccountOptions = {
-        chainIds: [], // unused - TODO remove from service
+        defaultChainId: currentChain?.id,
+        chainIds: [], // TODO: remove once backend is updated
+
         sponsorGas: data.sponsorGas,
         accountFactoryAddress,
       };
@@ -427,6 +449,17 @@ export function AuthOptionsForm({ ecosystem }: { ecosystem: Ecosystem }) {
                   </FormItem>
                 )}
               />
+
+              <FormItem>
+                <FormLabel>Default Chain ID</FormLabel>
+                <FormControl>
+                  <NetworkSelectorButton />
+                </FormControl>
+                <FormDescription>
+                  This will be the chain ID where the smart account will be
+                  initialized on by default.
+                </FormDescription>
+              </FormItem>
               <FormField
                 control={form.control}
                 name="accountFactoryType"

apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/types.ts

@@ -36,7 +36,8 @@ export type Ecosystem = {
     };
   } | null;
   smartAccountOptions?: {
-    chainIds: number[];
+    defaultChainId: number;
+    chainIds: number[]; // TODO: Remove this once we update the backend to stop requiring this
     sponsorGas: boolean;
     accountFactoryAddress: string;
   } | null;

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

@@ -13,7 +13,7 @@ type EcosystemOptions = {
 };
 
 type SmartAccountOptions = {
-  chainIds: number[];
+  defaultChainId: number;
   sponsorGas: boolean;
   accountFactoryAddress: string;
 };

packages/thirdweb/src/wallets/in-app/core/wallet/in-app-core.ts

@@ -1,6 +1,9 @@
 import { trackConnect } from "../../../../analytics/track/connect.js";
 import type { Chain } from "../../../../chains/types.js";
-import { getCachedChainIfExists } from "../../../../chains/utils.js";
+import {
+  defineChain,
+  getCachedChainIfExists,
+} from "../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { stringify } from "../../../../utils/json.js";
 import { getEcosystemInfo } from "../../../ecosystem/get-ecosystem-wallet-auth-options.js";
@@ -74,7 +77,9 @@ export function createInAppWallet(args: {
         const ecosystemOptions = await getEcosystemInfo(ecosystem.id);
         const smartAccountOptions = ecosystemOptions?.smartAccountOptions;
         if (smartAccountOptions) {
-          const preferredChain = options.chain;
+          const preferredChain =
+            options.chain ??
+            defineChain(ecosystemOptions.smartAccountOptions.defaultChainId);
           if (!preferredChain) {
             throw new Error(
               "Chain is required for ecosystem smart accounts, pass it via connect() or via UI components",