thirdweb 5.105.6-nightly-9f88b5c2beedd51730dbe4f2dfdd15e6bcb6e967-20250703000433 → 5.105.6-nightly-8def4f33f6502ac896012d46ff40ff5d9ea54f8f-20250705000408

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

@@ -1,4 +1,7 @@
+/** biome-ignore-all lint/nursery/useUniqueElementIds: "id" is not a html attribute here - TODO: stop using 'id' as a prop on JSX elements */
+
 "use client";
+
 import { ReloadIcon } from "@radix-ui/react-icons";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
@@ -130,7 +133,6 @@ export function WalletConnectReceiverScreen(props: {
       >
         <Container py="sm" style={{ position: "relative" }}>
           <Container py="md">
-            {/** biome-ignore lint/nursery/useUniqueElementIds: "id" is not a html attribute here - TODO: stop using 'id' as a prop on JSX elements */}
             <WalletLogoSpinner
               client={props.client}
               error={!!errorConnecting}

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

@@ -47,8 +47,8 @@ export const Modal: React.FC<{
       if (contentRef.current) {
         const animationConfig = {
           duration: modalCloseFadeOutDuration,
-          fill: "forwards",
           easing: "ease",
+          fill: "forwards",
         } as const;
 
         contentRef.current.animate([{ opacity: 0 }], {
@@ -70,7 +70,7 @@ export const Modal: React.FC<{
   }, [props.open]);
 
   return (
-    <Dialog.Root open={open} onOpenChange={props.setOpen}>
+    <Dialog.Root onOpenChange={props.setOpen} open={open}>
       {/* Trigger */}
       {props.trigger && (
         <Dialog.Trigger asChild>{props.trigger}</Dialog.Trigger>
@@ -86,12 +86,12 @@ export const Modal: React.FC<{
         )}
 
         <FocusScope trapped={!props.hide}>
-          <Dialog.Content asChild aria-describedby={undefined}>
+          <Dialog.Content aria-describedby={undefined} asChild>
             <DialogContent
               ref={contentRef}
               style={
                 props.hide
-                  ? { width: 0, height: 0, overflow: "hidden", opacity: 0 }
+                  ? { height: 0, opacity: 0, overflow: "hidden", width: 0 }
                   : {
                       height:
                         props.size === "compact" ? "auto" : wideModalMaxHeight,
@@ -105,15 +105,15 @@ export const Modal: React.FC<{
               {/* Mimics Tailwind's sr-only tag */}
               <Dialog.Title
                 style={{
-                  position: "absolute",
-                  width: "1px",
+                  borderWidth: 0,
+                  clip: "rect(0, 0, 0, 0)",
                   height: "1px",
-                  padding: 0,
                   margin: "-1px",
                   overflow: "hidden",
-                  clip: "rect(0, 0, 0, 0)",
+                  padding: 0,
+                  position: "absolute",
                   whiteSpace: "nowrap",
-                  borderWidth: 0,
+                  width: "1px",
                 }}
               >
                 Connect Modal
@@ -130,13 +130,13 @@ export const Modal: React.FC<{
               {!props.hideCloseIcon && (
                 <CrossContainer>
                   <Dialog.Close asChild>
-                    <IconButton autoFocus type="button" aria-label="Close">
+                    <IconButton aria-label="Close" autoFocus type="button">
                       <Cross2Icon
-                        width={iconSize.md}
                         height={iconSize.md}
                         style={{
                           color: "inherit",
                         }}
+                        width={iconSize.md}
                       />
                     </IconButton>
                   </Dialog.Close>
@@ -152,8 +152,8 @@ export const Modal: React.FC<{
 
 export const CrossContainer = /* @__PURE__ */ StyledDiv({
   position: "absolute",
-  top: spacing.lg,
   right: spacing.lg,
+  top: spacing.lg,
   transform: "translateX(6px)",
 });
 
@@ -183,39 +183,39 @@ const DialogContent = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
 
   return {
-    zIndex: 10000,
-    background: theme.colors.modalBg,
     "--bg": theme.colors.modalBg,
-    color: theme.colors.primaryText,
-    borderRadius: radius.lg,
-    position: "fixed",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    width: "calc(100vw - 40px)",
-    boxSizing: "border-box",
+    "& *": {
+      boxSizing: "border-box",
+    },
     animation: `${modalAnimationDesktop} 300ms ease`,
+    background: theme.colors.modalBg,
+    border: `1px solid ${theme.colors.borderColor}`,
+    borderRadius: radius.lg,
     boxShadow: shadow.lg,
+    boxSizing: "border-box",
+    color: theme.colors.primaryText,
+    fontFamily: theme.fontFamily,
+    left: "50%",
     lineHeight: "normal",
-    border: `1px solid ${theme.colors.borderColor}`,
     outline: "none",
     overflow: "hidden",
-    fontFamily: theme.fontFamily,
-    "& *": {
-      boxSizing: "border-box",
-    },
+    position: "fixed",
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+    width: "calc(100vw - 40px)",
+    zIndex: 10000,
     [media.mobile]: {
-      top: "auto",
+      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",
       right: 0,
+      top: "auto",
       transform: "none",
       width: "100vw",
-      animation: `${modalAnimationMobile} 0.35s cubic-bezier(0.15, 1.15, 0.6, 1)`,
-      borderRadius: radius.xl,
-      borderBottomRightRadius: 0,
-      borderBottomLeftRadius: 0,
-      maxWidth: "none !important",
     },
     "& *::selection": {
       backgroundColor: theme.colors.selectedTextBg,

package/src/react/web/ui/prebuilt/Wallet/icon.test.tsx

@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/nursery/useUniqueElementIds: "id" is not a html attribute here - TODO: stop using 'id' as a prop on JSX elements */
 import { describe, expect, it } from "vitest";
 import { render, waitFor } from "~test/react-render.js";
 import { fetchWalletImage } from "../../../../core/utils/walletIcon.js";
@@ -19,7 +20,6 @@ describe("WalletIcon", () => {
 
   it("should render an image", async () => {
     const { container } = render(
-      // biome-ignore lint/nursery/useUniqueElementIds: "id" is not a html attribute here - TODO: stop using 'id' as a prop on JSX elements
       <WalletProvider id="io.cosmostation">
         <WalletIcon />
       </WalletProvider>,

package/src/react/web/ui/prebuilt/Wallet/name.test.tsx

@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/nursery/useUniqueElementIds: FIXME: do not use "id" as a prop on JSX elements */
 import { describe, expect, it } from "vitest";
 import { render, waitFor } from "~test/react-render.js";
 import { getFunctionId } from "../../../../../utils/function-id.js";
@@ -47,7 +48,6 @@ describe.runIf(process.env.TW_SECRET_KEY)("WalletName", () => {
 
   it("should render a span", async () => {
     const { container } = render(
-      // biome-ignore lint/nursery/useUniqueElementIds: "id" is not a html attribute here - TODO: stop using 'id' as a prop on JSX elements
       <WalletProvider id="io.metamask">
         <WalletName />
       </WalletProvider>,

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

@@ -43,38 +43,36 @@ export function CountrySelector({
         ]);
 
   return (
-    <>
-      <Select
-        name="countries"
-        onChange={(e) => {
-          setCountryCode(e.target.value);
-        }}
-        ref={selectRef}
+    <Select
+      name="countries"
+      onChange={(e) => {
+        setCountryCode(e.target.value);
+      }}
+      ref={selectRef}
+      style={{
+        padding: `${spacing.sm} ${spacing.md}`,
+      }}
+      value={countryCode}
+    >
+      <Option
         style={{
-          padding: `${spacing.sm} ${spacing.md}`,
+          display: "none",
         }}
         value={countryCode}
       >
-        <Option
-          style={{
-            display: "none",
-          }}
-          value={countryCode}
-        >
-          {countryCode}
-        </Option>
-        {supportedCountriesForSms.map((country) => {
-          return (
-            <Option
-              key={country.countryIsoCode}
-              value={getCountrySelector(country.countryIsoCode)}
-            >
-              {country.countryName} +{country.phoneNumberCode}
-            </Option>
-          );
-        })}
-      </Select>
-    </>
+        {countryCode}
+      </Option>
+      {supportedCountriesForSms.map((country) => {
+        return (
+          <Option
+            key={country.countryIsoCode}
+            value={getCountrySelector(country.countryIsoCode)}
+          >
+            {country.countryName} +{country.phoneNumberCode}
+          </Option>
+        );
+      })}
+    </Select>
   );
 }
 

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.105.6-nightly-9f88b5c2beedd51730dbe4f2dfdd15e6bcb6e967-20250703000433";
+export const version = "5.105.6-nightly-8def4f33f6502ac896012d46ff40ff5d9ea54f8f-20250705000408";