From 139721ee53ee0cb8d3a5442c49930c49f14ef1e4 Mon Sep 17 00:00:00 2001 From: tom goriunov Date: Thu, 2 Nov 2023 10:27:41 -0300 Subject: [PATCH] migrate to ReactQuery v5 (#1321) * change signature of hooks * isLoading -> isPending * default error type * dev tools props --- .eslintrc.js | 2 + lib/api/useApiQuery.tsx | 11 +- lib/api/useQueryClientConfig.tsx | 2 +- lib/hooks/useGetCsrfToken.tsx | 38 +++--- lib/hooks/useIsSafeAddress.tsx | 14 +- package.json | 5 +- pages/_app.tsx | 2 +- .../coinBalance/AddressCoinBalanceChart.tsx | 4 +- .../coinBalance/AddressCoinBalanceHistory.tsx | 3 +- ui/address/contract/ContractRead.tsx | 4 +- ui/address/contract/ContractWrite.tsx | 4 +- ui/address/details/AddressCounterItem.tsx | 3 +- ui/address/tokenSelect/TokenSelect.tsx | 4 +- ui/address/tokens/TokenBalances.tsx | 6 +- ui/address/utils/useFetchTokens.ts | 2 +- ui/apiKey/ApiKeyModal/ApiKeyForm.tsx | 5 +- ui/block/BlockDetails.pw.tsx | 6 +- ui/customAbi/CustomAbiModal/CustomAbiForm.tsx | 5 +- .../ChainIndicatorChartContainer.tsx | 4 +- ui/home/indicators/ChainIndicatorItem.tsx | 5 +- ui/home/indicators/ChainIndicators.tsx | 2 +- ui/marketplace/useMarketplaceApps.tsx | 17 ++- ui/pages/ContractVerification.tsx | 2 +- ui/pages/CsvExport.tsx | 2 +- ui/pages/MarketplaceApp.tsx | 16 +-- ui/pages/MyProfile.tsx | 4 +- ui/pages/SearchResults.tsx | 2 +- ui/pages/Watchlist.tsx | 2 +- ui/privateTags/AddressModal/AddressForm.tsx | 29 ++-- .../TransactionModal/TransactionForm.tsx | 35 ++--- .../PublicTagsForm/PublicTagsForm.tsx | 5 +- ui/shared/DeleteModal.tsx | 5 +- ui/shared/nft/useNftMediaType.tsx | 13 +- ui/snippets/footer/Footer.tsx | 15 +-- ui/snippets/footer/IntTxsIndexingStatus.tsx | 4 +- .../header/alerts/IndexingBlocksAlert.tsx | 8 +- ui/snippets/networkMenu/useNetworkMenu.tsx | 17 ++- .../profileMenu/ProfileMenuDesktop.tsx | 6 +- ui/snippets/profileMenu/ProfileMenuMobile.tsx | 6 +- .../SearchBarSuggest/SearchBarSuggest.tsx | 2 +- ui/sol2uml/Sol2UmlDiagram.tsx | 2 +- ui/stats/ChartWidgetContainer.tsx | 4 +- ui/token/TokenDetails.tsx | 3 +- ui/token/TokenVerifiedInfo.tsx | 7 +- ui/tokenInfo/TokenInfoForm.tsx | 2 +- ui/tx/TxLogs.tsx | 2 +- ui/tx/TxRawTrace.tsx | 2 +- ui/tx/TxState.tsx | 2 +- ui/tx/TxTokenTransfer.tsx | 2 +- ui/tx/useFetchTxInfo.tsx | 4 +- ui/txs/TxAdditionalInfoContainer.tsx | 4 +- ui/txs/useTxsSort.tsx | 7 +- .../VerifiedContractsCounters.tsx | 2 +- ui/watchlist/AddressModal/AddressForm.tsx | 3 +- ui/watchlist/WatchlistTable/WatchListItem.tsx | 19 +-- .../WatchlistTable/WatchListTableItem.tsx | 19 +-- yarn.lock | 124 +++++++++++------- 57 files changed, 285 insertions(+), 244 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 4412fd7675..ab1dc0db40 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -20,6 +20,7 @@ module.exports = { 'plugin:@typescript-eslint/recommended', 'plugin:jest/recommended', 'plugin:playwright/playwright-test', + 'plugin:@tanstack/eslint-plugin-query/recommended', ], plugins: [ 'es5', @@ -31,6 +32,7 @@ module.exports = { 'eslint-plugin-import-helpers', 'jest', 'eslint-plugin-no-cyrillic-string', + '@tanstack/query', ], parser: '@typescript-eslint/parser', parserOptions: { diff --git a/lib/api/useApiQuery.tsx b/lib/api/useApiQuery.tsx index 5b3634f2e7..0d28e70c54 100644 --- a/lib/api/useApiQuery.tsx +++ b/lib/api/useApiQuery.tsx @@ -23,12 +23,15 @@ export default function useApiQuery( ) { const apiFetch = useApiFetch(); - return useQuery, ResourceError, ResourcePayload>( - getResourceKey(resource, { pathParams, queryParams }), - async() => { + return useQuery, ResourceError, ResourcePayload>({ + // eslint-disable-next-line @tanstack/query/exhaustive-deps + queryKey: getResourceKey(resource, { pathParams, queryParams }), + queryFn: async() => { // all errors and error typing is handled by react-query // so error response will never go to the data // that's why we are safe here to do type conversion "as Promise>" return apiFetch(resource, { pathParams, queryParams, fetchParams }) as Promise>; - }, queryOptions); + }, + ...queryOptions, + }); } diff --git a/lib/api/useQueryClientConfig.tsx b/lib/api/useQueryClientConfig.tsx index c84ba3da23..6ff2fed457 100644 --- a/lib/api/useQueryClientConfig.tsx +++ b/lib/api/useQueryClientConfig.tsx @@ -18,7 +18,7 @@ export default function useQueryClientConfig() { } return failureCount < 2; }, - useErrorBoundary: (error) => { + throwOnError: (error) => { const status = getErrorObjStatusCode(error); // don't catch error for "Too many requests" response return status === 429; diff --git a/lib/hooks/useGetCsrfToken.tsx b/lib/hooks/useGetCsrfToken.tsx index 98706689ca..297f1567c2 100644 --- a/lib/hooks/useGetCsrfToken.tsx +++ b/lib/hooks/useGetCsrfToken.tsx @@ -10,27 +10,29 @@ import useFetch from 'lib/hooks/useFetch'; export default function useGetCsrfToken() { const nodeApiFetch = useFetch(); - useQuery(getResourceKey('csrf'), async() => { - if (!isNeedProxy()) { - const url = buildUrl('csrf'); - const apiResponse = await fetch(url, { credentials: 'include' }); - const csrfFromHeader = apiResponse.headers.get('x-bs-account-csrf'); + useQuery({ + queryKey: getResourceKey('csrf'), + queryFn: async() => { + if (!isNeedProxy()) { + const url = buildUrl('csrf'); + const apiResponse = await fetch(url, { credentials: 'include' }); + const csrfFromHeader = apiResponse.headers.get('x-bs-account-csrf'); - if (!csrfFromHeader) { - Sentry.captureException(new Error('Client fetch failed'), { tags: { - source: 'fetch', - 'source.resource': 'csrf', - 'status.code': 500, - 'status.text': 'Unable to obtain csrf token from header', - } }); - return; - } + if (!csrfFromHeader) { + Sentry.captureException(new Error('Client fetch failed'), { tags: { + source: 'fetch', + 'source.resource': 'csrf', + 'status.code': 500, + 'status.text': 'Unable to obtain csrf token from header', + } }); + return; + } - return { token: csrfFromHeader }; - } + return { token: csrfFromHeader }; + } - return nodeApiFetch('/node-api/csrf'); - }, { + return nodeApiFetch('/node-api/csrf'); + }, enabled: Boolean(cookies.get(cookies.NAMES.API_TOKEN)), }); } diff --git a/lib/hooks/useIsSafeAddress.tsx b/lib/hooks/useIsSafeAddress.tsx index ec727a2d19..49062f7cc2 100644 --- a/lib/hooks/useIsSafeAddress.tsx +++ b/lib/hooks/useIsSafeAddress.tsx @@ -8,20 +8,18 @@ const feature = config.features.safe; export default function useIsSafeAddress(hash: string | undefined): boolean { const fetch = useFetch(); - const { data } = useQuery( - [ 'safe_transaction_api', hash ], - async() => { + const { data } = useQuery({ + queryKey: [ 'safe_transaction_api', hash ], + queryFn: async() => { if (!feature.isEnabled || !hash) { return Promise.reject(); } return fetch(`${ feature.apiUrl }/${ hash }`, undefined, { omitSentryErrorLog: true }); }, - { - enabled: feature.isEnabled && Boolean(hash), - refetchOnMount: false, - }, - ); + enabled: feature.isEnabled && Boolean(hash), + refetchOnMount: false, + }); return Boolean(data); } diff --git a/package.json b/package.json index 56e6575785..8b416db3bd 100644 --- a/package.json +++ b/package.json @@ -40,8 +40,8 @@ "@sentry/cli": "^2.21.2", "@sentry/react": "^7.72.0", "@slise/embed-react": "^2.2.0", - "@tanstack/react-query": "^4.0.10", - "@tanstack/react-query-devtools": "^4.0.10", + "@tanstack/react-query": "^5.4.3", + "@tanstack/react-query-devtools": "^5.4.3", "@types/papaparse": "^5.3.5", "@types/react-scroll": "^1.8.4", "@web3modal/ethereum": "^2.6.2", @@ -90,6 +90,7 @@ "@playwright/experimental-ct-react": "1.35.1", "@playwright/test": "^1.35.1", "@svgr/webpack": "^6.5.1", + "@tanstack/eslint-plugin-query": "^5.0.5", "@testing-library/react": "^14.0.0", "@total-typescript/ts-reset": "^0.4.0", "@types/crypto-js": "^4.1.1", diff --git a/pages/_app.tsx b/pages/_app.tsx index 853ccf8d94..b9d77d5c53 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -59,7 +59,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) { { getLayout() } - + diff --git a/ui/address/coinBalance/AddressCoinBalanceChart.tsx b/ui/address/coinBalance/AddressCoinBalanceChart.tsx index 8d55091a1d..483de97796 100644 --- a/ui/address/coinBalance/AddressCoinBalanceChart.tsx +++ b/ui/address/coinBalance/AddressCoinBalanceChart.tsx @@ -10,7 +10,7 @@ interface Props { } const AddressCoinBalanceChart = ({ addressHash }: Props) => { - const { data, isLoading, isError } = useApiQuery('address_coin_balance_chart', { + const { data, isPending, isError } = useApiQuery('address_coin_balance_chart', { pathParams: { hash: addressHash }, }); @@ -24,7 +24,7 @@ const AddressCoinBalanceChart = ({ addressHash }: Props) => { isError={ isError } title="Balances" items={ items } - isLoading={ isLoading } + isLoading={ isPending } h="300px" units={ config.chain.currency.symbol } /> diff --git a/ui/address/coinBalance/AddressCoinBalanceHistory.tsx b/ui/address/coinBalance/AddressCoinBalanceHistory.tsx index 8b491093ed..8672520b18 100644 --- a/ui/address/coinBalance/AddressCoinBalanceHistory.tsx +++ b/ui/address/coinBalance/AddressCoinBalanceHistory.tsx @@ -6,6 +6,7 @@ import type { AddressCoinBalanceHistoryResponse } from 'types/api/address'; import type { PaginationParams } from 'ui/shared/pagination/types'; import config from 'configs/app'; +import type { ResourceError } from 'lib/api/resources'; import ActionBar from 'ui/shared/ActionBar'; import DataListDisplay from 'ui/shared/DataListDisplay'; import Pagination from 'ui/shared/pagination/Pagination'; @@ -15,7 +16,7 @@ import AddressCoinBalanceListItem from './AddressCoinBalanceListItem'; import AddressCoinBalanceTableItem from './AddressCoinBalanceTableItem'; interface Props { - query: UseQueryResult & { + query: UseQueryResult> & { pagination: PaginationParams; }; } diff --git a/ui/address/contract/ContractRead.tsx b/ui/address/contract/ContractRead.tsx index 564b5a8e42..488889c7ba 100644 --- a/ui/address/contract/ContractRead.tsx +++ b/ui/address/contract/ContractRead.tsx @@ -27,7 +27,7 @@ const ContractRead = ({ addressHash, isProxy, isCustomAbi }: Props) => { const apiFetch = useApiFetch(); const account = useWatchAccount(); - const { data, isLoading, isError } = useApiQuery(isProxy ? 'contract_methods_read_proxy' : 'contract_methods_read', { + const { data, isPending, isError } = useApiQuery(isProxy ? 'contract_methods_read_proxy' : 'contract_methods_read', { pathParams: { hash: addressHash }, queryParams: { is_custom_abi: isCustomAbi ? 'true' : 'false', @@ -83,7 +83,7 @@ const ContractRead = ({ addressHash, isProxy, isCustomAbi }: Props) => { return ; } - if (isLoading) { + if (isPending) { return ; } diff --git a/ui/address/contract/ContractWrite.tsx b/ui/address/contract/ContractWrite.tsx index 73c253ac71..bbd513545d 100644 --- a/ui/address/contract/ContractWrite.tsx +++ b/ui/address/contract/ContractWrite.tsx @@ -29,7 +29,7 @@ const ContractWrite = ({ addressHash, isProxy, isCustomAbi }: Props) => { const { chain } = useNetwork(); const { switchNetworkAsync } = useSwitchNetwork(); - const { data, isLoading, isError } = useApiQuery(isProxy ? 'contract_methods_write_proxy' : 'contract_methods_write', { + const { data, isPending, isError } = useApiQuery(isProxy ? 'contract_methods_write_proxy' : 'contract_methods_write', { pathParams: { hash: addressHash }, queryParams: { is_custom_abi: isCustomAbi ? 'true' : 'false', @@ -99,7 +99,7 @@ const ContractWrite = ({ addressHash, isProxy, isCustomAbi }: Props) => { return ; } - if (isLoading) { + if (isPending) { return ; } diff --git a/ui/address/details/AddressCounterItem.tsx b/ui/address/details/AddressCounterItem.tsx index a8e4363b8f..21156b2cd8 100644 --- a/ui/address/details/AddressCounterItem.tsx +++ b/ui/address/details/AddressCounterItem.tsx @@ -7,11 +7,12 @@ import type { AddressCounters } from 'types/api/address'; import { route } from 'nextjs-routes'; +import type { ResourceError } from 'lib/api/resources'; import LinkInternal from 'ui/shared/LinkInternal'; interface Props { prop: keyof AddressCounters; - query: UseQueryResult; + query: UseQueryResult>; address: string; onClick: () => void; isAddressQueryLoading: boolean; diff --git a/ui/address/tokenSelect/TokenSelect.tsx b/ui/address/tokenSelect/TokenSelect.tsx index 9c54d9096e..11b358e3f7 100644 --- a/ui/address/tokenSelect/TokenSelect.tsx +++ b/ui/address/tokenSelect/TokenSelect.tsx @@ -35,7 +35,7 @@ const TokenSelect = ({ onClick }: Props) => { const addressQueryData = queryClient.getQueryData
(addressResourceKey); - const { data, isError, isLoading, refetch } = useFetchTokens({ hash: addressQueryData?.hash }); + const { data, isError, isPending, refetch } = useFetchTokens({ hash: addressQueryData?.hash }); const tokensResourceKey = getResourceKey('address_tokens', { pathParams: { hash: addressQueryData?.hash }, queryParams: { type: 'ERC-20' } }); const tokensIsFetching = useIsFetching({ queryKey: tokensResourceKey }); @@ -72,7 +72,7 @@ const TokenSelect = ({ onClick }: Props) => { handler: handleTokenBalanceMessage, }); - if (isLoading) { + if (isPending) { return ( diff --git a/ui/address/tokens/TokenBalances.tsx b/ui/address/tokens/TokenBalances.tsx index 890f8dc9b3..a22a1e8dc6 100644 --- a/ui/address/tokens/TokenBalances.tsx +++ b/ui/address/tokens/TokenBalances.tsx @@ -49,12 +49,12 @@ const TokenBalances = () => { { `${ prefix }$${ tokensInfo.usd.toFormat(2) } USD ` + tokensNumText } - isLoading={ addressQuery.isLoading || tokenQuery.isLoading } + isLoading={ addressQuery.isPending || tokenQuery.isPending } /> ); diff --git a/ui/address/utils/useFetchTokens.ts b/ui/address/utils/useFetchTokens.ts index 6a3ec6a960..9bc003373a 100644 --- a/ui/address/utils/useFetchTokens.ts +++ b/ui/address/utils/useFetchTokens.ts @@ -49,7 +49,7 @@ export default function useFetchTokens({ hash }: Props) { }, [ erc1155query.data, erc20query.data, erc721query.data ]); return { - isLoading: erc20query.isLoading || erc721query.isLoading || erc1155query.isLoading, + isPending: erc20query.isPending || erc721query.isPending || erc1155query.isPending, isError: erc20query.isError || erc721query.isError || erc1155query.isError, data, refetch, diff --git a/ui/apiKey/ApiKeyModal/ApiKeyForm.tsx b/ui/apiKey/ApiKeyModal/ApiKeyForm.tsx index ba5204f6a7..b1f6bf4aa8 100644 --- a/ui/apiKey/ApiKeyModal/ApiKeyForm.tsx +++ b/ui/apiKey/ApiKeyModal/ApiKeyForm.tsx @@ -57,7 +57,8 @@ const ApiKeyForm: React.FC = ({ data, onClose, setAlertVisible }) => { }); }; - const mutation = useMutation(updateApiKey, { + const mutation = useMutation({ + mutationFn: updateApiKey, onSuccess: async(data) => { const response = data as unknown as ApiKey; @@ -148,7 +149,7 @@ const ApiKeyForm: React.FC = ({ data, onClose, setAlertVisible }) => { size="lg" type="submit" isDisabled={ !isDirty } - isLoading={ mutation.isLoading } + isLoading={ mutation.isPending } > { data ? 'Save' : 'Generate API key' } diff --git a/ui/block/BlockDetails.pw.tsx b/ui/block/BlockDetails.pw.tsx index b0e713ad04..eeddfb4241 100644 --- a/ui/block/BlockDetails.pw.tsx +++ b/ui/block/BlockDetails.pw.tsx @@ -21,7 +21,7 @@ const hooksConfig = { test('regular block +@mobile +@dark-mode', async({ mount, page }) => { const query = { data: blockMock.base, - isLoading: false, + isPending: false, } as UseQueryResult; const component = await mount( @@ -39,7 +39,7 @@ test('regular block +@mobile +@dark-mode', async({ mount, page }) => { test('genesis block', async({ mount, page }) => { const query = { data: blockMock.genesis, - isLoading: false, + isPending: false, } as UseQueryResult; const component = await mount( @@ -62,7 +62,7 @@ const customFieldsTest = test.extend({ customFieldsTest('rootstock custom fields', async({ mount, page }) => { const query = { data: blockMock.rootstock, - isLoading: false, + isPending: false, } as UseQueryResult; const component = await mount( diff --git a/ui/customAbi/CustomAbiModal/CustomAbiForm.tsx b/ui/customAbi/CustomAbiModal/CustomAbiForm.tsx index ed546cc9af..ed36d0f522 100644 --- a/ui/customAbi/CustomAbiModal/CustomAbiForm.tsx +++ b/ui/customAbi/CustomAbiModal/CustomAbiForm.tsx @@ -63,7 +63,8 @@ const CustomAbiForm: React.FC = ({ data, onClose, setAlertVisible }) => { const formBackgroundColor = useColorModeValue('white', 'gray.900'); - const mutation = useMutation(customAbiKey, { + const mutation = useMutation({ + mutationFn: customAbiKey, onSuccess: (data) => { const response = data as unknown as CustomAbi; queryClient.setQueryData([ resourceKey('custom_abi') ], (prevData: CustomAbis | undefined) => { @@ -175,7 +176,7 @@ const CustomAbiForm: React.FC = ({ data, onClose, setAlertVisible }) => { size="lg" type="submit" isDisabled={ !isDirty } - isLoading={ mutation.isLoading } + isLoading={ mutation.isPending } > { data ? 'Save' : 'Create custom ABI' } diff --git a/ui/home/indicators/ChainIndicatorChartContainer.tsx b/ui/home/indicators/ChainIndicatorChartContainer.tsx index 652ad8bd7d..95f4f34904 100644 --- a/ui/home/indicators/ChainIndicatorChartContainer.tsx +++ b/ui/home/indicators/ChainIndicatorChartContainer.tsx @@ -11,10 +11,10 @@ import ChainIndicatorChart from './ChainIndicatorChart'; type Props = UseQueryResult; -const ChainIndicatorChartContainer = ({ data, isError, isLoading }: Props) => { +const ChainIndicatorChartContainer = ({ data, isError, isPending }: Props) => { const content = (() => { - if (isLoading) { + if (isPending) { return ; } diff --git a/ui/home/indicators/ChainIndicatorItem.tsx b/ui/home/indicators/ChainIndicatorItem.tsx index df15bc445a..5a96c11fe2 100644 --- a/ui/home/indicators/ChainIndicatorItem.tsx +++ b/ui/home/indicators/ChainIndicatorItem.tsx @@ -5,6 +5,7 @@ import React from 'react'; import type { HomeStats } from 'types/api/stats'; import type { ChainIndicatorId } from 'types/homepage'; +import type { ResourceError } from 'lib/api/resources'; import useIsMobile from 'lib/hooks/useIsMobile'; interface Props { @@ -14,7 +15,7 @@ interface Props { icon: React.ReactNode; isSelected: boolean; onClick: (id: ChainIndicatorId) => void; - stats: UseQueryResult; + stats: UseQueryResult>; } const ChainIndicatorItem = ({ id, title, value, icon, isSelected, onClick, stats }: Props) => { @@ -33,7 +34,7 @@ const ChainIndicatorItem = ({ id, title, value, icon, isSelected, onClick, stats return null; } - if (stats.isLoading) { + if (stats.isPending) { return ( { } const valueTitle = (() => { - if (statsQueryResult.isLoading) { + if (statsQueryResult.isPending) { return ; } diff --git a/ui/marketplace/useMarketplaceApps.tsx b/ui/marketplace/useMarketplaceApps.tsx index f36bd3b322..0e07ca2893 100644 --- a/ui/marketplace/useMarketplaceApps.tsx +++ b/ui/marketplace/useMarketplaceApps.tsx @@ -24,15 +24,14 @@ function isAppCategoryMatches(category: string, app: MarketplaceAppOverview, fav export default function useMarketplaceApps(filter: string, selectedCategoryId: string = MarketplaceCategory.ALL, favoriteApps: Array = []) { const apiFetch = useApiFetch(); - const { isPlaceholderData, isError, error, data } = useQuery, Array>( - [ 'marketplace-apps' ], - async() => apiFetch(configUrl, undefined, { resource: 'marketplace-apps' }), - { - select: (data) => (data as Array).sort((a, b) => a.title.localeCompare(b.title)), - placeholderData: feature.isEnabled ? Array(9).fill(MARKETPLACE_APP) : undefined, - staleTime: Infinity, - enabled: feature.isEnabled, - }); + const { isPlaceholderData, isError, error, data } = useQuery, Array>({ + queryKey: [ 'marketplace-apps' ], + queryFn: async() => apiFetch(configUrl, undefined, { resource: 'marketplace-apps' }), + select: (data) => (data as Array).sort((a, b) => a.title.localeCompare(b.title)), + placeholderData: feature.isEnabled ? Array(9).fill(MARKETPLACE_APP) : undefined, + staleTime: Infinity, + enabled: feature.isEnabled, + }); const displayedApps = React.useMemo(() => { return data?.filter(app => isAppNameMatches(filter, app) && isAppCategoryMatches(selectedCategoryId, app, favoriteApps)) || []; diff --git a/ui/pages/ContractVerification.tsx b/ui/pages/ContractVerification.tsx index a61083965c..a2bdfc3d47 100644 --- a/ui/pages/ContractVerification.tsx +++ b/ui/pages/ContractVerification.tsx @@ -64,7 +64,7 @@ const ContractVerification = () => { return ; } - if (configQuery.isLoading || contractQuery.isLoading || isVerifiedContract) { + if (configQuery.isPending || contractQuery.isPending || isVerifiedContract) { return ; } diff --git a/ui/pages/CsvExport.tsx b/ui/pages/CsvExport.tsx index 987ffa00bf..b8a0315d62 100644 --- a/ui/pages/CsvExport.tsx +++ b/ui/pages/CsvExport.tsx @@ -108,7 +108,7 @@ const CsvExport = () => { return ; } - if (addressQuery.isLoading) { + if (addressQuery.isPending) { return ; } diff --git a/ui/pages/MarketplaceApp.tsx b/ui/pages/MarketplaceApp.tsx index 7c6646beeb..c206c5c9f7 100644 --- a/ui/pages/MarketplaceApp.tsx +++ b/ui/pages/MarketplaceApp.tsx @@ -34,9 +34,9 @@ const MarketplaceApp = () => { const router = useRouter(); const id = getQueryParamString(router.query.id); - const { isLoading, isError, error, data } = useQuery, MarketplaceAppOverview>( - [ 'marketplace-apps', id ], - async() => { + const { isPending, isError, error, data } = useQuery, MarketplaceAppOverview>({ + queryKey: [ 'marketplace-apps', id ], + queryFn: async() => { const result = await apiFetch, unknown>(configUrl, undefined, { resource: 'marketplace-apps' }); if (!Array.isArray(result)) { throw result; @@ -49,12 +49,10 @@ const MarketplaceApp = () => { return item; }, - { - enabled: feature.isEnabled, - }, - ); + enabled: feature.isEnabled, + }); - const [ isFrameLoading, setIsFrameLoading ] = useState(isLoading); + const [ isFrameLoading, setIsFrameLoading ] = useState(isPending); const { colorMode } = useColorMode(); const handleIframeLoad = useCallback(() => { @@ -106,7 +104,7 @@ const MarketplaceApp = () => { return ( <> - { !isLoading && } + { !isPending && }
{ - const { data, isLoading, isError } = useFetchProfileInfo(); + const { data, isPending, isError } = useFetchProfileInfo(); useRedirectForInvalidAuthToken(); const content = (() => { - if (isLoading) { + if (isPending) { return ; } diff --git a/ui/pages/SearchResults.tsx b/ui/pages/SearchResults.tsx index 3df5128209..7948065e34 100644 --- a/ui/pages/SearchResults.tsx +++ b/ui/pages/SearchResults.tsx @@ -54,7 +54,7 @@ const SearchResultsPageContent = () => { } } - !redirectCheckQuery.isLoading && setShowContent(true); + !redirectCheckQuery.isPending && setShowContent(true); }, [ redirectCheckQuery, router, debouncedSearchTerm, showContent ]); const handleSubmit = React.useCallback((event: FormEvent) => { diff --git a/ui/pages/Watchlist.tsx b/ui/pages/Watchlist.tsx index 52a2f0f269..e59f767645 100644 --- a/ui/pages/Watchlist.tsx +++ b/ui/pages/Watchlist.tsx @@ -42,7 +42,7 @@ const WatchList: React.FC = () => { }, [ addressModalProps ]); const onAddOrEditSuccess = useCallback(async() => { - await queryClient.refetchQueries([ resourceKey('watchlist') ]); + await queryClient.refetchQueries({ queryKey: [ resourceKey('watchlist') ] }); setAddressModalData(undefined); addressModalProps.onClose(); }, [ addressModalProps, queryClient ]); diff --git a/ui/privateTags/AddressModal/AddressForm.tsx b/ui/privateTags/AddressModal/AddressForm.tsx index f9c25aa467..42884ce01b 100644 --- a/ui/privateTags/AddressModal/AddressForm.tsx +++ b/ui/privateTags/AddressModal/AddressForm.tsx @@ -44,22 +44,23 @@ const AddressForm: React.FC = ({ data, onClose, onSuccess, setAlertVisibl const formBackgroundColor = useColorModeValue('white', 'gray.900'); - const { mutate } = useMutation((formData: Inputs) => { - const body = { - name: formData?.tag, - address_hash: formData?.address, - }; + const { mutate } = useMutation({ + mutationFn: (formData: Inputs) => { + const body = { + name: formData?.tag, + address_hash: formData?.address, + }; - const isEdit = data?.id; - if (isEdit) { - return apiFetch('private_tags_address', { - pathParams: { id: data.id }, - fetchParams: { method: 'PUT', body }, - }); - } + const isEdit = data?.id; + if (isEdit) { + return apiFetch('private_tags_address', { + pathParams: { id: data.id }, + fetchParams: { method: 'PUT', body }, + }); + } - return apiFetch('private_tags_address', { fetchParams: { method: 'POST', body } }); - }, { + return apiFetch('private_tags_address', { fetchParams: { method: 'POST', body } }); + }, onError: (error: ResourceErrorAccount) => { setPending(false); const errorMap = error.payload?.errors; diff --git a/ui/privateTags/TransactionModal/TransactionForm.tsx b/ui/privateTags/TransactionModal/TransactionForm.tsx index 35097aeee3..dc3d11ac41 100644 --- a/ui/privateTags/TransactionModal/TransactionForm.tsx +++ b/ui/privateTags/TransactionModal/TransactionForm.tsx @@ -47,22 +47,23 @@ const TransactionForm: React.FC = ({ data, onClose, onSuccess, setAlertVi const queryClient = useQueryClient(); const apiFetch = useApiFetch(); - const { mutate } = useMutation((formData: Inputs) => { - const body = { - name: formData?.tag, - transaction_hash: formData?.transaction, - }; - const isEdit = data?.id; - - if (isEdit) { - return apiFetch('private_tags_tx', { - pathParams: { id: data.id }, - fetchParams: { method: 'PUT', body }, - }); - } - - return apiFetch('private_tags_tx', { fetchParams: { method: 'POST', body } }); - }, { + const { mutate } = useMutation({ + mutationFn: (formData: Inputs) => { + const body = { + name: formData?.tag, + transaction_hash: formData?.transaction, + }; + const isEdit = data?.id; + + if (isEdit) { + return apiFetch('private_tags_tx', { + pathParams: { id: data.id }, + fetchParams: { method: 'PUT', body }, + }); + } + + return apiFetch('private_tags_tx', { fetchParams: { method: 'POST', body } }); + }, onError: (error: ResourceErrorAccount) => { setPending(false); const errorMap = error.payload?.errors; @@ -76,7 +77,7 @@ const TransactionForm: React.FC = ({ data, onClose, onSuccess, setAlertVi } }, onSuccess: async() => { - await queryClient.refetchQueries([ resourceKey('private_tags_tx') ]); + await queryClient.refetchQueries({ queryKey: [ resourceKey('private_tags_tx') ] }); await onSuccess(); onClose(); setPending(false); diff --git a/ui/publicTags/PublicTagsForm/PublicTagsForm.tsx b/ui/publicTags/PublicTagsForm/PublicTagsForm.tsx index da25e86eae..07fb7ec2ae 100644 --- a/ui/publicTags/PublicTagsForm/PublicTagsForm.tsx +++ b/ui/publicTags/PublicTagsForm/PublicTagsForm.tsx @@ -109,7 +109,8 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => { }); }; - const mutation = useMutation(updatePublicTag, { + const mutation = useMutation({ + mutationFn: updatePublicTag, onSuccess: async(data) => { const response = data as unknown as PublicTag; @@ -237,7 +238,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => { size="lg" type="submit" isDisabled={ !isDirty } - isLoading={ mutation.isLoading } + isLoading={ mutation.isPending } > Send request diff --git a/ui/shared/DeleteModal.tsx b/ui/shared/DeleteModal.tsx index a6421c840c..67f055e2d4 100644 --- a/ui/shared/DeleteModal.tsx +++ b/ui/shared/DeleteModal.tsx @@ -39,7 +39,8 @@ const DeleteModal: React.FC = ({ onClose(); }, [ onClose, setAlertVisible ]); - const mutation = useMutation(mutationFn, { + const mutation = useMutation({ + mutationFn, onSuccess: async() => { onSuccess(); onClose(); @@ -70,7 +71,7 @@ const DeleteModal: React.FC = ({