thirdweb 5.44.2-nightly-7c2f616dfe6880beefa4eb48f8dcbce6bba9461a-20240808000401 → 5.45.0

package/src/extensions/vote/__generated__/Vote/write/setVotingPeriod.ts

@@ -0,0 +1,143 @@
+import type { AbiParameterToPrimitiveType } from "abitype";
+import type {
+  BaseTransactionOptions,
+  WithOverrides,
+} from "../../../../../transaction/types.js";
+import { prepareContractCall } from "../../../../../transaction/prepare-contract-call.js";
+import { encodeAbiParameters } from "../../../../../utils/abi/encodeAbiParameters.js";
+import { once } from "../../../../../utils/promise/once.js";
+import type { ThirdwebContract } from "../../../../../contract/contract.js";
+import { detectMethod } from "../../../../../utils/bytecode/detectExtension.js";
+
+/**
+ * Represents the parameters for the "setVotingPeriod" function.
+ */
+export type SetVotingPeriodParams = WithOverrides<{
+  newVotingPeriod: AbiParameterToPrimitiveType<{
+    type: "uint256";
+    name: "newVotingPeriod";
+  }>;
+}>;
+
+export const FN_SELECTOR = "0xea0217cf" as const;
+const FN_INPUTS = [
+  {
+    type: "uint256",
+    name: "newVotingPeriod",
+  },
+] as const;
+const FN_OUTPUTS = [] as const;
+
+/**
+ * Checks if the `setVotingPeriod` method is supported by the given contract.
+ * @param contract The ThirdwebContract.
+ * @returns A promise that resolves to a boolean indicating if the `setVotingPeriod` method is supported.
+ * @extension VOTE
+ * @example
+ * ```ts
+ * import { isSetVotingPeriodSupported } from "thirdweb/extensions/vote";
+ *
+ * const supported = await isSetVotingPeriodSupported(contract);
+ * ```
+ */
+export async function isSetVotingPeriodSupported(
+  contract: ThirdwebContract<any>,
+) {
+  return detectMethod({
+    contract,
+    method: [FN_SELECTOR, FN_INPUTS, FN_OUTPUTS] as const,
+  });
+}
+
+/**
+ * Encodes the parameters for the "setVotingPeriod" function.
+ * @param options - The options for the setVotingPeriod function.
+ * @returns The encoded ABI parameters.
+ * @extension VOTE
+ * @example
+ * ```ts
+ * import { encodeSetVotingPeriodParams } "thirdweb/extensions/vote";
+ * const result = encodeSetVotingPeriodParams({
+ *  newVotingPeriod: ...,
+ * });
+ * ```
+ */
+export function encodeSetVotingPeriodParams(options: SetVotingPeriodParams) {
+  return encodeAbiParameters(FN_INPUTS, [options.newVotingPeriod]);
+}
+
+/**
+ * Encodes the "setVotingPeriod" function into a Hex string with its parameters.
+ * @param options - The options for the setVotingPeriod function.
+ * @returns The encoded hexadecimal string.
+ * @extension VOTE
+ * @example
+ * ```ts
+ * import { encodeSetVotingPeriod } "thirdweb/extensions/vote";
+ * const result = encodeSetVotingPeriod({
+ *  newVotingPeriod: ...,
+ * });
+ * ```
+ */
+export function encodeSetVotingPeriod(options: SetVotingPeriodParams) {
+  // we do a "manual" concat here to avoid the overhead of the "concatHex" function
+  // we can do this because we know the specific formats of the values
+  return (FN_SELECTOR +
+    encodeSetVotingPeriodParams(options).slice(
+      2,
+    )) as `${typeof FN_SELECTOR}${string}`;
+}
+
+/**
+ * Prepares a transaction to call the "setVotingPeriod" function on the contract.
+ * @param options - The options for the "setVotingPeriod" function.
+ * @returns A prepared transaction object.
+ * @extension VOTE
+ * @example
+ * ```ts
+ * import { setVotingPeriod } from "thirdweb/extensions/vote";
+ *
+ * const transaction = setVotingPeriod({
+ *  contract,
+ *  newVotingPeriod: ...,
+ *  overrides: {
+ *    ...
+ *  }
+ * });
+ *
+ * // Send the transaction
+ * ...
+ *
+ * ```
+ */
+export function setVotingPeriod(
+  options: BaseTransactionOptions<
+    | SetVotingPeriodParams
+    | {
+        asyncParams: () => Promise<SetVotingPeriodParams>;
+      }
+  >,
+) {
+  const asyncOptions = once(async () => {
+    return "asyncParams" in options ? await options.asyncParams() : options;
+  });
+
+  return prepareContractCall({
+    contract: options.contract,
+    method: [FN_SELECTOR, FN_INPUTS, FN_OUTPUTS] as const,
+    params: async () => {
+      const resolvedOptions = await asyncOptions();
+      return [resolvedOptions.newVotingPeriod] as const;
+    },
+    value: async () => (await asyncOptions()).overrides?.value,
+    accessList: async () => (await asyncOptions()).overrides?.accessList,
+    gas: async () => (await asyncOptions()).overrides?.gas,
+    gasPrice: async () => (await asyncOptions()).overrides?.gasPrice,
+    maxFeePerGas: async () => (await asyncOptions()).overrides?.maxFeePerGas,
+    maxPriorityFeePerGas: async () =>
+      (await asyncOptions()).overrides?.maxPriorityFeePerGas,
+    nonce: async () => (await asyncOptions()).overrides?.nonce,
+    extraGas: async () => (await asyncOptions()).overrides?.extraGas,
+    erc20Value: async () => (await asyncOptions()).overrides?.erc20Value,
+  });
+}

package/src/extensions/vote/__generated__/Vote/write/updateQuorumNumerator.ts

@@ -0,0 +1,147 @@
+import type { AbiParameterToPrimitiveType } from "abitype";
+import type {
+  BaseTransactionOptions,
+  WithOverrides,
+} from "../../../../../transaction/types.js";
+import { prepareContractCall } from "../../../../../transaction/prepare-contract-call.js";
+import { encodeAbiParameters } from "../../../../../utils/abi/encodeAbiParameters.js";
+import { once } from "../../../../../utils/promise/once.js";
+import type { ThirdwebContract } from "../../../../../contract/contract.js";
+import { detectMethod } from "../../../../../utils/bytecode/detectExtension.js";
+
+/**
+ * Represents the parameters for the "updateQuorumNumerator" function.
+ */
+export type UpdateQuorumNumeratorParams = WithOverrides<{
+  newQuorumNumerator: AbiParameterToPrimitiveType<{
+    type: "uint256";
+    name: "newQuorumNumerator";
+  }>;
+}>;
+
+export const FN_SELECTOR = "0x06f3f9e6" as const;
+const FN_INPUTS = [
+  {
+    type: "uint256",
+    name: "newQuorumNumerator",
+  },
+] as const;
+const FN_OUTPUTS = [] as const;
+
+/**
+ * Checks if the `updateQuorumNumerator` method is supported by the given contract.
+ * @param contract The ThirdwebContract.
+ * @returns A promise that resolves to a boolean indicating if the `updateQuorumNumerator` method is supported.
+ * @extension VOTE
+ * @example
+ * ```ts
+ * import { isUpdateQuorumNumeratorSupported } from "thirdweb/extensions/vote";
+ *
+ * const supported = await isUpdateQuorumNumeratorSupported(contract);
+ * ```
+ */
+export async function isUpdateQuorumNumeratorSupported(
+  contract: ThirdwebContract<any>,
+) {
+  return detectMethod({
+    contract,
+    method: [FN_SELECTOR, FN_INPUTS, FN_OUTPUTS] as const,
+  });
+}
+
+/**
+ * Encodes the parameters for the "updateQuorumNumerator" function.
+ * @param options - The options for the updateQuorumNumerator function.
+ * @returns The encoded ABI parameters.
+ * @extension VOTE
+ * @example
+ * ```ts
+ * import { encodeUpdateQuorumNumeratorParams } "thirdweb/extensions/vote";
+ * const result = encodeUpdateQuorumNumeratorParams({
+ *  newQuorumNumerator: ...,
+ * });
+ * ```
+ */
+export function encodeUpdateQuorumNumeratorParams(
+  options: UpdateQuorumNumeratorParams,
+) {
+  return encodeAbiParameters(FN_INPUTS, [options.newQuorumNumerator]);
+}
+
+/**
+ * Encodes the "updateQuorumNumerator" function into a Hex string with its parameters.
+ * @param options - The options for the updateQuorumNumerator function.
+ * @returns The encoded hexadecimal string.
+ * @extension VOTE
+ * @example
+ * ```ts
+ * import { encodeUpdateQuorumNumerator } "thirdweb/extensions/vote";
+ * const result = encodeUpdateQuorumNumerator({
+ *  newQuorumNumerator: ...,
+ * });
+ * ```
+ */
+export function encodeUpdateQuorumNumerator(
+  options: UpdateQuorumNumeratorParams,
+) {
+  // we do a "manual" concat here to avoid the overhead of the "concatHex" function
+  // we can do this because we know the specific formats of the values
+  return (FN_SELECTOR +
+    encodeUpdateQuorumNumeratorParams(options).slice(
+      2,
+    )) as `${typeof FN_SELECTOR}${string}`;
+}
+
+/**
+ * Prepares a transaction to call the "updateQuorumNumerator" function on the contract.
+ * @param options - The options for the "updateQuorumNumerator" function.
+ * @returns A prepared transaction object.
+ * @extension VOTE
+ * @example
+ * ```ts
+ * import { updateQuorumNumerator } from "thirdweb/extensions/vote";
+ *
+ * const transaction = updateQuorumNumerator({
+ *  contract,
+ *  newQuorumNumerator: ...,
+ *  overrides: {
+ *    ...
+ *  }
+ * });
+ *
+ * // Send the transaction
+ * ...
+ *
+ * ```
+ */
+export function updateQuorumNumerator(
+  options: BaseTransactionOptions<
+    | UpdateQuorumNumeratorParams
+    | {
+        asyncParams: () => Promise<UpdateQuorumNumeratorParams>;
+      }
+  >,
+) {
+  const asyncOptions = once(async () => {
+    return "asyncParams" in options ? await options.asyncParams() : options;
+  });
+
+  return prepareContractCall({
+    contract: options.contract,
+    method: [FN_SELECTOR, FN_INPUTS, FN_OUTPUTS] as const,
+    params: async () => {
+      const resolvedOptions = await asyncOptions();
+      return [resolvedOptions.newQuorumNumerator] as const;
+    },
+    value: async () => (await asyncOptions()).overrides?.value,
+    accessList: async () => (await asyncOptions()).overrides?.accessList,
+    gas: async () => (await asyncOptions()).overrides?.gas,
+    gasPrice: async () => (await asyncOptions()).overrides?.gasPrice,
+    maxFeePerGas: async () => (await asyncOptions()).overrides?.maxFeePerGas,
+    maxPriorityFeePerGas: async () =>
+      (await asyncOptions()).overrides?.maxPriorityFeePerGas,
+    nonce: async () => (await asyncOptions()).overrides?.nonce,
+    extraGas: async () => (await asyncOptions()).overrides?.extraGas,
+    erc20Value: async () => (await asyncOptions()).overrides?.erc20Value,
+  });
+}

package/src/extensions/vote/read/quorumNumeratorByBlockNumber.ts

@@ -0,0 +1,30 @@
+import { readContract } from "../../../transaction/read-contract.js";
+import type { BaseTransactionOptions } from "../../../transaction/types.js";
+
+/**
+ * Calls the "quorumDenominator" function on the contract with an extra param called `blockNumber`.
+ * This extension is similar to the `quorumDenominator` extension, except that it takes in a bigint (blockNumber)
+ * @param options - The options for the quorumDenominator function.
+ * @returns The parsed result of the function call.
+ * @extension VOTE
+ * @example
+ * ```ts
+ * import { quorumNumeratorByBlockNumber } from "thirdweb/extensions/vote";
+ *
+ * const result = await quorumNumeratorByBlockNumber({
+ *  contract,
+ *  blockNumber: 13232234232n,
+ * });
+ *
+ * ```
+ */
+export async function quorumNumeratorByBlockNumber(
+  options: BaseTransactionOptions<{ blockNumber: bigint }>,
+) {
+  return readContract({
+    contract: options.contract,
+    method:
+      "function quorumNumerator(uint256 blockNumber) view returns (uint256)",
+    params: [options.blockNumber],
+  });
+}

package/src/gas/fee-data.ts

@@ -30,6 +30,10 @@ type FeeDataParams =
 const FORCE_GAS_PRICE_CHAIN_IDS = [
   78600, // Vanar testnet
   2040, // Vanar mainnet
+  248, // Oasys Mainnet
+  9372, // Oasys Testnet
+  841, // Taraxa Mainnet
+  842, // Taraxa Testnet
 ];
 
 /**

package/src/react/core/hooks/others/useProfiles.ts

@@ -0,0 +1,36 @@
+import { type UseQueryResult, useQuery } from "@tanstack/react-query";
+import type { Profile } from "../../../../wallets/in-app/core/authentication/types.js";
+import { getProfiles } from "../../../../wallets/in-app/core/wallet/profiles.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import { useActiveWallet } from "../wallets/useActiveWallet.js";
+
+/**
+ * @description Retrieves all linked profiles for the current wallet.
+ *
+ * @returns A React Query result containing the linked profiles for the connected in-app wallet.
+ *
+ * @note This hook will only run if the connected wallet supports multi-auth (in-app wallets).
+ *
+ * @example
+ * ```jsx
+ * import { use } from "thirdweb/react";
+ *
+ * const { data: profiles } = useProfiles();
+ *
+ * console.log("Type:", profiles[0].type); // "discord"
+ * console.log("Email:", profiles[0].email); // "john.doe@example.com"
+ * ```
+ *
+ * @wallet
+ */
+export function useProfiles(): UseQueryResult<Profile[]> {
+  const wallet = useActiveWallet();
+
+  return useQuery({
+    queryKey: ["profiles", wallet?.id],
+    enabled: !!wallet && wallet.id === "inApp",
+    queryFn: async () => {
+      return getProfiles(wallet as Wallet<"inApp">);
+    },
+  });
+}

package/src/react/core/hooks/others/useWalletBalance.ts

@@ -19,7 +19,7 @@ export type UseWalletBalanceOptions = Prettify<
 >;
 export type UseWalletBalanceQueryOptions = Omit<
   UseQueryOptions<GetWalletBalanceResult>,
-  "queryFn" | "queryKey" | "enabled"
+  "queryFn" | "queryKey"
 >;
 
 /**
@@ -85,6 +85,10 @@ export function useWalletBalance(
         tokenAddress,
       });
     },
-    enabled: !!chain && !!client && !!address,
+    enabled:
+      (queryOptions?.enabled === undefined || queryOptions.enabled) &&
+      !!chain &&
+      !!client &&
+      !!address,
   });
 }

package/src/react/core/utils/storage.ts

@@ -1,5 +1,5 @@
 import type { AsyncStorage } from "../../../utils/storage/AsyncStorage.js";
-import type { AuthArgsType } from "../../../wallets/in-app/core/authentication/type.js";
+import type { AuthArgsType } from "../../../wallets/in-app/core/authentication/types.js";
 
 const LAST_AUTH_PROVIDER_STORAGE_KEY = "lastAuthProvider";
 

package/src/react/core/utils/{socialIcons.ts → walletIcon.ts}

@@ -55,3 +55,28 @@ export const socialIcons = {
   farcaster: farcasterIconUri,
   telegram: telegramIconUri,
 };
+
+export function getWalletIcon(provider: string) {
+  switch (provider) {
+    case "google":
+      return googleIconUri;
+    case "apple":
+      return appleIconUri;
+    case "facebook":
+      return facebookIconUri;
+    case "phone":
+      return phoneIcon;
+    case "email":
+      return emailIcon;
+    case "passkey":
+      return passkeyIcon;
+    case "discord":
+      return discordIconUri;
+    case "farcaster":
+      return farcasterIconUri;
+    case "telegram":
+      return telegramIconUri;
+    default:
+      return genericWalletIcon;
+  }
+}

package/src/react/native/ui/components/TokenIcon.tsx

@@ -3,7 +3,7 @@ import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import type { TokenInfo } from "../../../core/utils/defaultTokens.js";
-import { genericTokenIcon } from "../../../core/utils/socialIcons.js";
+import { genericTokenIcon } from "../../../core/utils/walletIcon.js";
 import { ChainIcon } from "./ChainIcon.js";
 import { RNImage } from "./RNImage.js";
 

package/src/react/native/ui/connect/ConnectButton.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import {
   Animated,
   Dimensions,
@@ -9,13 +9,13 @@ import {
   StyleSheet,
   View,
 } from "react-native";
-import { cacheChains } from "../../../../chains/utils.js";
 import { parseTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
 import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
 import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
 import { useActiveWalletConnectionStatus } from "../../../core/hooks/wallets/useActiveWalletConnectionStatus.js";
+import { useConnectionManager } from "../../../core/providers/connection-manager.js";
 import { useAutoConnect } from "../../hooks/wallets/useAutoConnect.js";
 import { ThemedButton } from "../components/button.js";
 import { ThemedSpinner } from "../components/spinner.js";
@@ -45,6 +45,7 @@ export function ConnectButton(props: ConnectButtonProps) {
   const wallet = useActiveWallet();
   const account = useActiveAccount();
   const status = useActiveWalletConnectionStatus();
+  const connectionManager = useConnectionManager();
   const siweAuth = useSiweAuth(wallet, account, props.auth);
   useAutoConnect(props);
 
@@ -68,14 +69,18 @@ export function ConnectButton(props: ConnectButtonProps) {
     ]).start();
   }, []);
 
-  // to update cached chains ASAP, we skip using useEffect - this does not trigger a re-render so it's fine
-  if (props.chains) {
-    cacheChains(props.chains);
-  }
+  // Add props.chain and props.chains to defined chains store
+  useEffect(() => {
+    if (props.chain) {
+      connectionManager.defineChains([props.chain]);
+    }
+  }, [props.chain, connectionManager]);
 
-  if (props.chain) {
-    cacheChains([props.chain]);
-  }
+  useEffect(() => {
+    if (props.chains) {
+      connectionManager.defineChains(props.chains);
+    }
+  }, [props.chains, connectionManager]);
 
   const closeModal = useCallback(() => {
     Animated.parallel([

package/src/react/native/ui/connect/ConnectModal.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import { SvgXml } from "react-native-svg";
-import type { MultiStepAuthProviderType } from "../../../../wallets/in-app/core/authentication/type.js";
+import type { MultiStepAuthProviderType } from "../../../../wallets/in-app/core/authentication/types.js";
 import type { InAppWalletAuth } from "../../../../wallets/in-app/core/wallet/types.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { parseTheme } from "../../../core/design-system/CustomThemeProvider.js";

package/src/react/native/ui/connect/InAppWalletUI.tsx

@@ -6,7 +6,7 @@ import { nativeLocalStorage } from "../../../../utils/storage/nativeStorage.js";
 import type {
   MultiStepAuthProviderType,
   PreAuthArgsType,
-} from "../../../../wallets/in-app/core/authentication/type.js";
+} from "../../../../wallets/in-app/core/authentication/types.js";
 import type {
   InAppWalletAuth,
   InAppWalletSocialAuth,

package/src/react/web/ui/ConnectWallet/ConnectButton.tsx

@@ -2,13 +2,13 @@
 
 import styled from "@emotion/styled";
 import { useEffect, useMemo, useState } from "react";
-import { cacheChains } from "../../../../chains/utils.js";
 import { iconSize } from "../../../core/design-system/index.js";
 import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
 import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
 import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
 import { useActiveWalletConnectionStatus } from "../../../core/hooks/wallets/useActiveWalletConnectionStatus.js";
+import { useConnectionManager } from "../../../core/providers/connection-manager.js";
 import { defaultTokens } from "../../../core/utils/defaultTokens.js";
 import {
   WalletUIStatesProvider,
@@ -267,20 +267,25 @@ export function ConnectButton(props: ConnectButtonProps) {
     [props.wallets, props.appMetadata, props.chains],
   );
   const localeQuery = useConnectLocale(props.locale || "en_US");
+  const connectionManager = useConnectionManager();
 
   usePreloadWalletProviders({
     wallets,
     client: props.client,
   });
 
-  // to update cached chains ASAP, we skip using useEffect - this does not trigger a re-render so it's fine
-  if (props.chains) {
-    cacheChains(props.chains);
-  }
+  // Add props.chain and props.chains to defined chains store
+  useEffect(() => {
+    if (props.chain) {
+      connectionManager.defineChains([props.chain]);
+    }
+  }, [props.chain, connectionManager]);
 
-  if (props.chain) {
-    cacheChains([props.chain]);
-  }
+  useEffect(() => {
+    if (props.chains) {
+      connectionManager.defineChains(props.chains);
+    }
+  }, [props.chains, connectionManager]);
 
   const size = useMemo(() => {
     return !canFitWideModal() || wallets.length === 1

package/src/react/web/ui/ConnectWallet/Details.tsx

@@ -53,6 +53,7 @@ import type {
 } from "../../../core/utils/defaultTokens.js";
 import { hasSmartAccount } from "../../../core/utils/isSmartWallet.js";
 import { useConnectedWalletDetails } from "../../../core/utils/wallet.js";
+import { WalletUIStatesProvider } from "../../providers/wallet-ui-states-provider.js";
 import { ChainIcon } from "../components/ChainIcon.js";
 import { CopyIcon } from "../components/CopyIcon.js";
 import { Img } from "../components/Img.js";
@@ -68,6 +69,7 @@ import { fadeInAnimation } from "../design-system/animations.js";
 import { StyledButton } from "../design-system/elements.js";
 import type { LocaleId } from "../types.js";
 import { MenuButton, MenuLink } from "./MenuButton.js";
+import { ScreenSetupContext, useSetupScreen } from "./Modal/screen.js";
 import {
   NetworkSelectorContent,
   type NetworkSelectorProps,
@@ -84,6 +86,8 @@ import { getConnectLocale } from "./locale/getConnectLocale.js";
 import type { ConnectLocale } from "./locale/types.js";
 import { LazyBuyScreen } from "./screens/Buy/LazyBuyScreen.js";
 import { WalletManagerScreen } from "./screens/Details/WalletManagerScreen.js";
+import { LinkProfileScreen } from "./screens/LinkProfileScreen.js";
+import { LinkedProfilesScreen } from "./screens/LinkedProfilesScreen.js";
 import { ManageWalletScreen } from "./screens/ManageWalletScreen.js";
 import { PrivateKey } from "./screens/PrivateKey.js";
 import { ReceiveFunds } from "./screens/ReceiveFunds.js";
@@ -277,6 +281,12 @@ function DetailsModal(props: {
 
   const disableSwitchChain = !activeWallet?.switchChain;
 
+  const screenSetup = useSetupScreen({
+    size: "compact",
+    welcomeScreen: undefined,
+    wallets: activeWallet ? [activeWallet] : [],
+  });
+
   function closeModal() {
     setIsOpen(false);
     onModalUnmount(() => {
@@ -778,6 +788,25 @@ function DetailsModal(props: {
         client={client}
       />
     );
+  } else if (screen === "linked-profiles") {
+    content = (
+      <LinkedProfilesScreen
+        onBack={() => setScreen("manage-wallet")}
+        client={client}
+        locale={locale}
+        setScreen={setScreen}
+      />
+    );
+  } else if (screen === "link-profile") {
+    content = (
+      <LinkProfileScreen
+        onBack={() => {
+          setScreen("linked-profiles");
+        }}
+        client={client}
+        locale={locale}
+      />
+    );
   }
 
   // send funds
@@ -832,17 +861,21 @@ function DetailsModal(props: {
 
   return (
     <CustomThemeProvider theme={props.theme}>
-      <Modal
-        size={"compact"}
-        open={isOpen}
-        setOpen={(_open) => {
-          if (!_open) {
-            closeModal();
-          }
-        }}
-      >
-        {content}
-      </Modal>
+      <WalletUIStatesProvider theme={props.theme} isOpen={false}>
+        <ScreenSetupContext.Provider value={screenSetup}>
+          <Modal
+            size={"compact"}
+            open={isOpen}
+            setOpen={(_open) => {
+              if (!_open) {
+                closeModal();
+              }
+            }}
+          >
+            {content}
+          </Modal>
+        </ScreenSetupContext.Provider>
+      </WalletUIStatesProvider>
     </CustomThemeProvider>
   );
 }
@@ -1191,6 +1224,7 @@ export type UseWalletDetailsModalOptions = {
    * ```
    */
   chains?: Chain[];
+
   /**
    * Show a "Request Testnet funds" link in Wallet Details Modal when user is connected to a testnet.
    *