feat: add AMMClawback support (#1127)

## High Level Overview of Change

<!--
Please include a summary/list of the changes.
If too broad, please consider splitting into multiple PRs.
-->
Add AMMClawback transaction.
Spec:
https://github.com/XRPLF/XRPL-Standards/tree/master/XLS-0073-amm-clawback

### Type of Change

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

- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Refactor (non-breaking change that only restructures code)
- [ ] Tests (You added tests for code that already exists, or your new
feature included in this PR)
- [ ] Documentation Updates
- [ ] Translation Updates
- [ ] Release

## Before / After

<!--
If just refactoring / back-end changes, this can be just an in-English
description of the change at a technical level.
If a UI change, screenshots should be included.
-->

Simple page (without tfClawTwoAssets Flag)

<img width="1038" alt="Screenshot 2025-02-19 at 2 00 06 PM"
src="https://github.com/user-attachments/assets/fcf40db7-daa3-4002-8041-b544c273b45c"
/>

Simple page (with tfClawTwoAssets Flag)

<img width="1030" alt="Screenshot 2025-02-19 at 2 00 35 PM"
src="https://github.com/user-attachments/assets/066b1488-eb9b-43fb-9355-5dadcad9bffe"
/>

TableDetail (without tfClawTwoAssets Flag)

<img width="1325" alt="Screenshot 2025-02-19 at 2 01 53 PM"
src="https://github.com/user-attachments/assets/f2ed5dd9-fee5-49ca-b2b5-ef439dfd03be"
/>


TableDetail (with tfClawTwoAssets Flag)

<img width="1330" alt="Screenshot 2025-02-19 at 2 01 40 PM"
src="https://github.com/user-attachments/assets/2a5f9958-7a76-42f0-b51a-3e8e9a7e26a9"
/>

public/locales/ca-CA/translations.json

@@ -153,6 +153,7 @@
   "transaction_type_name_AMMWithdraw": "Treure AMM",
   "transaction_type_name_AMMVote": "Votar AMM",
   "transaction_type_name_AMMBid": "Pujar AMM",
+  "transaction_type_name_AMMClawback": null,
   "transaction_type_name_AccountSet": "Account Set",
   "transaction_type_name_CheckCancel": "Cancel·lar Check",
   "transaction_type_name_CheckCash": "Cobrar Check",
@@ -560,5 +561,6 @@
   "search_results_banner": null,
   "enable_amendment_name": null,
   "amendment_status": null,
-  "expected_date": null
+  "expected_date": null,
+  "action_from_and": null
 }

public/locales/en-US/translations.json

@@ -156,6 +156,7 @@
   "transaction_type_name_AMMWithdraw": "AMM Withdraw",
   "transaction_type_name_AMMVote": "AMM Vote",
   "transaction_type_name_AMMBid": "AMM Bid",
+  "transaction_type_name_AMMClawback": "AMMClawback",
   "transaction_type_name_AccountSet": "Account Set",
   "transaction_type_name_CheckCancel": "Check Cancel",
   "transaction_type_name_CheckCash": "Check Cash",
@@ -490,6 +491,7 @@
   "min_signer_quorum": "Minimum weight <0>{{quorum}}</0> required",
   "holder": "Holder",
   "action_from": "<0><0>{{action}}</0></0> <1><0>{{amount}}</0></1> from <3><0>{{destination}}</0></3>",
+  "action_from_and": "<0><0>{{action}}</0></0> <1><0>{{amount1}}</0></1> and <3><0>{{amount2}}</0></3> from <5><0>{{destination}}</0></5>",
   "claws_back": "Claws back",
   "claws_back_from": "<source/> claws back from <destination/>",
   "instruct_to_claw": "The max clawback amount is <amount/>",
@@ -561,5 +563,4 @@
   "enable_amendment_name": "Amendment Name",
   "amendment_status": "Amendment Status",
   "expected_date": "Expected Date"
-
 }

public/locales/es-ES/translations.json

@@ -153,6 +153,7 @@
   "transaction_type_name_AMMWithdraw": "Retirar AMM ",
   "transaction_type_name_AMMVote": "Votar AMM",
   "transaction_type_name_AMMBid": "Puja AMM",
+  "transaction_type_name_AMMClawback": null,
   "transaction_type_name_AccountSet": "Configurar Cuenta",
   "transaction_type_name_CheckCancel": "Cancelar Cheque",
   "transaction_type_name_CheckCash": "Cobrar Cheque",
@@ -556,5 +557,6 @@
   "search_results_banner": null,
   "enable_amendment_name": null,
   "amendment_status": null,
-  "expected_date": null
+  "expected_date": null,
+  "action_from_and": null
 }

public/locales/fr-FR/translations.json

@@ -154,6 +154,7 @@
   "transaction_type_name_AMMWithdraw": "Retrait depuis un AMM",
   "transaction_type_name_AMMVote": "Vote AMM",
   "transaction_type_name_AMMBid": "Offre AMM créée",
+  "transaction_type_name_AMMClawback": null,
   "transaction_type_name_AccountSet": "Compte défini",
   "transaction_type_name_CheckCancel": "Chèque annulé",
   "transaction_type_name_CheckCash": "Chèque remis",
@@ -557,5 +558,6 @@
   "search_results_banner": null,
   "enable_amendment_name": null,
   "amendment_status": null,
-  "expected_date": null
+  "expected_date": null,
+  "action_from_and": null
 }

public/locales/ja-JP/translations.json

@@ -154,6 +154,7 @@
   "transaction_type_name_AMMWithdraw": "AMMからの引出",
   "transaction_type_name_AMMVote": "AMMへの投票",
   "transaction_type_name_AMMBid": "AMMへの入札",
+  "transaction_type_name_AMMClawback": null,
   "transaction_type_name_AccountSet": "アカウント設定",
   "transaction_type_name_CheckCancel": "チェックの取消",
   "transaction_type_name_CheckCash": "チェックの現金化",
@@ -556,5 +557,6 @@
   "search_results_banner": null,
   "enable_amendment_name": null,
   "amendment_status": null,
-  "expected_date": null
+  "expected_date": null,
+  "action_from_and": null
 }

public/locales/ko-KR/translations.json

@@ -156,6 +156,7 @@
   "transaction_type_name_AMMWithdraw": "AMM 출금",
   "transaction_type_name_AMMVote": "AMM 투표",
   "transaction_type_name_AMMBid": "AMM 입찰",
+  "transaction_type_name_AMMClawback": null,
   "transaction_type_name_AccountSet": "계정 설정",
   "transaction_type_name_CheckCancel": "수표 취소",
   "transaction_type_name_CheckCash": "수표 현금화",
@@ -554,5 +555,6 @@
   "search_results_banner": null,
   "enable_amendment_name": null,
   "amendment_status": null,
-  "expected_date": null
+  "expected_date": null,
+  "action_from_and": null
 }

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

@@ -0,0 +1,27 @@
+import { useTranslation } from 'react-i18next'
+import { TransactionSimpleProps } from '../types'
+import { SimpleRow } from '../SimpleRow'
+import { Account } from '../../Account'
+import { Amount } from '../../Amount'
+
+export const Simple = ({ data }: TransactionSimpleProps) => {
+  const { t } = useTranslation()
+  const { amount2, amount, holder } = data.instructions
+  return (
+    <>
+      <SimpleRow label={t('holder')} data-test="holder">
+        <Account account={holder} />
+      </SimpleRow>
+      {amount && (
+        <SimpleRow label={t('asset1')} data-test="asset1">
+          <Amount value={amount} displayIssuer />
+        </SimpleRow>
+      )}
+      {amount2 && (
+        <SimpleRow label={t('asset2')} data-test="asset2">
+          <Amount value={amount2} displayIssuer />
+        </SimpleRow>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,33 @@
+import { Trans, useTranslation } from 'react-i18next'
+import { Amount } from '../../Amount'
+import { Account } from '../../Account'
+import { TransactionTableDetailProps } from '../types'
+
+export const TableDetail = ({ instructions }: TransactionTableDetailProps) => {
+  const { t } = useTranslation()
+  const { amount2, amount, holder } = instructions
+  if (amount2) {
+    return (
+      <div className="amm-clawback">
+        <Trans i18nKey="action_from_and">
+          <span className="label">{t('claws_back')}</span>
+          <Amount value={amount} displayIssuer />
+          and
+          <Amount value={amount2} displayIssuer />
+          from
+          <Account account={holder} />
+        </Trans>
+      </div>
+    )
+  }
+  return (
+    <div className="amm-clawback">
+      <Trans i18nKey="action_from">
+        <span className="label">{t('claws_back')}</span>
+        <Amount value={amount} displayIssuer />
+        from
+        <Account account={holder} />
+      </Trans>
+    </div>
+  )
+}

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

@@ -0,0 +1,16 @@
+import { Simple } from './Simple'
+import {
+  TransactionAction,
+  TransactionCategory,
+  TransactionMapping,
+} from '../types'
+import { parser } from './parser'
+import { TableDetail } from './TableDetail'
+
+export const AMMClawback: TransactionMapping = {
+  TableDetail,
+  Simple,
+  action: TransactionAction.CANCEL,
+  category: TransactionCategory.DEX,
+  parser,
+}

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

@@ -0,0 +1,22 @@
+import { findAssetAmount } from '../../../metaParser'
+import { AMMClawback } from './types'
+
+export function parser(tx: AMMClawback, meta: any) {
+  const account = tx.Account
+  const holder = tx.Holder
+  const amount = findAssetAmount(meta, tx.Asset, tx)
+  if (tx.Flags) {
+    const amount2 = findAssetAmount(meta, tx.Asset2, tx)
+    return {
+      amount,
+      account,
+      amount2,
+      holder,
+    }
+  }
+  return {
+    amount,
+    account,
+    holder,
+  }
+}

src/containers/shared/components/Transaction/AMMClawback/test/AMMClawbackSimple.test.tsx

@@ -0,0 +1,49 @@
+import { expectSimpleRowNotToExist, expectSimpleRowText } from '../../test'
+
+import { createSimpleWrapperFactory } from '../../test/createWrapperFactory'
+import { Simple } from '../Simple'
+import mockAMMClawbackNoFlag from './mock_data/withoutFlag.json'
+import mockAMMClawbackWithAmount from './mock_data/withAmount.json'
+import mockAMMClawbackWithFlag from './mock_data/withFlag.json'
+
+const createWrapper = createSimpleWrapperFactory(Simple)
+
+describe('AMMClawback: Simple', () => {
+  it('renders without tfClawTwoAssets flag, only one asset should be clawed back', () => {
+    const wrapper = createWrapper(mockAMMClawbackNoFlag)
+    expectSimpleRowText(
+      wrapper,
+      'asset1',
+      '$260.00 USD.rGGjMesMUrRMP8ZkLZ2cZ5agzmFwBfT4f2',
+    )
+    expectSimpleRowNotToExist(wrapper, 'asset2')
+    expectSimpleRowText(wrapper, 'holder', 'rJk5n4egp7Th4Y4vxAMVAbf1ziuiFuVKiw')
+    wrapper.unmount()
+  })
+
+  it('renders with tfClawTwoAssets flag, both asset should be clawed back', () => {
+    const wrapper = createWrapper(mockAMMClawbackWithFlag)
+    expectSimpleRowText(
+      wrapper,
+      'asset1',
+      '$260.00 USD.rUuVtbgagFKjHPTxmN639XYVHLATnB6VNk',
+    )
+    expectSimpleRowText(
+      wrapper,
+      'asset2',
+      '100.00 YEN.rUuVtbgagFKjHPTxmN639XYVHLATnB6VNk',
+    )
+    expectSimpleRowText(wrapper, 'holder', 'r4eWC5DixP74dpk7FDzXcap1BJ2NaoUeZN')
+    wrapper.unmount()
+  })
+
+  it('renders with Amount set', () => {
+    const wrapper = createWrapper(mockAMMClawbackWithAmount)
+    expectSimpleRowText(
+      wrapper,
+      'asset1',
+      '$20.00 USD.rK2Du3gUmFbg5UFFHFq9LKywVuGbqNsyyi',
+    )
+    wrapper.unmount()
+  })
+})

src/containers/shared/components/Transaction/AMMClawback/test/AMMClawbackTableDetail.test.tsx

@@ -0,0 +1,44 @@
+import { createTableDetailWrapperFactory } from '../../test'
+import { TableDetail } from '../TableDetail'
+import AMMClawbackNoFlag from './mock_data/withoutFlag.json'
+import AMMClawbackWithFlag from './mock_data/withFlag.json'
+import mockAMMClawbackWithAmount from './mock_data/withAmount.json'
+
+const createWrapper = createTableDetailWrapperFactory(TableDetail)
+
+describe('AMMClawback: TableDetail', () => {
+  it('renders without tfClawTwoAssets flag, only one asset should be clawed back', () => {
+    const wrapper = createWrapper(AMMClawbackNoFlag)
+    expect(wrapper).toHaveText(
+      'claws_back' +
+        '$260.00 USD.rGGjMesMUrRMP8ZkLZ2cZ5agzmFwBfT4f2' +
+        'from' +
+        'rJk5n4egp7Th4Y4vxAMVAbf1ziuiFuVKiw',
+    )
+    wrapper.unmount()
+  })
+
+  it('renders without tfClawTwoAssets flag, both assets should be clawed back', () => {
+    const wrapper = createWrapper(AMMClawbackWithFlag)
+    expect(wrapper).toHaveText(
+      'claws_back' +
+        '$260.00 USD.rUuVtbgagFKjHPTxmN639XYVHLATnB6VNk' +
+        'and' +
+        '100.00 YEN.rUuVtbgagFKjHPTxmN639XYVHLATnB6VNk' +
+        'from' +
+        'r4eWC5DixP74dpk7FDzXcap1BJ2NaoUeZN',
+    )
+    wrapper.unmount()
+  })
+
+  it('renders with Amount set', () => {
+    const wrapper = createWrapper(mockAMMClawbackWithAmount)
+    expect(wrapper).toHaveText(
+      'claws_back' +
+        '$20.00 USD.rK2Du3gUmFbg5UFFHFq9LKywVuGbqNsyyi' +
+        'from' +
+        'rJbLyxGA3jvwrFmiouADLHMKaBQn46SVZi',
+    )
+    wrapper.unmount()
+  })
+})