[SDK] Feature: Update PayEmbed to use new widgets (#7394)

Author: gregfromstl

.changeset/wide-books-ring.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": minor
+---
+
+Updated PayEmbed UI

apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx

@@ -10,7 +10,7 @@ export function UniversalBridgeEmbed({
   chainId,
   token,
   amount,
-}: { chainId?: number; token: TokenInfo | undefined; amount: string }) {
+}: { chainId?: number; token: TokenInfo | undefined; amount?: string }) {
   const { theme } = useTheme();
   const chain = useV5DashboardChain(chainId || 1);
 
@@ -19,11 +19,14 @@ export function UniversalBridgeEmbed({
       client={bridgeAppThirdwebClient}
       payOptions={{
         mode: "fund_wallet",
-        prefillBuy: {
-          chain,
-          token,
-          amount,
-        },
+        prefillBuy:
+          chainId && token
+            ? {
+                chain,
+                token,
+                amount,
+              }
+            : undefined,
       }}
       theme={getSDKTheme(theme === "light" ? "light" : "dark")}
     />

apps/dashboard/src/app/bridge/page.tsx

@@ -60,7 +60,7 @@ export default async function BridgePage({
                 }
               : undefined
           }
-          amount={(amount || "0.01") as string}
+          amount={amount as string}
         />
       </main>
 

apps/playground-web/src/app/connect/sign-in/button/RightSection.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 import {
   arbitrumSepolia,
   baseSepolia,
+  defineChain,
   optimismSepolia,
   sepolia,
 } from "thirdweb/chains";
@@ -119,7 +120,13 @@ export function RightSection(props: {
         showThirdwebBranding: connectOptions.ShowThirdwebBranding,
         requireApproval: connectOptions.requireApproval,
       }}
-      chains={[sepolia, baseSepolia, optimismSepolia, arbitrumSepolia]}
+      chains={[
+        defineChain(578),
+        sepolia,
+        baseSepolia,
+        optimismSepolia,
+        arbitrumSepolia,
+      ]}
       wallets={wallets}
       auth={connectOptions.enableAuth ? playgroundAuth : undefined}
       accountAbstraction={

packages/thirdweb/src/react/web/ui/PayEmbed.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import type { Chain } from "../../../chains/types.js";
 import type { ThirdwebClient } from "../../../client/client.js";
+import type { Address } from "../../../utils/address.js";
 import type { Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../wallets/types.js";
@@ -22,11 +23,12 @@ import { useActiveWallet } from "../../core/hooks/wallets/useActiveWallet.js";
 import { useConnectionManager } from "../../core/providers/connection-manager.js";
 import type { SupportedTokens } from "../../core/utils/defaultTokens.js";
 import { AutoConnect } from "../../web/ui/AutoConnect/AutoConnect.js";
-import { webWindowAdapter } from "../adapters/WindowAdapter.js";
+import { BuyWidget } from "./Bridge/BuyWidget.js";
+import { CheckoutWidget } from "./Bridge/CheckoutWidget.js";
+import { TransactionWidget } from "./Bridge/TransactionWidget.js";
 import { EmbedContainer } from "./ConnectWallet/Modal/ConnectEmbed.js";
 import { useConnectLocale } from "./ConnectWallet/locale/getConnectLocale.js";
 import BuyScreen from "./ConnectWallet/screens/Buy/BuyScreen.js";
-import { ExecutingTxScreen } from "./TransactionButton/ExecutingScreen.js";
 import { DynamicHeight } from "./components/DynamicHeight.js";
 import { Spinner } from "./components/Spinner.js";
 import type { LocaleId } from "./types.js";
@@ -345,6 +347,55 @@ export function PayEmbed(props: PayEmbedProps) {
       ? props.payOptions.metadata
       : null;
 
+  if (
+    props.payOptions?.mode === "fund_wallet" &&
+    props.payOptions?.prefillBuy
+  ) {
+    return (
+      <BuyWidget
+        title={metadata?.name || "Buy"}
+        chain={props.payOptions.prefillBuy.chain}
+        amount={props.payOptions.prefillBuy.amount || "0.01"}
+        tokenAddress={
+          props.payOptions.prefillBuy.token?.address as Address | undefined
+        }
+        client={props.client}
+        theme={theme}
+      />
+    );
+  }
+
+  if (props.payOptions?.mode === "direct_payment") {
+    return (
+      <CheckoutWidget
+        name={metadata?.name || "Checkout"}
+        description={metadata?.description}
+        image={metadata?.image}
+        chain={props.payOptions.paymentInfo.chain}
+        tokenAddress={
+          props.payOptions.paymentInfo.token?.address as Address | undefined
+        }
+        amount={(props.payOptions.paymentInfo as { amount: string }).amount}
+        seller={props.payOptions.paymentInfo.sellerAddress as Address}
+        client={props.client}
+        theme={theme}
+      />
+    );
+  }
+
+  if (props.payOptions?.mode === "transaction") {
+    return (
+      <TransactionWidget
+        title={metadata?.name}
+        description={metadata?.description}
+        image={metadata?.image}
+        transaction={props.payOptions.transaction}
+        client={props.client}
+        theme={theme}
+      />
+    );
+  }
+
   if (!localeQuery.data) {
     content = (
       <div
@@ -386,28 +437,6 @@ export function PayEmbed(props: PayEmbedProps) {
             onBack={undefined}
           />
         )}
-
-        {screen === "execute-tx" &&
-          props.payOptions?.mode === "transaction" &&
-          props.payOptions.transaction && (
-            <ExecutingTxScreen
-              tx={props.payOptions.transaction}
-              closeModal={() => {
-                setScreen("buy");
-              }}
-              onBack={() => {
-                setScreen("buy");
-              }}
-              onTxSent={(data) => {
-                props.payOptions?.onPurchaseSuccess?.({
-                  type: "transaction",
-                  chainId: data.chain.id,
-                  transactionHash: data.transactionHash,
-                });
-              }}
-              windowAdapter={webWindowAdapter}
-            />
-          )}
       </>
     );
   }