[SDK] Add thirdweb branding to PayEmbed (#6760)

Author: joaquim-verges

.changeset/free-pandas-reply.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Add thirdweb branding to PayEmbed

packages/thirdweb/src/exports/react.ts

@@ -136,7 +136,7 @@ export type {
   PaymentInfo,
   DirectPaymentOptions,
   FundWalletOptions,
-  TranasctionOptions,
+  TransactionOptions,
 } from "../react/core/hooks/connection/ConnectButtonProps.js";
 
 export {

packages/thirdweb/src/insight/get-nfts.ts

@@ -292,7 +292,7 @@ async function transformNFTModel(
             client: client,
           }),
           id: BigInt(token_id),
-        });
+        }).catch(() => 0n);
 
         parsedNft = parseNFT(metadata, {
           tokenId: BigInt(token_id),

packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts

@@ -134,7 +134,14 @@ export type PayUIOptions = Prettify<
       name?: string;
       image?: string;
     };
-  } & (FundWalletOptions | DirectPaymentOptions | TranasctionOptions)
+
+    /**
+     * Show the "Powered by Thirdweb" branding at the bottom of the PayEmbed UI.
+     *
+     * By default it is `true`.
+     */
+    showThirdwebBranding?: boolean;
+  } & (FundWalletOptions | DirectPaymentOptions | TransactionOptions)
 >;
 
 export type FundWalletOptions = {
@@ -168,7 +175,7 @@ export type DirectPaymentOptions = {
   paymentInfo: PaymentInfo;
 };
 
-export type TranasctionOptions = {
+export type TransactionOptions = {
   mode: "transaction";
   /**
    * The transaction to be executed.

packages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.ts

@@ -83,6 +83,7 @@ export type SendTransactionPayModalConfig =
               transactionHash: Hex;
             },
       ) => void;
+      showThirdwebBranding?: boolean;
     }
   | false;
 

packages/thirdweb/src/react/web/hooks/transaction/useSendTransaction.tsx

@@ -127,6 +127,7 @@ export function useSendTransaction(config: SendTransactionConfig = {}) {
           transaction: data.tx,
           metadata: payModal?.metadata,
           onPurchaseSuccess: payModal?.onPurchaseSuccess,
+          showThirdwebBranding: payModal?.showThirdwebBranding,
         }}
       />,
     );

packages/thirdweb/src/react/web/ui/ConnectWallet/PoweredByTW.tsx

@@ -6,13 +6,18 @@ import { ThirdwebTextIcon } from "./icons/ThirdwebTextIcon.js";
 /**
  * @internal
  */
-export function PoweredByThirdweb() {
+export function PoweredByThirdweb(props: {
+  link?: string;
+}) {
+  const link =
+    props.link ||
+    "https://playground.thirdweb.com/connect/sign-in/button?utm_source=cw_text";
   return (
     <Link
       color="secondaryText"
       hoverColor="primaryText"
       target="_blank"
-      href="https://thirdweb.com/connect?utm_source=cw_text"
+      href={link}
     >
       <Container
         flex="row"
@@ -23,15 +28,15 @@ export function PoweredByThirdweb() {
         }}
       >
         <Text
-          size="sm"
+          size="xs"
           weight={600}
           style={{
             color: "currentColor",
           }}
         >
           Powered by
         </Text>
-        <ThirdwebTextIcon height={13} />
+        <ThirdwebTextIcon height={11} />
       </Container>
     </Link>
   );

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -32,6 +32,7 @@ import { Input } from "../../../components/formElements.js";
 import { TokenSymbol } from "../../../components/token/TokenSymbol.js";
 import { ConnectButton } from "../../ConnectButton.js";
 import { ChainButton, NetworkSelectorContent } from "../../NetworkSelector.js";
+import { PoweredByThirdweb } from "../../PoweredByTW.js";
 import type { ConnectLocale } from "../../locale/types.js";
 import { TokenSelector } from "../TokenSelector.js";
 import { WalletSwitcherConnectionScreen } from "../WalletSwitcherConnectionScreen.js";
@@ -833,7 +834,8 @@ function MainScreen(props: {
     }
     default: {
       return (
-        <Container p="lg">
+        <Container px="lg">
+          <Spacer y="lg" />
           <ModalHeader title={props.title} onBack={props.onBack} />
 
           <Spacer y="xl" />
@@ -899,6 +901,13 @@ function MainScreen(props: {
               </Button>
             )}
           </Container>
+          <Spacer y="lg" />
+          {payOptions.showThirdwebBranding !== false && (
+            <>
+              <PoweredByThirdweb link="https://playground.thirdweb.com/connect/pay?utm_source=ub_text" />
+              <Spacer y="sm" />
+            </>
+          )}
         </Container>
       );
     }

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/DirectPaymentModeScreen.tsx

@@ -27,6 +27,7 @@ import { Container, Line, ModalHeader } from "../../../components/basic.js";
 import { Button } from "../../../components/buttons.js";
 import { Text } from "../../../components/text.js";
 import { ConnectButton } from "../../ConnectButton.js";
+import { PoweredByThirdweb } from "../../PoweredByTW.js";
 import { type ERC20OrNativeToken, isNativeToken } from "../nativeToken.js";
 import type { SupportedChainAndTokens } from "./swap/useSwapSupportedChains.js";
 
@@ -108,7 +109,8 @@ export function DirectPaymentModeScreen(props: {
       };
 
   return (
-    <Container p="lg">
+    <Container px="lg">
+      <Spacer y="lg" />
       <ModalHeader title={metadata?.name || "Payment Details"} />
 
       <Spacer y="lg" />
@@ -268,6 +270,13 @@ export function DirectPaymentModeScreen(props: {
           />
         </div>
       )}
+      <Spacer y="lg" />
+      {payUiOptions.showThirdwebBranding !== false && (
+        <>
+          <PoweredByThirdweb link="https://playground.thirdweb.com/connect/pay?utm_source=ub_text" />
+          <Spacer y="sm" />
+        </>
+      )}
     </Container>
   );
 }

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx

@@ -30,6 +30,7 @@ import { Button } from "../../../components/buttons.js";
 import { Text } from "../../../components/text.js";
 import { TokenSymbol } from "../../../components/token/TokenSymbol.js";
 import { ConnectButton } from "../../ConnectButton.js";
+import { PoweredByThirdweb } from "../../PoweredByTW.js";
 import { OutlineWalletIcon } from "../../icons/OutlineWalletIcon.js";
 import { formatTokenBalance } from "../formatTokenBalance.js";
 import {
@@ -167,7 +168,8 @@ export function TransactionModeScreen(props: {
     balanceQuery.data.value < transactionCostAndData.transactionValueWei;
 
   return (
-    <Container p="lg">
+    <Container px="lg">
+      <Spacer y="lg" />
       <ModalHeader title={metadata?.name || "Transaction"} />
 
       <Spacer y="lg" />
@@ -378,6 +380,13 @@ export function TransactionModeScreen(props: {
           />
         </div>
       )}
+      <Spacer y="lg" />
+      {payUiOptions.showThirdwebBranding !== false && (
+        <>
+          <PoweredByThirdweb link="https://playground.thirdweb.com/connect/pay?utm_source=ub_text" />
+          <Spacer y="sm" />
+        </>
+      )}
     </Container>
   );
 }