Merge pull request #105 from palladians/fix/transaction-tab-layout

fix(transaction tab): add total & usd value 💰
palladians · Dec 22, 2023 · 17975c7 · 17975c7
2 parents 6d9839d + 10c1c85
commit 17975c7
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 13 deletions.
diff --git a/packages/features/src/common/types.ts b/packages/features/src/common/types.ts
@@ -22,6 +22,7 @@ export type StructurizedTransaction = Mina.TransactionBody & {
   time: string
   minaAmount: number
   minaFee: number
+  txTotalMinaAmount: number
 }
 
 type StakingAccount = {

diff --git a/packages/features/src/transactions/components/TxTile.tsx b/packages/features/src/transactions/components/TxTile.tsx
@@ -1,3 +1,4 @@
+import { useFiatPrice } from '@palladxyz/offchain-data'
 import { useNavigate } from 'react-router-dom'
 
 import { MinaIcon } from '@/common/components/MinaIcon'
@@ -9,17 +10,22 @@ interface TxTileProps {
   tx: StructurizedTransaction
 }
 
+const fiatTxValue = (amount, fiatValue) => {
+  if (!amount || !fiatValue) return 0
+  return Number(amount) * fiatValue
+}
+
+const getTransactionLabel = (tx) => {
+  if (tx.kind === TxKind.STAKE_DELEGATION) return 'Delegation'
+  if (tx.from === tx.to && tx.kind === TxKind.PAYMENT) return 'Sent to Self'
+  return tx.side === TxSide.INCOMING ? 'Received' : 'Sent'
+}
+
 export const TxTile = ({ tx }: TxTileProps) => {
   const navigate = useNavigate()
-  const getTransactionLabel = (tx: StructurizedTransaction) => {
-    if (tx.kind === TxKind.STAKE_DELEGATION) {
-      return 'Delegation'
-    }
-    if (tx.from === tx.to && tx.kind === TxKind.PAYMENT) {
-      return 'Sent to Self'
-    }
-    return tx.side === TxSide.INCOMING ? 'Received' : 'Sent'
-  }
+  const { data: fiatPriceData } = useFiatPrice()
+  const rawFiatPrice = fiatPriceData?.['mina-protocol']?.usd ?? 0
+
   return (
     <div
       key={tx.hash}
@@ -35,13 +41,14 @@ export const TxTile = ({ tx }: TxTileProps) => {
       </div>
       <div className="flex flex-col items-end gap-2">
         <div className="flex items-center font-semibold">
-          <span>{tx.minaAmount}</span>
+          <span>{tx.txTotalMinaAmount}</span>
           <MinaIcon stroke="8" size="18" />
         </div>
         <div className="flex items-center text-xs">
-          <span>{tx.minaFee}</span>
-          <MinaIcon stroke="8" size="12" />
-          <span className="ml-1">Fee</span>
+          <span>
+            {fiatTxValue(tx.txTotalMinaAmount, rawFiatPrice).toFixed(3)}
+          </span>
+          <span className="ml-1">USD</span>
         </div>
       </div>
     </div>

diff --git a/packages/features/src/transactions/utils/structurizeTransactions.ts b/packages/features/src/transactions/utils/structurizeTransactions.ts
@@ -21,6 +21,10 @@ export const structurizeTransaction = ({
   time: dayjs(tx.dateTime).format('HH:mm'),
   minaAmount: (Number(tx.amount) / 1_000_000_000).toFixed(3),
   minaFee: (Number(tx.fee) / 1_000_000_000).toFixed(3),
+  txTotalMinaAmount: (
+    (Number(tx.amount) + Number(tx.fee)) /
+    1_000_000_000
+  ).toFixed(3),
   side: tx.from === walletPublicKey ? TxSide.OUTGOING : TxSide.INCOMING
 })