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}; }