From 71da2a872f8e6a7b62478017b1a682cde3a1919d Mon Sep 17 00:00:00 2001 From: Jan Marcano Date: Thu, 7 Oct 2021 11:39:17 -0300 Subject: [PATCH 1/7] Display Info for Inner Transactions --- .../components/Account/TransactionsList.ts | 56 +++++++++++++++---- .../components/TransactionDetail/TxAppl.ts | 7 +++ 2 files changed, 53 insertions(+), 10 deletions(-) diff --git a/packages/ui/src/components/Account/TransactionsList.ts b/packages/ui/src/components/Account/TransactionsList.ts index 4839704f..2fd1a94c 100644 --- a/packages/ui/src/components/Account/TransactionsList.ts +++ b/packages/ui/src/components/Account/TransactionsList.ts @@ -14,6 +14,14 @@ import TxAfrz from 'components/TransactionDetail/TxAfrz'; import TxAppl from 'components/TransactionDetail/TxAppl'; const BACKGROUND_REFRESH_TIMER: number = 10000; +const INNER_TXN_DESCRIPTIONS = { + axfer: 'Asset Transfer', + pay: 'Payment', + afrz: 'Asset Freeze', + keyreg: 'Key Registration', + acfg: 'Asset Config', + appl: 'Application', +}; const TransactionsList: FunctionalComponent = (props: any) => { const store: any = useContext(StoreContext); @@ -111,7 +119,7 @@ const TransactionsList: FunctionalComponent = (props: any) => { fetchApi(); }; - const getTxInfo = (tx, date) => { + const getTxInfo = (tx, date): any => { function getTime(date, roundTime) { const MINUTESTHRESHOLD = 60000; const HOURSTHRESHOLD = 3600000; @@ -139,7 +147,10 @@ const TransactionsList: FunctionalComponent = (props: any) => { } } + const id = tx.id; + const time = getTime(date, tx['round-time']); let title, subtitle, info; + switch (tx['tx-type']) { case 'pay': info = tx['payment-transaction'].amount / 1e6 + ' Algos'; @@ -161,15 +172,14 @@ const TransactionsList: FunctionalComponent = (props: any) => { case 'axfer': info = tx['asset-transfer-transaction']['amount']; store.getAssetDetails(ledger, address, (assets) => { - const id = tx['asset-transfer-transaction']['asset-id']; + const id = tx['asset-transfer-transaction']['asset-id']; // Check if the asset has not been deleted before getting info about it - if (assets[id]) { + if (assets[id]) { const dec = assets[id].decimals || 0; const amount = info / Math.pow(10, dec); info = `${amount} ${assets[id].unitName}`; } - }); // TODO Close-to txs // Clawback if there is a sender in the transfer object @@ -211,21 +221,47 @@ const TransactionsList: FunctionalComponent = (props: any) => { break; } + return { + title, + subtitle, + info, + id, + time, + }; + }; + + const getTxTemplate = (tx, date) => { + const { title, subtitle, info, id, time } = getTxInfo(tx, date); return html` -
+
-

${subtitle}

+

${subtitle}

${title}

-

- ${getTime(date, tx['round-time'])} -

+

${time}

${info}

+ ${tx['inner-txns'] && + html` + Inner Transaction(s): +
+ ${tx['inner-txns'].map( + (inner: any) => { + const innerTxInfo = getTxInfo(inner, date); + return html` +
+