Merge branch 'main' into cursor/replace-payembed-with-buywidget-code-4a6a

Author: gregfromstl

.changeset/hip-mammals-sip.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Adds the ability to hide thirdweb branding in the payment widgets with showThirdwebBranding

apps/playground-web/src/app/connect/pay/components/types.ts

@@ -25,5 +25,7 @@ export type BridgeComponentsPlaygroundOptions = {
     transactionData?: string; // Simplified for demo; could be more complex in real implementation
 
     paymentMethods: ("crypto" | "card")[];
+
+    showThirdwebBranding: boolean;
   };
 };

apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx

@@ -464,6 +464,23 @@ export function LeftSection(props: {
           }}
           theme={options.theme}
         />
+
+        <div className="my-4 flex items-center gap-2">
+          <Checkbox
+            checked={payOptions.showThirdwebBranding}
+            id={"branding"}
+            onCheckedChange={(checked) => {
+              setOptions((v) => ({
+                ...v,
+                payOptions: {
+                  ...v.payOptions,
+                  showThirdwebBranding: checked === true,
+                },
+              }));
+            }}
+          />
+          <Label htmlFor={"branding"}>Show Branding</Label>
+        </div>
       </CollapsibleSection>
 
       <CollapsibleSection icon={FuelIcon} title="Sponsor gas fees">

apps/playground-web/src/app/connect/pay/embed/RightSection.tsx

@@ -64,6 +64,7 @@ export function RightSection(props: {
         theme={themeObj}
         title={props.options.payOptions.title}
         tokenAddress={props.options.payOptions.buyTokenAddress}
+        showThirdwebBranding={props.options.payOptions.showThirdwebBranding}
       />
     );
   }
@@ -87,6 +88,7 @@ export function RightSection(props: {
         seller={props.options.payOptions.sellerAddress}
         theme={themeObj}
         tokenAddress={props.options.payOptions.buyTokenAddress}
+        showThirdwebBranding={props.options.payOptions.showThirdwebBranding}
       />
     );
   }
@@ -106,6 +108,7 @@ export function RightSection(props: {
           to: account?.address || "",
           tokenId: 2n,
         })}
+        showThirdwebBranding={props.options.payOptions.showThirdwebBranding}
       />
     );
   }

apps/playground-web/src/app/connect/pay/embed/page.tsx

@@ -18,6 +18,7 @@ const defaultConnectOptions: BridgeComponentsPlaygroundOptions = {
     title: "",
     transactionData: "",
     widget: "buy",
+    showThirdwebBranding: true,
   },
   theme: {
     darkColorOverrides: {},

apps/portal/src/app/Header.tsx

@@ -51,10 +51,6 @@ const links = [
     href: "/insight",
     name: "Insight",
   },
-  {
-    href: "/nebula",
-    name: "Nebula",
-  },
   {
     href: "/vault",
     name: "Vault",
@@ -127,10 +123,6 @@ export const connectLinks: Array<{
 ] as const;
 
 const apisLinks = [
-  {
-    href: "/nebula/api-reference",
-    name: "Nebula",
-  },
   {
     href: "https://insight.thirdweb.com/reference",
     name: "Insight",

apps/portal/src/app/page.tsx

@@ -14,7 +14,6 @@ import { BridgeIcon } from "../icons/products/BridgeIcon";
 import { ConnectIcon } from "../icons/products/ConnectIcon";
 import { EngineIcon } from "../icons/products/EngineIcon";
 import { InsightIcon } from "../icons/products/InsightIcon";
-import { NebulaIcon } from "../icons/products/NebulaIcon";
 import { PlaygroundIcon } from "../icons/products/PlaygroundIcon";
 import { cn } from "../lib/utils";
 import DocsHeroDark from "./_images/docs-hero-dark.png";
@@ -148,12 +147,6 @@ function ReferenceSection() {
           iconClassName="text-muted-foreground"
           title="Bundler"
         />
-        <SDKCard
-          href="/nebula/api-reference"
-          icon={NebulaIcon} // TODO: actual openAPI docs
-          iconClassName="text-muted-foreground"
-          title="Nebula"
-        />
       </Grid>
     </section>
   );
@@ -194,16 +187,10 @@ function LearningResourcesSection() {
           icon={InsightIcon}
           title="Insight"
         />
-        <ArticleCardIndex
-          description="API interface for LLMs"
-          href="/nebula"
-          icon={NebulaIcon}
-          title="Nebula"
-        />
         <ArticleCardIndex
           description="Non-custodial key management service"
           href="/vault"
-          icon={NebulaIcon}
+          icon={ConnectIcon}
           title="Vault"
         />
       </Grid>

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

@@ -120,6 +120,12 @@ export interface BridgeOrchestratorProps {
    * @default ["crypto", "card"]
    */
   paymentMethods?: ("crypto" | "card")[];
+
+  /**
+   * Whether to show thirdweb branding in the widget.
+   * @default true
+   */
+  showThirdwebBranding?: boolean;
 }
 
 export function BridgeOrchestrator({
@@ -135,6 +141,7 @@ export function BridgeOrchestrator({
   paymentLinkId,
   presetOptions,
   paymentMethods = ["crypto", "card"],
+  showThirdwebBranding = true,
 }: BridgeOrchestratorProps) {
   // Initialize adapters
   const adapters = useMemo(
@@ -145,6 +152,18 @@ export function BridgeOrchestrator({
     [],
   );
 
+  // Create modified connect options with branding setting
+  const modifiedConnectOptions = useMemo(() => {
+    if (!connectOptions) return undefined;
+    return {
+      ...connectOptions,
+      connectModal: {
+        ...connectOptions.connectModal,
+        showThirdwebBranding,
+      },
+    };
+  }, [connectOptions, showThirdwebBranding]);
+
   // Use the payment machine hook
   const [state, send] = usePaymentMachine(adapters, uiOptions.mode);
 
@@ -239,28 +258,31 @@ export function BridgeOrchestrator({
       {state.value === "init" && uiOptions.mode === "fund_wallet" && (
         <FundWallet
           client={client}
-          connectOptions={connectOptions}
+          connectOptions={modifiedConnectOptions}
           onContinue={handleRequirementsResolved}
           presetOptions={presetOptions}
           receiverAddress={receiverAddress}
+          showThirdwebBranding={showThirdwebBranding}
           uiOptions={uiOptions}
         />
       )}
 
       {state.value === "init" && uiOptions.mode === "direct_payment" && (
         <DirectPayment
           client={client}
-          connectOptions={connectOptions}
+          connectOptions={modifiedConnectOptions}
           onContinue={handleRequirementsResolved}
+          showThirdwebBranding={showThirdwebBranding}
           uiOptions={uiOptions}
         />
       )}
 
       {state.value === "init" && uiOptions.mode === "transaction" && (
         <TransactionPayment
           client={client}
-          connectOptions={connectOptions}
+          connectOptions={modifiedConnectOptions}
           onContinue={handleRequirementsResolved}
+          showThirdwebBranding={showThirdwebBranding}
           uiOptions={uiOptions}
         />
       )}
@@ -272,7 +294,7 @@ export function BridgeOrchestrator({
           <PaymentSelection
             client={client}
             connectLocale={connectLocale || en}
-            connectOptions={connectOptions}
+            connectOptions={modifiedConnectOptions}
             destinationAmount={state.context.destinationAmount}
             destinationToken={state.context.destinationToken}
             feePayer={

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

@@ -102,6 +102,12 @@ export type BuyWidgetProps = {
 
   className?: string;
 
+  /**
+   * Whether to show thirdweb branding in the widget.
+   * @default true
+   */
+  showThirdwebBranding?: boolean;
+
   /**
    * The chain the accepted token is on.
    */
@@ -391,6 +397,7 @@ export function BuyWidget(props: BuyWidgetProps) {
         purchaseData={props.purchaseData}
         receiverAddress={undefined}
         uiOptions={bridgeDataQuery.data.data}
+        showThirdwebBranding={props.showThirdwebBranding}
       />
     );
   }

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

@@ -98,6 +98,12 @@ export type CheckoutWidgetProps = {
 
   className?: string;
 
+  /**
+   * Whether to show thirdweb branding in the widget.
+   * @default true
+   */
+  showThirdwebBranding?: boolean;
+
   /**
    * The chain the accepted token is on.
    */
@@ -353,6 +359,7 @@ export function CheckoutWidget(props: CheckoutWidgetProps) {
         presetOptions={props.presetOptions}
         purchaseData={props.purchaseData}
         receiverAddress={props.seller}
+        showThirdwebBranding={props.showThirdwebBranding}
         uiOptions={bridgeDataQuery.data.data}
       />
     );