refactor: clean up pay analytics ftux

Author: gregfromstl

apps/dashboard/src/@/api/analytics.ts

@@ -425,7 +425,7 @@ export async function getUniversalBridgeWalletUsage(args: {
     console.error(
       `Failed to fetch universal bridge wallet stats: ${res?.status} - ${res.statusText} - ${reason}`,
     );
-    return null;
+    return [];
   }
 
   const json = await res.json();

apps/dashboard/src/@/components/ui/code/code.server.tsx

@@ -6,13 +6,17 @@ export type CodeProps = {
   code: string;
   lang: BundledLanguage;
   className?: string;
+  ignoreFormattingErrors?: boolean;
 };
 
 export const CodeServer: React.FC<CodeProps> = async ({
   code,
   lang,
   className,
+  ignoreFormattingErrors,
 }) => {
-  const { html, formattedCode } = await getCodeHtml(code, lang);
+  const { html, formattedCode } = await getCodeHtml(code, lang, {
+    ignoreFormattingErrors,
+  });
   return <RenderCode code={formattedCode} html={html} className={className} />;
 };

apps/dashboard/src/@/components/ui/code/getCodeHtml.tsx

@@ -23,21 +23,21 @@ export async function getCodeHtml(
   const estreePlugin = await import("prettier/plugins/estree");
   const formattedCode = isPrettierSupportedLang(lang)
     ? await format(code, {
-        parser: "babel-ts",
-        plugins: [parserBabel, estreePlugin.default],
-        printWidth: 60,
-      }).catch((e) => {
-        if (!options?.ignoreFormattingErrors) {
-          console.error(e);
-          console.error("Failed to format code");
-          console.log({
-            code,
-            lang,
-          });
-        }
+      parser: "babel-ts",
+      plugins: [parserBabel, estreePlugin.default],
+      printWidth: 60,
+    }).catch((e) => {
+      if (!options?.ignoreFormattingErrors) {
+        console.error(e);
+        console.error("Failed to format code");
+        console.log({
+          code,
+          lang,
+        });
+      }
 
-        return code;
-      })
+      return code;
+    })
     : code;
 
   const html = await codeToHtml(formattedCode, {

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

@@ -11,7 +11,9 @@ export function PayEmbedFTUX(props: { clientId: string }) {
   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>
+        <h2 className="font-semibold text-xl tracking-tight">
+          Start Monetizing Your App
+        </h2>
       </div>
 
       <div className="px-4 py-6 lg:p-6">
@@ -44,13 +46,19 @@ export function PayEmbedFTUX(props: { clientId: string }) {
           />
         )}
         {tab === "sdk" && (
-          <CodeServer code={sdkCode} lang="ts" className="bg-background" />
+          <CodeServer
+            code={sdkCode(props.clientId)}
+            lang="ts"
+            className="bg-background"
+            ignoreFormattingErrors
+          />
         )}
         {tab === "api" && (
           <CodeServer
             code={apiCode(props.clientId)}
             lang="bash"
             className="bg-background"
+            ignoreFormattingErrors
           />
         )}
       </div>
@@ -75,7 +83,7 @@ export function PayEmbedFTUX(props: { clientId: string }) {
   );
 }
 
-const embedCode = (clientId: string) => `
+const embedCode = (clientId: string) => `\
 import { createThirdwebClient } from "thirdweb";
 import { PayEmbed } from "thirdweb/react";
 
@@ -85,25 +93,28 @@ const client = createThirdwebClient({
 
 export default function App() {
   return <PayEmbed client={client} />;
-}
-`;
+}`;
 
-const sdkCode = `
-import { Bridge, NATIVE_TOKEN_ADDRESS } from "thirdweb";
+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: NATIVE_TOKEN_ADDRESS,
+  originTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
   destinationChainId: 10,
-  destinationTokenAddress: NATIVE_TOKEN_ADDRESS,
+  destinationTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
   amount: toWei("0.01"),
-  client: thirdwebClient,
-});
-`;
+  sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
+  receiver: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
+  client,
+});`;
 
-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"}'
-`;
+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"}'`;

packages/thirdweb/src/bridge/Buy.ts

@@ -164,13 +164,13 @@ export declare namespace quote {
     client: ThirdwebClient;
     maxSteps?: number;
   } & (
-    | {
+      | {
         buyAmountWei: bigint;
       }
-    | {
+      | {
         amount: bigint;
       }
-  );
+    );
 
   type Result = Quote & {
     intent: {
@@ -197,6 +197,8 @@ export declare namespace quote {
  *   destinationChainId: 10,
  *   destinationTokenAddress: NATIVE_TOKEN_ADDRESS,
  *   amount: toWei("0.01"),
+ *   sender: "0x...",
+ *   receiver: "0x...",
  *   client: thirdwebClient,
  * });
  * ```
@@ -282,6 +284,8 @@ export declare namespace quote {
  *   destinationChainId: 10,
  *   destinationTokenAddress: NATIVE_TOKEN_ADDRESS,
  *   amount: toWei("0.01"),
+ *   sender: "0x...",
+ *   receiver: "0x...",
  *   purchaseData: {
  *     size: "large",
  *     shippingAddress: "123 Main St, New York, NY 10001",
@@ -299,6 +303,8 @@ export declare namespace quote {
  *   destinationChainId: 10,
  *   destinationTokenAddress: NATIVE_TOKEN_ADDRESS,
  *   amount: toWei("0.01"),
+ *   sender: "0x...",
+ *   receiver: "0x...",
  *   maxSteps: 2, // Will only return a quote for routes with 2 or fewer steps
  *   client: thirdwebClient,
  * });
@@ -312,7 +318,7 @@ export declare namespace quote {
  * @param options.amount - The amount of the destination token to receive.
  * @param options.sender - The address of the sender.
  * @param options.receiver - The address of the recipient.
- * @param options.purchaseData - Arbitrary data to be passed to the purchase function and included with any webhooks or status calls.
+ * @param [options.purchaseData] - Arbitrary data to be passed to the purchase function and included with any webhooks or status calls.
  * @param [options.maxSteps] - Limit the number of total steps in the route.
  * @param options.client - Your thirdweb client.
  *