feat: Add AMMDelete Transaction (#810)

Adds the `AMMDelete` transaction and corresponding pages / views

### Context of Change

Added as part of the AMM changes for the explorer.

### Type of Change

<!--
Please check relevant options, delete irrelevant ones.
-->

- [X] New feature (non-breaking change which adds functionality)

## Before / After

Simple:

![image](https://github.com/ripple/explorer/assets/19694186/dc324022-52df-488b-aee6-2d4174f54ccf)

Detailed:

![image](https://github.com/ripple/explorer/assets/19694186/d9ae6eab-73b0-4e7e-9e92-dbc8948b2e3f)

TableView: (You can get here by clicking the account for the `AMMDelete`
transaction)

![image](https://github.com/ripple/explorer/assets/19694186/4fc482bc-8203-4a49-97f3-281924c6818e)

## Test Plan

Added SimplePage CI 

You can also inspect the changes in the preview by going to this
extension on the AMM Devnet to see an AMMDelete transaction in action:
accounts/rm5c42Crqpdch5fbuCdHmSMV1wrL9arV9

package.json

@@ -112,7 +112,7 @@
     "ts-jest": "^26.5.6",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.4",
-    "xrpl": "^2.8.1"
+    "xrpl": "^2.10.0"
   },
   "resolutions": {
     "jest-environment-jsdom": "29.3.1"

public/locales/en-US/translations.json

@@ -122,6 +122,8 @@
   "the_channel_amount_is": "The channel amount is",
   "update_payment_channel": "It will update the payment channel",
   "the_channel_balance_is": "The channel balance claimed is",
+  "amm_delete_description": "Attempted to delete the AMM for <Asset/> and <Asset2/>.",
+  "amm_delete_description_caveat": "If there were more than 512 trustlines, this only removes 512 trustlines instead.",
   "payment_channel_closed_description": "The payment channel will be closed, any remaining balance will be returned to the source account",
   "set_signer_list_description": "It sets the minimum signer quorum at {{quorum}} with the following list of signers",
   "unset_signer_list_description": "It removed all signers from the account",

src/containers/shared/components/Currency.tsx

@@ -25,6 +25,7 @@ const Currency = (props: Props) => {
     shortenIssuer = false,
     displaySymbol = true,
   } = props
+
   const LPTokenIdentifier = '03'
   const currencyCode =
     currency?.length === NON_STANDARD_CODE_LENGTH &&

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

@@ -0,0 +1,31 @@
+import { Trans } from 'react-i18next'
+import { type AMMDelete } from 'xrpl'
+import { TransactionDescriptionProps } from '../types'
+import Currency from '../../Currency'
+
+export const Description = ({
+  data,
+}: TransactionDescriptionProps<AMMDelete>) => {
+  const { Asset, Asset2 } = data.tx
+
+  return (
+    <div data-test="amm-delete-description">
+      <Trans
+        i18nKey="amm_delete_description"
+        components={{
+          // @ts-expect-error -- Fixed by https://github.com/XRPLF/xrpl.js/pull/2451
+          Asset: <Currency currency={Asset.currency} issuer={Asset.issuer} />,
+          Asset2: (
+            <Currency
+              currency={Asset2.currency}
+              // @ts-expect-error -- Fixed by https://github.com/XRPLF/xrpl.js/pull/2451
+              issuer={Asset2.issuer}
+            />
+          ),
+        }}
+      />
+      <br />
+      <Trans i18nKey="amm_delete_description_caveat" />
+    </div>
+  )
+}

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

@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next'
+
+import { type AMMDelete } from 'xrpl'
+import { SimpleRow } from '../SimpleRow'
+import { TransactionSimpleProps } from '../types'
+import Currency from '../../Currency'
+
+export const Simple = ({ data }: TransactionSimpleProps<AMMDelete>) => {
+  const { t } = useTranslation()
+  const { Asset, Asset2 } = data.instructions
+
+  return (
+    <>
+      <SimpleRow label={t('asset1')} data-test="asset1">
+        {/* @ts-expect-error -- Fixed by https://github.com/XRPLF/xrpl.js/pull/2451 */}
+        <Currency currency={Asset.currency} issuer={Asset.issuer} />
+      </SimpleRow>
+      <SimpleRow label={t('asset2')} data-test="asset2">
+        {/* @ts-expect-error -- Fixed by https://github.com/XRPLF/xrpl.js/pull/2451 */}
+        <Currency currency={Asset2.currency} issuer={Asset2.issuer} />
+      </SimpleRow>
+    </>
+  )
+}

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

@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next'
+import { type AMMDelete } from 'xrpl'
+import { TransactionTableDetailProps } from '../types'
+import Currency from '../../Currency'
+
+export const TableDetail = ({
+  instructions,
+}: TransactionTableDetailProps<AMMDelete>) => {
+  const { t } = useTranslation()
+  const { Asset, Asset2 } = instructions
+
+  return (
+    <div className="ammDelete">
+      <div data-test="asset">
+        <span className="label">{t('asset')}</span>
+        <Currency currency={Asset.currency} issuer={(Asset as any).issuer} />
+      </div>
+      <div data-test="asset2">
+        <span className="label">{t('asset2')}</span>
+        <Currency currency={Asset2.currency} issuer={(Asset2 as any).issuer} />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,19 @@
+import { type AMMDelete } from 'xrpl'
+import {
+  TransactionAction,
+  TransactionCategory,
+  TransactionMapping,
+} from '../types'
+import { Description } from './Description'
+
+import { Simple } from './Simple'
+import { TableDetail } from './TableDetail'
+
+export const AMMDeleteTransaction: TransactionMapping = {
+  Description,
+  TableDetail,
+  Simple,
+  action: TransactionAction.CANCEL,
+  category: TransactionCategory.DEX,
+  parser: (tx: AMMDelete): AMMDelete => tx,
+}

src/containers/shared/components/Transaction/AMMDelete/test/AMMDeleteDescription.test.tsx

@@ -0,0 +1,22 @@
+import i18n from '../../../../../../i18n/testConfigEnglish'
+import mockAMMDelete from './mock_data/AMMDelete.json'
+import { Description } from '../Description'
+import { createDescriptionWrapperFactory } from '../../test'
+
+const createWrapper = createDescriptionWrapperFactory(Description, i18n)
+
+describe('AMMDelete: Description', () => {
+  it('renders description for AMMDelete transaction', () => {
+    const wrapper = createWrapper(mockAMMDelete)
+
+    expect(wrapper.find('[data-test="amm-delete-description"]')).toHaveText(
+      'Attempted to delete the AMM for \uE900 XRP and FOO.rm5c42Crqpdch5fbuCdHmSMV1wrL9arV9.If there were more than 512 trustlines, this only removes 512 trustlines instead.',
+    )
+    expect(wrapper.find('a')).toHaveProp(
+      'href',
+      '/token/FOO.rm5c42Crqpdch5fbuCdHmSMV1wrL9arV9',
+    )
+
+    wrapper.unmount()
+  })
+})

src/containers/shared/components/Transaction/AMMDelete/test/AMMDeleteSimple.test.tsx

@@ -0,0 +1,21 @@
+import i18n from '../../../../../../i18n/testConfigEnglish'
+import { expectSimpleRowText } from '../../test'
+
+import { createSimpleWrapperFactory } from '../../test/createWrapperFactory'
+import { Simple } from '../Simple'
+import mockAMMDelete from './mock_data/AMMDelete.json'
+
+const createWrapper = createSimpleWrapperFactory(Simple, i18n)
+
+describe('AMMDelete: Simple', () => {
+  it('renders', () => {
+    const wrapper = createWrapper(mockAMMDelete) // TOOD: - Make this look up asset 1 / asset 2 currency codes
+    expectSimpleRowText(wrapper, 'asset1', '\uE900 XRP')
+    expectSimpleRowText(
+      wrapper,
+      'asset2',
+      'FOO.rm5c42Crqpdch5fbuCdHmSMV1wrL9arV9',
+    )
+    wrapper.unmount()
+  })
+})

src/containers/shared/components/Transaction/AMMDelete/test/AMMDeleteTableDetail.test.tsx

@@ -0,0 +1,18 @@
+import { TableDetail } from '../TableDetail'
+import mockAMMDelete from './mock_data/AMMDelete.json'
+import { createTableDetailWrapperFactory } from '../../test'
+import i18n from '../../../../../../i18n/testConfigEnglish'
+
+const createWrapper = createTableDetailWrapperFactory(TableDetail, i18n)
+
+describe('AMMDelete: TableDetail', () => {
+  it('renders with an expiration and offer', () => {
+    const wrapper = createWrapper(mockAMMDelete)
+
+    expect(wrapper.find('[data-test="asset"]')).toHaveText('asset\uE900 XRP')
+    expect(wrapper.find('[data-test="asset2"]')).toHaveText(
+      'Asset 2FOO.rm5c42Crqpdch5fbuCdHmSMV1wrL9arV9',
+    )
+    wrapper.unmount()
+  })
+})

src/containers/shared/components/Transaction/AMMDelete/test/mock_data/AMMDelete.json

@@ -0,0 +1,48 @@
+{
+  "tx": {
+    "Account": "rm5c42Crqpdch5fbuCdHmSMV1wrL9arV9",
+    "Asset": {
+      "currency": "XRP"
+    },
+    "Asset2": {
+      "currency": "FOO",
+      "issuer": "rm5c42Crqpdch5fbuCdHmSMV1wrL9arV9"
+    },
+    "Fee": "12",
+    "Flags": 0,
+    "LastLedgerSequence": 372572,
+    "Sequence": 372548,
+    "SigningPubKey": "ED6784394D134E202BCCD957A1A3C5A66647092F3929D388A878A16D1910875435",
+    "TransactionType": "AMMDelete",
+    "TxnSignature": "F9AA459D8CE593E6E2E69BB6A6F723A4822FD5F40314F642FA9EC5187F7FD937FBD3E8A214119D04C74358A3478DCB6EAABE02EFAC1E6E125E15310E18A36D0D",
+    "date": 1693268101000
+  },
+  "meta": {
+    "AffectedNodes": [
+      {
+        "ModifiedNode": {
+          "FinalFields": {
+            "Account": "rm5c42Crqpdch5fbuCdHmSMV1wrL9arV9",
+            "Balance": "9997998976",
+            "Flags": 8388608,
+            "OwnerCount": 1,
+            "Sequence": 372549
+          },
+          "LedgerEntryType": "AccountRoot",
+          "LedgerIndex": "84CA74ECFDB34F014142013B4CD2FBE3942C7BA9BA7E1FC5A1CB1EF719173812",
+          "PreviousFields": {
+            "Balance": "9997998988",
+            "Sequence": 372548
+          },
+          "PreviousTxnID": "E5051DA09F143A719521D6ABBB3856EA3E2CA38EF1CFF0E7DF9FE1C31DD73B6D",
+          "PreviousTxnLgrSeq": 372552
+        }
+      }
+    ],
+    "TransactionIndex": 0,
+    "TransactionResult": "tecAMM_NOT_EMPTY"
+  },
+  "hash": "D159883D456646562F51F3E5A2754F7D880D39A6372EDF679A43A7DDB77F735C",
+  "ledger_index": 372554,
+  "date": 1693268101000
+}