From 8130c0c057c232913f1ed5ce1fd2398677b4c159 Mon Sep 17 00:00:00 2001 From: Michal Zielenkiewicz Date: Fri, 12 Jul 2024 14:54:52 +0200 Subject: [PATCH 1/4] Fix type returned in tx API layer --- src/oasis-nexus/api.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/oasis-nexus/api.ts b/src/oasis-nexus/api.ts index 966cf9772..cf02ed793 100644 --- a/src/oasis-nexus/api.ts +++ b/src/oasis-nexus/api.ts @@ -248,7 +248,7 @@ export const useGetConsensusTransactionsTxHash: typeof generated.useGetConsensus ...options?.request, transformResponse: [ ...arrayify(axios.defaults.transformResponse), - (data: generated.TransactionList, headers, status) => { + (data: generated.Transaction, headers, status) => { if (status !== 200) return data return { ...data, From 99d9eaf058bfaba34801dd984dc7324e6bc64f03 Mon Sep 17 00:00:00 2001 From: Michal Zielenkiewicz Date: Mon, 15 Jul 2024 11:36:13 +0200 Subject: [PATCH 2/4] Add missing props to Consensus tx details --- .changelog/1480.trivial.md | 1 + src/app/components/Delegations/index.tsx | 2 +- .../ConsensusTransactionDetailPage/index.tsx | 82 ++++++++++++++----- src/app/utils/transaction.ts | 28 +++++++ src/locales/en/translation.json | 2 +- src/oasis-nexus/api.ts | 15 +++- 6 files changed, 104 insertions(+), 26 deletions(-) create mode 100644 .changelog/1480.trivial.md create mode 100644 src/app/utils/transaction.ts diff --git a/.changelog/1480.trivial.md b/.changelog/1480.trivial.md new file mode 100644 index 000000000..298247cea --- /dev/null +++ b/.changelog/1480.trivial.md @@ -0,0 +1 @@ +Add missing props to Consensus tx details diff --git a/src/app/components/Delegations/index.tsx b/src/app/components/Delegations/index.tsx index ea0efb359..8bfc674dc 100644 --- a/src/app/components/Delegations/index.tsx +++ b/src/app/components/Delegations/index.tsx @@ -29,7 +29,7 @@ export const Delegations: FC = ({ const tableColumns: TableColProps[] = [ { key: 'delegator', content: t('common.address') }, { key: 'amount', content: t('validator.amount'), align: TableCellAlign.Right }, - { key: 'shares', content: t('validator.shares'), align: TableCellAlign.Right }, + { key: 'shares', content: t('common.shares'), align: TableCellAlign.Right }, ...(debonding ? [{ key: 'debondingEnd', content: t('validator.debondingEnd'), align: TableCellAlign.Right }] : []), diff --git a/src/app/pages/ConsensusTransactionDetailPage/index.tsx b/src/app/pages/ConsensusTransactionDetailPage/index.tsx index 8d14f1db4..c745d34a1 100644 --- a/src/app/pages/ConsensusTransactionDetailPage/index.tsx +++ b/src/app/pages/ConsensusTransactionDetailPage/index.tsx @@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom' import { useTranslation } from 'react-i18next' import { styled } from '@mui/material/styles' import { Transaction, useGetConsensusTransactionsTxHash } from '../../../oasis-nexus/api' +import { getConsensusTransactionAmount, getConsensusTransactionToAddress } from '../../utils/transaction' import { StyledDescriptionList } from '../../components/StyledDescriptionList' import { PageLayout } from '../../components/PageLayout' import { SubPageCard } from '../../components/SubPageCard' @@ -18,6 +19,10 @@ import { ConsensusTransactionMethod } from 'app/components/ConsensusTransactionM import { useFormattedTimestampStringWithDistance } from 'app/hooks/useFormattedTimestamp' import { RoundedBalance } from 'app/components/RoundedBalance' import { AccountLink } from 'app/components/Account/AccountLink' +import { getPreciseNumberFormat } from 'locales/getPreciseNumberFormat' +import { CurrentFiatValue } from '../RuntimeTransactionDetailPage/CurrentFiatValue' +import { AllTokenPrices, useAllTokenPrices } from 'coin-gecko/api' +import { getFiatCurrencyForScope } from '../../../config' const StyledDescriptionDetails = styled('dd')({ '&&': { padding: 0 }, @@ -28,6 +33,7 @@ export const ConsensusTransactionDetailPage: FC = () => { const scope = useRequiredScopeParam() const hash = useParams().hash! const { isLoading, data } = useGetConsensusTransactionsTxHash(scope.network, hash) + const tokenPrices = useAllTokenPrices(getFiatCurrencyForScope(scope)) const transaction = data?.data if (!transaction && !isLoading) { throw AppErrors.NotFoundTxHash @@ -36,7 +42,12 @@ export const ConsensusTransactionDetailPage: FC = () => { return ( - + ) @@ -50,7 +61,8 @@ export const ConsensusTransactionDetailView: FC<{ isLoading?: boolean transaction: TransactionDetailConsensusBlock | undefined detailsPage?: boolean -}> = ({ detailsPage, isLoading, transaction }) => { + tokenPrices?: AllTokenPrices +}> = ({ detailsPage, isLoading, transaction, tokenPrices }) => { const { t } = useTranslation() const { isMobile } = useScreenSize() const formattedTimestamp = useFormattedTimestampStringWithDistance(transaction?.timestamp) @@ -58,6 +70,10 @@ export const ConsensusTransactionDetailView: FC<{ if (isLoading) return if (!transaction) return <> + const to = getConsensusTransactionToAddress(transaction) + const amount = getConsensusTransactionAmount(transaction) + const tokenPriceInfo = tokenPrices?.[transaction.ticker] + return ( {t('common.from')}
+
-
{t('common.to')}
-
- {/* TODO: show recipients address when props is added to API */} - <>- -
-
{t('common.value')}
-
- {/* TODO: getPreciseNumberFormat when API returns amount prop */} - <>- -
- {detailsPage && ( + {to && ( <> -
{t('currentFiatValue.title')}
+
{t('common.to')}
- {/* TODO: show CurrentFiatValue when API returns amount prop */} - <>- + +
-
{t('common.transactionFee')}
+ + )} + {amount && ( + <> +
{t('common.value')}
- + {t('common.valueInToken', { + ...getPreciseNumberFormat(amount), + ticker: transaction.ticker, + })}
-
{t('common.gasUsed')}
+ + )} + {detailsPage && ( + <> + {amount && + !!tokenPriceInfo && + !tokenPriceInfo.isLoading && + !tokenPriceInfo.isFree && + tokenPriceInfo.price !== undefined && ( + <> +
{t('currentFiatValue.title')}
+
+ +
+ + )} + {transaction.body?.shares && ( + <> +
{t('common.shares')}
+
+ +
+ + )} +
{t('common.transactionFee')}
- {/* TODO: show when API returns gas_used prop */} - <>- +
+ + {/* TODO: gasUsed field will be available for Nexus with the next oasis-core release */} + {transaction.gas_limit && ( <>
{t('common.gasLimit')}
diff --git a/src/app/utils/transaction.ts b/src/app/utils/transaction.ts new file mode 100644 index 000000000..51de9c9aa --- /dev/null +++ b/src/app/utils/transaction.ts @@ -0,0 +1,28 @@ +import { ConsensusTxMethod, Transaction } from '../../oasis-nexus/api' + +export const getConsensusTransactionToAddress = (transaction: Transaction) => { + switch (transaction.method) { + case ConsensusTxMethod.stakingAddEscrow: + return transaction.body?.address + case ConsensusTxMethod.stakingAllow: + return transaction.body?.beneficiary + case ConsensusTxMethod.stakingReclaimEscrow: + return transaction.body?.account + case ConsensusTxMethod.stakingTransfer: + return transaction.body?.to + default: + return undefined + } +} + +export const getConsensusTransactionAmount = (transaction: Transaction) => { + switch (transaction.method) { + case ConsensusTxMethod.stakingAllow: + return transaction.body?.amount_change + case ConsensusTxMethod.stakingAddEscrow: + case ConsensusTxMethod.stakingTransfer: + return transaction.body?.amount + default: + return undefined + } +} diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index ecb5b41bc..4fef6d85f 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -112,6 +112,7 @@ "select": "Select", "size": "Size", "sapphire": "Sapphire", + "shares": "Shares", "show": "Show", "smartContract": "Smart Contract", "smartContract_short": "Contract", @@ -671,7 +672,6 @@ "signedBlocksDescription": "Last 100 blocks", "proposedBlocks": "Proposed Blocks", "snapshot": "Validator Snapshot", - "shares": "Shares", "sharesDocs": "How shares are calculated", "staked": "Staked", "stakingTrend": "Staking Trend", diff --git a/src/oasis-nexus/api.ts b/src/oasis-nexus/api.ts index cf02ed793..68fe20426 100644 --- a/src/oasis-nexus/api.ts +++ b/src/oasis-nexus/api.ts @@ -248,10 +248,19 @@ export const useGetConsensusTransactionsTxHash: typeof generated.useGetConsensus ...options?.request, transformResponse: [ ...arrayify(axios.defaults.transformResponse), - (data: generated.Transaction, headers, status) => { - if (status !== 200) return data + (transaction: generated.Transaction, headers, status) => { + if (status !== 200) return transaction return { - ...data, + ...transaction, + body: { + ...transaction.body, + amount: transaction.body?.amount + ? fromBaseUnits(transaction.body.amount, consensusDecimals) + : undefined, + amount_change: transaction.body?.amount_change + ? fromBaseUnits(transaction.body.amount_change, consensusDecimals) + : undefined, + }, layer: Layer.consensus, network, ticker, From e572688e927a834680a8a93bc12454a96d662f86 Mon Sep 17 00:00:00 2001 From: Michal Zielenkiewicz Date: Mon, 15 Jul 2024 11:36:31 +0200 Subject: [PATCH 3/4] Move CurrentFiatValue to common components --- .../CurrentFiatValue}/__tests__/CurrentFiatValue.test.tsx | 2 +- .../CurrentFiatValue/index.tsx} | 0 src/app/pages/ConsensusTransactionDetailPage/index.tsx | 2 +- src/app/pages/RuntimeTransactionDetailPage/index.tsx | 2 +- 4 files changed, 3 insertions(+), 3 deletions(-) rename src/app/{pages/RuntimeTransactionDetailPage => components/CurrentFiatValue}/__tests__/CurrentFiatValue.test.tsx (90%) rename src/app/{pages/RuntimeTransactionDetailPage/CurrentFiatValue.tsx => components/CurrentFiatValue/index.tsx} (100%) diff --git a/src/app/pages/RuntimeTransactionDetailPage/__tests__/CurrentFiatValue.test.tsx b/src/app/components/CurrentFiatValue/__tests__/CurrentFiatValue.test.tsx similarity index 90% rename from src/app/pages/RuntimeTransactionDetailPage/__tests__/CurrentFiatValue.test.tsx rename to src/app/components/CurrentFiatValue/__tests__/CurrentFiatValue.test.tsx index 829d29ba2..a3400a3d3 100644 --- a/src/app/pages/RuntimeTransactionDetailPage/__tests__/CurrentFiatValue.test.tsx +++ b/src/app/components/CurrentFiatValue/__tests__/CurrentFiatValue.test.tsx @@ -1,5 +1,5 @@ import { screen, render } from '@testing-library/react' -import { CurrentFiatValue } from '../CurrentFiatValue' +import { CurrentFiatValue } from '..' describe('CurrentFiatValue', () => { it('should display formatted values', () => { diff --git a/src/app/pages/RuntimeTransactionDetailPage/CurrentFiatValue.tsx b/src/app/components/CurrentFiatValue/index.tsx similarity index 100% rename from src/app/pages/RuntimeTransactionDetailPage/CurrentFiatValue.tsx rename to src/app/components/CurrentFiatValue/index.tsx diff --git a/src/app/pages/ConsensusTransactionDetailPage/index.tsx b/src/app/pages/ConsensusTransactionDetailPage/index.tsx index c745d34a1..034bb89b8 100644 --- a/src/app/pages/ConsensusTransactionDetailPage/index.tsx +++ b/src/app/pages/ConsensusTransactionDetailPage/index.tsx @@ -20,7 +20,7 @@ import { useFormattedTimestampStringWithDistance } from 'app/hooks/useFormattedT import { RoundedBalance } from 'app/components/RoundedBalance' import { AccountLink } from 'app/components/Account/AccountLink' import { getPreciseNumberFormat } from 'locales/getPreciseNumberFormat' -import { CurrentFiatValue } from '../RuntimeTransactionDetailPage/CurrentFiatValue' +import { CurrentFiatValue } from '../../components/CurrentFiatValue' import { AllTokenPrices, useAllTokenPrices } from 'coin-gecko/api' import { getFiatCurrencyForScope } from '../../../config' diff --git a/src/app/pages/RuntimeTransactionDetailPage/index.tsx b/src/app/pages/RuntimeTransactionDetailPage/index.tsx index 47071e113..a25bc0897 100644 --- a/src/app/pages/RuntimeTransactionDetailPage/index.tsx +++ b/src/app/pages/RuntimeTransactionDetailPage/index.tsx @@ -27,7 +27,7 @@ import { useRequiredScopeParam } from '../../hooks/useScopeParam' import { DashboardLink } from '../ParatimeDashboardPage/DashboardLink' import { getNameForTicker, Ticker } from '../../../types/ticker' import { AllTokenPrices, useAllTokenPrices } from '../../../coin-gecko/api' -import { CurrentFiatValue } from './CurrentFiatValue' +import { CurrentFiatValue } from '../../components/CurrentFiatValue' import { AddressSwitch, AddressSwitchOption } from '../../components/AddressSwitch' import { TransactionEncryptionStatus } from '../../components/TransactionEncryptionStatus' import Typography from '@mui/material/Typography' From f4ca013b73c9bf1c7743ed5d301a26fd2d56132b Mon Sep 17 00:00:00 2001 From: Michal Zielenkiewicz Date: Wed, 17 Jul 2024 10:51:09 +0200 Subject: [PATCH 4/4] Move tx helpers to api layer --- .../ConsensusTransactionDetailPage/index.tsx | 20 +++++++++---------- src/oasis-nexus/api.ts | 7 +++++++ 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/src/app/pages/ConsensusTransactionDetailPage/index.tsx b/src/app/pages/ConsensusTransactionDetailPage/index.tsx index 034bb89b8..daefc9d95 100644 --- a/src/app/pages/ConsensusTransactionDetailPage/index.tsx +++ b/src/app/pages/ConsensusTransactionDetailPage/index.tsx @@ -3,7 +3,6 @@ import { useParams } from 'react-router-dom' import { useTranslation } from 'react-i18next' import { styled } from '@mui/material/styles' import { Transaction, useGetConsensusTransactionsTxHash } from '../../../oasis-nexus/api' -import { getConsensusTransactionAmount, getConsensusTransactionToAddress } from '../../utils/transaction' import { StyledDescriptionList } from '../../components/StyledDescriptionList' import { PageLayout } from '../../components/PageLayout' import { SubPageCard } from '../../components/SubPageCard' @@ -70,8 +69,6 @@ export const ConsensusTransactionDetailView: FC<{ if (isLoading) return if (!transaction) return <> - const to = getConsensusTransactionToAddress(transaction) - const amount = getConsensusTransactionAmount(transaction) const tokenPriceInfo = tokenPrices?.[transaction.ticker] return ( @@ -104,21 +101,24 @@ export const ConsensusTransactionDetailView: FC<{ - {to && ( + {transaction.to && ( <>
{t('common.to')}
- - + +
)} - {amount && ( + {transaction.amount && ( <>
{t('common.value')}
{t('common.valueInToken', { - ...getPreciseNumberFormat(amount), + ...getPreciseNumberFormat(transaction.amount), ticker: transaction.ticker, })}
@@ -126,7 +126,7 @@ export const ConsensusTransactionDetailView: FC<{ )} {detailsPage && ( <> - {amount && + {transaction.amount && !!tokenPriceInfo && !tokenPriceInfo.isLoading && !tokenPriceInfo.isFree && @@ -134,7 +134,7 @@ export const ConsensusTransactionDetailView: FC<{ <>
{t('currentFiatValue.title')}
- +
)} diff --git a/src/oasis-nexus/api.ts b/src/oasis-nexus/api.ts index 68fe20426..eadeda31f 100644 --- a/src/oasis-nexus/api.ts +++ b/src/oasis-nexus/api.ts @@ -23,6 +23,7 @@ import { Ticker } from '../types/ticker' import { getRPCAccountBalances } from '../app/utils/getRPCAccountBalances' import { toChecksumAddress } from '@ethereumjs/util' import { fromBaseUnits } from '../app/utils/number-utils' +import { getConsensusTransactionAmount, getConsensusTransactionToAddress } from '../app/utils/transaction' export * from './generated/api' export type { RuntimeEvmBalance as Token } from './generated/api' @@ -31,6 +32,8 @@ export type HasScope = SearchScope declare module './generated/api' { export interface Transaction { + amount: string | undefined + to: string | undefined network: Network layer: Layer ticker: Ticker @@ -250,8 +253,12 @@ export const useGetConsensusTransactionsTxHash: typeof generated.useGetConsensus ...arrayify(axios.defaults.transformResponse), (transaction: generated.Transaction, headers, status) => { if (status !== 200) return transaction + const amount = getConsensusTransactionAmount(transaction) + const to = getConsensusTransactionToAddress(transaction) return { ...transaction, + amount: amount ? fromBaseUnits(amount, consensusDecimals) : undefined, + to, body: { ...transaction.body, amount: transaction.body?.amount