Merge pull request #1480 from oasisprotocol/mz/consensusTxDetails

Add missing props to Consensus tx details

.changelog/1480.trivial.md

@@ -0,0 +1 @@
+Add missing props to Consensus tx details

src/app/pages/RuntimeTransactionDetailPage/__tests__/CurrentFiatValue.test.tsx → 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', () => {

src/app/components/Delegations/index.tsx

@@ -29,7 +29,7 @@ export const Delegations: FC<DelegationsProps> = ({
   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 }]
       : []),

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 (
     <PageLayout>
       <SubPageCard featured title={t('transaction.header')}>
-        <ConsensusTransactionDetailView isLoading={isLoading} transaction={transaction} detailsPage />
+        <ConsensusTransactionDetailView
+          detailsPage
+          isLoading={isLoading}
+          tokenPrices={tokenPrices}
+          transaction={transaction}
+        />
       </SubPageCard>
     </PageLayout>
   )
@@ -50,14 +60,17 @@ 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)
 
   if (isLoading) return <TextSkeleton numberOfRows={detailsPage ? 13 : 7} />
   if (!transaction) return <></>
 
+  const tokenPriceInfo = tokenPrices?.[transaction.ticker]
+
   return (
     <StyledDescriptionList
       titleWidth={isMobile ? '100px' : '200px'}
@@ -86,33 +99,60 @@ export const ConsensusTransactionDetailView: FC<{
       <dt>{t('common.from')}</dt>
       <dd>
         <AccountLink scope={transaction} address={transaction.sender} />
+        <CopyToClipboard value={transaction.sender} />
       </dd>
-      <dt>{t('common.to')}</dt>
-      <dd>
-        {/* TODO: show recipients address when props is added to API */}
-        <>-</>
-      </dd>
-      <dt>{t('common.value')}</dt>
-      <dd>
-        {/* TODO: getPreciseNumberFormat when API returns amount prop */}
-        <>-</>
-      </dd>
-      {detailsPage && (
+      {transaction.to && (
         <>
-          <dt>{t('currentFiatValue.title')}</dt>
+          <dt>{t('common.to')}</dt>
           <dd>
-            {/* TODO: show CurrentFiatValue when API returns amount prop */}
-            <>-</>
+            <AccountLink
+              scope={{ layer: transaction.layer, network: transaction.network }}
+              address={transaction.to}
+            />
+            <CopyToClipboard value={transaction.to} />
           </dd>
-          <dt>{t('common.transactionFee')}</dt>
+        </>
+      )}
+      {transaction.amount && (
+        <>
+          <dt>{t('common.value')}</dt>
           <dd>
-            <RoundedBalance value={transaction.fee} ticker={transaction.ticker} />
+            {t('common.valueInToken', {
+              ...getPreciseNumberFormat(transaction.amount),
+              ticker: transaction.ticker,
+            })}
           </dd>
-          <dt>{t('common.gasUsed')}</dt>
+        </>
+      )}
+      {detailsPage && (
+        <>
+          {transaction.amount &&
+            !!tokenPriceInfo &&
+            !tokenPriceInfo.isLoading &&
+            !tokenPriceInfo.isFree &&
+            tokenPriceInfo.price !== undefined && (
+              <>
+                <dt>{t('currentFiatValue.title')}</dt>
+                <dd>
+                  <CurrentFiatValue amount={transaction.amount} {...tokenPriceInfo} />
+                </dd>
+              </>
+            )}
+          {transaction.body?.shares && (
+            <>
+              <dt>{t('common.shares')}</dt>
+              <dd>
+                <RoundedBalance compactLargeNumbers value={transaction.body?.shares} />
+              </dd>
+            </>
+          )}
+          <dt>{t('common.transactionFee')}</dt>
           <dd>
-            {/* TODO: show when API returns gas_used prop */}
-            <>-</>
+            <RoundedBalance value={transaction.fee} ticker={transaction.ticker} />
           </dd>
+
+          {/* TODO: gasUsed field will be available for Nexus with the next oasis-core release  */}
+
           {transaction.gas_limit && (
             <>
               <dt>{t('common.gasLimit')}</dt>

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'

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
+  }
+}

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",

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,