thirdweb 5.110.0 → 5.110.2-nightly-630edadcec2c777cfd4bfef4871aff396e98291e-20251024000336

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

@@ -167,6 +167,9 @@ export function FundWallet(props: FundWalletProps) {
   const actionLabel = isReceiverDifferentFromActiveWallet ? "Pay" : "Buy";
   const isMobile = useIsMobile();
 
+  // if no receiver address is set - wallet must be connected because the user's wallet is the receiver
+  const showConnectButton = !props.receiverAddress && !activeWalletInfo;
+
   return (
     <WithHeader
       client={props.client}
@@ -283,7 +286,20 @@ export function FundWallet(props: FundWalletProps) {
       )}
 
       {/* Continue Button */}
-      {activeWalletInfo ? (
+      {showConnectButton ? (
+        <ConnectButton
+          client={props.client}
+          connectButton={{
+            label: props.buttonLabel || actionLabel,
+            style: {
+              width: "100%",
+              borderRadius: radius.full,
+            },
+          }}
+          theme={theme}
+          {...props.connectOptions}
+        />
+      ) : (
         <Button
           disabled={!receiver}
           fullWidth
@@ -316,19 +332,6 @@ export function FundWallet(props: FundWalletProps) {
         >
           {props.buttonLabel || actionLabel}
         </Button>
-      ) : (
-        <ConnectButton
-          client={props.client}
-          connectButton={{
-            label: props.buttonLabel || actionLabel,
-            style: {
-              width: "100%",
-              borderRadius: radius.full,
-            },
-          }}
-          theme={theme}
-          {...props.connectOptions}
-        />
       )}
 
       {props.showThirdwebBranding ? (

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

@@ -5,7 +5,6 @@ import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
 import { checksumAddress } from "../../../../../utils/address.js";
 import { formatNumber } from "../../../../../utils/formatNumber.js";
 import { toTokens } from "../../../../../utils/units.js";
-import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import {
   iconSize,
   radius,
@@ -62,8 +61,6 @@ export function FiatProviderSelection({
   currency,
   country,
 }: FiatProviderSelectionProps) {
-  const theme = useCustomTheme();
-
   // Fetch quotes for all providers
   const quoteQueries = useBuyWithFiatQuotesForProviders({
     amount: toAmount || "0",
@@ -122,9 +119,9 @@ export function FiatProviderSelection({
                 fullWidth
                 onClick={() => onProviderSelected(provider.id)}
                 style={{
-                  border: `1px solid ${theme.colors.borderColor}`,
-                  borderRadius: radius.md,
+                  borderRadius: radius.lg,
                   textAlign: "left",
+                  padding: `${spacing.md}`,
                 }}
                 variant="secondary"
               >

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

@@ -269,7 +269,7 @@ export function PaymentSelection({
   }
 
   return (
-    <Container flex="column" px="md" pb="md" pt="md+">
+    <Container flex="column" px="md" pt="md+">
       <ModalHeader onBack={getBackHandler()} title={getStepTitle()} />
       <Spacer y="lg" />
 

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

@@ -61,10 +61,8 @@ function PaymentMethodTokenRow({
       onClick={() => onPaymentMethodSelected(paymentMethod)}
       style={{
         backgroundColor: theme.colors.tertiaryBg,
-        border: `1px solid ${theme.colors.borderColor}`,
-        borderRadius: radius.md,
-        opacity: hasEnoughBalance ? 1 : 0.5,
-        padding: `${spacing.sm} ${spacing.md}`,
+        borderRadius: radius.lg,
+        padding: `${spacing.md} ${spacing.md}`,
         textAlign: "left",
       }}
       variant="secondary"
@@ -134,71 +132,74 @@ export function TokenSelection({
 
   if (paymentMethodsLoading) {
     return (
-      <>
-        <Text color="primaryText" size="md">
-          Loading your tokens
-        </Text>
-        <Spacer y="sm" />
-        <Container flex="column" gap="sm">
-          {/* Skeleton rows matching PaymentMethodTokenRow structure */}
-          {[1, 2, 3].map((i) => (
+      <Container
+        flex="column"
+        gap="xs"
+        pb="lg"
+        style={{
+          maxHeight: "400px",
+          overflowY: "auto",
+          scrollbarWidth: "none",
+        }}
+      >
+        {/* Skeleton rows matching PaymentMethodTokenRow structure */}
+        {new Array(10).fill(0).map((_, i) => (
+          <Container
+            // biome-ignore lint/suspicious/noArrayIndexKey: ok
+            key={i}
+            style={{
+              backgroundColor: theme.colors.tertiaryBg,
+              borderRadius: radius.lg,
+              padding: `${spacing.md} ${spacing.md}`,
+            }}
+          >
             <Container
-              key={i}
-              style={{
-                backgroundColor: theme.colors.tertiaryBg,
-                border: `1px solid ${theme.colors.borderColor}`,
-                borderRadius: radius.md,
-                padding: `${spacing.sm} ${spacing.md}`,
-              }}
+              flex="row"
+              gap="md"
+              style={{ alignItems: "center", width: "100%" }}
             >
+              {/* Left side: Token icon and name skeleton */}
               <Container
+                center="y"
                 flex="row"
-                gap="md"
-                style={{ alignItems: "center", width: "100%" }}
+                gap="sm"
+                style={{ maxWidth: "50%" }}
               >
-                {/* Left side: Token icon and name skeleton */}
-                <Container
-                  center="y"
-                  flex="row"
-                  gap="sm"
-                  style={{ maxWidth: "50%" }}
-                >
-                  {/* Token icon skeleton */}
-                  <div
-                    style={{
-                      backgroundColor: theme.colors.skeletonBg,
-                      borderRadius: "50%",
-                      height: "32px",
-                      width: "32px",
-                    }}
-                  />
-                  <Container flex="column" gap="3xs">
-                    {/* Token name skeleton */}
-                    <Skeleton height="14px" width="60px" />
-                    {/* Chain name skeleton */}
-                    <Skeleton height="12px" width="40px" />
-                  </Container>
+                {/* Token icon skeleton */}
+                <div
+                  style={{
+                    backgroundColor: theme.colors.skeletonBg,
+                    borderRadius: "50%",
+                    height: "32px",
+                    width: "32px",
+                  }}
+                />
+                <Container flex="column" gap="3xs">
+                  {/* Token name skeleton */}
+                  <Skeleton height="14px" width="60px" />
+                  {/* Chain name skeleton */}
+                  <Skeleton height="12px" width="40px" />
                 </Container>
+              </Container>
 
-                {/* Right side: Price and balance skeleton */}
-                <Container
-                  flex="column"
-                  gap="3xs"
-                  style={{ alignItems: "flex-end", flex: 1 }}
-                >
-                  {/* Price amount skeleton */}
-                  <Skeleton height="16px" width="80px" />
-                  {/* Balance skeleton */}
-                  <Container flex="row" gap="3xs">
-                    <Skeleton height="12px" width="50px" />
-                    <Skeleton height="12px" width="40px" />
-                  </Container>
+              {/* Right side: Price and balance skeleton */}
+              <Container
+                flex="column"
+                gap="3xs"
+                style={{ alignItems: "flex-end", flex: 1 }}
+              >
+                {/* Price amount skeleton */}
+                <Skeleton height="16px" width="80px" />
+                {/* Balance skeleton */}
+                <Container flex="row" gap="3xs">
+                  <Skeleton height="12px" width="50px" />
+                  <Skeleton height="12px" width="40px" />
                 </Container>
               </Container>
             </Container>
-          ))}
-        </Container>
-      </>
+          </Container>
+        ))}
+      </Container>
     );
   }
 
@@ -221,35 +222,30 @@ export function TokenSelection({
   }
 
   return (
-    <>
-      <Text color="primaryText" size="md">
-        Your token balances
-      </Text>
-      <Spacer y="sm" />
-      <Container
-        flex="column"
-        gap="sm"
-        style={{
-          maxHeight: "400px",
-          overflowY: "auto",
-          scrollbarWidth: "none",
-        }}
-      >
-        {paymentMethods
-          .filter((method) => method.type === "wallet")
-          .map((method) => (
-            <PaymentMethodTokenRow
-              client={client}
-              destinationAmount={destinationAmount}
-              destinationToken={destinationToken}
-              feePayer={feePayer}
-              key={`${method.originToken.address}-${method.originToken.chainId}`}
-              onPaymentMethodSelected={onPaymentMethodSelected}
-              paymentMethod={method}
-              currency={currency}
-            />
-          ))}
-      </Container>
-    </>
+    <Container
+      flex="column"
+      gap="xs"
+      pb="lg"
+      style={{
+        maxHeight: "400px",
+        overflowY: "auto",
+        scrollbarWidth: "none",
+      }}
+    >
+      {paymentMethods
+        .filter((method) => method.type === "wallet")
+        .map((method) => (
+          <PaymentMethodTokenRow
+            client={client}
+            destinationAmount={destinationAmount}
+            destinationToken={destinationToken}
+            feePayer={feePayer}
+            key={`${method.originToken.address}-${method.originToken.chainId}`}
+            onPaymentMethodSelected={onPaymentMethodSelected}
+            paymentMethod={method}
+            currency={currency}
+          />
+        ))}
+    </Container>
   );
 }

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

@@ -1,5 +1,5 @@
 "use client";
-import { ChevronRightIcon, PlusIcon } from "@radix-ui/react-icons";
+import { PlusIcon } from "@radix-ui/react-icons";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
@@ -12,7 +12,6 @@ import { CreditCardIcon } from "../../ConnectWallet/icons/CreditCardIcon.js";
 import { WalletRow } from "../../ConnectWallet/screens/Buy/swap/WalletRow.js";
 import { Container } from "../../components/basic.js";
 import { Button } from "../../components/buttons.js";
-import { Spacer } from "../../components/Spacer.js";
 import { Text } from "../../components/text.js";
 
 interface WalletFiatSelectionProps {
@@ -35,56 +34,39 @@ export function WalletFiatSelection({
   const theme = useCustomTheme();
 
   return (
-    <>
+    <Container flex="column" gap="xs">
       {paymentMethods.includes("crypto") && (
         <>
-          {paymentMethods.length > 1 && (
-            <>
-              <Text color="primaryText" size="sm" weight={500}>
-                Pay with Crypto
-              </Text>
-              <Spacer y="sm" />
-            </>
-          )}
-
           {/* Connected Wallets */}
           {connectedWallets.length > 0 && (
-            <>
-              <Container flex="column" gap="sm">
-                {connectedWallets.map((wallet) => {
-                  const account = wallet.getAccount();
-                  if (!account?.address) {
-                    return null;
-                  }
-                  return (
-                    <Button
-                      fullWidth
-                      key={wallet.id}
-                      onClick={() => onWalletSelected(wallet)}
-                      style={{
-                        backgroundColor: theme.colors.tertiaryBg,
-                        border: `1px solid ${theme.colors.borderColor}`,
-                        borderRadius: radius.md,
-                        justifyContent: "space-between",
-                        padding: `${spacing.sm} ${spacing.md}`,
-                      }}
-                      variant="secondary"
-                    >
-                      <WalletRow
-                        address={account?.address}
-                        client={client}
-                        iconSize="lg"
-                        textSize="sm"
-                      />
-                      <ChevronRightIcon
-                        style={{ height: iconSize.md, width: iconSize.md }}
-                      />
-                    </Button>
-                  );
-                })}
-              </Container>
-              <Spacer y="sm" />
-            </>
+            <Container flex="column" gap="sm">
+              {connectedWallets.map((wallet) => {
+                const account = wallet.getAccount();
+                if (!account?.address) {
+                  return null;
+                }
+                return (
+                  <Button
+                    fullWidth
+                    key={`${wallet.id}-${account.address}`}
+                    onClick={() => onWalletSelected(wallet)}
+                    style={{
+                      borderRadius: radius.md,
+                      justifyContent: "space-between",
+                      padding: `${spacing.md} ${spacing.md}`,
+                    }}
+                    variant="secondary"
+                  >
+                    <WalletRow
+                      address={account?.address}
+                      client={client}
+                      iconSize="lg"
+                      textSize="sm"
+                    />
+                  </Button>
+                );
+              })}
+            </Container>
           )}
 
           {/* Connect Another Wallet */}
@@ -92,11 +74,9 @@ export function WalletFiatSelection({
             fullWidth
             onClick={onConnectWallet}
             style={{
-              backgroundColor: theme.colors.tertiaryBg,
-              border: `1px solid ${theme.colors.borderColor}`,
               borderRadius: radius.md,
               height: "auto",
-              padding: `${spacing.sm} ${spacing.md}`,
+              padding: `${spacing.md} ${spacing.md}`,
               textAlign: "left",
             }}
             variant="secondary"
@@ -109,23 +89,22 @@ export function WalletFiatSelection({
               <Container
                 style={{
                   alignItems: "center",
-                  border: `1px dashed ${theme.colors.secondaryIconColor}`,
-                  borderRadius: radius.sm,
+                  border: `1px dashed ${theme.colors.secondaryText}`,
+                  borderRadius: radius.full,
                   display: "flex",
-                  height: iconSize.lg,
+                  height: `${iconSize.lg}px`,
                   justifyContent: "center",
-                  padding: spacing["4xs"],
-                  width: iconSize.lg,
+                  width: `${iconSize.lg}px`,
                 }}
               >
                 <PlusIcon
                   color={theme.colors.secondaryText}
-                  height={iconSize.md}
-                  width={iconSize.md}
+                  height={iconSize["sm+"]}
+                  width={iconSize["sm+"]}
                 />
               </Container>
               <Container flex="column" gap="3xs" style={{ flex: 1 }}>
-                <Text color="primaryText" size="sm" style={{ fontWeight: 600 }}>
+                <Text color="primaryText" size="sm">
                   Connect a Wallet
                 </Text>
                 <Text color="secondaryText" size="xs">
@@ -138,49 +117,37 @@ export function WalletFiatSelection({
       )}
 
       {paymentMethods.includes("card") && (
-        <>
-          <Spacer y="lg" />
-
-          <Text color="primaryText" size="sm" weight={500}>
-            Pay with Card
-          </Text>
-
-          <Spacer y="sm" />
-
-          <Button
-            fullWidth
-            onClick={onFiatSelected}
-            style={{
-              backgroundColor: theme.colors.tertiaryBg,
-              border: `1px solid ${theme.colors.borderColor}`,
-              borderRadius: radius.md,
-              height: "auto",
-              padding: `${spacing.sm} ${spacing.md}`,
-              textAlign: "left",
-            }}
-            variant="secondary"
+        <Button
+          fullWidth
+          onClick={onFiatSelected}
+          style={{
+            borderRadius: radius.md,
+            height: "auto",
+            padding: `${spacing.md} ${spacing.md}`,
+            textAlign: "left",
+          }}
+          variant="secondary"
+        >
+          <Container
+            flex="row"
+            gap="md"
+            style={{ alignItems: "center", width: "100%" }}
           >
-            <Container
-              flex="row"
-              gap="md"
-              style={{ alignItems: "center", width: "100%" }}
-            >
-              <CreditCardIcon
-                color={theme.colors.secondaryIconColor}
-                size={iconSize.lg}
-              />
-              <Container flex="column" gap="3xs" style={{ flex: 1 }}>
-                <Text color="primaryText" size="sm" style={{ fontWeight: 600 }}>
-                  Pay with Card
-                </Text>
-                <Text color="secondaryText" size="xs">
-                  Onramp and pay in one step
-                </Text>
-              </Container>
+            <CreditCardIcon
+              color={theme.colors.secondaryText}
+              size={iconSize.lg}
+            />
+            <Container flex="column" gap="3xs" style={{ flex: 1 }}>
+              <Text color="primaryText" size="sm">
+                Pay with Card
+              </Text>
+              <Text color="secondaryText" size="xs">
+                Onramp and pay in one step
+              </Text>
             </Container>
-          </Button>
-        </>
+          </Container>
+        </Button>
       )}
-    </>
+    </Container>
   );
 }

package/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx

@@ -76,7 +76,7 @@ export function WalletEntryButton(props: {
 
       <Container expand flex="column" gap="xxs">
         {nameOverride ? (
-          <Text color="primaryText" weight={600}>
+          <Text color="primaryText" weight={500}>
             {nameOverride}
           </Text>
         ) : (

package/src/react/web/ui/ConnectWallet/WalletSelector.tsx

@@ -320,7 +320,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
       bottomSection = (
         <>
           <Line />
-          <Container flex="column" gap="md" p="md">
+          <Container flex="column" gap="md" px="lg" py="md+">
             {newToWallets}
             {continueAsGuest}
           </Container>
@@ -705,7 +705,7 @@ const ShowAllWalletsIcon = /* @__PURE__ */ StyledDiv(() => {
     },
     alignItems: "center",
     backgroundColor: theme.colors.tertiaryBg,
-    border: `2px solid ${theme.colors.borderColor}`,
+    border: `1px solid ${theme.colors.borderColor}`,
     borderRadius: radius.md,
     display: "grid",
     gap: spacing["4xs"],

package/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx

@@ -52,7 +52,7 @@ export function ReceiveFunds(props: {
             )
           }
           qrCodeUri={address}
-          size={310}
+          size={350}
         />
       </Container>
       <Spacer y="xl" />
@@ -62,7 +62,7 @@ export function ReceiveFunds(props: {
         className="tw-copy-address-button"
       >
         <Text color="primaryText" size="md">
-          {shortenString(address || "")}
+          {shortenString(address || "", false)}
         </Text>
         <CopyIcon
           hasCopied={hasCopied}
@@ -76,6 +76,7 @@ export function ReceiveFunds(props: {
       <Text
         balance
         center
+        size="sm"
         className="receive_fund_screen_instruction"
         multiline
       >

package/src/react/web/ui/components/modalElements.tsx

@@ -10,9 +10,10 @@ export const ModalTitle = /* @__PURE__ */ StyledH2((_) => {
   return {
     color: theme.colors.primaryText,
     fontSize: fontSize.lg,
-    fontWeight: 600,
+    fontWeight: 500,
     lineHeight: 1.3,
     margin: 0,
+    letterSpacing: "-0.025em",
     textAlign: "left",
   };
 });

package/src/react/web/wallets/shared/ConnectingScreen.tsx

@@ -74,7 +74,7 @@ export const ConnectingScreen: React.FC<{
             center
             color="primaryText"
             size="lg"
-            weight={600}
+            weight={500}
             className="tw-screen-title"
             data-status={props.errorConnecting ? "failed" : "in-progress"}
           >