From 7215e0d5c6272fc1c8da9f82d32c8f6c709fcc62 Mon Sep 17 00:00:00 2001
From: Zishan Mohd <zishan2539@gmail.com>
Date: Thu, 23 Oct 2025 18:30:05 +0530
Subject: [PATCH 1/2] Feat: Summary separator rendering

---
 .../TransactionDetailsReceipt.tsx             | 129 +++++++++++-------
 .../transaction-details.utils.ts              |  11 +-
 2 files changed, 86 insertions(+), 54 deletions(-)

diff --git a/src/components/TransactionDetails/TransactionDetailsReceipt.tsx b/src/components/TransactionDetails/TransactionDetailsReceipt.tsx
index 0f7e91d24..2d2bf23a1 100644
--- a/src/components/TransactionDetails/TransactionDetailsReceipt.tsx
+++ b/src/components/TransactionDetails/TransactionDetailsReceipt.tsx
@@ -198,6 +198,46 @@ export const TransactionDetailsReceipt = ({
         return rowKey === lastVisibleRow
     }
 
+    // reusable helper to get the last visible row in a specific group
+    const getLastVisibleInGroup = (groupKeys: TransactionDetailsRowKey[]) => {
+        const visibleInGroup = groupKeys.filter((key) => rowVisibilityConfig[key])
+        return visibleInGroup[visibleInGroup.length - 1]
+    }
+
+    // define row groups
+    const rowGroups = useMemo(
+        () => ({
+            dateRows: ['createdAt', 'cancelled', 'claimed', 'completed'] as TransactionDetailsRowKey[],
+            txnDetails: ['tokenAndNetwork', 'txId'] as TransactionDetailsRowKey[],
+            fees: ['networkFee', 'peanutFee'] as TransactionDetailsRowKey[],
+        }),
+        []
+    )
+
+    // get last visible row for each group
+    const lastVisibleInGroups = useMemo(
+        () => ({
+            dateRows: getLastVisibleInGroup(rowGroups.dateRows),
+            txnDetails: getLastVisibleInGroup(rowGroups.txnDetails),
+            fees: getLastVisibleInGroup(rowGroups.fees),
+        }),
+        [rowVisibilityConfig]
+    )
+
+    // reusable helper to check if border should be hidden for a row in a specific group
+    const shouldHideGroupBorder = (rowKey: TransactionDetailsRowKey, groupName: keyof typeof rowGroups) => {
+        const isLastInGroup = rowKey === lastVisibleInGroups[groupName]
+        const isGlobalLast = shouldHideBorder(rowKey)
+
+        // if it's the last in its group, show border UNLESS it's also the global last
+        if (isLastInGroup) {
+            return isGlobalLast
+        }
+
+        // if not last in group, always hide border
+        return true
+    }
+
     const isPendingRequestee = useMemo(() => {
         if (!transaction) return false
         return (
@@ -338,7 +378,6 @@ export const TransactionDetailsReceipt = ({
         (transaction.extraDataForDrawer?.transactionCardType === 'send' ||
             transaction.extraDataForDrawer?.transactionCardType === 'request' ||
             transaction.extraDataForDrawer?.transactionCardType === 'receive')
-
     return (
         <div ref={contentRef} className={twMerge('space-y-4', className)}>
             {/* show qr code at the top if applicable */}
@@ -386,7 +425,31 @@ export const TransactionDetailsReceipt = ({
                         <PaymentInfoRow
                             label={'Created'}
                             value={formatDate(new Date(transaction.createdAt!.toString()))}
-                            hideBottomBorder={shouldHideBorder('createdAt')}
+                            hideBottomBorder={shouldHideGroupBorder('createdAt', 'dateRows')}
+                        />
+                    )}
+
+                    {rowVisibilityConfig.cancelled && (
+                        <PaymentInfoRow
+                            label="Cancelled"
+                            value={formatDate(new Date(transaction.cancelledDate!))}
+                            hideBottomBorder={shouldHideGroupBorder('cancelled', 'dateRows')}
+                        />
+                    )}
+
+                    {rowVisibilityConfig.claimed && (
+                        <PaymentInfoRow
+                            label="Claimed"
+                            value={formatDate(new Date(transaction.claimedAt!))}
+                            hideBottomBorder={shouldHideGroupBorder('claimed', 'dateRows')}
+                        />
+                    )}
+
+                    {rowVisibilityConfig.completed && (
+                        <PaymentInfoRow
+                            label={getLabelText(transaction)}
+                            value={formatDate(new Date(transaction.completedAt!))}
+                            hideBottomBorder={shouldHideGroupBorder('completed', 'dateRows')}
                         />
                     )}
 
@@ -458,7 +521,7 @@ export const TransactionDetailsReceipt = ({
                                                 </div>
                                             )
                                         }
-                                        hideBottomBorder={shouldHideBorder('tokenAndNetwork')}
+                                        hideBottomBorder={shouldHideGroupBorder('tokenAndNetwork', 'txnDetails')}
                                     />
                                 )}
                             </>
@@ -485,44 +548,10 @@ export const TransactionDetailsReceipt = ({
                                     </div>
                                 )
                             }
-                            hideBottomBorder={shouldHideBorder('txId')}
+                            hideBottomBorder={shouldHideGroupBorder('txId', 'txnDetails')}
                         />
                     )}
 
-                    {rowVisibilityConfig.cancelled && (
-                        <>
-                            {transaction.cancelledDate && (
-                                <PaymentInfoRow
-                                    label="Cancelled"
-                                    value={formatDate(new Date(transaction.cancelledDate))}
-                                    hideBottomBorder={shouldHideBorder('cancelled')}
-                                />
-                            )}
-                        </>
-                    )}
-
-                    {rowVisibilityConfig.claimed && (
-                        <>
-                            {transaction.claimedAt && (
-                                <PaymentInfoRow
-                                    label="Claimed"
-                                    value={formatDate(new Date(transaction.claimedAt))}
-                                    hideBottomBorder={shouldHideBorder('claimed')}
-                                />
-                            )}
-                        </>
-                    )}
-
-                    {rowVisibilityConfig.completed && (
-                        <>
-                            <PaymentInfoRow
-                                label={getLabelText(transaction)}
-                                value={formatDate(new Date(transaction.completedAt!))}
-                                hideBottomBorder={shouldHideBorder('completed')}
-                            />
-                        </>
-                    )}
-
                     {rowVisibilityConfig.fee && (
                         <PaymentInfoRow label="Fee" value={feeDisplay} hideBottomBorder={shouldHideBorder('fee')} />
                     )}
@@ -565,6 +594,7 @@ export const TransactionDetailsReceipt = ({
                                 <PaymentInfoRow
                                     label={`Value in ${transaction.currency!.code}`}
                                     value={`${transaction.currency!.code} ${formatCurrency(transaction.currency!.amount)}`}
+                                    hideBottomBorder
                                 />
                             )}
                             {/* TODO: stop using snake_case!!!!! */}
@@ -670,7 +700,7 @@ export const TransactionDetailsReceipt = ({
                                                 />
                                             </div>
                                         }
-                                        hideBottomBorder={false}
+                                        hideBottomBorder={true}
                                     />
                                     <PaymentInfoRow
                                         label="Bank Address"
@@ -711,7 +741,7 @@ export const TransactionDetailsReceipt = ({
                                                         />
                                                     </div>
                                                 }
-                                                hideBottomBorder={false}
+                                                hideBottomBorder={true}
                                             />
                                             <PaymentInfoRow
                                                 label="BIC"
@@ -820,7 +850,7 @@ export const TransactionDetailsReceipt = ({
                                                             />
                                                         </div>
                                                     }
-                                                    hideBottomBorder={false}
+                                                    hideBottomBorder={true}
                                                 />
                                             )}
                                             {transaction.extraDataForDrawer.depositInstructions
@@ -854,13 +884,6 @@ export const TransactionDetailsReceipt = ({
                         </>
                     )}
 
-                    {rowVisibilityConfig.peanutFee && (
-                        <PaymentInfoRow
-                            label="Peanut fee"
-                            value={'Sponsored by Peanut!'}
-                            hideBottomBorder={shouldHideBorder('peanutFee')}
-                        />
-                    )}
                     {rowVisibilityConfig.points && transaction.points && (
                         <PaymentInfoRow
                             label="Points earned"
@@ -887,7 +910,15 @@ export const TransactionDetailsReceipt = ({
                             label="Network fee"
                             value={transaction.networkFeeDetails!.amountDisplay}
                             moreInfoText={transaction.networkFeeDetails!.moreInfoText}
-                            hideBottomBorder={shouldHideBorder('networkFee')}
+                            hideBottomBorder={shouldHideGroupBorder('networkFee', 'fees')}
+                        />
+                    )}
+
+                    {rowVisibilityConfig.peanutFee && (
+                        <PaymentInfoRow
+                            label="Peanut fee"
+                            value={'Sponsored by Peanut!'}
+                            hideBottomBorder={shouldHideGroupBorder('peanutFee', 'fees')}
                         />
                     )}
 
diff --git a/src/components/TransactionDetails/transaction-details.utils.ts b/src/components/TransactionDetails/transaction-details.utils.ts
index 09462bea5..24cd7cc12 100644
--- a/src/components/TransactionDetails/transaction-details.utils.ts
+++ b/src/components/TransactionDetails/transaction-details.utils.ts
@@ -19,24 +19,25 @@ export type TransactionDetailsRowKey =
     | 'attachment'
     | 'mantecaDepositInfo'
 
-// order of the rows in the receipt
+// order of the rows in the receipt (must match actual rendering order in component)
 export const transactionDetailsRowKeys: TransactionDetailsRowKey[] = [
     'createdAt',
-    'to',
-    'tokenAndNetwork',
-    'txId',
     'cancelled',
     'claimed',
     'completed',
+    'to',
+    'tokenAndNetwork',
+    'txId',
     'fee',
+    'mantecaDepositInfo',
     'exchangeRate',
     'bankAccountDetails',
     'transferId',
     'depositInstructions',
-    'peanutFee',
     'points',
     'comment',
     'networkFee',
+    'peanutFee',
     'attachment',
 ]
 

From 38c752a8d9fba75c6217285241734608a1357b98 Mon Sep 17 00:00:00 2001
From: Zishan Mohd <zishan2539@gmail.com>
Date: Mon, 27 Oct 2025 11:56:29 +0530
Subject: [PATCH 2/2] update order

---
 src/components/TransactionDetails/transaction-details.utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TransactionDetails/transaction-details.utils.ts b/src/components/TransactionDetails/transaction-details.utils.ts
index 2766bd551..e1b93915b 100644
--- a/src/components/TransactionDetails/transaction-details.utils.ts
+++ b/src/components/TransactionDetails/transaction-details.utils.ts
@@ -26,6 +26,7 @@ export const transactionDetailsRowKeys: TransactionDetailsRowKey[] = [
     'cancelled',
     'claimed',
     'completed',
+    'closed',
     'to',
     'tokenAndNetwork',
     'txId',
@@ -40,7 +41,6 @@ export const transactionDetailsRowKeys: TransactionDetailsRowKey[] = [
     'networkFee',
     'peanutFee',
     'attachment',
-    'closed',
 ]
 
 export const getBankAccountLabel = (type: string) => {