thirdweb 5.105.48 → 5.106.0

package/src/react/web/ui/ConnectWallet/icons/ArrowUpDownIcon.tsx

@@ -0,0 +1,23 @@
+import type { IconFC } from "./types.js";
+
+export const ArrowUpDownIcon: IconFC = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      role="presentation"
+      width={props.size}
+      height={props.size}
+    >
+      <path d="m21 16-4 4-4-4" />
+      <path d="M17 20V4" />
+      <path d="m3 8 4-4 4 4" />
+      <path d="M7 4v16" />
+    </svg>
+  );
+};

package/src/react/web/ui/ConnectWallet/icons/WalletDotIcon.tsx

@@ -0,0 +1,22 @@
+import type { IconFC } from "./types.js";
+
+/**
+ * @internal
+ */
+export const WalletDotIcon: IconFC = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 18 18"
+      width={props.size}
+      height={props.size}
+      role="presentation"
+    >
+      <path
+        fill="currentColor"
+        d="M15.6 4.6H1.85v-.55l12.1-.968v.968h1.65V2.4c0-1.21-.98-2.059-2.177-1.888L2.378 2.089C1.18 2.26.2 3.39.2 4.6v11a2.2 2.2 0 002.2 2.2h13.2a2.2 2.2 0 002.2-2.2V6.8a2.2 2.2 0 00-2.2-2.2zm-1.65 7.707a1.65 1.65 0 01-.63-3.176 1.65 1.65 0 11.63 3.176z"
+      ></path>
+    </svg>
+  );
+};

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

@@ -35,7 +35,7 @@ export function ReceiveFunds(props: {
   const locale = connectLocale.receiveFundsScreen;
 
   return (
-    <Container p="lg">
+    <Container p="lg" className="tw-receive-funds-screen">
       <ModalHeader onBack={props.onBack} title={locale.title} />
 
       <Spacer y="xl" />
@@ -57,7 +57,10 @@ export function ReceiveFunds(props: {
       </Container>
       <Spacer y="xl" />
 
-      <WalletAddressContainer onClick={onCopy}>
+      <WalletAddressContainer
+        onClick={onCopy}
+        className="tw-copy-address-button"
+      >
         <Text color="primaryText" size="md">
           {shortenString(address || "")}
         </Text>

package/src/react/web/ui/ConnectWallet/screens/SendFunds.test.tsx

@@ -58,9 +58,7 @@ describe("SendFunds screen", () => {
         token={{ nativeToken: true }}
       />,
     );
-    const element = container.querySelector(
-      "button.tw-sendfunds-screen-send-button",
-    );
+    const element = container.querySelector("button.tw-send-funds-button");
     expect(element?.innerHTML).toBe(en.sendFundsScreen.submitButton);
     vi.resetAllMocks();
   });

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

@@ -170,7 +170,11 @@ export function SendFundsForm(props: {
 
   if (sendTokenMutation.isError) {
     return (
-      <Container animate="fadein" p="lg">
+      <Container
+        animate="fadein"
+        p="lg"
+        className="tw-send-funds-screen tw-send-funds-screen__error"
+      >
         <ModalHeader
           onBack={() => {
             sendTokenMutation.reset();
@@ -199,7 +203,11 @@ export function SendFundsForm(props: {
 
   if (sendTokenMutation.isSuccess) {
     return (
-      <Container animate="fadein" p="lg">
+      <Container
+        animate="fadein"
+        p="lg"
+        className="tw-send-funds-screen tw-send-funds-screen__success"
+      >
         <ModalHeader
           onBack={() => {
             sendTokenMutation.reset();
@@ -232,7 +240,11 @@ export function SendFundsForm(props: {
     balanceQuery?.data?.symbol;
 
   return (
-    <Container animate="fadein" p="lg">
+    <Container
+      animate="fadein"
+      p="lg"
+      className="tw-send-funds-screen tw-send-funds-screen__form"
+    >
       <ModalHeader onBack={props.onBack} title={locale.title} />
       <Spacer y="xl" />
 
@@ -247,6 +259,7 @@ export function SendFundsForm(props: {
         </Label>
         <Spacer y="sm" />
         <Button
+          className="tw-select-token-button"
           fullWidth
           id={tokenId}
           onClick={props.onTokenSelect}
@@ -289,6 +302,7 @@ export function SendFundsForm(props: {
         </Label>
         <Spacer y="sm" />
         <Input
+          className="tw-address-input"
           id={receiverId}
           onChange={(e) => {
             setReceiverAddress(e.target.value);
@@ -308,6 +322,7 @@ export function SendFundsForm(props: {
         <Spacer y="sm" />
         <Container relative>
           <Input
+            className="tw-amount-input"
             id={amountId}
             onChange={(e) => {
               setAmount(e.target.value);
@@ -326,7 +341,7 @@ export function SendFundsForm(props: {
 
         {/* Submit */}
         <Button
-          className="tw-sendfunds-screen-send-button"
+          className="tw-send-funds-button"
           fullWidth
           onClick={async () => {
             if (!receiverAddress || !amount) {

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

@@ -169,14 +169,24 @@ export const SignatureScreen: React.FC<{
             </Container>
 
             <Container animate="fadein" flex="column" gap="md" key={status}>
-              <Text center color="primaryText" size="lg">
+              <Text
+                center
+                color="primaryText"
+                size="lg"
+                className="tw-screen-title"
+              >
                 {status === "failed"
                   ? error || locale.signingScreen.failedToSignIn
-                  : locale.signingScreen.inProgress}
+                  : locale.signingScreen.inProgress}{" "}
               </Text>
 
               {status === "signing" && (
-                <Text balance center multiline>
+                <Text
+                  balance
+                  center
+                  multiline
+                  className="tw-screen-description"
+                >
                   {connectLocale.signatureScreen.signingScreen.prompt}
                 </Text>
               )}

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

@@ -101,6 +101,7 @@ export function TokenSelector(props: {
   if (screen === "select-chain" && chainSelection) {
     return (
       <NetworkSelectorContent
+        className="tw-send-funds-screen tw-send-funds-screen__select-chain"
         chains={chainSelection.chains}
         client={props.client}
         closeModal={() => setScreen("base")}
@@ -131,6 +132,7 @@ export function TokenSelector(props: {
 
   return (
     <Container
+      className="tw-send-funds-screen tw-send-funds-screen__select-token"
       animate="fadein"
       style={{
         minHeight: "300px",

package/src/react/web/ui/TransactionButton/TransactionModal.tsx

@@ -68,6 +68,8 @@ export function TransactionModal(props: ModalProps) {
   return (
     <CustomThemeProvider theme={props.theme}>
       <Modal
+        className="tw-modal__view-transaction"
+        title="View Transaction"
         open={true}
         setOpen={(_open) => {
           if (!_open) {

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

@@ -17,7 +17,7 @@ export function DynamicHeight(props: {
         boxSizing: "border-box",
         height: height ? `${height}px` : "auto",
         overflow: "hidden",
-        transition: "height 210ms cubic-bezier(0.175, 0.885, 0.32, 1.1)",
+        transition: "height 210ms ease",
       }}
     >
       <div

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

@@ -1,7 +1,9 @@
 "use client";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { resolveScheme } from "../../../../utils/ipfs.js";
+import { radius, type Theme } from "../../../core/design-system/index.js";
+import { Container } from "./basic.js";
 import { Skeleton } from "./Skeleton.js";
 
 /**
@@ -16,20 +18,24 @@ export const Img: React.FC<{
   className?: string;
   style?: React.CSSProperties;
   fallbackImage?: string;
+  fallback?: React.ReactNode;
   client: ThirdwebClient;
+  skeletonColor?: keyof Theme["colors"];
 }> = (props) => {
-  const [isLoaded, setIsLoaded] = useState(false);
+  const [_status, setStatus] = useState<"pending" | "fallback" | "loaded">(
+    "pending",
+  );
+  const imgRef = useRef<HTMLImageElement>(null);
 
   const propSrc = props.src;
 
   const widthPx = `${props.width}px`;
   const heightPx = `${props.height || props.width}px`;
 
-  if (propSrc === undefined) {
-    return <Skeleton height={heightPx} width={widthPx} />;
-  }
-
   const getSrc = () => {
+    if (propSrc === undefined) {
+      return undefined;
+    }
     try {
       return resolveScheme({
         client: props.client,
@@ -42,6 +48,31 @@ export const Img: React.FC<{
 
   const src = getSrc();
 
+  const status =
+    src === undefined ? "pending" : src === "" ? "fallback" : _status;
+
+  const isLoaded = status === "loaded";
+
+  useEffect(() => {
+    const imgEl = imgRef.current;
+    if (!imgEl) {
+      return;
+    }
+    if (imgEl.complete) {
+      setStatus("loaded");
+    } else {
+      function handleLoad() {
+        setStatus("loaded");
+      }
+      imgEl.addEventListener("load", handleLoad);
+      return () => {
+        imgEl.removeEventListener("load", handleLoad);
+      };
+    }
+
+    return;
+  }, []);
+
   return (
     <div
       style={{
@@ -52,7 +83,32 @@ export const Img: React.FC<{
         position: "relative",
       }}
     >
-      {!isLoaded && <Skeleton height={heightPx} width={widthPx} />}
+      {status === "pending" && (
+        <Skeleton
+          height={heightPx}
+          width={widthPx}
+          color={props.skeletonColor}
+          style={props.style}
+        />
+      )}
+      {status === "fallback" &&
+        (props.fallback || (
+          <Container
+            bg="tertiaryBg"
+            borderColor="borderColor"
+            style={{
+              height: heightPx,
+              width: widthPx,
+              borderRadius: radius.md,
+              borderWidth: "1px",
+              borderStyle: "solid",
+              ...props.style,
+            }}
+          >
+            <div />
+          </Container>
+        ))}
+
       <img
         alt={props.alt || ""}
         className={props.className}
@@ -67,12 +123,14 @@ export const Img: React.FC<{
             e.currentTarget.src !== props.fallbackImage
           ) {
             e.currentTarget.src = props.fallbackImage;
+          } else {
+            setStatus("fallback");
           }
         }}
         onLoad={() => {
-          setIsLoaded(true);
+          setStatus("loaded");
         }}
-        src={src}
+        src={src || undefined}
         style={{
           height: !isLoaded
             ? 0

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

@@ -12,6 +12,7 @@ import {
   shadow,
   spacing,
 } from "../../../core/design-system/index.js";
+import { cls } from "../../utils/cls.js";
 import {
   compactModalMaxHeight,
   modalCloseFadeOutDuration,
@@ -33,10 +34,13 @@ export const Modal: React.FC<{
   open?: boolean;
   setOpen?: (open: boolean) => void;
   children: React.ReactNode;
+  className: string;
   style?: React.CSSProperties;
   hideCloseIcon?: boolean;
   size: "wide" | "compact";
+  title: string;
   hide?: boolean;
+  crossContainerStyles?: React.CSSProperties;
 }> = (props) => {
   const [open, setOpen] = useState(props.open);
   const contentRef = useRef<HTMLDivElement>(null);
@@ -88,6 +92,7 @@ export const Modal: React.FC<{
         <FocusScope trapped={!props.hide}>
           <Dialog.Content aria-describedby={undefined} asChild>
             <DialogContent
+              className={cls("tw-modal", props.className)}
               ref={contentRef}
               style={
                 props.hide
@@ -116,7 +121,7 @@ export const Modal: React.FC<{
                   width: "1px",
                 }}
               >
-                Connect Modal
+                {props.title}
               </Dialog.Title>
               {props.size === "compact" ? (
                 <DynamicHeight maxHeight={compactModalMaxHeight}>
@@ -128,7 +133,15 @@ export const Modal: React.FC<{
 
               {/* Close Icon */}
               {!props.hideCloseIcon && (
-                <CrossContainer>
+                <div
+                  style={{
+                    position: "absolute",
+                    right: spacing.lg,
+                    top: spacing.lg,
+                    transform: "translateX(6px)",
+                    ...props.crossContainerStyles,
+                  }}
+                >
                   <Dialog.Close asChild>
                     <IconButton aria-label="Close" autoFocus type="button">
                       <Cross2Icon
@@ -140,7 +153,7 @@ export const Modal: React.FC<{
                       />
                     </IconButton>
                   </Dialog.Close>
-                </CrossContainer>
+                </div>
               )}
             </DialogContent>
           </Dialog.Content>
@@ -150,13 +163,6 @@ export const Modal: React.FC<{
   );
 };
 
-const CrossContainer = /* @__PURE__ */ StyledDiv({
-  position: "absolute",
-  right: spacing.lg,
-  top: spacing.lg,
-  transform: "translateX(6px)",
-});
-
 const modalAnimationDesktop = keyframes`
   from {
     opacity: 0;
@@ -190,7 +196,7 @@ const DialogContent = /* @__PURE__ */ StyledDiv((_) => {
     animation: `${modalAnimationDesktop} 300ms ease`,
     background: theme.colors.modalBg,
     border: `1px solid ${theme.colors.borderColor}`,
-    borderRadius: radius.lg,
+    borderRadius: radius.xl,
     boxShadow: shadow.lg,
     boxSizing: "border-box",
     color: theme.colors.primaryText,
@@ -208,7 +214,6 @@ const DialogContent = /* @__PURE__ */ StyledDiv((_) => {
       animation: `${modalAnimationMobile} 0.35s cubic-bezier(0.15, 1.15, 0.6, 1)`,
       borderBottomLeftRadius: 0,
       borderBottomRightRadius: 0,
-      borderRadius: radius.xl,
       bottom: 0,
       left: 0,
       maxWidth: "none !important",

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

@@ -21,7 +21,7 @@ export function OTPInput(props: {
   onEnter: () => void;
 }) {
   return (
-    <OTPInputContainer>
+    <OTPInputContainer className="tw-otp-input-container">
       <InputOTP
         maxLength={6}
         onChange={(newValue) => {

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

@@ -12,6 +12,7 @@ export const Skeleton: React.FC<{
   width?: string;
   color?: keyof Theme["colors"];
   className?: string;
+  style?: React.CSSProperties;
 }> = (props) => {
   return (
     <SkeletonDiv
@@ -20,6 +21,7 @@ export const Skeleton: React.FC<{
       style={{
         height: props.height,
         width: props.width || "auto",
+        ...props.style,
       }}
     />
   );

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

@@ -10,6 +10,7 @@ import { StyledCircle, StyledSvg } from "../design-system/elements.js";
  */
 export const Spinner: React.FC<{
   size: keyof typeof iconSize;
+  style?: React.CSSProperties;
   color?: keyof Theme["colors"];
 }> = (props) => {
   const theme = useCustomTheme();
@@ -18,8 +19,10 @@ export const Spinner: React.FC<{
       style={{
         height: `${iconSize[props.size]}px`,
         width: `${iconSize[props.size]}px`,
+        ...props.style,
       }}
       viewBox="0 0 50 50"
+      className="tw-spinner"
     >
       <Circle
         cx="25"

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

@@ -2,6 +2,7 @@
 import type { CSSObject } from "@emotion/react";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import { spacing, type Theme } from "../../../core/design-system/index.js";
+import { cls } from "../../utils/cls.js";
 import {
   fadeInAnimation,
   floatDownAnimation,
@@ -36,10 +37,12 @@ export function ModalHeader(props: {
   onBack?: () => void;
   title: React.ReactNode;
   leftAligned?: boolean;
+  className?: string;
 }) {
   const { onBack, title } = props;
   return (
     <div
+      className={cls("tw-header", props.className)}
       style={{
         alignItems: "center",
         display: "flex",
@@ -64,11 +67,10 @@ export function ModalHeader(props: {
   );
 }
 
-export const Line = /* @__PURE__ */ StyledDiv(() => {
+export const Line = /* @__PURE__ */ StyledDiv((props: { dashed?: boolean }) => {
   const theme = useCustomTheme();
   return {
-    background: theme.colors.separatorLine,
-    height: "1px",
+    borderTop: `1px ${props.dashed ? "dashed" : "solid"} ${theme.colors.separatorLine}`,
   };
 });
 
@@ -87,12 +89,15 @@ export function Container(props: {
   p?: keyof typeof spacing;
   px?: keyof typeof spacing;
   py?: keyof typeof spacing;
+  pb?: keyof typeof spacing;
+  pt?: keyof typeof spacing;
   relative?: boolean;
   scrollY?: boolean;
   color?: keyof Theme["colors"];
   debug?: boolean;
   bg?: keyof Theme["colors"];
   borderColor?: keyof Theme["colors"];
+  className?: string;
 }) {
   const styles: React.CSSProperties = {};
 
@@ -156,6 +161,14 @@ export function Container(props: {
     styles.paddingBottom = spacing[props.py];
   }
 
+  if (props.pb) {
+    styles.paddingBottom = spacing[props.pb];
+  }
+
+  if (props.pt) {
+    styles.paddingTop = spacing[props.pt];
+  }
+
   if (props.debug) {
     styles.outline = "1px solid red";
     styles.outlineOffset = "-1px";
@@ -168,6 +181,7 @@ export function Container(props: {
       color={props.color}
       data-animate={props.animate}
       data-scrolly={props.scrollY}
+      className={props.className}
       style={{
         ...styles,
         ...props.style,

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

@@ -9,7 +9,14 @@ import {
 import { StyledButton } from "../design-system/elements.js";
 
 type ButtonProps = {
-  variant: "primary" | "secondary" | "link" | "accent" | "outline" | "ghost";
+  variant:
+    | "primary"
+    | "secondary"
+    | "link"
+    | "accent"
+    | "outline"
+    | "ghost"
+    | "ghost-solid";
   unstyled?: boolean;
   fullWidth?: boolean;
   gap?: keyof typeof spacing;
@@ -65,6 +72,7 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
         case "secondary":
           return theme.colors.secondaryButtonText;
         case "ghost":
+        case "ghost-solid":
         case "outline":
           return theme.colors.secondaryButtonText;
         case "link":
@@ -109,6 +117,15 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
         };
       }
 
+      if (props.variant === "ghost-solid") {
+        return {
+          "&:hover": {
+            background: theme.colors.tertiaryBg,
+          },
+          border: "1px solid transparent",
+        };
+      }
+
       if (props.variant === "accent") {
         return {
           "&:hover": {

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

@@ -30,6 +30,7 @@ type InputProps = {
   variant: "outline" | "transparent";
   sm?: boolean;
   theme?: Theme;
+  bg?: keyof Theme["colors"];
 };
 
 export const Input = /* @__PURE__ */ StyledInput<InputProps>((props) => {
@@ -86,7 +87,7 @@ export const Input = /* @__PURE__ */ StyledInput<InputProps>((props) => {
         WebkitAppearance: "none",
       },
     appearance: "none",
-    background: "transparent",
+    background: props.bg ? theme.colors[props.bg] : "transparent",
     border: "none",
     borderRadius: radius.md,
     boxShadow: `0 0 0 1.5px ${

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

@@ -26,6 +26,7 @@ export const BackButton: React.FC<{
 }> = (props) => {
   return (
     <IconButton
+      className="tw-back-button"
       onClick={props.onClick}
       style={{ transform: "translateX(-25%)", ...props.style }}
       type="button"

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

@@ -12,6 +12,7 @@ export type TextProps = {
   weight?: 400 | 500 | 600 | 700;
   multiline?: boolean;
   balance?: boolean;
+  trackingTight?: boolean;
 };
 
 export const Text = /* @__PURE__ */ StyledSpan<TextProps>((p) => {
@@ -20,7 +21,7 @@ export const Text = /* @__PURE__ */ StyledSpan<TextProps>((p) => {
     color: theme.colors[p.color || "secondaryText"],
     display: p.inline ? "inline" : "block",
     fontSize: fontSize[p.size || "md"],
-    fontWeight: p.weight || 500,
+    fontWeight: p.weight || 400,
     lineHeight: p.multiline ? 1.5 : "normal",
     margin: 0,
     maxWidth: "100%",
@@ -28,6 +29,7 @@ export const Text = /* @__PURE__ */ StyledSpan<TextProps>((p) => {
     textAlign: p.center ? "center" : "left",
     textOverflow: "ellipsis",
     textWrap: p.balance ? "balance" : "inherit",
+    letterSpacing: p.trackingTight ? "-0.025em" : undefined,
   };
 });
 

package/src/react/web/utils/cls.ts

@@ -0,0 +1,13 @@
+/**
+ * @internal
+ * Utility for merging class names
+ *
+ * @example
+ * ```ts
+ * cls("foo", "bar", true, false, "baz") // "foo bar baz"
+ * cls('foo', someCondition && "bar") // "foo bar" or "foo"
+ * ```
+ */
+export function cls(...classes: (string | unknown)[]) {
+  return classes.filter((v) => typeof v === "string").join(" ");
+}

package/src/react/web/wallets/in-app/InputSelectionUI.tsx

@@ -14,6 +14,7 @@ import { CountrySelector, getCountrySelector } from "./CountrySelector.js";
 import type { SupportedSmsCountry } from "./supported-sms-countries.js";
 
 export function InputSelectionUI(props: {
+  className?: string;
   onSelect: (data: string) => void;
   placeholder: string;
   name: string;
@@ -63,6 +64,7 @@ export function InputSelectionUI(props: {
       }}
     >
       <InputContainer
+        className={props.className}
         data-error={renderingError}
         style={{
           display: "flex",