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/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/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..daefc9d95 100644 --- a/src/app/pages/ConsensusTransactionDetailPage/index.tsx +++ b/src/app/pages/ConsensusTransactionDetailPage/index.tsx @@ -18,6 +18,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 '../../components/CurrentFiatValue' +import { AllTokenPrices, useAllTokenPrices } from 'coin-gecko/api' +import { getFiatCurrencyForScope } from '../../../config' const StyledDescriptionDetails = styled('dd')({ '&&': { padding: 0 }, @@ -28,6 +32,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 +41,12 @@ export const ConsensusTransactionDetailPage: FC = () => { return ( - + ) @@ -50,7 +60,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 +69,8 @@ export const ConsensusTransactionDetailView: FC<{ if (isLoading) return if (!transaction) return <> + 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 && ( + {transaction.to && ( <> -
{t('currentFiatValue.title')}
+
{t('common.to')}
- {/* TODO: show CurrentFiatValue when API returns amount prop */} - <>- + +
-
{t('common.transactionFee')}
+ + )} + {transaction.amount && ( + <> +
{t('common.value')}
- + {t('common.valueInToken', { + ...getPreciseNumberFormat(transaction.amount), + ticker: transaction.ticker, + })}
-
{t('common.gasUsed')}
+ + )} + {detailsPage && ( + <> + {transaction.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/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' 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 966cf9772..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 @@ -248,10 +251,23 @@ export const useGetConsensusTransactionsTxHash: typeof generated.useGetConsensus ...options?.request, transformResponse: [ ...arrayify(axios.defaults.transformResponse), - (data: generated.TransactionList, headers, status) => { - if (status !== 200) return data + (transaction: generated.Transaction, headers, status) => { + if (status !== 200) return transaction + const amount = getConsensusTransactionAmount(transaction) + const to = getConsensusTransactionToAddress(transaction) return { - ...data, + ...transaction, + amount: amount ? fromBaseUnits(amount, consensusDecimals) : undefined, + to, + 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,