From 6177e110052f8bc35e7aa5a6b5977707e3eee483 Mon Sep 17 00:00:00 2001 From: gregfromstl Date: Fri, 20 Jun 2025 12:17:54 -0700 Subject: [PATCH 1/4] feat: use BuyWidget in bridge page --- .../client/UniversalBridgeEmbed.tsx | 16 ++++++++-- apps/dashboard/src/app/bridge/page.tsx | 10 +++---- .../connect/sign-in/button/RightSection.tsx | 29 ++++++++++++------- 3 files changed, 37 insertions(+), 18 deletions(-) diff --git a/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx b/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx index 60690822e79..fff353a5fb3 100644 --- a/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx +++ b/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx @@ -1,19 +1,31 @@ "use client"; import { useTheme } from "next-themes"; -import { PayEmbed, type TokenInfo } from "thirdweb/react"; +import { BuyWidget, PayEmbed, type TokenInfo } from "thirdweb/react"; import { getSDKTheme } from "../../../(app)/components/sdk-component-theme"; import { useV5DashboardChain } from "../../../../lib/v5-adapter"; import { bridgeAppThirdwebClient } from "../../constants"; +import type { Address } from "thirdweb"; 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); + if (chainId && token) { + return ( + + ); + } + return ( 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..107b6e4135d 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"; @@ -89,11 +90,11 @@ export function RightSection(props: { const themeObj = connectOptions.theme.type === "dark" ? darkTheme({ - colors: connectOptions.theme.darkColorOverrides, - }) + colors: connectOptions.theme.darkColorOverrides, + }) : lightTheme({ - colors: connectOptions.theme.lightColorOverrides, - }); + colors: connectOptions.theme.lightColorOverrides, + }); useEffect(() => { if (!connectOptions.enableAuth) { @@ -119,15 +120,21 @@ 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={ connectOptions.enableAccountAbstraction ? { - chain: sepolia, - sponsorGas: true, - } + chain: sepolia, + sponsorGas: true, + } : undefined } /> @@ -185,9 +192,9 @@ export function RightSection(props: { accountAbstraction={ connectOptions.enableAccountAbstraction ? { - chain: sepolia, - sponsorGas: true, - } + chain: sepolia, + sponsorGas: true, + } : undefined } termsOfServiceUrl={connectOptions.termsOfServiceLink} From 3de47ce3ccc8bbee5c0dfbb8322014b4db44a29c Mon Sep 17 00:00:00 2001 From: gregfromstl Date: Fri, 20 Jun 2025 12:33:24 -0700 Subject: [PATCH 2/4] feat: use new components in PayEmbed --- .../client/UniversalBridgeEmbed.tsx | 27 +++---- .../thirdweb/src/react/web/ui/PayEmbed.tsx | 77 +++++++++++++------ 2 files changed, 62 insertions(+), 42 deletions(-) diff --git a/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx b/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx index fff353a5fb3..97e84e133c3 100644 --- a/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx +++ b/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx @@ -1,11 +1,10 @@ "use client"; import { useTheme } from "next-themes"; -import { BuyWidget, PayEmbed, type TokenInfo } from "thirdweb/react"; +import { PayEmbed, type TokenInfo } from "thirdweb/react"; import { getSDKTheme } from "../../../(app)/components/sdk-component-theme"; import { useV5DashboardChain } from "../../../../lib/v5-adapter"; import { bridgeAppThirdwebClient } from "../../constants"; -import type { Address } from "thirdweb"; export function UniversalBridgeEmbed({ chainId, @@ -15,27 +14,19 @@ export function UniversalBridgeEmbed({ const { theme } = useTheme(); const chain = useV5DashboardChain(chainId || 1); - if (chainId && token) { - return ( - - ); - } - return ( diff --git a/packages/thirdweb/src/react/web/ui/PayEmbed.tsx b/packages/thirdweb/src/react/web/ui/PayEmbed.tsx index 6f640791fe1..edc32a835c1 100644 --- a/packages/thirdweb/src/react/web/ui/PayEmbed.tsx +++ b/packages/thirdweb/src/react/web/ui/PayEmbed.tsx @@ -22,14 +22,16 @@ 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 { 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"; +import { BuyWidget } from "./Bridge/BuyWidget.js"; +import type { Address } from "../../../utils/address.js"; +import { CheckoutWidget } from "./Bridge/CheckoutWidget.js"; +import { TransactionWidget } from "./Bridge/TransactionWidget.js"; /** * Props of [`PayEmbed`](https://portal.thirdweb.com/references/typescript/v5/PayEmbed) component @@ -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} - /> - )} ); } From 41bb01ec7b3e1070a09e1995ce47a119c5c055ce Mon Sep 17 00:00:00 2001 From: gregfromstl Date: Fri, 20 Jun 2025 12:36:17 -0700 Subject: [PATCH 3/4] lint --- .../client/UniversalBridgeEmbed.tsx | 8 ++++---- apps/dashboard/src/app/bridge/page.tsx | 8 ++++---- .../connect/sign-in/button/RightSection.tsx | 20 +++++++++---------- .../thirdweb/src/react/web/ui/PayEmbed.tsx | 8 ++++---- 4 files changed, 22 insertions(+), 22 deletions(-) diff --git a/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx b/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx index 97e84e133c3..0f05434db52 100644 --- a/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx +++ b/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx @@ -22,10 +22,10 @@ export function UniversalBridgeEmbed({ prefillBuy: chainId && token ? { - chain, - token, - amount, - } + 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 ab0c2695d2b..0be287f42f6 100644 --- a/apps/dashboard/src/app/bridge/page.tsx +++ b/apps/dashboard/src/app/bridge/page.tsx @@ -54,10 +54,10 @@ export default async function BridgePage({ token={ symbol && decimals && tokenName ? { - address: tokenAddress as Address, - name: tokenName, - symbol, - } + address: tokenAddress as Address, + name: tokenName, + symbol, + } : undefined } 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 107b6e4135d..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 @@ -90,11 +90,11 @@ export function RightSection(props: { const themeObj = connectOptions.theme.type === "dark" ? darkTheme({ - colors: connectOptions.theme.darkColorOverrides, - }) + colors: connectOptions.theme.darkColorOverrides, + }) : lightTheme({ - colors: connectOptions.theme.lightColorOverrides, - }); + colors: connectOptions.theme.lightColorOverrides, + }); useEffect(() => { if (!connectOptions.enableAuth) { @@ -132,9 +132,9 @@ export function RightSection(props: { accountAbstraction={ connectOptions.enableAccountAbstraction ? { - chain: sepolia, - sponsorGas: true, - } + chain: sepolia, + sponsorGas: true, + } : undefined } /> @@ -192,9 +192,9 @@ export function RightSection(props: { accountAbstraction={ connectOptions.enableAccountAbstraction ? { - chain: sepolia, - sponsorGas: true, - } + chain: sepolia, + sponsorGas: true, + } : undefined } termsOfServiceUrl={connectOptions.termsOfServiceLink} diff --git a/packages/thirdweb/src/react/web/ui/PayEmbed.tsx b/packages/thirdweb/src/react/web/ui/PayEmbed.tsx index edc32a835c1..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,16 +23,15 @@ 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 { 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 { DynamicHeight } from "./components/DynamicHeight.js"; import { Spinner } from "./components/Spinner.js"; import type { LocaleId } from "./types.js"; -import { BuyWidget } from "./Bridge/BuyWidget.js"; -import type { Address } from "../../../utils/address.js"; -import { CheckoutWidget } from "./Bridge/CheckoutWidget.js"; -import { TransactionWidget } from "./Bridge/TransactionWidget.js"; /** * Props of [`PayEmbed`](https://portal.thirdweb.com/references/typescript/v5/PayEmbed) component From 57134fd2f15811c5f93d7fa4668edab42fd539bf Mon Sep 17 00:00:00 2001 From: gregfromstl Date: Fri, 20 Jun 2025 12:48:50 -0700 Subject: [PATCH 4/4] changeset --- .changeset/wide-books-ring.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/wide-books-ring.md 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