diff --git a/src/app/connect.tsx b/src/app/connect.tsx
new file mode 100644
index 0000000000..b7820e7e69
--- /dev/null
+++ b/src/app/connect.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { ConnectButton } from "thirdweb/react";
+import { thirdwebClient } from "../lib/thirdweb-client";
+import { useTheme } from "next-themes";
+
+export function CustomConnectButton() {
+ const { theme } = useTheme();
+
+ return (
+
+ );
+}
diff --git a/src/components/analytics/area-chart.tsx b/src/components/analytics/area-chart.tsx
index 87a55ef028..bd3d5076ea 100644
--- a/src/components/analytics/area-chart.tsx
+++ b/src/components/analytics/area-chart.tsx
@@ -1,5 +1,5 @@
+/* eslint-disable react/forbid-dom-props */
import { CustomToolTip } from "./custom-tooltip";
-import { Box, BoxProps, Center } from "@chakra-ui/react";
import { useEffect, useId, useState } from "react";
import {
Area,
@@ -9,7 +9,7 @@ import {
XAxis,
YAxis,
} from "recharts";
-import { Text } from "tw-components";
+import { cn } from "../../@/lib/utils";
export type GenericDataType = Record
;
@@ -18,7 +18,7 @@ type IndexType = "date";
export interface AreaChartProps<
TData extends GenericDataType,
TIndexKey extends keyof TData,
-> extends BoxProps {
+> {
data: TData[];
index: {
id: TIndexKey;
@@ -36,6 +36,8 @@ export interface AreaChartProps<
showXAxis?: boolean;
showYAxis?: boolean;
startEndOnly?: boolean;
+ className?: string;
+ isAnimationActive?: boolean;
}
const AreaChart = <
@@ -48,7 +50,7 @@ const AreaChart = <
showXAxis,
showYAxis,
startEndOnly,
- ...boxProps
+ className,
}: AreaChartProps) => {
const id = useId();
@@ -61,7 +63,7 @@ const AreaChart = <
}
return (
-
+
@@ -140,13 +142,10 @@ const AreaChart = <
})
: payload
}
- style={{
- fontSize: "12px",
- fontFamily: "var(--chakra-fonts-body)",
- }}
- stroke="var(--chakra-colors-paragraph)"
+ className="text-xs font-sans"
+ stroke="hsl(var(--muted-foreground))"
tickLine={false}
- axisLine={{ stroke: "var(--chakra-colors-borderColor)" }}
+ axisLine={{ stroke: "hsl(var(--border))" }}
interval="preserveStartEnd"
minTickGap={5}
domain={["dataMin", "dataMax"]}
@@ -168,10 +167,7 @@ const AreaChart = <
? category.format(payload)
: payload.toString();
}}
- style={{
- fontSize: "12px",
- fontFamily: "var(--chakra-fonts-body)",
- }}
+ className="text-xs font-sans"
domain={([dataMin, dataMax]) => [
// start from 0 unless dataMin is below 0 in which case start from dataMin - 10%
Math.min(0, dataMin - Math.round(dataMin * 0.1)),
@@ -180,14 +176,14 @@ const AreaChart = <
]}
tick={{ transform: "translate(-3, 0)" }}
type="number"
- stroke="var(--chakra-colors-paragraph)"
+ stroke="hsl(var(--muted-foreground))"
tickLine={false}
- axisLine={{ stroke: "var(--chakra-colors-borderColor)" }}
+ axisLine={{ stroke: "hsl(var(--border))" }}
interval="preserveStartEnd"
/>
-
+
);
};
@@ -206,8 +202,8 @@ function generateFakeData() {
return data;
}
-export const AreaChartLoadingState: React.FC = () => {
- const [loadingData, setLoadingData] = useState(generateFakeData());
+export const AreaChartLoadingState = (props: { height?: string }) => {
+ const [loadingData, setLoadingData] = useState(() => generateFakeData());
// legitimate use case
// eslint-disable-next-line no-restricted-syntax
@@ -218,26 +214,21 @@ export const AreaChartLoadingState: React.FC = () => {
return () => clearInterval(interval);
}, []);
return (
-
-
-
- Loading Chart...
-
-
+
);
};
diff --git a/src/components/analytics/auto-bar-chart.tsx b/src/components/analytics/auto-bar-chart.tsx
index 4d059fea60..da227a44b1 100644
--- a/src/components/analytics/auto-bar-chart.tsx
+++ b/src/components/analytics/auto-bar-chart.tsx
@@ -1,5 +1,5 @@
+import { useTheme } from "next-themes";
import { StackToolTip } from "./stack-tooltip";
-import { Box, BoxProps, useColorMode } from "@chakra-ui/react";
import { useId, useMemo, useState } from "react";
import {
Bar,
@@ -17,7 +17,7 @@ type IndexType = "date";
interface AutoBarChartProps<
TData extends GenericDataType,
TIndexKey extends keyof TData,
-> extends BoxProps {
+> {
data: TData[];
index: {
id: TIndexKey;
@@ -81,19 +81,18 @@ export const AutoBarChart = <
showXAxis,
showYAxis,
stacked,
- ...boxProps
}: AutoBarChartProps) => {
- const { colorMode } = useColorMode();
+ const { theme } = useTheme();
const [hoverKey, setHoverKey] = useState("");
const id = useId();
const barColors = useMemo(() => {
- if (colorMode === "light") {
+ if (theme === "light") {
return BAR_COLORS_LIGHT;
}
return BAR_COLORS_DARK;
- }, [colorMode]);
+ }, [theme]);
const categories = useMemo(() => {
const autoKeys: string[] = [];
@@ -131,126 +130,118 @@ export const AutoBarChart = <
}
return (
-
-
-
-
- {categories.map((cat) => (
-
-
-
-
- ))}
-
-
+
+
+
{categories.map((cat) => (
- {
- setHoverKey(item.tooltipPayload[0].dataKey);
- }}
- onMouseLeave={() => {
- setHoverKey("");
- }}
- />
+ id={`bar_color_${id}_${cat.id as string}`}
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="100%"
+ gradientUnits="userSpaceOnUse"
+ >
+
+
+
))}
- {
- if (!active || !payload) {
- return null;
- }
-
- const { time, ...values } = payload[0].payload;
- return (
-
- );
+
+
+ {categories.map((cat) => (
+ {
+ setHoverKey(item.tooltipPayload[0].dataKey);
}}
- cursor={
- !hoverKey || categories.length <= 1
- ? {
- stroke: "#EAEAEA",
- fill: "#EAEAEA",
- opacity: 0.3,
- strokeDasharray: 2,
- strokeWidth: 0,
- }
- : false
- }
- />
-
-
- index.format
- ? index.format(payload)
- : index.type === "date"
- ? new Date(payload).toLocaleDateString(undefined, {
- day: "2-digit",
- month: "2-digit",
- year: "2-digit",
- })
- : payload
- }
- style={{
- fontSize: "12px",
- fontFamily: "var(--chakra-fonts-body)",
+ onMouseLeave={() => {
+ setHoverKey("");
}}
- stroke="var(--chakra-colors-paragraph)"
- tickLine={false}
- axisLine={false}
- interval="preserveStartEnd"
- minTickGap={5}
- domain={["dataMin - 86400000", "dataMax + 86400000"]}
- type="number"
- tick={{ transform: "translate(0, 6)" }}
- ticks={[
- sortedData[0][index.id],
- sortedData[Math.floor(sortedData.length / 2)][index.id],
- sortedData[sortedData.length - 1][index.id],
- ]}
/>
+ ))}
+ {
+ if (!active || !payload) {
+ return null;
+ }
- {
- return payload.toLocaleString();
- }}
- style={{
- fontSize: "12px",
- fontFamily: "var(--chakra-fonts-body)",
- }}
- type="number"
- stroke="var(--chakra-colors-paragraph)"
- tickLine={false}
- axisLine={false}
- />
-
-
-
+ const { time, ...values } = payload[0].payload;
+ return (
+
+ );
+ }}
+ cursor={
+ !hoverKey || categories.length <= 1
+ ? {
+ stroke: "#EAEAEA",
+ fill: "#EAEAEA",
+ opacity: 0.3,
+ strokeDasharray: 2,
+ strokeWidth: 0,
+ }
+ : false
+ }
+ />
+
+
+ index.format
+ ? index.format(payload)
+ : index.type === "date"
+ ? new Date(payload).toLocaleDateString(undefined, {
+ day: "2-digit",
+ month: "2-digit",
+ year: "2-digit",
+ })
+ : payload
+ }
+ className="text-xs font-sans"
+ stroke="hsl(var(--muted-foreground))"
+ tickLine={false}
+ axisLine={false}
+ interval="preserveStartEnd"
+ minTickGap={5}
+ domain={["dataMin - 86400000", "dataMax + 86400000"]}
+ type="number"
+ tick={{ transform: "translate(0, 6)" }}
+ ticks={[
+ sortedData[0][index.id],
+ sortedData[Math.floor(sortedData.length / 2)][index.id],
+ sortedData[sortedData.length - 1][index.id],
+ ]}
+ />
+
+ {
+ return payload.toLocaleString();
+ }}
+ className="text-xs font-sans"
+ type="number"
+ stroke="hsl(var(--muted-foreground))"
+ tickLine={false}
+ axisLine={false}
+ />
+
+
);
};
diff --git a/src/components/analytics/bar-chart.tsx b/src/components/analytics/bar-chart.tsx
index ae71e3d6c3..69ccd239e5 100644
--- a/src/components/analytics/bar-chart.tsx
+++ b/src/components/analytics/bar-chart.tsx
@@ -1,5 +1,5 @@
+import { useTheme } from "next-themes";
import { CustomToolTip } from "./custom-tooltip";
-import { Box, BoxProps, useColorMode } from "@chakra-ui/react";
import { useId, useMemo } from "react";
import {
Bar,
@@ -17,7 +17,7 @@ type IndexType = "date";
interface BarChartProps<
TData extends GenericDataType,
TIndexKey extends keyof TData,
-> extends BoxProps {
+> {
data: TData[];
index: {
id: TIndexKey;
@@ -46,18 +46,17 @@ export const BarChart = <
categories,
showXAxis,
showYAxis,
- ...boxProps
}: BarChartProps) => {
- const { colorMode } = useColorMode();
+ const { theme } = useTheme();
const id = useId();
const defaultBarColor = useMemo(() => {
- if (colorMode === "light") {
+ if (theme === "light") {
return "#649CDD";
}
return "#3682DA";
- }, [colorMode]);
+ }, [theme]);
if (!data.length) {
return null;
@@ -68,120 +67,112 @@ export const BarChart = <
}
return (
-
-
-
-
- {categories.map((cat) => (
-
-
-
-
- ))}
-
-
+
+
+
{categories.map((cat) => (
-
+ id={`bar_color_${id}_${cat.id as string}`}
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="100%"
+ gradientUnits="userSpaceOnUse"
+ >
+
+
+
))}
- {
- const payloadKey = payload?.[0]?.dataKey;
- const category = categories.find((cat) => cat.id === payloadKey);
- return (
-
- );
- }}
- cursor={{
- stroke: defaultBarColor,
- fill: defaultBarColor,
- opacity: 0.2,
- strokeDasharray: 2,
- strokeWidth: 0,
- }}
- />
+
-
- index.format
- ? index.format(payload)
- : index.type === "date"
- ? new Date(payload).toLocaleDateString(undefined, {
- day: "2-digit",
- month: "2-digit",
- year: "2-digit",
- })
- : payload
- }
- style={{
- fontSize: "12px",
- fontFamily: "var(--chakra-fonts-body)",
- }}
- stroke="var(--chakra-colors-paragraph)"
- tickLine={false}
- axisLine={false}
- interval="preserveStartEnd"
- minTickGap={5}
- domain={["dataMin - 86400000", "dataMax + 86400000"]}
- type="number"
- tick={{ transform: "translate(0, 6)" }}
- ticks={[
- data[0][index.id],
- data[Math.floor(data.length / 2)][index.id],
- data[data.length - 1][index.id],
- ]}
+ {categories.map((cat) => (
+
+ ))}
+ {
+ const payloadKey = payload?.[0]?.dataKey;
+ const category = categories.find((cat) => cat.id === payloadKey);
+ return (
+
+ );
+ }}
+ cursor={{
+ stroke: defaultBarColor,
+ fill: defaultBarColor,
+ opacity: 0.2,
+ strokeDasharray: 2,
+ strokeWidth: 0,
+ }}
+ />
- {
- const category = categories[0];
- return category?.format
- ? category.format(payload)
- : payload.toLocaleString();
- }}
- style={{
- fontSize: "12px",
- fontFamily: "var(--chakra-fonts-body)",
- }}
- type="number"
- stroke="var(--chakra-colors-paragraph)"
- tickLine={false}
- axisLine={false}
- />
-
-
-
+
+ index.format
+ ? index.format(payload)
+ : index.type === "date"
+ ? new Date(payload).toLocaleDateString(undefined, {
+ day: "2-digit",
+ month: "2-digit",
+ year: "2-digit",
+ })
+ : payload
+ }
+ className="font-sans text-xs"
+ stroke="hsl(var(--muted-foreground))"
+ tickLine={false}
+ axisLine={false}
+ interval="preserveStartEnd"
+ minTickGap={5}
+ domain={["dataMin - 86400000", "dataMax + 86400000"]}
+ type="number"
+ tick={{ transform: "translate(0, 6)" }}
+ ticks={[
+ data[0][index.id],
+ data[Math.floor(data.length / 2)][index.id],
+ data[data.length - 1][index.id],
+ ]}
+ />
+
+ {
+ const category = categories[0];
+ return category?.format
+ ? category.format(payload)
+ : payload.toLocaleString();
+ }}
+ className="font-sans text-xs"
+ stroke="hsl(var(--muted-foreground))"
+ type="number"
+ tickLine={false}
+ axisLine={false}
+ />
+
+
);
};
diff --git a/src/components/analytics/chart-container.tsx b/src/components/analytics/chart-container.tsx
index f92c84c868..79a24950fb 100644
--- a/src/components/analytics/chart-container.tsx
+++ b/src/components/analytics/chart-container.tsx
@@ -1,31 +1,35 @@
import { AreaChartLoadingState } from "./area-chart";
-import { AspectRatio, AspectRatioProps, Flex } from "@chakra-ui/react";
import { Suspense } from "react";
import { ComponentWithChildren } from "types/component-with-children";
+import { AspectRatio } from "../../@/components/ui/aspect-ratio";
+import { cn } from "../../@/lib/utils";
type SupportedChartType = "area";
-interface ChartContainerProps extends AspectRatioProps {
+interface ChartContainerProps {
chartTitle?: JSX.Element;
chartType?: SupportedChartType;
+ ratio: number;
+ className?: string;
}
export const ChartContainer: ComponentWithChildren = ({
chartType = "area",
chartTitle,
+ ratio,
children,
- ...aspectRatioProps
+ className,
}) => {
return (
-
+
{chartTitle}
-
+
{/* suspense to handle loading state */}
}>
{children}
-
+
{payload[0]?.payload?.time && (
-
-
+
+
+
{new Date(payload[0].payload.time).toLocaleDateString(
undefined,
formattingOptions,
)}
-
-
+
+
+
+
{valueFormatter
? valueFormatter(payload[0].value)
: payload[0].value.toLocaleString()}
-
-
-
+
+
+
+
+
{new Date(time).toLocaleDateString(undefined, formattingOptions)}
-
-
+
+
-
+
{Object.entries(values)
.reverse()
.map(([key, value]) => (
-
{hoverKey && key !== hoverKey ? (
`${key}: `
@@ -63,9 +43,9 @@ export const StackToolTip: React.FC = ({
{key}:
)}
{value.toLocaleString()}
-
+
))}
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ return (
+
+
+ setRange({
+ from,
+ to: range.to,
+ type: "custom",
+ })
+ }
+ setTo={(to) =>
+ setRange({
+ from: range.from,
+ to,
+ type: "custom",
+ })
+ }
+ header={presets}
+ labelOverride={range.label}
+ />
+
+ );
+}
+
+function GridWithSeparator(props: { children: React.ReactNode }) {
+ return (
+
+ {props.children}
+ {/* Desktop - horizontal middle */}
+
+
+ New Customers
+
+ {uiData.data && (
+
+ )}
+
+
+ {/* Chart */}
+ {!uiData.isError ? (
+
+ ) : (
+
+ )}
+
+ );
+}
+
+function RenderData(props: {
+ data?: UIData;
+ intervalType: "day" | "week";
+ setIntervalType: (intervalType: "day" | "week") => void;
+}) {
+ const uniqueId = useId();
+
+ return (
+
+
+
{
+ return (
+ {v}
+ );
+ }}
+ />
+
+ {
+ return ;
+ }}
+ />
+
+
+
+ {props.data?.graphData ? (
+
+
+
+
+
+
+
+
+
+ {
+ const payload = x.payload?.[0]?.payload as
+ | GraphDataItem
+ | undefined;
+ return (
+
+
+ {payload?.date}
+
+
+ Customers: {payload?.value}
+
+
+ ) : (
+
+ )}
+
+
+
+ Transaction History
+ {purchases && (
+ {
+ return getCSVData(purchases);
+ }}
+ />
+ )}
+
+
+
+
+ {!uiData.isError ? (
+
purchasesQuery.fetchNextPage()}
+ isLoadingMore={purchasesQuery.isFetching}
+ />
+ ) : (
+
+ )}
+
+
+
+ Amount
+ Type
+ Paid
+ Bought
+ Status
+ Recipient
+ Date
+
+
+
+ {props.data ? (
+ <>
+ {props.data.purchases.map((purchase) => {
+ return (
+
+ );
+ })}
+
+ ) : (
+ <>
+ {new Array(20).fill(0).map((_, i) => (
+
+ ))}
+
+ )}
+
+
+
+ {props.data && (
+ <>
+ {props.data?.showLoadMore ? (
+
+
+
+ ) : (
+
+ No more transactions
+
+ )}
+
+ )}
+
+ );
+}
+
+function TableRow(props: { purchase: PayPurchasesData["purchases"][0] }) {
+ const { purchase } = props;
+
+ return (
+
+ {/* Amount */}
+
+ {(purchase.toAmountUSDCents / 100).toLocaleString("en-US", {
+ currency: "USD",
+ style: "currency",
+ })}
+
+
+ {/* Type */}
+
+
+ {purchase.purchaseType === "ONRAMP" ? "Fiat" : "Crypto"}
+
+
+
+ {/* Paid */}
+
+ {purchase.purchaseType === "SWAP"
+ ? purchase.fromToken.symbol
+ : purchase.fromCurrencySymbol}
+
+
+ {/* Bought */}
+ {purchase.toToken.symbol}
+
+ {/* Status */}
+
+
+ {purchase.status}
+
+
+
+ {/* Address */}
+
+
+
+
+ {/* Date */}
+
+
+ {format(new Date(purchase.updatedAt), "LLL dd, y h:mm a")}
+
+
+
+ );
+}
+
+function SkeletonTableRow(props: { rowIndex: number }) {
+ const skeleton = (
+
+ );
+
+ return (
+
+ {skeleton}
+ {skeleton}
+ {skeleton}
+ {skeleton}
+ {skeleton}
+ {skeleton}
+ {skeleton}
+
+ );
+}
+
+function TableData({ children }: { children: React.ReactNode }) {
+ return {children} | ;
+}
+
+function TableHeading(props: { children: React.ReactNode }) {
+ return (
+
+ {props.children}
+ |
+ );
+}
+
+function getCSVData(data: PayPurchasesData["purchases"]) {
+ const header = [
+ "Amount",
+ "Type",
+ "Status",
+ // to
+ "Buy Token address",
+ "Buy Token chain",
+ "Buy Token Symbol",
+ // from
+ "From Token address",
+ "From Token chain",
+ "From Token Symbol",
+ "From currency",
+ // status
+ "Recipient",
+ // recipient
+ "Date",
+ ];
+
+ const rows: string[][] = data.map((purchase) => [
+ // amount
+ (purchase.toAmountUSDCents / 100).toLocaleString("en-US", {
+ currency: "USD",
+ style: "currency",
+ }),
+ // type
+ purchase.purchaseType === "ONRAMP" ? "Fiat" : "Crypto",
+ // status
+ purchase.status,
+ // to
+ purchase.toToken.tokenAddress,
+ `${purchase.toToken.chainId}`,
+ purchase.toToken.symbol,
+ // from
+ purchase.purchaseType === "SWAP" ? purchase.fromToken.tokenAddress : "",
+ purchase.purchaseType === "SWAP" ? `${purchase.fromToken.chainId}` : "",
+ purchase.purchaseType === "SWAP" ? purchase.fromToken.symbol : "",
+ purchase.purchaseType === "ONRAMP" ? purchase.fromCurrencySymbol : "",
+
+ // recipient
+ purchase.toAddress,
+ format(new Date(purchase.updatedAt), "LLL dd y h:mm a"),
+ ]);
+
+ return { header, rows };
+}
diff --git a/src/components/pay/PayAnalytics/components/PaymentsSuccessRate.tsx b/src/components/pay/PayAnalytics/components/PaymentsSuccessRate.tsx
new file mode 100644
index 0000000000..1e13537ee2
--- /dev/null
+++ b/src/components/pay/PayAnalytics/components/PaymentsSuccessRate.tsx
@@ -0,0 +1,189 @@
+import { useState } from "react";
+import { CardHeading, NoDataAvailable } from "./common";
+import { usePayVolume } from "../hooks/usePayVolume";
+import {
+ Select,
+ SelectTrigger,
+ SelectValue,
+ SelectContent,
+ SelectItem,
+} from "@/components/ui/select";
+import { SkeletonContainer } from "../../../../@/components/ui/skeleton";
+
+type UIData = {
+ succeeded: number;
+ failed: number;
+ rate: number;
+ total: number;
+};
+
+/* eslint-disable react/forbid-dom-props */
+export function PaymentsSuccessRate(props: {
+ clientId: string;
+ from: Date;
+ to: Date;
+}) {
+ const [type, setType] = useState<"all" | "crypto" | "fiat">("all");
+ const volumeQuery = usePayVolume({
+ clientId: props.clientId,
+ from: props.from,
+ to: props.to,
+ intervalType: "day",
+ });
+
+ function getUIData(): {
+ data?: UIData;
+ isError?: boolean;
+ isLoading?: boolean;
+ } {
+ if (volumeQuery.isLoading) {
+ return { isLoading: true };
+ }
+
+ if (volumeQuery.isError) {
+ return { isError: true };
+ }
+
+ const aggregated = volumeQuery.data.aggregate;
+ let data: UIData;
+
+ if (type === "all") {
+ const succeeded = aggregated.sum.succeeded.count;
+ const failed = aggregated.sum.failed.count;
+ const total = succeeded + failed;
+ const rate = (succeeded / (succeeded + failed)) * 100;
+ data = { succeeded, failed, rate, total };
+ } else if (type === "crypto") {
+ const succeeded = aggregated.buyWithCrypto.succeeded.count;
+ const failed = aggregated.buyWithCrypto.failed.count;
+ const total = succeeded + failed;
+ const rate = (succeeded / (succeeded + failed)) * 100;
+ data = { succeeded, failed, rate, total };
+ } else if (type === "fiat") {
+ const succeeded = aggregated.buyWithFiat.succeeded.count;
+ const failed = aggregated.buyWithFiat.failed.count;
+ const total = succeeded + failed;
+ const rate = (succeeded / (succeeded + failed)) * 100;
+ data = { succeeded, failed, rate, total };
+ } else {
+ throw new Error("Invalid tab");
+ }
+
+ if (data.total === 0) {
+ return {
+ isError: true,
+ };
+ }
+
+ return { data };
+ }
+
+ const uiData = getUIData();
+
+ return (
+
+
+ Payments
+ {uiData.data && (
+
+ )}
+
+
+
+ {!uiData.isError ? (
+
+ ) : (
+
+ )}
+
+
+
+
}
+ >
+
+
+
+
+
+
+
+
+
+
+
{
+ return (
+
+ {v.toLocaleString("en-US", {
+ currency: "USD",
+ style: "currency",
+ })}
+
+ );
+ }}
+ />
+
+ Payouts
+
+ {uiQuery.data && (
+
+ )}
+
+
+ {!uiQuery.isError ? (
+
+ ) : (
+
+ )}
+
+ );
+}
+
+function RenderData(props: {
+ data?: UIQueryData;
+ intervalType: "day" | "week";
+ setIntervalType: (intervalType: "day" | "week") => void;
+}) {
+ return (
+
+
+
{
+ return (
+
+ {value.toLocaleString("en-US", {
+ currency: "USD",
+ style: "currency",
+ })}
+
+ );
+ }}
+ />
+
+ {
+ return ;
+ }}
+ />
+
+
+
+ {props.data?.graphData ? (
+
+
+ {
+ const payload = x.payload?.[0]?.payload as
+ | GraphData
+ | undefined;
+ return (
+
+
+ {payload?.date}
+
+
+ {payload?.value.toLocaleString("en-US", {
+ currency: "USD",
+ style: "currency",
+ })}
+
+
+ ) : (
+
+ )}
+
+
+ {props.data && (
+
+
+
+ )}
+
+ {/* header */}
+
+ Top customers by spend
+ {customersData && (
+ {
+ return getCSVData(customersData);
+ }}
+ />
+ )}
+
+
+
+
+ {!uiData.isError ? (
+
{
+ topCustomersQuery.fetchNextPage();
+ }}
+ />
+ ) : (
+
+ )}
+
+
+
+ Wallet Address
+ Total spend
+
+
+
+ {props.data ? (
+ props.data?.customers.map((customer, i) => {
+ return (
+
+ );
+ })
+ ) : (
+ <>
+ {new Array(5).fill(0).map((_, i) => (
+
+ ))}
+
+ )}
+
+
+
+ {props.data?.showLoadMore && (
+
+
+
+ )}
+
+ );
+}
+
+function TableRow(props: {
+ customer?: {
+ walletAddress: string;
+ totalSpendUSDCents: number;
+ };
+ rowIndex: number;
+}) {
+ const delayAnim = {
+ animationDelay: `${props.rowIndex * 100}ms`,
+ };
+
+ return (
+
+
+ {
+ return (
+
+ );
+ }}
+ />
+
+
+ {
+ return (
+
+ {(v / 100).toLocaleString("en-US", {
+ currency: "USD",
+ style: "currency",
+ })}
+
+ );
+ }}
+ />
+
+
+ );
+}
+
+function TableData({ children }: { children: React.ReactNode }) {
+ return {children} | ;
+}
+
+function TableHeading(props: { children: React.ReactNode }) {
+ return (
+
+ {props.children}
+ |
+ );
+}
+
+function getCSVData(data: PayTopCustomersData["customers"]) {
+ const header = ["Wallet Address", "Total spend"];
+ const rows = data.map((customer) => [
+ customer.walletAddress,
+ (customer.totalSpendUSDCents / 100).toLocaleString("en-US", {
+ currency: "USD",
+ style: "currency",
+ }),
+ ]);
+
+ return { header, rows };
+}
diff --git a/src/components/pay/PayAnalytics/components/TotalPayVolume.tsx b/src/components/pay/PayAnalytics/components/TotalPayVolume.tsx
new file mode 100644
index 0000000000..ae8b02ffa8
--- /dev/null
+++ b/src/components/pay/PayAnalytics/components/TotalPayVolume.tsx
@@ -0,0 +1,201 @@
+/* eslint-disable react/forbid-dom-props */
+import { useId, useState } from "react";
+import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis } from "recharts";
+import { usePayVolume, type PayVolumeData } from "../hooks/usePayVolume";
+import { CardHeading, NoDataAvailable, chartHeight } from "./common";
+import { IntervalSelector } from "./IntervalSelector";
+import { format } from "date-fns";
+import {
+ Select,
+ SelectTrigger,
+ SelectValue,
+ SelectContent,
+ SelectItem,
+} from "@/components/ui/select";
+import { AreaChartLoadingState } from "../../../analytics/area-chart";
+
+type GraphData = {
+ date: string;
+ value: number;
+};
+
+export function TotalPayVolume(props: {
+ clientId: string;
+ from: Date;
+ to: Date;
+}) {
+ const [intervalType, setIntervalType] = useState<"day" | "week">("day");
+
+ const volumeQuery = usePayVolume({
+ clientId: props.clientId,
+ from: props.from,
+ intervalType,
+ to: props.to,
+ });
+
+ return (
+
+ {!volumeQuery.isError ? (
+
+ ) : (
+
+ )}
+
+ );
+}
+
+function RenderData(props: {
+ data?: PayVolumeData;
+ intervalType: "day" | "week";
+ setIntervalType: (intervalType: "day" | "week") => void;
+}) {
+ const uniqueId = useId();
+ const [successType, setSuccessType] = useState<"success" | "fail">("success");
+ const [type, setType] = useState<"all" | "crypto" | "fiat">("all");
+
+ const graphData: GraphData[] | undefined = props.data?.intervalResults.map(
+ (x) => {
+ const date = format(new Date(x.interval), "LLL dd");
+
+ if (type === "crypto") {
+ return {
+ date,
+ value:
+ x.buyWithCrypto[successType === "success" ? "succeeded" : "failed"]
+ .amountUSDCents / 100,
+ };
+ }
+
+ if (type === "fiat") {
+ return {
+ date,
+ value:
+ x.buyWithFiat[successType === "success" ? "succeeded" : "failed"]
+ .amountUSDCents / 100,
+ };
+ }
+
+ return {
+ date,
+ value:
+ x.sum[successType === "success" ? "succeeded" : "failed"]
+ .amountUSDCents / 100,
+ };
+ },
+ );
+
+ const chartColor =
+ successType === "success"
+ ? "hsl(var(--success-foreground))"
+ : "hsl(var(--destructive-foreground))";
+
+ return (
+
+
+
Volume
+
+ {graphData && (
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ {graphData ? (
+
+
+
+
+
+
+
+
+
+ {
+ const payload = x.payload?.[0]?.payload as
+ | GraphData
+ | undefined;
+ return (
+
+
+ {payload?.date}
+
+
+ {payload?.value.toLocaleString("en-US", {
+ currency: "USD",
+ style: "currency",
+ })}
+
+
+ ) : (
+
+ )}
+
+
+ {/* Left */}
+
+
+
+ {volumeData.map((entry, index) => (
+ |
+ ))}
+
+
+
+
+
+
Total Volume
+
+
{
+ const totalAmount = v.toLocaleString("en-US", {
+ currency: "USD",
+ style: "currency",
+ });
+
+ return (
+ 6 ? "text-3xl" : "text-4xl",
+ )}
+ >
+ {totalAmount}
+
+ );
+ }}
+ />
+
+
+
+
+ {/* Right */}
+
+
+ {volumeData.map((v, i) => (
+
+ ))}
+
+
+
+
+
+
+ {props.label}
+
+
+
{
+ return (
+
+ {amount.toLocaleString("en-US", {
+ currency: "USD",
+ style: "currency",
+ })}
+
+ );
+ }}
+ />
+
+
{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="text-sm gap-1 px-2 py-1.5"
+ >
+ {props.percent >= 0 ? (
+
+ ) : (
+
+ )}
+ {percentValue}
+
+
+
Confirm in your wallet
diff --git a/src/contract-ui/tabs/analytics/page.tsx b/src/contract-ui/tabs/analytics/page.tsx
index b9de6d7aa4..535a4e5a43 100644
--- a/src/contract-ui/tabs/analytics/page.tsx
+++ b/src/contract-ui/tabs/analytics/page.tsx
@@ -112,7 +112,7 @@ export const ContractAnalyticsPage: React.FC
= ({
transaction to this contract.
-
+
= ({
contract.
-
+
= ({
contract.
-
+
= ({
transactions.
-
+
= ({
The breakdown of events emitted by this contract.
-
+
= ({
-
+
= ({
-
+
= ({
-
+
= ({
-
+
{
app each day.
-
+
{
each day.
-
+
{
Distribution of wallet types used to connect to your app.
-
+
{
onChange: (value: "pay" | "checkouts") => setTabOption(value),
});
- const { isLoggedIn } = useLoggedInUser();
+ const { isLoggedIn, isLoading } = useLoggedInUser();
const {
hasApiKeys,
hasPayApiKeys,
@@ -179,6 +182,14 @@ const DashboardConnectPay: ThirdwebNextPage = () => {
} = usePayConfig();
// Pay setting api key configuration
+ if (isLoading) {
+ return (
+
+
+
+ );
+ }
+
if (!isLoggedIn) {
return ;
}
@@ -194,7 +205,7 @@ const DashboardConnectPay: ThirdwebNextPage = () => {
>
- Pay Settings
+ Pay
Configure developer settings for all Pay features, including{" "}
@@ -264,25 +275,68 @@ const DashboardConnectPay: ThirdwebNextPage = () => {
) : (
+
+ )}
+
+ );
+};
+
+function PayUI(props: {
+ hasPayApiKeys: boolean;
+ hasApiKeys: boolean;
+ selectedKey: ApiKey | undefined;
+}) {
+ const { hasPayApiKeys, hasApiKeys, selectedKey } = props;
+ const [activeTab, setActiveTab] = useState<"settings" | "analytics">(
+ "analytics",
+ );
+
+ return (
+
+ {!hasPayApiKeys && (
+
+ )}
+
+ {hasPayApiKeys && selectedKey && (
<>
- {!hasPayApiKeys && (
-
- )}
+
setActiveTab("analytics"),
+ isEnabled: true,
+ },
+ {
+ name: "Settings",
+ isActive: activeTab === "settings",
+ onClick: () => setActiveTab("settings"),
+ isEnabled: true,
+ },
+ ]}
+ />
- {hasPayApiKeys && selectedKey && }
+
+
+ {activeTab === "settings" && }
+ {activeTab === "analytics" && }
)}
-
+