[Dashboard] improve pay analytics FTUX

Author: gregfromstl

apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx

@@ -3,6 +3,7 @@ import {
   getUniversalBridgeWalletUsage,
 } from "@/api/analytics";
 import type { Range } from "../../analytics/date-range-selector";
+import { PayEmbedFTUX } from "./PayEmbedFTUX";
 import { PayCustomersTable } from "./components/PayCustomersTable";
 import { PayNewCustomers } from "./components/PayNewCustomers";
 import { PaymentHistory } from "./components/PaymentHistory";
@@ -54,6 +55,12 @@ export async function PayAnalytics(props: {
     walletDataPromise,
   ]);
 
+  const hasVolume = volumeData.some((d) => d.amountUsdCents > 0);
+  const hasWallet = walletData.some((d) => d.count > 0);
+  if (!hasVolume && !hasWallet) {
+    return <PayEmbedFTUX clientId={props.clientId} />;
+  }
+
   return (
     <div className="flex flex-col gap-10 lg:gap-6">
       <GridWithSeparator>

apps/dashboard/src/components/pay/PayAnalytics/PayEmbedFTUX.tsx

@@ -0,0 +1,109 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { CodeServer } from "@/components/ui/code/code.server";
+import { TabButtons } from "@/components/ui/tabs";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import { ExternalLinkIcon } from "lucide-react";
+import { useState } from "react";
+
+export function PayEmbedFTUX(props: { clientId: string }) {
+  const [tab, setTab] = useState("embed");
+  return (
+    <div className="rounded-lg border bg-card">
+      <div className="border-b px-4 py-4 lg:px-6">
+        <h2 className="font-semibold text-xl tracking-tight">Integrate Pay</h2>
+      </div>
+
+      <div className="px-4 py-6 lg:p-6">
+        <TabButtons
+          tabClassName="!text-sm"
+          tabs={[
+            {
+              name: "Embed",
+              onClick: () => setTab("embed"),
+              isActive: tab === "embed",
+            },
+            {
+              name: "SDK",
+              onClick: () => setTab("sdk"),
+              isActive: tab === "sdk",
+            },
+            {
+              name: "API",
+              onClick: () => setTab("api"),
+              isActive: tab === "api",
+            },
+          ]}
+        />
+        <div className="h-2" />
+        {tab === "embed" && (
+          <CodeServer
+            code={embedCode(props.clientId)}
+            lang="tsx"
+            className="bg-background"
+          />
+        )}
+        {tab === "sdk" && (
+          <CodeServer code={sdkCode} lang="ts" className="bg-background" />
+        )}
+        {tab === "api" && (
+          <CodeServer
+            code={apiCode(props.clientId)}
+            lang="bash"
+            className="bg-background"
+          />
+        )}
+      </div>
+
+      <div className="flex flex-col gap-3 border-t p-4 lg:flex-row lg:items-center lg:justify-between lg:p-6">
+        <div className="flex gap-3">
+          <Button asChild variant="outline" size="sm">
+            <TrackedLinkTW
+              href="https://portal.thirdweb.com/connect/pay/embed"
+              target="_blank"
+              className="gap-2"
+              category="pay-ftux"
+              label="docs"
+            >
+              View Docs
+              <ExternalLinkIcon className="size-4 text-muted-foreground" />
+            </TrackedLinkTW>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const embedCode = (clientId: string) => `
+import { createThirdwebClient } from "thirdweb";
+import { PayEmbed } from "thirdweb/react";
+
+const client = createThirdwebClient({
+  clientId: "${clientId}",
+});
+
+export default function App() {
+  return <PayEmbed client={client} />;
+}
+`;
+
+const sdkCode = `
+import { Bridge, NATIVE_TOKEN_ADDRESS } from "thirdweb";
+
+const quote = await Bridge.Buy.prepare({
+  originChainId: 1,
+  originTokenAddress: NATIVE_TOKEN_ADDRESS,
+  destinationChainId: 10,
+  destinationTokenAddress: NATIVE_TOKEN_ADDRESS,
+  amount: toWei("0.01"),
+  client: thirdwebClient,
+});
+`;
+
+const apiCode = (clientId: string) => `
+curl -X POST https://pay.thirdweb.com/v1/buy/quote \
+  -H "Content-Type: application/json" \
+  -H "x-client-id: ${clientId}" \
+  -d '{"originChainId":1,"originTokenAddress":"0x...","destinationChainId":10,"destinationTokenAddress":"0x...","amount":"0.01"}'
+`;