thirdweb 5.105.48 → 5.106.0

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>
+  );
+}