thirdweb 5.105.49-nightly-04862de9e4e11724720fa40a0ed4713ff2bfdad5-20250917000323 → 5.106.0

package/src/react/web/ui/Bridge/BuyWidget.tsx

@@ -128,7 +128,7 @@ export type BuyWidgetProps = {
   amount: string;
 
   /**
-   * The title to display in the widget.
+   * The title to display in the widget. If `title` is explicity set to an empty string, the title will not be displayed.
    */
   title?: string;
 

package/src/react/web/ui/Bridge/DirectPayment.tsx

@@ -100,7 +100,7 @@ export function DirectPayment({
           size="xl"
           token={uiOptions.paymentInfo.token}
           tokenAmount={uiOptions.paymentInfo.amount}
-          weight={700}
+          weight={600}
         />
         <Container flex="row" gap="3xs">
           <Text
@@ -190,7 +190,7 @@ export function DirectPayment({
             <PoweredByThirdweb />
           </div>
         ) : null}
-        <Spacer y="lg" />
+        <Spacer y="md" />
       </Container>
     </WithHeader>
   );

package/src/react/web/ui/Bridge/ErrorBanner.tsx

@@ -51,7 +51,7 @@ export function ErrorBanner({
   });
 
   return (
-    <Container flex="column" fullHeight gap="md" p="lg">
+    <Container flex="column" fullHeight gap="md" p="md">
       {/* Error Icon and Message */}
       <Container flex="row" gap="md" style={{ alignItems: "flex-start" }}>
         <Container

package/src/react/web/ui/Bridge/FundWallet.tsx

@@ -150,7 +150,7 @@ export function FundWallet({
           style={{
             backgroundColor: theme.colors.tertiaryBg,
             border: `1px solid ${theme.colors.borderColor}`,
-            borderRadius: radius.md,
+            borderRadius: radius.lg,
             flexWrap: "nowrap",
           }}
         >
@@ -251,11 +251,11 @@ export function FundWallet({
         {/* Quick Amount Buttons */}
         {presetOptions && (
           <>
-            <Spacer y="md" />
+            <Spacer y="sm" />
             <Container
               center="x"
               flex="row"
-              gap="xs"
+              gap="sm"
               style={{
                 justifyContent: "space-evenly",
               }}
@@ -268,6 +268,7 @@ export function FundWallet({
                     backgroundColor: theme.colors.tertiaryBg,
                     flex: 1,
                     fontSize: fontSize.sm,
+                    borderRadius: radius.lg,
                     padding: `${spacing.sm} ${spacing.md}`,
                   }}
                   variant="outline"
@@ -279,7 +280,7 @@ export function FundWallet({
           </>
         )}
 
-        <Spacer y="md" />
+        <Spacer y="sm" />
 
         <Container
           center="y"
@@ -291,7 +292,7 @@ export function FundWallet({
           style={{
             backgroundColor: theme.colors.tertiaryBg,
             border: `1px solid ${theme.colors.borderColor}`,
-            borderRadius: radius.md,
+            borderRadius: radius.lg,
           }}
         >
           {receiver ? (
@@ -336,7 +337,7 @@ export function FundWallet({
           }}
           style={{
             fontSize: fontSize.md,
-            padding: `${spacing.sm} ${spacing.md}`,
+            borderRadius: radius.lg,
           }}
           variant="primary"
         >
@@ -359,10 +360,10 @@ export function FundWallet({
       {showThirdwebBranding ? (
         <div>
           <Spacer y="md" />
-          <PoweredByThirdweb />
+          <PoweredByThirdweb link="https://playground.thirdweb.com/payments/fund-wallet" />
         </div>
       ) : null}
-      <Spacer y="lg" />
+      <Spacer y="md" />
     </WithHeader>
   );
 }

package/src/react/web/ui/Bridge/QuoteLoader.tsx

@@ -163,7 +163,7 @@ export function QuoteLoader({
       <Spinner color="secondaryText" size="xl" />
       <Spacer y="md" />
       <Text center color="primaryText" size="lg" style={{ fontWeight: 600 }}>
-        Finding the best route...
+        Finding the best route
       </Text>
       <Spacer y="sm" />
       <Text center color="secondaryText" size="sm">
@@ -229,7 +229,10 @@ function getBridgeParams(args: {
       }
 
       return {
-        amount: toUnits(amount, destinationToken.decimals),
+        amount:
+          paymentMethod.action === "buy"
+            ? toUnits(amount, destinationToken.decimals)
+            : toUnits(amount, paymentMethod.originToken.decimals),
         client,
         destinationChainId: destinationToken.chainId,
         destinationTokenAddress: destinationToken.address,
@@ -241,7 +244,7 @@ function getBridgeParams(args: {
         receiver,
         sender:
           sender || paymentMethod.payerWallet.getAccount()?.address || receiver,
-        type: "buy",
+        type: paymentMethod.action,
       };
   }
 }

package/src/react/web/ui/Bridge/StepRunner.tsx

@@ -25,6 +25,7 @@ import { Spinner } from "../components/Spinner.js";
 import { Text } from "../components/text.js";
 
 interface StepRunnerProps {
+  title?: string;
   request: BridgePrepareRequest;
 
   /**
@@ -64,6 +65,7 @@ interface StepRunnerProps {
 }
 
 export function StepRunner({
+  title,
   request,
   wallet,
   client,
@@ -247,8 +249,8 @@ export function StepRunner({
   };
 
   return (
-    <Container flex="column" fullHeight p="lg">
-      <ModalHeader onBack={onBack} title="Processing Payment" />
+    <Container flex="column" fullHeight px="md" pb="md" pt="md+">
+      <ModalHeader onBack={onBack} title={title || "Processing Payment"} />
 
       <Spacer y="xl" />
 
@@ -374,7 +376,7 @@ export function StepRunner({
         </Container>
 
         <Spacer y="md" />
-        <Text center color="secondaryText" size="xs">
+        <Text center color="secondaryText" size="xs" multiline>
           Keep this window open until all
           <br /> transactions are complete.
         </Text>

package/src/react/web/ui/Bridge/TransactionPayment.tsx

@@ -194,7 +194,7 @@ export function TransactionPayment({
         }}
       >
         {/* USD Value */}
-        <Text color="primaryText" size="xl" weight={700}>
+        <Text color="primaryText" size="xl" weight={600}>
           {transactionDataQuery.data?.usdValueDisplay ||
             transactionDataQuery.data?.txCostDisplay}
         </Text>
@@ -431,7 +431,7 @@ export function TransactionPayment({
           <PoweredByThirdweb />
         </div>
       ) : null}
-      <Spacer y="lg" />
+      <Spacer y="md" />
     </WithHeader>
   );
 }

package/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx

@@ -64,7 +64,7 @@ export function UnsupportedTokenScreen(props: UnsupportedTokenScreenProps) {
           size="sm"
           style={{ lineHeight: 1.5, maxWidth: "280px" }}
         >
-          The Universal Bridge does not support testnets at this time.
+          Bridge does not support testnets at this time.
         </Text>
       </Container>
     );
@@ -94,7 +94,7 @@ export function UnsupportedTokenScreen(props: UnsupportedTokenScreenProps) {
         size="sm"
         style={{ lineHeight: 1.5, maxWidth: "280px" }}
       >
-        This token or chain is not supported by the Universal Bridge.
+        This token or chain is not supported by the Bridge
       </Text>
     </Container>
   );

package/src/react/web/ui/Bridge/common/TokenAndChain.tsx

@@ -60,7 +60,7 @@ export function TokenAndChain({
               height:
                 size === "lg" || size === "xl" ? iconSize.sm : iconSize.xs,
               position: "absolute",
-              right: "-6px",
+              right: "-2px",
               width: size === "lg" || size === "xl" ? iconSize.sm : iconSize.xs,
             }}
           >
@@ -73,7 +73,7 @@ export function TokenAndChain({
         )}
       </Container>
 
-      <Container flex="column" gap="3xs" style={{ minWidth: 0 }}>
+      <Container flex="column" gap="4xs" style={{ minWidth: 0 }}>
         <Text
           color="primaryText"
           size={size === "xl" ? "lg" : "sm"}
@@ -83,6 +83,7 @@ export function TokenAndChain({
             whiteSpace: "nowrap",
           }}
           weight={600}
+          trackingTight
         >
           {token.name}
         </Text>

package/src/react/web/ui/Bridge/common/WithHeader.tsx

@@ -19,6 +19,8 @@ export function WithHeader({
   client: ThirdwebClient;
 }) {
   const theme = useCustomTheme();
+  const showTitle = uiOptions.metadata?.title !== "";
+
   return (
     <Container flex="column">
       {/* image */}
@@ -36,25 +38,33 @@ export function WithHeader({
           }}
         />
       )}
-      <Container flex="column" px="lg">
-        <Spacer y="lg" />
 
-        {/* title */}
-        <Text color="primaryText" size="lg" weight={700}>
-          {uiOptions.metadata?.title || defaultTitle}
-        </Text>
+      <Container flex="column" px="md">
+        <Spacer y="md+" />
 
-        {/* Description */}
-        {uiOptions.metadata?.description && (
+        {(showTitle || uiOptions.metadata?.description) && (
           <>
-            <Spacer y="xs" />
-            <Text color="secondaryText" size="sm">
-              {uiOptions.metadata?.description}
-            </Text>
+            {/* title */}
+            {showTitle && (
+              <Text color="primaryText" size="lg" weight={600}>
+                {uiOptions.metadata?.title || defaultTitle}
+              </Text>
+            )}
+
+            {/* Description */}
+            {uiOptions.metadata?.description && (
+              <>
+                <Spacer y="xxs" />
+                <Text color="secondaryText" size="sm" multiline>
+                  {uiOptions.metadata?.description}
+                </Text>
+              </>
+            )}
+
+            <Spacer y="md" />
           </>
         )}
 
-        <Spacer y="lg" />
         {children}
       </Container>
     </Container>

package/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

@@ -21,6 +21,9 @@ import type { UIOptions } from "../BridgeOrchestrator.js";
 import { PaymentOverview } from "./PaymentOverview.js";
 
 export interface PaymentDetailsProps {
+  title?: string;
+  confirmButtonLabel?: string;
+
   /**
    * The UI mode to use
    */
@@ -55,6 +58,8 @@ export interface PaymentDetailsProps {
 }
 
 export function PaymentDetails({
+  title,
+  confirmButtonLabel,
   uiOptions,
   client,
   paymentMethod,
@@ -185,6 +190,43 @@ export function PaymentDetails({
               : undefined,
         };
       }
+
+      case "sell": {
+        const method =
+          paymentMethod.type === "wallet" ? paymentMethod : undefined;
+        if (!method) {
+          // can never happen
+          onError(new Error("Invalid payment method"));
+          return {
+            destinationAmount: "0",
+            destinationToken: undefined,
+            estimatedTime: 0,
+            originAmount: "0",
+            originToken: undefined,
+          };
+        }
+
+        return {
+          destinationAmount: formatTokenAmount(
+            preparedQuote.destinationAmount,
+            preparedQuote.steps[preparedQuote.steps.length - 1]
+              ?.destinationToken?.decimals ?? 18,
+          ),
+          destinationToken:
+            preparedQuote.steps[preparedQuote.steps.length - 1]
+              ?.destinationToken,
+          estimatedTime: preparedQuote.estimatedExecutionTimeMs,
+          originAmount: formatTokenAmount(
+            preparedQuote.originAmount,
+            method.originToken.decimals,
+          ),
+          originToken:
+            paymentMethod.type === "wallet"
+              ? paymentMethod.originToken
+              : undefined,
+        };
+      }
+
       case "onramp": {
         const method =
           paymentMethod.type === "fiat" ? paymentMethod : undefined;
@@ -215,7 +257,7 @@ export function PaymentDetails({
       }
       default: {
         throw new Error(
-          `Unsupported bridge prepare type: ${preparedQuote.type}`,
+          `Unsupported bridge prepare type: ${(preparedQuote as unknown as { type: string }).type}`,
         );
       }
     }
@@ -224,10 +266,10 @@ export function PaymentDetails({
   const displayData = getDisplayData();
 
   return (
-    <Container flex="column" fullHeight p="lg">
-      <ModalHeader onBack={onBack} title="Payment Details" />
+    <Container flex="column" fullHeight px="md" pb="md" pt="md+">
+      <ModalHeader onBack={onBack} title={title || "Payment Details"} />
 
-      <Spacer y="xl" />
+      <Spacer y="lg" />
 
       <Container flex="column">
         {/* Quote Summary */}
@@ -390,7 +432,7 @@ export function PaymentDetails({
         {/* Action Buttons */}
         <Container flex="column" gap="sm">
           <Button fullWidth onClick={handleConfirm} variant="accent">
-            Confirm Payment
+            {confirmButtonLabel || "Confirm Payment"}
           </Button>
         </Container>
       </Container>

package/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx

@@ -79,9 +79,15 @@ export function FiatProviderSelection({
     return quoteQueries.map((q) => q.data).filter((q) => !!q);
   }, [quoteQueries]);
 
+  const isPending = quoteQueries.some((q) => q.isLoading);
+
   if (quoteQueries.every((q) => q.isError)) {
     return (
-      <Container center="both" flex="column" style={{ minHeight: "120px" }}>
+      <Container
+        center="both"
+        flex="column"
+        style={{ minHeight: "200px", flexGrow: 1 }}
+      >
         <Text color="secondaryText" size="sm">
           No quotes available
         </Text>
@@ -92,11 +98,17 @@ export function FiatProviderSelection({
   // TODO: add a "remember my choice" checkbox
 
   return (
-    <Container flex="column" gap="sm">
-      {quotes.length > 0 ? (
+    <Container
+      flex="column"
+      gap="xs"
+      style={{
+        flexGrow: 1,
+      }}
+    >
+      {!isPending ? (
         quotes
           .sort((a, b) => a.currencyAmount - b.currencyAmount)
-          .map((quote, index) => {
+          .map((quote) => {
             const provider = PROVIDERS.find(
               (p) => p.id === quote.intent.onramp,
             );
@@ -105,98 +117,92 @@ export function FiatProviderSelection({
             }
 
             return (
-              <Container
-                animate="fadein"
+              <Button
                 key={provider.id}
+                fullWidth
+                onClick={() => onProviderSelected(provider.id)}
                 style={{
-                  animationDelay: `${index * 100}ms`,
+                  border: `1px solid ${theme.colors.borderColor}`,
+                  borderRadius: radius.md,
+                  textAlign: "left",
                 }}
+                variant="secondary"
               >
-                <Button
-                  fullWidth
-                  onClick={() => onProviderSelected(provider.id)}
-                  style={{
-                    backgroundColor: theme.colors.tertiaryBg,
-                    border: `1px solid ${theme.colors.borderColor}`,
-                    borderRadius: radius.md,
-                    padding: `${spacing.sm} ${spacing.md}`,
-                    textAlign: "left",
-                  }}
-                  variant="secondary"
+                <Container
+                  flex="row"
+                  gap="sm"
+                  style={{ alignItems: "center", width: "100%" }}
                 >
+                  <Img
+                    alt={provider.name}
+                    client={client}
+                    height={iconSize.lg}
+                    src={provider.iconUri}
+                    width={iconSize.lg}
+                    style={{
+                      borderRadius: radius.full,
+                    }}
+                  />
+                  <Container flex="column" gap="3xs" style={{ flex: 1 }}>
+                    <Text color="primaryText" size="md" weight={500}>
+                      {provider.name}
+                    </Text>
+                  </Container>
                   <Container
-                    flex="row"
-                    gap="sm"
-                    style={{ alignItems: "center", width: "100%" }}
+                    flex="column"
+                    gap="3xs"
+                    style={{ alignItems: "flex-end" }}
                   >
-                    <Container
-                      style={{
-                        alignItems: "center",
-                        borderRadius: "50%",
-                        display: "flex",
-                        height: `${iconSize.md}px`,
-                        justifyContent: "center",
-                        overflow: "hidden",
-                        padding: spacing.xs,
-                        width: `${iconSize.md}px`,
-                      }}
+                    <Text
+                      color="primaryText"
+                      size="sm"
+                      style={{ fontWeight: 500 }}
                     >
-                      <Img
-                        alt={provider.name}
-                        client={client}
-                        height={iconSize.md}
-                        src={provider.iconUri}
-                        width={iconSize.md}
-                      />
-                    </Container>
-                    <Container flex="column" gap="3xs" style={{ flex: 1 }}>
-                      <Text
-                        color="primaryText"
-                        size="md"
-                        style={{ fontWeight: 600 }}
-                      >
-                        {provider.name}
-                      </Text>
-                    </Container>
-                    <Container
-                      flex="column"
-                      gap="3xs"
-                      style={{ alignItems: "flex-end" }}
-                    >
-                      <Text
-                        color="primaryText"
-                        size="sm"
-                        style={{ fontWeight: 500 }}
-                      >
-                        {formatCurrencyAmount(
-                          currency || "US",
-                          quote.currencyAmount,
-                        )}
-                      </Text>
-                      <Text color="secondaryText" size="xs">
-                        {formatNumber(
-                          Number(
-                            toTokens(
-                              quote.destinationAmount,
-                              quote.destinationToken.decimals,
-                            ),
+                      {formatCurrencyAmount(
+                        currency || "USD",
+                        quote.currencyAmount,
+                      )}
+                    </Text>
+                    <Text color="secondaryText" size="xs">
+                      {formatNumber(
+                        Number(
+                          toTokens(
+                            quote.destinationAmount,
+                            quote.destinationToken.decimals,
                           ),
-                          4,
-                        )}{" "}
-                        {quote.destinationToken.symbol}
-                      </Text>
-                    </Container>
+                        ),
+                        4,
+                      )}{" "}
+                      {quote.destinationToken.symbol}
+                    </Text>
                   </Container>
-                </Button>
-              </Container>
+                </Container>
+              </Button>
             );
           })
       ) : (
-        <Container center="both" flex="column" style={{ minHeight: "120px" }}>
-          <Spinner color="secondaryText" size="lg" />
-          <Spacer y="sm" />
-          <Text center color="secondaryText" size="sm">
-            Generating quotes...
+        <Container
+          center="both"
+          flex="column"
+          style={{ flexGrow: 1, paddingBottom: spacing.lg }}
+          px="md"
+        >
+          <Spinner color="secondaryText" size="xl" />
+          <Spacer y="lg" />
+          <Text center color="primaryText" size="lg" weight={600} trackingTight>
+            Searching Providers
+          </Text>
+          <Spacer y="xs" />
+          <Text
+            center
+            color="secondaryText"
+            size="sm"
+            multiline
+            style={{
+              textWrap: "pretty",
+            }}
+          >
+            Searching for the best providers for this payment
           </Text>
         </Container>
       )}

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

@@ -125,9 +125,16 @@ export function PaymentSelection({
   const connectedWallets = useConnectedWallets();
   const activeWallet = useActiveWallet();
 
-  const [currentStep, setCurrentStep] = useState<Step>({
-    type: "walletSelection",
-  });
+  const initialStep =
+    paymentMethods.length === 1 && paymentMethods[0] === "card"
+      ? {
+          type: "fiatProviderSelection" as const,
+        }
+      : {
+          type: "walletSelection" as const,
+        };
+
+  const [currentStep, setCurrentStep] = useState<Step>(initialStep);
 
   useQuery({
     queryFn: () => {
@@ -226,6 +233,9 @@ export function PaymentSelection({
   };
 
   const getBackHandler = () => {
+    if (paymentMethods.length === 1 && paymentMethods[0] === "card") {
+      return onBack;
+    }
     switch (currentStep.type) {
       case "walletSelection":
         return onBack;
@@ -270,12 +280,11 @@ export function PaymentSelection({
   }
 
   return (
-    <Container flex="column" p="lg">
+    <Container flex="column" px="md" pb="md" pt="md+">
       <ModalHeader onBack={getBackHandler()} title={getStepTitle()} />
+      <Spacer y="lg" />
 
-      <Spacer y="xl" />
-
-      <Container flex="column">
+      <Container flex="column" style={{ minHeight: "300px" }}>
         {currentStep.type === "walletSelection" && (
           <WalletFiatSelection
             client={client}