Skip to content

Commit 49824ce

Browse files
committed
[MNY-286] SDK: Do not require connecting wallet in BuyWidget if receiverAddress is set (#8296)
<!-- ## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes" If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000): ## Notes for the reviewer Anything important to call out? Be sure to also clarify these in your comments. ## How to test Unit tests, playground, etc. --> <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on modifying the `BuyWidget` component to allow users to bypass wallet connection if a `receiverAddress` is provided. It updates the logic for displaying connection prompts based on the presence of this address. ### Detailed summary - Updated `BuyWidget` to not require wallet connection if `receiverAddress` is set. - Removed `activeWalletInfo` dependency from the condition for displaying the `FundWallet`. - Introduced `showConnectButton` variable to determine if the connect button should be shown. - Simplified the rendering logic for the connect button in `FundWallet`. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent 706d696 commit 49824ce

File tree

3 files changed

+23
-17
lines changed

3 files changed

+23
-17
lines changed

.changeset/light-signs-send.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+
Do not require connecting wallet in `BuyWidget` if `receiverAddress` is set

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ import { PaymentSelection } from "./payment-selection/PaymentSelection.js";
3939
import { SuccessScreen } from "./payment-success/SuccessScreen.js";
4040
import { QuoteLoader } from "./QuoteLoader.js";
4141
import { StepRunner } from "./StepRunner.js";
42-
import { useActiveWalletInfo } from "./swap-widget/hooks.js";
4342
import type { PaymentMethod, RequiredParams } from "./types.js";
4443

4544
export type BuyOrOnrampPrepareResult = Extract<
@@ -432,7 +431,6 @@ function BridgeWidgetContent(
432431
>,
433432
) {
434433
const [screen, setScreen] = useState<BuyWidgetScreen>({ id: "1:buy-ui" });
435-
const activeWalletInfo = useActiveWalletInfo();
436434

437435
const handleError = useCallback(
438436
(error: Error, quote: BridgePrepareResult | undefined) => {
@@ -478,7 +476,7 @@ function BridgeWidgetContent(
478476
};
479477
});
480478

481-
if (screen.id === "1:buy-ui" || !activeWalletInfo) {
479+
if (screen.id === "1:buy-ui") {
482480
return (
483481
<FundWallet
484482
theme={props.theme}

packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,9 @@ export function FundWallet(props: FundWalletProps) {
167167
const actionLabel = isReceiverDifferentFromActiveWallet ? "Pay" : "Buy";
168168
const isMobile = useIsMobile();
169169

170+
// if no receiver address is set - wallet must be connected because the user's wallet is the receiver
171+
const showConnectButton = !props.receiverAddress && !activeWalletInfo;
172+
170173
return (
171174
<WithHeader
172175
client={props.client}
@@ -283,7 +286,20 @@ export function FundWallet(props: FundWalletProps) {
283286
)}
284287

285288
{/* Continue Button */}
286-
{activeWalletInfo ? (
289+
{showConnectButton ? (
290+
<ConnectButton
291+
client={props.client}
292+
connectButton={{
293+
label: props.buttonLabel || actionLabel,
294+
style: {
295+
width: "100%",
296+
borderRadius: radius.full,
297+
},
298+
}}
299+
theme={theme}
300+
{...props.connectOptions}
301+
/>
302+
) : (
287303
<Button
288304
disabled={!receiver}
289305
fullWidth
@@ -316,19 +332,6 @@ export function FundWallet(props: FundWalletProps) {
316332
>
317333
{props.buttonLabel || actionLabel}
318334
</Button>
319-
) : (
320-
<ConnectButton
321-
client={props.client}
322-
connectButton={{
323-
label: props.buttonLabel || actionLabel,
324-
style: {
325-
width: "100%",
326-
borderRadius: radius.full,
327-
},
328-
}}
329-
theme={theme}
330-
{...props.connectOptions}
331-
/>
332335
)}
333336

334337
{props.showThirdwebBranding ? (

0 commit comments

Comments
 (0)