[Dashboard] Feature: Setup payment link UI

apps/dashboard/src/@/api/universal-bridge/links.ts

@@ -0,0 +1,36 @@
+import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/server-envs";
+import { UB_BASE_URL } from "./constants";
+
+type PaymentLink = {
+  clientId: string;
+  label?: string;
+  receiver: string;
+  destinationToken: {
+    address: string;
+    symbol: string;
+    decimals: number;
+    chainId: number;
+  };
+  amount: bigint;
+  purchaseData: unknown;
+};
+
+export async function getPaymentLink(props: {
+  paymentId: string;
+}) {
+  const res = await fetch(`${UB_BASE_URL}/v1/links/${props.paymentId}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      "x-secret-key": DASHBOARD_THIRDWEB_SECRET_KEY,
+    },
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const { data } = await res.json();
+  return data as PaymentLink;
+}

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/TotalSponsoredCard.tsx

@@ -118,9 +118,9 @@ export async function TotalSponsoredChartCardUI({
       className={className}
       // Get the trend from the last two COMPLETE periods
       trendFn={(data, key) =>
-        data.filter((d) => (d[key] as number) > 0).length >= 3
+        data.filter((d) => (d[key] as number) > 0).length >= 2
           ? ((data[data.length - 2]?.[key] as number) ?? 0) /
-              ((data[data.length - 3]?.[key] as number) ?? 0) -
+              ((data[0]?.[key] as number) ?? 0) -
             1
           : undefined
       }

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/TransactionsCard.tsx

@@ -119,9 +119,9 @@ export async function TransactionsChartCardUI({
       className={className}
       // Get the trend from the last two COMPLETE periods
       trendFn={(data, key) =>
-        data.filter((d) => (d[key] as number) > 0).length >= 3
+        data.filter((d) => (d[key] as number) > 0).length >= 2
           ? ((data[data.length - 2]?.[key] as number) ?? 0) /
-              ((data[data.length - 3]?.[key] as number) ?? 0) -
+              ((data[0]?.[key] as number) ?? 0) -
             1
           : undefined
       }

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/analytics/page.tsx

@@ -320,14 +320,16 @@ function AppHighlightsCard({
         "totalVolume"
       }
       data={timeSeriesData}
-      aggregateFn={(_data, key) =>
-        timeSeriesData.reduce((acc, curr) => acc + curr[key], 0)
-      }
-      // Get the trend from the last two COMPLETE periods
+      aggregateFn={(_data, key) => {
+        if (key === "activeUsers") {
+          return Math.max(...timeSeriesData.map((d) => d[key]));
+        }
+        return timeSeriesData.reduce((acc, curr) => acc + curr[key], 0);
+      }}
       trendFn={(data, key) =>
-        data.filter((d) => (d[key] as number) > 0).length >= 3
+        data.filter((d) => (d[key] as number) > 0).length >= 2
           ? ((data[data.length - 2]?.[key] as number) ?? 0) /
-              ((data[data.length - 3]?.[key] as number) ?? 0) -
+              ((data[0]?.[key] as number) ?? 0) -
             1
           : undefined
       }

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/page.tsx

@@ -376,17 +376,16 @@ function AppHighlightsCard({
       activeChart={chartKey}
       queryKey="appHighlights"
       data={timeSeriesData}
-      aggregateFn={(_data, key) =>
-        // If there is only one data point, use that one, otherwise use the previous
-        timeSeriesData.filter((d) => (d[key] as number) > 0).length >= 2
-          ? timeSeriesData[timeSeriesData.length - 2]?.[key]
-          : timeSeriesData[timeSeriesData.length - 1]?.[key]
-      }
-      // Get the trend from the last two COMPLETE periods
+      aggregateFn={(_data, key) => {
+        if (key === "activeUsers") {
+          return Math.max(...timeSeriesData.map((d) => d[key]));
+        }
+        return timeSeriesData.reduce((acc, curr) => acc + curr[key], 0);
+      }}
       trendFn={(data, key) =>
-        data.filter((d) => (d[key] as number) > 0).length >= 3
+        data.filter((d) => (d[key] as number) > 0).length >= 2
           ? ((data[data.length - 2]?.[key] as number) ?? 0) /
-              ((data[data.length - 3]?.[key] as number) ?? 0) -
+              ((data[0]?.[key] as number) ?? 0) -
             1
           : undefined
       }

apps/dashboard/src/app/nebula-app/(app)/utils/nebulaThirdwebClient.ts

@@ -3,6 +3,7 @@ import {
   NEXT_PUBLIC_NEBULA_APP_CLIENT_ID,
 } from "@/constants/public-envs";
 import {
+  THIRDWEB_BRIDGE_URL,
   THIRDWEB_BUNDLER_DOMAIN,
   THIRDWEB_INAPP_WALLET_DOMAIN,
   THIRDWEB_INSIGHT_API_DOMAIN,
@@ -27,6 +28,7 @@ function getNebulaThirdwebClient() {
       social: THIRDWEB_SOCIAL_API_DOMAIN,
       bundler: THIRDWEB_BUNDLER_DOMAIN,
       insight: THIRDWEB_INSIGHT_API_DOMAIN,
+      bridge: THIRDWEB_BRIDGE_URL,
     });
   }
 

apps/dashboard/src/app/pay/[id]/page.tsx

@@ -0,0 +1,69 @@
+import { getPaymentLink } from "@/api/universal-bridge/links";
+import type { Metadata } from "next";
+import { defineChain, getContract } from "thirdweb";
+import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
+import { checksumAddress } from "thirdweb/utils";
+import { getClientThirdwebClient } from "../../../@/constants/thirdweb-client.client";
+import { PayPageEmbed } from "../components/client/PayPageEmbed.client";
+
+const title = "thirdweb Pay";
+const description = "Fast, secure, and simple payments.";
+
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    title,
+    description,
+  },
+};
+
+export default async function PayPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ id: string }>;
+  searchParams: Promise<{ redirectUri?: string; theme?: "light" | "dark" }>;
+}) {
+  const { id } = await params;
+  const { redirectUri, theme } = await searchParams;
+
+  const paymentLink = await getPaymentLink({
+    paymentId: id,
+  });
+
+  const tokenContract = getContract({
+    client: getClientThirdwebClient(undefined), // for this RPC call, use the dashboard client
+    // eslint-disable-next-line no-restricted-syntax
+    chain: defineChain(Number(paymentLink.destinationToken.chainId)),
+    address: paymentLink.destinationToken.address,
+  });
+  const {
+    symbol,
+    decimals,
+    name: tokenName,
+  } = await getCurrencyMetadata({
+    contract: tokenContract,
+  });
+  const token = {
+    symbol,
+    decimals,
+    name: tokenName,
+    address: checksumAddress(paymentLink.destinationToken.address),
+    chainId: Number(paymentLink.destinationToken.chainId),
+  };
+
+  return (
+    <PayPageEmbed
+      redirectUri={redirectUri}
+      paymentLinkId={id}
+      chainId={Number(paymentLink.destinationToken.chainId)}
+      recipientAddress={paymentLink.receiver}
+      amount={BigInt(paymentLink.amount)}
+      token={token}
+      clientId={paymentLink.clientId}
+      name={paymentLink.label}
+      theme={theme}
+    />
+  );
+}

apps/dashboard/src/app/pay/components/client/PayPageEmbed.client.tsx

@@ -1,35 +1,25 @@
 "use client";
-import {
-  THIRDWEB_ANALYTICS_DOMAIN,
-  THIRDWEB_BUNDLER_DOMAIN,
-  THIRDWEB_INAPP_WALLET_DOMAIN,
-  THIRDWEB_INSIGHT_API_DOMAIN,
-  THIRDWEB_PAY_DOMAIN,
-  THIRDWEB_RPC_DOMAIN,
-  THIRDWEB_SOCIAL_API_DOMAIN,
-  THIRDWEB_STORAGE_DOMAIN,
-} from "constants/urls";
+import { payAppThirdwebClient } from "app/pay/constants";
 import { useV5DashboardChain } from "lib/v5-adapter";
-import { getVercelEnv } from "lib/vercel-utils";
 import { useTheme } from "next-themes";
-import { useEffect, useMemo } from "react";
-import { NATIVE_TOKEN_ADDRESS, createThirdwebClient, toTokens } from "thirdweb";
+import { useEffect } from "react";
+import { NATIVE_TOKEN_ADDRESS, toTokens } from "thirdweb";
 import { AutoConnect, PayEmbed } from "thirdweb/react";
-import { setThirdwebDomains } from "thirdweb/utils";
 
 export function PayPageEmbed({
   chainId,
   recipientAddress,
+  paymentLinkId,
   amount,
   token,
   name,
   image,
   redirectUri,
-  clientId,
   theme,
 }: {
   chainId: number;
   recipientAddress: string;
+  paymentLinkId?: string;
   amount: bigint;
   token: { name: string; symbol: string; address: string; decimals: number };
   name?: string;
@@ -46,30 +36,15 @@ export function PayPageEmbed({
       setTheme(theme);
     }
   }, [theme, setTheme]);
-
-  const client = useMemo(() => {
-    if (getVercelEnv() !== "production") {
-      setThirdwebDomains({
-        rpc: THIRDWEB_RPC_DOMAIN,
-        pay: THIRDWEB_PAY_DOMAIN,
-        storage: THIRDWEB_STORAGE_DOMAIN,
-        insight: THIRDWEB_INSIGHT_API_DOMAIN,
-        analytics: THIRDWEB_ANALYTICS_DOMAIN,
-        inAppWallet: THIRDWEB_INAPP_WALLET_DOMAIN,
-        bundler: THIRDWEB_BUNDLER_DOMAIN,
-        social: THIRDWEB_SOCIAL_API_DOMAIN,
-      });
-    }
-    return createThirdwebClient({ clientId });
-  }, [clientId]);
   const chain = useV5DashboardChain(chainId);
 
   return (
     <>
-      <AutoConnect client={client} />
+      <AutoConnect client={payAppThirdwebClient} />
       <PayEmbed
-        client={client}
+        client={payAppThirdwebClient}
         theme={theme ?? (browserTheme === "light" ? "light" : "dark")}
+        paymentLinkId={paymentLinkId}
         payOptions={{
           metadata: {
             name,