[MNY-286] SDK: Do not require connecting wallet in if is set

Author: MananTank

.changeset/light-signs-send.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Do not require connecting wallet in `BuyWidget` if `receiverAddress` is set

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

@@ -39,7 +39,6 @@ import { PaymentSelection } from "./payment-selection/PaymentSelection.js";
 import { SuccessScreen } from "./payment-success/SuccessScreen.js";
 import { QuoteLoader } from "./QuoteLoader.js";
 import { StepRunner } from "./StepRunner.js";
-import { useActiveWalletInfo } from "./swap-widget/hooks.js";
 import type { PaymentMethod, RequiredParams } from "./types.js";
 
 export type BuyOrOnrampPrepareResult = Extract<
@@ -432,7 +431,6 @@ function BridgeWidgetContent(
   >,
 ) {
   const [screen, setScreen] = useState<BuyWidgetScreen>({ id: "1:buy-ui" });
-  const activeWalletInfo = useActiveWalletInfo();
 
   const handleError = useCallback(
     (error: Error, quote: BridgePrepareResult | undefined) => {
@@ -478,7 +476,7 @@ function BridgeWidgetContent(
     };
   });
 
-  if (screen.id === "1:buy-ui" || !activeWalletInfo) {
+  if (screen.id === "1:buy-ui") {
     return (
       <FundWallet
         theme={props.theme}

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

@@ -167,6 +167,9 @@ export function FundWallet(props: FundWalletProps) {
   const actionLabel = isReceiverDifferentFromActiveWallet ? "Pay" : "Buy";
   const isMobile = useIsMobile();
 
+  // if no receiver address is set - wallet must be connected because the user's wallet is the receiver
+  const showConnectButton = !props.receiverAddress && !activeWalletInfo;
+
   return (
     <WithHeader
       client={props.client}
@@ -283,7 +286,20 @@ export function FundWallet(props: FundWalletProps) {
       )}
 
       {/* Continue Button */}
-      {activeWalletInfo ? (
+      {showConnectButton ? (
+        <ConnectButton
+          client={props.client}
+          connectButton={{
+            label: props.buttonLabel || actionLabel,
+            style: {
+              width: "100%",
+              borderRadius: radius.full,
+            },
+          }}
+          theme={theme}
+          {...props.connectOptions}
+        />
+      ) : (
         <Button
           disabled={!receiver}
           fullWidth
@@ -316,19 +332,6 @@ export function FundWallet(props: FundWalletProps) {
         >
           {props.buttonLabel || actionLabel}
         </Button>
-      ) : (
-        <ConnectButton
-          client={props.client}
-          connectButton={{
-            label: props.buttonLabel || actionLabel,
-            style: {
-              width: "100%",
-              borderRadius: radius.full,
-            },
-          }}
-          theme={theme}
-          {...props.connectOptions}
-        />
       )}
 
       {props.showThirdwebBranding ? (