diff --git a/.changeset/wide-books-ring.md b/.changeset/wide-books-ring.md
new file mode 100644
index 00000000000..939a8b1a549
--- /dev/null
+++ b/.changeset/wide-books-ring.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": minor
+---
+
+Updated PayEmbed UI
diff --git a/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx b/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx
index 60690822e79..0f05434db52 100644
--- a/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx
+++ b/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")}
/>
diff --git a/apps/dashboard/src/app/bridge/page.tsx b/apps/dashboard/src/app/bridge/page.tsx
index e4a22f63cf4..0be287f42f6 100644
--- a/apps/dashboard/src/app/bridge/page.tsx
+++ b/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}
/>
diff --git a/apps/playground-web/src/app/connect/sign-in/button/RightSection.tsx b/apps/playground-web/src/app/connect/sign-in/button/RightSection.tsx
index 6e6dadd8e3c..681d4d372a7 100644
--- a/apps/playground-web/src/app/connect/sign-in/button/RightSection.tsx
+++ b/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={
diff --git a/packages/thirdweb/src/react/web/ui/PayEmbed.tsx b/packages/thirdweb/src/react/web/ui/PayEmbed.tsx
index 6f640791fe1..3ecc56cfa9b 100644
--- a/packages/thirdweb/src/react/web/ui/PayEmbed.tsx
+++ b/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 (
+