@@ -23,7 +23,7 @@ export function ChainSelector({
23
23
onNetworkTypeChange,
24
24
dataFeedType = "default" ,
25
25
availableNetworkTypes = { mainnet : true , testnet : true } ,
26
- selectedNetworkType : externalSelectedNetworkType
26
+ selectedNetworkType : externalSelectedNetworkType ,
27
27
} : ChainSelectorProps ) {
28
28
const [ isOpen , setIsOpen ] = useState ( false )
29
29
const [ selectedNetworkType , setSelectedNetworkType ] = useState < "mainnet" | "testnet" > (
@@ -43,13 +43,14 @@ export function ChainSelector({
43
43
if ( dataFeedType . includes ( "streams" ) ) return chain . tags ?. includes ( "streams" ) ?? false
44
44
if ( dataFeedType === "smartdata" ) return chain . tags ?. includes ( "smartData" ) ?? false
45
45
if ( dataFeedType === "rates" ) return chain . tags ?. includes ( "rates" ) ?? false
46
- if ( dataFeedType === "usGovernmentMacroeconomicData" ) return chain . tags ?. includes ( "usGovernmentMacroeconomicData" ) ?? false
46
+ if ( dataFeedType === "usGovernmentMacroeconomicData" )
47
+ return chain . tags ?. includes ( "usGovernmentMacroeconomicData" ) ?? false
47
48
return chain . tags ?. includes ( "default" ) ?? false
48
49
} ) ( )
49
-
50
+
50
51
// Filter by search term
51
52
const matchesSearch = ! searchTerm || chain . label . toLowerCase ( ) . includes ( searchTerm . toLowerCase ( ) )
52
-
53
+
53
54
return matchesDataFeedType && matchesSearch
54
55
} )
55
56
@@ -71,20 +72,16 @@ export function ChainSelector({
71
72
}
72
73
} , [ isOpen , focusedIndex , filteredChains ] )
73
74
74
-
75
-
76
75
// Scroll focused item into view
77
76
useEffect ( ( ) => {
78
77
if ( focusedIndex >= 0 && chainOptionsRef . current [ focusedIndex ] ) {
79
78
chainOptionsRef . current [ focusedIndex ] ?. scrollIntoView ( {
80
- behavior : ' smooth' ,
81
- block : ' nearest'
79
+ behavior : " smooth" ,
80
+ block : " nearest" ,
82
81
} )
83
82
}
84
83
} , [ focusedIndex ] )
85
84
86
-
87
-
88
85
const toggleDropdown = ( ) => {
89
86
setIsOpen ( ! isOpen )
90
87
if ( ! isOpen ) {
@@ -111,19 +108,19 @@ export function ChainSelector({
111
108
switch ( e . key ) {
112
109
case "ArrowDown" :
113
110
e . preventDefault ( )
114
- setFocusedIndex ( prev => ( prev < filteredChains . length - 1 ? prev + 1 : prev ) )
111
+ setFocusedIndex ( ( prev ) => ( prev < filteredChains . length - 1 ? prev + 1 : prev ) )
115
112
break
116
113
case "ArrowUp" :
117
114
e . preventDefault ( )
118
- setFocusedIndex ( prev => ( prev > 0 ? prev - 1 : prev ) )
115
+ setFocusedIndex ( ( prev ) => ( prev > 0 ? prev - 1 : prev ) )
119
116
break
120
117
case "PageDown" :
121
118
e . preventDefault ( )
122
- setFocusedIndex ( prev => Math . min ( prev + 5 , filteredChains . length - 1 ) )
119
+ setFocusedIndex ( ( prev ) => Math . min ( prev + 5 , filteredChains . length - 1 ) )
123
120
break
124
121
case "PageUp" :
125
122
e . preventDefault ( )
126
- setFocusedIndex ( prev => Math . max ( prev - 5 , 0 ) )
123
+ setFocusedIndex ( ( prev ) => Math . max ( prev - 5 , 0 ) )
127
124
break
128
125
case "Enter" :
129
126
e . preventDefault ( )
@@ -142,7 +139,7 @@ export function ChainSelector({
142
139
143
140
const handleNetworkTypeToggle = ( networkType : "mainnet" | "testnet" ) => {
144
141
setSelectedNetworkType ( networkType )
145
-
142
+
146
143
// Notify parent component about the network type change
147
144
if ( onNetworkTypeChange ) {
148
145
onNetworkTypeChange ( networkType , selectedChain )
@@ -160,13 +157,13 @@ export function ChainSelector({
160
157
type = "button"
161
158
>
162
159
< div className = { styles . selectedChain } >
163
- < img
164
- src = { selectedChain . img }
165
- alt = { `${ selectedChain . label } icon` }
166
- className = { styles . chainIcon }
167
- width = { 28 }
168
- height = { 28 }
169
- />
160
+ < img
161
+ src = { selectedChain . img }
162
+ alt = { `${ selectedChain . label } icon` }
163
+ className = { styles . chainIcon }
164
+ width = { 28 }
165
+ height = { 28 }
166
+ />
170
167
< span className = { styles . chainLabel } > { selectedChain . label } </ span >
171
168
</ div >
172
169
< div className = { clsx ( styles . caret , isOpen && styles . caretOpen ) } >
@@ -184,7 +181,9 @@ export function ChainSelector({
184
181
) }
185
182
onClick = { ( ) => availableNetworkTypes . mainnet && handleNetworkTypeToggle ( "mainnet" ) }
186
183
disabled = { ! availableNetworkTypes . mainnet }
187
- title = { ! availableNetworkTypes . mainnet ? `${ selectedChain . label } feeds are not available on mainnet` : undefined }
184
+ title = {
185
+ ! availableNetworkTypes . mainnet ? `${ selectedChain . label } feeds are not available on mainnet` : undefined
186
+ }
188
187
>
189
188
Mainnet
190
189
</ button >
@@ -197,7 +196,9 @@ export function ChainSelector({
197
196
) }
198
197
onClick = { ( ) => availableNetworkTypes . testnet && handleNetworkTypeToggle ( "testnet" ) }
199
198
disabled = { ! availableNetworkTypes . testnet }
200
- title = { ! availableNetworkTypes . testnet ? `${ selectedChain . label } feeds are not available on testnet` : undefined }
199
+ title = {
200
+ ! availableNetworkTypes . testnet ? `${ selectedChain . label } feeds are not available on testnet` : undefined
201
+ }
201
202
>
202
203
Testnet
203
204
</ button >
@@ -269,14 +270,12 @@ export function ChainSelector({
269
270
</ button >
270
271
) ) }
271
272
{ filteredChains . length === 0 && (
272
- < div className = { styles . noResults } >
273
- No chains found matching "{ searchTerm } "
274
- </ div >
273
+ < div className = { styles . noResults } > No chains found matching "{ searchTerm } "</ div >
275
274
) }
276
275
</ div >
277
276
</ div >
278
277
</ div >
279
278
) }
280
279
</ div >
281
280
)
282
- }
281
+ }
0 commit comments