Skip to content

Commit 7d01d46

Browse files
Zishan-7Zishan-7
authored
Merge pull request #1356 from peanutprotocol/feat/summary-separator-rendering
[TASK-15655] Feat: Summary separator rendering
2 parents 1e7e3d7 + 38c752a commit 7d01d46

2 files changed

Lines changed: 99 additions & 66 deletions

File tree

‎src/components/TransactionDetails/TransactionDetailsReceipt.tsx‎

Lines changed: 92 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,46 @@ export const TransactionDetailsReceipt = ({
217217
return rowKey === lastVisibleRow
218218
}
219219

220+
// reusable helper to get the last visible row in a specific group
221+
const getLastVisibleInGroup = (groupKeys: TransactionDetailsRowKey[]) => {
222+
const visibleInGroup = groupKeys.filter((key) => rowVisibilityConfig[key])
223+
return visibleInGroup[visibleInGroup.length - 1]
224+
}
225+
226+
// define row groups
227+
const rowGroups = useMemo(
228+
() => ({
229+
dateRows: ['createdAt', 'cancelled', 'claimed', 'completed', 'closed'] as TransactionDetailsRowKey[],
230+
txnDetails: ['tokenAndNetwork', 'txId'] as TransactionDetailsRowKey[],
231+
fees: ['networkFee', 'peanutFee'] as TransactionDetailsRowKey[],
232+
}),
233+
[]
234+
)
235+
236+
// get last visible row for each group
237+
const lastVisibleInGroups = useMemo(
238+
() => ({
239+
dateRows: getLastVisibleInGroup(rowGroups.dateRows),
240+
txnDetails: getLastVisibleInGroup(rowGroups.txnDetails),
241+
fees: getLastVisibleInGroup(rowGroups.fees),
242+
}),
243+
[rowVisibilityConfig]
244+
)
245+
246+
// reusable helper to check if border should be hidden for a row in a specific group
247+
const shouldHideGroupBorder = (rowKey: TransactionDetailsRowKey, groupName: keyof typeof rowGroups) => {
248+
const isLastInGroup = rowKey === lastVisibleInGroups[groupName]
249+
const isGlobalLast = shouldHideBorder(rowKey)
250+
251+
// if it's the last in its group, show border UNLESS it's also the global last
252+
if (isLastInGroup) {
253+
return isGlobalLast
254+
}
255+
256+
// if not last in group, always hide border
257+
return true
258+
}
259+
220260
const isPendingRequestee = useMemo(() => {
221261
if (!transaction) return false
222262
return (
@@ -548,10 +588,46 @@ export const TransactionDetailsReceipt = ({
548588
<PaymentInfoRow
549589
label={'Created'}
550590
value={formatDate(new Date(transaction.createdAt!.toString()))}
551-
hideBottomBorder={shouldHideBorder('createdAt')}
591+
hideBottomBorder={shouldHideGroupBorder('createdAt', 'dateRows')}
592+
/>
593+
)}
594+
595+
{rowVisibilityConfig.cancelled && (
596+
<PaymentInfoRow
597+
label="Cancelled"
598+
value={formatDate(new Date(transaction.cancelledDate!))}
599+
hideBottomBorder={shouldHideGroupBorder('cancelled', 'dateRows')}
600+
/>
601+
)}
602+
603+
{rowVisibilityConfig.claimed && (
604+
<PaymentInfoRow
605+
label="Claimed"
606+
value={formatDate(new Date(transaction.claimedAt!))}
607+
hideBottomBorder={shouldHideGroupBorder('claimed', 'dateRows')}
608+
/>
609+
)}
610+
611+
{rowVisibilityConfig.completed && (
612+
<PaymentInfoRow
613+
label={getLabelText(transaction)}
614+
value={formatDate(new Date(transaction.completedAt!))}
615+
hideBottomBorder={shouldHideGroupBorder('completed', 'dateRows')}
552616
/>
553617
)}
554618

619+
{rowVisibilityConfig.closed && (
620+
<>
621+
{transaction.cancelledDate && (
622+
<PaymentInfoRow
623+
label="Closed at"
624+
value={formatDate(new Date(transaction.cancelledDate))}
625+
hideBottomBorder={shouldHideBorder('closed')}
626+
/>
627+
)}
628+
</>
629+
)}
630+
555631
{rowVisibilityConfig.to && (
556632
<PaymentInfoRow
557633
label={'To'}
@@ -620,7 +696,7 @@ export const TransactionDetailsReceipt = ({
620696
</div>
621697
)
622698
}
623-
hideBottomBorder={shouldHideBorder('tokenAndNetwork')}
699+
hideBottomBorder={shouldHideGroupBorder('tokenAndNetwork', 'txnDetails')}
624700
/>
625701
)}
626702
</>
@@ -647,56 +723,10 @@ export const TransactionDetailsReceipt = ({
647723
</div>
648724
)
649725
}
650-
hideBottomBorder={shouldHideBorder('txId')}
726+
hideBottomBorder={shouldHideGroupBorder('txId', 'txnDetails')}
651727
/>
652728
)}
653729

654-
{rowVisibilityConfig.cancelled && (
655-
<>
656-
{transaction.cancelledDate && (
657-
<PaymentInfoRow
658-
label="Cancelled"
659-
value={formatDate(new Date(transaction.cancelledDate))}
660-
hideBottomBorder={shouldHideBorder('cancelled')}
661-
/>
662-
)}
663-
</>
664-
)}
665-
666-
{rowVisibilityConfig.closed && (
667-
<>
668-
{transaction.cancelledDate && (
669-
<PaymentInfoRow
670-
label="Closed at"
671-
value={formatDate(new Date(transaction.cancelledDate))}
672-
hideBottomBorder={shouldHideBorder('closed')}
673-
/>
674-
)}
675-
</>
676-
)}
677-
678-
{rowVisibilityConfig.claimed && (
679-
<>
680-
{transaction.claimedAt && (
681-
<PaymentInfoRow
682-
label="Claimed"
683-
value={formatDate(new Date(transaction.claimedAt))}
684-
hideBottomBorder={shouldHideBorder('claimed')}
685-
/>
686-
)}
687-
</>
688-
)}
689-
690-
{rowVisibilityConfig.completed && (
691-
<>
692-
<PaymentInfoRow
693-
label={getLabelText(transaction)}
694-
value={formatDate(new Date(transaction.completedAt!))}
695-
hideBottomBorder={shouldHideBorder('completed')}
696-
/>
697-
</>
698-
)}
699-
700730
{rowVisibilityConfig.fee && (
701731
<PaymentInfoRow label="Fee" value={feeDisplay} hideBottomBorder={shouldHideBorder('fee')} />
702732
)}
@@ -739,6 +769,7 @@ export const TransactionDetailsReceipt = ({
739769
<PaymentInfoRow
740770
label={`Value in ${transaction.currency!.code}`}
741771
value={`${transaction.currency!.code} ${formatCurrency(transaction.currency!.amount)}`}
772+
hideBottomBorder
742773
/>
743774
)}
744775
{/* TODO: stop using snake_case!!!!! */}
@@ -844,7 +875,7 @@ export const TransactionDetailsReceipt = ({
844875
/>
845876
</div>
846877
}
847-
hideBottomBorder={false}
878+
hideBottomBorder={true}
848879
/>
849880
<PaymentInfoRow
850881
label="Bank Address"
@@ -885,7 +916,7 @@ export const TransactionDetailsReceipt = ({
885916
/>
886917
</div>
887918
}
888-
hideBottomBorder={false}
919+
hideBottomBorder={true}
889920
/>
890921
<PaymentInfoRow
891922
label="BIC"
@@ -994,7 +1025,7 @@ export const TransactionDetailsReceipt = ({
9941025
/>
9951026
</div>
9961027
}
997-
hideBottomBorder={false}
1028+
hideBottomBorder={true}
9981029
/>
9991030
)}
10001031
{transaction.extraDataForDrawer.depositInstructions
@@ -1028,13 +1059,6 @@ export const TransactionDetailsReceipt = ({
10281059
</>
10291060
)}
10301061

1031-
{rowVisibilityConfig.peanutFee && (
1032-
<PaymentInfoRow
1033-
label="Peanut fee"
1034-
value={'Sponsored by Peanut!'}
1035-
hideBottomBorder={shouldHideBorder('peanutFee')}
1036-
/>
1037-
)}
10381062
{rowVisibilityConfig.points && transaction.points && (
10391063
<PaymentInfoRow
10401064
label="Points earned"
@@ -1061,7 +1085,15 @@ export const TransactionDetailsReceipt = ({
10611085
label="Network fee"
10621086
value={transaction.networkFeeDetails!.amountDisplay}
10631087
moreInfoText={transaction.networkFeeDetails!.moreInfoText}
1064-
hideBottomBorder={shouldHideBorder('networkFee')}
1088+
hideBottomBorder={shouldHideGroupBorder('networkFee', 'fees')}
1089+
/>
1090+
)}
1091+
1092+
{rowVisibilityConfig.peanutFee && (
1093+
<PaymentInfoRow
1094+
label="Peanut fee"
1095+
value={'Sponsored by Peanut!'}
1096+
hideBottomBorder={shouldHideGroupBorder('peanutFee', 'fees')}
10651097
/>
10661098
)}
10671099

‎src/components/TransactionDetails/transaction-details.utils.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,26 +20,27 @@ export type TransactionDetailsRowKey =
2020
| 'mantecaDepositInfo'
2121
| 'closed'
2222

23-
// order of the rows in the receipt
23+
// order of the rows in the receipt (must match actual rendering order in component)
2424
export const transactionDetailsRowKeys: TransactionDetailsRowKey[] = [
2525
'createdAt',
26-
'to',
27-
'tokenAndNetwork',
28-
'txId',
2926
'cancelled',
3027
'claimed',
3128
'completed',
29+
'closed',
30+
'to',
31+
'tokenAndNetwork',
32+
'txId',
3233
'fee',
34+
'mantecaDepositInfo',
3335
'exchangeRate',
3436
'bankAccountDetails',
3537
'transferId',
3638
'depositInstructions',
37-
'peanutFee',
3839
'points',
3940
'comment',
4041
'networkFee',
42+
'peanutFee',
4143
'attachment',
42-
'closed',
4344
]
4445

4546
export const getBankAccountLabel = (type: string) => {

0 commit comments

Comments
 (0)