@@ -63,41 +63,42 @@ const GAS_FREE_CHAINS = [
63
63
247253 , // Saakuru Testnet
64
64
] ;
65
65
66
- function useNetworkMismatchAdapter ( desiredChainId : number ) {
66
+ function useIsNetworkMismatch ( txChainId : number ) {
67
67
const walletChainId = useActiveWalletChain ( ) ?. id ;
68
68
if ( ! walletChainId ) {
69
69
// simply not ready yet, assume false
70
70
return false ;
71
71
}
72
72
// otherwise, compare the chain ids
73
- return walletChainId !== desiredChainId ;
73
+ return walletChainId !== txChainId ;
74
74
}
75
75
76
76
type MistmatchButtonProps = React . ComponentProps < typeof Button > & {
77
- desiredChainId : number ;
77
+ txChainId : number ;
78
78
twAccount : Account | undefined ;
79
79
} ;
80
80
81
81
export const MismatchButton = forwardRef <
82
82
HTMLButtonElement ,
83
83
MistmatchButtonProps
84
84
> ( ( props , ref ) => {
85
- const { desiredChainId , twAccount, ...buttonProps } = props ;
85
+ const { txChainId , twAccount, ...buttonProps } = props ;
86
86
const account = useActiveAccount ( ) ;
87
87
const wallet = useActiveWallet ( ) ;
88
88
const activeWalletChain = useActiveWalletChain ( ) ;
89
89
const [ dialog , setDialog ] = useState < undefined | "no-funds" | "pay" > ( ) ;
90
90
const { theme } = useTheme ( ) ;
91
91
const client = useThirdwebClient ( ) ;
92
92
const pathname = usePathname ( ) ;
93
+ const txChain = useV5DashboardChain ( txChainId ) ;
93
94
94
- const evmBalance = useWalletBalance ( {
95
+ const txChainBalance = useWalletBalance ( {
95
96
address : account ?. address ,
96
- chain : activeWalletChain ,
97
+ chain : txChain ,
97
98
client,
98
99
} ) ;
99
100
100
- const networksMismatch = useNetworkMismatchAdapter ( desiredChainId ) ;
101
+ const networksMismatch = useIsNetworkMismatch ( txChainId ) ;
101
102
const [ isMismatchPopoverOpen , setIsMismatchPopoverOpen ] = useState ( false ) ;
102
103
const trackEvent = useTrack ( ) ;
103
104
@@ -130,8 +131,15 @@ export const MismatchButton = forwardRef<
130
131
) ;
131
132
}
132
133
134
+ const isBalanceRequired = ! GAS_FREE_CHAINS . includes ( txChainId ) ;
135
+
133
136
const notEnoughBalance =
134
- ( evmBalance . data ?. value || 0n ) === 0n && ! GAS_FREE_CHAINS . includes ( chainId ) ;
137
+ ( txChainBalance . data ?. value || 0n ) === 0n && isBalanceRequired ;
138
+
139
+ const disabled =
140
+ buttonProps . disabled ||
141
+ // if user is about to trigger a transaction on txChain, but txChainBalance is not yet loaded and is required before proceeding
142
+ ( ! networksMismatch && txChainBalance . isPending && isBalanceRequired ) ;
135
143
136
144
return (
137
145
< >
@@ -150,6 +158,7 @@ export const MismatchButton = forwardRef<
150
158
< PopoverTrigger asChild >
151
159
< Button
152
160
{ ...buttonProps }
161
+ disabled = { disabled }
153
162
type = {
154
163
networksMismatch || notEnoughBalance ? "button" : buttonProps . type
155
164
}
@@ -182,7 +191,7 @@ export const MismatchButton = forwardRef<
182
191
</ PopoverTrigger >
183
192
< PopoverContent className = "min-w-[350px]" side = "top" sideOffset = { 10 } >
184
193
< MismatchNotice
185
- desiredChainId = { desiredChainId }
194
+ txChainId = { txChainId }
186
195
onClose = { ( hasSwitched ) => {
187
196
if ( hasSwitched ) {
188
197
setIsMismatchPopoverOpen ( false ) ;
@@ -416,8 +425,8 @@ function GetFundsFromFaucet(props: {
416
425
417
426
const MismatchNotice : React . FC < {
418
427
onClose : ( hasSwitched : boolean ) => void ;
419
- desiredChainId : number ;
420
- } > = ( { onClose, desiredChainId } ) => {
428
+ txChainId : number ;
429
+ } > = ( { onClose, txChainId } ) => {
421
430
const connectedChainId = useActiveWalletChain ( ) ?. id ;
422
431
const switchNetwork = useSwitchActiveWalletChain ( ) ;
423
432
const activeWallet = useActiveWallet ( ) ;
@@ -427,14 +436,15 @@ const MismatchNotice: React.FC<{
427
436
const walletConnectedNetworkInfo = connectedChainId
428
437
? idToChain . get ( connectedChainId )
429
438
: undefined ;
430
- const chain = desiredChainId ? idToChain . get ( desiredChainId ) : undefined ;
431
- const chainV5 = useV5DashboardChain ( desiredChainId ) ;
439
+
440
+ const txChain = txChainId ? idToChain . get ( txChainId ) : undefined ;
441
+ const chainV5 = useV5DashboardChain ( txChainId ) ;
432
442
const switchNetworkMutation = useMutation ( {
433
443
mutationFn : switchNetwork ,
434
444
} ) ;
435
445
436
446
const onSwitchWallet = useCallback ( async ( ) => {
437
- if ( actuallyCanAttemptSwitch && desiredChainId && chainV5 ) {
447
+ if ( actuallyCanAttemptSwitch && txChainId && chainV5 ) {
438
448
try {
439
449
await switchNetworkMutation . mutateAsync ( chainV5 ) ;
440
450
onClose ( true ) ;
@@ -446,7 +456,7 @@ const MismatchNotice: React.FC<{
446
456
} , [
447
457
chainV5 ,
448
458
actuallyCanAttemptSwitch ,
449
- desiredChainId ,
459
+ txChainId ,
450
460
onClose ,
451
461
switchNetworkMutation ,
452
462
] ) ;
@@ -458,15 +468,19 @@ const MismatchNotice: React.FC<{
458
468
Network Mismatch
459
469
</ h3 >
460
470
461
- < p className = "text-muted-foreground" >
471
+ < p className = "mb-1 text-muted-foreground" >
462
472
Your wallet is connected to the{ " " }
463
- < span className = "font-medium capitalize" >
473
+ < span className = "font-semibold capitalize" >
464
474
{ walletConnectedNetworkInfo ?. name ||
465
475
`Chain ID #${ connectedChainId } ` }
466
476
</ span > { " " }
467
- network but this action requires you to connect to the{ " " }
468
- < span className = "font-medium capitalize" >
469
- { chain ?. name || `Chain ID #${ desiredChainId } ` }
477
+ network
478
+ </ p >
479
+
480
+ < p className = "text-muted-foreground" >
481
+ This action requires you to connect to the{ " " }
482
+ < span className = "font-semibold capitalize" >
483
+ { txChain ?. name || `Chain ID #${ txChainId } ` }
470
484
</ span > { " " }
471
485
network.
472
486
</ p >
@@ -485,7 +499,7 @@ const MismatchNotice: React.FC<{
485
499
< UnplugIcon className = "size-4 shrink-0" />
486
500
) }
487
501
< span className = "line-clamp-1 block truncate" >
488
- Switch { chain ? `to ${ chain . name } ` : "chain" }
502
+ Switch { txChain ? `to ${ txChain . name } ` : "chain" }
489
503
</ span >
490
504
</ Button >
491
505
0 commit comments