@@ -27,6 +27,7 @@ import { Text } from "../components/text.js";
27
27
import { useCustomTheme } from "../design-system/CustomThemeProvider.js" ;
28
28
import { StyledDiv , StyledUl } from "../design-system/elements.js" ;
29
29
import { fontSize , iconSize , radius , spacing } from "../design-system/index.js" ;
30
+ import { SmartConnectUI } from "./Modal/SmartWalletConnectUI.js" ;
30
31
import { TOS } from "./Modal/TOS.js" ;
31
32
import { PoweredByThirdweb } from "./PoweredByTW.js" ;
32
33
import { WalletButton , WalletEntryButton } from "./WalletEntryButton.js" ;
@@ -39,18 +40,54 @@ const InAppWalletSelectionUI = /* @__PURE__ */ lazy(
39
40
// const localWalletId = "local";
40
41
const inAppWalletId : WalletId = "inApp" ;
41
42
42
- /**
43
- * @internal
44
- */
45
- export const WalletSelector : React . FC < {
43
+ type WalletSelectorProps = {
46
44
wallets : Wallet [ ] ;
47
45
selectWallet : ( wallet : Wallet ) => void ;
48
46
onGetStarted : ( ) => void ;
49
47
title : string ;
50
48
done : ( wallet : Wallet ) => void ;
51
49
goBack ?: ( ) => void ;
52
50
onShowAll : ( ) => void ;
53
- } > = ( props ) => {
51
+ setModalVisibility : ( value : boolean ) => void ;
52
+ } ;
53
+
54
+ /**
55
+ * @internal
56
+ */
57
+ export function WalletSelector ( props : WalletSelectorProps ) {
58
+ const { accountAbstraction } = useConnectUI ( ) ;
59
+ const [ personalWallet , setPersonalWallet ] = useState < Wallet | null > ( null ) ;
60
+
61
+ if ( ! accountAbstraction ) {
62
+ return < WalletSelectorInner { ...props } /> ;
63
+ }
64
+
65
+ if ( personalWallet ) {
66
+ return (
67
+ < SmartConnectUI
68
+ accountAbstraction = { accountAbstraction }
69
+ done = { props . done }
70
+ personalWallet = { personalWallet }
71
+ setModalVisibility = { props . setModalVisibility }
72
+ onBack = { props . goBack }
73
+ />
74
+ ) ;
75
+ }
76
+
77
+ return (
78
+ < WalletSelectorInner
79
+ { ...props }
80
+ done = { ( w ) => {
81
+ setPersonalWallet ( w ) ;
82
+ } }
83
+ />
84
+ ) ;
85
+ }
86
+
87
+ /**
88
+ * @internal
89
+ */
90
+ const WalletSelectorInner : React . FC < WalletSelectorProps > = ( props ) => {
54
91
const { connectModal, isEmbed, client } = useConnectUI ( ) ;
55
92
const isCompact = connectModal . size === "compact" ;
56
93
const [ isWalletGroupExpanded , setIsWalletGroupExpanded ] = useState ( false ) ;
0 commit comments