From 6c7b37b4fc827b3e0375a4e41602cccdcad9b5dc Mon Sep 17 00:00:00 2001 From: lubej <9722540+lubej@users.noreply.github.com> Date: Mon, 27 Nov 2023 14:21:50 +0100 Subject: [PATCH 1/5] Remove double account calls and move account to OutletContext --- .../AccountDetailsPage/AccountTokenTransfersCard.tsx | 8 +++----- src/app/pages/AccountDetailsPage/AccountTokensCard.tsx | 7 +++---- src/app/pages/AccountDetailsPage/index.tsx | 1 + 3 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/app/pages/AccountDetailsPage/AccountTokenTransfersCard.tsx b/src/app/pages/AccountDetailsPage/AccountTokenTransfersCard.tsx index c416d9fe2..3ef956eba 100644 --- a/src/app/pages/AccountDetailsPage/AccountTokenTransfersCard.tsx +++ b/src/app/pages/AccountDetailsPage/AccountTokenTransfersCard.tsx @@ -14,7 +14,7 @@ import { AccountDetailsContext } from './index' export const accountTokenTransfersContainerId = 'transfers' -export const AccountTokenTransfersCard: FC = ({ scope, address }) => { +export const AccountTokenTransfersCard: FC = ({ scope, address, account }) => { const { t } = useTranslation() return ( @@ -23,19 +23,17 @@ export const AccountTokenTransfersCard: FC = ({ scope, ad - + ) } -const AccountTokenTransfers: FC = ({ scope, address }) => { +const AccountTokenTransfers: FC = ({ scope, address, account }) => { const { t } = useTranslation() - const { isLoading, isFetched, results } = useTokenTransfers(scope, address) - const { account } = useAccount(scope, address) const transfers = results.data return ( diff --git a/src/app/pages/AccountDetailsPage/AccountTokensCard.tsx b/src/app/pages/AccountDetailsPage/AccountTokensCard.tsx index 6c336b814..0a412a517 100644 --- a/src/app/pages/AccountDetailsPage/AccountTokensCard.tsx +++ b/src/app/pages/AccountDetailsPage/AccountTokensCard.tsx @@ -40,7 +40,7 @@ export const ContractLink: FC<{ scope: SearchScope; address: string }> = ({ scop ) } -export const AccountTokensCard: FC = ({ scope, address, type }) => { +export const AccountTokensCard: FC = ({ scope, account, type }) => { const { t } = useTranslation() const locationHash = useLocation().hash.replace('#', '') const tokenListLabel = getTokenTypePluralName(t, type) @@ -64,7 +64,6 @@ export const AccountTokensCard: FC = ({ scope, address, // There can be no ERC-20 or ERC-721 tokens on consensus throw AppErrors.UnsupportedLayer } - const { isLoading, account } = useAccount(scope, address) const tableRows = (account?.tokenBalances[type] || []).map(item => ({ key: item.token_contract_addr, data: [ @@ -114,7 +113,7 @@ export const AccountTokensCard: FC = ({ scope, address, - {!isLoading && !account?.tokenBalances[type]?.length && ( + {!!account && !account?.tokenBalances[type]?.length && ( = ({ scope, address, rows={tableRows} rowsNumber={NUMBER_OF_ITEMS_ON_SEPARATE_PAGE} name={tokenListLabel} - isLoading={isLoading} + isLoading={!account} pagination={false} /> diff --git a/src/app/pages/AccountDetailsPage/index.tsx b/src/app/pages/AccountDetailsPage/index.tsx index 67ef94525..f500f7bd9 100644 --- a/src/app/pages/AccountDetailsPage/index.tsx +++ b/src/app/pages/AccountDetailsPage/index.tsx @@ -22,6 +22,7 @@ import { EventFilterMode } from '../../components/RuntimeEvents/EventListFilterS export type AccountDetailsContext = { scope: SearchScope address: string + account?: RuntimeAccount } export const useAccountDetailsProps = () => useOutletContext() From 05bc319a7b28a02778c88751fea1c92f174f1c23 Mon Sep 17 00:00:00 2001 From: lubej <9722540+lubej@users.noreply.github.com> Date: Mon, 27 Nov 2023 14:26:19 +0100 Subject: [PATCH 2/5] Fix address formatting on empty account --- src/app/hooks/useTransformToOasisAddress.ts | 25 ++++++++++ .../AccountTokenTransfersCard.tsx | 1 - .../AccountDetailsPage/AccountTokensCard.tsx | 1 - src/app/pages/AccountDetailsPage/hook.ts | 33 ++++++++++--- src/app/pages/AccountDetailsPage/index.tsx | 4 +- src/app/pages/TokenDashboardPage/hook.ts | 49 +++++++++++++++---- .../__tests__/getEthAccountAddress.test.ts | 25 +++++++++- src/app/utils/helpers.ts | 13 ++++- src/app/utils/route-utils.ts | 9 ++-- src/app/utils/test-fixtures.ts | 17 +++++++ src/oasis-nexus/api.ts | 32 +++++++++--- 11 files changed, 175 insertions(+), 34 deletions(-) create mode 100644 src/app/hooks/useTransformToOasisAddress.ts diff --git a/src/app/hooks/useTransformToOasisAddress.ts b/src/app/hooks/useTransformToOasisAddress.ts new file mode 100644 index 000000000..7e2147607 --- /dev/null +++ b/src/app/hooks/useTransformToOasisAddress.ts @@ -0,0 +1,25 @@ +import { useEffect, useState } from 'react' +import { getOasisAddress } from '../utils/helpers' + +export const useTransformToOasisAddress = (ethOrOasisAddress: string): string | null => { + const [oasisAddress, setOasisAddress] = useState(null) + + useEffect(() => { + let shouldUpdate = true + + const transformToOasisAddress = async (addr: string) => { + const oasisAddr = await getOasisAddress(addr) + if (shouldUpdate) { + setOasisAddress(oasisAddr) + } + } + + transformToOasisAddress(ethOrOasisAddress) + + return () => { + shouldUpdate = false + } + }, [ethOrOasisAddress, setOasisAddress]) + + return oasisAddress +} diff --git a/src/app/pages/AccountDetailsPage/AccountTokenTransfersCard.tsx b/src/app/pages/AccountDetailsPage/AccountTokenTransfersCard.tsx index 3ef956eba..bb4d4bdf8 100644 --- a/src/app/pages/AccountDetailsPage/AccountTokenTransfersCard.tsx +++ b/src/app/pages/AccountDetailsPage/AccountTokenTransfersCard.tsx @@ -7,7 +7,6 @@ import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE } from '../../config' import { ErrorBoundary } from '../../components/ErrorBoundary' import { LinkableDiv } from '../../components/PageLayout/LinkableDiv' import { CardEmptyState } from './CardEmptyState' -import { useAccount } from './hook' import { useTokenTransfers } from '../TokenDashboardPage/hook' import { TokenTransfers } from '../../components/Tokens/TokenTransfers' import { AccountDetailsContext } from './index' diff --git a/src/app/pages/AccountDetailsPage/AccountTokensCard.tsx b/src/app/pages/AccountDetailsPage/AccountTokensCard.tsx index 0a412a517..80cc3e8e5 100644 --- a/src/app/pages/AccountDetailsPage/AccountTokensCard.tsx +++ b/src/app/pages/AccountDetailsPage/AccountTokensCard.tsx @@ -13,7 +13,6 @@ import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE } from '../../config' import { EvmTokenType, Layer } from '../../../oasis-nexus/api' import { AppErrors } from '../../../types/errors' import { LinkableDiv } from '../../components/PageLayout/LinkableDiv' -import { useAccount } from './hook' import { TokenLink } from '../../components/Tokens/TokenLink' import { AccountLink } from '../../components/Account/AccountLink' import { diff --git a/src/app/pages/AccountDetailsPage/hook.ts b/src/app/pages/AccountDetailsPage/hook.ts index 71f7b8ba7..fd32b8ce6 100644 --- a/src/app/pages/AccountDetailsPage/hook.ts +++ b/src/app/pages/AccountDetailsPage/hook.ts @@ -10,14 +10,15 @@ import { useSearchParamsPagination } from '../../components/Table/useSearchParam import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE } from '../../config' import { SearchScope } from '../../../types/searchScope' import { EventFilterMode } from '../../components/RuntimeEvents/EventListFilterSwitch' +import { useTransformToOasisAddress } from '../../hooks/useTransformToOasisAddress' -export const useAccount = (scope: SearchScope, oasisAddress: string) => { +export const useAccount = (scope: SearchScope, address: string) => { const { network, layer } = scope if (layer === Layer.consensus) { // There can be no ERC-20 or ERC-721 tokens on consensus throw AppErrors.UnsupportedLayer } - const query = useGetRuntimeAccountsAddress(network, layer, oasisAddress!) + const query = useGetRuntimeAccountsAddress(network, layer, address) const account = query.data?.data const { isLoading, isError, isFetched } = query @@ -33,13 +34,20 @@ export const useAccountTransactions = (scope: SearchScope, address: string) => { // Loading transactions on the consensus layer is not supported yet. // We should use useGetConsensusTransactions() } + + const oasisAddress = useTransformToOasisAddress(address) const query = useGetRuntimeTransactions( network, layer, // This is OK since consensus has been handled separately { limit: NUMBER_OF_ITEMS_ON_SEPARATE_PAGE, offset: offset, - rel: address, + rel: oasisAddress!, + }, + { + query: { + enabled: !!oasisAddress, + }, }, ) const { isFetched, isLoading, data } = query @@ -69,10 +77,21 @@ export const useAccountEvents = (scope: SearchScope, address: string, filterMode // Loading events on the consensus layer is not supported yet. // We should use useGetConsensusEvents() } - const query = useGetRuntimeEvents(network, layer, { - rel: address, - // TODO: implement filtering for non-transactional events - }) + + const oasisAddress = useTransformToOasisAddress(address) + const query = useGetRuntimeEvents( + network, + layer, + { + rel: oasisAddress!, + // TODO: implement filtering for non-transactional events + }, + { + query: { + enabled: !!oasisAddress, + }, + }, + ) const { isFetched, isLoading, isError, data } = query const events = data?.data.events.filter( event => filterMode === EventFilterMode.All || event.type !== RuntimeEventType.accountstransfer, diff --git a/src/app/pages/AccountDetailsPage/index.tsx b/src/app/pages/AccountDetailsPage/index.tsx index f500f7bd9..e1eaf474c 100644 --- a/src/app/pages/AccountDetailsPage/index.tsx +++ b/src/app/pages/AccountDetailsPage/index.tsx @@ -6,7 +6,7 @@ import { RouterTabs } from '../../components/RouterTabs' import { useTokenPrice } from '../../../coin-gecko/api' import { Ticker } from '../../../types/ticker' -import { EvmTokenType } from '../../../oasis-nexus/api' +import { EvmTokenType, RuntimeAccount } from '../../../oasis-nexus/api' import { accountTokenContainerId } from './AccountTokensCard' import { useAccount, useAccountEvents } from './hook' import { useRequiredScopeParam } from '../../hooks/useScopeParam' @@ -55,7 +55,7 @@ export const AccountDetailsPage: FC = () => { const isLoading = isAccountLoading || isTokenLoading - const context: AccountDetailsContext = { scope, address } + const context: AccountDetailsContext = { scope, address, account } return ( diff --git a/src/app/pages/TokenDashboardPage/hook.ts b/src/app/pages/TokenDashboardPage/hook.ts index 91064af01..88c14fc1e 100644 --- a/src/app/pages/TokenDashboardPage/hook.ts +++ b/src/app/pages/TokenDashboardPage/hook.ts @@ -13,6 +13,7 @@ import { SearchScope } from '../../../types/searchScope' import { useSearchParamsPagination } from '../../components/Table/useSearchParamsPagination' import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE } from '../../config' import { useComprehensiveSearchParamsPagination } from '../../components/Table/useComprehensiveSearchParamsPagination' +import { useTransformToOasisAddress } from '../../hooks/useTransformToOasisAddress' export const useTokenInfo = (scope: SearchScope, address: string, enabled = true) => { const { network, layer } = scope @@ -44,16 +45,23 @@ export const useTokenTransfers = (scope: SearchScope, address: string) => { // Loading transactions on the consensus layer is not supported yet. // We should use useGetConsensusTransactions() } + + const oasisAddress = useTransformToOasisAddress(address) const query = useGetRuntimeEvents( network, layer, // This is OK since consensus has been handled separately { ...pagination.paramsForQuery, - rel: address, + rel: oasisAddress!, type: 'evm.log', // The following is the hex-encoded signature for Transfer(address,address,uint256) evm_log_signature: 'ddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef', }, + { + query: { + enabled: !!oasisAddress, + }, + }, ) const { isFetched, isLoading, data } = query @@ -79,10 +87,22 @@ export const useTokenHolders = (scope: SearchScope, address: string) => { throw AppErrors.UnsupportedLayer // There are no token holders on the consensus layer. } - const query = useGetRuntimeEvmTokensAddressHolders(network, layer, address, { - limit: NUMBER_OF_ITEMS_ON_SEPARATE_PAGE, - offset: offset, - }) + + const oasisAddress = useTransformToOasisAddress(address) + const query = useGetRuntimeEvmTokensAddressHolders( + network, + layer, + oasisAddress!, + { + limit: NUMBER_OF_ITEMS_ON_SEPARATE_PAGE, + offset: offset, + }, + { + query: { + enabled: !!oasisAddress, + }, + }, + ) const { isFetched, isLoading, data } = query @@ -116,10 +136,21 @@ export const useTokenInventory = (scope: SearchScope, address: string) => { throw AppErrors.UnsupportedLayer // There are no tokens on the consensus layer. } - const query = useGetRuntimeEvmTokensAddressNfts(network, layer, address, { - limit: NUMBER_OF_INVENTORY_ITEMS, - offset: offset, - }) + const oasisAddress = useTransformToOasisAddress(address) + const query = useGetRuntimeEvmTokensAddressNfts( + network, + layer, + oasisAddress!, + { + limit: NUMBER_OF_INVENTORY_ITEMS, + offset: offset, + }, + { + query: { + enabled: !!oasisAddress, + }, + }, + ) const { isFetched, isLoading, data } = query const inventory = data?.data.evm_nfts diff --git a/src/app/utils/__tests__/getEthAccountAddress.test.ts b/src/app/utils/__tests__/getEthAccountAddress.test.ts index 79bc2431e..6bd36401a 100644 --- a/src/app/utils/__tests__/getEthAccountAddress.test.ts +++ b/src/app/utils/__tests__/getEthAccountAddress.test.ts @@ -1,5 +1,5 @@ -import { getEthAccountAddressFromPreimage } from '../helpers' -import { suggestedParsedAccount } from '../test-fixtures' +import { getEthAccountAddressFromPreimage, getEthAddressForAccount } from '../helpers' +import { suggestedEmptyAccount, suggestedParsedAccount } from '../test-fixtures' describe('getEthAccountAddress', () => { // TODO: enable when jest fixes "TypeError: Expected Uint8Array" @@ -9,4 +9,25 @@ describe('getEthAccountAddress', () => { suggestedParsedAccount.address_eth, ) }) + + it('should return input address on empty account', () => { + const validEthAddress = suggestedParsedAccount.address_eth + expect(getEthAddressForAccount(suggestedEmptyAccount, validEthAddress)).toBe( + '0xBA504818FdD8D3dBA2Ef8fD9B4F4D5c71aD1d1D3', + ) + }) + + it('should return undefined on empty account with invalid ETH address', () => { + expect(getEthAddressForAccount(suggestedEmptyAccount, '0x0')).toBeUndefined() + }) + + it('should return undefined on empty account with undefined supplied as ETH address', () => { + expect(getEthAddressForAccount(suggestedEmptyAccount, undefined)).toBeUndefined() + }) + + it('should valid address from preimage', () => { + expect(getEthAddressForAccount(suggestedParsedAccount, undefined)).toBe( + suggestedParsedAccount.address_eth, + ) + }) }) diff --git a/src/app/utils/helpers.ts b/src/app/utils/helpers.ts index ce7318fbc..224798d16 100644 --- a/src/app/utils/helpers.ts +++ b/src/app/utils/helpers.ts @@ -3,7 +3,7 @@ import { Buffer } from 'buffer' import * as oasis from '@oasisprotocol/client' import * as oasisRT from '@oasisprotocol/client-rt' // eslint-disable-next-line no-restricted-imports -import { AddressPreimage } from '../../oasis-nexus/generated/api' +import { AddressPreimage, RuntimeAccount } from '../../oasis-nexus/generated/api' import BigNumber from 'bignumber.js' import { validateMnemonic } from 'bip39' @@ -69,6 +69,17 @@ export function getEthAccountAddressFromPreimage(preimage: AddressPreimage | und return getEthAccountAddressFromBase64(preimage.address_data) } +export function getEthAddressForAccount( + account: RuntimeAccount, + possibleEthAddress?: string, +): string | undefined { + // In case of an empty account + if (account.stats.num_txns <= 0 && possibleEthAddress && isValidEthAddress(possibleEthAddress)) + return possibleEthAddress + + return getEthAccountAddressFromPreimage(account.address_preimage) +} + export function uniq(input: T[] | undefined): T[] { return input === undefined ? [] : [...new Set(input)] } diff --git a/src/app/utils/route-utils.ts b/src/app/utils/route-utils.ts index 7b22ba368..382bbd672 100644 --- a/src/app/utils/route-utils.ts +++ b/src/app/utils/route-utils.ts @@ -1,5 +1,5 @@ import { LoaderFunctionArgs } from 'react-router-dom' -import { getOasisAddress, isValidTxHash } from './helpers' +import { isValidTxHash } from './helpers' import { isValidBlockHeight, isValidOasisAddress, isValidEthAddress } from './helpers' import { AppError, AppErrors } from '../../types/errors' import { EvmTokenType, Layer } from '../../oasis-nexus/api' @@ -141,11 +141,10 @@ const validateTxHashParam = (hash: string) => { return true } -export const addressParamLoader = async ({ params }: LoaderFunctionArgs) => { +export const addressParamLoader = ({ params }: LoaderFunctionArgs): string => { validateAddressParam(params.address!) - // TODO: remove conversion when API supports querying by EVM address - const address = await getOasisAddress(params.address!) - return address + + return params.address! } export const contractAddressParamLoader = async ({ params }: LoaderFunctionArgs) => { diff --git a/src/app/utils/test-fixtures.ts b/src/app/utils/test-fixtures.ts index 4a3c3f2ad..93014f3af 100644 --- a/src/app/utils/test-fixtures.ts +++ b/src/app/utils/test-fixtures.ts @@ -66,6 +66,23 @@ export const suggestedParsedAccount: RuntimeAccount = groupAccountTokenBalances( ticker: Ticker.ROSE, }) +export const suggestedEmptyAccount: RuntimeAccount = groupAccountTokenBalances({ + address: 'oasis1qz64azk6qr5nzq537l5cgpd4uxltrhpkhqdx5tqy', + address_preimage: undefined, + address_eth: undefined, + balances: [], + evm_balances: [], + stats: { + num_txns: 0, + total_received: '0', + total_sent: '0', + }, + layer: Layer.emerald, + network: Network.mainnet, + ticker: Ticker.ROSE, + evm_contract: undefined, +}) + export const suggestedParsedAccountResult: AccountResult = { ...suggestedParsedAccount, resultType: 'account', diff --git a/src/oasis-nexus/api.ts b/src/oasis-nexus/api.ts index a704b01c1..ce5605818 100644 --- a/src/oasis-nexus/api.ts +++ b/src/oasis-nexus/api.ts @@ -4,11 +4,12 @@ import axios, { AxiosResponse } from 'axios' import { paraTimesConfig } from '../config' import * as generated from './generated/api' import { UseQueryOptions } from '@tanstack/react-query' -import { EvmToken, Layer, RuntimeAccount } from './generated/api' -import { fromBaseUnits, getEthAccountAddressFromPreimage } from '../app/utils/helpers' +import { EvmToken, EvmTokenType, Layer, RuntimeAccount } from './generated/api' +import { fromBaseUnits, getEthAddressForAccount } from '../app/utils/helpers' import { Network } from '../types/network' import { SearchScope } from '../types/searchScope' import { getTickerForNetwork, NativeTicker } from '../types/ticker' +import { useTransformToOasisAddress } from '../app/hooks/useTransformToOasisAddress' export * from './generated/api' export type { RuntimeEvmBalance as Token } from './generated/api' @@ -21,24 +22,29 @@ declare module './generated/api' { layer: Layer ticker: NativeTicker } + export interface RuntimeTransaction { network: Network layer: Layer ticker: NativeTicker } + export interface Block { network: Network layer: Layer } + export interface RuntimeBlock { network: Network layer: Layer } + export interface Account { network: Network layer: Layer ticker: NativeTicker } + export interface RuntimeAccount { network: Network layer: Layer @@ -46,6 +52,7 @@ declare module './generated/api' { ticker: NativeTicker tokenBalances: Partial> } + export interface RuntimeEvent { network: Network layer: Layer @@ -55,6 +62,7 @@ declare module './generated/api' { network: Network layer: Layer } + export interface BareTokenHolder { network: Network layer: Layer @@ -271,11 +279,17 @@ export const useGetRuntimeAccountsAddress: typeof generated.useGetRuntimeAccount network, runtime, address, - options?, + options, ) => { + const oasisAddress = useTransformToOasisAddress(address) + const ticker = getTickerForNetwork(network) - return generated.useGetRuntimeAccountsAddress(network, runtime, address, { + return generated.useGetRuntimeAccountsAddress(network, runtime, oasisAddress!, { ...options, + query: { + ...(options?.query ?? {}), + enabled: !!oasisAddress && (options?.query?.enabled ?? true), + }, request: { ...options?.request, transformResponse: [ @@ -284,7 +298,7 @@ export const useGetRuntimeAccountsAddress: typeof generated.useGetRuntimeAccount if (status !== 200) return data return groupAccountTokenBalances({ ...data, - address_eth: getEthAccountAddressFromPreimage(data.address_preimage), + address_eth: getEthAddressForAccount(data, address), evm_contract: data.evm_contract && { ...data.evm_contract, eth_creation_tx: data.evm_contract.eth_creation_tx @@ -494,8 +508,14 @@ export const useGetRuntimeEvmTokensAddress: typeof generated.useGetRuntimeEvmTok address, options, ) => { - return generated.useGetRuntimeEvmTokensAddress(network, runtime, address, { + const oasisAddress = useTransformToOasisAddress(address) + + return generated.useGetRuntimeEvmTokensAddress(network, runtime, oasisAddress!, { ...options, + query: { + ...(options?.query ?? {}), + enabled: !!oasisAddress && (options?.query?.enabled ?? true), + }, request: { ...options?.request, transformResponse: [ From fd827425a64bdb1c503c0a04a215a9e95e216775 Mon Sep 17 00:00:00 2001 From: lubej <9722540+lubej@users.noreply.github.com> Date: Mon, 27 Nov 2023 14:26:31 +0100 Subject: [PATCH 3/5] Cleanup unused code --- src/app/pages/TokenDashboardPage/TokenGasUsedCard.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/app/pages/TokenDashboardPage/TokenGasUsedCard.tsx b/src/app/pages/TokenDashboardPage/TokenGasUsedCard.tsx index a9816d7b1..df968a957 100644 --- a/src/app/pages/TokenDashboardPage/TokenGasUsedCard.tsx +++ b/src/app/pages/TokenDashboardPage/TokenGasUsedCard.tsx @@ -12,8 +12,6 @@ export const TokenGasUsedCard: FC<{ scope: SearchScope; address: string }> = ({ const { account, isFetched } = useAccount(scope, address) - console.log('Account', account) - return ( From 2871403c5dde7935b466ab5a7a4535079caca3e3 Mon Sep 17 00:00:00 2001 From: lubej <9722540+lubej@users.noreply.github.com> Date: Fri, 1 Dec 2023 12:23:42 +0100 Subject: [PATCH 4/5] Add changelog fragment --- .changelog/1039.bugfix.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 .changelog/1039.bugfix.md diff --git a/.changelog/1039.bugfix.md b/.changelog/1039.bugfix.md new file mode 100644 index 000000000..8248209c4 --- /dev/null +++ b/.changelog/1039.bugfix.md @@ -0,0 +1 @@ +Fix address formatting on empty account From 47ee2101e96cf5e97398339f2610e6065a0c6dc8 Mon Sep 17 00:00:00 2001 From: lubej <9722540+lubej@users.noreply.github.com> Date: Mon, 4 Dec 2023 10:48:35 +0100 Subject: [PATCH 5/5] Apply useTransformToOasisAddress to account NFTs --- .../AccountNFTCollectionCard.tsx | 4 ++-- src/app/pages/TokenDashboardPage/hook.ts | 22 ++++++++++++++----- src/app/utils/route-utils.ts | 7 ------ src/routes.tsx | 3 +-- 4 files changed, 20 insertions(+), 16 deletions(-) diff --git a/src/app/pages/AccountDetailsPage/AccountNFTCollectionCard.tsx b/src/app/pages/AccountDetailsPage/AccountNFTCollectionCard.tsx index aadcee489..711a60d6d 100644 --- a/src/app/pages/AccountDetailsPage/AccountNFTCollectionCard.tsx +++ b/src/app/pages/AccountDetailsPage/AccountNFTCollectionCard.tsx @@ -31,9 +31,9 @@ export const accountNFTCollectionContainerId = 'nftCollection' export const AccountNFTCollectionCard: FC = ({ scope, address }) => { const { t } = useTranslation() - const oasisContractAddress = useLoaderData() as string + const contractAddress = useLoaderData() as string const { inventory, isFetched, isLoading, isTotalCountClipped, pagination, totalCount } = - useAccountTokenInventory(scope, address, oasisContractAddress) + useAccountTokenInventory(scope, address, contractAddress) const firstToken = inventory?.length ? inventory?.[0].token : undefined return ( diff --git a/src/app/pages/TokenDashboardPage/hook.ts b/src/app/pages/TokenDashboardPage/hook.ts index 88c14fc1e..0e2671ef3 100644 --- a/src/app/pages/TokenDashboardPage/hook.ts +++ b/src/app/pages/TokenDashboardPage/hook.ts @@ -182,11 +182,23 @@ export const useAccountTokenInventory = (scope: SearchScope, address: string, to throw AppErrors.UnsupportedLayer // There are no tokens on the consensus layer. } - const query = useGetRuntimeAccountsAddressNfts(network, layer, address, { - limit: NUMBER_OF_INVENTORY_ITEMS, - offset: offset, - token_address: tokenAddress, - }) + + const oasisAddress = useTransformToOasisAddress(address) + const query = useGetRuntimeAccountsAddressNfts( + network, + layer, + oasisAddress!, + { + limit: NUMBER_OF_INVENTORY_ITEMS, + offset: offset, + token_address: tokenAddress, + }, + { + query: { + enabled: !!oasisAddress, + }, + }, + ) const { isFetched, isLoading, data } = query const inventory = data?.data.evm_nfts diff --git a/src/app/utils/route-utils.ts b/src/app/utils/route-utils.ts index 382bbd672..5f7204c26 100644 --- a/src/app/utils/route-utils.ts +++ b/src/app/utils/route-utils.ts @@ -147,13 +147,6 @@ export const addressParamLoader = ({ params }: LoaderFunctionArgs): string => { return params.address! } -export const contractAddressParamLoader = async ({ params }: LoaderFunctionArgs) => { - validateAddressParam(params.contractAddress!) - // TODO: remove conversion when API supports querying by EVM address - const address = await getOasisAddress(params.contractAddress!) - return address -} - export const blockHeightParamLoader = async ({ params }: LoaderFunctionArgs) => { return validateBlockHeightParam(params.blockHeight!) } diff --git a/src/routes.tsx b/src/routes.tsx index bff15af7f..f466a1b0d 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -12,7 +12,6 @@ import { SearchResultsPage } from './app/pages/SearchResultsPage' import { addressParamLoader, blockHeightParamLoader, - contractAddressParamLoader, transactionParamLoader, scopeLoader, } from './app/utils/route-utils' @@ -108,7 +107,7 @@ export const routes: RouteObject[] = [ { path: ':contractAddress', Component: () => , - loader: contractAddressParamLoader, + loader: addressParamLoader, }, ], },