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 ( + + ); + } + + if (props.payOptions?.mode === "direct_payment") { + return ( + + ); + } + + if (props.payOptions?.mode === "transaction") { + return ( + + ); + } + if (!localeQuery.data) { content = (
)} - - {screen === "execute-tx" && - props.payOptions?.mode === "transaction" && - props.payOptions.transaction && ( - { - setScreen("buy"); - }} - onBack={() => { - setScreen("buy"); - }} - onTxSent={(data) => { - props.payOptions?.onPurchaseSuccess?.({ - type: "transaction", - chainId: data.chain.id, - transactionHash: data.transactionHash, - }); - }} - windowAdapter={webWindowAdapter} - /> - )} ); }