update

Author: MananTank

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

@@ -326,37 +326,13 @@ export type BuyWidgetProps = {
  * @bridge
  */
 export function BuyWidget(props: BuyWidgetProps) {
-  useQuery({
-    queryFn: () => {
-      trackPayEvent({
-        client: props.client,
-        event: "ub:ui:buy_widget:render",
-        toChainId: props.chain.id,
-        toToken: props.tokenAddress,
-      });
-      return true;
-    },
-    queryKey: ["buy_widget:render"],
-  });
-
-  const connectOptions = useMemo(() => {
-    if (!props.connectOptions) return undefined;
-    return {
-      ...props.connectOptions,
-      connectModal: {
-        ...props.connectOptions.connectModal,
-        showThirdwebBranding: props.showThirdwebBranding,
-      },
-    };
-  }, [props.connectOptions, props.showThirdwebBranding]);
-
   return (
     <BridgeWidgetContainer
       theme={props.theme}
       className={props.className}
       style={props.style}
     >
-      <BridgeWidgetContentWrapper {...props} connectOptions={connectOptions} />
+      <BridgeWidgetContentWrapper {...props} />
     </BridgeWidgetContainer>
   );
 }
@@ -369,6 +345,33 @@ function BridgeWidgetContentWrapper(props: BuyWidgetProps) {
     client: props.client,
   });
 
+  useQuery({
+    queryFn: () => {
+      trackPayEvent({
+        client: props.client,
+        event: "ub:ui:buy_widget:render",
+        toChainId: props.chain.id,
+        toToken: props.tokenAddress,
+      });
+      return true;
+    },
+    queryKey: ["buy_widget:render"],
+  });
+
+  // if branding is disabled for widget, disable it for connect options too
+  const connectOptions = useMemo(() => {
+    if (props.showThirdwebBranding === false) {
+      return {
+        ...props.connectOptions,
+        connectModal: {
+          ...props.connectOptions?.connectModal,
+          showThirdwebBranding: false,
+        },
+      };
+    }
+    return props.connectOptions;
+  }, [props.connectOptions, props.showThirdwebBranding]);
+
   if (tokenQuery.isPending || !localQuery.data) {
     return (
       <div
@@ -399,6 +402,7 @@ function BridgeWidgetContentWrapper(props: BuyWidgetProps) {
         currency={props.currency || "USD"}
         paymentMethods={props.paymentMethods || ["crypto", "card"]}
         presetOptions={props.presetOptions || [5, 10, 20]}
+        connectOptions={connectOptions}
         showThirdwebBranding={
           props.showThirdwebBranding === undefined
             ? true

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

@@ -313,40 +313,13 @@ export type CheckoutWidgetProps = {
  * @bridge
  */
 export function CheckoutWidget(props: CheckoutWidgetProps) {
-  useQuery({
-    queryFn: () => {
-      trackPayEvent({
-        client: props.client,
-        event: "ub:ui:checkout_widget:render",
-        toChainId: props.chain.id,
-        toToken: props.tokenAddress,
-      });
-      return true;
-    },
-    queryKey: ["checkout_widget:render"],
-  });
-
-  const connectOptions = useMemo(() => {
-    if (!props.connectOptions) return undefined;
-    return {
-      ...props.connectOptions,
-      connectModal: {
-        ...props.connectOptions.connectModal,
-        showThirdwebBranding: props.showThirdwebBranding,
-      },
-    };
-  }, [props.connectOptions, props.showThirdwebBranding]);
-
   return (
     <CheckoutWidgetContainer
       theme={props.theme}
       className={props.className}
       style={props.style}
     >
-      <CheckoutWidgetContentWrapper
-        {...props}
-        connectOptions={connectOptions}
-      />
+      <CheckoutWidgetContentWrapper {...props} />
     </CheckoutWidgetContainer>
   );
 }
@@ -359,6 +332,33 @@ function CheckoutWidgetContentWrapper(props: CheckoutWidgetProps) {
     client: props.client,
   });
 
+  useQuery({
+    queryFn: () => {
+      trackPayEvent({
+        client: props.client,
+        event: "ub:ui:checkout_widget:render",
+        toChainId: props.chain.id,
+        toToken: props.tokenAddress,
+      });
+      return true;
+    },
+    queryKey: ["checkout_widget:render"],
+  });
+
+  // if branding is disabled for widget, disable it for connect options too
+  const connectOptions = useMemo(() => {
+    if (!props.showThirdwebBranding === false) {
+      return {
+        ...props.connectOptions,
+        connectModal: {
+          ...props.connectOptions?.connectModal,
+          showThirdwebBranding: false,
+        },
+      };
+    }
+    return props.connectOptions;
+  }, [props.connectOptions, props.showThirdwebBranding]);
+
   if (tokenQuery.isPending || !localQuery.data) {
     return (
       <div
@@ -388,6 +388,7 @@ function CheckoutWidgetContentWrapper(props: CheckoutWidgetProps) {
         destinationToken={tokenQuery.data.token}
         currency={props.currency || "USD"}
         paymentMethods={props.paymentMethods || ["crypto", "card"]}
+        connectOptions={connectOptions}
         showThirdwebBranding={
           props.showThirdwebBranding === undefined
             ? true

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

@@ -49,7 +49,6 @@ type FundWalletProps = {
 
   /**
    * Quick buy amounts
-   * @default [5, 10, 20]
    */
   presetOptions: [number, number, number];
 
@@ -110,6 +109,7 @@ export function FundWallet({
   const theme = useCustomTheme();
   const account = useActiveAccount();
   const receiver = receiverAddress ?? account?.address;
+
   const handleAmountChange = (inputValue: string) => {
     let processedValue = inputValue;
 

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

@@ -355,15 +355,18 @@ export function TransactionWidgetContentWrapper(props: TransactionWidgetProps) {
     client: props.client,
   });
 
+  // if branding is disabled for widget, disable it for connect options too
   const connectOptions = useMemo(() => {
-    if (!props.connectOptions) return undefined;
-    return {
-      ...props.connectOptions,
-      connectModal: {
-        ...props.connectOptions.connectModal,
-        showThirdwebBranding: props.showThirdwebBranding,
-      },
-    };
+    if (props.showThirdwebBranding === false) {
+      return {
+        ...props.connectOptions,
+        connectModal: {
+          ...props.connectOptions?.connectModal,
+          showThirdwebBranding: props.showThirdwebBranding,
+        },
+      };
+    }
+    return props.connectOptions;
   }, [props.connectOptions, props.showThirdwebBranding]);
 
   if (tokenQuery.isPending || !localQuery.data) {

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

@@ -76,7 +76,6 @@ type PaymentSelectionProps = {
 
   /**
    * Allowed payment methods
-   * @default ["crypto", "card"]
    */
   paymentMethods: ("crypto" | "card")[];