diff --git a/src/apps/popup/index.tsx b/src/apps/popup/index.tsx index 3ca701e9..2d0c31db 100644 --- a/src/apps/popup/index.tsx +++ b/src/apps/popup/index.tsx @@ -24,23 +24,23 @@ import { GlobalStyle, darkTheme, lightTheme } from '@libs/ui'; import { AppRouter } from './app-router'; +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + staleTime: 3 * 60 * 1000, + refetchInterval: 3 * 60 * 1000, + gcTime: 3 * 60 * 1000, + retry: false + }, + mutations: { + retry: false + } + } +}); + const Tree = () => { const [state, setState] = useState(null); - const queryClient = new QueryClient({ - defaultOptions: { - queries: { - staleTime: 3 * 60 * 1000, - refetchInterval: 3 * 60 * 1000, - gcTime: 3 * 60 * 1000, - retry: false - }, - mutations: { - retry: false - } - } - }); - setCSPForSafari(); const isSystemDarkTheme = useSystemThemeDetector(); diff --git a/src/apps/popup/pages/deploy-details/components/action-rows/cep18-action-rows.tsx b/src/apps/popup/pages/deploy-details/components/action-rows/cep18-action-rows.tsx index 08e73f1a..30942188 100644 --- a/src/apps/popup/pages/deploy-details/components/action-rows/cep18-action-rows.tsx +++ b/src/apps/popup/pages/deploy-details/components/action-rows/cep18-action-rows.tsx @@ -101,6 +101,7 @@ export const Cep18ActionRows = ({ deploy }: Cep18ActionRowsProps) => { title={title} contractPackageHash={contractPackageHash} contractName={contractName} + iconUrl={iconUrl || DeployIcon.Cep18Default} additionalInfo="CEP-18 Token" /> ); diff --git a/src/apps/popup/pages/deploy-details/components/action-rows/nft-actions-rows.tsx b/src/apps/popup/pages/deploy-details/components/action-rows/nft-actions-rows.tsx index d4628de2..2137fd9c 100644 --- a/src/apps/popup/pages/deploy-details/components/action-rows/nft-actions-rows.tsx +++ b/src/apps/popup/pages/deploy-details/components/action-rows/nft-actions-rows.tsx @@ -145,7 +145,7 @@ export const NftActionsRows = ({ deploy }: NftActionsRowsProps) => { contractPackageHash={contractPackageHash} contractName={contractName} additionalInfo="CEP-47 NFT" - iconUrl={DeployIcon.NFTDefault} + iconUrl={iconUrl || DeployIcon.NFTDefault} /> ); }; diff --git a/src/apps/popup/pages/deploy-details/components/common.tsx b/src/apps/popup/pages/deploy-details/components/common.tsx index a57084cf..2bd46b08 100644 --- a/src/apps/popup/pages/deploy-details/components/common.tsx +++ b/src/apps/popup/pages/deploy-details/components/common.tsx @@ -57,9 +57,11 @@ export const ContainerWithAmount = ({ fiatAmount }: ActionContainerWithAmountProps) => ( - + {title} - {amount} + + {amount} + CSPR @@ -206,13 +208,15 @@ export const AmountRow = ({ const { t } = useTranslation(); return ( - + {label && ( {label} )} - {amount} + + {amount} + {symbol} diff --git a/src/apps/popup/pages/deploy-details/content.tsx b/src/apps/popup/pages/deploy-details/content.tsx index 95fc99f2..8406a52e 100644 --- a/src/apps/popup/pages/deploy-details/content.tsx +++ b/src/apps/popup/pages/deploy-details/content.tsx @@ -1,15 +1,12 @@ import { IDeploy } from 'casper-wallet-core'; import React, { useEffect, useState } from 'react'; import { Trans, useTranslation } from 'react-i18next'; -import { useSelector } from 'react-redux'; import styled from 'styled-components'; import { DeployDetailsAction } from '@popup/pages/deploy-details/components/deploy-details-action'; import { DeployDetailsResult } from '@popup/pages/deploy-details/components/deploy-details-result'; import { getEntryPointName } from '@popup/pages/deploy-details/utils'; -import { selectVaultActiveAccount } from '@background/redux/vault/selectors'; - import { AlignedSpaceBetweenFlexRow, BorderBottomPseudoElementProps, @@ -22,7 +19,7 @@ import { SpacingSize, borderBottomPseudoElementRules } from '@libs/layout'; -import { dispatchFetchExtendedDeploysInfo } from '@libs/services/account-activity-service'; +import { useFetchDeploy } from '@libs/services/deploys/use-fetch-deploy'; import { DeployStatus, Hash, @@ -69,22 +66,17 @@ export const DeployDetailsPageContent = ({ const { t } = useTranslation(); - const activeAccount = useSelector(selectVaultActiveAccount); - useEffect(() => { setSingleDeploy(deploy); }, [deploy]); + const { deployData } = useFetchDeploy(deploy?.deployHash); + useEffect(() => { - if (deploy?.deployHash && activeAccount?.publicKey) { - dispatchFetchExtendedDeploysInfo( - deploy.deployHash, - activeAccount?.publicKey - ).then(({ payload: resp }) => { - setSingleDeploy(resp); - }); + if (deployData) { + setSingleDeploy(deployData); } - }, [activeAccount?.publicKey, deploy?.deployHash]); + }, [deployData]); if (!singleDeploy) { return null; diff --git a/src/background/index.ts b/src/background/index.ts index 1794a25d..ad0b21e3 100644 --- a/src/background/index.ts +++ b/src/background/index.ts @@ -34,12 +34,7 @@ import { } from '@background/redux/account-balances/actions'; import { accountBalanceChanged, - accountCasperActivityCountChanged, - accountCep18TransferDeploysDataChanged, - accountCsprTransferDeploysDataChanged, accountCurrencyRateChanged, - accountDeploysCountChanged, - accountDeploysDataChanged, accountErc20Changed, accountInfoReset, accountNftTokensAdded, @@ -619,18 +614,13 @@ runtime.onMessage.addListener( case getType(recipientPublicKeyReseted): case getType(accountBalanceChanged): case getType(accountCurrencyRateChanged): - case getType(accountCsprTransferDeploysDataChanged): case getType(accountInfoReset): case getType(accountPendingDeployHashesChanged): case getType(accountPendingDeployHashesRemove): case getType(accountErc20Changed): - case getType(accountCep18TransferDeploysDataChanged): - case getType(accountDeploysDataChanged): case getType(accountNftTokensAdded): case getType(accountNftTokensUpdated): case getType(accountNftTokensCountChanged): - case getType(accountDeploysCountChanged): - case getType(accountCasperActivityCountChanged): case getType(accountTrackingIdOfSentNftTokensChanged): case getType(accountTrackingIdOfSentNftTokensRemoved): case getType(newContactAdded): diff --git a/src/background/redux/account-info/actions.ts b/src/background/redux/account-info/actions.ts index 476ef411..8e7e3f6c 100644 --- a/src/background/redux/account-info/actions.ts +++ b/src/background/redux/account-info/actions.ts @@ -1,11 +1,5 @@ import { createAction } from 'typesafe-actions'; -import { - AccountDeploysDataType, - Cep18TransferDeploysDataType, - CsprTransferDeploysDataType -} from '@background/redux/account-info/types'; - import { AccountBalance } from '@libs/services/balance-service/types'; import { ContractPackageWithBalance } from '@libs/services/erc20-service/types'; import { NFTTokenResult } from '@libs/services/nft-service/types'; @@ -22,17 +16,6 @@ export const accountCurrencyRateChanged = createAction( 'ACCOUNT_CURRENCY_RATE_CHANGED' )(); -export const accountCsprTransferDeploysDataChanged = createAction( - 'ACCOUNT_CSPR_TRANSFER_DEPLOYS_DATA_CHANGED' -)(); - -export const accountCep18TransferDeploysDataChanged = createAction( - 'ACCOUNT_CEP18_TRANSFER_DEPLOYS_DATA_CHANGED' -)<{ - cep18TransferDeploysData: Cep18TransferDeploysDataType; - contractPackageHash: string; -}>(); - export const accountInfoReset = createAction('ACCOUNT_INFO_RESET')(); export const accountPendingDeployHashesChanged = createAction( @@ -43,10 +26,6 @@ export const accountPendingDeployHashesRemove = createAction( 'ACCOUNT_PENDING_TRANSACTIONS_REMOVE' )(); -export const accountDeploysDataChanged = createAction( - 'ACCOUNT_DEPLOYS_DATA_CHANGED' -)(); - export const accountNftTokensAdded = createAction('ACCOUNT_NFT_TOKENS_ADDED')< NFTTokenResult[] | null >(); @@ -59,14 +38,6 @@ export const accountNftTokensCountChanged = createAction( 'ACCOUNT_NFT_TOKENS_COUNT_CHANGED' )(); -export const accountDeploysCountChanged = createAction( - 'ACCOUNT_DEPLOYS_COUNT_CHANGED' -)(); - -export const accountCasperActivityCountChanged = createAction( - 'ACCOUNT_CASPER_ACTIVITY_COUNT_CHANGED' -)(); - export const accountTrackingIdOfSentNftTokensChanged = createAction( 'ACCOUNT_TRACKING_ID_OF_SENT_NFT_TOKENS_CHANGED' )<{ diff --git a/src/background/redux/account-info/reducer.ts b/src/background/redux/account-info/reducer.ts index a652a338..9eb129de 100644 --- a/src/background/redux/account-info/reducer.ts +++ b/src/background/redux/account-info/reducer.ts @@ -4,12 +4,7 @@ import { isEqualCaseInsensitive } from '@src/utils'; import { accountBalanceChanged, - accountCasperActivityCountChanged, - accountCep18TransferDeploysDataChanged, - accountCsprTransferDeploysDataChanged, accountCurrencyRateChanged, - accountDeploysCountChanged, - accountDeploysDataChanged, accountErc20Changed, accountInfoReset, accountNftTokensAdded, @@ -31,15 +26,10 @@ const initialState: AccountInfoState = { totalBalanceFiat: null }, currencyRate: null, - csprTransferDeploysData: null, - cep18TransferDeploysData: null, pendingDeployHashes: [], erc20Tokens: [], - accountDeploysData: null, accountNftTokens: [], nftTokensCount: 0, - accountDeploysCount: 0, - accountCasperActivityCount: 0, accountTrackingIdOfSentNftTokens: {} }; @@ -63,108 +53,6 @@ export const reducer = createReducer(initialState) erc20Tokens: payload }) ) - .handleAction( - accountCsprTransferDeploysDataChanged, - (state, { payload }): AccountInfoState => { - const csprTransferDeploysData = state.csprTransferDeploysData; - - if ( - payload && - csprTransferDeploysData && - payload.pages[0].itemCount > csprTransferDeploysData.pages[0].itemCount - ) { - return { - ...state, - csprTransferDeploysData: payload - }; - } - - if ( - payload && - csprTransferDeploysData?.pageParams && - payload.pageParams.length < csprTransferDeploysData.pageParams.length - ) { - const updatedDeploysData = { ...csprTransferDeploysData }; - - payload.pageParams.forEach((pageParam, index) => { - const element = csprTransferDeploysData?.pageParams.find( - el => el === pageParam - ); - if (!element) { - updatedDeploysData.pageParams.push(pageParam); - updatedDeploysData.pages.push(payload.pages[index]); - } - }); - - return { - ...state, - csprTransferDeploysData: updatedDeploysData - }; - } - - return { - ...state, - csprTransferDeploysData: payload - }; - } - ) - .handleAction( - accountCep18TransferDeploysDataChanged, - ( - state, - { - payload: { cep18TransferDeploysData: payloadData, contractPackageHash } - } - ) => { - const cep18TransferDeploysData = state.cep18TransferDeploysData || {}; - const deploy = cep18TransferDeploysData[contractPackageHash]; - - if ( - payloadData && - deploy && - payloadData.pages[0].itemCount > deploy.pages[0].itemCount - ) { - return { - ...state, - cep18TransferDeploysData: { - ...state.cep18TransferDeploysData, - [contractPackageHash]: payloadData - } - }; - } - - if ( - payloadData && - deploy && - payloadData.pageParams.length < deploy.pageParams.length - ) { - const updatedDeploy = { ...deploy }; - payloadData.pageParams.forEach((pageParam, index) => { - const element = deploy?.pageParams.find(el => el === pageParam); - - if (!element) { - updatedDeploy.pageParams.push(pageParam); - updatedDeploy.pages.push(payloadData.pages[index]); - } - }); - - return { - ...state, - cep18TransferDeploysData: { - [contractPackageHash]: updatedDeploy - } - }; - } - - return { - ...state, - cep18TransferDeploysData: { - ...state.cep18TransferDeploysData, - [contractPackageHash]: payloadData - } - }; - } - ) .handleAction(accountPendingDeployHashesChanged, (state, { payload }) => { return { ...state, @@ -177,49 +65,6 @@ export const reducer = createReducer(initialState) deploy => !isEqualCaseInsensitive(deploy, payload) ) })) - .handleAction(accountDeploysDataChanged, (state, { payload }) => { - const stateDeploysData = state.accountDeploysData; - - if ( - payload && - stateDeploysData && - payload.pages[0].item_count > stateDeploysData.pages[0].item_count - ) { - return { - ...state, - accountDeploysData: payload - }; - } - - if ( - payload && - stateDeploysData?.pageParams && - payload.pageParams.length < stateDeploysData.pageParams.length - ) { - const updatedDeploysData = { ...stateDeploysData }; - - payload.pageParams.forEach((pageParam, index) => { - const element = stateDeploysData?.pageParams.find( - el => el === pageParam - ); - - if (!element) { - updatedDeploysData.pageParams.push(pageParam); - updatedDeploysData.pages.push(payload.pages[index]); - } - }); - - return { - ...state, - accountDeploysData: updatedDeploysData - }; - } - - return { - ...state, - accountDeploysData: payload - }; - }) .handleAction(accountNftTokensAdded, (state, { payload }) => ({ ...state, accountNftTokens: payload @@ -235,14 +80,6 @@ export const reducer = createReducer(initialState) ...state, nftTokensCount: payload })) - .handleAction(accountDeploysCountChanged, (state, { payload }) => ({ - ...state, - accountDeploysCount: payload - })) - .handleAction(accountCasperActivityCountChanged, (state, { payload }) => ({ - ...state, - accountCasperActivityCount: payload - })) .handleAction( accountTrackingIdOfSentNftTokensChanged, (state, { payload: { trackingId, deployHash } }) => ({ diff --git a/src/background/redux/account-info/selectors.ts b/src/background/redux/account-info/selectors.ts index 1831e47b..6008be84 100644 --- a/src/background/redux/account-info/selectors.ts +++ b/src/background/redux/account-info/selectors.ts @@ -6,32 +6,17 @@ export const selectAccountBalance = (state: RootState) => export const selectAccountCurrencyRate = (state: RootState) => state.accountInfo.currencyRate; -export const selectAccountCsprTransferDeploysData = (state: RootState) => - state.accountInfo.csprTransferDeploysData; - -export const selectAccountCep18TransferDeploysData = (state: RootState) => - state.accountInfo.cep18TransferDeploysData; - export const selectPendingDeployHashes = (state: RootState) => state.accountInfo.pendingDeployHashes; export const selectErc20Tokens = (state: RootState) => state.accountInfo.erc20Tokens; -export const selectAccountDeploysData = (state: RootState) => - state.accountInfo.accountDeploysData; - export const selectAccountNftTokens = (state: RootState) => state.accountInfo.accountNftTokens; export const selectAccountNftTokensCount = (state: RootState) => state.accountInfo.nftTokensCount; -export const selectAccountDeploysCount = (state: RootState) => - state.accountInfo.accountDeploysCount; - -export const selectAccountCasperActivityCount = (state: RootState) => - state.accountInfo.accountCasperActivityCount; - export const selectAccountTrackingIdOfSentNftTokens = (state: RootState) => state.accountInfo.accountTrackingIdOfSentNftTokens; diff --git a/src/background/redux/account-info/types.ts b/src/background/redux/account-info/types.ts index 4f75f445..6d0d3ab1 100644 --- a/src/background/redux/account-info/types.ts +++ b/src/background/redux/account-info/types.ts @@ -1,36 +1,13 @@ -import { InfiniteData } from '@tanstack/react-query'; -import { IDeploy } from 'casper-wallet-core'; -import { CsprTransferDeployDto } from 'casper-wallet-core/src/data/dto'; -import { CloudPaginatedResponse } from 'casper-wallet-core/src/domain/common/http/data-provider'; - import { AccountBalance } from '@libs/services/balance-service'; import { ContractPackageWithBalance } from '@libs/services/erc20-service'; import { NFTTokenResult } from '@libs/services/nft-service'; -import { PaginatedResponse } from '@libs/services/types'; export interface AccountInfoState { balance: AccountBalance; erc20Tokens: ContractPackageWithBalance[]; currencyRate: number | null; - csprTransferDeploysData: CsprTransferDeploysDataType | null; - cep18TransferDeploysData: Record | null; pendingDeployHashes: string[]; - accountDeploysData: AccountDeploysDataType | null; accountNftTokens: NFTTokenResult[] | null; nftTokensCount: number; - accountDeploysCount: number; - accountCasperActivityCount: number; accountTrackingIdOfSentNftTokens: Record; } - -export type CsprTransferDeploysDataType = - | InfiniteData, unknown> - | undefined; - -export type Cep18TransferDeploysDataType = - | InfiniteData, unknown> - | undefined; - -export type AccountDeploysDataType = - | InfiniteData, unknown> - | undefined; diff --git a/src/fixtures/initial-state-for-popup-tests.ts b/src/fixtures/initial-state-for-popup-tests.ts index 1b8b6cd1..6daab530 100644 --- a/src/fixtures/initial-state-for-popup-tests.ts +++ b/src/fixtures/initial-state-for-popup-tests.ts @@ -99,18 +99,10 @@ export const initialStateForPopupTests: RootState = { totalBalanceFiat: null }, currencyRate: null, - csprTransferDeploysData: { - pages: [], - pageParams: [] - }, - cep18TransferDeploysData: null, pendingDeployHashes: [], erc20Tokens: [], - accountDeploysData: null, accountNftTokens: [], nftTokensCount: 0, - accountDeploysCount: 0, - accountCasperActivityCount: 0, accountTrackingIdOfSentNftTokens: {} }, contacts: { diff --git a/src/libs/services/deploys/use-fetch-cep18-transfer-deploys.ts b/src/libs/services/deploys/use-fetch-cep18-transfer-deploys.ts index 445f0e41..060f5202 100644 --- a/src/libs/services/deploys/use-fetch-cep18-transfer-deploys.ts +++ b/src/libs/services/deploys/use-fetch-cep18-transfer-deploys.ts @@ -1,24 +1,13 @@ import { useInfiniteQuery } from '@tanstack/react-query'; import { CasperNetwork } from 'casper-wallet-core/src/domain/common/common'; -import { useEffect, useMemo } from 'react'; +import { useMemo } from 'react'; import { useSelector } from 'react-redux'; -import { accountCep18TransferDeploysDataChanged } from '@background/redux/account-info/actions'; -import { selectAccountCep18TransferDeploysData } from '@background/redux/account-info/selectors'; import { selectActiveNetworkSetting } from '@background/redux/settings/selectors'; -import { dispatchToMainStore } from '@background/redux/utils'; import { selectVaultActiveAccount } from '@background/redux/vault/selectors'; import { deploysRepository } from '@background/wallet-repositories'; export const useFetchCep18TransferDeploys = (contractPackageHash: string) => { - const cep18DeploysDataRecord = useSelector( - selectAccountCep18TransferDeploysData - ); - - const cep18DeploysData = cep18DeploysDataRecord - ? cep18DeploysDataRecord[contractPackageHash || ''] - : null; - const activeAccount = useSelector(selectVaultActiveAccount); const network = useSelector(selectActiveNetworkSetting); @@ -42,9 +31,8 @@ export const useFetchCep18TransferDeploys = (contractPackageHash: string) => { contractPackageHash, page: pageParam }), - getNextPageParam: (lastPage, _, lastPageParam) => { - const nextPage = - (cep18DeploysData?.pageParams.length || lastPageParam) + 1; + getNextPageParam: (lastPage, pages) => { + const nextPage = pages.length + 1; return nextPage <= lastPage.pageCount ? nextPage : undefined; }, @@ -53,28 +41,13 @@ export const useFetchCep18TransferDeploys = (contractPackageHash: string) => { const cep18TransferDeploys = useMemo( () => - cep18DeploysData?.pages + cep18TransferDeploysData?.pages ?.flat() ?.map(t => t.data) ?.flat() ?? [], - [cep18DeploysData?.pages] + [cep18TransferDeploysData?.pages] ); - useEffect(() => { - if (isCep18TransferDeploysLoading) return; - - dispatchToMainStore( - accountCep18TransferDeploysDataChanged({ - cep18TransferDeploysData, - contractPackageHash - }) - ); - }, [ - cep18TransferDeploysData, - contractPackageHash, - isCep18TransferDeploysLoading - ]); - return { cep18TransferDeploys, isCep18TransferDeploysLoading, diff --git a/src/libs/services/deploys/use-fetch-cspr-transfer-deploys.ts b/src/libs/services/deploys/use-fetch-cspr-transfer-deploys.ts index 363c8f00..48eeebc8 100644 --- a/src/libs/services/deploys/use-fetch-cspr-transfer-deploys.ts +++ b/src/libs/services/deploys/use-fetch-cspr-transfer-deploys.ts @@ -1,18 +1,13 @@ import { useInfiniteQuery } from '@tanstack/react-query'; import { CasperNetwork } from 'casper-wallet-core/src/domain/common/common'; -import { useEffect, useMemo } from 'react'; +import { useMemo } from 'react'; import { useSelector } from 'react-redux'; -import { accountCsprTransferDeploysDataChanged } from '@background/redux/account-info/actions'; -import { selectAccountCsprTransferDeploysData } from '@background/redux/account-info/selectors'; import { selectActiveNetworkSetting } from '@background/redux/settings/selectors'; -import { dispatchToMainStore } from '@background/redux/utils'; import { selectVaultActiveAccount } from '@background/redux/vault/selectors'; import { deploysRepository } from '@background/wallet-repositories'; export const useFetchCsprTransferDeploys = () => { - const csprDeploysData = useSelector(selectAccountCsprTransferDeploysData); - const activeAccount = useSelector(selectVaultActiveAccount); const network = useSelector(selectActiveNetworkSetting); @@ -31,9 +26,8 @@ export const useFetchCsprTransferDeploys = () => { activePublicKey: activeAccount?.publicKey ?? '', network: network.toLowerCase() as CasperNetwork }), - getNextPageParam: (lastPage, _, lastPageParam) => { - const nextPage = - (csprDeploysData?.pageParams.length || lastPageParam) + 1; + getNextPageParam: (lastPage, pages) => { + const nextPage = pages.length + 1; return nextPage <= lastPage.pageCount ? nextPage : undefined; }, @@ -42,20 +36,13 @@ export const useFetchCsprTransferDeploys = () => { const csprTransferDeploys = useMemo( () => - csprDeploysData?.pages + csprTransferDeploysData?.pages ?.flat() ?.map(t => t.data) ?.flat() ?? [], - [csprDeploysData?.pages] + [csprTransferDeploysData?.pages] ); - useEffect(() => { - if (isCsprTransferDeploysLoading) return; - dispatchToMainStore( - accountCsprTransferDeploysDataChanged(csprTransferDeploysData) - ); - }, [csprTransferDeploysData, isCsprTransferDeploysLoading]); - return { csprTransferDeploys, isCsprTransferDeploysLoading, diff --git a/src/libs/services/deploys/use-fetch-deploy.ts b/src/libs/services/deploys/use-fetch-deploy.ts new file mode 100644 index 00000000..67c37943 --- /dev/null +++ b/src/libs/services/deploys/use-fetch-deploy.ts @@ -0,0 +1,27 @@ +import { useQuery } from '@tanstack/react-query'; +import { CasperNetwork } from 'casper-wallet-core/src/domain/common/common'; +import { useSelector } from 'react-redux'; + +import { selectActiveNetworkSetting } from '@background/redux/settings/selectors'; +import { selectVaultActiveAccount } from '@background/redux/vault/selectors'; +import { deploysRepository } from '@background/wallet-repositories'; + +export const useFetchDeploy = (deployHash?: string) => { + const activeAccount = useSelector(selectVaultActiveAccount); + const network = useSelector(selectActiveNetworkSetting); + + const { data: deployData, isLoading: isDeployLoading } = useQuery({ + queryKey: ['DEPLOY', network, activeAccount?.publicKey, deployHash], + queryFn: () => + deploysRepository.getSingleDeploy({ + deployHash: deployHash ?? '', + activePublicKey: activeAccount?.publicKey ?? '', + network: network.toLowerCase() as CasperNetwork + }) + }); + + return { + deployData, + isLoading: isDeployLoading + }; +}; diff --git a/src/libs/services/deploys/use-fetch-deploys.tsx b/src/libs/services/deploys/use-fetch-deploys.ts similarity index 83% rename from src/libs/services/deploys/use-fetch-deploys.tsx rename to src/libs/services/deploys/use-fetch-deploys.ts index 609a08d9..eed12954 100644 --- a/src/libs/services/deploys/use-fetch-deploys.tsx +++ b/src/libs/services/deploys/use-fetch-deploys.ts @@ -6,21 +6,14 @@ import { useSelector } from 'react-redux'; import { PENDING_DEPLOY_REFETCH_INTERVAL } from '@src/constants'; -import { - accountDeploysDataChanged, - accountPendingDeployHashesRemove -} from '@background/redux/account-info/actions'; -import { - selectAccountDeploysData, - selectPendingDeployHashes -} from '@background/redux/account-info/selectors'; +import { accountPendingDeployHashesRemove } from '@background/redux/account-info/actions'; +import { selectPendingDeployHashes } from '@background/redux/account-info/selectors'; import { selectActiveNetworkSetting } from '@background/redux/settings/selectors'; import { dispatchToMainStore } from '@background/redux/utils'; import { selectVaultActiveAccount } from '@background/redux/vault/selectors'; import { deploysRepository } from '@background/wallet-repositories'; export const useFetchDeploys = () => { - const deploysDataFromStore = useSelector(selectAccountDeploysData); const pendingDeployHashes = useSelector(selectPendingDeployHashes); const activeAccount = useSelector(selectVaultActiveAccount); const network = useSelector(selectActiveNetworkSetting); @@ -42,9 +35,8 @@ export const useFetchDeploys = () => { network: network.toLowerCase() as CasperNetwork, page: pageParam }), - getNextPageParam: (lastPage, _, lastPageParam) => { - const nextPage = - (deploysDataFromStore?.pageParams.length || lastPageParam) + 1; + getNextPageParam: (lastPage, pages) => { + const nextPage = pages.length + 1; return nextPage <= lastPage.page_count ? nextPage : undefined; }, @@ -81,11 +73,11 @@ export const useFetchDeploys = () => { const flattenedDeploys = useMemo( () => - deploysDataFromStore?.pages + deploysData?.pages ?.flat() ?.map(t => t.data) ?.flat() ?? [], - [deploysDataFromStore?.pages] + [deploysData?.pages] ); const deploys = useMemo(() => { @@ -101,11 +93,6 @@ export const useFetchDeploys = () => { ]; }, [pendingDeploys, flattenedDeploys]); - useEffect(() => { - if (isDeploysLoading) return; - dispatchToMainStore(accountDeploysDataChanged(deploysData)); - }, [deploysData, isDeploysLoading]); - useEffect(() => { if (isPendingDeploysLoading) return; const notPendingDeploys = pendingDeploys.filter( diff --git a/src/libs/ui/components/deploy-plate/components/cep18-deploy-rows.tsx b/src/libs/ui/components/deploy-plate/components/cep18-deploy-rows.tsx index c470b356..63f715cf 100644 --- a/src/libs/ui/components/deploy-plate/components/cep18-deploy-rows.tsx +++ b/src/libs/ui/components/deploy-plate/components/cep18-deploy-rows.tsx @@ -29,8 +29,8 @@ export const Cep18DeployRows = ({ deploy }: Erc20DeployRowsProps) => { errorMessage: deploy.errorMessage }} > - - + + {deploy.formattedDecimalAmount} diff --git a/src/libs/ui/components/deploy-plate/components/deploy-container.tsx b/src/libs/ui/components/deploy-plate/components/deploy-container.tsx index 89bc6603..a0a3611a 100644 --- a/src/libs/ui/components/deploy-plate/components/deploy-container.tsx +++ b/src/libs/ui/components/deploy-plate/components/deploy-container.tsx @@ -35,14 +35,14 @@ export const DeployContainer = ({ deployStatus }: DeployContainerProps) => { return ( - + {iconUrl.endsWith('.svg') ? ( ) : ( )} - + {title} @@ -54,6 +54,7 @@ export const DeployContainer = ({ {children} + ); }; diff --git a/src/libs/ui/components/deploy-plate/components/native-transfer-deploy-rows.tsx b/src/libs/ui/components/deploy-plate/components/native-transfer-deploy-rows.tsx index 2366ddcd..f6599283 100644 --- a/src/libs/ui/components/deploy-plate/components/native-transfer-deploy-rows.tsx +++ b/src/libs/ui/components/deploy-plate/components/native-transfer-deploy-rows.tsx @@ -29,8 +29,8 @@ export const NativeTransferDeployRows = ({ errorMessage: deploy.errorMessage }} > - - + + {deploy.formattedDecimalAmount} diff --git a/src/libs/ui/components/deploy-plate/deploy-plate.tsx b/src/libs/ui/components/deploy-plate/deploy-plate.tsx index fdbad8f4..007b0632 100644 --- a/src/libs/ui/components/deploy-plate/deploy-plate.tsx +++ b/src/libs/ui/components/deploy-plate/deploy-plate.tsx @@ -13,8 +13,7 @@ import styled from 'styled-components'; import { RouterPath, useTypedNavigate } from '@popup/router'; -import { AlignedSpaceBetweenFlexRow } from '@libs/layout'; -import { SvgIcon } from '@libs/ui/components'; +import { AlignedFlexRow } from '@libs/layout'; import { AssociatedDeployRows } from '@libs/ui/components/deploy-plate/components/associated-deploy-rows'; import { AuctionDeployRows } from '@libs/ui/components/deploy-plate/components/auction-deploy-rows'; import { Cep18DeployRows } from '@libs/ui/components/deploy-plate/components/cep18-deploy-rows'; @@ -23,7 +22,7 @@ import { DefaultDeployRows } from '@libs/ui/components/deploy-plate/components/d import { NativeTransferDeployRows } from '@libs/ui/components/deploy-plate/components/native-transfer-deploy-rows'; import { NftDeployRows } from '@libs/ui/components/deploy-plate/components/nft-deploy-rows'; -const Container = styled(AlignedSpaceBetweenFlexRow)` +const Container = styled(AlignedFlexRow)` padding: 16px 12px 16px; background: ${props => props.theme.color.backgroundPrimary}; @@ -61,7 +60,6 @@ export const DeployPlate = ({ }} > - ); } @@ -76,10 +74,13 @@ export const DeployPlate = ({ navigateHome } }); + + if (onClick) { + onClick(); + } }} > - ); } @@ -94,10 +95,13 @@ export const DeployPlate = ({ navigateHome } }); + + if (onClick) { + onClick(); + } }} > - ); } @@ -112,10 +116,13 @@ export const DeployPlate = ({ navigateHome } }); + + if (onClick) { + onClick(); + } }} > - ); } @@ -130,10 +137,13 @@ export const DeployPlate = ({ navigateHome } }); + + if (onClick) { + onClick(); + } }} > - ); } @@ -148,10 +158,13 @@ export const DeployPlate = ({ navigateHome } }); + + if (onClick) { + onClick(); + } }} > - ); } @@ -166,10 +179,13 @@ export const DeployPlate = ({ navigateHome } }); + + if (onClick) { + onClick(); + } }} > - ); } @@ -183,10 +199,13 @@ export const DeployPlate = ({ navigateHome } }); + + if (onClick) { + onClick(); + } }} > - ); };