Fix CodeServer used in client component

Author: MananTank

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

@@ -3,7 +3,9 @@ import {
   getUniversalBridgeUsage,
   getUniversalBridgeWalletUsage,
 } from "@/api/analytics";
+import { CodeServer } from "@/components/ui/code/code.server";
 import type { Range } from "../../analytics/date-range-selector";
+import { apiCode, embedCode, sdkCode } from "./code-examples";
 import { PayCustomersTable } from "./components/PayCustomersTable";
 import { PaymentHistory } from "./components/PaymentHistory";
 import { PaymentsSuccessRate } from "./components/PaymentsSuccessRate";
@@ -59,8 +61,38 @@ export async function PayAnalytics(props: {
 
   const hasVolume = volumeData.some((d) => d.amountUsdCents > 0);
   const hasWallet = walletData.some((d) => d.count > 0);
+
   if (!hasVolume && !hasWallet) {
-    return <PayEmbedFTUX clientId={props.projectClientId} />;
+    return (
+      <PayEmbedFTUX
+        clientId={props.projectClientId}
+        codeExamples={
+          {
+            api: (
+              <CodeServer
+                className="bg-background"
+                code={apiCode(props.projectClientId)}
+                lang="bash"
+              />
+            ),
+            embed: (
+              <CodeServer
+                className="bg-background"
+                code={embedCode(props.projectClientId)}
+                lang="tsx"
+              />
+            ),
+            sdk: (
+              <CodeServer
+                className="bg-background"
+                code={sdkCode(props.projectClientId)}
+                lang="ts"
+              />
+            ),
+          } as const
+        }
+      />
+    );
   }
 
   return (

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

@@ -1,22 +1,31 @@
 "use client";
+
 import { ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
-import { CodeServer } from "@/components/ui/code/code.server";
 import { TabButtons } from "@/components/ui/tabs";
 
-export function PayEmbedFTUX(props: { clientId: string }) {
-  const [tab, setTab] = useState("embed");
+type Tab = "embed" | "sdk" | "api";
+
+export function PayEmbedFTUX(props: {
+  clientId: string;
+  codeExamples: {
+    embed: React.ReactNode;
+    sdk: React.ReactNode;
+    api: React.ReactNode;
+  };
+}) {
+  const [tab, setTab] = useState<Tab>("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">
+      <div className="border-b border-dashed p-4">
+        <h2 className="font-semibold text-lg tracking-tight">
           Start Monetizing Your App
         </h2>
       </div>
 
-      <div className="px-4 py-6 lg:p-6">
+      <div className="p-4 pt-2">
         <TabButtons
           tabClassName="!text-sm"
           tabs={[
@@ -38,32 +47,11 @@ export function PayEmbedFTUX(props: { clientId: string }) {
           ]}
         />
         <div className="h-2" />
-        {tab === "embed" && (
-          <CodeServer
-            className="bg-background"
-            code={embedCode(props.clientId)}
-            lang="tsx"
-          />
-        )}
-        {tab === "sdk" && (
-          <CodeServer
-            className="bg-background"
-            code={sdkCode(props.clientId)}
-            ignoreFormattingErrors
-            lang="ts"
-          />
-        )}
-        {tab === "api" && (
-          <CodeServer
-            className="bg-background"
-            code={apiCode(props.clientId)}
-            ignoreFormattingErrors
-            lang="bash"
-          />
-        )}
+
+        {props.codeExamples[tab]}
       </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 flex-col gap-3 border-t p-4 lg:flex-row lg:items-center lg:justify-between">
         <div className="flex gap-3">
           <Button asChild size="sm" variant="outline">
             <Link
@@ -81,39 +69,3 @@ export function PayEmbedFTUX(props: { clientId: string }) {
     </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 = (clientId: string) => `\
-import { Bridge, NATIVE_TOKEN_ADDRESS, createThirdwebClient, toWei } from "thirdweb";
-
-const client = createThirdwebClient({
-  clientId: "${clientId}",
-});
-
-const quote = await Bridge.Buy.prepare({
-  originChainId: 1,
-  originTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
-  destinationChainId: 10,
-  destinationTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
-  amount: toWei("0.01"),
-  sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
-  receiver: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
-  client,
-});`;
-
-const apiCode = (clientId: string) => `\
-curl -X POST https://pay.thirdweb.com/v1/buy/prepare
-  -H "Content-Type: application/json"
-  -H "x-client-id: ${clientId}"
-  -d '{"originChainId":"1","originTokenAddress":"0x...","destinationChainId":"10","destinationTokenAddress":"0x...","amount":"0.01"}'`;

apps/dashboard/src/components/pay/PayAnalytics/code-examples.tsx

@@ -0,0 +1,35 @@
+export 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} />;
+}`;
+
+export const sdkCode = (clientId: string) => `\
+import { Bridge, NATIVE_TOKEN_ADDRESS, createThirdwebClient, toWei } from "thirdweb";
+
+const client = createThirdwebClient({
+  clientId: "${clientId}",
+});
+
+const quote = await Bridge.Buy.prepare({
+  originChainId: 1,
+  originTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
+  destinationChainId: 10,
+  destinationTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
+  amount: toWei("0.01"),
+  sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
+  receiver: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
+  client,
+});`;
+
+export const apiCode = (clientId: string) => `\
+curl -X POST https://pay.thirdweb.com/v1/buy/prepare
+  -H "Content-Type: application/json"
+  -H "x-client-id: ${clientId}"
+  -d '{"originChainId":"1","originTokenAddress":"0x...","destinationChainId":"10","destinationTokenAddress":"0x...","amount":"0.01"}'`;