Skip to content

Commit e96f4fa

Browse files
joaquim-vergesjoaquim-verges
committed
handle fiat only, add playground toggle
1 parent 0c4e326 commit e96f4fa

File tree

12 files changed

+247
-102
lines changed

12 files changed

+247
-102
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ function Example() {
7373
<${componentName}
7474
client={client}
7575
chain={defineChain(${options.payOptions.buyTokenChain.id})}
76-
amount="${options.payOptions.buyTokenAmount}"${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}"` : ""}${
76+
amount="${options.payOptions.buyTokenAmount}"${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.paymentMethods && options.payOptions.paymentMethods.length > 0 ? `\n\t paymentMethods={${JSON.stringify(options.payOptions.paymentMethods)}}` : ""}${
7777
options.payOptions.widget === "transaction"
7878
? `\n\t transaction={claimTo({
7979
contract: nftContract,

‎apps/playground-web/src/app/connect/pay/components/types.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import type { Address, Chain } from "thirdweb";
1+
import type { Chain } from "thirdweb/chains";
22
import type { ThemeOverrides } from "thirdweb/react";
3+
import type { Address } from "thirdweb/utils";
34

45
export type BridgeComponentsPlaygroundOptions = {
56
theme: {
@@ -22,5 +23,7 @@ export type BridgeComponentsPlaygroundOptions = {
2223

2324
// transaction mode options
2425
transactionData?: string; // Simplified for demo; could be more complex in real implementation
26+
27+
paymentMethods: ("crypto" | "card")[];
2528
};
2629
};

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

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { useId, useState } from "react";
1313
import type { Address } from "thirdweb";
1414
import { defineChain } from "thirdweb/chains";
1515
import { CustomRadioGroup } from "@/components/ui/CustomRadioGroup";
16+
import { Checkbox } from "@/components/ui/checkbox";
1617
import { Input } from "@/components/ui/input";
1718
import { Label } from "@/components/ui/label";
1819
import { cn } from "../../../../lib/utils";
@@ -53,6 +54,8 @@ export function LeftSection(props: {
5354
const modalTitleIconId = useId();
5455
const modalDescriptionId = useId();
5556
const themeId = useId();
57+
const cryptoPaymentId = useId();
58+
const cardPaymentId = useId();
5659

5760
return (
5861
<div className="flex flex-col gap-4">
@@ -161,6 +164,65 @@ export function LeftSection(props: {
161164
/>
162165
</div>
163166
</div>
167+
168+
{/* Payment Methods */}
169+
<div className="flex flex-col gap-3 pt-4">
170+
<Label>Payment Methods</Label>
171+
<div className="flex gap-4">
172+
<div className="flex items-center space-x-2">
173+
<Checkbox
174+
checked={payOptions.paymentMethods.includes(
175+
"crypto",
176+
)}
177+
id={cryptoPaymentId}
178+
onCheckedChange={(checked) => {
179+
setOptions((v) => ({
180+
...v,
181+
payOptions: {
182+
...v.payOptions,
183+
paymentMethods: checked
184+
? [
185+
...v.payOptions.paymentMethods.filter(
186+
(m) => m !== "crypto",
187+
),
188+
"crypto",
189+
]
190+
: v.payOptions.paymentMethods.filter(
191+
(m) => m !== "crypto",
192+
),
193+
},
194+
}));
195+
}}
196+
/>
197+
<Label htmlFor={cryptoPaymentId}>Crypto</Label>
198+
</div>
199+
<div className="flex items-center space-x-2">
200+
<Checkbox
201+
checked={payOptions.paymentMethods.includes("card")}
202+
id={cardPaymentId}
203+
onCheckedChange={(checked) => {
204+
setOptions((v) => ({
205+
...v,
206+
payOptions: {
207+
...v.payOptions,
208+
paymentMethods: checked
209+
? [
210+
...v.payOptions.paymentMethods.filter(
211+
(m) => m !== "card",
212+
),
213+
"card",
214+
]
215+
: v.payOptions.paymentMethods.filter(
216+
(m) => m !== "card",
217+
),
218+
},
219+
}));
220+
}}
221+
/>
222+
<Label htmlFor={cardPaymentId}>Card</Label>
223+
</div>
224+
</div>
225+
</div>
164226
</div>
165227
</div>
166228
</div>
@@ -249,6 +311,65 @@ export function LeftSection(props: {
249311
/>
250312
</div>
251313
</div>
314+
315+
{/* Payment Methods */}
316+
<div className="flex flex-col gap-3">
317+
<Label>Payment Methods</Label>
318+
<div className="flex gap-4">
319+
<div className="flex items-center space-x-2">
320+
<Checkbox
321+
checked={payOptions.paymentMethods.includes(
322+
"crypto",
323+
)}
324+
id={cryptoPaymentId}
325+
onCheckedChange={(checked) => {
326+
setOptions((v) => ({
327+
...v,
328+
payOptions: {
329+
...v.payOptions,
330+
paymentMethods: checked
331+
? [
332+
...v.payOptions.paymentMethods.filter(
333+
(m) => m !== "crypto",
334+
),
335+
"crypto",
336+
]
337+
: v.payOptions.paymentMethods.filter(
338+
(m) => m !== "crypto",
339+
),
340+
},
341+
}));
342+
}}
343+
/>
344+
<Label htmlFor={cryptoPaymentId}>Crypto</Label>
345+
</div>
346+
<div className="flex items-center space-x-2">
347+
<Checkbox
348+
checked={payOptions.paymentMethods.includes("card")}
349+
id={cardPaymentId}
350+
onCheckedChange={(checked) => {
351+
setOptions((v) => ({
352+
...v,
353+
payOptions: {
354+
...v.payOptions,
355+
paymentMethods: checked
356+
? [
357+
...v.payOptions.paymentMethods.filter(
358+
(m) => m !== "card",
359+
),
360+
"card",
361+
]
362+
: v.payOptions.paymentMethods.filter(
363+
(m) => m !== "card",
364+
),
365+
},
366+
}));
367+
}}
368+
/>
369+
<Label htmlFor={cardPaymentId}>Card</Label>
370+
</div>
371+
</div>
372+
</div>
252373
</div>
253374
</div>
254375
</div>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ export function RightSection(props: {
6060
client={THIRDWEB_CLIENT}
6161
description={props.options.payOptions.description}
6262
image={props.options.payOptions.image}
63+
paymentMethods={props.options.payOptions.paymentMethods}
6364
theme={themeObj}
6465
title={props.options.payOptions.title}
6566
tokenAddress={props.options.payOptions.buyTokenAddress}
@@ -81,6 +82,7 @@ export function RightSection(props: {
8182
getDefaultImage(props.options.theme.type)
8283
}
8384
name={props.options.payOptions.title || "Your Product Name"}
85+
paymentMethods={props.options.payOptions.paymentMethods}
8486
presetOptions={[1, 2, 3]}
8587
seller={props.options.payOptions.sellerAddress}
8688
theme={themeObj}
@@ -95,6 +97,7 @@ export function RightSection(props: {
9597
client={THIRDWEB_CLIENT}
9698
description={props.options.payOptions.description}
9799
image={props.options.payOptions.image}
100+
paymentMethods={props.options.payOptions.paymentMethods}
98101
theme={themeObj}
99102
title={props.options.payOptions.title}
100103
transaction={claimTo({

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const defaultConnectOptions: BridgeComponentsPlaygroundOptions = {
1313
buyTokenChain: arbitrum,
1414
description: "",
1515
image: "",
16+
paymentMethods: ["crypto", "card"],
1617
sellerAddress: "0x0000000000000000000000000000000000000000",
1718
title: "",
1819
transactionData: "",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -277,8 +277,8 @@ export function BridgeOrchestrator({
277277
}}
278278
onError={handleError}
279279
onPaymentMethodSelected={handlePaymentMethodSelected}
280-
receiverAddress={state.context.receiverAddress}
281280
paymentMethods={paymentMethods}
281+
receiverAddress={state.context.receiverAddress}
282282
/>
283283
)}
284284

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -384,11 +384,11 @@ export function BuyWidget(props: BuyWidgetProps) {
384384
props.onError?.(err);
385385
}}
386386
paymentLinkId={props.paymentLinkId}
387+
paymentMethods={props.paymentMethods}
387388
presetOptions={props.presetOptions}
388389
purchaseData={props.purchaseData}
389390
receiverAddress={undefined}
390391
uiOptions={bridgeDataQuery.data.data}
391-
paymentMethods={props.paymentMethods}
392392
/>
393393
);
394394
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -347,11 +347,11 @@ export function CheckoutWidget(props: CheckoutWidgetProps) {
347347
props.onError?.(err);
348348
}}
349349
paymentLinkId={props.paymentLinkId}
350+
paymentMethods={props.paymentMethods}
350351
presetOptions={props.presetOptions}
351352
purchaseData={props.purchaseData}
352353
receiverAddress={props.seller}
353354
uiOptions={bridgeDataQuery.data.data}
354-
paymentMethods={props.paymentMethods}
355355
/>
356356
);
357357
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -406,11 +406,11 @@ export function TransactionWidget(props: TransactionWidgetProps) {
406406
props.onError?.(err);
407407
}}
408408
paymentLinkId={props.paymentLinkId}
409+
paymentMethods={props.paymentMethods}
409410
presetOptions={props.presetOptions}
410411
purchaseData={props.purchaseData}
411412
receiverAddress={undefined}
412413
uiOptions={bridgeDataQuery.data.data}
413-
paymentMethods={props.paymentMethods}
414414
/>
415415
);
416416
}

‎packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ export function PaymentSelection({
122122
? currentStep.selectedWallet
123123
: activeWallet;
124124
const {
125-
data: paymentMethods,
125+
data: suitableTokenPaymentMethods,
126126
isLoading: paymentMethodsLoading,
127127
error: paymentMethodsError,
128128
} = usePaymentMethods({
@@ -269,7 +269,7 @@ export function PaymentSelection({
269269
destinationToken={destinationToken}
270270
onBack={handleBackToWalletSelection}
271271
onPaymentMethodSelected={handlePaymentMethodSelected}
272-
paymentMethods={paymentMethods}
272+
paymentMethods={suitableTokenPaymentMethods}
273273
paymentMethodsLoading={paymentMethodsLoading}
274274
/>
275275
)}

0 commit comments

Comments
 (0)