Skip to content

Commit f90fcdc

Browse files
gregfromstlgregfromstl
committed
fix: update playground bridge form
1 parent 919531b commit f90fcdc

File tree

3 files changed

+68
-131
lines changed

3 files changed

+68
-131
lines changed

‎apps/playground-web/src/app/connect/pay/components/CodeGen.tsx

Lines changed: 57 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import { Suspense, lazy } from "react";
22
import { CodeLoading } from "../../../../components/code/code.client";
3-
import type { PayEmbedPlaygroundOptions } from "./types";
3+
import type { BridgeComponentsPlaygroundOptions } from "./types";
4+
import { useQuery } from "@tanstack/react-query";
5+
import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
6+
import { defineChain, getContract, toUnits } from "thirdweb";
7+
import { THIRDWEB_CLIENT } from "@/lib/client";
48

59
const CodeClient = lazy(
610
() => import("../../../../components/code/code.client"),
711
);
812

913
export function CodeGen(props: {
10-
options: PayEmbedPlaygroundOptions;
14+
options: BridgeComponentsPlaygroundOptions;
1115
}) {
1216
return (
1317
<div className="flex w-full grow flex-col">
@@ -23,8 +27,7 @@ export function CodeGen(props: {
2327
);
2428
}
2529

26-
function getCode(options: PayEmbedPlaygroundOptions) {
27-
const walletCodes: string[] = [];
30+
function getCode(options: BridgeComponentsPlaygroundOptions) {
2831
const imports = {
2932
react: ["PayEmbed"] as string[],
3033
thirdweb: [] as string[],
@@ -45,134 +48,71 @@ function getCode(options: PayEmbedPlaygroundOptions) {
4548
imports.chains.push("base");
4649
}
4750

48-
// Generate chain reference code
49-
let chainCode: string;
50-
if (isCustomChain && options.payOptions.buyTokenChain?.id) {
51-
chainCode = `defineChain(${options.payOptions.buyTokenChain.id})`;
52-
} else {
53-
chainCode = "base";
54-
}
55-
56-
for (const wallet of options.connectOptions.walletIds) {
57-
walletCodes.push(`createWallet("${wallet}")`);
58-
}
59-
60-
if (options.connectOptions.walletIds.length > 0) {
61-
imports.wallets.push("createWallet");
62-
}
63-
64-
let themeProp: string | undefined;
65-
if (
66-
options.theme.type === "dark" &&
67-
Object.keys(options.theme.darkColorOverrides || {}).length > 0
68-
) {
69-
themeProp = `darkTheme({
70-
colors: ${JSON.stringify(options.theme.darkColorOverrides)},
71-
})`;
72-
imports.react.push("darkTheme");
73-
}
74-
75-
if (options.theme.type === "light") {
76-
if (Object.keys(options.theme.lightColorOverrides || {}).length > 0) {
77-
themeProp = `lightTheme({
78-
colors: ${JSON.stringify(options.theme.lightColorOverrides)},
79-
})`;
80-
imports.react.push("lightTheme");
81-
} else {
82-
themeProp = quotes("light");
51+
const { data: amount } = useQuery({
52+
queryKey: [
53+
"amount",
54+
options.payOptions.buyTokenAmount,
55+
options.payOptions.buyTokenChain,
56+
options.payOptions.buyTokenAddress,
57+
],
58+
queryFn: async () => {
59+
if (!options.payOptions.buyTokenAmount) {
60+
return;
61+
}
62+
const contract = getContract({
63+
chain: defineChain(options.payOptions.buyTokenChain.id),
64+
address: options.payOptions.buyTokenAddress,
65+
client: THIRDWEB_CLIENT,
66+
});
67+
const token = await getCurrencyMetadata({
68+
contract,
69+
});
70+
71+
return toUnits(options.payOptions.buyTokenAmount, token.decimals);
72+
},
73+
});
74+
75+
imports.wallets.push("createWallet");
76+
77+
const componentName = (() => {
78+
switch (options.payOptions.widget) {
79+
case "buy":
80+
return "BuyWidget";
81+
case "checkout":
82+
return "CheckoutWidget";
83+
case "transaction":
84+
return "TransactionWidget";
85+
default:
86+
return "PayEmbed";
8387
}
84-
}
85-
86-
if (options.connectOptions.enableAccountAbstraction) {
87-
imports.chains.push("sepolia");
88-
}
89-
90-
// Generate payOptions based on the mode
91-
let payOptionsCode = "{";
92-
93-
if (options.payOptions.title || options.payOptions.image) {
94-
payOptionsCode += `
95-
metadata: {
96-
${options.payOptions.title ? `name: ${quotes(options.payOptions.title)},` : ""}
97-
${options.payOptions.image ? `image: ${quotes(options.payOptions.image)},` : ""}
98-
},`;
99-
}
100-
101-
// Add mode-specific options
102-
if (options.payOptions.mode) {
103-
payOptionsCode += `
104-
mode: "${options.payOptions.mode}",`;
105-
106-
// Add buyWithCrypto and buyWithFiat if they're set to false
107-
if (options.payOptions.buyWithCrypto === false) {
108-
payOptionsCode += `
109-
buyWithCrypto: false,`;
110-
}
111-
112-
if (options.payOptions.buyWithFiat === false) {
113-
payOptionsCode += `
114-
buyWithFiat: false,`;
115-
}
116-
117-
if (options.payOptions.mode === "fund_wallet" || !options.payOptions.mode) {
118-
payOptionsCode += `
119-
prefillBuy: {
120-
chain: ${chainCode},
121-
amount: ${options.payOptions.buyTokenAmount ? quotes(options.payOptions.buyTokenAmount) : '"0.01"'},
122-
${options.payOptions.buyTokenInfo ? `token: ${JSON.stringify(options.payOptions.buyTokenInfo)},` : ""}
123-
},`;
124-
} else if (options.payOptions.mode === "direct_payment") {
125-
payOptionsCode += `
126-
paymentInfo: {
127-
chain: ${chainCode},
128-
sellerAddress: ${options.payOptions.sellerAddress ? quotes(options.payOptions.sellerAddress) : '"0x0000000000000000000000000000000000000000"'},
129-
amount: ${options.payOptions.buyTokenAmount ? quotes(options.payOptions.buyTokenAmount) : '"0.01"'},
130-
${options.payOptions.buyTokenInfo ? `token: ${JSON.stringify(options.payOptions.buyTokenInfo)},` : ""}
131-
},`;
132-
} else if (options.payOptions.mode === "transaction") {
133-
payOptionsCode += `
134-
transaction: claimTo({
135-
contract: myNftContract,
136-
quantity: 1n,
137-
tokenId: 0n,
138-
to: "0x...",
139-
}),`;
140-
}
141-
}
142-
143-
payOptionsCode += `
144-
}`;
145-
146-
const accountAbstractionCode = options.connectOptions.enableAccountAbstraction
147-
? `\n accountAbstraction: {
148-
chain: ${isCustomChain ? `defineChain(${options.payOptions.buyTokenChain?.id})` : "base"},
149-
sponsorGas: true,
150-
}`
151-
: "";
152-
153-
const connectOptionsCode = `${accountAbstractionCode ? `{${accountAbstractionCode}\n }` : ""}`;
88+
})();
89+
imports.react.push(componentName);
90+
imports.chains.push("defineChain");
15491

15592
return `\
15693
import { createThirdwebClient } from "thirdweb";
15794
${imports.react.length > 0 ? `import { ${imports.react.join(", ")} } from "thirdweb/react";` : ""}
15895
${imports.thirdweb.length > 0 ? `import { ${imports.thirdweb.join(", ")} } from "thirdweb";` : ""}
159-
${imports.wallets.length > 0 ? `import { ${imports.wallets.join(", ")} } from "thirdweb/wallets";` : ""}
160-
${imports.chains.length > 0 ? `import { ${imports.chains.join(", ")} } from "thirdweb/chains";` : ""}
16196
16297
const client = createThirdwebClient({
16398
clientId: "....",
16499
});
165100
166101
function Example() {
167102
return (
168-
<PayEmbed
103+
<${componentName}
169104
client={client}
170-
payOptions={${payOptionsCode}}${connectOptionsCode ? `\n connectOptions={${connectOptionsCode}}` : ""}${themeProp ? `\n theme={${themeProp}}` : ""}
105+
chain={defineChain(${options.payOptions.buyTokenChain.id})}
106+
amount={${amount}n}${options.payOptions.buyTokenAddress ? `\n\t token="${options.payOptions.buyTokenAddress}"` : ""}${options.payOptions.sellerAddress ? `\n\t seller="${options.payOptions.sellerAddress}"` : ""}${options.payOptions.title ? `\n\t ${options.payOptions.widget === "checkout" ? "name" : "title"}="${options.payOptions.title}"` : ""}${options.payOptions.image ? `\n\t image="${options.payOptions.image}"` : ""}${options.payOptions.description ? `\n\t description="${options.payOptions.description}"` : ""}${options.payOptions.widget === "transaction"
107+
? `\n\t transaction={claimTo({
108+
contract: nftContract,
109+
quantity: 1n,
110+
tokenId: 2n,
111+
to: account?.address || "",
112+
})}`
113+
: ""
114+
}
171115
/>
172116
);
173117
}`;
174118
}
175-
176-
function quotes(value: string) {
177-
return `"${value}"`;
178-
}

‎apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -137,10 +137,6 @@ export function LeftSection(props: {
137137
placeholder="0x..."
138138
value={payOptions.buyTokenAddress}
139139
onChange={(e) => {
140-
const addressCheck = isAddress(e.target.value);
141-
if (!addressCheck) {
142-
return;
143-
}
144140
setOptions((v) => ({
145141
...v,
146142
payOptions: {
@@ -169,10 +165,6 @@ export function LeftSection(props: {
169165
className="bg-card"
170166
value={payOptions.sellerAddress || ""}
171167
onChange={(e) => {
172-
const addressCheck = isAddress(e.target.value);
173-
if (!addressCheck) {
174-
return;
175-
}
176168
setOptions((v) => ({
177169
...v,
178170
payOptions: {

‎packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@ import type { Chain } from "../../../../chains/types.js";
66
import type { ThirdwebClient } from "../../../../client/client.js";
77
import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
88
import { getToken } from "../../../../pay/convert/get-token.js";
9-
import { type Address, checksumAddress } from "../../../../utils/address.js";
9+
import {
10+
type Address,
11+
checksumAddress,
12+
isAddress,
13+
} from "../../../../utils/address.js";
1014
import { stringify } from "../../../../utils/json.js";
1115
import { toTokens } from "../../../../utils/units.js";
1216
import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
@@ -262,8 +266,9 @@ export function BuyWidget(props: BuyWidgetProps) {
262266
queryFn: async (): Promise<UIOptionsResult> => {
263267
if (
264268
!props.tokenAddress ||
265-
checksumAddress(props.tokenAddress) ===
266-
checksumAddress(NATIVE_TOKEN_ADDRESS)
269+
(isAddress(props.tokenAddress) &&
270+
checksumAddress(props.tokenAddress) ===
271+
checksumAddress(NATIVE_TOKEN_ADDRESS))
267272
) {
268273
const ETH = await getToken(
269274
props.client,
@@ -284,9 +289,9 @@ export function BuyWidget(props: BuyWidgetProps) {
284289
props.client,
285290
props.tokenAddress,
286291
props.chain.id,
287-
).catch((err) =>
288-
err.message.includes("not supported") ? undefined : Promise.reject(err),
289-
);
292+
).catch((err) => {
293+
err.message.includes("not supported") ? undefined : Promise.reject(err);
294+
});
290295
if (!token) {
291296
return {
292297
type: "unsupported_token",

0 commit comments

Comments
 (0)