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

Feat: Transaction Labels 🥩
palladians · Dec 21, 2023 · 5c563b2 · 5c563b2
2 parents e0ab2ba + e34c2c2
commit 5c563b2
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/packages/features/src/transactions/components/TxIndicator.tsx b/packages/features/src/transactions/components/TxIndicator.tsx
@@ -2,11 +2,12 @@ import { Mina } from '@palladxyz/mina-core'
 import {
   ArrowDownLeftIcon,
   ArrowUpRightIcon,
+  BeefIcon,
   CoinsIcon,
   RepeatIcon
 } from 'lucide-react'
 
-import { TxSide } from '../../common/types'
+import { TxKind, TxSide } from '../../common/types'
 
 interface TxSideIndicatorProps {
   side: TxSide
@@ -19,19 +20,23 @@ interface TxSideIndicatorProps {
 export const TxIndicator = ({ kind, side, from, to }: TxSideIndicatorProps) => {
   const isSentToSelf = from === to
 
+  let icon
+
+  if (kind === TxKind.PAYMENT) {
+    if (isSentToSelf) {
+      icon = <RepeatIcon />
+    } else {
+      icon =
+        side === TxSide.INCOMING ? <ArrowDownLeftIcon /> : <ArrowUpRightIcon />
+    }
+  } else if (kind === TxKind.STAKE_DELEGATION) {
+    icon = <BeefIcon />
+  } else {
+    icon = <CoinsIcon />
+  }
   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() && !isSentToSelf ? (
-        side === TxSide.INCOMING ? (
-          <ArrowDownLeftIcon />
-        ) : (
-          <ArrowUpRightIcon />
-        )
-      ) : isSentToSelf ? (
-        <RepeatIcon />
-      ) : (
-        <CoinsIcon />
-      )}
+      {icon}
     </div>
   )
 }
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, TxSide } from '../../common/types'
+import { StructurizedTransaction, TxKind, TxSide } from '../../common/types'
 import { TxIndicator } from './TxIndicator'
 
 interface TxTileProps {
@@ -10,7 +10,10 @@ interface TxTileProps {
 export const TxTile = ({ tx }: TxTileProps) => {
   const navigate = useNavigate()
   const getTransactionLabel = (tx: StructurizedTransaction) => {
-    if (tx.from === tx.to) {
+    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'