diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/PayNewCustomers.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/PayNewCustomers.tsx
index 8f812fe56c9..93177b52f7c 100644
--- a/apps/dashboard/src/components/pay/PayAnalytics/components/PayNewCustomers.tsx
+++ b/apps/dashboard/src/components/pay/PayAnalytics/components/PayNewCustomers.tsx
@@ -3,7 +3,7 @@ import { SkeletonContainer } from "@/components/ui/skeleton";
import { useId, useMemo } from "react";
import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis } from "recharts";
import type { UniversalBridgeWalletStats } from "types/analytics";
-import { CardHeading, ChangeBadge, NoDataOverlay, chartHeight } from "./common";
+import { CardHeading, NoDataOverlay, chartHeight } from "./common";
type GraphDataItem = {
date: string;
@@ -20,7 +20,7 @@ export function PayNewCustomers(props: {
/**
* For each date, compute the total number of wallets that have never existed before in the time series
*/
- const { graphData, trend } = useMemo(() => {
+ const { graphData } = useMemo(() => {
const dates = new Set();
for (const item of props.data) {
if (!dates.has(item.date)) {
@@ -47,19 +47,7 @@ export function PayNewCustomers(props: {
value: newUsers,
});
}
- const lastPeriod = newUsersData[newUsersData.length - 3];
- const currentPeriod = newUsersData[newUsersData.length - 2];
- // Calculate the percent change from last period to current period
- const trend =
- lastPeriod &&
- currentPeriod &&
- lastPeriod.value > 0 &&
- currentPeriod.value > 0
- ? (currentPeriod.value - lastPeriod.value) / lastPeriod.value
- : lastPeriod?.value === 0 && (currentPeriod?.value || 0) > 0
- ? 100
- : undefined;
- return { graphData: newUsersData, trend };
+ return { graphData: newUsersData };
}, [props.data, props.dateFormat]);
const isEmpty = useMemo(
() => graphData.length === 0 || graphData.every((x) => x.value === 0),
@@ -89,17 +77,6 @@ export function PayNewCustomers(props: {
);
}}
/>
-
- {!isEmpty && typeof trend !== "undefined" && (
- {
- return ;
- }}
- />
- )}
@@ -125,7 +102,7 @@ export function PayNewCustomers(props: {
{payload?.date}
- Customers: {payload?.value}
+ New Customers: {payload?.value}
);
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/Payouts.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/Payouts.tsx
index b2cc9cf25d2..b4c88b76d21 100644
--- a/apps/dashboard/src/components/pay/PayAnalytics/components/Payouts.tsx
+++ b/apps/dashboard/src/components/pay/PayAnalytics/components/Payouts.tsx
@@ -4,7 +4,7 @@ import { useMemo } from "react";
import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis } from "recharts";
import type { UniversalBridgeStats } from "types/analytics";
import { toUSD } from "../../../../utils/number";
-import { CardHeading, ChangeBadge, NoDataOverlay, chartHeight } from "./common";
+import { CardHeading, NoDataOverlay, chartHeight } from "./common";
type GraphData = {
date: string;
@@ -24,7 +24,7 @@ export function Payouts(props: {
props.data.every((x) => x.developerFeeUsdCents === 0);
const barColor = isEmpty ? "hsl(var(--accent))" : "hsl(var(--chart-1))";
- const { graphData, totalPayoutsUSD, trend } = useMemo(() => {
+ const { graphData, totalPayoutsUSD } = useMemo(() => {
const dates = new Set();
for (const item of props.data) {
if (!dates.has(item.date)) {
@@ -49,21 +49,9 @@ export function Payouts(props: {
value: total / 100,
});
}
- const lastPeriod = cleanedData[cleanedData.length - 3];
- const currentPeriod = cleanedData[cleanedData.length - 2];
- const trend =
- lastPeriod &&
- currentPeriod &&
- lastPeriod.value > 0 &&
- currentPeriod.value > 0
- ? (currentPeriod.value - lastPeriod.value) / lastPeriod.value
- : lastPeriod?.value === 0 && (currentPeriod?.value || 0) > 0
- ? 100
- : undefined;
return {
graphData: cleanedData,
totalPayoutsUSD: totalPayouts / 100,
- trend,
};
}, [props.data, props.dateFormat]);
@@ -93,17 +81,6 @@ export function Payouts(props: {
);
}}
/>
-
- {!isEmpty && typeof trend !== "undefined" && (
- {
- return ;
- }}
- />
- )}
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/TotalPayVolume.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/TotalPayVolume.tsx
index cb0ef0d36e3..c25f1ab9f3c 100644
--- a/apps/dashboard/src/components/pay/PayAnalytics/components/TotalPayVolume.tsx
+++ b/apps/dashboard/src/components/pay/PayAnalytics/components/TotalPayVolume.tsx
@@ -24,11 +24,10 @@ export function TotalPayVolume(props: {
};
}) {
const uniqueId = useId();
- const [successType, setSuccessType] = useState<"success" | "fail">("success");
const [type, setType] = useState<"all" | "crypto" | "fiat">("all");
const graphData: GraphData[] | undefined = useMemo(() => {
- let data = (() => {
+ const data = (() => {
switch (type) {
case "crypto": {
return props.data?.filter((x) => x.type === "onchain");
@@ -45,13 +44,6 @@ export function TotalPayVolume(props: {
}
})();
- data = (() => {
- if (successType === "fail") {
- return data.filter((x) => x.status === "failed");
- }
- return data.filter((x) => x.status === "completed");
- })();
-
const dates = new Set
();
for (const item of data) {
if (!dates.has(item.date)) {
@@ -72,15 +64,13 @@ export function TotalPayVolume(props: {
});
}
return cleanedData;
- }, [props.data, type, successType, props.dateFormat]);
+ }, [props.data, type, props.dateFormat]);
const isEmpty =
graphData.length === 0 || graphData.every((x) => x.value === 0);
const chartColor = isEmpty
? "hsl(var(--muted-foreground))"
- : successType === "success"
- ? "hsl(var(--chart-1))"
- : "hsl(var(--chart-3))";
+ : "hsl(var(--chart-1))";
return (
@@ -104,21 +94,6 @@ export function TotalPayVolume(props: {
Fiat
-
-
)}
diff --git a/apps/dashboard/src/components/pay/PayAnalytics/components/common.tsx b/apps/dashboard/src/components/pay/PayAnalytics/components/common.tsx
index 688a01e71d7..d556c0d7e51 100644
--- a/apps/dashboard/src/components/pay/PayAnalytics/components/common.tsx
+++ b/apps/dashboard/src/components/pay/PayAnalytics/components/common.tsx
@@ -1,7 +1,3 @@
-import { Badge } from "@/components/ui/badge";
-import { ToolTipLabel } from "@/components/ui/tooltip";
-import { ArrowDownIcon, ArrowUpIcon } from "lucide-react";
-
export function NoDataOverlay() {
return (
@@ -14,39 +10,6 @@ export function CardHeading(props: { children: React.ReactNode }) {
return
{props.children}
;
}
-export function ChangeBadge(props: { percent: number }) {
- const percentValue = `${props.percent.toFixed(0)}%`;
- let label = "No change compared to prior range";
- if (props.percent !== 0) {
- label = `
- ${props.percent >= 0 ? "Increase" : "Decrease"} of ${percentValue} compared to prior range
- `;
- }
- return (
-
-
-
= 0 ? "success" : "destructive"}
- className="gap-1 px-2 py-1.5 text-sm"
- >
- {props.percent >= 0 ? (
-
- ) : (
-
- )}
-
- {new Intl.NumberFormat("en-US", {
- style: "percent",
- minimumFractionDigits: 0,
- maximumFractionDigits: 0,
- signDisplay: "never",
- }).format(props.percent)}
-
-
-
- );
-}
-
export function TableData({ children }: { children: React.ReactNode }) {
return
{children} | ;
}