chore: update to use chainIds

ElasticBottle · ElasticBottle · commit f3f8fdd86cb8 · 2024-12-04T09:20:47.000+08:00
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { MultiNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import { SettingsCard } from "@/components/blocks/SettingsCard";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -23,25 +24,17 @@ 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,
-  getCachedChainIfExists,
-} from "thirdweb/dist/types/chains/utils";
-import {
-  useActiveWalletChain,
-  useSwitchActiveWalletChain,
-} from "thirdweb/react";
 import { getSocialIcon } from "thirdweb/wallets/in-app";
 import {
   DEFAULT_ACCOUNT_FACTORY_V0_6,
   DEFAULT_ACCOUNT_FACTORY_V0_7,
 } from "thirdweb/wallets/smart";
 import invariant from "tiny-invariant";
+import { FormErrorMessage } from "tw-components";
 import { z } from "zod";
 import { type Ecosystem, authOptions } from "../../../../../types";
 import { useUpdateEcosystem } from "../../hooks/use-update-ecosystem";
@@ -53,6 +46,7 @@ type AuthOptionsFormData = {
   customHeaders: { key: string; value: string }[];
   useSmartAccount: boolean;
   sponsorGas: boolean;
+  chainIds: number[];
   accountFactoryType: "v0.6" | "v0.7" | "custom";
   customAccountFactoryAddress: string;
 };
@@ -66,6 +60,7 @@ export function AuthOptionsForm({ ecosystem }: { ecosystem: Ecosystem }) {
       customHeaders: ecosystem.customAuthOptions?.authEndpoint?.headers || [],
       useSmartAccount: !!ecosystem.smartAccountOptions,
       sponsorGas: ecosystem.smartAccountOptions?.sponsorGas || false,
+      chainIds: ecosystem.smartAccountOptions?.chainIds ?? [],
       accountFactoryType:
         ecosystem.smartAccountOptions?.accountFactoryAddress ===
         DEFAULT_ACCOUNT_FACTORY_V0_7
@@ -93,6 +88,7 @@ export function AuthOptionsForm({ ecosystem }: { ecosystem: Ecosystem }) {
             .optional(),
           useSmartAccount: z.boolean(),
           sponsorGas: z.boolean(),
+          chainIds: z.array(z.number()),
           accountFactoryType: z.enum(["v0.6", "v0.7", "custom"]),
           customAccountFactoryAddress: z.string().optional(),
         })
@@ -101,7 +97,8 @@ export function AuthOptionsForm({ ecosystem }: { ecosystem: Ecosystem }) {
             if (
               data.useSmartAccount &&
               data.customAccountFactoryAddress &&
-              !isAddress(data.customAccountFactoryAddress)
+              (!isAddress(data.customAccountFactoryAddress) ||
+                !data.customAccountFactoryAddress)
             ) {
               return false;
             }
@@ -112,6 +109,18 @@ export function AuthOptionsForm({ ecosystem }: { ecosystem: Ecosystem }) {
             path: ["customAccountFactoryAddress"],
           },
         )
+        .refine(
+          (data) => {
+            if (data.useSmartAccount && data.chainIds.length === 0) {
+              return false;
+            }
+            return true;
+          },
+          {
+            message: "Please select at least one chain ID",
+            path: ["chainIds"],
+          },
+        )
         .refine(
           (data) => {
             if (data.useCustomAuth && !data.customAuthEndpoint) {
@@ -142,17 +151,6 @@ export function AuthOptionsForm({ ecosystem }: { ecosystem: Ecosystem }) {
     },
   });
 
-  const switchChain = useSwitchActiveWalletChain();
-  const currentChain = useActiveWalletChain();
-  if (
-    ecosystem.smartAccountOptions?.defaultChainId &&
-    currentChain &&
-    currentChain.id !== ecosystem.smartAccountOptions?.defaultChainId
-  ) {
-    const chainId = ecosystem.smartAccountOptions?.defaultChainId;
-    switchChain(getCachedChainIfExists(chainId) ?? defineChain(chainId));
-  }
-
   const onSubmit = (data: AuthOptionsFormData) => {
     let customAuthOptions: Ecosystem["customAuthOptions"] | null = null;
     if (data.useCustomAuth && data.customAuthEndpoint) {
@@ -182,22 +180,12 @@ 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 = {
-        defaultChainId: currentChain?.id,
-        chainIds: [], // TODO: remove once backend is updated
-
+        chainIds: data.chainIds,
         sponsorGas: data.sponsorGas,
         accountFactoryAddress,
       };
@@ -455,25 +443,32 @@ export function AuthOptionsForm({ ecosystem }: { ecosystem: Ecosystem }) {
                 )}
               />
 
-              <FormItem>
-                <FormLabel>Default Chain ID</FormLabel>
-                <FormControl>
-                  <NetworkSelectorButton />
-                </FormControl>
-                <FormDescription>
-                  This will be the chain ID the smart account will be
-                  initialized to on your{" "}
-                  <a
-                    href={`https://${ecosystem.slug}.ecosystem.thirdweb.com`}
-                    className="text-link-foreground"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    ecosystem page
-                  </a>
-                  .
-                </FormDescription>
-              </FormItem>
+              <FormField
+                control={form.control}
+                name="chainIds"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Allowed Chain Ids</FormLabel>
+                    <div className="flex flex-col">
+                      <MultiNetworkSelector
+                        selectedChainIds={field.value}
+                        onChange={field.onChange}
+                      />
+                    </div>
+                    <FormDescription>
+                      Choose a default account factory or select custom to enter
+                      your own address
+                    </FormDescription>
+                    <FormErrorMessage>
+                      {
+                        form.getFieldState("chainIds", form.formState).error
+                          ?.message
+                      }
+                    </FormErrorMessage>
+                  </FormItem>
+                )}
+              />
+
               <FormField
                 control={form.control}
                 name="accountFactoryType"
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/types.ts b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/types.ts
@@ -36,8 +36,7 @@ export type Ecosystem = {
     };
   } | null;
   smartAccountOptions?: {
-    defaultChainId: number;
-    chainIds: number[]; // TODO: Remove this once we update the backend to stop requiring this
+    chainIds: number[];
     sponsorGas: boolean;
     accountFactoryAddress: string;
   } | null;
diff --git a/packages/thirdweb/src/wallets/ecosystem/get-ecosystem-wallet-auth-options.ts b/packages/thirdweb/src/wallets/ecosystem/get-ecosystem-wallet-auth-options.ts
@@ -13,7 +13,7 @@ type EcosystemOptions = {
 };
 
 type SmartAccountOptions = {
-  defaultChainId: number;
+  chainIds: number[];
   sponsorGas: boolean;
   accountFactoryAddress: string;
 };
diff --git a/packages/thirdweb/src/wallets/in-app/core/wallet/in-app-core.ts b/packages/thirdweb/src/wallets/in-app/core/wallet/in-app-core.ts
@@ -1,7 +1,7 @@
 import { trackConnect } from "../../../../analytics/track/connect.js";
 import type { Chain } from "../../../../chains/types.js";
 import {
-  defineChain,
+  getCachedChain,
   getCachedChainIfExists,
 } from "../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
@@ -77,17 +77,26 @@ export function createInAppWallet(args: {
         const ecosystemOptions = await getEcosystemInfo(ecosystem.id);
         const smartAccountOptions = ecosystemOptions?.smartAccountOptions;
         if (smartAccountOptions) {
+          const defaultChainId =
+            ecosystemOptions.smartAccountOptions.chainIds[0];
+          if (!defaultChainId) {
+            throw new Error(
+              "No default chain ID found for ecosystem smart accounts. Please reach out to the ecosystem owner.",
+            );
+          }
           const preferredChain =
-            options.chain ??
-            getCachedChainIfExists(
-              ecosystemOptions.smartAccountOptions.defaultChainId,
-            ) ??
-            defineChain(ecosystemOptions.smartAccountOptions.defaultChainId);
-          if (!preferredChain) {
+            options.chain ?? getCachedChain(defaultChainId);
+
+          if (
+            !ecosystemOptions.smartAccountOptions.chainIds.includes(
+              preferredChain?.id,
+            )
+          ) {
             throw new Error(
-              "Chain is required for ecosystem smart accounts, pass it via connect() or via UI components",
+              `Chain ID ${preferredChain.id} is not supported for ecosystem smart accounts, pass it via connect() or via UI components`,
             );
           }
+
           createOptions = {
             ...createOptions,
             smartAccount: {
