From 2539f26f56da21c6b96a1f1a137ae89de265c0e5 Mon Sep 17 00:00:00 2001 From: Michal Zielenkiewicz Date: Mon, 15 Jul 2024 11:36:13 +0200 Subject: [PATCH] Add missing props to Consensus tx details --- .changelog/1480.trivial.md | 1 + src/app/components/Delegations/index.tsx | 2 +- .../ConsensusTransactionDetailPage/index.tsx | 83 ++++++++++++++----- src/app/utils/transaction.ts | 28 +++++++ src/locales/en/translation.json | 2 +- src/oasis-nexus/api.ts | 15 +++- 6 files changed, 105 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 0000000000..298247cea3 --- /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 ea0efb359e..8bfc674dc1 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 8d14f1db4d..6f28540ad2 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,11 @@ 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' +import { transaction } from '@oasisprotocol/client-rt' const StyledDescriptionDetails = styled('dd')({ '&&': { padding: 0 }, @@ -28,6 +34,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 +43,12 @@ export const ConsensusTransactionDetailPage: FC = () => { return ( - + ) @@ -50,7 +62,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 +71,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 0000000000..51de9c9aa0 --- /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 ecb5b41bce..4fef6d85fe 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 cf02ed7933..68fe204265 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,