feat: chain config store, useChainConfigs, apply all

docs: add changelog

fix: add isHydrated

feat: update test

feat: update test case

CHANGELOG.md

@@ -39,6 +39,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#1054](https://github.com/alleslabs/celatone-frontend/pull/1054) Add chain config store, useChainConfig hook, and apply it all places
+
 ### Improvements
 
 ### Bug fixes

package.json

@@ -42,10 +42,11 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@alleslabs/shared": "1.0.0-dev1",
     "@amplitude/analytics-browser": "^2.3.3",
     "@amplitude/analytics-types": "^2.3.0",
     "@amplitude/plugin-user-agent-enrichment-browser": "^1.0.0",
-    "@chain-registry/types": "0.17.0",
+    "@chain-registry/types": "0.45.36",
     "@chakra-ui/anatomy": "^2.2.2",
     "@chakra-ui/card": "^2.2.0",
     "@chakra-ui/icons": "^2.1.1",

src/config/chain/types.ts

@@ -58,7 +58,7 @@ export interface ChainConfig {
   registryChainName: string;
   prettyName: string;
   logoUrl?: string;
-  networkType: "mainnet" | "testnet";
+  networkType: "mainnet" | "testnet" | "devnet" | "local";
   lcd: string;
   rpc: string;
   indexer: string;

src/lib/app-provider/contexts/app.tsx

@@ -9,8 +9,9 @@ import {
   useState,
 } from "react";
 
+import { useChainConfigs } from "../hooks/useChainConfigs";
 import { useNetworkChange } from "../hooks/useNetworkChange";
-import { CHAIN_CONFIGS, FALLBACK_CHAIN_CONFIG } from "config/chain";
+import { FALLBACK_CHAIN_CONFIG } from "config/chain";
 import type { ChainConfig } from "config/chain";
 import { PROJECT_CONSTANTS } from "config/project";
 import type { ProjectConstants } from "config/project";
@@ -21,6 +22,8 @@ import {
   HASURA_ADMIN_SECRET,
   SUPPORTED_CHAIN_IDS,
 } from "env";
+import { LoadingOverlay } from "lib/components/LoadingOverlay";
+import { useChainConfigStore } from "lib/providers/store";
 import { changeFavicon } from "lib/utils";
 
 interface AppProviderProps {
@@ -57,32 +60,37 @@ const AppContext = createContext<AppContextInterface>(DEFAULT_STATES);
 
 export const AppProvider = ({ children }: AppProviderProps) => {
   const { setModalTheme } = useModalTheme();
+  const { chainConfigs } = useChainConfigs();
+  const { isHydrated: isChainConfigStoreHydrated } = useChainConfigStore();
 
   const [states, setStates] = useState<AppContextInterface>(DEFAULT_STATES);
 
   // Remark: this function is only used in useSelectChain. Do not use in other places.
-  const handleOnChainIdChange = useCallback((newChainId: string) => {
-    const chainConfig = CHAIN_CONFIGS[newChainId] ?? FALLBACK_CHAIN_CONFIG;
-
-    const theme = getTheme(chainConfig.chain);
-    changeFavicon(theme.branding.favicon);
-
-    setStates({
-      isHydrated: true,
-      availableChainIds: SUPPORTED_CHAIN_IDS,
-      currentChainId: newChainId,
-      chainConfig,
-      indexerGraphClient: new GraphQLClient(chainConfig.indexer, {
-        headers: {
-          "x-hasura-admin-secret": HASURA_ADMIN_SECRET,
-        },
-      }),
-      constants: PROJECT_CONSTANTS,
-      theme,
-      setTheme: (newTheme: ThemeConfig) =>
-        setStates((prev) => ({ ...prev, theme: newTheme })),
-    });
-  }, []);
+  const handleOnChainIdChange = useCallback(
+    (newChainId: string) => {
+      const chainConfig = chainConfigs[newChainId] ?? FALLBACK_CHAIN_CONFIG;
+
+      const theme = getTheme(chainConfig.chain);
+      changeFavicon(theme.branding.favicon);
+
+      setStates({
+        isHydrated: true,
+        availableChainIds: SUPPORTED_CHAIN_IDS,
+        currentChainId: newChainId,
+        chainConfig,
+        indexerGraphClient: new GraphQLClient(chainConfig.indexer, {
+          headers: {
+            "x-hasura-admin-secret": HASURA_ADMIN_SECRET,
+          },
+        }),
+        constants: PROJECT_CONSTANTS,
+        theme,
+        setTheme: (newTheme: ThemeConfig) =>
+          setStates((prev) => ({ ...prev, theme: newTheme })),
+      });
+    },
+    [chainConfigs]
+  );
 
   // Disable "Leave page" alert
   useEffect(() => {
@@ -102,6 +110,7 @@ export const AppProvider = ({ children }: AppProviderProps) => {
 
   useNetworkChange(handleOnChainIdChange);
 
+  if (!isChainConfigStoreHydrated) return <LoadingOverlay />;
   return <AppContext.Provider value={states}>{children}</AppContext.Provider>;
 };
 

src/lib/app-provider/hooks/index.ts

@@ -17,3 +17,4 @@ export * from "./useConvertHexAddress";
 export * from "./usePlatform";
 export * from "./useInitia";
 export * from "./useIsConnected";
+export * from "./useChainConfigs";