Merge pull request #99 from palladians/fix/transaction-labels

Feat: Dynamic Transaction Labelling
palladians · Dec 21, 2023 · e0ab2ba · e0ab2ba
2 parents 6ed6306 + 0c742a8
commit e0ab2ba
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/packages/features/src/transactions/components/TxIndicator.tsx b/packages/features/src/transactions/components/TxIndicator.tsx
@@ -1,23 +1,34 @@
 import { Mina } from '@palladxyz/mina-core'
-import { ArrowDownLeftIcon, ArrowUpRightIcon, CoinsIcon } from 'lucide-react'
+import {
+  ArrowDownLeftIcon,
+  ArrowUpRightIcon,
+  CoinsIcon,
+  RepeatIcon
+} from 'lucide-react'
 
 import { TxSide } from '../../common/types'
 
 interface TxSideIndicatorProps {
   side: TxSide
   // TODO: consider how to make this with Multichain
   kind: Mina.TransactionKind
+  from: string
+  to: string
 }
 
-export const TxIndicator = ({ kind, side }: TxSideIndicatorProps) => {
+export const TxIndicator = ({ kind, side, from, to }: TxSideIndicatorProps) => {
+  const isSentToSelf = from === to
+
   return (
     <div className="flex rounded-full dark:bg-blue-900 bg-blue-300 dark:text-blue-300 text-blue-900 w-10 h-10 justify-center items-center">
-      {kind === 'payment'.toUpperCase() ? (
+      {kind === 'payment'.toUpperCase() && !isSentToSelf ? (
         side === TxSide.INCOMING ? (
           <ArrowDownLeftIcon />
         ) : (
           <ArrowUpRightIcon />
         )
+      ) : isSentToSelf ? (
+        <RepeatIcon />
       ) : (
         <CoinsIcon />
       )}

diff --git a/packages/features/src/transactions/components/TxTile.tsx b/packages/features/src/transactions/components/TxTile.tsx
@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom'
 
-import { StructurizedTransaction } from '../../common/types'
+import { StructurizedTransaction, TxSide } from '../../common/types'
 import { TxIndicator } from './TxIndicator'
 
 interface TxTileProps {
@@ -9,15 +9,23 @@ interface TxTileProps {
 
 export const TxTile = ({ tx }: TxTileProps) => {
   const navigate = useNavigate()
+  const getTransactionLabel = (tx: StructurizedTransaction) => {
+    if (tx.from === tx.to) {
+      return 'Sent to Self'
+    }
+    return tx.side === TxSide.INCOMING ? 'Received' : 'Sent'
+  }
   return (
     <div
       key={tx.hash}
       className="animate-in fade-in flex justify-between items-center gap-4 cursor-pointer"
       onClick={() => navigate(`/transactions/${tx.hash}`)}
     >
-      {tx.kind && <TxIndicator side={tx.side} kind={tx.kind} />}
+      {tx.kind && (
+        <TxIndicator side={tx.side} kind={tx.kind} from={tx.from} to={tx.to} />
+      )}
       <div className="flex flex-col flex-1 gap-2">
-        <div className="flex-1 font-semibold">Received</div>
+        <div className="flex-1 font-semibold">{getTransactionLabel(tx)}</div>
         <div className="flex-1 text-sm">{tx.time}</div>
       </div>
       <div className="font-semibold">{tx.minaAmount} MINA</div>

diff --git a/packages/features/src/transactions/views/TransactionDetails.tsx b/packages/features/src/transactions/views/TransactionDetails.tsx
@@ -60,6 +60,8 @@ export const TransactionDetailsView = () => {
                   <TxIndicator
                     side={transaction.side}
                     kind={transaction.kind}
+                    from={transaction.from}
+                    to={transaction.to}
                   />
                 )}
                 <div className="flex flex-col gap-2">