From a89fb429d1716693a96af5ca3acf2331bc82cb65 Mon Sep 17 00:00:00 2001 From: katspaugh <381895+katspaugh@users.noreply.github.com> Date: Mon, 18 Apr 2022 10:37:40 +0200 Subject: [PATCH] Init hooks and select hooks --- components/balances/AssetsTable/index.tsx | 2 +- .../balances/AssetsTable/styles.module.css | 2 -- components/common/Sidebar/index.tsx | 7 ++-- components/tx/ReviewTx/index.tsx | 5 ++- components/tx/SendAssetsForm/index.tsx | 5 ++- pages/_app.tsx | 34 +++++++++---------- pages/safe/balances/index.tsx | 5 ++- pages/safe/transactions/history.tsx | 7 ++-- pages/safe/transactions/queue.tsx | 7 ++-- services/exceptions/index.ts | 2 +- services/useBalances.ts | 13 ++++--- services/useChains.ts | 11 ++++-- services/useSafeInfo.ts | 10 ++++-- services/useSafeSDK.ts | 12 +++---- services/useTxHistory.ts | 13 ++++--- services/useTxQueue.ts | 19 ++++++----- services/useWeb3.ts | 2 +- services/useWeb3ReadOnly.ts | 2 +- 18 files changed, 87 insertions(+), 71 deletions(-) delete mode 100644 components/balances/AssetsTable/styles.module.css diff --git a/components/balances/AssetsTable/index.tsx b/components/balances/AssetsTable/index.tsx index 7f653313ad..46ebee88e1 100644 --- a/components/balances/AssetsTable/index.tsx +++ b/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' diff --git a/components/balances/AssetsTable/styles.module.css b/components/balances/AssetsTable/styles.module.css deleted file mode 100644 index 485140808b..0000000000 --- a/components/balances/AssetsTable/styles.module.css +++ /dev/null @@ -1,2 +0,0 @@ -.container { -} diff --git a/components/common/Sidebar/index.tsx b/components/common/Sidebar/index.tsx index a6222ac043..fa71e29e73 100644 --- a/components/common/Sidebar/index.tsx +++ b/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(false) - const { error, loading } = useAppSelector(selectSafeInfo) + const { error, loading } = useSafeInfo() return (
diff --git a/components/tx/ReviewTx/index.tsx b/components/tx/ReviewTx/index.tsx index 82a8df80cd..34eb5ac99e 100644 --- a/components/tx/ReviewTx/index.tsx +++ b/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 diff --git a/components/tx/SendAssetsForm/index.tsx b/components/tx/SendAssetsForm/index.tsx index 620a8b17cf..824bc9f261 100644 --- a/components/tx/SendAssetsForm/index.tsx +++ b/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, diff --git a/pages/_app.tsx b/pages/_app.tsx index 98d79421d6..187b679a12 100644 --- a/pages/_app.tsx +++ b/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 ( - Safe + Safe 🌭 diff --git a/pages/safe/balances/index.tsx b/pages/safe/balances/index.tsx index c314ad6c3c..ffa1a353e2 100644 --- a/pages/safe/balances/index.tsx +++ b/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 (
diff --git a/pages/safe/transactions/history.tsx b/pages/safe/transactions/history.tsx index 61e73adbde..5fdf2d862e 100644 --- a/pages/safe/transactions/history.tsx +++ b/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) => { diff --git a/pages/safe/transactions/queue.tsx b/pages/safe/transactions/queue.tsx index a0451e16bd..07622f9748 100644 --- a/pages/safe/transactions/queue.tsx +++ b/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) => { diff --git a/services/exceptions/index.ts b/services/exceptions/index.ts index 8c334270ab..f0e83e6df0 100644 --- a/services/exceptions/index.ts +++ b/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 diff --git a/services/useBalances.ts b/services/useBalances.ts index 54a283f424..09290893d8 100644 --- a/services/useBalances.ts +++ b/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 diff --git a/services/useChains.ts b/services/useChains.ts index 45fff2c515..8e17ba7af7 100644 --- a/services/useChains.ts +++ b/services/useChains.ts @@ -1,8 +1,8 @@ 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' @@ -10,7 +10,7 @@ const getChains = (): Promise => { 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(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 diff --git a/services/useSafeInfo.ts b/services/useSafeInfo.ts index dbfd05419b..ce4e0f5ec1 100644 --- a/services/useSafeInfo.ts +++ b/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 => { } // 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 diff --git a/services/useSafeSDK.ts b/services/useSafeSDK.ts index c9e721b384..76a2247f28 100644 --- a/services/useSafeSDK.ts +++ b/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() @@ -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]) } diff --git a/services/useTxHistory.ts b/services/useTxHistory.ts index ae37d6211a..e182c0fa57 100644 --- a/services/useTxHistory.ts +++ b/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 diff --git a/services/useTxQueue.ts b/services/useTxQueue.ts index 81164396ff..fc7350d289 100644 --- a/services/useTxQueue.ts +++ b/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 diff --git a/services/useWeb3.ts b/services/useWeb3.ts index 395e7dd34d..f1458fbfd3 100644 --- a/services/useWeb3.ts +++ b/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)) diff --git a/services/useWeb3ReadOnly.ts b/services/useWeb3ReadOnly.ts index 67830b7811..ecd1298d6c 100644 --- a/services/useWeb3ReadOnly.ts +++ b/services/useWeb3ReadOnly.ts @@ -5,7 +5,7 @@ import { useAppSelector } from 'store' import useSafeAddress from '@/services/useSafeAddress' import { selectChainById } from '@/store/chainsSlice' -export const useWeb3ReadOnly = () => { +export const useInitWeb3ReadOnly = () => { const { chainId } = useSafeAddress() const chainConfig = useAppSelector((state) => selectChainById(state, chainId))