Skip to content

WIP brige embed #7222

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 36 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
fe64ae4
WIP brige embed
joaquim-verges May 30, 2025
88618c8
refactor: account for fee action
gregfromstl Jun 4, 2025
337f52f
fix: disable start transaction button on autostart
gregfromstl Jun 4, 2025
0c0b747
fix: respect updated amount
gregfromstl Jun 4, 2025
8763876
feat: include prices in routes
gregfromstl Jun 4, 2025
a906c6e
feat: sort by dollar balance
gregfromstl Jun 4, 2025
11e831e
nit: adjust chain icon position
gregfromstl Jun 4, 2025
8b24014
feat: improve number formatting
gregfromstl Jun 4, 2025
c6737a0
polish direct payment screen ui
joaquim-verges Jun 5, 2025
a486c8a
code cleanup
joaquim-verges Jun 5, 2025
c6112fe
top up label
joaquim-verges Jun 5, 2025
dcd7b08
TransactionPayment component
joaquim-verges Jun 5, 2025
ec80659
update paymentMachine tests
joaquim-verges Jun 5, 2025
c0da29c
update FundWallet look
joaquim-verges Jun 5, 2025
a10b218
feat: adds token not supported screen
gregfromstl Jun 5, 2025
90fef12
docs: adds theme stories
gregfromstl Jun 5, 2025
c0429e1
feat: auto-add unsupported tokens
gregfromstl Jun 5, 2025
224e2af
refactor: make token name and symbol optional
gregfromstl Jun 5, 2025
2221dcf
feat: enable passing quickOptions
gregfromstl Jun 5, 2025
74faebe
ui polish, reuse header accross all modes
joaquim-verges Jun 6, 2025
2998cfe
UI polish for transactions and tokens
joaquim-verges Jun 6, 2025
e600e26
update useSendTransaction to use new widget
joaquim-verges Jun 6, 2025
f3f49cd
transaction execution
joaquim-verges Jun 6, 2025
6499e49
incorporate post buy transaction in the state machine
joaquim-verges Jun 6, 2025
7ae018b
update payment state machine tests
joaquim-verges Jun 6, 2025
984c348
playground build
joaquim-verges Jun 6, 2025
d2dcf7c
refactor: rename quickOptions to presetOptions for consistency across…
gregfromstl Jun 6, 2025
84a5e8c
feat: adds onramp logos
gregfromstl Jun 6, 2025
484a3e1
feat: show quotes for onramp providers
gregfromstl Jun 6, 2025
b88f8ba
refactor: refresh quote on step runner
gregfromstl Jun 10, 2025
8ec1bf5
Merge branch 'main' into 05-30-wip_brige_embed
gregfromstl Jun 10, 2025
a675f08
fix: include erc20 value in docs
gregfromstl Jun 10, 2025
76c0e00
Merge branch 'main' into 05-30-wip_brige_embed
gregfromstl Jun 11, 2025
b386d39
feat: adds BuyEmbed
gregfromstl Jun 11, 2025
355eecd
feat: CheckoutWidget component
gregfromstl Jun 11, 2025
1cc003d
feat: TransactionWidget
gregfromstl Jun 12, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion AGENTS.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ Welcome, AI copilots! This guide captures the coding standards, architectural de
- Biome governs formatting and linting; its rules live in biome.json.
- Run pnpm biome check --apply before committing.
- Avoid editor‑specific configs; rely on the shared settings.
- make sure everything builds after each file change by running `pnpm build`


Expand All @@ -39,7 +40,8 @@ Welcome, AI copilots! This guide captures the coding standards, architectural de
- Co‑locate tests: foo.ts ↔ foo.test.ts.
- Use real function invocations with stub data; avoid brittle mocks.
- For network interactions, use Mock Service Worker (MSW) to intercept fetch/HTTP calls, mocking only scenarios that are hard to reproduce.
- Keep tests deterministic and side‑effect free; Jest is pre‑configured.
- Keep tests deterministic and side‑effect free; Vitest is pre‑configured.
- to run the tests: `cd packages thirdweb & pnpm test:dev <filename>`


Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ function UBFooter() {
href: "https://playground.thirdweb.com/connect/pay/fund-wallet",
},
{
label: "Commerce",
label: "Checkout",
href: "https://playground.thirdweb.com/connect/pay/commerce",
},
{
Expand Down
34 changes: 14 additions & 20 deletions apps/playground-web/src/app/connect/pay/commerce/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import type { Metadata } from "next";

export const metadata: Metadata = {
metadataBase,
title: "Integrate Fiat & Cross-Chain Crypto Payments | thirdweb Pay",
title: "Integrate Fiat & Cross-Chain Crypto Payments | Universal Bridge",
description:
"The easiest way for users to transact in your app. Onramp users in clicks and generate revenue for each user transaction. Integrate for free.",
};
Expand All @@ -34,7 +34,7 @@ function BuyMerch() {
return (
<CodeExample
header={{
title: "Commerce",
title: "Checkout",
description: (
<>
Take payments from Fiat or Crypto directly to your seller wallet.
Expand All @@ -46,28 +46,22 @@ function BuyMerch() {
),
}}
preview={<BuyMerchPreview />}
code={`import { PayEmbed, getDefaultToken } from "thirdweb/react";
code={`import { CheckoutWidget, getDefaultToken } from "thirdweb/react";
import { base } from "thirdweb/chains";

function App() {
return (
<PayEmbed
client={client}
theme={"light"}
payOptions={{
mode: "direct_payment",
paymentInfo: {
amount: "35",
chain: base,
token: getDefaultToken(base, "USDC"),
sellerAddress: "0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675",
},
metadata: {
name: "Black Hoodie (Size L)",
image: "/drip-hoodie.png",
},
}}
/>
<CheckoutWidget
client={THIRDWEB_CLIENT}
theme="light"
chain={base}
amount={toUnits("2", 6)}
tokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
seller="0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675"
feePayer="seller"
name="Black Hoodie"
description="Size L | Ships worldwide."
/>
);
};`}
lang="tsx"
Expand Down
35 changes: 9 additions & 26 deletions apps/playground-web/src/app/connect/pay/components/types.ts
Original file line number Diff line number Diff line change
@@ -1,43 +1,26 @@
import type { Chain } from "thirdweb";
import type { LocaleId, ThemeOverrides, TokenInfo } from "thirdweb/react";
import type { WalletId } from "thirdweb/wallets";
import type { Address, Chain } from "thirdweb";
import type { ThemeOverrides } from "thirdweb/react";

export type PayEmbedPlaygroundOptions = {
export type BridgeComponentsPlaygroundOptions = {
theme: {
type: "dark" | "light";
darkColorOverrides: ThemeOverrides["colors"];
lightColorOverrides: ThemeOverrides["colors"];
};
payOptions: {
mode?: "fund_wallet" | "direct_payment" | "transaction";
widget?: "buy" | "checkout" | "transaction";
title: string | undefined;
image: string | undefined;
description: string | undefined;

// fund_wallet mode options
buyTokenAddress: string | undefined;
buyTokenAmount: string | undefined;
buyTokenChain: Chain | undefined;
buyTokenInfo?: TokenInfo;
buyWithCrypto?: boolean;
buyWithFiat?: boolean;
buyTokenAddress: Address;
buyTokenAmount: string;
buyTokenChain: Chain;

// direct_payment mode options
sellerAddress?: string;
sellerAddress: Address;

// transaction mode options
transactionData?: string; // Simplified for demo; could be more complex in real implementation
};
connectOptions: {
walletIds: WalletId[];
modalTitle: string | undefined;
modalTitleIcon: string | undefined;
localeId: LocaleId;
enableAuth: boolean;
enableAccountAbstraction: boolean;
termsOfServiceLink: string | undefined;
privacyPolicyLink: string | undefined;
buttonLabel: string | undefined;
ShowThirdwebBranding: boolean;
requireApproval: boolean;
};
};
Loading
Loading