Add missing props to Consensus tx details

oasisprotocol · Jul 15, 2024 · 2539f26 · 2539f26
1 parent dc3ad4a
commit 2539f26
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 26 deletions.
diff --git a/.changelog/1480.trivial.md 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
@@ -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 }]
       : []),

diff --git 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 (
     <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 +62,19 @@ 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 to = getConsensusTransactionToAddress(transaction)
+  const amount = getConsensusTransactionAmount(transaction)
+  const tokenPriceInfo = tokenPrices?.[transaction.ticker]
+
   return (
     <StyledDescriptionList
       titleWidth={isMobile ? '100px' : '200px'}
@@ -86,33 +103,57 @@ 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 && (
+      {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={to} />
+            <CopyToClipboard value={to} />
           </dd>
-          <dt>{t('common.transactionFee')}</dt>
+        </>
+      )}
+      {amount && (
+        <>
+          <dt>{t('common.value')}</dt>
           <dd>
-            <RoundedBalance value={transaction.fee} ticker={transaction.ticker} />
+            {t('common.valueInToken', {
+              ...getPreciseNumberFormat(amount),
+              ticker: transaction.ticker,
+            })}
           </dd>
-          <dt>{t('common.gasUsed')}</dt>
+        </>
+      )}
+      {detailsPage && (
+        <>
+          {amount &&
+            !!tokenPriceInfo &&
+            !tokenPriceInfo.isLoading &&
+            !tokenPriceInfo.isFree &&
+            tokenPriceInfo.price !== undefined && (
+              <>
+                <dt>{t('currentFiatValue.title')}</dt>
+                <dd>
+                  <CurrentFiatValue amount={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>

diff --git a/src/app/utils/transaction.ts 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
@@ -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
@@ -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,