Skip to content

Added transaction history #494

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Devsol-01 merged 1 commit into from
Mar 28, 2026
+93 −95
Merged

Added transaction history #494

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 35 additions & 39 deletions frontend/app/dashboard/transactions/components/TransactionRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,109 +6,105 @@ import {
ArrowUpCircle,
Repeat,
Sparkles,
FileText,
} from 'lucide-react';

export type TransactionType = 'deposit' | 'withdraw' | 'swap' | 'yield';
export type TransactionStatus = 'completed' | 'pending';

export interface TransactionRowProps {
date: string; // ISO date-time or human readable
date: string;
time: string;
transactionId: string;
type: TransactionType;
assetDetails: string;
amount: number;
currency: string;
amountDisplay: string;
isPositive: boolean | null;
status: TransactionStatus;
onClick?(id: string): void;
}

const typeMeta: Record<TransactionType, { icon: React.ReactNode; label: string; style: string }> = {
const typeMeta: Record<TransactionType, { icon: React.ReactNode; label: string }> = {
deposit: {
icon: <ArrowDownCircle size={18} className="text-emerald-400" />,
icon: <ArrowDownCircle size={18} className="text-[#34d399]" />,
label: 'Deposit',
style: 'text-emerald-200',
},
withdraw: {
icon: <ArrowUpCircle size={18} className="text-rose-400" />,
icon: <ArrowUpCircle size={18} className="text-[#fb7185]" />,
label: 'Withdraw',
style: 'text-rose-200',
},
swap: {
icon: <Repeat size={18} className="text-cyan-300" />,
icon: <Repeat size={18} className="text-[#38bdf8]" />,
label: 'Swap',
style: 'text-cyan-200',
},
yield: {
icon: <Sparkles size={18} className="text-amber-300" />,
icon: <Sparkles size={18} className="text-[#fcd34d]" />,
label: 'Yield',
style: 'text-amber-200',
},
};

const statusMeta: Record<TransactionStatus, { label: string; style: string }> = {
const statusMeta: Record<TransactionStatus, { label: string; style: string; defaultColor: string }> = {
completed: {
label: 'Completed',
style: 'bg-emerald-200/15 text-emerald-200 border-emerald-100/30',
style: 'border-[#10b981] text-[#34d399]',
defaultColor: '#10b981',
},
pending: {
label: 'Pending',
style: 'bg-amber-200/15 text-amber-200 border-amber-100/30',
style: 'border-[#f59e0b] text-[#fbbf24]',
defaultColor: '#f59e0b',
},
};

function formatAmount(amount: number): string {
const abs = Math.abs(amount).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
});
return `${amount < 0 ? '-' : '+'}$${abs}`;
}

export default function TransactionRow({
date,
time,
transactionId,
type,
assetDetails,
amount,
currency,
amountDisplay,
isPositive,
status,
onClick,
}: TransactionRowProps) {
const typeInfo = typeMeta[type];
const statusInfo = statusMeta[status];
const amountStyle = amount >= 0 ? 'text-emerald-300' : 'text-rose-300';

let amountStyle = 'text-white';
if (isPositive === true) amountStyle = 'text-[#34d399]';
if (isPositive === false) amountStyle = 'text-[#fb7185]';

return (
<div
className="grid grid-cols-12 items-center gap-3 px-5 py-4 border-b border-white/10 text-sm md:text-base hover:bg-white/5 transition-colors cursor-pointer"
className="grid grid-cols-12 items-center gap-3 px-5 py-4 border-b border-white/5 text-sm md:text-[15px] hover:bg-white/5 transition-colors cursor-pointer"
onClick={() => onClick?.(transactionId)}
>
<div className="col-span-2">
<p className="text-[#b1d7da] font-medium">{date}</p>
<p className="text-[#6c9da3] text-xs mt-0.5">{time}</p>
<p className="text-[#e2f8f8] font-semibold">{date}</p>
<p className="text-[#5e8c96] text-xs mt-0.5 font-medium">{time}</p>
</div>

<div className="col-span-3">
<p className="text-white font-semibold">{transactionId}</p>
<div className="inline-flex items-center gap-2 text-xs mt-1 text-[#6c9da3]">
<div className="col-span-2 text-[#e2f8f8]">
{transactionId}
</div>

<div className="col-span-2">
<div className="inline-flex items-center gap-2 text-[#e2f8f8] font-medium">
{typeInfo.icon}
<span className={typeInfo.style}>{typeInfo.label}</span>
<span>{typeInfo.label}</span>
</div>
</div>

<div className="col-span-3 text-[#c9eef5]">{assetDetails}</div>
<div className="col-span-2 text-[#e2f8f8] font-medium">{assetDetails}</div>

<div className={`col-span-2 text-right font-semibold ${amountStyle}`}>
{formatAmount(amount)} <span className="text-[#6faab0] text-xs">{currency}</span>
<div className={`col-span-2 text-right font-bold ${amountStyle}`}>
{amountDisplay}
</div>

<div className="col-span-2 text-right">
<div className="col-span-2 flex justify-end">
<span
className={`inline-flex items-center justify-center px-3 py-1 text-xs font-semibold rounded-full border ${statusInfo.style}`}
className={`inline-flex items-center justify-center gap-1.5 px-2.5 py-1 text-xs font-bold rounded-full border border-current ${statusInfo.style}`}
>
<span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: statusInfo.defaultColor }}></span>
{statusInfo.label}
</span>
</div>
Expand Down
107 changes: 51 additions & 56 deletions frontend/app/dashboard/transactions/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,10 @@ type TransactionRowData = {
date: string;
time: string;
transactionId: string;
title: string;
type: TransactionType;
assetDetails: string;
amount: number;
currency: string;
amountDisplay: string;
isPositive: boolean | null;
status: TransactionStatus;
hash: string;
};
Expand All @@ -24,11 +23,11 @@ function csvEscape(value: string) {
}

function toCsv(rows: TransactionRowData[]) {
const header = ["date", "time", "transactionId", "type", "assetDetails", "amount", "currency", "status", "hash"];
const header = ["date", "time", "transactionId", "type", "assetDetails", "amountDisplay", "status", "hash"];
const lines = [
header.join(","),
...rows.map((r) =>
[r.date, r.time, r.transactionId, r.type, r.assetDetails, r.amount.toString(), r.currency, r.status, r.hash]
[r.date, r.time, r.transactionId, r.type, r.assetDetails, r.amountDisplay, r.status, r.hash]
.map(csvEscape)
.join(","),
),
Expand All @@ -55,64 +54,48 @@ function downloadTextFile(
export default function TransactionHistoryPage() {
const transactions: TransactionRowData[] = [
{
date: "2026-03-25",
time: "10:23",
transactionId: "0x9f2a...a1b3",
title: "Deposit USDC",
date: "Oct 25, 2023",
time: "10:23 AM",
transactionId: "0xabc...123",
type: "deposit",
assetDetails: "USDC Wallet",
amount: 500.0,
currency: "USDC",
assetDetails: "USDC",
amountDisplay: "+$500.00",
isPositive: true,
status: "completed",
hash: "0x9f2a...a1b3",
hash: "0xabc",
},
{
date: "2026-03-25",
time: "08:15",
transactionId: "0x3d10...c92e",
title: "Yield Earned",
type: "yield",
assetDetails: "Auto-compound reward",
amount: 12.45,
currency: "USDC",
date: "Oct 24, 2023",
time: "04:15 PM",
transactionId: "0xdef...456",
type: "withdraw",
assetDetails: "ETH",
amountDisplay: "-0.50 ETH",
isPositive: false,
status: "completed",
hash: "0x3d10...c92e",
hash: "0xdef",
},
{
date: "2026-03-24",
time: "16:32",
transactionId: "0x7a4c...1ff2",
title: "Swap ETH → USDC",
date: "Oct 24, 2023",
time: "09:30 AM",
transactionId: "0xghi...789",
type: "swap",
assetDetails: "0.5 ETH for 835 USDC",
amount: -0.5,
currency: "ETH",
assetDetails: "XLM → USDC",
amountDisplay: "200 USDC",
isPositive: null,
status: "completed",
hash: "0x7a4c...1ff2",
hash: "0xghi",
},
{
date: "2026-03-24",
time: "14:18",
transactionId: "0x0b22...8e91",
title: "Withdraw USDC",
type: "withdraw",
assetDetails: "To external wallet",
amount: -250.0,
currency: "USDC",
date: "Oct 23, 2023",
time: "08:00 AM",
transactionId: "0xjkl...012",
type: "yield",
assetDetails: "Staking Reward",
amountDisplay: "+$12.45",
isPositive: true,
status: "pending",
hash: "0x0b22...8e91",
},
{
date: "2026-03-25",
time: "12:00",
transactionId: "0x5f99...d2be",
title: "Swap USDC → DAI",
type: "swap",
assetDetails: "550 USDC to 549 DAI",
amount: -550.0,
currency: "USDC",
status: "completed",
hash: "0x5f99...d2be",
hash: "0xjkl",
},
];

Expand Down Expand Up @@ -177,10 +160,12 @@ export default function TransactionHistoryPage() {

<div className="rounded-2xl border border-white/5 bg-[#0e2330] overflow-hidden">
<div className="grid grid-cols-12 px-5 py-3 border-b border-white/5 text-[#5e8c96] text-xs font-bold uppercase tracking-widest">
<div className="col-span-4">Date</div>
<div className="col-span-4">Description</div>
<div className="col-span-2">Token</div>
<div className="col-span-2">Date</div>
<div className="col-span-2">Transaction ID</div>
<div className="col-span-2">Type</div>
<div className="col-span-2">Asset / Details</div>
<div className="col-span-2 text-right">Amount</div>
<div className="col-span-2 text-right">Status</div>
</div>

{transactions.map((t) => (
Expand All @@ -191,12 +176,22 @@ export default function TransactionHistoryPage() {
transactionId={t.transactionId}
type={t.type}
assetDetails={t.assetDetails}
amount={t.amount}
currency={t.currency}
amountDisplay={t.amountDisplay}
isPositive={t.isPositive}
status={t.status}
onClick={(id) => console.log('Open transaction', id)}
/>
))}

{/* Empty space filler */}
<div className="h-[300px] border-b border-white/5"></div>

{/* Pagination Controls */}
<div className="px-5 py-4 flex items-center gap-4 text-sm font-semibold justify-end">
<button className="text-[#5e8c96] hover:text-[#e2f8f8] transition-colors">&lt; Prev</button>
<span className="px-4 py-1.5 bg-[rgba(6,110,110,0.2)] text-[#e2f8f8] rounded-lg">Page 1 of 12</span>
<button className="text-[#e2f8f8] hover:text-[#8ef4ef] transition-colors flex items-center gap-1">Next &gt;</button>
</div>
</div>
</div>
);
Expand Down
7 changes: 7 additions & 0 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.