Version Packages (#2261)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: GitHub Action <[email protected]>

packages/react-core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @thirdweb-dev/react-core
 
+## 4.4.6
+
+### Patch Changes
+
+- [#2270](https://github.com/thirdweb-dev/js/pull/2270) [`433d49e3`](https://github.com/thirdweb-dev/js/commit/433d49e3aba03df33678f429f19f426fd107b7eb) Thanks [@MananTank](https://github.com/MananTank)! - Keep the wallet states like signer, chainId, address in sync by setting their states at once synchronously
+
 ## 4.4.5
 
 ### Patch Changes

packages/react-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/react-core",
-  "version": "4.4.5",
+  "version": "4.4.6",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react-core",
   "author": "thirdweb eng <[email protected]>",
   "license": "Apache-2.0",

packages/react-core/src/core/providers/thirdweb-wallet-provider.tsx

@@ -90,6 +90,8 @@ type WalletSetupData = {
 };
 
 type ThirdwebWalletContextData = {
+  address: string | undefined;
+  chainId: number | undefined;
   wallets: WalletConfig[];
   signer?: Signer;
   activeWallet?: WalletInstance;
@@ -127,7 +129,7 @@ type ThirdwebWalletContextData = {
   isAutoConnecting: boolean;
 };
 
-const ThirdwebWalletContext = /* @__PURE__ */ createContext<
+export const ThirdwebWalletContext = /* @__PURE__ */ createContext<
   ThirdwebWalletContextData | undefined
 >(undefined);
 
@@ -221,17 +223,26 @@ function useWalletConnectionSetup(
       connectParams?: ConnectParams<Record<string, any>>,
       isAutoConnect = false,
     ) => {
-      setActiveWallet(wallet);
       const walletConfig = walletInstanceToConfig.get(wallet);
       if (!walletConfig) {
         throw new Error(
           "Wallet config not found for given wallet instance. Do not create a wallet instance manually - use the useCreateWalletInstance() hook instead",
         );
       }
+
+      const [_signer, _chainId, _address] = await Promise.all([
+        wallet.getSigner(),
+        wallet.getChainId(),
+        wallet.getAddress(),
+      ]);
+
+      // set states for the connected wallet
+      setActiveWallet(wallet);
+      setChainId(_chainId);
+      setWalletAddress(_address);
+      setSigner(_signer);
       setActiveWalletConfig(walletConfig);
       setConnectionStatus("connected");
-      const _signer = await wallet.getSigner();
-      setSigner(_signer);
 
       // if personal wallet exists, we need to replace the connectParams.personalWallet to a stringifiable version
       const personalWallet = wallet.getPersonalWallet() as AbstractClientWallet;
@@ -341,16 +352,14 @@ function useWalletConnectionSetup(
     [createWalletInstance, setConnectedWallet, chainToConnect],
   );
 
-  const onWalletDisconnect = useCallback(async () => {
-    await lastConnectedWalletStorage.removeItem(
-      LAST_CONNECTED_WALLET_STORAGE_KEY,
-    );
+  const onWalletDisconnect = useCallback(() => {
     setConnectionStatus("disconnected");
     setSigner(undefined);
     setActiveWallet(undefined);
     setActiveWalletConfig(undefined);
     setChainId(undefined);
     setWalletAddress(undefined);
+    lastConnectedWalletStorage.removeItem(LAST_CONNECTED_WALLET_STORAGE_KEY);
   }, []);
 
   const disconnectWallet = useCallback(async () => {
@@ -360,14 +369,13 @@ function useWalletConnectionSetup(
       return;
     }
 
+    onWalletDisconnect();
     const personalWallet = activeWallet.getPersonalWallet();
     await activeWallet.disconnect();
 
     if (personalWallet) {
       await (personalWallet as AbstractClientWallet)?.disconnect();
     }
-
-    onWalletDisconnect();
   }, [activeWallet, onWalletDisconnect]);
 
   // handle wallet change event
@@ -380,9 +388,15 @@ function useWalletConnectionSetup(
     }
 
     const update = async () => {
-      activeWallet.getSigner().then(setSigner);
-      activeWallet.getChainId().then(setChainId);
-      activeWallet.getAddress().then(setWalletAddress);
+      Promise.all([
+        activeWallet.getSigner(),
+        activeWallet.getChainId(),
+        activeWallet.getAddress(),
+      ]).then(([_signer, _chainId, _address]) => {
+        setSigner(_signer);
+        setChainId(_chainId);
+        setWalletAddress(_address);
+      });
     };
 
     update();
@@ -459,6 +473,8 @@ export function ThirdwebWalletProvider(
     switchChain,
     connectWallet,
     disconnectWallet,
+    address,
+    chainId,
   } = useWalletConnectionSetup(walletSetupData, {
     connectionStatus: "unknown",
   });
@@ -713,6 +729,8 @@ export function ThirdwebWalletProvider(
   return (
     <ThirdwebWalletContext.Provider
       value={{
+        address,
+        chainId,
         disconnect: disconnectWallet,
         wallets: props.supportedWallets,
         connect: connectWallet,

packages/react-core/src/evm/hooks/useSigner.ts

@@ -2,6 +2,7 @@ import { useContext } from "react";
 import { ThirdwebConnectedWalletContext } from "../contexts/thirdweb-wallet";
 import type { Signer } from "ethers";
 import invariant from "tiny-invariant";
+import { ThirdwebWalletContext } from "../../core/providers/thirdweb-wallet-provider";
 
 /**
  * Hook for getting the [ethers signer](https://docs.ethers.org/v5/api/signer/) of the connected wallet.
@@ -24,9 +25,17 @@ import invariant from "tiny-invariant";
  */
 export function useSigner(): Signer | undefined {
   const context = useContext(ThirdwebConnectedWalletContext);
+  const walletCtx = useContext(ThirdwebWalletContext);
+
+  // if ThirdwebWalletContext is present, use the signer from there because signer from ThirdwebConnectedWalletContext also uses that signer but it lags behind
+  // walletCtx is undefined if only ThirdwebSDKProvider is used
+  if (walletCtx) {
+    return walletCtx.signer;
+  }
+
   invariant(
     context,
-    "useSigner() hook must be used within a <ThirdwebProvider/>",
+    "useSigner() hook must be used within a <ThirdwebProvider/> or <ThirdwebSDKProvider/> component",
   );
   return context.signer;
 }

packages/react-core/src/evm/hooks/wallet.ts

@@ -10,7 +10,10 @@ import { UseQueryResult, useQuery } from "@tanstack/react-query";
 import { Chain, defaultChains } from "@thirdweb-dev/chains";
 import { useContext, useMemo } from "react";
 import { useSDK } from "./useSDK";
-import { useWalletContext } from "../../core/providers/thirdweb-wallet-provider";
+import {
+  ThirdwebWalletContext,
+  useWalletContext,
+} from "../../core/providers/thirdweb-wallet-provider";
 import { BigNumber } from "ethers";
 
 /**
@@ -151,6 +154,14 @@ export function useConnectedWallet() {
  */
 export function useAddress(): string | undefined {
   const context = useContext(ThirdwebConnectedWalletContext);
+  const walletCtx = useContext(ThirdwebWalletContext);
+
+  // if ThirdwebWalletContext is present, use the address from there because address from ThirdwebConnectedWalletContext also uses that address but it lags behind
+  // walletCtx is undefined if only ThirdwebSDKProvider is used
+  if (walletCtx) {
+    return walletCtx.address;
+  }
+
   invariant(
     context,
     "useAddress() hook must be used within a <ThirdwebProvider/>",
@@ -185,9 +196,17 @@ export function useAddress(): string | undefined {
  */
 export function useChainId(): number | undefined {
   const context = useContext(ThirdwebConnectedWalletContext);
+  const walletCtx = useContext(ThirdwebWalletContext);
+
+  // if ThirdwebWalletContext is present, use the chainId from there because chainId from ThirdwebConnectedWalletContext also uses that chainId but it lags behind
+  // walletCtx is undefined if only ThirdwebSDKProvider is used
+  if (walletCtx) {
+    return walletCtx.chainId;
+  }
+
   invariant(
     context,
-    "useChainId() hook must be used within a <ThirdwebProvider/>",
+    "useChainId() hook must be used within a <ThirdwebProvider/> or <ThirdwebSDKProvider/> component",
   );
   return context.chainId;
 }

packages/react-native-compat/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @thirdweb-dev/react-native-compat
 
+## 0.7.3
+
 ## 0.7.2
 
 ## 0.7.1

packages/react-native-compat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@thirdweb-dev/react-native-compat",
   "description": "Shims for Thirdweb in React Native Projects",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "author": "thirdweb eng <[email protected]>",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react-native-compat",
   "license": "Apache-2.0",

packages/react-native/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @thirdweb-dev/react-native
 
+## 0.7.3
+
+### Patch Changes
+
+- Updated dependencies [[`433d49e3`](https://github.com/thirdweb-dev/js/commit/433d49e3aba03df33678f429f19f426fd107b7eb)]:
+  - @thirdweb-dev/react-core@4.4.6
+
 ## 0.7.2
 
 ### Patch Changes

packages/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/react-native",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react-native",
   "author": "thirdweb eng <[email protected]>",
   "license": "Apache-2.0",

packages/react/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @thirdweb-dev/react
 
+## 4.4.6
+
+### Patch Changes
+
+- [#2260](https://github.com/thirdweb-dev/js/pull/2260) [`6a3cacb6`](https://github.com/thirdweb-dev/js/commit/6a3cacb62257c1774b5bac739b89e17495f42655) Thanks [@MananTank](https://github.com/MananTank)! - Enforce compact modal size in ConnectWallet based on available space instead of just on mobile device
+
+- Updated dependencies [[`433d49e3`](https://github.com/thirdweb-dev/js/commit/433d49e3aba03df33678f429f19f426fd107b7eb)]:
+  - @thirdweb-dev/react-core@4.4.6
+
 ## 4.4.5
 
 ### Patch Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/react",
-  "version": "4.4.5",
+  "version": "4.4.6",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react",
   "author": "thirdweb eng <[email protected]>",
   "license": "Apache-2.0",

packages/react/src/evm/providers/wallet-ui-states-provider.tsx

@@ -1,8 +1,8 @@
 import { useState, createContext, useContext } from "react";
-import { isMobile } from "../utils/isMobile";
 import { Theme } from "../../design-system";
 import { WelcomeScreen } from "../../wallet/ConnectWallet/screens/types";
 import { useTWLocale } from "./locale-provider";
+import { canFitWideModal } from "../utils/canFitWIdeModal";
 
 type BoolSetter = (value: boolean) => void;
 
@@ -59,14 +59,14 @@ export const WalletUIStatesProvider = (
   }>,
 ) => {
   const [isWalletModalOpen, setIsWalletModalOpen] = useState(false);
-  const _isMobile = isMobile();
+  const enforceCompact = !canFitWideModal();
   const locale = useTWLocale();
 
   const [modalConfig, setModalConfig] = useState<ModalConfig>({
     title: props.title || locale.connectWallet.defaultModalTitle,
     theme: props.theme || "dark",
     data: undefined,
-    modalSize: (_isMobile ? "compact" : props.modalSize) || "wide",
+    modalSize: (enforceCompact ? "compact" : props.modalSize) || "wide",
     termsOfServiceUrl: props.termsOfServiceUrl,
     privacyPolicyUrl: props.privacyPolicyUrl,
     welcomeScreen: props.welcomeScreen,
@@ -405,7 +405,7 @@ export type ModalConfigOptions = {
  */
 export const useSetWalletModalConfig = () => {
   const context = useContext(SetModalConfigCtx);
-  const _isMobile = isMobile();
+  const enforceCompact = !canFitWideModal();
   const locale = useTWLocale();
 
   if (context === undefined) {
@@ -419,7 +419,7 @@ export const useSetWalletModalConfig = () => {
       title: title || locale.connectWallet.defaultModalTitle,
       data: undefined,
       theme: theme || "dark",
-      modalSize: (_isMobile ? "compact" : modalSize) || "wide",
+      modalSize: (enforceCompact ? "compact" : modalSize) || "wide",
       ...rest,
     });
   };

packages/react/src/evm/utils/canFitWIdeModal.ts

@@ -0,0 +1,12 @@
+import { wideModalScreenThreshold } from "../../wallet/ConnectWallet/constants";
+
+/**
+ * Return true if the current screen size can fit the the wide connect modal
+ * @internal
+ */
+export function canFitWideModal(): boolean {
+  if (typeof window !== "undefined") {
+    return window.innerWidth >= wideModalScreenThreshold;
+  }
+  return false;
+}

packages/react/src/wallet/ConnectWallet/ConnectWallet.tsx

@@ -21,7 +21,6 @@ import { Button } from "../../components/buttons";
 import { Spinner } from "../../components/Spinner";
 import styled from "@emotion/styled";
 import type { NetworkSelectorProps } from "./NetworkSelector";
-import { isMobile } from "../../evm/utils/isMobile";
 import {
   CustomThemeProvider,
   useCustomTheme,
@@ -34,6 +33,7 @@ import { LockIcon } from "./icons/LockIcon";
 import { SignatureScreen } from "./SignatureScreen";
 import { Modal } from "../../components/Modal";
 import { useTWLocale } from "../../evm/providers/locale-provider";
+import { canFitWideModal } from "../../evm/utils/canFitWIdeModal";
 
 export type ConnectWalletProps = {
   /**
@@ -691,7 +691,7 @@ export function ConnectWallet(props: ConnectWalletProps) {
               onClick={() => {
                 let modalSize = props.modalSize || "wide";
 
-                if (isMobile() || walletConfigs.length === 1) {
+                if (!canFitWideModal() || walletConfigs.length === 1) {
                   modalSize = "compact";
                 }
 

packages/react/src/wallet/ConnectWallet/Modal/ConnectEmbed.tsx

@@ -9,7 +9,6 @@ import {
 } from "../constants";
 import { ConnectModalContent } from "./ConnectModal";
 import { useScreen } from "./screen";
-import { isMobile } from "../../../evm/utils/isMobile";
 import { DynamicHeight } from "../../../components/DynamicHeight";
 import {
   CustomThemeProvider,
@@ -28,6 +27,7 @@ import {
 } from "@thirdweb-dev/react-core";
 import { Container } from "../../../components/basic";
 import { Spinner } from "../../../components/Spinner";
+import { canFitWideModal } from "../../../evm/utils/canFitWIdeModal";
 
 export type ConnectEmbedProps = {
   /**
@@ -397,7 +397,7 @@ export function SyncedWalletUIStates(
       ...c,
       title: props.title || locale.connectWallet.defaultModalTitle,
       theme: props.theme || "dark",
-      modalSize: (isMobile() ? "compact" : props.modalSize) || "wide",
+      modalSize: (!canFitWideModal() ? "compact" : props.modalSize) || "wide",
       termsOfServiceUrl: props.termsOfServiceUrl,
       privacyPolicyUrl: props.privacyPolicyUrl,
       welcomeScreen: props.welcomeScreen,

packages/react/src/wallet/ConnectWallet/Modal/ConnectModalInline.tsx

@@ -10,7 +10,6 @@ import {
 } from "../constants";
 import { ConnectModalContent } from "./ConnectModal";
 import { useScreen } from "./screen";
-import { isMobile } from "../../../evm/utils/isMobile";
 import { useWallets } from "@thirdweb-dev/react-core";
 import { DynamicHeight } from "../../../components/DynamicHeight";
 import {
@@ -20,6 +19,7 @@ import {
 import { StyledDiv } from "../../../design-system/elements";
 import { SyncedWalletUIStates } from "./ConnectEmbed";
 import { WelcomeScreen } from "../screens/types";
+import { canFitWideModal } from "../../../evm/utils/canFitWIdeModal";
 
 /**
  * @internal
@@ -79,7 +79,9 @@ export const ConnectModalInline = (props: ConnectModalInlineProps) => {
   const { screen, setScreen, initialScreen } = useScreen();
   const walletConfigs = useWallets();
   const modalSize =
-    isMobile() || walletConfigs.length === 1 ? "compact" : props.modalSize;
+    !canFitWideModal() || walletConfigs.length === 1
+      ? "compact"
+      : props.modalSize;
   const ctxTheme = useCustomTheme();
 
   const content = (

packages/react/src/wallet/ConnectWallet/constants.ts

@@ -5,7 +5,10 @@ export const reservedScreens = {
 };
 
 export const modalMaxWidthCompact = "360px";
-export const modalMaxWidthWide = "730px";
+
+const wideModalWidth = 730;
+export const modalMaxWidthWide = wideModalWidth + "px";
+export const wideModalScreenThreshold = wideModalWidth + 40;
 
 export const wideModalMaxHeight = "570px";
 export const compactModalMaxHeight = "600px";

packages/service-utils/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @thirdweb-dev/service-utils
 
+## 0.4.15
+
+### Patch Changes
+
+- [#2266](https://github.com/thirdweb-dev/js/pull/2266) [`5a3f7fa1`](https://github.com/thirdweb-dev/js/commit/5a3f7fa12361f5c0c90acccdd129aed37825e9ab) Thanks [@joaquim-verges](https://github.com/joaquim-verges)! - Add latency prop to logHttpRequest
+
 ## 0.4.14
 
 ### Patch Changes

packages/service-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/service-utils",
-  "version": "0.4.14",
+  "version": "0.4.15",
   "main": "dist/thirdweb-dev-service-utils.cjs.js",
   "module": "dist/thirdweb-dev-service-utils.esm.js",
   "exports": {

packages/service-utils/src/node/index.ts

@@ -183,11 +183,13 @@ export function logHttpRequest({
   res,
   isAuthed,
   statusMessage,
+  latencyMs,
 }: AuthInput & {
   source: string;
   res: ServerResponse;
   isAuthed?: boolean;
   statusMessage?: Error | string;
+  latencyMs?: number;
 }) {
   try {
     const authorizationData = extractAuthorizationData({ req, clientId });
@@ -208,6 +210,8 @@ export function logHttpRequest({
         sdkName: headers["x-sdk-name"] ?? "unknown",
         sdkVersion: headers["x-sdk-version"] ?? "unknown",
         platform: headers["x-sdk-platform"] ?? "unknown",
+        os: headers["x-sdk-os"] ?? "unknown",
+        latencyMs: latencyMs ?? null,
       }),
     );
     console.log(`statusMessage=${_statusMessage}`);

packages/unity-js-bridge/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @thirdweb-dev/unity-js-bridge
 
+## 0.3.14
+
+### Patch Changes
+
+- [#2268](https://github.com/thirdweb-dev/js/pull/2268) [`3857cba8`](https://github.com/thirdweb-dev/js/commit/3857cba8ab3aad04744121d1a94d4a1893142bbc) Thanks [@0xFirekeeper](https://github.com/0xFirekeeper)! - Unity v4.6.1
+
 ## 0.3.13
 
 ### Patch Changes

packages/unity-js-bridge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/unity-js-bridge",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "main": "dist/thirdweb-unity-bridge.js",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/unity-js-bridge",
   "license": "Apache-2.0",

packages/unity-js-bridge/src/thirdweb-bridge.ts

@@ -143,7 +143,7 @@ class ThirdwebBridge implements TWBridge {
       }
       (globalThis as any).X_SDK_NAME = "UnitySDK_WebGL";
       (globalThis as any).X_SDK_PLATFORM = "unity";
-      (globalThis as any).X_SDK_VERSION = "4.6.0";
+      (globalThis as any).X_SDK_VERSION = "4.6.1";
       (globalThis as any).X_SDK_OS = browser?.os ?? "unknown";
     }
     this.initializedChain = chain;