Init hooks and select hooks

components/balances/AssetsTable/index.tsx

@@ -1,6 +1,6 @@
+import { type ReactElement } from 'react'
 import { SafeBalanceResponse } from '@gnosis.pm/safe-react-gateway-sdk'
 import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'
-import { ReactElement } from 'react'
 import FiatValue from '@/components/common/FiatValue'
 import TokenAmount, { TokenIcon } from '@/components/common/TokenAmount'
 

components/common/Sidebar/index.tsx

@@ -1,19 +1,18 @@
 import { ReactElement, useState } from 'react'
 import { Button } from '@mui/material'
 
-import { useAppSelector } from 'store'
-import { selectSafeInfo } from '@/store/safeInfoSlice'
+import css from './styles.module.css'
+import useSafeInfo from '@/services/useSafeInfo'
 import ChainIndicator from '../ChainIndicator'
 import SafeHeader from '../SafeHeader'
 import SafeList from '../SafeList'
 import ErrorToast from '../ErrorToast'
-import css from './styles.module.css'
 import TxModal from '@/components/tx/TxModal'
 import Navigation from '@/components/common/Sidebar/Navigation'
 
 const Sidebar = (): ReactElement => {
   const [txOpen, setTxOpen] = useState<boolean>(false)
-  const { error, loading } = useAppSelector(selectSafeInfo)
+  const { error, loading } = useSafeInfo()
 
   return (
     <div className={css.container}>

components/tx/ReviewTx/index.tsx

@@ -6,12 +6,11 @@ import { Button, FormControl, TextField, Typography } from '@mui/material'
 import { TokenIcon } from '@/components/common/TokenAmount'
 import { createTokenTransferParams, createTransaction } from '@/services/createTransaction'
 import { shortenAddress } from '@/services/formatters'
-import { useAppSelector } from 'store'
-import { selectBalances } from '@/store/balancesSlice'
 import { useForm, type FieldValues } from 'react-hook-form'
 import css from './styles.module.css'
 import ErrorToast from '@/components/common/ErrorToast'
 import useSafeTxGas from '@/services/useSafeTxGas'
+import useBalances from '@/services/useBalances'
 
 const TokenTransferReview = ({ params, tokenInfo }: { params: SendAssetsFormData; tokenInfo: TokenInfo }) => {
   return (
@@ -32,7 +31,7 @@ const ReviewTx = ({
   params: SendAssetsFormData
   onSubmit: (tx: SafeTransaction) => void
 }): ReactElement => {
-  const balances = useAppSelector(selectBalances)
+  const balances = useBalances()
   const token = balances.items.find((item) => item.tokenInfo.address === params.tokenAddress)
   const tokenInfo = token?.tokenInfo
   const txParams = tokenInfo

components/tx/SendAssetsForm/index.tsx

@@ -3,11 +3,10 @@ import { Button, FormControl, InputLabel, MenuItem, Select, TextField } from '@m
 import { useForm, type FieldValues } from 'react-hook-form'
 
 import css from './styles.module.css'
-import { useAppSelector } from 'store'
-import { selectBalances } from '@/store/balancesSlice'
 import TokenAmount, { TokenIcon } from '@/components/common/TokenAmount'
 import { formatDecimals, toDecimals } from '@/services/formatters'
 import { validateAddress } from '@/services/validation'
+import useBalances from '@/services/useBalances'
 
 export type SendAssetsFormData = {
   recepient: string
@@ -16,7 +15,7 @@ export type SendAssetsFormData = {
 }
 
 const SendAssetsForm = ({ onSubmit }: { onSubmit: (formData: SendAssetsFormData) => void }): ReactElement => {
-  const balances = useAppSelector(selectBalances)
+  const balances = useBalances()
 
   const {
     register,

pages/_app.tsx

@@ -5,26 +5,26 @@ import { Provider } from 'react-redux'
 import '../styles/globals.css'
 import { store } from 'store'
 import PageLayout from '@/components/common/PageLayout'
-import useChains from '@/services/useChains'
-import useSafeInfo from '@/services/useSafeInfo'
-import useBalances from '@/services/useBalances'
-import useTxHistory from '@/services/useTxHistory'
-import useTxQueue from '@/services/useTxQueue'
-import { useWeb3 } from '@/services/useWeb3'
-import { useSafeSDK } from '@/services/useSafeSDK'
-import { useWeb3ReadOnly } from '@/services/useWeb3ReadOnly'
+import { useInitChains } from '@/services/useChains'
+import { useInitSafeInfo } from '@/services/useSafeInfo'
+import { useInitBalances } from '@/services/useBalances'
+import { useInitTxHistory } from '@/services/useTxHistory'
+import { useInitTxQueue } from '@/services/useTxQueue'
+import { useInitWeb3 } from '@/services/useWeb3'
+import { useInitSafeSDK } from '@/services/useSafeSDK'
+import { useInitWeb3ReadOnly } from '@/services/useWeb3ReadOnly'
 import usePathRewrite from '@/services/usePathRewrite'
 
 const InitApp = (): null => {
   usePathRewrite()
-  useChains()
-  useSafeInfo()
-  useBalances()
-  useTxHistory()
-  useTxQueue()
-  useWeb3()
-  useWeb3ReadOnly()
-  useSafeSDK()
+  useInitChains()
+  useInitSafeInfo()
+  useInitBalances()
+  useInitTxHistory()
+  useInitTxQueue()
+  useInitWeb3()
+  useInitWeb3ReadOnly()
+  useInitSafeSDK()
 
   return null
 }
@@ -33,7 +33,7 @@ const SafeWebCore = ({ Component, pageProps }: AppProps): ReactElement => {
   return (
     <Provider store={store}>
       <Head>
-        <title>Safe</title>
+        <title>Safe 🌭</title>
         <meta name="description" content="Safe app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>

pages/safe/balances/index.tsx

@@ -1,12 +1,11 @@
 import type { NextPage } from 'next'
 
-import { useAppSelector } from 'store'
-import { selectBalances } from '@/store/balancesSlice'
 import AssetsTable from '@/components/balances/AssetsTable'
 import CurrencySelect from '@/components/balances/CurrencySelect'
+import useBalances from '@/services/useBalances'
 
 const Balances: NextPage = () => {
-  const balances = useAppSelector(selectBalances)
+  const balances = useBalances()
 
   return (
     <main>

pages/safe/transactions/history.tsx

@@ -1,7 +1,8 @@
 import TxList from '@/components/transactions/TxList'
 import type { NextPage } from 'next'
-import { useAppDispatch, useAppSelector } from 'store'
-import { selectTxHistory, setPageUrl } from '@/store/txHistorySlice'
+import { useAppDispatch } from 'store'
+import { setPageUrl } from '@/store/txHistorySlice'
+import useTxHistory from '@/services/useTxHistory'
 
 const preventDefault = (fn: () => void): ((e: React.SyntheticEvent) => void) => {
   return (e) => {
@@ -11,7 +12,7 @@ const preventDefault = (fn: () => void): ((e: React.SyntheticEvent) => void) =>
 }
 
 const History: NextPage = () => {
-  const { page, pageUrl } = useAppSelector(selectTxHistory)
+  const { page, pageUrl } = useTxHistory()
   const dispatch = useAppDispatch()
 
   const onPageChange = (url?: string) => {

pages/safe/transactions/queue.tsx

@@ -1,7 +1,8 @@
 import TxList from '@/components/transactions/TxList'
 import type { NextPage } from 'next'
-import { useAppDispatch, useAppSelector } from 'store'
-import { selectTxQueue, setPageUrl } from '@/store/txQueueSlice'
+import { useAppDispatch } from 'store'
+import { setPageUrl } from '@/store/txQueueSlice'
+import useTxQueue from '@/services/useTxQueue'
 
 const preventDefault = (fn: () => void): ((e: React.SyntheticEvent) => void) => {
   return (e) => {
@@ -11,7 +12,7 @@ const preventDefault = (fn: () => void): ((e: React.SyntheticEvent) => void) =>
 }
 
 const Queue: NextPage = () => {
-  const { page, pageUrl } = useAppSelector(selectTxQueue)
+  const { page, pageUrl } = useTxQueue()
   const dispatch = useAppDispatch()
 
   const onPageChange = (url?: string) => {

services/exceptions/index.ts

@@ -1,7 +1,7 @@
 import * as Sentry from '@sentry/react'
 import { CaptureContext } from '@sentry/types'
+import { IS_PRODUCTION } from '@/config/constants'
 import ErrorCodes from './ErrorCodes'
-import IS_PRODUCTION from 'constants'
 
 export class CodedException extends Error {
   public readonly code: number

services/useBalances.ts

@@ -1,18 +1,18 @@
 import { getBalances, SafeBalanceResponse } from '@gnosis.pm/safe-react-gateway-sdk'
 import { useEffect } from 'react'
 import { useAppDispatch, useAppSelector } from 'store'
-import { selectSafeInfo } from '@/store/safeInfoSlice'
 import { GATEWAY_URL } from '@/config/constants'
 import useAsync from './useAsync'
+import useSafeInfo from './useSafeInfo'
 import { Errors, logError } from './exceptions'
-import { setBalances } from '@/store/balancesSlice'
+import { selectBalances, setBalances } from '@/store/balancesSlice'
 
 const loadBalances = (chainId: string, address: string) => {
   return getBalances(GATEWAY_URL, chainId, address)
 }
 
-const useBalances = (): void => {
-  const { safe } = useAppSelector(selectSafeInfo)
+export const useInitBalances = (): void => {
+  const { safe } = useSafeInfo()
   const dispatch = useAppDispatch()
 
   // Re-fetch assets when the entire SafeInfo updates
@@ -38,4 +38,9 @@ const useBalances = (): void => {
   }, [error])
 }
 
+const useBalances = () => {
+  const balances = useAppSelector(selectBalances)
+  return balances
+}
+
 export default useBalances

services/useChains.ts

@@ -1,16 +1,16 @@
 import { 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 { useAppDispatch, useAppSelector } from 'store'
+import { selectChains, setChains } from '@/store/chainsSlice'
 import { Errors, logError } from './exceptions'
 import useAsync from './useAsync'
 
 const getChains = (): Promise<ChainListResponse> => {
   return getChainsConfig(GATEWAY_URL)
 }
 
-const useChains = (): { error?: Error; loading: boolean } => {
+export const useInitChains = (): { error?: Error; loading: boolean } => {
   const dispatch = useAppDispatch()
 
   const [data, error, loading] = useAsync<ChainListResponse>(getChains, [])
@@ -30,4 +30,9 @@ const useChains = (): { error?: Error; loading: boolean } => {
   return { error, loading }
 }
 
+const useChains = () => {
+  const chains = useAppSelector(selectChains)
+  return chains
+}
+
 export default useChains

services/useSafeInfo.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect } from 'react'
 import { getSafeInfo, SafeInfo } from '@gnosis.pm/safe-react-gateway-sdk'
-import { useAppDispatch } from 'store'
-import { setSafeError, setSafeInfo, setSafeLoading } from '@/store/safeInfoSlice'
+import { useAppDispatch, useAppSelector } from 'store'
+import { selectSafeInfo, setSafeError, setSafeInfo, setSafeLoading } from '@/store/safeInfoSlice'
 import useSafeAddress from './useSafeAddress'
 import { GATEWAY_URL, POLLING_INTERVAL } from '@/config/constants'
 import { Errors, logError } from './exceptions'
@@ -11,7 +11,7 @@ const fetchSafeInfo = (chainId: string, address: string): Promise<SafeInfo> => {
 }
 
 // Poll & dispatch the Safe Info into the store
-const useSafeInfo = (): void => {
+export const useInitSafeInfo = (): void => {
   const { address, chainId } = useSafeAddress()
   const dispatch = useAppDispatch()
 
@@ -82,4 +82,8 @@ const useSafeInfo = (): void => {
   }, [chainId, address])
 }
 
+const useSafeInfo = () => {
+  return useAppSelector(selectSafeInfo)
+}
+
 export default useSafeInfo

services/useSafeSDK.ts

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react'
 import { getWeb3, setSafeSDK } from '@/services/web3'
-import { useAppSelector } from 'store'
-import { selectSafeInfo } from '@/store/safeInfoSlice'
 import useSafeAddress from '@/services/useSafeAddress'
+import useSafeInfo from './useSafeInfo'
 
 export const useWalletAddress = (): string | undefined => {
   const [walletAddress, setWalletAddress] = useState<string>()
@@ -16,15 +15,16 @@ export const useWalletAddress = (): string | undefined => {
   return walletAddress
 }
 
-export const useSafeSDK = () => {
-  const { safe } = useAppSelector(selectSafeInfo)
+export const useInitSafeSDK = () => {
   const { address, chainId } = useSafeAddress()
+  const { safe } = useSafeInfo()
+  const { version } = safe
   const walletAddress = useWalletAddress()
   const web3 = getWeb3()
 
   useEffect(() => {
     if (!web3 || !walletAddress) return
 
-    setSafeSDK(walletAddress, chainId, address, safe.version)
-  }, [walletAddress, chainId, address, safe.version, web3])
+    setSafeSDK(walletAddress, chainId, address, version)
+  }, [walletAddress, chainId, address, version, web3])
 }

services/useTxHistory.ts

@@ -1,19 +1,19 @@
 import { getTransactionHistory, TransactionListPage } from '@gnosis.pm/safe-react-gateway-sdk'
 import { useEffect } from 'react'
 import { useAppDispatch, useAppSelector } from 'store'
-import { selectSafeInfo } from '@/store/safeInfoSlice'
 import { GATEWAY_URL } from '@/config/constants'
 import useAsync from './useAsync'
 import { Errors, logError } from './exceptions'
 import { selectTxHistory, setHistoryPage, setPageUrl } from '@/store/txHistorySlice'
+import useSafeInfo from './useSafeInfo'
 
 const loadTxHistory = (chainId: string, address: string, pageUrl?: string) => {
   return getTransactionHistory(GATEWAY_URL, chainId, address, pageUrl)
 }
 
-const useTxHistory = (): void => {
-  const { safe } = useAppSelector(selectSafeInfo)
-  const { pageUrl } = useAppSelector(selectTxHistory)
+export const useInitTxHistory = (): void => {
+  const { safe } = useSafeInfo()
+  const { pageUrl } = useTxHistory()
   const dispatch = useAppDispatch()
   const { chainId, txHistoryTag } = safe
   const address = safe.address.value
@@ -43,4 +43,9 @@ const useTxHistory = (): void => {
   }, [error])
 }
 
+const useTxHistory = () => {
+  const txHistory = useAppSelector(selectTxHistory)
+  return txHistory
+}
+
 export default useTxHistory

services/useTxQueue.ts

@@ -1,23 +1,19 @@
-import {
-  getTransactionQueue,
-  type TransactionListItem,
-  type TransactionListPage,
-} from '@gnosis.pm/safe-react-gateway-sdk'
+import { getTransactionQueue, type TransactionListPage } from '@gnosis.pm/safe-react-gateway-sdk'
 import { useEffect } from 'react'
 import { useAppDispatch, useAppSelector } from 'store'
-import { selectSafeInfo } from '@/store/safeInfoSlice'
 import { GATEWAY_URL } from '@/config/constants'
 import useAsync from './useAsync'
 import { Errors, logError } from './exceptions'
 import { selectTxQueue, setQueuePage, setPageUrl } from '@/store/txQueueSlice'
+import useSafeInfo from './useSafeInfo'
 
 const loadTxQueue = (chainId: string, address: string, pageUrl?: string) => {
   return getTransactionQueue(GATEWAY_URL, chainId, address, pageUrl)
 }
 
-const useTxQueue = (): void => {
-  const { safe } = useAppSelector(selectSafeInfo)
-  const { pageUrl } = useAppSelector(selectTxQueue)
+export const useInitTxQueue = (): void => {
+  const { safe } = useSafeInfo()
+  const { pageUrl } = useTxQueue()
   const dispatch = useAppDispatch()
   const { chainId, txQueuedTag } = safe
   const address = safe.address.value
@@ -47,4 +43,9 @@ const useTxQueue = (): void => {
   }, [error])
 }
 
+const useTxQueue = () => {
+  const txQueue = useAppSelector(selectTxQueue)
+  return txQueue
+}
+
 export default useTxQueue

services/useWeb3.ts

@@ -5,7 +5,7 @@ import { useAppSelector } from 'store'
 import useSafeAddress from '@/services/useSafeAddress'
 import { selectChainById } from '@/store/chainsSlice'
 
-export const useWeb3 = () => {
+export const useInitWeb3 = () => {
   const { chainId } = useSafeAddress()
   const chainConfig = useAppSelector((state) => selectChainById(state, chainId))