refactor(web): switch useCurrencies to use RTK hook

Instead of using an async call from the old safe-gateway-typescript-sdk,
we are now using the RTK hooks from the @safe-global/store package.

apps/web/src/components/balances/CurrencySelect/useCurrencies.ts

@@ -1,29 +1,9 @@
-import { useEffect } from 'react'
-import type { FiatCurrencies } from '@safe-global/safe-gateway-typescript-sdk'
-import { getFiatCurrencies } from '@safe-global/safe-gateway-typescript-sdk'
-import useAsync from '@/hooks/useAsync'
-import { Errors, logError } from '@/services/exceptions'
+import type { FiatCurrencies } from '@safe-global/store/gateway/types'
 
-// The SDK returns a list of currencies, including crypto
-// some of the crypto currencies have a length of 4 characters
-// we filter them out because the frontend only supports ISO 4217 currencies
-// and they have to be exactly 3 characters long
-// if that is not the case Intl.NumberFormat will throw an error and crash the app
-const getISO4217Currencies = async (): Promise<FiatCurrencies> => {
-  const currencies = await getFiatCurrencies()
-
-  return currencies.filter((currency) => currency.length === 3)
-}
+import { useBalancesGetSupportedFiatCodesV1Query } from '@safe-global/store/src/gateway/AUTO_GENERATED/balances'
 
 const useCurrencies = (): FiatCurrencies | undefined => {
-  // Re-fetch assets when the entire SafeInfo updates
-  const [data, error] = useAsync<FiatCurrencies>(getISO4217Currencies, [])
-
-  // Log errors
-  useEffect(() => {
-    if (!error) return
-    logError(Errors._607, error.message)
-  }, [error])
+  const { data } = useBalancesGetSupportedFiatCodesV1Query()
 
   return data
 }

apps/web/src/components/sidebar/DebugToggle/index.tsx

@@ -1,14 +1,10 @@
 import { type ChangeEvent, type ReactElement } from 'react'
 import { Box, FormControlLabel, Switch } from '@mui/material'
-import { localItem } from '@/services/local-storage/local'
 import useLocalStorage from '@/services/local-storage/useLocalStorage'
 import { setDarkMode } from '@/store/settingsSlice'
 import { useDarkMode } from '@/hooks/useDarkMode'
 import { useAppDispatch } from '@/store'
-
-const LS_KEY = 'debugProdCgw'
-
-export const cgwDebugStorage = localItem<boolean>(LS_KEY)
+import { LS_KEY } from '@/config/gateway'
 
 const DebugToggle = (): ReactElement => {
   const dispatch = useAppDispatch()

apps/web/src/config/gateway.ts

@@ -0,0 +1,6 @@
+import { GATEWAY_URL_PRODUCTION, GATEWAY_URL_STAGING, IS_PRODUCTION } from '@/config/constants'
+import { localItem } from '@/services/local-storage/local'
+
+export const LS_KEY = 'debugProdCgw'
+export const cgwDebugStorage = localItem<boolean>(LS_KEY)
+export const GATEWAY_URL = IS_PRODUCTION || cgwDebugStorage.get() ? GATEWAY_URL_PRODUCTION : GATEWAY_URL_STAGING

apps/web/src/hooks/loadables/helpers/config.ts

@@ -1,5 +1,6 @@
 import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
-import { GATEWAY_URL } from '@/pages/_app'
+
+import { GATEWAY_URL } from '@/config/gateway'
 
 export const getConfigs = async (): Promise<ChainInfo[]> => {
   let allResults: ChainInfo[] = []

apps/web/src/hooks/useSafeTokenAllocation.ts

@@ -1,5 +1,4 @@
 import { getSafeTokenAddress, getSafeLockingAddress } from '@/components/common/SafeTokenWidget'
-import { cgwDebugStorage } from '@/components/sidebar/DebugToggle'
 import { IS_PRODUCTION } from '@/config/constants'
 import { ZERO_ADDRESS } from '@safe-global/protocol-kit/dist/src/utils/constants'
 import { isPast } from 'date-fns'
@@ -9,6 +8,7 @@ import useAsync, { type AsyncResult } from './useAsync'
 import useSafeInfo from './useSafeInfo'
 import { getWeb3ReadOnly } from './wallets/web3'
 import memoize from 'lodash/memoize'
+import { cgwDebugStorage } from '@/config/gateway'
 
 export const VESTING_URL =
   IS_PRODUCTION || cgwDebugStorage.get()

apps/web/src/pages/_app.tsx

@@ -12,7 +12,7 @@ import { setBaseUrl as setNewGatewayBaseUrl } from '@safe-global/safe-client-gat
 import { CacheProvider, type EmotionCache } from '@emotion/react'
 import SafeThemeProvider from '@/components/theme/SafeThemeProvider'
 import '@/styles/globals.css'
-import { IS_PRODUCTION, GATEWAY_URL_STAGING, GATEWAY_URL_PRODUCTION, BRAND_NAME } from '@/config/constants'
+import { BRAND_NAME } from '@/config/constants'
 import { makeStore, useHydrateStore } from '@/store'
 import PageLayout from '@/components/common/PageLayout'
 import useLoadableStores from '@/hooks/useLoadableStores'
@@ -26,7 +26,6 @@ import { useInitSession } from '@/hooks/useInitSession'
 import Notifications from '@/components/common/Notifications'
 import CookieAndTermBanner from 'src/components/common/CookieAndTermBanner'
 import { useDarkMode } from '@/hooks/useDarkMode'
-import { cgwDebugStorage } from '@/components/sidebar/DebugToggle'
 import { useTxTracking } from '@/hooks/useTxTracking'
 import { useSafeMsgTracking } from '@/hooks/messages/useSafeMsgTracking'
 import useGtm from '@/services/analytics/useGtm'
@@ -47,8 +46,7 @@ import PkModulePopup from '@/services/private-key-module/PkModulePopup'
 import GeoblockingProvider from '@/components/common/GeoblockingProvider'
 import { useVisitedSafes } from '@/features/myAccounts/hooks/useVisitedSafes'
 import OutreachPopup from '@/features/targetedOutreach/components/OutreachPopup'
-
-export const GATEWAY_URL = IS_PRODUCTION || cgwDebugStorage.get() ? GATEWAY_URL_PRODUCTION : GATEWAY_URL_STAGING
+import { GATEWAY_URL } from '@/config/gateway'
 
 const reduxStore = makeStore()
 

apps/web/src/store/api/safePass.ts

@@ -1,9 +1,6 @@
-import { cgwDebugStorage } from '@/components/sidebar/DebugToggle'
-import { IS_PRODUCTION, GATEWAY_URL_PRODUCTION, GATEWAY_URL_STAGING } from '@/config/constants'
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import { GATEWAY_URL } from '@/config/gateway'
 
-// TODO: Replace this with the auto-generated SDK once available.
-const GATEWAY_URL = IS_PRODUCTION || cgwDebugStorage.get() ? GATEWAY_URL_PRODUCTION : GATEWAY_URL_STAGING
 const GLOBAL_CAMPAIGN_IDS: Record<'1' | '11155111', string> = {
   '11155111': 'fa9f462b-8e8c-4122-aa41-2464e919b721',
   '1': '9ed78b8b-178d-4e25-9ef2-1517865991ee',

apps/web/src/store/index.ts

@@ -27,6 +27,8 @@ import * as hydrate from './useHydrateStore'
 import { ofacApi } from '@/store/api/ofac'
 import { safePassApi } from './api/safePass'
 import { version as termsVersion } from '@/markdown/terms/version'
+import { cgwClient, setBaseUrl } from '@safe-global/store/gateway/cgwClient'
+import { GATEWAY_URL } from '@/config/gateway'
 
 const rootReducer = combineReducers({
   [slices.chainsSlice.name]: slices.chainsSlice.reducer,
@@ -55,6 +57,7 @@ const rootReducer = combineReducers({
   [ofacApi.reducerPath]: ofacApi.reducer,
   [safePassApi.reducerPath]: safePassApi.reducer,
   [slices.gatewayApi.reducerPath]: slices.gatewayApi.reducer,
+  [cgwClient.reducerPath]: cgwClient.reducer,
 })
 
 const persistedSlices: (keyof Partial<RootState>)[] = [
@@ -88,6 +91,7 @@ const middleware: Middleware<{}, RootState>[] = [
   safePassApi.middleware,
   slices.gatewayApi.middleware,
 ]
+
 const listeners = [safeMessagesListener, txHistoryListener, txQueueListener, swapOrderListener, swapOrderStatusListener]
 
 export const _hydrationReducer: typeof rootReducer = (state, action) => {
@@ -116,11 +120,13 @@ export const _hydrationReducer: typeof rootReducer = (state, action) => {
 }
 
 export const makeStore = (initialState?: Partial<RootState>): EnhancedStore<RootState, Action> => {
+  setBaseUrl(GATEWAY_URL)
+
   const store = configureStore({
     reducer: _hydrationReducer,
     middleware: (getDefaultMiddleware) => {
       listeners.forEach((listener) => listener(listenerMiddlewareInstance))
-      return getDefaultMiddleware({ serializableCheck: false }).concat(middleware)
+      return getDefaultMiddleware({ serializableCheck: false }).concat(cgwClient.middleware).concat(middleware)
     },
     devTools: !IS_PRODUCTION,
     preloadedState: initialState,