11"use client" ;
2+ import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors" ;
23import { SettingsCard } from "@/components/blocks/SettingsCard" ;
34import { Button } from "@/components/ui/button" ;
45import { Checkbox } from "@/components/ui/checkbox" ;
@@ -27,6 +28,7 @@ import { PlusIcon } from "lucide-react";
2728import { useFieldArray , useForm } from "react-hook-form" ;
2829import { toast } from "sonner" ;
2930import { isAddress } from "thirdweb" ;
31+ import type { ThirdwebClient } from "thirdweb" ;
3032import { getSocialIcon } from "thirdweb/wallets/in-app" ;
3133import {
3234 DEFAULT_ACCOUNT_FACTORY_V0_6 ,
@@ -47,13 +49,20 @@ type AuthOptionsFormData = {
4749 defaultChainId : number ;
4850 accountFactoryType : "v0.6" | "v0.7" | "custom" ;
4951 customAccountFactoryAddress : string ;
52+ executionMode : "EIP4337" | "EIP7702" ;
5053} ;
5154
5255export function AuthOptionsForm ( {
5356 ecosystem,
5457 authToken,
5558 teamId,
56- } : { ecosystem : Ecosystem ; authToken : string ; teamId : string } ) {
59+ client,
60+ } : {
61+ ecosystem : Ecosystem ;
62+ authToken : string ;
63+ teamId : string ;
64+ client : ThirdwebClient ;
65+ } ) {
5766 const form = useForm < AuthOptionsFormData > ( {
5867 defaultValues : {
5968 authOptions : ecosystem . authOptions || [ ] ,
@@ -71,6 +80,7 @@ export function AuthOptionsForm({
7180 DEFAULT_ACCOUNT_FACTORY_V0_6
7281 ? "v0.6"
7382 : "custom" ,
83+ executionMode : ecosystem . smartAccountOptions ?. executionMode || "EIP4337" ,
7484 customAccountFactoryAddress :
7585 ecosystem . smartAccountOptions ?. accountFactoryAddress || "" ,
7686 } ,
@@ -97,6 +107,7 @@ export function AuthOptionsForm({
97107 . optional ( ) ,
98108 accountFactoryType : z . enum ( [ "v0.6" , "v0.7" , "custom" ] ) ,
99109 customAccountFactoryAddress : z . string ( ) . optional ( ) ,
110+ executionMode : z . enum ( [ "EIP4337" , "EIP7702" ] ) ,
100111 } )
101112 . refine (
102113 ( data ) => {
@@ -203,6 +214,7 @@ export function AuthOptionsForm({
203214 defaultChainId : data . defaultChainId ,
204215 sponsorGas : data . sponsorGas ,
205216 accountFactoryAddress,
217+ executionMode : data . executionMode ,
206218 } ;
207219 }
208220
@@ -437,34 +449,83 @@ export function AuthOptionsForm({
437449 />
438450 { form . watch ( "useSmartAccount" ) && (
439451 < div className = "mt-1 flex flex-col gap-4" >
440- < FormField
441- control = { form . control }
442- name = "sponsorGas"
443- render = { ( { field } ) => (
444- < FormItem className = "flex flex-row items-center space-x-3 space-y-0" >
445- < FormControl >
446- < Switch
447- checked = { field . value }
448- onCheckedChange = { field . onChange }
449- />
450- </ FormControl >
451- < div className = "space-y-1 leading-none" >
452- < FormLabel > Sponsor Gas</ FormLabel >
453- < FormDescription >
454- Enable gas sponsorship for smart accounts
455- </ FormDescription >
456- </ div >
457- </ FormItem >
458- ) }
459- />
452+ < div className = "flex flex-col gap-4 md:flex-row md:gap-6" >
453+ < FormField
454+ control = { form . control }
455+ name = "executionMode"
456+ render = { ( { field } ) => (
457+ < FormItem className = "flex-1" >
458+ < FormLabel > Execution Mode</ FormLabel >
459+ < Select
460+ onValueChange = { field . onChange }
461+ defaultValue = { field . value }
462+ >
463+ < FormControl >
464+ < SelectTrigger >
465+ < SelectValue placeholder = "Select execution mode" />
466+ </ SelectTrigger >
467+ </ FormControl >
468+ < SelectContent >
469+ < SelectItem value = "EIP4337" > EIP-4337</ SelectItem >
470+ < SelectItem value = "EIP7702" > EIP-7702</ SelectItem >
471+ </ SelectContent >
472+ </ Select >
473+ { ( ( ) => {
474+ const originalExecutionMode =
475+ ecosystem . smartAccountOptions ?. executionMode ||
476+ "EIP4337" ;
477+ const currentExecutionMode =
478+ form . watch ( "executionMode" ) ;
479+ const hasChanged =
480+ currentExecutionMode !== originalExecutionMode ;
481+
482+ return (
483+ < FormDescription
484+ className = { hasChanged ? "text-warning-text" : "" }
485+ >
486+ { hasChanged
487+ ? "Changing execution mode will change the final user addresses when they connect to your ecosystem."
488+ : "Smart account standard (EIP-7702 is recommended)" }
489+ </ FormDescription >
490+ ) ;
491+ } ) ( ) }
492+ < FormMessage />
493+ </ FormItem >
494+ ) }
495+ />
496+ < FormField
497+ control = { form . control }
498+ name = "sponsorGas"
499+ render = { ( { field } ) => (
500+ < FormItem className = "flex flex-row items-center space-x-3 space-y-0 md:flex-1" >
501+ < FormControl >
502+ < Switch
503+ checked = { field . value }
504+ onCheckedChange = { field . onChange }
505+ />
506+ </ FormControl >
507+ < div className = "space-y-1 leading-none" >
508+ < FormLabel > Sponsor Gas</ FormLabel >
509+ < FormDescription >
510+ Enable gas sponsorship for smart accounts
511+ </ FormDescription >
512+ </ div >
513+ </ FormItem >
514+ ) }
515+ />
516+ </ div >
460517 < FormField
461518 control = { form . control }
462519 name = "defaultChainId"
463520 render = { ( { field } ) => (
464521 < FormItem >
465522 < FormLabel > Default Chain ID</ FormLabel >
466523 < FormControl >
467- < Input { ...field } placeholder = "1" />
524+ < SingleNetworkSelector
525+ client = { client }
526+ chainId = { field . value }
527+ onChange = { field . onChange }
528+ />
468529 </ FormControl >
469530 < FormDescription >
470531 This will be the chain ID the smart account will be
@@ -484,56 +545,63 @@ export function AuthOptionsForm({
484545 ) }
485546 />
486547
487- < FormField
488- control = { form . control }
489- name = "accountFactoryType"
490- render = { ( { field } ) => (
491- < FormItem >
492- < FormLabel > Account Factory</ FormLabel >
493- < Select
494- onValueChange = { field . onChange }
495- defaultValue = { field . value }
496- >
497- < FormControl >
498- < SelectTrigger >
499- < SelectValue placeholder = "Select account factory type" />
500- </ SelectTrigger >
501- </ FormControl >
502- < SelectContent >
503- < SelectItem value = "v0.6" >
504- Default Account Factory (v0.6)
505- </ SelectItem >
506- < SelectItem value = "v0.7" >
507- Default Account Factory (v0.7)
508- </ SelectItem >
509- < SelectItem value = "custom" > Custom factory</ SelectItem >
510- </ SelectContent >
511- </ Select >
512- < FormDescription >
513- Choose a default account factory or select custom to enter
514- your own address
515- </ FormDescription >
516- < FormMessage />
517- </ FormItem >
518- ) }
519- />
520- { form . watch ( "accountFactoryType" ) === "custom" && (
521- < FormField
522- control = { form . control }
523- name = "customAccountFactoryAddress"
524- render = { ( { field } ) => (
525- < FormItem >
526- < FormLabel > Custom Account Factory Address</ FormLabel >
527- < FormControl >
528- < Input { ...field } placeholder = "0x..." />
529- </ FormControl >
530- < FormDescription >
531- Enter your own smart account factory contract address
532- </ FormDescription >
533- < FormMessage />
534- </ FormItem >
548+ { form . watch ( "executionMode" ) === "EIP4337" && (
549+ < >
550+ < FormField
551+ control = { form . control }
552+ name = "accountFactoryType"
553+ render = { ( { field } ) => (
554+ < FormItem >
555+ < FormLabel > Account Factory</ FormLabel >
556+ < Select
557+ onValueChange = { field . onChange }
558+ defaultValue = { field . value }
559+ >
560+ < FormControl >
561+ < SelectTrigger >
562+ < SelectValue placeholder = "Select account factory type" />
563+ </ SelectTrigger >
564+ </ FormControl >
565+ < SelectContent >
566+ < SelectItem value = "v0.6" >
567+ Default Account Factory (v0.6)
568+ </ SelectItem >
569+ < SelectItem value = "v0.7" >
570+ Default Account Factory (v0.7)
571+ </ SelectItem >
572+ < SelectItem value = "custom" >
573+ Custom factory
574+ </ SelectItem >
575+ </ SelectContent >
576+ </ Select >
577+ < FormDescription >
578+ Choose a default account factory or select custom to
579+ enter your own address
580+ </ FormDescription >
581+ < FormMessage />
582+ </ FormItem >
583+ ) }
584+ />
585+ { form . watch ( "accountFactoryType" ) === "custom" && (
586+ < FormField
587+ control = { form . control }
588+ name = "customAccountFactoryAddress"
589+ render = { ( { field } ) => (
590+ < FormItem >
591+ < FormLabel > Custom Account Factory Address</ FormLabel >
592+ < FormControl >
593+ < Input { ...field } placeholder = "0x..." />
594+ </ FormControl >
595+ < FormDescription >
596+ Enter your own smart account factory contract
597+ address
598+ </ FormDescription >
599+ < FormMessage />
600+ </ FormItem >
601+ ) }
602+ />
535603 ) }
536- />
604+ < />
537605 ) }
538606 </ div >
539607 ) }
0 commit comments