feat: use xrpl.js types and simplify tx parsers

package.json

@@ -111,7 +111,8 @@
     "stylelint-scss": "^4.3.0",
     "ts-jest": "^26.5.6",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.4",
+    "xrpl": "^2.8.1"
   },
   "resolutions": {
     "jest-environment-jsdom": "29.3.1"

src/containers/shared/components/Transaction/AccountDelete/Simple.tsx

@@ -1,9 +1,9 @@
 import { useTranslation } from 'react-i18next'
+import type { AccountDelete } from 'xrpl'
 
 import { SimpleRow } from '../SimpleRow'
 import { TransactionSimpleProps } from '../types'
 import { Account } from '../../Account'
-import { AccountDelete } from './types'
 
 export const Simple = ({ data }: TransactionSimpleProps<AccountDelete>) => {
   const { t } = useTranslation()

src/containers/shared/components/Transaction/AccountDelete/index.ts

@@ -1,11 +1,11 @@
+import type { AccountDelete } from 'xrpl'
 import {
   TransactionAction,
   TransactionCategory,
   TransactionMapping,
 } from '../types'
 
 import { Simple } from './Simple'
-import { AccountDelete } from './types'
 
 export const AccountDeleteTransaction: TransactionMapping = {
   Simple,

src/containers/shared/components/Transaction/AccountSet/Description.tsx

@@ -1,8 +1,8 @@
 import { useTranslation, Trans } from 'react-i18next'
+import type { AccountSet } from 'xrpl'
 import { ACCOUNT_FLAGS } from '../../../transactionUtils'
 import DomainLink from '../../DomainLink'
 import { TransactionDescriptionProps } from '../types'
-import { AccountSet } from './types'
 import { Account } from '../../Account'
 
 export const Description = ({

src/containers/shared/components/Transaction/AccountSet/Simple.tsx

@@ -1,10 +1,10 @@
 import { useTranslation } from 'react-i18next'
+import type { AccountSet } from 'xrpl'
 import { ACCOUNT_FLAGS } from '../../../transactionUtils'
 import DomainLink from '../../DomainLink'
 import { Account } from '../../Account'
 import { SimpleRow } from '../SimpleRow'
 import { TransactionSimpleProps } from '../types'
-import { AccountSet } from './types'
 
 export const Simple = ({ data }: TransactionSimpleProps<AccountSet>) => {
   const { t } = useTranslation()

src/containers/shared/components/Transaction/AccountSet/TableDetail.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
+import type { AccountSet } from 'xrpl'
 import { ACCOUNT_FLAGS, decodeHex } from '../../../transactionUtils'
 import { Account } from '../../Account'
-import { AccountSet } from './types'
 import { TransactionTableDetailProps } from '../types'
 
 export const TableDetail = ({

src/containers/shared/components/Transaction/AccountSet/index.tsx

@@ -3,9 +3,7 @@ import {
   TransactionCategory,
   TransactionMapping,
 } from '../types'
-
 import { Description } from './Description'
-import { parser } from './parser'
 import { Simple } from './Simple'
 import { TableDetail } from './TableDetail'
 
@@ -15,5 +13,4 @@ export const AccountSetTransaction: TransactionMapping = {
   TableDetail,
   action: TransactionAction.MODIFY,
   category: TransactionCategory.ACCOUNT,
-  parser,
 }

src/containers/shared/components/Transaction/DepositPreauth/parser.ts

@@ -1,6 +1,5 @@
+import type { DepositPreauth } from 'xrpl'
 import { TransactionParser } from '../types'
 
-import { DepositPreauth } from './types'
-
 export const parser: TransactionParser<DepositPreauth, DepositPreauth> = (tx) =>
   tx

src/containers/shared/components/Transaction/EnableAmendment/index.ts

@@ -5,11 +5,9 @@ import {
 } from '../types'
 
 import { Simple } from './Simple'
-import { EnableAmendment } from './types'
 
 export const EnableAmendmentTransaction: TransactionMapping = {
   Simple,
   action: TransactionAction.MODIFY,
   category: TransactionCategory.PSEUDO,
-  parser: (tx: EnableAmendment): EnableAmendment => tx,
 }

src/containers/shared/components/Transaction/EscrowCancel/Description.tsx

@@ -1,4 +1,5 @@
 import { useTranslation, Trans } from 'react-i18next'
+import type { EscrowCancel } from 'xrpl'
 import { findNode, normalizeAmount } from '../../../transactionUtils'
 import { Account } from '../../Account'
 import {
@@ -9,12 +10,12 @@ import { TRANSACTION_ROUTE } from '../../../../App/routes'
 import { RouteLink } from '../../../routing'
 
 const Description: TransactionDescriptionComponent = (
-  props: TransactionDescriptionProps,
+  props: TransactionDescriptionProps<EscrowCancel>,
 ) => {
   const { t, i18n } = useTranslation()
   const language = i18n.resolvedLanguage
   const { data } = props
-  const deleted: any = findNode(data, 'DeletedNode', 'Escrow')
+  const deleted: any = findNode(data.meta, 'DeletedNode', 'Escrow')
   if (deleted == null) {
     return null
   }
@@ -39,7 +40,7 @@ const Description: TransactionDescriptionComponent = (
             (
             <b>
               {normalizeAmount(
-                deleted.FinalFields.Amount - data.tx.Fee,
+                deleted.FinalFields.Amount - parseInt(data.tx.Fee || '0', 10),
                 language,
               )}
               <small>XRP</small>

src/containers/shared/components/Transaction/EscrowCancel/parser.ts

@@ -1,15 +1,14 @@
+import type { EscrowCancel, TransactionMetadata } from 'xrpl'
 import { formatAmount } from '../../../../../rippled/lib/txSummary/formatAmount'
+import { findNode } from '../../../transactionUtils'
 
-const findNode = (meta: any) => {
-  const node = meta.AffectedNodes.filter(
-    (a: any) => a.DeletedNode && a.DeletedNode.LedgerEntryType === 'Escrow',
-  )[0]
-
-  return node ? node.DeletedNode.FinalFields : {}
+const findNodeFinalFields = (meta: TransactionMetadata) => {
+  const node = findNode(meta, 'DeletedNode', 'Escrow')
+  return node ? node.FinalFields : {}
 }
 
-export function parser(tx: any, meta: any) {
-  const escrow = findNode(meta)
+export function parser(tx: EscrowCancel, meta: TransactionMetadata) {
+  const escrow = findNodeFinalFields(meta)
 
   return {
     sequence: tx.OfferSequence,

src/containers/shared/components/Transaction/EscrowCreate/Description.tsx

@@ -1,32 +1,26 @@
 import { useTranslation, Trans } from 'react-i18next'
-import {
-  DATE_OPTIONS,
-  RIPPLE_EPOCH,
-  normalizeAmount,
-} from '../../../transactionUtils'
+import type { EscrowCreate } from 'xrpl'
+import { DATE_OPTIONS, normalizeAmount } from '../../../transactionUtils'
 import { Account } from '../../Account'
 import { localizeDate } from '../../../utils'
 import {
   TransactionDescriptionComponent,
   TransactionDescriptionProps,
 } from '../types'
+import { convertRippleDate } from '../../../../../rippled/lib/convertRippleDate'
 
 const Description: TransactionDescriptionComponent = (
-  props: TransactionDescriptionProps,
+  props: TransactionDescriptionProps<EscrowCreate>,
 ) => {
   const { t, i18n } = useTranslation()
   const language = i18n.resolvedLanguage
   const { data } = props
-  const cancelAfter = localizeDate(
-    (data.tx.CancelAfter + RIPPLE_EPOCH) * 1000,
-    language,
-    DATE_OPTIONS,
-  )
-  const finishAfter = localizeDate(
-    (data.tx.FinishAfter + RIPPLE_EPOCH) * 1000,
-    language,
-    DATE_OPTIONS,
-  )
+
+  const formatDate = (time: number) =>
+    `${localizeDate(convertRippleDate(time), language, DATE_OPTIONS)} ${
+      DATE_OPTIONS.timeZone
+    }`
+
   return (
     <>
       {data.tx.Destination !== data.tx.Account ? (
@@ -60,13 +54,13 @@ const Description: TransactionDescriptionComponent = (
       {data.tx.CancelAfter && (
         <div>
           {t('describe_cancel_after')}
-          <span className="time">{` ${cancelAfter} ${DATE_OPTIONS.timeZone}`}</span>
+          <span className="time"> {formatDate(data.tx.CancelAfter)}</span>
         </div>
       )}
       {data.tx.FinishAfter && (
         <div>
           {t('describe_finish_after')}
-          <span className="time">{` ${finishAfter} ${DATE_OPTIONS.timeZone}`}</span>
+          <span className="time"> {formatDate(data.tx.FinishAfter)}</span>
         </div>
       )}
     </>

src/containers/shared/components/Transaction/EscrowCreate/parser.ts

@@ -1,7 +1,8 @@
+import type { EscrowCreate } from 'xrpl'
 import { formatAmount } from '../../../../../rippled/lib/txSummary/formatAmount'
 import { convertRippleDate } from '../../../../../rippled/lib/convertRippleDate'
 
-export function parser(tx: any) {
+export function parser(tx: EscrowCreate) {
   return {
     amount: formatAmount(tx.Amount),
     destination: tx.Destination !== tx.Account ? tx.Destination : undefined,

src/containers/shared/components/Transaction/EscrowFinish/Description.tsx

@@ -1,4 +1,5 @@
 import { useTranslation, Trans } from 'react-i18next'
+import type { EscrowFinish } from 'xrpl'
 import { normalizeAmount, findNode } from '../../../transactionUtils'
 import { Account } from '../../Account'
 import {
@@ -9,12 +10,12 @@ import { RouteLink } from '../../../routing'
 import { TRANSACTION_ROUTE } from '../../../../App/routes'
 
 const Description: TransactionDescriptionComponent = (
-  props: TransactionDescriptionProps,
+  props: TransactionDescriptionProps<EscrowFinish>,
 ) => {
   const { t, i18n } = useTranslation()
   const language = i18n.resolvedLanguage
   const { data } = props
-  const deleted: any = findNode(data, 'DeletedNode', 'Escrow')
+  const deleted: any = findNode(data.meta, 'DeletedNode', 'Escrow')
 
   if (deleted == null) {
     return null
@@ -40,7 +41,7 @@ const Description: TransactionDescriptionComponent = (
             (
             <b>
               {normalizeAmount(
-                deleted.FinalFields.Amount - data.tx.Fee,
+                deleted.FinalFields.Amount - parseInt(data.tx.Fee || '0', 10),
                 language,
               )}
               <small>XRP</small>

src/containers/shared/components/Transaction/EscrowFinish/parser.ts

@@ -1,14 +1,14 @@
+import type { EscrowFinish, TransactionMetadata } from 'xrpl'
 import { formatAmount } from '../../../../../rippled/lib/txSummary/formatAmount'
+import { findNode } from '../../../transactionUtils'
 
-const findNode = (meta: any) => {
-  const node = meta.AffectedNodes.filter(
-    (a: any) => a.DeletedNode && a.DeletedNode.LedgerEntryType === 'Escrow',
-  )[0]
-
-  return node ? node.DeletedNode.FinalFields : {}
+const findNodeFinalFields = (meta: TransactionMetadata) => {
+  const node = findNode(meta, 'DeletedNode', 'Escrow')
+  return node ? node.FinalFields : {}
 }
-export function parser(tx: any, meta: any) {
-  const escrow = findNode(meta)
+
+export function parser(tx: EscrowFinish, meta: TransactionMetadata) {
+  const escrow = findNodeFinalFields(meta)
   return {
     sequence: tx.OfferSequence,
     owner: tx.Owner,

src/containers/shared/components/Transaction/NFTokenAcceptOffer/parser.ts

@@ -1,4 +1,5 @@
-import { NFTokenAcceptOffer, NFTokenAcceptOfferInstructions } from './types'
+import type { NFTokenAcceptOffer } from 'xrpl'
+import { NFTokenAcceptOfferInstructions } from './types'
 import { TransactionParser } from '../types'
 import { formatAmount } from '../../../../../rippled/lib/txSummary/formatAmount'
 

src/containers/shared/components/Transaction/NFTokenAcceptOffer/types.ts

@@ -1,12 +1,3 @@
-import { TransactionCommonFields } from '../types'
-import { Amount } from '../../../types'
-
-export interface NFTokenAcceptOffer extends TransactionCommonFields {
-  NFTokenSellOffer?: string
-  NFTokenBuyOffer?: string
-  NFTokenBrokerFee?: Amount
-}
-
 export interface NFTokenAcceptOfferInstructions {
   acceptedOfferIDs: string[]
   amount?: { currency: string; amount: number; issuer?: string }

src/containers/shared/components/Transaction/NFTokenBurn/Simple.tsx

@@ -1,24 +1,24 @@
 import { useTranslation } from 'react-i18next'
+import type { NFTokenBurn } from 'xrpl'
 import { SimpleRow } from '../SimpleRow'
 import { TransactionSimpleComponent, TransactionSimpleProps } from '../types'
-import { NFTokenBurnInstructions } from './types'
 import { NFTokenLink } from '../../NFTokenLink'
 import { Account } from '../../Account'
 
 export const Simple: TransactionSimpleComponent = ({
   data,
-}: TransactionSimpleProps<NFTokenBurnInstructions>) => {
-  const { tokenID, owner } = data.instructions
+}: TransactionSimpleProps<NFTokenBurn>) => {
+  const { NFTokenID, Owner } = data.instructions
   const { t } = useTranslation()
 
   return (
     <>
       <SimpleRow label={t('token_id')} className="dt" data-test="token-id">
-        <NFTokenLink tokenID={tokenID} />
+        <NFTokenLink tokenID={NFTokenID} />
       </SimpleRow>
-      {owner && (
+      {Owner && (
         <SimpleRow label={t('owner')} data-test="owner">
-          <Account account={owner} />
+          <Account account={Owner} />
         </SimpleRow>
       )}
     </>

src/containers/shared/components/Transaction/NFTokenBurn/index.ts

@@ -5,11 +5,9 @@ import {
 } from '../types'
 
 import { Simple } from './Simple'
-import { parser } from './parser'
 
 export const NFTokenBurnTransaction: TransactionMapping = {
   Simple,
   action: TransactionAction.CANCEL,
   category: TransactionCategory.NFT,
-  parser,
 }

src/containers/shared/components/Transaction/NFTokenCancelOffer/parser.ts

@@ -1,4 +1,5 @@
-import { NFTokenCancelOffer, NFTokenCancelOfferInstructions } from './types'
+import type { NFTokenCancelOffer } from 'xrpl'
+import { NFTokenCancelOfferInstructions } from './types'
 import { TransactionParser } from '../types'
 import { formatAmount } from '../../../../../rippled/lib/txSummary/formatAmount'