From a38d48662388d810229042d7036bbb837c969cb2 Mon Sep 17 00:00:00 2001 From: pandablue0809 Date: Thu, 31 Jul 2025 03:28:30 +0900 Subject: [PATCH 01/10] add amount and asset --- components/Transaction/TransactionAmm.js | 131 ++++++++++++++++++++++- 1 file changed, 128 insertions(+), 3 deletions(-) diff --git a/components/Transaction/TransactionAmm.js b/components/Transaction/TransactionAmm.js index 523feabf8..3ce4e2036 100644 --- a/components/Transaction/TransactionAmm.js +++ b/components/Transaction/TransactionAmm.js @@ -1,7 +1,7 @@ import { TData } from '../Table' import { TransactionCard } from './TransactionCard' -import { AddressWithIconFilled } from '../../utils/format' +import { AddressWithIconFilled, addressUsernameOrServiceLink, amountFormat, niceCurrency } from '../../utils/format' import { divide } from '../../utils/calc' // AMM Flag definitions based on XRPL documentation @@ -24,6 +24,34 @@ const AMMDepositFlags = { twoAssetIfEmpty: 'Perform a special double-asset deposit to an AMM with an empty pool' } +// Helper function to render amount with issuer +const renderAmountWithIssuer = (amountData) => ( + <> + {amountFormat(amountData)} + {amountData.issuer && ( + <> + {'('} + {addressUsernameOrServiceLink(amountData, 'issuer', { short: true })} + {')'} + + )} + +) + +// Helper function to render asset with issuer +const renderAssetWithIssuer = (assetData) => ( + <> + {niceCurrency(assetData.currency)} + {assetData.issuer && ( + <> + {'('} + {addressUsernameOrServiceLink(assetData, 'issuer', { short: true })} + {')'} + + )} + +) + // Component to display AMM flags with tooltips const AMMFlags = ({ flags, txType }) => { if (!flags || typeof flags !== 'object') return '' @@ -89,10 +117,41 @@ const AMMFlags = ({ flags, txType }) => { export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { if (!data) return null - const { specification, tx } = data + const { specification, tx, outcome } = data const txType = tx.TransactionType const tradingFee = tx?.TradingFee - + const amount = { + currency: specification?.amount?.currency, + issuer: specification?.amount?.issuer, + issuerDetails: outcome?.balanceChanges?.find((change) => change.address === specification.source.address)?.balanceChanges?.find((change) => change.currency === specification?.amount?.currency)?.issuerDetails, + value: specification?.amount?.value + } + const amount2 = { + currency: specification?.amount2?.currency, + issuer: specification?.amount2?.issuer, + issuerDetails: outcome?.balanceChanges?.find((change) => change.address === specification.source.address)?.balanceChanges?.find((change) => change.currency === specification?.amount2?.currency)?.issuerDetails, + value: specification?.amount2?.value + } + const asset = specification?.asset + const asset2 = specification?.asset2 + const ePrice = specification?.EPrice + const lpTokenOut = specification?.LPTokenOut + const lpTokenIn = specification?.LPTokenIn + const bidMax = { + counterparty: specification?.bidMax?.counterparty, + currency: specification?.bidMax?.currency, + issuer: specification?.bidMax?.issuer, + issuerDetails: outcome?.balanceChanges?.find((change) => change.address === specification.source.address)?.balanceChanges?.find((change) => change.currency === specification?.bidMax?.currency)?.issuerDetails, + value: specification?.bidMax?.value + } + const bidMin = { + counterparty: specification?.bidMin?.counterparty, + currency: specification?.bidMin?.currency, + issuer: specification?.bidMin?.issuer, + issuerDetails: outcome?.balanceChanges?.find((change) => change.address === specification.source.address)?.balanceChanges?.find((change) => change.currency === specification?.bidMin?.currency)?.issuerDetails, + value: specification?.bidMin?.value + } + console.log(data) return ( { + {asset && ( + + Asset + + {renderAssetWithIssuer(asset)} + + + )} + {asset2 && ( + + Asset 2 + + {renderAssetWithIssuer(asset2)} + + + )} + {amount?.currency && amount?.value && ( + + Amount + + {renderAmountWithIssuer(amount)} + + + )} + {amount2?.currency && amount2?.value && ( + + Amount 2 + + {renderAmountWithIssuer(amount2)} + + + )} + {ePrice && ( + + EPrice + {ePrice} + + )} + {lpTokenIn && ( + + LP Token In + {lpTokenIn} + + )} + {lpTokenOut && ( + + LP Token Out + {lpTokenOut} + + )} + {bidMax?.currency && bidMax?.value && ( + + Bid Max + + {renderAmountWithIssuer(bidMax)} + + + )} + {bidMin?.currency && bidMin?.value && ( + + Bid Min + + {renderAmountWithIssuer(bidMin)} + + + )} {tradingFee ? ( Trading fee From ed5ffb0e0a6d877413fd1c9887087c1f2b82113d Mon Sep 17 00:00:00 2001 From: pandablue0809 Date: Thu, 31 Jul 2025 05:55:11 +0900 Subject: [PATCH 02/10] add ammdelet, ammClawback --- components/Transaction/TransactionAmm.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/components/Transaction/TransactionAmm.js b/components/Transaction/TransactionAmm.js index 3ce4e2036..b39aa1347 100644 --- a/components/Transaction/TransactionAmm.js +++ b/components/Transaction/TransactionAmm.js @@ -24,6 +24,10 @@ const AMMDepositFlags = { twoAssetIfEmpty: 'Perform a special double-asset deposit to an AMM with an empty pool' } +const AMMClawbackFlags = { + tfClawTwoAssets: 'Claw back the specified amount of Asset, and a corresponding amount of Asset2 based on the AMM pool\'s asset proportion', +} + // Helper function to render amount with issuer const renderAmountWithIssuer = (amountData) => ( <> @@ -61,6 +65,8 @@ const AMMFlags = ({ flags, txType }) => { Object.assign(flagDefinitions, AMMWithdrawFlags) } else if (txType === 'AMMDeposit') { Object.assign(flagDefinitions, AMMDepositFlags) + } else if (txType === 'AMMClawback') { + Object.assign(flagDefinitions, AMMClawbackFlags) } const activeFlags = [] @@ -151,7 +157,11 @@ export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { issuerDetails: outcome?.balanceChanges?.find((change) => change.address === specification.source.address)?.balanceChanges?.find((change) => change.currency === specification?.bidMin?.currency)?.issuerDetails, value: specification?.bidMin?.value } - console.log(data) + const holder = { + address: specification?.holder, + addressDetails: outcome?.balanceChanges?.find((change) => change.address === specification.holder)?.addressDetails, + } + return ( { )} + {holder?.address && ( + + Holder + + + )} {tradingFee ? ( Trading fee From 6c51399d9c3d933c08798147929e722b4784dd91 Mon Sep 17 00:00:00 2001 From: pandablue0809 Date: Sat, 2 Aug 2025 00:05:13 +0900 Subject: [PATCH 03/10] refactor --- components/Transaction/TransactionAMM.js | 1 + components/Transaction/TransactionAmm.js | 44 ++++++++++-------------- 2 files changed, 19 insertions(+), 26 deletions(-) create mode 100644 components/Transaction/TransactionAMM.js diff --git a/components/Transaction/TransactionAMM.js b/components/Transaction/TransactionAMM.js new file mode 100644 index 000000000..0519ecba6 --- /dev/null +++ b/components/Transaction/TransactionAMM.js @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/Transaction/TransactionAmm.js b/components/Transaction/TransactionAmm.js index b39aa1347..9a7511e36 100644 --- a/components/Transaction/TransactionAmm.js +++ b/components/Transaction/TransactionAmm.js @@ -28,6 +28,20 @@ const AMMClawbackFlags = { tfClawTwoAssets: 'Claw back the specified amount of Asset, and a corresponding amount of Asset2 based on the AMM pool\'s asset proportion', } +// Helper function to create amount object with issuer details +const createAmountWithIssuer = (specification, outcome, sourceAddress, amountKey) => { + const amountData = specification?.[amountKey] + if (!amountData) return null + + return { + currency: amountData.currency, + issuer: amountData.issuer, + counterparty: amountData.counterparty, + issuerDetails: outcome?.balanceChanges?.find((change) => change.address === sourceAddress)?.balanceChanges?.find((change) => change.currency === amountData.currency)?.issuerDetails, + value: amountData.value + } +} + // Helper function to render amount with issuer const renderAmountWithIssuer = (amountData) => ( <> @@ -126,37 +140,15 @@ export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { const { specification, tx, outcome } = data const txType = tx.TransactionType const tradingFee = tx?.TradingFee - const amount = { - currency: specification?.amount?.currency, - issuer: specification?.amount?.issuer, - issuerDetails: outcome?.balanceChanges?.find((change) => change.address === specification.source.address)?.balanceChanges?.find((change) => change.currency === specification?.amount?.currency)?.issuerDetails, - value: specification?.amount?.value - } - const amount2 = { - currency: specification?.amount2?.currency, - issuer: specification?.amount2?.issuer, - issuerDetails: outcome?.balanceChanges?.find((change) => change.address === specification.source.address)?.balanceChanges?.find((change) => change.currency === specification?.amount2?.currency)?.issuerDetails, - value: specification?.amount2?.value - } + const amount = createAmountWithIssuer(specification, outcome, specification.source.address, 'amount') + const amount2 = createAmountWithIssuer(specification, outcome, specification.source.address, 'amount2') const asset = specification?.asset const asset2 = specification?.asset2 const ePrice = specification?.EPrice const lpTokenOut = specification?.LPTokenOut const lpTokenIn = specification?.LPTokenIn - const bidMax = { - counterparty: specification?.bidMax?.counterparty, - currency: specification?.bidMax?.currency, - issuer: specification?.bidMax?.issuer, - issuerDetails: outcome?.balanceChanges?.find((change) => change.address === specification.source.address)?.balanceChanges?.find((change) => change.currency === specification?.bidMax?.currency)?.issuerDetails, - value: specification?.bidMax?.value - } - const bidMin = { - counterparty: specification?.bidMin?.counterparty, - currency: specification?.bidMin?.currency, - issuer: specification?.bidMin?.issuer, - issuerDetails: outcome?.balanceChanges?.find((change) => change.address === specification.source.address)?.balanceChanges?.find((change) => change.currency === specification?.bidMin?.currency)?.issuerDetails, - value: specification?.bidMin?.value - } + const bidMax = createAmountWithIssuer(specification, outcome, specification.source.address, 'bidMax') + const bidMin = createAmountWithIssuer(specification, outcome, specification.source.address, 'bidMin') const holder = { address: specification?.holder, addressDetails: outcome?.balanceChanges?.find((change) => change.address === specification.holder)?.addressDetails, From cfcf2dcb47cc6cdfda3ac7c8aaf5e7213215629b Mon Sep 17 00:00:00 2001 From: Viacheslav Bakshaev Date: Mon, 4 Aug 2025 07:52:17 +0300 Subject: [PATCH 04/10] prettify --- components/Transaction/TransactionAMM.js | 254 ++++++++++++++++++++++- components/Transaction/TransactionAmm.js | 39 ++-- 2 files changed, 269 insertions(+), 24 deletions(-) diff --git a/components/Transaction/TransactionAMM.js b/components/Transaction/TransactionAMM.js index 0519ecba6..3cd660d5b 100644 --- a/components/Transaction/TransactionAMM.js +++ b/components/Transaction/TransactionAMM.js @@ -1 +1,253 @@ - \ No newline at end of file +import { TData } from '../Table' + +import { TransactionCard } from './TransactionCard' +import { AddressWithIconFilled, addressUsernameOrServiceLink, amountFormat, niceCurrency } from '../../utils/format' +import { divide } from '../../utils/calc' + +// AMM Flag definitions based on XRPL documentation +const AMMWithdrawFlags = { + lpToken: 'Perform a double-asset withdrawal and receive the specified amount of LP Tokens', + withdrawAll: 'Perform a double-asset withdrawal returning all your LP Tokens', + oneAssetWithdrawAll: 'Perform a single-asset withdrawal returning all of your LP Tokens', + singleAsset: 'Perform a single-asset withdrawal with a specified amount of the asset to withdraw', + twoAsset: 'Perform a double-asset withdrawal with specified amounts of both assets', + oneAssetLPToken: 'Perform a single-asset withdrawal and receive the specified amount of LP Tokens', + limitLPToken: 'Perform a single-asset withdrawal with a specified effective price' +} + +const AMMDepositFlags = { + lpToken: 'Perform a double-asset deposit and receive the specified amount of LP Tokens', + singleAsset: 'Perform a single-asset deposit with a specified amount of the asset to deposit', + twoAsset: 'Perform a double-asset deposit with specified amounts of both assets', + oneAssetLPToken: 'Perform a single-asset deposit and receive the specified amount of LP Tokens', + limitLPToken: 'Perform a single-asset deposit with a specified effective price', + twoAssetIfEmpty: 'Perform a special double-asset deposit to an AMM with an empty pool' +} + +const AMMClawbackFlags = { + tfClawTwoAssets: + "Claw back the specified amount of Asset, and a corresponding amount of Asset2 based on the AMM pool's asset proportion" +} + +// Helper function to create amount object with issuer details +const createAmountWithIssuer = (specification, outcome, sourceAddress, amountKey) => { + const amountData = specification?.[amountKey] + if (!amountData) return null + + return { + currency: amountData.currency, + issuer: amountData.issuer, + counterparty: amountData.counterparty, + issuerDetails: outcome?.balanceChanges + ?.find((change) => change.address === sourceAddress) + ?.balanceChanges?.find((change) => change.currency === amountData.currency)?.issuerDetails, + value: amountData.value + } +} + +// Helper function to render amount with issuer +const renderAmountWithIssuer = (amountData) => ( + <> + {amountFormat(amountData)} + {amountData.issuer && ( + <> + {'('} + {addressUsernameOrServiceLink(amountData, 'issuer', { short: true })} + {')'} + + )} + +) + +// Helper function to render asset with issuer +const renderAssetWithIssuer = (assetData) => ( + <> + {niceCurrency(assetData.currency)} + {assetData.issuer && ( + <> + {'('} + {addressUsernameOrServiceLink(assetData, 'issuer', { short: true })} + {')'} + + )} + +) + +// Component to display AMM flags with tooltips +const AMMFlags = ({ flags, txType }) => { + if (!flags || typeof flags !== 'object') return '' + + const flagDefinitions = {} + if (txType === 'AMMWithdraw') { + Object.assign(flagDefinitions, AMMWithdrawFlags) + } else if (txType === 'AMMDeposit') { + Object.assign(flagDefinitions, AMMDepositFlags) + } else if (txType === 'AMMClawback') { + Object.assign(flagDefinitions, AMMClawbackFlags) + } + + const activeFlags = [] + + // Check each flag in the specification.flags object + Object.entries(flags).forEach(([flagName, isActive]) => { + if (isActive === true) { + activeFlags.push({ + name: flagName, + description: flagDefinitions[flagName] || '' + }) + } + }) + + if (activeFlags.length === 0) { + return None + } + + return ( + <> +
+ {activeFlags.map((flag) => ( +
+ {/* Desktop version with tooltip */} + + {flag.name} + {flag.description && {flag.description}} + + + {/* Mobile version with inline description */} +
+ {flag.name} + {flag.description && ({flag.description})} +
+
+ ))} +
+ + + ) +} + +export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { + if (!data) return null + const { specification, tx, outcome } = data + const txType = tx.TransactionType + const tradingFee = tx?.TradingFee + const amount = createAmountWithIssuer(specification, outcome, specification.source.address, 'amount') + const amount2 = createAmountWithIssuer(specification, outcome, specification.source.address, 'amount2') + const asset = specification?.asset + const asset2 = specification?.asset2 + const ePrice = specification?.EPrice + const lpTokenOut = specification?.LPTokenOut + const lpTokenIn = specification?.LPTokenIn + const bidMax = createAmountWithIssuer(specification, outcome, specification.source.address, 'bidMax') + const bidMin = createAmountWithIssuer(specification, outcome, specification.source.address, 'bidMin') + const holder = { + address: specification?.holder, + addressDetails: outcome?.balanceChanges?.find((change) => change.address === specification.holder)?.addressDetails + } + + return ( + + + Initiated by + + + + + {asset && ( + + Asset + {renderAssetWithIssuer(asset)} + + )} + {asset2 && ( + + Asset 2 + {renderAssetWithIssuer(asset2)} + + )} + {amount?.currency && amount?.value && ( + + Amount + {renderAmountWithIssuer(amount)} + + )} + {amount2?.currency && amount2?.value && ( + + Amount 2 + {renderAmountWithIssuer(amount2)} + + )} + {ePrice && ( + + EPrice + {ePrice} + + )} + {lpTokenIn && ( + + LP Token In + {lpTokenIn} + + )} + {lpTokenOut && ( + + LP Token Out + {lpTokenOut} + + )} + {bidMax?.currency && bidMax?.value && ( + + Bid Max + {renderAmountWithIssuer(bidMax)} + + )} + {bidMin?.currency && bidMin?.value && ( + + Bid Min + {renderAmountWithIssuer(bidMin)} + + )} + {holder?.address && ( + + Holder + + + + + )} + {tradingFee ? ( + + Trading fee + {divide(tradingFee, 100000)}% + + ) : ( + '' + )} + {specification?.flags && Object.entries(specification?.flags).length > 0 && ( + + Flags + + + + + )} + + ) +} diff --git a/components/Transaction/TransactionAmm.js b/components/Transaction/TransactionAmm.js index 9a7511e36..3cd660d5b 100644 --- a/components/Transaction/TransactionAmm.js +++ b/components/Transaction/TransactionAmm.js @@ -25,19 +25,22 @@ const AMMDepositFlags = { } const AMMClawbackFlags = { - tfClawTwoAssets: 'Claw back the specified amount of Asset, and a corresponding amount of Asset2 based on the AMM pool\'s asset proportion', + tfClawTwoAssets: + "Claw back the specified amount of Asset, and a corresponding amount of Asset2 based on the AMM pool's asset proportion" } // Helper function to create amount object with issuer details const createAmountWithIssuer = (specification, outcome, sourceAddress, amountKey) => { const amountData = specification?.[amountKey] if (!amountData) return null - + return { currency: amountData.currency, issuer: amountData.issuer, counterparty: amountData.counterparty, - issuerDetails: outcome?.balanceChanges?.find((change) => change.address === sourceAddress)?.balanceChanges?.find((change) => change.currency === amountData.currency)?.issuerDetails, + issuerDetails: outcome?.balanceChanges + ?.find((change) => change.address === sourceAddress) + ?.balanceChanges?.find((change) => change.currency === amountData.currency)?.issuerDetails, value: amountData.value } } @@ -151,7 +154,7 @@ export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { const bidMin = createAmountWithIssuer(specification, outcome, specification.source.address, 'bidMin') const holder = { address: specification?.holder, - addressDetails: outcome?.balanceChanges?.find((change) => change.address === specification.holder)?.addressDetails, + addressDetails: outcome?.balanceChanges?.find((change) => change.address === specification.holder)?.addressDetails } return ( @@ -170,33 +173,25 @@ export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { {asset && ( Asset - - {renderAssetWithIssuer(asset)} - + {renderAssetWithIssuer(asset)} )} {asset2 && ( Asset 2 - - {renderAssetWithIssuer(asset2)} - + {renderAssetWithIssuer(asset2)} )} {amount?.currency && amount?.value && ( Amount - - {renderAmountWithIssuer(amount)} - + {renderAmountWithIssuer(amount)} )} {amount2?.currency && amount2?.value && ( Amount 2 - - {renderAmountWithIssuer(amount2)} - + {renderAmountWithIssuer(amount2)} )} {ePrice && ( @@ -220,23 +215,21 @@ export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { {bidMax?.currency && bidMax?.value && ( Bid Max - - {renderAmountWithIssuer(bidMax)} - + {renderAmountWithIssuer(bidMax)} )} {bidMin?.currency && bidMin?.value && ( Bid Min - - {renderAmountWithIssuer(bidMin)} - + {renderAmountWithIssuer(bidMin)} )} {holder?.address && ( Holder - + + + )} {tradingFee ? ( From 222f798a3ef86f536921367f168fbf13fd4fac5a Mon Sep 17 00:00:00 2001 From: Viacheslav Bakshaev Date: Mon, 4 Aug 2025 08:19:23 +0300 Subject: [PATCH 05/10] Fix the namings - part 1 --- components/Transaction/TransactionAmm.js | 253 ------------------ .../{TransactionAMM.js => TransactionAmm2.js} | 0 2 files changed, 253 deletions(-) delete mode 100644 components/Transaction/TransactionAmm.js rename components/Transaction/{TransactionAMM.js => TransactionAmm2.js} (100%) diff --git a/components/Transaction/TransactionAmm.js b/components/Transaction/TransactionAmm.js deleted file mode 100644 index 3cd660d5b..000000000 --- a/components/Transaction/TransactionAmm.js +++ /dev/null @@ -1,253 +0,0 @@ -import { TData } from '../Table' - -import { TransactionCard } from './TransactionCard' -import { AddressWithIconFilled, addressUsernameOrServiceLink, amountFormat, niceCurrency } from '../../utils/format' -import { divide } from '../../utils/calc' - -// AMM Flag definitions based on XRPL documentation -const AMMWithdrawFlags = { - lpToken: 'Perform a double-asset withdrawal and receive the specified amount of LP Tokens', - withdrawAll: 'Perform a double-asset withdrawal returning all your LP Tokens', - oneAssetWithdrawAll: 'Perform a single-asset withdrawal returning all of your LP Tokens', - singleAsset: 'Perform a single-asset withdrawal with a specified amount of the asset to withdraw', - twoAsset: 'Perform a double-asset withdrawal with specified amounts of both assets', - oneAssetLPToken: 'Perform a single-asset withdrawal and receive the specified amount of LP Tokens', - limitLPToken: 'Perform a single-asset withdrawal with a specified effective price' -} - -const AMMDepositFlags = { - lpToken: 'Perform a double-asset deposit and receive the specified amount of LP Tokens', - singleAsset: 'Perform a single-asset deposit with a specified amount of the asset to deposit', - twoAsset: 'Perform a double-asset deposit with specified amounts of both assets', - oneAssetLPToken: 'Perform a single-asset deposit and receive the specified amount of LP Tokens', - limitLPToken: 'Perform a single-asset deposit with a specified effective price', - twoAssetIfEmpty: 'Perform a special double-asset deposit to an AMM with an empty pool' -} - -const AMMClawbackFlags = { - tfClawTwoAssets: - "Claw back the specified amount of Asset, and a corresponding amount of Asset2 based on the AMM pool's asset proportion" -} - -// Helper function to create amount object with issuer details -const createAmountWithIssuer = (specification, outcome, sourceAddress, amountKey) => { - const amountData = specification?.[amountKey] - if (!amountData) return null - - return { - currency: amountData.currency, - issuer: amountData.issuer, - counterparty: amountData.counterparty, - issuerDetails: outcome?.balanceChanges - ?.find((change) => change.address === sourceAddress) - ?.balanceChanges?.find((change) => change.currency === amountData.currency)?.issuerDetails, - value: amountData.value - } -} - -// Helper function to render amount with issuer -const renderAmountWithIssuer = (amountData) => ( - <> - {amountFormat(amountData)} - {amountData.issuer && ( - <> - {'('} - {addressUsernameOrServiceLink(amountData, 'issuer', { short: true })} - {')'} - - )} - -) - -// Helper function to render asset with issuer -const renderAssetWithIssuer = (assetData) => ( - <> - {niceCurrency(assetData.currency)} - {assetData.issuer && ( - <> - {'('} - {addressUsernameOrServiceLink(assetData, 'issuer', { short: true })} - {')'} - - )} - -) - -// Component to display AMM flags with tooltips -const AMMFlags = ({ flags, txType }) => { - if (!flags || typeof flags !== 'object') return '' - - const flagDefinitions = {} - if (txType === 'AMMWithdraw') { - Object.assign(flagDefinitions, AMMWithdrawFlags) - } else if (txType === 'AMMDeposit') { - Object.assign(flagDefinitions, AMMDepositFlags) - } else if (txType === 'AMMClawback') { - Object.assign(flagDefinitions, AMMClawbackFlags) - } - - const activeFlags = [] - - // Check each flag in the specification.flags object - Object.entries(flags).forEach(([flagName, isActive]) => { - if (isActive === true) { - activeFlags.push({ - name: flagName, - description: flagDefinitions[flagName] || '' - }) - } - }) - - if (activeFlags.length === 0) { - return None - } - - return ( - <> -
- {activeFlags.map((flag) => ( -
- {/* Desktop version with tooltip */} - - {flag.name} - {flag.description && {flag.description}} - - - {/* Mobile version with inline description */} -
- {flag.name} - {flag.description && ({flag.description})} -
-
- ))} -
- - - ) -} - -export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { - if (!data) return null - const { specification, tx, outcome } = data - const txType = tx.TransactionType - const tradingFee = tx?.TradingFee - const amount = createAmountWithIssuer(specification, outcome, specification.source.address, 'amount') - const amount2 = createAmountWithIssuer(specification, outcome, specification.source.address, 'amount2') - const asset = specification?.asset - const asset2 = specification?.asset2 - const ePrice = specification?.EPrice - const lpTokenOut = specification?.LPTokenOut - const lpTokenIn = specification?.LPTokenIn - const bidMax = createAmountWithIssuer(specification, outcome, specification.source.address, 'bidMax') - const bidMin = createAmountWithIssuer(specification, outcome, specification.source.address, 'bidMin') - const holder = { - address: specification?.holder, - addressDetails: outcome?.balanceChanges?.find((change) => change.address === specification.holder)?.addressDetails - } - - return ( - - - Initiated by - - - - - {asset && ( - - Asset - {renderAssetWithIssuer(asset)} - - )} - {asset2 && ( - - Asset 2 - {renderAssetWithIssuer(asset2)} - - )} - {amount?.currency && amount?.value && ( - - Amount - {renderAmountWithIssuer(amount)} - - )} - {amount2?.currency && amount2?.value && ( - - Amount 2 - {renderAmountWithIssuer(amount2)} - - )} - {ePrice && ( - - EPrice - {ePrice} - - )} - {lpTokenIn && ( - - LP Token In - {lpTokenIn} - - )} - {lpTokenOut && ( - - LP Token Out - {lpTokenOut} - - )} - {bidMax?.currency && bidMax?.value && ( - - Bid Max - {renderAmountWithIssuer(bidMax)} - - )} - {bidMin?.currency && bidMin?.value && ( - - Bid Min - {renderAmountWithIssuer(bidMin)} - - )} - {holder?.address && ( - - Holder - - - - - )} - {tradingFee ? ( - - Trading fee - {divide(tradingFee, 100000)}% - - ) : ( - '' - )} - {specification?.flags && Object.entries(specification?.flags).length > 0 && ( - - Flags - - - - - )} - - ) -} diff --git a/components/Transaction/TransactionAMM.js b/components/Transaction/TransactionAmm2.js similarity index 100% rename from components/Transaction/TransactionAMM.js rename to components/Transaction/TransactionAmm2.js From c2c53cc0e22e5b889623a86510ff9bd73dcfe325 Mon Sep 17 00:00:00 2001 From: Viacheslav Bakshaev Date: Mon, 4 Aug 2025 08:19:51 +0300 Subject: [PATCH 06/10] Fix naming - part 2 --- components/Transaction/{TransactionAmm2.js => TransactionAmm.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename components/Transaction/{TransactionAmm2.js => TransactionAmm.js} (100%) diff --git a/components/Transaction/TransactionAmm2.js b/components/Transaction/TransactionAmm.js similarity index 100% rename from components/Transaction/TransactionAmm2.js rename to components/Transaction/TransactionAmm.js From d69095ce0ce21add8ad64f6d8f8f87e8c38ed1c3 Mon Sep 17 00:00:00 2001 From: pandablue0809 Date: Wed, 6 Aug 2025 00:55:21 +0900 Subject: [PATCH 07/10] fix UI --- components/Transaction/TransactionAmm.js | 50 ++++++++++++++---------- 1 file changed, 30 insertions(+), 20 deletions(-) diff --git a/components/Transaction/TransactionAmm.js b/components/Transaction/TransactionAmm.js index 3cd660d5b..fbd580e0d 100644 --- a/components/Transaction/TransactionAmm.js +++ b/components/Transaction/TransactionAmm.js @@ -145,6 +145,7 @@ export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { const tradingFee = tx?.TradingFee const amount = createAmountWithIssuer(specification, outcome, specification.source.address, 'amount') const amount2 = createAmountWithIssuer(specification, outcome, specification.source.address, 'amount2') + const lpTokenBalance = createAmountWithIssuer(outcome?.ammChanges, outcome, specification.source.address, 'lpTokenBalance') const asset = specification?.asset const asset2 = specification?.asset2 const ePrice = specification?.EPrice @@ -169,31 +170,31 @@ export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { - - {asset && ( + + {(txType === 'AMMVote' || txType === 'AMMBid' || txType === 'AMMDelete') && asset && asset2 && ( - Asset - {renderAssetWithIssuer(asset)} - - )} - {asset2 && ( - - Asset 2 - {renderAssetWithIssuer(asset2)} + Liquidity pool + {renderAssetWithIssuer(asset)} / {renderAssetWithIssuer(asset2)} )} {amount?.currency && amount?.value && ( - Amount + Asset 1 {renderAmountWithIssuer(amount)} )} {amount2?.currency && amount2?.value && ( - Amount 2 + Asset 2 {renderAmountWithIssuer(amount2)} )} + {(txType === 'AMMCreat' || txType === 'AMMDeposit' || txType === 'AMMWithdraw') && lpTokenBalance?.currency && lpTokenBalance?.value && ( + + LP Token Balance + {renderAmountWithIssuer(lpTokenBalance)} + + )} {ePrice && ( EPrice @@ -212,17 +213,26 @@ export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { {lpTokenOut} )} - {bidMax?.currency && bidMax?.value && ( + {bidMax?.currency && bidMax?.value && bidMin?.currency && bidMin?.value && bidMax.value === bidMin.value ? ( - Bid Max + Bid {renderAmountWithIssuer(bidMax)} - )} - {bidMin?.currency && bidMin?.value && ( - - Bid Min - {renderAmountWithIssuer(bidMin)} - + ) : ( + <> + {bidMax?.currency && bidMax?.value && ( + + Bid Max + {renderAmountWithIssuer(bidMax)} + + )} + {bidMin?.currency && bidMin?.value && ( + + Bid Min + {renderAmountWithIssuer(bidMin)} + + )} + )} {holder?.address && ( From 183644449341e0f884f4f18c6b7c42fe4db55867 Mon Sep 17 00:00:00 2001 From: pandablue0809 Date: Thu, 14 Aug 2025 23:14:20 +0900 Subject: [PATCH 08/10] add deposit and received --- components/Transaction/TransactionAmm.js | 108 ++++++++++++++++++++++- 1 file changed, 104 insertions(+), 4 deletions(-) diff --git a/components/Transaction/TransactionAmm.js b/components/Transaction/TransactionAmm.js index fbd580e0d..42c137b5f 100644 --- a/components/Transaction/TransactionAmm.js +++ b/components/Transaction/TransactionAmm.js @@ -3,6 +3,7 @@ import { TData } from '../Table' import { TransactionCard } from './TransactionCard' import { AddressWithIconFilled, addressUsernameOrServiceLink, amountFormat, niceCurrency } from '../../utils/format' import { divide } from '../../utils/calc' +import { addressBalanceChanges } from '../../utils/transaction' // AMM Flag definitions based on XRPL documentation const AMMWithdrawFlags = { @@ -145,7 +146,6 @@ export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { const tradingFee = tx?.TradingFee const amount = createAmountWithIssuer(specification, outcome, specification.source.address, 'amount') const amount2 = createAmountWithIssuer(specification, outcome, specification.source.address, 'amount2') - const lpTokenBalance = createAmountWithIssuer(outcome?.ammChanges, outcome, specification.source.address, 'lpTokenBalance') const asset = specification?.asset const asset2 = specification?.asset2 const ePrice = specification?.EPrice @@ -157,6 +157,10 @@ export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { address: specification?.holder, addressDetails: outcome?.balanceChanges?.find((change) => change.address === specification.holder)?.addressDetails } + // Executor balance changes adjusted for fee + const sourceBalanceChangesList = addressBalanceChanges(data, specification.source.address) || [] + const depositedList = sourceBalanceChangesList.filter((c) => Number(c?.value) < 0) + const receivedList = sourceBalanceChangesList.filter((c) => Number(c?.value) > 0) return ( { {renderAmountWithIssuer(amount2)} )} - {(txType === 'AMMCreat' || txType === 'AMMDeposit' || txType === 'AMMWithdraw') && lpTokenBalance?.currency && lpTokenBalance?.value && ( + {(txType === 'AMMCreate' || txType === 'AMMDeposit') && ( + <> + {depositedList.length > 0 && ( + + Deposited + + {depositedList.map((change, idx) => ( +
+ {amountFormat({ ...change, value: Math.abs(Number(change.value)).toString() })} + {change?.issuer && <>({addressUsernameOrServiceLink(change, 'issuer', { short: true })})} +
+ ))} + + + )} + {receivedList.length > 0 && ( + + Received + + {receivedList.map((change, idx) => ( +
+ {amountFormat(change)} + {change?.issuer && <>({addressUsernameOrServiceLink(change, 'issuer', { short: true })})} +
+ ))} + + + )} + + )} + {txType === 'AMMWithdraw' && ( + <> + {/* {(amount?.currency && amount?.value) || (amount2?.currency && amount2?.value) ? ( + + Specified Assets for Withdraw + + {amount?.currency && amount?.value && ( + <> + {renderAmountWithIssuer(amount)} +
+ + )} + {amount2?.currency && amount2?.value && <>{renderAmountWithIssuer(amount2)}} + + + ) : ( + '' + )} */} + {depositedList.length > 0 && ( + + Actually paid + + {depositedList.map((change, idx) => ( +
+ {amountFormat({ ...change, value: Math.abs(Number(change.value)).toString() })} + {change?.issuer && <>({addressUsernameOrServiceLink(change, 'issuer', { short: true })})} +
+ ))} + + + )} + {(() => { + const targetReceivedList = (holder?.address + ? addressBalanceChanges(data, holder.address) || [] + : sourceBalanceChangesList + ).filter((c) => Number(c?.value) > 0) + return targetReceivedList.length > 0 ? ( + + Actually withdrawn + + {targetReceivedList.map((change, idx) => ( +
+ {amountFormat(change)} + {change?.issuer && <>({addressUsernameOrServiceLink(change, 'issuer', { short: true })})} +
+ ))} + + + ) : ( + '' + ) + })()} + + )} + {txType === 'AMMDeposit' && ( - LP Token Balance - {renderAmountWithIssuer(lpTokenBalance)} + Specified Max Assets for Deposit + + {amount?.currency && amount?.value && ( + <> + {renderAmountWithIssuer(amount)} +
+ + )} + {amount2?.currency && amount2?.value && ( + <> + {renderAmountWithIssuer(amount2)} + + )} + )} {ePrice && ( From 0cee42d49668b3d3b28e4d7fe5a4abdaff4cb777 Mon Sep 17 00:00:00 2001 From: Viacheslav Bakshaev Date: Wed, 20 Aug 2025 20:44:06 +0300 Subject: [PATCH 09/10] uI fixes --- components/Transaction/TransactionAmm.js | 150 ++++++++++++----------- 1 file changed, 78 insertions(+), 72 deletions(-) diff --git a/components/Transaction/TransactionAmm.js b/components/Transaction/TransactionAmm.js index 42c137b5f..647df69e0 100644 --- a/components/Transaction/TransactionAmm.js +++ b/components/Transaction/TransactionAmm.js @@ -1,7 +1,13 @@ import { TData } from '../Table' import { TransactionCard } from './TransactionCard' -import { AddressWithIconFilled, addressUsernameOrServiceLink, amountFormat, niceCurrency } from '../../utils/format' +import { + AddressWithIconFilled, + addressUsernameOrServiceLink, + amountFormat, + nativeCurrencyToFiat, + niceCurrency +} from '../../utils/format' import { divide } from '../../utils/calc' import { addressBalanceChanges } from '../../utils/transaction' @@ -46,20 +52,6 @@ const createAmountWithIssuer = (specification, outcome, sourceAddress, amountKey } } -// Helper function to render amount with issuer -const renderAmountWithIssuer = (amountData) => ( - <> - {amountFormat(amountData)} - {amountData.issuer && ( - <> - {'('} - {addressUsernameOrServiceLink(amountData, 'issuer', { short: true })} - {')'} - - )} - -) - // Helper function to render asset with issuer const renderAssetWithIssuer = (assetData) => ( <> @@ -162,6 +154,33 @@ export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { const depositedList = sourceBalanceChangesList.filter((c) => Number(c?.value) < 0) const receivedList = sourceBalanceChangesList.filter((c) => Number(c?.value) > 0) + // Helper function to render amount with issuer + const renderAmountWithIssuer = (amountData, options) => ( + <> + {amountFormat(amountData)} + {amountData.issuer && ( + <> + {'('} + {addressUsernameOrServiceLink(amountData, 'issuer', { short: true })} + {')'} + + )} + {options?.includeFiat && + selectedCurrency && + amountData?.value && + amountData?.currency && + amountData?.value !== '0' && ( + + {nativeCurrencyToFiat({ + amount: amountData, + selectedCurrency, + fiatRate: pageFiatRate + })}{' '} + + )} + + ) + return ( { - + {(txType === 'AMMVote' || txType === 'AMMBid' || txType === 'AMMDelete') && asset && asset2 && ( Liquidity pool - {renderAssetWithIssuer(asset)} / {renderAssetWithIssuer(asset2)} - - )} - {amount?.currency && amount?.value && ( - - Asset 1 - {renderAmountWithIssuer(amount)} - - )} - {amount2?.currency && amount2?.value && ( - - Asset 2 - {renderAmountWithIssuer(amount2)} + + {renderAssetWithIssuer(asset)} / {renderAssetWithIssuer(asset2)} + )} {(txType === 'AMMCreate' || txType === 'AMMDeposit') && ( @@ -201,8 +210,12 @@ export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { {depositedList.map((change, idx) => (
- {amountFormat({ ...change, value: Math.abs(Number(change.value)).toString() })} - {change?.issuer && <>({addressUsernameOrServiceLink(change, 'issuer', { short: true })})} + {renderAmountWithIssuer( + { ...change, value: Math.abs(Number(change.value)).toString() }, + { + includeFiat: true + } + )}
))} @@ -213,10 +226,7 @@ export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { Received {receivedList.map((change, idx) => ( -
- {amountFormat(change)} - {change?.issuer && <>({addressUsernameOrServiceLink(change, 'issuer', { short: true })})} -
+
{renderAmountWithIssuer(change, { includeFiat: true })}
))} @@ -225,22 +235,6 @@ export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { )} {txType === 'AMMWithdraw' && ( <> - {/* {(amount?.currency && amount?.value) || (amount2?.currency && amount2?.value) ? ( - - Specified Assets for Withdraw - - {amount?.currency && amount?.value && ( - <> - {renderAmountWithIssuer(amount)} -
- - )} - {amount2?.currency && amount2?.value && <>{renderAmountWithIssuer(amount2)}} - - - ) : ( - '' - )} */} {depositedList.length > 0 && ( Actually paid @@ -255,9 +249,8 @@ export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { )} {(() => { - const targetReceivedList = (holder?.address - ? addressBalanceChanges(data, holder.address) || [] - : sourceBalanceChangesList + const targetReceivedList = ( + holder?.address ? addressBalanceChanges(data, holder.address) || [] : sourceBalanceChangesList ).filter((c) => Number(c?.value) > 0) return targetReceivedList.length > 0 ? ( @@ -277,24 +270,6 @@ export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { })()} )} - {txType === 'AMMDeposit' && ( - - Specified Max Assets for Deposit - - {amount?.currency && amount?.value && ( - <> - {renderAmountWithIssuer(amount)} -
- - )} - {amount2?.currency && amount2?.value && ( - <> - {renderAmountWithIssuer(amount2)} - - )} - - - )} {ePrice && ( EPrice @@ -358,6 +333,37 @@ export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { )} + + {txType === 'AMMDeposit' || txType === 'AMMCreate' || txType === 'AMMWithdraw' ? ( + + Specification + + It was instructed to {txType === 'AMMDeposit' || txType === 'AMMCreate' ? 'deposit' : 'withdraw'} maximum{' '} + {amount?.currency && amount?.value && ( + <> + {renderAmountWithIssuer(amount)} + {amount2?.currency && amount2?.value && ' and '} + + )} + {amount2?.currency && amount2?.value && renderAmountWithIssuer(amount2)} + + + ) : ( + <> + {amount?.currency && amount?.value && ( + + Asset 1 + {renderAmountWithIssuer(amount)} + + )} + {amount2?.currency && amount2?.value && ( + + Asset 2 + {renderAmountWithIssuer(amount2)} + + )} + + )} ) } From a13add664485797b86dd4d33c1ab6b802ca14235 Mon Sep 17 00:00:00 2001 From: Viacheslav Bakshaev Date: Wed, 20 Aug 2025 21:01:43 +0300 Subject: [PATCH 10/10] ui fixes --- components/Transaction/TransactionAmm.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/components/Transaction/TransactionAmm.js b/components/Transaction/TransactionAmm.js index 647df69e0..91ef7484e 100644 --- a/components/Transaction/TransactionAmm.js +++ b/components/Transaction/TransactionAmm.js @@ -58,7 +58,7 @@ const renderAssetWithIssuer = (assetData) => ( {niceCurrency(assetData.currency)} {assetData.issuer && ( <> - {'('} + {' ('} {addressUsernameOrServiceLink(assetData, 'issuer', { short: true })} {')'} @@ -134,6 +134,7 @@ const AMMFlags = ({ flags, txType }) => { export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { if (!data) return null const { specification, tx, outcome } = data + const txType = tx.TransactionType const tradingFee = tx?.TradingFee const amount = createAmountWithIssuer(specification, outcome, specification.source.address, 'amount') @@ -237,7 +238,7 @@ export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { <> {depositedList.length > 0 && ( - Actually paid + Deposited {depositedList.map((change, idx) => (
@@ -254,7 +255,7 @@ export const TransactionAMM = ({ data, pageFiatRate, selectedCurrency }) => { ).filter((c) => Number(c?.value) > 0) return targetReceivedList.length > 0 ? ( - Actually withdrawn + Withdrawn {targetReceivedList.map((change, idx) => (