thirdweb 5.105.49-nightly-04862de9e4e11724720fa40a0ed4713ff2bfdad5-20250917000323 → 5.106.1

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}

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

@@ -38,10 +38,15 @@ export function WalletFiatSelection({
     <>
       {paymentMethods.includes("crypto") && (
         <>
-          <Text color="primaryText" size="md">
-            Pay with Crypto
-          </Text>
-          <Spacer y="md" />
+          {paymentMethods.length > 1 && (
+            <>
+              <Text color="primaryText" size="sm" weight={500}>
+                Pay with Crypto
+              </Text>
+              <Spacer y="sm" />
+            </>
+          )}
+
           {/* Connected Wallets */}
           {connectedWallets.length > 0 && (
             <>
@@ -134,13 +139,13 @@ export function WalletFiatSelection({
 
       {paymentMethods.includes("card") && (
         <>
-          <Spacer y="md" />
+          <Spacer y="lg" />
 
-          <Text color="primaryText" size="md">
+          <Text color="primaryText" size="sm" weight={500}>
             Pay with Card
           </Text>
 
-          <Spacer y="md" />
+          <Spacer y="sm" />
 
           <Button
             fullWidth

package/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx

@@ -364,7 +364,7 @@ export function PaymentReceipt({
     <Container
       flex="column"
       fullHeight
-      p="lg"
+      p="md"
       style={{ maxHeight: "500px", minHeight: "250px", overflowY: "auto" }}
     >
       <ModalHeader onBack={onBack} title="Payment Receipt" />
@@ -374,10 +374,6 @@ export function PaymentReceipt({
       <Container flex="column" gap="lg">
         {/* Status Results */}
         <Container flex="column" gap="md">
-          <Text color="primaryText" size="md">
-            Transactions
-          </Text>
-
           {completedStatuses.map((status, index) => (
             <CompletedStepDetailCard
               key={`${status.type}-${index}`}

package/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx

@@ -6,7 +6,7 @@ import { trackPayEvent } from "../../../../../analytics/track/pay.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { WindowAdapter } from "../../../../core/adapters/WindowAdapter.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
-import { iconSize } from "../../../../core/design-system/index.js";
+import { iconSize, spacing } from "../../../../core/design-system/index.js";
 import type { BridgePrepareResult } from "../../../../core/hooks/useBridgePrepare.js";
 import type { CompletedStatusResult } from "../../../../core/hooks/useStepExecutor.js";
 import { Container, ModalHeader } from "../../components/basic.js";
@@ -91,10 +91,10 @@ export function SuccessScreen({
   }
 
   return (
-    <Container flex="column" fullHeight p="lg">
+    <Container flex="column" fullHeight px="md" pb="md" pt="md+">
       <ModalHeader title="Payment Complete" />
 
-      <Spacer y="xl" />
+      <Spacer y="xxl" />
 
       <Container center="x" flex="column" gap="md">
         {/* Success Icon with Animation */}
@@ -103,7 +103,6 @@ export function SuccessScreen({
           flex="row"
           style={{
             animation: "successBounce 0.6s ease-out",
-            backgroundColor: theme.colors.tertiaryBg,
             border: `2px solid ${theme.colors.success}`,
             borderRadius: "50%",
             height: "64px",
@@ -121,19 +120,31 @@ export function SuccessScreen({
           />
         </Container>
 
-        <Text center color="primaryText" size="xl">
-          Payment Successful!
-        </Text>
-
-        <Text center color="secondaryText" size="sm">
-          {hasPaymentId
-            ? "You can now close this page and return to the application."
-            : uiOptions.mode === "transaction"
-              ? "Click continue to execute your transaction."
-              : "Your payment has been completed successfully."}
-        </Text>
+        <div>
+          <Text
+            center
+            color="primaryText"
+            size="xl"
+            weight={600}
+            trackingTight
+            style={{
+              marginBottom: spacing.xxs,
+            }}
+          >
+            Payment Successful!
+          </Text>
+
+          <Text center color="secondaryText" size="sm">
+            {hasPaymentId
+              ? "You can now close this page and return to the application."
+              : uiOptions.mode === "transaction"
+                ? "Click continue to execute your transaction."
+                : "Your payment has been completed successfully."}
+          </Text>
+        </div>
       </Container>
-      <Spacer y="lg" />
+
+      <Spacer y="xxl" />
 
       {/* Action Buttons */}
       <Container flex="column" gap="sm" style={{ width: "100%" }}>

package/src/react/web/ui/Bridge/swap-widget/SearchInput.tsx

@@ -0,0 +1,46 @@
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import {
+  iconSize,
+  radius,
+  spacing,
+} from "../../../../core/design-system/index.js";
+import { Container } from "../../components/basic.js";
+import { Input } from "../../components/formElements.js";
+
+export function SearchInput(props: {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+}) {
+  return (
+    <div
+      style={{
+        position: "relative",
+      }}
+    >
+      <Container color="secondaryText">
+        <MagnifyingGlassIcon
+          width={iconSize.md}
+          height={iconSize.md}
+          style={{
+            position: "absolute",
+            left: spacing.sm,
+            top: "50%",
+            borderRadius: radius.lg,
+            transform: "translateY(-50%)",
+          }}
+        />
+      </Container>
+
+      <Input
+        variant="outline"
+        placeholder={props.placeholder}
+        value={props.value}
+        style={{
+          paddingLeft: "44px",
+        }}
+        onChange={(e) => props.onChange(e.target.value)}
+      />
+    </div>
+  );
+}

package/src/react/web/ui/Bridge/swap-widget/SelectChainButton.tsx

@@ -0,0 +1,50 @@
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import type { BridgeChain } from "../../../../../bridge/types/Chain.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import {
+  fontSize,
+  iconSize,
+  radius,
+  spacing,
+} from "../../../../core/design-system/index.js";
+import { Button } from "../../components/buttons.js";
+import { Img } from "../../components/Img.js";
+import { cleanedChainName } from "./utils.js";
+
+export function SelectChainButton(props: {
+  selectedChain: BridgeChain;
+  client: ThirdwebClient;
+  onClick: () => void;
+}) {
+  return (
+    <Button
+      variant="outline"
+      bg="tertiaryBg"
+      fullWidth
+      style={{
+        justifyContent: "flex-start",
+        fontWeight: 500,
+        fontSize: fontSize.md,
+        padding: `${spacing.sm} ${spacing.sm}`,
+        borderRadius: radius.lg,
+        minHeight: "48px",
+      }}
+      gap="sm"
+      onClick={props.onClick}
+    >
+      <Img
+        src={props.selectedChain.icon}
+        client={props.client}
+        width={iconSize.lg}
+        height={iconSize.lg}
+      />
+      <span> {cleanedChainName(props.selectedChain.name)} </span>
+
+      <ChevronDownIcon
+        width={iconSize.sm}
+        height={iconSize.sm}
+        style={{ marginLeft: "auto" }}
+      />
+    </Button>
+  );
+}