@@ -6,10 +6,12 @@ import { ChainProvider } from '@interchain-kit/react';
66import  {  chains ,  assetLists  }  from  'chain-registry' ; 
77import  {  QueryClientProvider ,  QueryClient  }  from  '@tanstack/react-query' ; 
88import  {  Box ,  Toaster ,  useTheme  }  from  '@interchain-ui/react' ; 
9+ import  {  useMemo  }  from  'react' ; 
910// import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; 
1011
1112import  {  CustomThemeProvider ,  Layout  }  from  '@/components' ; 
1213import  {  wallets  }  from  '@/config' ; 
14+ import  {  useStarshipChains  }  from  '@/hooks' ; 
1315
1416const  queryClient  =  new  QueryClient ( { 
1517  defaultOptions : { 
@@ -21,22 +23,52 @@ const queryClient = new QueryClient({
2123  } , 
2224} ) ; 
2325
24- function  CreateCosmosApp ( {  Component,  pageProps } : AppProps )  { 
26+ // Create a separate component for the app content 
27+ function  AppContent ( {  Component,  pageProps } : AppProps )  { 
2528  const  {  themeClass }  =  useTheme ( ) ; 
29+   const  {  data : starshipData ,  isLoading }  =  useStarshipChains ( ) ; 
30+   console . log ( 'starshipData' ,  starshipData ) ; 
2631
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 )  { 
2766  return  ( 
2867    < 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 > 
4072    </ CustomThemeProvider > 
4173  ) ; 
4274} 
0 commit comments