[SDK] feat: Redesign token selection flow in PayEmbed (#6268)

Author: joaquim-verges

apps/playground-web/src/app/insight/utils.ts

@@ -55,17 +55,22 @@ export async function fetchBlueprintSpec(params: {
 }
 
 export async function fetchAllBlueprints() {
-  // fetch list
-  const blueprintSpecs = await fetchBlueprintList();
-
-  // fetch all blueprints
-  const blueprints = await Promise.all(
-    blueprintSpecs.map((spec) =>
-      fetchBlueprintSpec({
-        blueprintId: spec.id,
-      }),
-    ),
-  );
-
-  return blueprints;
+  try {
+    // fetch list
+    const blueprintSpecs = await fetchBlueprintList();
+
+    // fetch all blueprints
+    const blueprints = await Promise.all(
+      blueprintSpecs.map((spec) =>
+        fetchBlueprintSpec({
+          blueprintId: spec.id,
+        }),
+      ),
+    );
+
+    return blueprints;
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
 }

apps/playground-web/src/components/pay/direct-payment.tsx

@@ -1,6 +1,5 @@
 "use client";
-
-import { sepolia } from "thirdweb/chains";
+import { base } from "thirdweb/chains";
 import { PayEmbed, getDefaultToken } from "thirdweb/react";
 import { THIRDWEB_CLIENT } from "../../lib/client";
 import { StyledConnectButton } from "../styled-connect-button";
@@ -16,9 +15,9 @@ export function BuyMerchPreview() {
         payOptions={{
           mode: "direct_payment",
           paymentInfo: {
-            amount: "0.1",
-            chain: sepolia,
-            token: getDefaultToken(sepolia, "USDC"),
+            amount: "2",
+            chain: base,
+            token: getDefaultToken(base, "USDC"),
             sellerAddress: "0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675",
           },
           metadata: {

apps/playground-web/src/components/pay/transaction-button.tsx

@@ -2,7 +2,7 @@
 
 import { useTheme } from "next-themes";
 import { getContract } from "thirdweb";
-import { base, sepolia } from "thirdweb/chains";
+import { base, polygon } from "thirdweb/chains";
 import { transfer } from "thirdweb/extensions/erc20";
 import { claimTo, getNFT } from "thirdweb/extensions/erc1155";
 import {
@@ -21,12 +21,12 @@ const nftContract = getContract({
   client: THIRDWEB_CLIENT,
 });
 
-const USDC = getDefaultToken(sepolia, "USDC");
+const USDC = getDefaultToken(polygon, "USDC");
 
 const usdcContract = getContract({
   // biome-ignore lint/style/noNonNullAssertion: its there
   address: USDC!.address,
-  chain: sepolia,
+  chain: polygon,
   client: THIRDWEB_CLIENT,
 });
 
@@ -55,6 +55,7 @@ export function PayTransactionPreview() {
               to: account?.address || "",
             }),
             metadata: nft?.metadata,
+            buyWithFiat: false,
           }}
         />
       )}
@@ -69,6 +70,7 @@ export function PayTransactionButtonPreview() {
   return (
     <>
       <StyledConnectButton />
+      <div className="h-10" />
       {account && (
         <div className="flex flex-col items-center justify-center gap-2">
           <div className="flex items-center gap-2">