Skip to content

Commit 3009c69

Browse files
MananTankMananTank
committed
SDK: Fix PayEmbed not rendering anything when mode prop is not set
1 parent 98eefdf commit 3009c69

File tree

4 files changed

+230
-49
lines changed

4 files changed

+230
-49
lines changed

‎.changeset/cold-pigs-dress.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"thirdweb": patch
3+
---
4+
5+
Fix PayEmbed UI when mode prop is not specified - Default to mode: "fund_wallet" with amount: "0.01" and chain: ethereum

‎packages/thirdweb/src/react/web/ui/PayEmbed.tsx

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22

33
import { useEffect } from "react";
4+
import { ethereum } from "../../../chains/chain-definitions/ethereum.js";
45
import type { Chain } from "../../../chains/types.js";
56
import type { ThirdwebClient } from "../../../client/client.js";
67
import type { Address } from "../../../utils/address.js";
@@ -328,14 +329,11 @@ export function PayEmbed(props: PayEmbedProps) {
328329
? props.payOptions.metadata
329330
: null;
330331

331-
if (
332-
props.payOptions?.mode === "fund_wallet" &&
333-
props.payOptions?.prefillBuy
334-
) {
332+
if (!props.payOptions?.mode || props.payOptions?.mode === "fund_wallet") {
335333
return (
336334
<BuyWidget
337-
amount={props.payOptions.prefillBuy.amount || "0.01"}
338-
chain={props.payOptions.prefillBuy.chain}
335+
amount={props.payOptions?.prefillBuy?.amount || "0.01"}
336+
chain={props.payOptions?.prefillBuy?.chain || ethereum}
339337
client={props.client}
340338
onSuccess={() => props.payOptions?.onPurchaseSuccess?.()}
341339
paymentMethods={
@@ -349,7 +347,7 @@ export function PayEmbed(props: PayEmbedProps) {
349347
theme={theme}
350348
title={metadata?.name || "Buy"}
351349
tokenAddress={
352-
props.payOptions.prefillBuy.token?.address as Address | undefined
350+
props.payOptions?.prefillBuy?.token?.address as Address | undefined
353351
}
354352
/>
355353
);

‎packages/thirdweb/src/stories/PayEmbed.stories.ts

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎packages/thirdweb/src/stories/PayEmbed.stories.tsx

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
import type { Meta } from "@storybook/react-vite";
2+
import { base } from "../chains/chain-definitions/base.js";
3+
import { polygon } from "../chains/chain-definitions/polygon.js";
4+
import { lightTheme } from "../react/core/design-system/index.js";
5+
import { PayEmbed } from "../react/web/ui/PayEmbed.js";
6+
import { prepareTransaction } from "../transaction/prepare-transaction.js";
7+
import { toWei } from "../utils/units.js";
8+
import { storyClient } from "./utils.js";
9+
10+
const meta = {
11+
args: {
12+
client: storyClient,
13+
},
14+
parameters: {
15+
layout: "centered",
16+
},
17+
tags: ["autodocs"],
18+
title: "Connect/PayEmbed",
19+
} satisfies Meta<typeof PayEmbed>;
20+
21+
export function BasicUsage() {
22+
return <PayEmbed client={storyClient} />;
23+
}
24+
25+
export function BasicUsageWithMetadata() {
26+
return (
27+
<PayEmbed
28+
client={storyClient}
29+
payOptions={{
30+
metadata: {
31+
name: "this is a title",
32+
// This is not shown in UI - TODO fix this
33+
description: "this is a description",
34+
},
35+
}}
36+
/>
37+
);
38+
}
39+
40+
export function FundWallet() {
41+
return (
42+
<PayEmbed
43+
client={storyClient}
44+
payOptions={{
45+
mode: "fund_wallet",
46+
}}
47+
/>
48+
);
49+
}
50+
51+
export function FundWalletWithMetadata() {
52+
return (
53+
<PayEmbed
54+
client={storyClient}
55+
payOptions={{
56+
mode: "fund_wallet",
57+
metadata: {
58+
name: "this is a title",
59+
// This is not shown in UI - TODO fix this
60+
description: "this is a description",
61+
},
62+
}}
63+
/>
64+
);
65+
}
66+
67+
export function FundWalletWithOptions() {
68+
return (
69+
<PayEmbed
70+
client={storyClient}
71+
payOptions={{
72+
mode: "fund_wallet",
73+
prefillBuy: {
74+
amount: "0.123",
75+
chain: polygon,
76+
},
77+
}}
78+
/>
79+
);
80+
}
81+
82+
export function FundWalletERC20() {
83+
return (
84+
<PayEmbed
85+
client={storyClient}
86+
payOptions={{
87+
mode: "fund_wallet",
88+
prefillBuy: {
89+
amount: "0.123",
90+
chain: base,
91+
token: {
92+
address: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
93+
name: "USDC",
94+
// This icon is not being used - TODO fix this, either remove this prop or use it
95+
icon: "https://picsum.photos/200/200",
96+
},
97+
},
98+
}}
99+
/>
100+
);
101+
}
102+
103+
export function DirectPayment() {
104+
return (
105+
<PayEmbed
106+
client={storyClient}
107+
payOptions={{
108+
mode: "direct_payment",
109+
paymentInfo: {
110+
amount: "0.123",
111+
chain: polygon,
112+
sellerAddress: "0x83Dd93fA5D8343094f850f90B3fb90088C1bB425",
113+
},
114+
}}
115+
/>
116+
);
117+
}
118+
119+
export function DirectPaymentERC20() {
120+
return (
121+
<PayEmbed
122+
client={storyClient}
123+
payOptions={{
124+
mode: "direct_payment",
125+
paymentInfo: {
126+
amount: "0.123",
127+
chain: base,
128+
sellerAddress: "0x83Dd93fA5D8343094f850f90B3fb90088C1bB425",
129+
token: {
130+
address: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
131+
name: "USDC",
132+
// This icon is not being used - TODO fix this, either remove this prop or use it
133+
icon: "https://coin-images.coingecko.com/coins/images/6319/large/usdc.png",
134+
},
135+
},
136+
}}
137+
/>
138+
);
139+
}
140+
141+
export function DirectPaymentWithMetadata() {
142+
return (
143+
<PayEmbed
144+
client={storyClient}
145+
payOptions={{
146+
mode: "direct_payment",
147+
paymentInfo: {
148+
amount: "0.123",
149+
chain: polygon,
150+
sellerAddress: "0x83Dd93fA5D8343094f850f90B3fb90088C1bB425",
151+
},
152+
metadata: {
153+
name: "this is a title",
154+
description: "this is a description",
155+
},
156+
}}
157+
/>
158+
);
159+
}
160+
161+
export function Transaction() {
162+
return (
163+
<PayEmbed
164+
client={storyClient}
165+
payOptions={{
166+
mode: "transaction",
167+
transaction: prepareTransaction({
168+
to: "0x83Dd93fA5D8343094f850f90B3fb90088C1bB425",
169+
chain: polygon,
170+
client: storyClient,
171+
value: toWei("0.123"),
172+
}),
173+
}}
174+
/>
175+
);
176+
}
177+
178+
export function TransactionWithMetadata() {
179+
return (
180+
<PayEmbed
181+
client={storyClient}
182+
payOptions={{
183+
metadata: {
184+
name: "this is a title",
185+
description: "this is a description",
186+
},
187+
mode: "transaction",
188+
transaction: prepareTransaction({
189+
to: "0x83Dd93fA5D8343094f850f90B3fb90088C1bB425",
190+
chain: polygon,
191+
client: storyClient,
192+
value: toWei("0.123"),
193+
}),
194+
}}
195+
/>
196+
);
197+
}
198+
199+
export function LightMode() {
200+
return <PayEmbed client={storyClient} theme="light" />;
201+
}
202+
203+
export function CustomLightTheme() {
204+
return (
205+
<PayEmbed
206+
client={storyClient}
207+
theme={lightTheme({
208+
colors: {
209+
modalBg: "#FFFFF0",
210+
tertiaryBg: "#DBE4C9",
211+
borderColor: "#8AA624",
212+
secondaryText: "#3E3F29",
213+
accentText: "#E43636",
214+
},
215+
})}
216+
/>
217+
);
218+
}
219+
220+
export default meta;

0 commit comments

Comments
 (0)