Skip to content

Commit d16c991

Browse files
gregfromstlgregfromstl
committed
feat: cleanup tables and remove badges
1 parent 1607229 commit d16c991

File tree

9 files changed

+565
-149
lines changed

9 files changed

+565
-149
lines changed

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PayAnalytics.tsx‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,13 @@ import { BuyWidgetFTUX } from "./BuyWidgetFTUX";
1111
import { apiCode, embedCode, sdkCode } from "./code-examples";
1212
import { PayAnalyticsFilter } from "./PayAnalyticsFilter";
1313
import { PayCustomersTable } from "./PayCustomersTable";
14-
import { PaymentHistory } from "./PaymentHistory";
14+
import { PaymentHistory } from "./PaymentHistory.client";
1515
import { PaymentsSuccessRate } from "./PaymentsSuccessRate";
1616
import { PayNewCustomers } from "./PayNewCustomers";
1717
import { Payouts } from "./Payouts";
1818
import { TotalPayVolume } from "./TotalPayVolume";
1919
import { TotalVolumePieChart } from "./TotalVolumePieChart";
20+
import { Card } from "@/components/ui/card";
2021

2122
export async function PayAnalytics(props: {
2223
projectClientId: string;
@@ -154,13 +155,11 @@ export async function PayAnalytics(props: {
154155
</div>
155156
<PayCustomersTable client={props.client} data={walletData || []} />
156157
</GridWithSeparator>
157-
<CardContainer>
158-
<PaymentHistory
159-
client={props.client}
160-
projectClientId={props.projectClientId}
161-
teamId={props.teamId}
162-
/>
163-
</CardContainer>
158+
<PaymentHistory
159+
client={props.client}
160+
projectClientId={props.projectClientId}
161+
teamId={props.teamId}
162+
/>
164163
</div>
165164
</ResponsiveSuspense>
166165
</div>
@@ -178,9 +177,5 @@ function GridWithSeparator(props: { children: React.ReactNode }) {
178177
}
179178

180179
function CardContainer(props: { children: React.ReactNode }) {
181-
return (
182-
<div className="flex rounded-xl border border-border bg-card p-4 xl:p-6">
183-
{props.children}
184-
</div>
185-
);
180+
return <Card className="flex p-4 lg:p-6">{props.children}</Card>;
186181
}

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.tsx‎ renamed to ‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.client.tsx‎

Lines changed: 11 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,10 @@ import {
1010
} from "@/api/universal-bridge/developer";
1111
import { ExportToCSVButton } from "@/components/blocks/ExportToCSVButton";
1212
import { PaginationButtons } from "@/components/blocks/pagination-buttons";
13-
import { WalletAddress } from "@/components/blocks/wallet-address";
14-
import { Badge } from "@/components/ui/badge";
1513
import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
16-
import { Skeleton } from "@/components/ui/skeleton";
17-
import { cn } from "@/lib/utils";
18-
import {
19-
CardHeading,
20-
TableData,
21-
TableHeading,
22-
TableHeadingRow,
23-
} from "./common";
14+
import { TableRow, SkeletonTableRow } from "./PaymentsTableRow";
15+
import { CardHeading, TableHeading, TableHeadingRow } from "./common";
16+
import { formatTokenAmount } from "./format";
2417

2518
const pageSize = 50;
2619

@@ -54,7 +47,14 @@ export function PaymentHistory(props: {
5447
return (
5548
<div className="w-full">
5649
<div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
57-
<CardHeading> Transaction History</CardHeading>
50+
<div>
51+
<h2 className="font-semibold text-xl tracking-tight">
52+
Transaction History
53+
</h2>
54+
<p className="text-muted-foreground text-sm">
55+
Past transactions from your project.
56+
</p>
57+
</div>
5858
<ExportToCSVButton
5959
fileName="transaction_history"
6060
getData={async () => {
@@ -118,110 +118,6 @@ export function PaymentHistory(props: {
118118
);
119119
}
120120

121-
export function TableRow(props: { purchase: Payment; client: ThirdwebClient }) {
122-
const { purchase } = props;
123-
const originAmount = toTokens(
124-
purchase.originAmount,
125-
purchase.originToken.decimals,
126-
);
127-
const destinationAmount = toTokens(
128-
purchase.destinationAmount,
129-
purchase.destinationToken.decimals,
130-
);
131-
const type = (() => {
132-
if (purchase.originToken.chainId !== purchase.destinationToken.chainId) {
133-
return "Bridge";
134-
}
135-
if (purchase.originToken.address !== purchase.destinationToken.address) {
136-
return "Swap";
137-
}
138-
return "Transfer";
139-
})();
140-
141-
return (
142-
<tr
143-
className="fade-in-0 border-border border-b duration-300"
144-
key={purchase.id}
145-
>
146-
{/* Paid */}
147-
<TableData>{`${formatTokenAmount(originAmount)} ${purchase.originToken.symbol}`}</TableData>
148-
149-
{/* Bought */}
150-
<TableData>
151-
{`${formatTokenAmount(destinationAmount)} ${purchase.destinationToken.symbol}`}
152-
</TableData>
153-
154-
{/* Type */}
155-
<TableData>
156-
<Badge
157-
className={cn(
158-
"uppercase",
159-
type === "Transfer"
160-
? "bg-fuchsia-200 text-fuchsia-800 dark:bg-fuchsia-950 dark:text-fuchsia-200"
161-
: "bg-indigo-200 text-indigo-800 dark:bg-indigo-950 dark:text-indigo-200",
162-
)}
163-
variant="secondary"
164-
>
165-
{type}
166-
</Badge>
167-
</TableData>
168-
169-
{/* Status */}
170-
<TableData>
171-
<Badge
172-
className="capitalize"
173-
variant={
174-
purchase.status === "COMPLETED"
175-
? "success"
176-
: purchase.status === "PENDING"
177-
? "warning"
178-
: "destructive"
179-
}
180-
>
181-
{purchase.status}
182-
</Badge>
183-
</TableData>
184-
185-
{/* Address */}
186-
<TableData>
187-
<WalletAddress address={purchase.sender} client={props.client} />
188-
</TableData>
189-
190-
{/* Date */}
191-
<TableData>
192-
<p className="min-w-[180px] lg:min-w-auto">
193-
{format(new Date(purchase.createdAt), "LLL dd, y h:mm a")}
194-
</p>
195-
</TableData>
196-
</tr>
197-
);
198-
}
199-
200-
export function SkeletonTableRow() {
201-
return (
202-
<tr className="border-border border-b">
203-
<TableData>
204-
<Skeleton className="h-7 w-20" />
205-
</TableData>
206-
<TableData>
207-
<Skeleton className="h-7 w-20" />
208-
</TableData>
209-
<TableData>
210-
<Skeleton className="h-7 w-20 rounded-2xl" />
211-
</TableData>
212-
<TableData>
213-
<Skeleton className="h-7 w-20 rounded-2xl" />
214-
</TableData>
215-
<TableData>
216-
<Skeleton className="h-7 w-[140px]" />
217-
</TableData>
218-
<TableData>
219-
<Skeleton className="h-7 w-[200px]" />
220-
</TableData>
221-
</tr>
222-
);
223-
}
224-
225121
function getCSVData(data: Payment[]) {
226122
const header = ["Type", "Bought", "Paid", "Status", "Recipient", "Date"];
227123

@@ -262,13 +158,3 @@ function getCSVData(data: Payment[]) {
262158

263159
return { header, rows };
264160
}
265-
266-
function formatTokenAmount(value: string) {
267-
// have at max 3 decimal places
268-
const strValue = Number(`${Number(value).toFixed(3)}`);
269-
270-
if (Number(strValue) === 0) {
271-
return "~0";
272-
}
273-
return strValue;
274-
}

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentsTableRow.tsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import { format } from "date-fns";
2+
import { type ThirdwebClient, toTokens } from "thirdweb";
3+
import type { Payment } from "@/api/universal-bridge/developer";
4+
import { WalletAddress } from "@/components/blocks/wallet-address";
5+
import { Badge } from "@/components/ui/badge";
6+
import { Skeleton } from "@/components/ui/skeleton";
7+
import { cn } from "@/lib/utils";
8+
import { TableData } from "./common";
9+
import { formatTokenAmount } from "./format";
10+
11+
export function TableRow(props: { purchase: Payment; client: ThirdwebClient }) {
12+
const { purchase } = props;
13+
const originAmount = toTokens(
14+
purchase.originAmount,
15+
purchase.originToken.decimals,
16+
);
17+
const destinationAmount = toTokens(
18+
purchase.destinationAmount,
19+
purchase.destinationToken.decimals,
20+
);
21+
const type = (() => {
22+
if (purchase.originToken.chainId !== purchase.destinationToken.chainId) {
23+
return "Bridge";
24+
}
25+
if (purchase.originToken.address !== purchase.destinationToken.address) {
26+
return "Swap";
27+
}
28+
return "Transfer";
29+
})();
30+
31+
return (
32+
<tr
33+
className="fade-in-0 border-border border-b duration-300"
34+
key={purchase.id}
35+
>
36+
{/* Paid */}
37+
<TableData>{`${formatTokenAmount(originAmount)} ${purchase.originToken.symbol}`}</TableData>
38+
39+
{/* Bought */}
40+
<TableData>
41+
{`${formatTokenAmount(destinationAmount)} ${purchase.destinationToken.symbol}`}
42+
</TableData>
43+
44+
{/* Type */}
45+
<TableData>
46+
<Badge
47+
className={cn(
48+
"capitalize",
49+
type === "Transfer"
50+
? "bg-fuchsia-200 text-fuchsia-800 dark:bg-fuchsia-950 dark:text-fuchsia-200"
51+
: "bg-indigo-200 text-indigo-800 dark:bg-indigo-950 dark:text-indigo-200",
52+
)}
53+
variant="secondary"
54+
>
55+
{type.toLowerCase()}
56+
</Badge>
57+
</TableData>
58+
59+
{/* Status */}
60+
<TableData>
61+
<Badge
62+
className="capitalize"
63+
variant={
64+
purchase.status === "COMPLETED"
65+
? "success"
66+
: purchase.status === "PENDING"
67+
? "warning"
68+
: "destructive"
69+
}
70+
>
71+
{purchase.status.toLowerCase()}
72+
</Badge>
73+
</TableData>
74+
75+
{/* Address */}
76+
<TableData>
77+
<WalletAddress address={purchase.sender} client={props.client} />
78+
</TableData>
79+
80+
{/* Date */}
81+
<TableData>
82+
<p className="min-w-[180px] lg:min-w-auto">
83+
{format(new Date(purchase.createdAt), "LLL dd, y h:mm a")}
84+
</p>
85+
</TableData>
86+
</tr>
87+
);
88+
}
89+
90+
export function SkeletonTableRow() {
91+
return (
92+
<tr className="border-border border-b">
93+
<TableData>
94+
<Skeleton className="h-7 w-20" />
95+
</TableData>
96+
<TableData>
97+
<Skeleton className="h-7 w-20" />
98+
</TableData>
99+
<TableData>
100+
<Skeleton className="h-7 w-20 rounded-2xl" />
101+
</TableData>
102+
<TableData>
103+
<Skeleton className="h-7 w-20 rounded-2xl" />
104+
</TableData>
105+
<TableData>
106+
<Skeleton className="h-7 w-[140px]" />
107+
</TableData>
108+
<TableData>
109+
<Skeleton className="h-7 w-[200px]" />
110+
</TableData>
111+
</tr>
112+
);
113+
}

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/QuickstartSection.client.tsx‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,6 @@ export function QuickStartSection({
4747
id="fees"
4848
setupTime={1}
4949
color="violet"
50-
badge={{
51-
label: "Recommended",
52-
variant: "outline",
53-
}}
5450
features={[
5551
"Fees on every purchase",
5652
"Custom percentage",
@@ -68,10 +64,6 @@ export function QuickStartSection({
6864
id="components"
6965
color="violet"
7066
setupTime={2}
71-
badge={{
72-
label: "Popular",
73-
variant: "outline",
74-
}}
7567
features={[
7668
"Drop-in components",
7769
"Supports custom user data",

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/RecentPaymentsSection.client.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
import { Button } from "@/components/ui/button";
1313
import { Card } from "@/components/ui/card";
1414
import { TableHeading, TableHeadingRow } from "./common";
15-
import { SkeletonTableRow, TableRow } from "./PaymentHistory";
15+
import { TableRow, SkeletonTableRow } from "./PaymentsTableRow";
1616

1717
export function RecentPaymentsSection(props: {
1818
client: ThirdwebClient;
@@ -54,8 +54,8 @@ export function RecentPaymentsSection(props: {
5454
<table className="w-full selection:bg-inverted selection:text-inverted-foreground ">
5555
<thead>
5656
<TableHeadingRow>
57-
<TableHeading> Sent </TableHeading>
58-
<TableHeading> Received </TableHeading>
57+
<TableHeading>Sent</TableHeading>
58+
<TableHeading>Received</TableHeading>
5959
<TableHeading>Type</TableHeading>
6060
<TableHeading>Status</TableHeading>
6161
<TableHeading>Recipient</TableHeading>

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/format.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export function formatTokenAmount(value: string) {
2+
// have at max 3 decimal places
3+
const strValue = Number(`${Number(value).toFixed(3)}`);
4+
5+
if (Number(strValue) === 0) {
6+
return "~0";
7+
}
8+
return strValue;
9+
}

0 commit comments

Comments
 (0)