update useSendTransaction to use new widget

joaquim-verges · joaquim-verges · commit e600e265167f · 2025-06-06T20:16:28.000+12:00
diff --git a/apps/playground-web/src/app/connect/pay/components/types.ts b/apps/playground-web/src/app/connect/pay/components/types.ts
@@ -12,6 +12,7 @@ export type PayEmbedPlaygroundOptions = {
     mode?: "fund_wallet" | "direct_payment" | "transaction";
     title: string | undefined;
     image: string | undefined;
+    description: string | undefined;
 
     // fund_wallet mode options
     buyTokenAddress: string | undefined;
diff --git a/apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx b/apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx
@@ -496,6 +496,26 @@ export function LeftSection(props: {
               />
             </div>
           </div>
+
+          {/* Modal description */}
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="modal-description">Image</Label>
+            <Input
+              id="modal-description"
+              placeholder="Your own description here"
+              className="bg-card"
+              value={options.payOptions.description}
+              onChange={(e) =>
+                setOptions((v) => ({
+                  ...v,
+                  payOptions: {
+                    ...payOptions,
+                    description: e.target.value,
+                  },
+                }))
+              }
+            />
+          </div>
         </div>
       </CollapsibleSection>
 
diff --git a/apps/playground-web/src/app/connect/pay/embed/RightSection.tsx b/apps/playground-web/src/app/connect/pay/embed/RightSection.tsx
@@ -70,15 +70,19 @@ export function RightSection(props: {
             (props.options.payOptions.mode === "transaction"
               ? "Transaction"
               : props.options.payOptions.mode === "direct_payment"
-                ? "Purchase"
+                ? "Product Name"
                 : "Buy Crypto"),
+          description:
+            props.options.payOptions.description || "Your own description here",
           image:
             props.options.payOptions.image ||
-            `https://placehold.co/600x400/${
-              props.options.theme.type === "dark"
-                ? "1d1d23/7c7a85"
-                : "f2eff3/6f6d78"
-            }?text=Your%20Product%20Here&font=roboto`,
+            props.options.payOptions.mode === "direct_payment"
+              ? `https://placehold.co/600x400/${
+                  props.options.theme.type === "dark"
+                    ? "1d1d23/7c7a85"
+                    : "f2eff3/6f6d78"
+                }?text=Your%20Product%20Here&font=roboto`
+              : undefined,
         },
 
         // Mode-specific options
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx b/packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx
@@ -81,7 +81,11 @@ export function DirectPayment({
   );
 
   return (
-    <WithHeader uiOptions={uiOptions} defaultTitle="Direct Payment">
+    <WithHeader
+      uiOptions={uiOptions}
+      defaultTitle="Direct Payment"
+      client={client}
+    >
       {/* Price section */}
       <Container
         flex="row"
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx b/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx
@@ -121,6 +121,7 @@ export function FundWallet({
     <WithHeader
       uiOptions={uiOptions}
       defaultTitle={`Buy ${uiOptions.destinationToken.symbol}`}
+      client={client}
     >
       <Container flex="column">
         {/* Token Info */}
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx b/packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx
@@ -230,7 +230,7 @@ export function StepRunner({
     }
 
     // Fallback to step number
-    return `Step ${index + 1}: Process transaction`;
+    return "Process transaction";
   };
 
   const getOnrampDescription = (
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx b/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx
@@ -132,7 +132,11 @@ export function TransactionPayment({
 
   if (isLoading) {
     return (
-      <WithHeader uiOptions={uiOptions} defaultTitle="Transaction">
+      <WithHeader
+        uiOptions={uiOptions}
+        defaultTitle="Transaction"
+        client={client}
+      >
         {/* Loading Header */}
         <SkeletonHeader />
 
@@ -178,7 +182,11 @@ export function TransactionPayment({
   }
 
   return (
-    <WithHeader uiOptions={uiOptions} defaultTitle="Transaction">
+    <WithHeader
+      uiOptions={uiOptions}
+      defaultTitle="Transaction"
+      client={client}
+    >
       {/* Cost and Function Name section */}
       <Container
         flex="row"
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx b/packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx
@@ -1,3 +1,5 @@
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import { resolveScheme } from "../../../../../utils/ipfs.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import { radius } from "../../../../core/design-system/index.js";
 import { Spacer } from "../../components/Spacer.js";
@@ -9,7 +11,13 @@ export function WithHeader({
   children,
   uiOptions,
   defaultTitle,
-}: { children: React.ReactNode; uiOptions: UIOptions; defaultTitle: string }) {
+  client,
+}: {
+  children: React.ReactNode;
+  uiOptions: UIOptions;
+  defaultTitle: string;
+  client: ThirdwebClient;
+}) {
   const theme = useCustomTheme();
   return (
     <Container flex="column">
@@ -21,8 +29,11 @@ export function WithHeader({
             borderRadius: `${radius.md} ${radius.md} 0 0`,
             overflow: "hidden",
             aspectRatio: "16/9",
-            backgroundColor: theme.colors.secondaryIconColor,
-            backgroundImage: `url(${uiOptions.metadata.image})`,
+            backgroundColor: theme.colors.tertiaryBg,
+            backgroundImage: `url(${resolveScheme({
+              client,
+              uri: uiOptions.metadata.image,
+            })})`,
             backgroundSize: "cover",
             backgroundPosition: "center",
           }}
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx
@@ -268,7 +268,7 @@ const TransactionOverViewCompact = (props: {
     >
       <Container flex="column" gap="3xs" center="y" style={{ flex: 1 }}>
         <Text size="sm" color="primaryText" style={{ fontWeight: 600 }}>
-          {props.uiOptions.metadata?.title || "Onchain Transaction"}
+          {props.uiOptions.metadata?.title || "Transaction"}
         </Text>
         {props.uiOptions.metadata?.description && (
           <Text size="xs" color="secondaryText">
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx
@@ -96,7 +96,7 @@ function useTransactionInfo(
             return {
               type: "transactionHash" as const,
               id: tx.transactionHash,
-              label: "Onchain Transaction",
+              label: "Transaction",
               chain: destinationChain,
               originToken: status.originToken,
               originChain,
diff --git a/packages/thirdweb/src/react/web/ui/TransactionButton/DepositScreen.tsx b/packages/thirdweb/src/react/web/ui/TransactionButton/DepositScreen.tsx
@@ -168,10 +168,9 @@ export function DepositScreen(props: {
           style={{
             justifyContent: "space-between",
             padding: spacing.sm,
-            marginBottom: spacing.sm,
-            borderRadius: spacing.md,
-            backgroundColor: theme.colors.tertiaryBg,
+            borderRadius: `${radius.md} ${radius.md} 0 0`,
             border: `1px solid ${theme.colors.borderColor}`,
+            borderBottom: "none",
           }}
         >
           {activeAccount && (
@@ -223,7 +222,13 @@ export function DepositScreen(props: {
             />
           </Container>
           <Container flex="row" center="x" gap="xs">
-            <Text color="primaryText" size="md">
+            <Text
+              color="primaryText"
+              size="md"
+              style={{
+                fontFamily: "monospace",
+              }}
+            >
               {address ? shortenAddress(address) : ""}
             </Text>
             <CopyIcon
@@ -286,7 +291,7 @@ const WalletAddressContainer = /* @__PURE__ */ StyledButton((_) => {
     display: "flex",
     justifyContent: "space-between",
     border: `1px solid ${theme.colors.borderColor}`,
-    borderRadius: radius.lg,
+    borderRadius: `0 0 ${radius.md} ${radius.md}`,
     transition: "border-color 200ms ease",
     "&:hover": {
       borderColor: theme.colors.accentText,
diff --git a/packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx b/packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx
@@ -12,8 +12,8 @@ import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.j
 import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
 import type { SupportedTokens } from "../../../core/utils/defaultTokens.js";
 import { LoadingScreen } from "../../wallets/shared/LoadingScreen.js";
+import { BridgeOrchestrator } from "../Bridge/BridgeOrchestrator.js";
 import { useConnectLocale } from "../ConnectWallet/locale/getConnectLocale.js";
-import { LazyBuyScreen } from "../ConnectWallet/screens/Buy/LazyBuyScreen.js";
 import { Modal } from "../components/Modal.js";
 import type { LocaleId } from "../types.js";
 import { DepositScreen } from "./DepositScreen.js";
@@ -113,19 +113,16 @@ function TransactionModalContent(props: ModalProps & { onBack?: () => void }) {
   }
 
   return (
-    <LazyBuyScreen
-      title={props.title}
-      isEmbed={false}
+    <BridgeOrchestrator
       client={props.client}
-      onBack={props.onBack}
-      supportedTokens={props.supportedTokens}
+      uiOptions={{
+        mode: "transaction",
+        transaction: props.tx,
+      }}
       connectLocale={localeQuery.data}
-      theme={typeof props.theme === "string" ? props.theme : props.theme.type}
-      payOptions={props.payOptions}
-      onDone={() => {
+      onComplete={() => {
         setScreen("execute-tx");
       }}
-      connectOptions={undefined}
     />
   );
 }

Original file line number	Diff line number	Diff line change
`@@ -121,6 +121,7 @@ export function FundWallet({`
`121`	`121`	`<WithHeader`
`122`	`122`	`uiOptions={uiOptions}`
`123`	`123`	defaultTitle={`Buy ${uiOptions.destinationToken.symbol}`}
	`124`	`+ client={client}`
`124`	`125`	`>`
`125`	`126`	`<Container flex="column">`
`126`	`127`	`{/* Token Info */}`
Original file line number	Diff line number	Diff line change
`@@ -230,7 +230,7 @@ export function StepRunner({`
`230`	`230`	`}`
`231`	`231`
`232`	`232`	`// Fallback to step number`
`233`		- return `Step ${index + 1}: Process transaction`;
	`233`	`+ return "Process transaction";`
`234`	`234`	`};`
`235`	`235`
`236`	`236`	`const getOnrampDescription = (`
Original file line number	Diff line number	Diff line change
`@@ -268,7 +268,7 @@ const TransactionOverViewCompact = (props: {`
`268`	`268`	`>`
`269`	`269`	`<Container flex="column" gap="3xs" center="y" style={{ flex: 1 }}>`
`270`	`270`	`<Text size="sm" color="primaryText" style={{ fontWeight: 600 }}>`
`271`		`- {props.uiOptions.metadata?.title \|\| "Onchain Transaction"}`
	`271`	`+ {props.uiOptions.metadata?.title \|\| "Transaction"}`
`272`	`272`	`</Text>`
`273`	`273`	`{props.uiOptions.metadata?.description && (`
`274`	`274`	`<Text size="xs" color="secondaryText">`