ui polish, reuse header accross all modes

Author: joaquim-verges

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

@@ -63,7 +63,8 @@ function BuyMerch() {
                   sellerAddress: "0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675",
                 },
                 metadata: {
-                  name: "Black Hoodie (Size L)",
+                  name: "Black Hoodie",
+                  description: "Size L. Ships worldwide.",
                   image: "/drip-hoodie.png",
                 },
               }}

apps/playground-web/src/components/pay/direct-payment.tsx

@@ -20,6 +20,7 @@ export function BuyMerchPreview() {
           },
           metadata: {
             name: "Black Hoodie (Size L)",
+            description: "Size L. Ships worldwide.",
             image: "/drip-hoodie.png",
           },
         }}

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

@@ -25,40 +25,42 @@ import type {
 } from "../../utils/defaultTokens.js";
 import type { SiweAuthOptions } from "../auth/useSiweAuth.js";
 
-export type PaymentInfo = {
-  /**
-   * The chain to receive the payment on.
-   */
-  chain: Chain;
-  /**
-   * The address of the seller wallet to receive the payment on.
-   */
-  sellerAddress: string;
-  /**
-   * Optional ERC20 token to receive the payment on.
-   * If not provided, the native token will be used.
-   */
-  token?: TokenInfo;
-  /**
-   * For direct transfers, specify who will pay the transfer fee. Can be "sender" or "receiver".
-   */
-  feePayer?: "sender" | "receiver";
-} & (
-  | {
-      /**
-       * The amount of tokens to receive in ETH or tokens.
-       * ex: 0.1 ETH or 100 USDC
-       */
-      amount: string;
-    }
-  | {
-      /**
-       * The amount of tokens to receive in wei.
-       * ex: 1000000000000000000 wei
-       */
-      amountWei: bigint;
-    }
-);
+export type PaymentInfo = Prettify<
+  {
+    /**
+     * The chain to receive the payment on.
+     */
+    chain: Chain;
+    /**
+     * The address of the seller wallet to receive the payment on.
+     */
+    sellerAddress: string;
+    /**
+     * Optional ERC20 token to receive the payment on.
+     * If not provided, the native token will be used.
+     */
+    token?: Partial<TokenInfo> & { address: string };
+    /**
+     * For direct transfers, specify who will pay the transfer fee. Can be "sender" or "receiver".
+     */
+    feePayer?: "sender" | "receiver";
+  } & (
+    | {
+        /**
+         * The amount of tokens to receive in ETH or tokens.
+         * ex: 0.1 ETH or 100 USDC
+         */
+        amount: string;
+      }
+    | {
+        /**
+         * The amount of tokens to receive in wei.
+         * ex: 1000000000000000000 wei
+         */
+        amountWei: bigint;
+      }
+  )
+>;
 
 export type PayUIOptions = Prettify<
   {
@@ -133,6 +135,7 @@ export type PayUIOptions = Prettify<
      */
     metadata?: {
       name?: string;
+      description?: string;
       image?: string;
     };
 

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

@@ -5,6 +5,7 @@ import type { ThirdwebClient } from "../../../../client/client.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
 import type { Address } from "../../../../utils/address.js";
 import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
+import type { Prettify } from "../../../../utils/type-utils.js";
 import type { BridgePrepareResult } from "../../../core/hooks/useBridgePrepare.js";
 import type { CompletedStatusResult } from "../../../core/hooks/useStepExecutor.js";
 import {
@@ -26,28 +27,32 @@ import { PaymentDetails } from "./payment-details/PaymentDetails.js";
 import { PaymentSelection } from "./payment-selection/PaymentSelection.js";
 import { SuccessScreen } from "./payment-success/SuccessScreen.js";
 
-export type UIOptions =
-  | {
-      mode: "fund_wallet";
-      destinationToken: Token;
-      initialAmount?: string;
-      quickOptions?: [number, number, number];
-    }
-  | {
-      mode: "direct_payment";
-      paymentInfo: {
-        sellerAddress: Address;
-        token: Token;
-        amount: string;
-        feePayer?: "sender" | "receiver";
-        metadata: {
-          name: string;
-          image?: string;
-          description?: string;
+export type UIOptions = Prettify<
+  {
+    metadata?: {
+      title?: string;
+      description?: string;
+      image?: string;
+    };
+  } & (
+    | {
+        mode: "fund_wallet";
+        destinationToken: Token;
+        initialAmount?: string;
+        quickOptions?: [number, number, number];
+      }
+    | {
+        mode: "direct_payment";
+        paymentInfo: {
+          sellerAddress: Address;
+          token: Token;
+          amount: string;
+          feePayer?: "sender" | "receiver";
         };
-      };
-    }
-  | { mode: "transaction"; transaction: PreparedTransaction };
+      }
+    | { mode: "transaction"; transaction: PreparedTransaction }
+  )
+>;
 
 export interface BridgeOrchestratorProps {
   /**
@@ -207,19 +212,18 @@ export function BridgeOrchestrator({
       {/* Render current screen based on state */}
       {state.value === "init" && uiOptions.mode === "fund_wallet" && (
         <FundWallet
-          token={uiOptions.destinationToken}
+          uiOptions={uiOptions}
           receiverAddress={receiverAddress}
-          initialAmount={uiOptions.initialAmount}
           client={client}
           onContinue={handleRequirementsResolved}
           connectOptions={connectOptions}
-          quickOptions={quickOptions ?? [5, 10, 20]}
+          quickOptions={quickOptions}
         />
       )}
 
       {state.value === "init" && uiOptions.mode === "direct_payment" && (
         <DirectPayment
-          paymentInfo={uiOptions.paymentInfo}
+          uiOptions={uiOptions}
           client={client}
           onContinue={handleRequirementsResolved}
           connectOptions={connectOptions}
@@ -228,7 +232,7 @@ export function BridgeOrchestrator({
 
       {state.value === "init" && uiOptions.mode === "transaction" && (
         <TransactionPayment
-          transaction={uiOptions.transaction}
+          uiOptions={uiOptions}
           client={client}
           onContinue={handleRequirementsResolved}
           connectOptions={connectOptions}