Merge branch '474-refactor-the-token-map-hook-to-enhance-efficiency' …

…into 'dev'

Resolve "Refactor the token map hook to enhance efficiency"

Closes #474

See merge request ergo/rosen-bridge/ui!395

.changeset/loud-windows-count.md

@@ -0,0 +1,5 @@
+---
+'@rosen-bridge/rosen-app': patch
+---
+
+Refactor the token map hook to enhance efficiency

apps/rosen/app/App.tsx

@@ -12,14 +12,17 @@ import { App as AppBase } from '@rosen-bridge/ui-kit';
 import { theme } from '@/_theme/theme';
 
 import { WalletContextProvider } from './_contexts/walletContext';
+import { TokenMapProvider } from './_hooks';
 import { SideBar } from './SideBar';
 import { Toolbar } from './Toolbar';
 
 export const App = ({ children }: { children?: React.ReactNode }) => {
   return (
     <NoSsr>
       <AppBase sideBar={<SideBar />} theme={theme} toolbar={<Toolbar />}>
-        <WalletContextProvider>{children}</WalletContextProvider>
+        <TokenMapProvider>
+          <WalletContextProvider>{children}</WalletContextProvider>
+        </TokenMapProvider>
       </AppBase>
     </NoSsr>
   );

apps/rosen/app/_hooks/useTokenMap.tsx

@@ -0,0 +1,55 @@
+import {
+  ReactNode,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useTransition,
+} from 'react';
+
+import { TokenMap } from '@rosen-bridge/tokens';
+
+import { getTokenMap } from '@/_tokenMap/getClientTokenMap';
+
+/**
+ * return TokenMap instance
+ */
+export const useTokenMap = () => {
+  const context = useContext(TokenMapContext);
+
+  if (!context) {
+    throw new Error('useTokenMap must be used within TokenMapProvider');
+  }
+
+  return context;
+};
+
+export type TokenMapContextType = TokenMap;
+
+export const TokenMapContext = createContext<TokenMap | null>(null);
+
+export const TokenMapProvider = ({ children }: { children: ReactNode }) => {
+  const [tokenMap, setTokenMap] = useState(
+    new TokenMap({ idKeys: {}, tokens: [] }),
+  );
+
+  const [, startTransition] = useTransition();
+
+  useEffect(() => {
+    startTransition(async () => {
+      try {
+        setTokenMap(await getTokenMap());
+      } catch (error) {
+        throw new Error('Failed to fetch TokenMap, reload the page.', {
+          cause: error,
+        });
+      }
+    });
+  }, []);
+
+  return (
+    <TokenMapContext.Provider value={tokenMap}>
+      {children}
+    </TokenMapContext.Provider>
+  );
+};