Separate getChains and setChains

pages/[safeAddress]/balances.tsx

@@ -1,39 +1,14 @@
-import {useEffect} from "react";
 import Head from "next/head";
 import type {NextPage} from "next";
-import type {SafeInfo} from "@gnosis.pm/safe-react-gateway-sdk";
 
-import {useAppDispatch, useAppSelector} from "store";
-import {selectSafeInfo, setSafeInfo} from "store/safeInfoSlice";
-import {initSafeInfoService} from "services/safeInfoService";
+import {selectSafeInfo} from "store/safeInfoSlice";
 import SafeHeader from "components/common/SafeHeader";
 import useSafeAddress from "services/useSafeAddress";
+import { useAppSelector } from "store";
 
-const Home: NextPage = () => {
+const Balances: NextPage = () => {
   const { address, chainId } = useSafeAddress()
-  const dispatch = useAppDispatch()
-
-  const safeInfo = useAppSelector(selectSafeInfo);
-
-  useEffect(() => {
-    if (!address || !chainId) return
-
-    const {onSuccess, onError, unsubscribe} = initSafeInfoService(chainId, address)
-
-    const handleSuccess = (data: SafeInfo) => {
-      dispatch(setSafeInfo(data))
-    }
-    const handleError = (error: Error) => {
-      console.error("Error loading Safe info", error)
-    }
-
-    onSuccess(handleSuccess)
-    onError(handleError)
-
-    return () => {
-      unsubscribe()
-    }
-  }, [dispatch, address, chainId])
+  const safeInfo = useAppSelector(selectSafeInfo)
 
   return (
     <div>
@@ -45,10 +20,10 @@ const Home: NextPage = () => {
 
       <SafeHeader />
 
-      <main>Hello Balances of {address}</main>
+      <main>Hello Balances of {address} on chainId {chainId}</main>
       <pre>{JSON.stringify(safeInfo, null, 2)}</pre>
     </div>
   );
 };
 
-export default Home;
+export default Balances;

pages/_app.tsx

@@ -1,14 +1,26 @@
-import "../styles/globals.css";
+import { ReactElement } from "react";
 import type { AppProps } from "next/app";
 import { Provider } from "react-redux";
 import { store } from "../store";
+import useChains from "services/useChains";
+import useSafeInfo from "services/useSafeInfo";
+import "../styles/globals.css";
+
+const Consumer = ({ children }: { children: ReactElement }): ReactElement => {
+  useChains();
+  useSafeInfo();
+
+  return children
+}
 
-function MyApp({ Component, pageProps }: AppProps) {
+function SafeWebCore({ Component, pageProps }: AppProps) {
   return (
     <Provider store={store}>
-      <Component {...pageProps} />
+      <Consumer>
+        <Component {...pageProps} />
+      </Consumer>
     </Provider>
   );
 }
 
-export default MyApp;
+export default SafeWebCore;

pages/index.tsx

@@ -1,6 +1,7 @@
-import type { NextPage } from 'next'
-import Head from 'next/head'
-import styles from '../styles/Home.module.css'
+import type { NextPage } from "next";
+import Head from "next/head";
+
+import styles from "../styles/Home.module.css";
 
 const Home: NextPage = () => {
   return (
@@ -11,11 +12,9 @@ const Home: NextPage = () => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <main>
-        Hello web-core
-      </main>
+      <main>Hello web-core</main>
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;

services/safeInfoService.ts

@@ -1,6 +1,5 @@
 import EventEmitter from "events";
 import {getSafeInfo, SafeInfo} from '@gnosis.pm/safe-react-gateway-sdk'
-
 import {GATEWAY_URL, POLLING_INTERVAL} from "config/constants";
 
 export enum SAFE_INFO_EVENTS {
@@ -48,4 +47,4 @@ export const initSafeInfoService = (chainId: string, address: string): SafeInfoD
     onError,
     unsubscribe
   }
-}
+}

services/useAsync.ts

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react'
+
+type AsyncResult<T> = [
+  result: T | undefined,
+  error: Error | undefined,
+  loading: boolean,
+]
+
+const useAsync = <T>(asyncCall: () => Promise<T>): AsyncResult<T> => {
+  const [result, setResult] = useState<T>()
+  const [error, setError] = useState<Error>()
+  const [loading, setLoading] = useState<boolean>(true)
+
+  useEffect(() => {
+    let isCurrent = true
+
+    setResult(undefined)
+    setError(undefined)
+    setLoading(true)
+
+    asyncCall()
+      .then((val: T) => {
+        isCurrent && setResult(val)
+      })
+      .catch((err) => {
+        isCurrent && setError(err)
+      })
+      .finally(() => {
+        isCurrent && setLoading(false)
+      })
+
+    return () => {
+      isCurrent = false
+    }
+  }, [asyncCall])
+
+  return [ result, error, loading ]
+}
+
+export default useAsync

services/useChains.ts

@@ -0,0 +1,28 @@
+import {
+  ChainInfo,
+  getChainsConfig,
+  type ChainListResponse,
+} from "@gnosis.pm/safe-react-gateway-sdk";
+import { GATEWAY_URL } from "config/constants";
+import { useEffect } from "react";
+import { useAppDispatch } from "store";
+import { setChains } from "store/chainsSlice";
+import useAsync from "./useAsync";
+
+const getChainConfigs = (): Promise<ChainListResponse> => {
+  return getChainsConfig(GATEWAY_URL);
+}
+
+const useChains = (): { chains: ChainInfo[], error?: Error, loading: boolean } => {
+  const dispatch = useAppDispatch()
+  const [ data, error, loading ] = useAsync<ChainListResponse>(getChainConfigs)
+  const chains = data?.results || []
+
+  useEffect(() => {
+    dispatch(setChains(chains))
+  }, [chains, dispatch])
+
+  return { chains, error, loading }
+}
+
+export default useChains

services/useSafeInfo.ts

@@ -0,0 +1,34 @@
+import {useEffect} from "react";
+import type {SafeInfo} from "@gnosis.pm/safe-react-gateway-sdk";
+import {useAppDispatch} from "store";
+import {setSafeInfo} from "store/safeInfoSlice";
+import {initSafeInfoService} from "services/safeInfoService";
+import useSafeAddress from "./useSafeAddress";
+
+const useSafeInfo = (): void => {
+  const { address, chainId } = useSafeAddress()
+  const dispatch = useAppDispatch()
+
+  useEffect(() => {
+    if (!address || !chainId) return
+
+    const {onSuccess, onError, unsubscribe} = initSafeInfoService(chainId, address)
+
+    const handleSuccess = (data: SafeInfo) => {
+      dispatch(setSafeInfo(data))
+    }
+
+    const handleError = (error: Error) => {
+      console.error("Error loading Safe info", error)
+    }
+
+    onSuccess(handleSuccess)
+    onError(handleError)
+
+    return () => {
+      unsubscribe()
+    }
+  }, [dispatch, address, chainId])
+};
+
+export default useSafeInfo;

store/chainsSlice.ts

@@ -0,0 +1,38 @@
+import { type ChainInfo } from "@gnosis.pm/safe-react-gateway-sdk";
+import { createSelector,  createSlice, type PayloadAction } from "@reduxjs/toolkit";
+import type { RootState } from ".";
+
+type ChainsState = {
+  chains: ChainInfo[]
+}
+
+const initialState: ChainsState = {
+  chains: [],
+};
+
+export const chainsSlice = createSlice({
+  name: "chains",
+  initialState,
+  reducers: {
+    setChains: (_: RootState, action: PayloadAction<ChainsState>): ChainsState => {
+      return action.payload;
+    },
+  }
+});
+
+export const { setChains } = chainsSlice.actions;
+
+export const selectChains = (state: RootState): ChainsState => {
+  return state[chainsSlice.name].chains;
+};
+
+export const selectChainById = createSelector(
+  [
+    selectChains,
+    (_: RootState, chainId: string) => chainId,
+  ],
+
+  (chains: ChainInfo[], chainId: string): ChainInfo | undefined => {
+    return chains.find((item) => item.chainId === chainId);
+  }
+);

store/index.ts

@@ -1,13 +1,19 @@
 import {
   configureStore,
-  ThunkAction,
-  Action,
   combineReducers,
+  type ThunkAction,
+  type Action,
 } from "@reduxjs/toolkit";
-import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
+import {
+  useDispatch,
+  useSelector,
+  type TypedUseSelectorHook,
+} from "react-redux";
+import { chainsSlice } from "./chainsSlice";
 import { safeInfoSlice } from "./safeInfoSlice";
 
 const rootReducer = combineReducers({
+  [chainsSlice.name]: chainsSlice.reducer,
   [safeInfoSlice.name]: safeInfoSlice.reducer,
 });