From d907017217a0927e7f69eab0470b1fe120b4d1a1 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Wed, 5 Nov 2025 21:10:50 +0000
Subject: [PATCH] [MNY-295] Fix BuyWidget autoconnect not working when
 receiverAddress prop is set (#8363)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## 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 fixing the `BuyWidget` component's autoconnect functionality when the `receiverAddress` prop is set, and it introduces a new story variant to demonstrate this behavior.

### Detailed summary
- Updated `BuyWidget` to conditionally render the `AutoConnect` component based on `connectOptions.autoConnect`.
- Introduced a new story `NoAutoConnect` in `BuyWidget.stories.tsx` to showcase the widget with `autoConnect` set to false.
- Modified `FundWallet.tsx` to ensure proper handling of the `autoConnect` prop.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

## Release Notes

* **Bug Fixes**
  * Fixed auto-connect functionality that was not working correctly when the receiver address property is set on the buy widget.

* **New Features**
  * Added configurable auto-connect option to the buy widget, enabling users to control whether auto-connection is enabled or disabled based on their needs.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .changeset/bumpy-shoes-flow.md                   |  5 +++++
 .../src/react/web/ui/Bridge/BuyWidget.tsx        | 16 ++++++++++++++++
 .../src/react/web/ui/Bridge/FundWallet.tsx       |  1 +
 .../thirdweb/src/stories/BuyWidget.stories.tsx   | 14 ++++++++++++++
 4 files changed, 36 insertions(+)
 create mode 100644 .changeset/bumpy-shoes-flow.md

diff --git a/.changeset/bumpy-shoes-flow.md b/.changeset/bumpy-shoes-flow.md
new file mode 100644
index 00000000000..a18e882172e
--- /dev/null
+++ b/.changeset/bumpy-shoes-flow.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix BuyWidget autoconnect not working when receiverAddress prop is set
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
index f79eece83cf..989b981787c 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
@@ -25,6 +25,7 @@ import type {
 import type { CompletedStatusResult } from "../../../core/hooks/useStepExecutor.js";
 import type { SupportedTokens } from "../../../core/utils/defaultTokens.js";
 import { webWindowAdapter } from "../../adapters/WindowAdapter.js";
+import { AutoConnect } from "../AutoConnect/AutoConnect.js";
 import connectLocaleEn from "../ConnectWallet/locale/en.js";
 import { EmbedContainer } from "../ConnectWallet/Modal/ConnectEmbed.js";
 import { DynamicHeight } from "../components/DynamicHeight.js";
@@ -359,6 +360,21 @@ export function BuyWidget(props: BuyWidgetProps) {
       className={props.className}
       style={props.style}
     >
+      {props.connectOptions?.autoConnect !== false && (
+        <AutoConnect
+          client={props.client}
+          wallets={props.connectOptions?.wallets}
+          timeout={
+            typeof props.connectOptions?.autoConnect === "object"
+              ? props.connectOptions?.autoConnect?.timeout
+              : undefined
+          }
+          appMetadata={props.connectOptions?.appMetadata}
+          accountAbstraction={props.connectOptions?.accountAbstraction}
+          chain={props.connectOptions?.chain}
+        />
+      )}
+
       <BridgeWidgetContent
         {...props}
         theme={props.theme || "dark"}
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx b/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx
index fafe242b351..49ab3176391 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx
@@ -298,6 +298,7 @@ export function FundWallet(props: FundWalletProps) {
           }}
           theme={theme}
           {...props.connectOptions}
+          autoConnect={false}
         />
       ) : (
         <Button
diff --git a/packages/thirdweb/src/stories/BuyWidget.stories.tsx b/packages/thirdweb/src/stories/BuyWidget.stories.tsx
index a6cb7f0d376..1ea55b81768 100644
--- a/packages/thirdweb/src/stories/BuyWidget.stories.tsx
+++ b/packages/thirdweb/src/stories/BuyWidget.stories.tsx
@@ -138,6 +138,20 @@ export function LargeAmount() {
   );
 }
 
+export function NoAutoConnect() {
+  return (
+    <Variant
+      client={storyClient}
+      chain={ethereum}
+      tokenAddress="0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984"
+      amount="150000"
+      connectOptions={{
+        autoConnect: false,
+      }}
+    />
+  );
+}
+
 function Variant(props: BuyWidgetProps) {
   return (
     <div