@@ -6,10 +6,12 @@ import { ChainProvider } from '@interchain-kit/react';
6
6
import { chains , assetLists } from 'chain-registry' ;
7
7
import { QueryClientProvider , QueryClient } from '@tanstack/react-query' ;
8
8
import { Box , Toaster , useTheme } from '@interchain-ui/react' ;
9
+ import { useMemo } from 'react' ;
9
10
// import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
10
11
11
12
import { CustomThemeProvider , Layout } from '@/components' ;
12
13
import { wallets } from '@/config' ;
14
+ import { useStarshipChains } from '@/hooks' ;
13
15
14
16
const queryClient = new QueryClient ( {
15
17
defaultOptions : {
@@ -21,22 +23,52 @@ const queryClient = new QueryClient({
21
23
} ,
22
24
} ) ;
23
25
24
- function CreateCosmosApp ( { Component, pageProps } : AppProps ) {
26
+ // Create a separate component for the app content
27
+ function AppContent ( { Component, pageProps } : AppProps ) {
25
28
const { themeClass } = useTheme ( ) ;
29
+ const { data : starshipData , isLoading } = useStarshipChains ( ) ;
30
+ console . log ( 'starshipData' , starshipData ) ;
26
31
32
+ // Merge chain-registry and starship chains
33
+ const combinedChains = useMemo ( ( ) => {
34
+ if ( starshipData ?. v2 . chains ) {
35
+ return [ ...chains , ...starshipData . v2 . chains ] ;
36
+ }
37
+ return chains ;
38
+ } , [ starshipData ] ) ;
39
+
40
+ // Merge chain-registry and starship assetLists
41
+ const combinedAssetLists = useMemo ( ( ) => {
42
+ if ( starshipData ?. v2 . assets ) {
43
+ return [ ...assetLists , ...starshipData . v2 . assets ] ;
44
+ }
45
+ return assetLists ;
46
+ } , [ starshipData ] ) ;
47
+
48
+ // Don't render ChainProvider until starship data is loaded
49
+ if ( isLoading ) {
50
+ return < div > Loading chains...</ div > ; // or your preferred loading component
51
+ }
52
+
53
+ return (
54
+ < ChainProvider chains = { combinedChains } assetLists = { combinedAssetLists } wallets = { wallets } >
55
+ < Box className = { themeClass } >
56
+ < Layout >
57
+ < Component { ...pageProps } />
58
+ < Toaster position = "top-right" closeButton = { true } />
59
+ </ Layout >
60
+ </ Box >
61
+ </ ChainProvider >
62
+ ) ;
63
+ }
64
+
65
+ function CreateCosmosApp ( props : AppProps ) {
27
66
return (
28
67
< CustomThemeProvider >
29
- < ChainProvider chains = { chains } assetLists = { assetLists } wallets = { wallets } >
30
- < QueryClientProvider client = { queryClient } >
31
- < Box className = { themeClass } >
32
- < Layout >
33
- < Component { ...pageProps } />
34
- < Toaster position = "top-right" closeButton = { true } />
35
- </ Layout >
36
- </ Box >
37
- { /* <ReactQueryDevtools /> */ }
38
- </ QueryClientProvider >
39
- </ ChainProvider >
68
+ < QueryClientProvider client = { queryClient } >
69
+ < AppContent { ...props } />
70
+ { /* <ReactQueryDevtools /> */ }
71
+ </ QueryClientProvider >
40
72
</ CustomThemeProvider >
41
73
) ;
42
74
}
0 commit comments