interchain-kit addChain async

Author: sdqede

templates/chain-admin/hooks/common/useAddHyperwebChain.ts

@@ -17,15 +17,16 @@ export const useAddHyperwebChain = () => {
     }
   }, [starshipData, isHyperwebAdded]);
 
-  const refetchAndAddChain = () => {
-    refetch().then(({ data }) => {
-      addHyperwebChain(data?.v2);
-    });
+  const refetchAndAddChain = async () => {
+    const { data } = await refetch();
+    await addHyperwebChain(data?.v2);
   };
 
-  const addHyperwebChain = (data: StarshipChains['v2'] | null | undefined) => {
+  const addHyperwebChain = async (
+    data: StarshipChains['v2'] | null | undefined
+  ) => {
     if (!data) return;
-    addChains(data.chains, data.assets);
+    await addChains(data.chains, data.assets);
     chainStore.setSelectedChain(data.chains[0].chainName);
     chainStore.setIsHyperwebAdded(true);
   };

templates/chain-admin/pages/_app.tsx

@@ -6,12 +6,10 @@ import { ChainProvider, InterchainWalletModal } from '@interchain-kit/react';
 import { chains, assetLists } from 'chain-registry';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { Box, Toaster, useTheme } from '@interchain-ui/react';
-import { useMemo } from 'react';
 // import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import { CustomThemeProvider, Layout } from '@/components';
 import { wallets } from '@/config';
-import { useStarshipChains } from '@/hooks';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -23,55 +21,24 @@ const queryClient = new QueryClient({
   },
 });
 
-// Create a separate component for the app content
-function AppContent({ Component, pageProps }: AppProps) {
+function CreateCosmosApp({ Component, pageProps }: AppProps) {
   const { themeClass } = useTheme();
-  const { data: starshipData, isLoading } = useStarshipChains();
-  console.log('starshipData', starshipData);
 
-  // Merge chain-registry and starship chains
-  const combinedChains = useMemo(() => {
-    if (starshipData?.v2.chains) {
-      return [...chains, ...starshipData.v2.chains];
-    }
-    return chains;
-  }, [starshipData]);
-  console.log('combinedChains', combinedChains);
-
-  // Merge chain-registry and starship assetLists
-  const combinedAssetLists = useMemo(() => {
-    if (starshipData?.v2.assets) {
-      return [...assetLists, ...starshipData.v2.assets];
-    }
-    return assetLists;
-  }, [starshipData]);
-
-  // Don't render ChainProvider until starship data is loaded
-  if (isLoading) {
-    return <div>Loading chains...</div>; // or your preferred loading component
-  }
-
-  return (
-    <ChainProvider chains={combinedChains} assetLists={combinedAssetLists} wallets={wallets}
-      walletModal={() => <InterchainWalletModal />}
-    >
-      <Box className={themeClass}>
-        <Layout>
-          <Component {...pageProps} />
-          <Toaster position="top-right" closeButton={true} />
-        </Layout>
-      </Box>
-    </ChainProvider>
-  );
-}
-
-function CreateCosmosApp(props: AppProps) {
   return (
     <CustomThemeProvider>
-      <QueryClientProvider client={queryClient}>
-        <AppContent {...props} />
-        {/* <ReactQueryDevtools /> */}
-      </QueryClientProvider>
+      <ChainProvider chains={chains} assetLists={assetLists} wallets={wallets}
+        walletModal={() => <InterchainWalletModal />}
+      >
+        <QueryClientProvider client={queryClient}>
+          <Box className={themeClass}>
+            <Layout>
+              <Component {...pageProps} />
+              <Toaster position="top-right" closeButton={true} />
+            </Layout>
+          </Box>
+          {/* <ReactQueryDevtools /> */}
+        </QueryClientProvider>
+      </ChainProvider>
     </CustomThemeProvider>
   );
 }