1
1
"use client" ;
2
+ import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors" ;
2
3
import { SettingsCard } from "@/components/blocks/SettingsCard" ;
3
4
import { Button } from "@/components/ui/button" ;
4
5
import { Checkbox } from "@/components/ui/checkbox" ;
@@ -27,6 +28,7 @@ import { PlusIcon } from "lucide-react";
27
28
import { useFieldArray , useForm } from "react-hook-form" ;
28
29
import { toast } from "sonner" ;
29
30
import { isAddress } from "thirdweb" ;
31
+ import type { ThirdwebClient } from "thirdweb" ;
30
32
import { getSocialIcon } from "thirdweb/wallets/in-app" ;
31
33
import {
32
34
DEFAULT_ACCOUNT_FACTORY_V0_6 ,
@@ -47,13 +49,20 @@ type AuthOptionsFormData = {
47
49
defaultChainId : number ;
48
50
accountFactoryType : "v0.6" | "v0.7" | "custom" ;
49
51
customAccountFactoryAddress : string ;
52
+ executionMode : "EIP4337" | "EIP7702" ;
50
53
} ;
51
54
52
55
export function AuthOptionsForm ( {
53
56
ecosystem,
54
57
authToken,
55
58
teamId,
56
- } : { ecosystem : Ecosystem ; authToken : string ; teamId : string } ) {
59
+ client,
60
+ } : {
61
+ ecosystem : Ecosystem ;
62
+ authToken : string ;
63
+ teamId : string ;
64
+ client : ThirdwebClient ;
65
+ } ) {
57
66
const form = useForm < AuthOptionsFormData > ( {
58
67
defaultValues : {
59
68
authOptions : ecosystem . authOptions || [ ] ,
@@ -71,6 +80,7 @@ export function AuthOptionsForm({
71
80
DEFAULT_ACCOUNT_FACTORY_V0_6
72
81
? "v0.6"
73
82
: "custom" ,
83
+ executionMode : ecosystem . smartAccountOptions ?. executionMode || "EIP4337" ,
74
84
customAccountFactoryAddress :
75
85
ecosystem . smartAccountOptions ?. accountFactoryAddress || "" ,
76
86
} ,
@@ -97,6 +107,7 @@ export function AuthOptionsForm({
97
107
. optional ( ) ,
98
108
accountFactoryType : z . enum ( [ "v0.6" , "v0.7" , "custom" ] ) ,
99
109
customAccountFactoryAddress : z . string ( ) . optional ( ) ,
110
+ executionMode : z . enum ( [ "EIP4337" , "EIP7702" ] ) ,
100
111
} )
101
112
. refine (
102
113
( data ) => {
@@ -203,6 +214,7 @@ export function AuthOptionsForm({
203
214
defaultChainId : data . defaultChainId ,
204
215
sponsorGas : data . sponsorGas ,
205
216
accountFactoryAddress,
217
+ executionMode : data . executionMode ,
206
218
} ;
207
219
}
208
220
@@ -437,34 +449,83 @@ export function AuthOptionsForm({
437
449
/>
438
450
{ form . watch ( "useSmartAccount" ) && (
439
451
< 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 >
460
517
< FormField
461
518
control = { form . control }
462
519
name = "defaultChainId"
463
520
render = { ( { field } ) => (
464
521
< FormItem >
465
522
< FormLabel > Default Chain ID</ FormLabel >
466
523
< FormControl >
467
- < Input { ...field } placeholder = "1" />
524
+ < SingleNetworkSelector
525
+ client = { client }
526
+ chainId = { field . value }
527
+ onChange = { field . onChange }
528
+ />
468
529
</ FormControl >
469
530
< FormDescription >
470
531
This will be the chain ID the smart account will be
@@ -484,56 +545,63 @@ export function AuthOptionsForm({
484
545
) }
485
546
/>
486
547
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
+ />
535
603
) }
536
- />
604
+ < />
537
605
) }
538
606
</ div >
539
607
) }
0 commit comments