thirdweb 5.32.2-nightly-229561e1a79fe2ab3f010c5a8659c7e0fc497ec3-20240703090013 → 5.32.2

package/src/react/web/ui/PayEmbed.tsx

@@ -7,20 +7,19 @@ import type { Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../wallets/types.js";
 import { CustomThemeProvider } from "../../core/design-system/CustomThemeProvider.js";
-import { type Theme, radius } from "../../core/design-system/index.js";
+import type { Theme } from "../../core/design-system/index.js";
 import type { SiweAuthOptions } from "../../core/hooks/auth/useSiweAuth.js";
 import type {
   ConnectButton_connectModalOptions,
   PayUIOptions,
 } from "../../core/hooks/connection/ConnectButtonProps.js";
 import type { SupportedTokens } from "../../core/utils/defaultTokens.js";
-import { ConnectButton } from "./ConnectWallet/ConnectButton.js";
+import { EmbedContainer } from "./ConnectWallet/Modal/ConnectEmbed.js";
 import { useConnectLocale } from "./ConnectWallet/locale/getConnectLocale.js";
 import BuyScreen from "./ConnectWallet/screens/Buy/BuyScreen.js";
 import { BuyTxHistory } from "./ConnectWallet/screens/Buy/tx-history/BuyTxHistory.js";
 import { DynamicHeight } from "./components/DynamicHeight.js";
 import { Spinner } from "./components/Spinner.js";
-import { Container } from "./components/basic.js";
 import type { LocaleId } from "./types.js";
 
 /**
@@ -188,18 +187,9 @@ export function PayEmbed(props: PayEmbedProps) {
             onDone={() => {
               // noop
             }}
-            connectButton={
-              <ConnectButton
-                {...props.connectOptions}
-                client={props.client}
-                connectButton={{
-                  style: {
-                    width: "100%",
-                  },
-                }}
-                theme={theme}
-              />
-            }
+            connectOptions={props.connectOptions}
+            buyForTx={undefined}
+            onBack={undefined}
           />
         </div>
         {/* this does not need to persist so we can just show-hide it with JS */}
@@ -222,21 +212,9 @@ export function PayEmbed(props: PayEmbedProps) {
 
   return (
     <CustomThemeProvider theme={theme}>
-      <Container
-        bg="modalBg"
-        style={{
-          borderRadius: radius.lg,
-          minWidth: "360px",
-          borderWidth: "1px",
-          borderStyle: "solid",
-          position: "relative",
-          overflow: "hidden",
-          ...props.style,
-        }}
-        borderColor="borderColor"
-      >
+      <EmbedContainer modalSize="compact">
         <DynamicHeight>{content}</DynamicHeight>
-      </Container>
+      </EmbedContainer>
     </CustomThemeProvider>
   );
 }

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

@@ -33,7 +33,11 @@ export const CopyIcon: React.FC<{
     >
       <ToolTip tip={props.tip} side={props.side} align={props.align}>
         <div>
-          <Container color={showCheckIcon ? "success" : undefined}>
+          <Container
+            color={showCheckIcon ? "success" : undefined}
+            flex="row"
+            center="both"
+          >
             {showCheckIcon ? <CheckIcon /> : <CopyIconSVG />}
           </Container>
         </div>

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

@@ -1,16 +1,20 @@
 "use client";
 import { keyframes } from "@emotion/react";
 import { Cross2Icon } from "@radix-ui/react-icons";
-import { forwardRef, useRef } from "react";
-import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import {
-  iconSize,
-  radius,
-  spacing,
-} from "../../../core/design-system/index.js";
+  forwardRef,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
+import { iconSize, radius } from "../../../core/design-system/index.js";
 import { fadeInAnimation } from "../design-system/animations.js";
 import { StyledDiv } from "../design-system/elements.js";
+import { DynamicHeight } from "./DynamicHeight.js";
 import { CrossContainer } from "./Modal.js";
+import { Container } from "./basic.js";
 import { IconButton } from "./buttons.js";
 
 type DrawerProps = {
@@ -24,23 +28,29 @@ type DrawerProps = {
 export const Drawer = /* @__PURE__ */ forwardRef<HTMLDivElement, DrawerProps>(
   function Drawer_(props, ref) {
     return (
-      <>
-        <DrawerContainer ref={ref}>
-          <CrossContainer>
-            <IconButton type="button" aria-label="Close" onClick={props.close}>
-              <Cross2Icon
-                width={iconSize.md}
-                height={iconSize.md}
-                style={{
-                  color: "inherit",
-                }}
-              />
-            </IconButton>
-          </CrossContainer>
+      <DrawerContainer ref={ref}>
+        <DynamicHeight>
+          <Container p="lg">
+            <CrossContainer>
+              <IconButton
+                type="button"
+                aria-label="Close"
+                onClick={props.close}
+              >
+                <Cross2Icon
+                  width={iconSize.md}
+                  height={iconSize.md}
+                  style={{
+                    color: "inherit",
+                  }}
+                />
+              </IconButton>
+            </CrossContainer>
 
-          {props.children}
-        </DrawerContainer>
-      </>
+            {props.children}
+          </Container>
+        </DynamicHeight>
+      </DrawerContainer>
     );
   },
 );
@@ -49,7 +59,6 @@ export const DrawerContainer = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   return {
     zIndex: 10000,
-    padding: spacing.lg,
     borderTopLeftRadius: radius.xl,
     borderTopRightRadius: radius.xl,
     background: theme.colors.modalBg,
@@ -89,32 +98,74 @@ export const DrawerOverlay = /* @__PURE__ */ StyledDiv((_) => {
  * @internal
  */
 export function useDrawer() {
+  const [isOpen, _setIsOpen] = useState(false);
   const drawerRef = useRef<HTMLDivElement>(null);
   const drawerOverlayRef = useRef<HTMLDivElement>(null);
 
-  const onClose = (closeDrawer: () => void) => {
-    if (drawerRef.current) {
-      const animOptions = {
-        easing: "cubic-bezier(0.175, 0.885, 0.32, 1.1)",
-        fill: "forwards",
-        duration: 300,
-      } as const;
+  const closeDrawerAnimation = useCallback(() => {
+    return new Promise<void>((resolve) => {
+      if (drawerRef.current) {
+        const animOptions = {
+          easing: "cubic-bezier(0.175, 0.885, 0.32, 1.1)",
+          fill: "forwards",
+          duration: 300,
+        } as const;
+
+        const closeAnimation = drawerRef.current.animate(
+          [{ transform: "translateY(100%)", opacity: 0 }],
+          animOptions,
+        );
+
+        drawerOverlayRef.current?.animate([{ opacity: 0 }], animOptions);
+        closeAnimation.onfinish = () => resolve();
+      } else {
+        resolve();
+      }
+    });
+  }, []);
 
-      const closeAnimation = drawerRef.current.animate(
-        [{ transform: "translateY(100%)", opacity: 0 }],
-        animOptions,
-      );
+  const setIsOpen = useCallback(
+    async (value: boolean) => {
+      if (value) {
+        _setIsOpen(true);
+      } else {
+        await closeDrawerAnimation();
+        _setIsOpen(false);
+      }
+    },
+    [closeDrawerAnimation],
+  );
 
-      drawerOverlayRef.current?.animate([{ opacity: 0 }], animOptions);
-      closeAnimation.onfinish = closeDrawer;
-    } else {
-      closeDrawer();
+  // close on outside click
+  useLayoutEffect(() => {
+    if (!isOpen) {
+      return;
     }
-  };
+
+    const handleClick = (event: MouseEvent) => {
+      if (
+        drawerRef.current &&
+        event.target instanceof Node &&
+        !drawerRef.current.contains(event.target)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    // avoid listening to the click event that opened the drawer by adding a frame delay
+    requestAnimationFrame(() => {
+      document.addEventListener("click", handleClick);
+    });
+
+    return () => {
+      document.removeEventListener("click", handleClick);
+    };
+  }, [isOpen, setIsOpen]);
 
   return {
     drawerRef,
     drawerOverlayRef,
-    onClose,
+    setIsOpen,
+    isOpen,
   };
 }

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

@@ -1,17 +1,14 @@
 import { useState } from "react";
-import type { Chain } from "../../../../chains/types.js";
-import { useSwitchActiveWalletChain } from "../../hooks/wallets/useSwitchActiveWalletChain.js";
 import { Spinner } from "./Spinner.js";
 import { Button, type ButtonProps } from "./buttons.js";
 
 export function SwitchNetworkButton(
   props: ButtonProps & {
-    chain: Chain;
     fullWidth?: boolean;
+    switchChain: () => Promise<void>;
   },
 ) {
   const [isSwitching, setIsSwitching] = useState(false);
-  const switchActiveWalletChain = useSwitchActiveWalletChain();
 
   return (
     <Button
@@ -20,7 +17,7 @@ export function SwitchNetworkButton(
       onClick={async () => {
         setIsSwitching(true);
         try {
-          await switchActiveWalletChain(props.chain);
+          await props.switchChain();
         } catch {}
         setIsSwitching(false);
       }}

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

@@ -30,6 +30,7 @@ export function WalletImage(props: {
   id: WalletId;
   size: string;
   client: ThirdwebClient;
+  style?: React.CSSProperties;
 }) {
   const [image, setImage] = useState<string | undefined>(undefined);
   const activeWallet = useActiveWallet();
@@ -102,6 +103,7 @@ export function WalletImage(props: {
         client={props.client}
         style={{
           borderRadius: radius.md,
+          ...props.style,
         }}
       />
     );

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

@@ -63,6 +63,7 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
           return theme.colors.accentButtonText;
         case "secondary":
           return theme.colors.secondaryButtonText;
+        case "ghost":
         case "outline":
           return theme.colors.secondaryButtonText;
         case "link":
@@ -140,7 +141,7 @@ export const IconButton = /* @__PURE__ */ StyledButton((_) => {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: radius.lg,
+    borderRadius: radius.md,
     WebkitTapHighlightColor: "transparent",
     color: theme.colors.secondaryIconColor,
     padding: "2px",
@@ -149,6 +150,9 @@ export const IconButton = /* @__PURE__ */ StyledButton((_) => {
       background: theme.colors.secondaryIconHoverBg,
       color: theme.colors.secondaryIconHoverColor,
     },
+    "&[disabled]": {
+      cursor: "not-allowed",
+    },
   };
 });
 

package/src/react/web/wallets/ecosystem/EcosystemWalletConnectUI.tsx

@@ -8,7 +8,6 @@ import {
   useSetSelectionData,
 } from "../../providers/wallet-ui-states-provider.js";
 import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
-import type { LocaleId } from "../../ui/types.js";
 import { useInAppWalletLocale } from "../in-app/useInAppWalletLocale.js";
 import type { ConnectWalletSelectUIState } from "../shared/ConnectWalletSocialOptions.js";
 import { LoadingScreen } from "../shared/LoadingScreen.js";
@@ -27,7 +26,6 @@ function EcosystemWalletConnectUI(props: {
   goBack?: () => void;
   client: ThirdwebClient;
   chain: Chain | undefined;
-  localeId: LocaleId;
   connectLocale: ConnectLocale;
   size: "compact" | "wide";
   meta: {
@@ -41,7 +39,8 @@ function EcosystemWalletConnectUI(props: {
   const data = useSelectionData();
   const setSelectionData = useSetSelectionData();
   const state = data as ConnectWalletSelectUIState;
-  const locale = useInAppWalletLocale(props.localeId);
+  const localeId = props.connectLocale.id;
+  const locale = useInAppWalletLocale(localeId);
 
   if (!locale) {
     return <LoadingScreen />;

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

@@ -8,7 +8,6 @@ import {
 } from "../../providers/wallet-ui-states-provider.js";
 import { useScreenContext } from "../../ui/ConnectWallet/Modal/screen.js";
 import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
-import type { LocaleId } from "../../ui/types.js";
 import type { ConnectWalletSelectUIState } from "../shared/ConnectWalletSocialOptions.js";
 import { LoadingScreen } from "../shared/LoadingScreen.js";
 import { OTPLoginUI } from "../shared/OTPLoginUI.js";
@@ -35,13 +34,13 @@ function InAppWalletConnectUI(props: {
   };
   client: ThirdwebClient;
   chain: Chain | undefined;
-  localeId: LocaleId;
   connectLocale: ConnectLocale;
 }) {
   const data = useSelectionData();
   const setSelectionData = useSetSelectionData();
   const state = data as ConnectWalletSelectUIState;
-  const locale = useInAppWalletLocale(props.localeId);
+  const localeId = props.connectLocale.id;
+  const locale = useInAppWalletLocale(localeId);
   const { initialScreen } = useScreenContext();
 
   if (!locale) {

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

@@ -7,7 +7,6 @@ import { useScreenContext } from "../../ui/ConnectWallet/Modal/screen.js";
 import { WalletEntryButton } from "../../ui/ConnectWallet/WalletEntryButton.js";
 import { reservedScreens } from "../../ui/ConnectWallet/constants.js";
 import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
-import type { LocaleId } from "../../ui/types.js";
 import { ConnectWalletSocialOptions } from "../shared/ConnectWalletSocialOptions.js";
 import { LoadingScreen } from "../shared/LoadingScreen.js";
 import { useInAppWalletLocale } from "./useInAppWalletLocale.js";
@@ -25,12 +24,11 @@ function InAppWalletSelectionUI(props: {
   client: ThirdwebClient;
   recommendedWallets: Wallet[] | undefined;
   chain: Chain | undefined;
-  localeId: LocaleId;
   size: "compact" | "wide";
 }) {
   const { screen } = useScreenContext();
   const setData = useSetSelectionData();
-  const locale = useInAppWalletLocale(props.localeId);
+  const locale = useInAppWalletLocale(props.connectLocale.id);
 
   // do not show the "selectUI" if
   // modal is compact or
@@ -49,6 +47,8 @@ function InAppWalletSelectionUI(props: {
         client={props.client}
         connectLocale={props.connectLocale}
         recommendedWallets={props.recommendedWallets}
+        isActive={screen === props.wallet}
+        badge={undefined}
       />
     );
   }

package/src/utils/format-number.test.ts

@@ -1,12 +1,27 @@
-import { describe, expect, it } from "vitest";
+import { expect, test } from "vitest";
 import { formatNumber } from "./formatNumber.js";
 
-describe("formatNumber", () => {
-  it("should return the correct number when passing a float", () => {
-    expect(formatNumber(10.12345, 1)).toEqual(10.1);
-  });
+test("formatNumber", () => {
+  // no decimals
+  expect(formatNumber(10, 1)).toEqual(10);
+  expect(formatNumber(10, 3)).toEqual(10);
 
-  it("should return the correct number when passing an integer", () => {
-    expect(formatNumber(10, 1)).toEqual(10);
-  });
+  // no change
+  expect(formatNumber(0.002, 3)).toEqual(0.002);
+  expect(formatNumber(0.007, 3)).toEqual(0.007);
+  expect(formatNumber(10.123, 3)).toEqual(10.123);
+
+  // rounded
+  expect(formatNumber(10.12345, 1)).toEqual(10.1);
+  expect(formatNumber(10.49, 1)).toEqual(10.5);
+  expect(formatNumber(0.12345, 1)).toEqual(0.1);
+  expect(formatNumber(0.16345, 1)).toEqual(0.2);
+  expect(formatNumber(0.16345, 3)).toEqual(0.163);
+  expect(formatNumber(0.16395, 3)).toEqual(0.164);
+  expect(formatNumber(1.0000000005, 3)).toEqual(1);
+
+  // ceil-ed to avoid making value zero
+  expect(formatNumber(0.0004, 3)).toEqual(0.001);
+  expect(formatNumber(0.00000000000009, 3)).toEqual(0.001);
+  expect(formatNumber(0.00000000000001, 3)).toEqual(0.001);
 });

package/src/utils/formatNumber.ts

@@ -2,5 +2,8 @@
  * @internal
  */
 export function formatNumber(value: number, decimalPlaces: number) {
-  return Number(value.toFixed(decimalPlaces));
+  const precision = 10 ** decimalPlaces;
+  const threshold = 1 / 10 ** decimalPlaces; // anything below this if rounded will result in zero - so use ceil instead
+  const fn: "ceil" | "round" = value < threshold ? "ceil" : "round";
+  return Math[fn]((value + Number.EPSILON) * precision) / precision;
 }

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.32.2-nightly-229561e1a79fe2ab3f010c5a8659c7e0fc497ec3-20240703090013";
+export const version = "5.32.2";