thirdweb 5.110.1 → 5.110.2-nightly-630edadcec2c777cfd4bfef4871aff396e98291e-20251024000336

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"}
           >

package/src/stories/theme.stories.tsx

@@ -0,0 +1,165 @@
+import type { Meta } from "@storybook/react-vite";
+import {
+  darkThemeObj,
+  lightThemeObj,
+  type Theme,
+} from "../react/core/design-system/index.js";
+import { StyledDiv } from "../react/web/ui/design-system/elements.js";
+
+const meta: Meta = {
+  title: "theme",
+};
+export default meta;
+
+export function Dark() {
+  return <Variant theme={darkThemeObj} />;
+}
+
+export function Light() {
+  return <Variant theme={lightThemeObj} />;
+}
+
+function Variant(props: { theme: Theme }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "10px",
+        maxWidth: "700px",
+        margin: "0 auto",
+        backgroundColor: props.theme.colors.modalBg,
+        padding: "14px",
+        lineHeight: "1.5",
+        borderRadius: "8px",
+      }}
+    >
+      <ColorPairTest theme={props.theme} text="primaryText" />
+      <ColorPairTest theme={props.theme} text="secondaryText" />
+      <ColorPairTest theme={props.theme} text="accentText" />
+      <ColorPairTest theme={props.theme} text="danger" />
+      <ColorPairTest theme={props.theme} text="success" />
+
+      <ColorPairTest theme={props.theme} bg="tooltipBg" text="tooltipText" />
+
+      <ColorPairTest
+        theme={props.theme}
+        bg="accentButtonBg"
+        text="accentButtonText"
+      />
+
+      <ColorPairTest
+        theme={props.theme}
+        bg="primaryButtonBg"
+        text="primaryButtonText"
+      />
+
+      <ColorPairTest
+        theme={props.theme}
+        bg="selectedTextBg"
+        text="selectedTextColor"
+      />
+
+      <ColorPairTest theme={props.theme} bg="skeletonBg" text="primaryText" />
+
+      <ColorPairTest theme={props.theme} bg="scrollbarBg" text="primaryText" />
+
+      <ColorPairTest
+        theme={props.theme}
+        bg="inputAutofillBg"
+        text="primaryText"
+      />
+
+      <ColorPairTest
+        theme={props.theme}
+        bg="tertiaryBg"
+        hoverBg="secondaryButtonHoverBg"
+        text="primaryText"
+      />
+
+      <ColorPairTest
+        theme={props.theme}
+        bg="secondaryButtonBg"
+        hoverBg="secondaryButtonHoverBg"
+        text="secondaryButtonText"
+      />
+
+      <ColorPairTest
+        theme={props.theme}
+        hoverBg="secondaryIconHoverBg"
+        text="secondaryIconColor"
+        hoverText="secondaryIconHoverColor"
+      />
+
+      <ColorPairTest
+        theme={props.theme}
+        bg="connectedButtonBg"
+        text="primaryText"
+        hoverBg="connectedButtonBgHover"
+      />
+
+      <div
+        style={{
+          border: `1px solid ${props.theme.colors.borderColor}`,
+          padding: "20px",
+          borderRadius: "8px",
+          color: props.theme.colors.primaryText,
+        }}
+      >
+        border
+      </div>
+
+      <div
+        style={{
+          border: `1px solid ${props.theme.colors.separatorLine}`,
+          padding: "20px",
+          borderRadius: "8px",
+          color: props.theme.colors.primaryText,
+        }}
+      >
+        separatorLine
+      </div>
+    </div>
+  );
+}
+
+function ColorPairTest(props: {
+  theme: Theme;
+  bg?: keyof Theme["colors"];
+  text: keyof Theme["colors"];
+  hoverBg?: keyof Theme["colors"];
+  hoverText?: keyof Theme["colors"];
+}) {
+  return (
+    <HoverBg
+      style={{ display: "flex", flexDirection: "column", gap: "10px" }}
+      bg={props.bg ? props.theme.colors[props.bg] : undefined}
+      hoverBg={props.hoverBg ? props.theme.colors[props.hoverBg] : undefined}
+      text={props.theme.colors[props.text]}
+    >
+      {[props.bg, props.hoverBg, props.text].filter(Boolean).join(", ")}
+    </HoverBg>
+  );
+}
+const HoverBg = StyledDiv(
+  (props: {
+    bg?: string;
+    hoverBg?: string;
+    text: string;
+    hoverText?: string;
+  }) => {
+    return {
+      backgroundColor: props.bg ?? "transparent",
+      padding: "20px",
+      borderRadius: "8px",
+      fontSize: "16px",
+      fontWeight: 400,
+      color: props.text,
+      "&:hover": props.hoverBg
+        ? {
+            backgroundColor: props.hoverBg,
+          }
+        : undefined,
+    };
+  },
+);

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.110.1";
+export const version = "5.110.2-nightly-630edadcec2c777cfd4bfef4871aff396e98291e-20251024000336";