@@ -63,6 +63,9 @@ const AssetCard: React.FC<AssetCardProps> = ({ address, assetName, balance, apy,
6363 'dydx-mainnet-1' : 'dydx' ,
6464 'ssc-1' : 'saga' ,
6565 'agoric-3' : 'agoric' ,
66+ 'injective-1' : 'injective' ,
67+ 'omniflixhub-1' : 'omniflixhub' ,
68+ 'archway-1' : 'archway' ,
6669 } ;
6770
6871 const getChainName = ( chainId : string ) => {
@@ -131,7 +134,7 @@ const AssetCard: React.FC<AssetCardProps> = ({ address, assetName, balance, apy,
131134 gap = { 6 }
132135 color = "white"
133136 >
134- < Spinner w = { '200px' } h = "200px" color = "complimentary.900 " />
137+ < Spinner w = { '200px' } h = "200px" color = "complimentary.700 " />
135138 </ Flex >
136139 ) ;
137140 }
@@ -151,24 +154,24 @@ const AssetCard: React.FC<AssetCardProps> = ({ address, assetName, balance, apy,
151154 </ Text >
152155 </ HStack >
153156 </ HStack >
154- < Divider bgColor = { 'complimentary.900 ' } />
157+ < Divider bgColor = { 'complimentary.700 ' } />
155158 < HStack h = "140px" justifyContent = { 'space-between' } w = "full" >
156159 < VStack minH = "150px" alignItems = "left" >
157160 < Stat color = { 'white' } >
158161 < StatLabel fontSize = { 'lg' } > On Quicksilver</ StatLabel >
159162
160163 { ! balance || ! interchainAssets ? (
161- < Skeleton startColor = "complimentary.900 " endColor = "complimentary.100" height = "10px" width = "auto" />
164+ < Skeleton startColor = "complimentary.700 " endColor = "complimentary.100" height = "10px" width = "auto" />
162165 ) : (
163- < StatNumber color = { 'complimentary.900 ' } fontSize = { 'md' } >
166+ < StatNumber color = { 'complimentary.700 ' } fontSize = { 'md' } >
164167 { formatNumber ( parseFloat ( balance ) ) } { assetName }
165168 </ StatNumber >
166169 ) }
167170
168171 { ! balance || ! interchainAssets ? (
169172 < >
170- < Skeleton startColor = "complimentary.900 " endColor = "complimentary.100" height = "10px" width = "auto" mt = { 2 } />
171- < Skeleton startColor = "complimentary.900 " endColor = "complimentary.100" height = "10px" width = "auto" mt = { 2 } />
173+ < Skeleton startColor = "complimentary.700 " endColor = "complimentary.100" height = "10px" width = "auto" mt = { 2 } />
174+ < Skeleton startColor = "complimentary.700 " endColor = "complimentary.100" height = "10px" width = "auto" mt = { 2 } />
172175 </ >
173176 ) : (
174177 Number ( balance ) > 0 && (
@@ -209,17 +212,17 @@ const AssetCard: React.FC<AssetCardProps> = ({ address, assetName, balance, apy,
209212 < StatLabel fontSize = { 'lg' } > Interchain</ StatLabel >
210213
211214 { ! balance || ! interchainAssets || ! interchainBalance ? (
212- < Skeleton startColor = "complimentary.900 " endColor = "complimentary.100" height = "10px" width = "auto" />
215+ < Skeleton startColor = "complimentary.700 " endColor = "complimentary.100" height = "10px" width = "auto" />
213216 ) : (
214- < StatNumber color = { 'complimentary.900 ' } fontSize = { 'md' } >
217+ < StatNumber color = { 'complimentary.700 ' } fontSize = { 'md' } >
215218 { formatNumber ( parseFloat ( interchainBalance ) ) } { assetName }
216219 </ StatNumber >
217220 ) }
218221
219222 { ! balance || ! interchainAssets || ! interchainBalance ? (
220223 < >
221- < Skeleton startColor = "complimentary.900 " endColor = "complimentary.100" height = "10px" width = "auto" mt = { 2 } />
222- < Skeleton startColor = "complimentary.900 " endColor = "complimentary.100" height = "10px" width = "auto" mt = { 2 } />
224+ < Skeleton startColor = "complimentary.700 " endColor = "complimentary.100" height = "10px" width = "auto" mt = { 2 } />
225+ < Skeleton startColor = "complimentary.700 " endColor = "complimentary.100" height = "10px" width = "auto" mt = { 2 } />
223226 </ >
224227 ) : (
225228 Number ( interchainBalance ) > 0 && (
@@ -260,88 +263,22 @@ const AssetCard: React.FC<AssetCardProps> = ({ address, assetName, balance, apy,
260263} ;
261264
262265const AssetsGrid : React . FC < AssetGridProps > = ( { address, assets, isWalletConnected, interchainAssets : interchainAssets , refetch } ) => {
266+ console . log ( assets )
263267 const scrollRef = React . useRef < HTMLDivElement > ( null ) ;
264268 const [ focusedIndex , setFocusedIndex ] = useState ( 0 ) ;
265269
266270 const handleMouseEnter = ( index : number ) => {
267271 setFocusedIndex ( index ) ;
268272 } ;
269273
270- // const scrollByOne = (direction: 'left' | 'right') => {
271- // if (!scrollRef.current) return;
272-
273- // const cardWidth = 380;
274- // let newIndex = focusedIndex;
275-
276- // if (direction === 'left' && focusedIndex > 0) {
277- // scrollRef.current.scrollBy({ left: -cardWidth, behavior: 'smooth' });
278- // newIndex = focusedIndex - 1;
279- // } else if (direction === 'right' && focusedIndex < assets.length - 1) {
280- // scrollRef.current.scrollBy({ left: cardWidth, behavior: 'smooth' });
281- // newIndex = focusedIndex + 1;
282- // }
283-
284- // setFocusedIndex(newIndex);
285- // };
286-
287- // const getZoneName = (qAssetName: string) => {
288- // switch (qAssetName) {
289- // case 'QATOM':
290- // return 'Cosmos';
291- // case 'QOSMO':
292- // return 'Osmosis';
293- // case 'QSTARS':
294- // return 'Stargaze';
295- // case 'QSOMM':
296- // return 'Sommelier';
297- // case 'QREGEN':
298- // return 'Regen';
299- // case 'QJUNO':
300- // return 'Juno';
301- // case 'QDYDX':
302- // return 'DyDx';
303-
304- // default:
305- // return qAssetName;
306- // }
307- // };
308-
274+
309275 return (
310276 < >
311277 { /* Carousel controls and title */ }
312278 < Flex justifyContent = "space-between" alignItems = "center" mb = { 4 } >
313279 < Text fontSize = "xl" fontWeight = "bold" color = "white" >
314280 qAssets
315281 </ Text >
316- { /* <Flex alignItems="center" gap="2">
317- <IconButton
318- icon={<ChevronLeftIcon />}
319- onClick={() => scrollByOne('left')}
320- aria-label="Scroll left"
321- variant="ghost"
322- _hover={{ bgColor: 'transparent', color: 'complimentary.900' }}
323- _active={{ transform: 'scale(0.75)', color: 'complimentary.800' }}
324- color="white"
325- isDisabled={focusedIndex === 0}
326- _disabled={{ cursor: 'default' }}
327- />
328- <Box minWidth="100px" textAlign="center">
329- <Text fontSize="md" fontWeight="bold" color="white">
330- {getZoneName(assets[focusedIndex]?.name)}
331- </Text>
332- </Box>
333- <IconButton
334- icon={<ChevronRightIcon />}
335- onClick={() => scrollByOne('right')}
336- aria-label="Scroll right"
337- variant="ghost"
338- _hover={{ bgColor: 'transparent', color: 'complimentary.900' }}
339- _active={{ transform: 'scale(0.75)', color: 'complimentary.800' }}
340- color="white"
341- isDisabled={focusedIndex === assets.length - 1}
342- _disabled={{ cursor: 'default' }}
343- />
344- </Flex> */ }
345282 </ Flex >
346283
347284 { /* Carousel content */ }
0 commit comments