thirdweb 5.69.0 → 5.70.0-nightly-ecaa304a812188da3c81888bb52ca6064093c139-20241121000332

package/src/extensions/modules/common/checkModulesCompatibility.ts

@@ -18,6 +18,11 @@ import {
   FN_SELECTOR as getModuleConfigSelector,
 } from "../__generated__/IModule/read/getModuleConfig.js";
 
+/**
+ * Check if the given modules are compatible with the given core contract
+ * @param options
+ * @modules
+ */
 export async function checkModulesCompatibility(options: {
   coreBytecode: string;
   moduleBytecodes: string[];

package/src/extensions/pack/createNewPack.ts

@@ -1,7 +1,10 @@
 import type { ThirdwebClient } from "../../client/client.js";
 import { type ThirdwebContract, getContract } from "../../contract/contract.js";
 import { upload } from "../../storage/upload.js";
-import type { BaseTransactionOptions } from "../../transaction/types.js";
+import type {
+  BaseTransactionOptions,
+  WithOverrides,
+} from "../../transaction/types.js";
 import type { NFTInput } from "../../utils/nft/parseNft.js";
 import { toUnits } from "../../utils/units.js";
 import type { AddPackContentsParams } from "./__generated__/IPack/write/addPackContents.js";
@@ -114,7 +117,7 @@ export type CreateNewPackParams = {
  * ```
  */
 export function createNewPack(
-  options: BaseTransactionOptions<CreateNewPackParams>,
+  options: WithOverrides<BaseTransactionOptions<CreateNewPackParams>>,
 ) {
   return createPack({
     contract: options.contract,
@@ -126,7 +129,7 @@ export function createNewPack(
  * @internal
  */
 async function getCreatePackParams(
-  options: BaseTransactionOptions<CreateNewPackParams>,
+  options: WithOverrides<BaseTransactionOptions<CreateNewPackParams>>,
 ): Promise<CreatePackParams> {
   const {
     contract,
@@ -138,6 +141,7 @@ async function getCreatePackParams(
     erc721Rewards,
     erc1155Rewards,
     tokenOwner,
+    overrides,
   } = options;
   const [erc20Content, erc721Content, erc1155Content, packUri] =
     await Promise.all([
@@ -179,6 +183,7 @@ async function getCreatePackParams(
     // openStartTimestamp should be in seconds and not millisecond
     openStartTimestamp: BigInt(Math.ceil(openStartTimestamp.getTime() / 1000)),
     amountDistributedPerOpen,
+    overrides,
   };
 }
 

package/src/extensions/prebuilts/deploy-pack.ts

@@ -73,6 +73,7 @@ export type DeployPackContractOptions = Prettify<
  *   },
  * });
  * ```
+ * @extension DEPLOY
  */
 export async function deployPackContract(options: DeployPackContractOptions) {
   const { chain, client, account, params } = options;

package/src/extensions/thirdweb/write/publish.ts

@@ -113,6 +113,10 @@ export function publishContract(
   });
 }
 
+/**
+ * Returns the default publisher contract on polygon
+ * @utils
+ */
 export function getContractPublisher(client: ThirdwebClient) {
   return getContract({
     client,

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

@@ -144,13 +144,13 @@ function getQueryOptions(chain?: Chain) {
 }
 
 /**
- * @description Retrieves metadata for a chain such as name, icon, available faucets, block explorers, etc.
+ * Retrieves metadata for a chain such as name, icon, available faucets, block explorers, etc.
  *
  * @param chain - Chain to retrieve metadata for, see [defineChain](https://portal.thirdweb.com/references/typescript/v5/defineChain) for how to create a chain from a chain ID.
- * @returns A React Query result containing the chain metadata, @see {@link ChainMetadata}.
+ * @returns A React Query result containing the chain metadata
  *
  * @example
- * ```jsx
+ * ```
  * import { useChainMetadata } from "thirdweb/react";
  *
  * const { data: chainMetadata } = useChainMetadata(defineChain(11155111));

package/src/react/core/hooks/rpc/useBlockNumber.ts

@@ -18,7 +18,7 @@ export type UseBlockNumberOptions = {
  * @param options - The options for the hook.
  * @returns The latest block number.
  * @example
- * ```jsx
+ * ```ts
  * import { useBlockNumber } from "thirdweb/react";
  * const blockNumber = useBlockNumber({client, chain});
  * ```

package/src/react/core/hooks/wallets/useCapabilities.ts

@@ -8,7 +8,7 @@ import { useActiveWallet } from "./useActiveWallet.js";
 /**
  * A hook to get the current wallet's capabilities according to [EIP-5792](https://eips.ethereum.org/EIPS/eip-5792).
  *
- * @note This function is dependent on the wallet's support for EIP-5792, but will not throw.
+ *  This function is dependent on the wallet's support for EIP-5792, but will not throw.
  * **The returned object contains a `message` field detailing any issues with the wallet's support for EIP-5792.**
  *
  * @returns a React Query object.

package/src/react/core/hooks/wallets/useSendCalls.ts

@@ -24,8 +24,8 @@ import { useActiveWallet } from "./useActiveWallet.js";
  *
  * When calls are sent, all contracts that are interacted with will have their corresponding reads revalidated via React Query.
  *
- * @note This hook is dependent on the wallet's support for EIP-5792 and could fail.
- * @note The mutatuon function will use your currently connected wallet by default, but you can pass it a specific wallet to use if you'd like.
+ *  This hook is dependent on the wallet's support for EIP-5792 and could fail.
+ *  The mutatuon function will use your currently connected wallet by default, but you can pass it a specific wallet to use if you'd like.
  *
  * @returns A React Query mutatuon object to interact with {@link sendCalls}
  * @throws an error if the wallet does not support EIP-5792.
@@ -76,7 +76,7 @@ import { useActiveWallet } from "./useActiveWallet.js";
  * });
  * ```
  *
- * @note We recommend proxying any paymaster calls via an API route you setup and control.
+ *  We recommend proxying any paymaster calls via an API route you setup and control.
  * @extension EIP5792
  */
 export function useSendCalls({

package/src/react/core/providers/connection-manager.tsx

@@ -7,6 +7,9 @@ export const ConnectionManagerCtx = createContext<
   ConnectionManager | undefined
 >(undefined);
 
+/**
+ * @internal
+ */
 export function useConnectionManager() {
   const connectionManager = useConnectionManagerCtx("useConnectionManager");
   if (!connectionManager) {

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

@@ -77,7 +77,8 @@ export function useEnsAvatar(options: {
 }
 
 /**
- * @internal
+ * @internal This hook is only being used in our react-native package
+ * It can be removed once we migrate the RN UI code to our headless components (AccountProvider, AccountName etc.)
  */
 export function useConnectedWalletDetails(
   client: ThirdwebClient,

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

@@ -62,6 +62,8 @@ export const socialIcons = {
  * const googleIcon = getSocialIcon("google")
  * const appleIcon = getSocialIcon("apple")
  * ```
+ *
+ * @walletUtils
  */
 export function getSocialIcon(provider: AuthOption | ({} & string)): string {
   switch (provider) {

package/src/react/native/hooks/wallets/useProfiles.ts

@@ -10,7 +10,7 @@ import { useAdminWallet } from "../../../core/hooks/wallets/useAdminWallet.js";
  * Retrieves all linked profiles of the connected in-app or ecosystem account.
  *
  * @returns A React Query result containing the linked profiles for the connected in-app account.
- * @note This hook will only run if the connected wallet supports account linking.
+ *  This hook will only run if the connected wallet supports account linking.
  *
  * @example
  * ```jsx

package/src/react/native/providers/thirdweb-provider.tsx

@@ -23,6 +23,7 @@ import { ThirdwebProviderCore } from "../../core/providers/thirdweb-provider.js"
  * }
  * ```
  * @component
+ * @walletConnection
  */
 export function ThirdwebProvider(
   props: React.PropsWithChildren<{

package/src/react/native/ui/AutoConnect/AutoConnect.tsx

@@ -32,6 +32,7 @@ import { useAutoConnect } from "../../hooks/wallets/useAutoConnect.js";
  * }
  * ```
  * @component
+ * @walletConnection
  */
 export function AutoConnect(props: AutoConnectProps) {
   useAutoConnect(props);

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

@@ -61,6 +61,7 @@ export type ModalState =
  *
  * Refer to the [`ConnectEmbedProps`](https://portal.thirdweb.com/references/typescript/v5/ConnectEmbedProps) type for more details
  * @component
+ * @walletConnection
  */
 export function ConnectEmbed(props: ConnectEmbedProps) {
   const theme = parseTheme(props.theme);

package/src/react/native/ui/transaction/TransactionButton.tsx

@@ -25,6 +25,7 @@ import { ThemedSpinner } from "../components/spinner.js";
  * </TransactionButton>
  * ```
  * @component
+ * @transaction
  */
 export function TransactionButton(props: TransactionButtonProps) {
   const {

package/src/react/web/hooks/wallets/useProfiles.ts

@@ -10,7 +10,7 @@ import { useAdminWallet } from "../../../core/hooks/wallets/useAdminWallet.js";
  * Retrieves all linked profiles of the connected in-app or ecosystem account.
  *
  * @returns A React Query result containing the linked profiles for the connected in-app account.
- * @note This hook will only run if the connected wallet supports account linking.
+ *  This hook will only run if the connected wallet supports account linking.
  *
  * @example
  * ```jsx

package/src/react/web/providers/thirdweb-provider.tsx

@@ -23,6 +23,7 @@ import { ThirdwebProviderCore } from "../../core/providers/thirdweb-provider.js"
  * }
  * ```
  * @component
+ * @walletConnection
  */
 export function ThirdwebProvider(
   props: React.PropsWithChildren<{

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

@@ -37,6 +37,7 @@ import { useAutoConnect } from "../../hooks/wallets/useAutoConnect.js";
  * }
  * ```
  * @component
+ * @walletConnection
  */
 export function AutoConnect(props: AutoConnectProps) {
   useAutoConnect(props);

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

@@ -21,13 +21,34 @@ const COLOR_OPTIONS = [
   ["#fda4af", "#be123c"],
 ];
 
+/**
+ * Props for the Blobbie component
+ * @component
+ */
+export type BlobbieProps = {
+  address: Address;
+  style?: Omit<React.CSSProperties, "backgroundImage">;
+  className?: string;
+  size?: number;
+};
+
 /**
  * A unique gradient avatar based on the provided address.
  * @param props The component props.
  * @param props.address The address to generate the gradient with.
- * @param props.size The size of each side of the square avatar (in pixels)
+ * @param props.style The CSS style for the component - excluding `backgroundImage`
+ * @param props.className The className for the component
+ * @param props.size The size of each side of the square avatar (in pixels). This prop will override the `width` and `height` attributes from the `style` prop.
+ * @component
+ * @wallet
+ * @example
+ * ```tsx
+ * import { Blobbie } from "thirdweb/react";
+ *
+ * <Blobbie address="0x...." className="w-10 h-10" />
+ * ```
  */
-export function Blobbie(props: { address: Address; size: number }) {
+export function Blobbie(props: BlobbieProps) {
   const id = useId();
   const colors = useMemo(
     () =>
@@ -41,10 +62,16 @@ export function Blobbie(props: { address: Address; size: number }) {
     <div
       id={id}
       style={{
-        width: `${props.size}px`,
-        height: `${props.size}px`,
+        ...props.style,
         backgroundImage: `radial-gradient(ellipse at left bottom, ${colors[0]}, ${colors[1]})`,
+        ...(props.size
+          ? {
+              width: `${props.size}px`,
+              height: `${props.size}px`,
+            }
+          : undefined),
       }}
+      className={props.className}
     />
   );
 }

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

@@ -23,6 +23,7 @@ import { Spinner } from "../components/Spinner.js";
 import { Container } from "../components/basic.js";
 import { Button } from "../components/buttons.js";
 import { fadeInAnimation } from "../design-system/animations.js";
+import { AccountProvider } from "../prebuilt/Account/provider.js";
 import { ConnectedWalletDetails } from "./Details.js";
 import ConnectModal from "./Modal/ConnectModal.js";
 import { LockIcon } from "./icons/LockIcon.js";
@@ -187,7 +188,7 @@ const TW_CONNECT_WALLET = "tw-connect-wallet";
  *    client={client}
  *    connectModal={{
  *      title: "Sign in to MyApp",
- *      titleIcon: https://example.com/logo.png,
+ *      titleIcon: "https://example.com/logo.png",
  *      size: "compact",
  *    }}
  * />
@@ -269,6 +270,7 @@ const TW_CONNECT_WALLET = "tw-connect-wallet";
  * @returns A JSX element that renders the <ConnectButton> component.
  *
  * @component
+ * @walletConnection
  */
 export function ConnectButton(props: ConnectButtonProps) {
   const wallets = useMemo(
@@ -531,37 +533,39 @@ function ConnectButtonInner(
   }
 
   return (
-    <ConnectedWalletDetails
-      theme={theme}
-      detailsButton={props.detailsButton}
-      detailsModal={props.detailsModal}
-      supportedTokens={supportedTokens}
-      supportedNFTs={props.supportedNFTs}
-      onDisconnect={(info) => {
-        // logout on explicit disconnect!
-        if (siweAuth.requiresAuth) {
-          siweAuth.doLogout();
-        }
-        props.onDisconnect?.(info);
-      }}
-      chains={props?.chains || []}
-      chain={props.chain}
-      switchButton={props.switchButton}
-      client={props.client}
-      connectLocale={locale}
-      connectOptions={{
-        accountAbstraction: props.accountAbstraction,
-        appMetadata: props.appMetadata,
-        chain: props.chain,
-        chains: props.chains,
-        connectModal: props.connectModal,
-        recommendedWallets: props.recommendedWallets,
-        showAllWallets: props.showAllWallets,
-        walletConnect: props.walletConnect,
-        wallets: props.wallets,
-        hiddenWallets: props.detailsModal?.hiddenWallets,
-      }}
-    />
+    <AccountProvider address={activeAccount.address} client={props.client}>
+      <ConnectedWalletDetails
+        theme={theme}
+        detailsButton={props.detailsButton}
+        detailsModal={props.detailsModal}
+        supportedTokens={supportedTokens}
+        supportedNFTs={props.supportedNFTs}
+        onDisconnect={(info) => {
+          // logout on explicit disconnect!
+          if (siweAuth.requiresAuth) {
+            siweAuth.doLogout();
+          }
+          props.onDisconnect?.(info);
+        }}
+        chains={props?.chains || []}
+        chain={props.chain}
+        switchButton={props.switchButton}
+        client={props.client}
+        connectLocale={locale}
+        connectOptions={{
+          accountAbstraction: props.accountAbstraction,
+          appMetadata: props.appMetadata,
+          chain: props.chain,
+          chains: props.chains,
+          connectModal: props.connectModal,
+          recommendedWallets: props.recommendedWallets,
+          showAllWallets: props.showAllWallets,
+          walletConnect: props.walletConnect,
+          wallets: props.wallets,
+          hiddenWallets: props.detailsModal?.hiddenWallets,
+        }}
+      />
+    </AccountProvider>
   );
 }
 

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

@@ -15,6 +15,7 @@ import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getContract } from "../../../../contract/contract.js";
 import { getLastAuthProvider } from "../../../../react/core/utils/storage.js";
+import { shortenAddress } from "../../../../utils/address.js";
 import { isContractDeployed } from "../../../../utils/bytecode/is-contract-deployed.js";
 import { formatNumber } from "../../../../utils/formatNumber.js";
 import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
@@ -67,10 +68,7 @@ import type {
   SupportedTokens,
 } from "../../../core/utils/defaultTokens.js";
 import { hasSmartAccount } from "../../../core/utils/isSmartWallet.js";
-import {
-  useConnectedWalletDetails,
-  useWalletInfo,
-} from "../../../core/utils/wallet.js";
+import { useWalletInfo } 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";
@@ -86,8 +84,13 @@ import { Button, IconButton } from "../components/buttons.js";
 import { Link, Text } from "../components/text.js";
 import { fadeInAnimation } from "../design-system/animations.js";
 import { StyledButton } from "../design-system/elements.js";
+import { AccountAddress } from "../prebuilt/Account/address.js";
+import { AccountAvatar } from "../prebuilt/Account/avatar.js";
+import { AccountBalance } from "../prebuilt/Account/balance.js";
+import { AccountBlobbie } from "../prebuilt/Account/blobbie.js";
+import { AccountName } from "../prebuilt/Account/name.js";
+import { AccountProvider } from "../prebuilt/Account/provider.js";
 import type { LocaleId } from "../types.js";
-import { Blobbie } from "./Blobbie.js";
 import { MenuButton, MenuLink } from "./MenuButton.js";
 import { ScreenSetupContext, useSetupScreen } from "./Modal/screen.js";
 import {
@@ -140,18 +143,10 @@ export const ConnectedWalletDetails: React.FC<{
   connectOptions: DetailsModalConnectOptions | undefined;
 }> = (props) => {
   const { connectLocale: locale, client } = props;
-
   const setRootEl = useContext(SetRootElementContext);
   const activeAccount = useActiveAccount();
   const walletChain = useActiveWalletChain();
 
-  const { pfp, name, balanceQuery } = useConnectedWalletDetails(
-    client,
-    walletChain,
-    activeAccount,
-    props.detailsButton?.displayBalanceToken,
-  );
-
   function closeModal() {
     setRootEl(null);
   }
@@ -199,8 +194,6 @@ export const ConnectedWalletDetails: React.FC<{
     );
   }
 
-  const avatarSrc = props.detailsButton?.connectedAccountAvatarUrl || pfp;
-
   const combinedClassName = `${TW_CONNECTED_WALLET} ${props.detailsButton?.className || ""}`;
 
   return (
@@ -219,10 +212,10 @@ export const ConnectedWalletDetails: React.FC<{
           height: "35px",
         }}
       >
-        {avatarSrc ? (
+        {props.detailsButton?.connectedAccountAvatarUrl ? (
           <img
             alt=""
-            src={avatarSrc}
+            src={props.detailsButton.connectedAccountAvatarUrl}
             style={{
               height: "100%",
               width: "100%",
@@ -230,7 +223,16 @@ export const ConnectedWalletDetails: React.FC<{
             }}
           />
         ) : (
-          activeAccount && <Blobbie address={activeAccount.address} size={35} />
+          activeAccount && (
+            <AccountAvatar
+              loadingComponent={<AccountBlobbie size={35} />}
+              fallbackComponent={<AccountBlobbie size={35} />}
+              queryOptions={{
+                refetchOnWindowFocus: false,
+                refetchOnMount: false,
+              }}
+            />
+          )
         )}
       </Container>
       <Container
@@ -243,29 +245,47 @@ export const ConnectedWalletDetails: React.FC<{
         }}
       >
         {/* Address */}
-        <Text
-          size="xs"
-          color="primaryText"
-          weight={500}
-          className={`${TW_CONNECTED_WALLET}__address`}
-        >
-          {props.detailsButton?.connectedAccountName ?? name}
-        </Text>
-
-        {/* Balance */}
-        {balanceQuery.data ? (
+        {props.detailsButton?.connectedAccountName ? (
           <Text
-            className={`${TW_CONNECTED_WALLET}__balance`}
             size="xs"
-            color="secondaryText"
-            weight={400}
+            color="primaryText"
+            weight={500}
+            className={`${TW_CONNECTED_WALLET}__address`}
           >
-            {formatBalanceOnButton(Number(balanceQuery.data.displayValue))}{" "}
-            {balanceQuery.data.symbol}
+            {props.detailsButton.connectedAccountName}
           </Text>
         ) : (
-          <Skeleton height={fontSize.xs} width="70px" />
+          <Text
+            size="xs"
+            color="primaryText"
+            weight={500}
+            className={`${TW_CONNECTED_WALLET}__address`}
+          >
+            <AccountName
+              loadingComponent={<AccountAddress formatFn={shortenAddress} />}
+              fallbackComponent={<AccountAddress formatFn={shortenAddress} />}
+            />
+          </Text>
         )}
+
+        <Text
+          className={`${TW_CONNECTED_WALLET}__balance`}
+          size="xs"
+          color="secondaryText"
+          weight={400}
+        >
+          <AccountBalance
+            chain={walletChain}
+            loadingComponent={<Skeleton height={fontSize.xs} width="70px" />}
+            fallbackComponent={<Skeleton height={fontSize.xs} width="70px" />}
+            formatFn={formatBalanceOnButton}
+            tokenAddress={
+              props.detailsButton?.displayBalanceToken?.[
+                Number(walletChain?.id)
+              ]
+            }
+          />
+        </Text>
       </Container>
     </WalletInfoButton>
   );
@@ -295,12 +315,6 @@ function DetailsModal(props: {
   const { client, locale } = props;
   const walletChain = useActiveWalletChain();
   const activeAccount = useActiveAccount();
-  const { pfp, name, balanceQuery } = useConnectedWalletDetails(
-    client,
-    walletChain,
-    activeAccount,
-    props.displayBalanceToken,
-  );
   const theme = parseTheme(props.theme);
 
   const activeWallet = useActiveWallet();
@@ -363,12 +377,15 @@ function DetailsModal(props: {
         <Text color="primaryText" size="md" multiline>
           {chainNameQuery.name || `Unknown chain #${walletChain?.id}`}
           <Text color="secondaryText" size="xs">
-            {balanceQuery.data ? (
-              formatNumber(Number(balanceQuery.data.displayValue), 9)
-            ) : (
-              <Skeleton height="1em" width="100px" />
-            )}{" "}
-            {balanceQuery.data?.symbol}
+            <AccountBalance
+              fallbackComponent={<Skeleton height="1em" width="100px" />}
+              loadingComponent={<Skeleton height="1em" width="100px" />}
+              formatFn={(num: number) => formatNumber(num, 9)}
+              chain={walletChain}
+              tokenAddress={
+                props.displayBalanceToken?.[Number(walletChain?.id)]
+              }
+            />
           </Text>
         </Text>
       )}
@@ -384,8 +401,6 @@ function DetailsModal(props: {
     </MenuButton>
   );
 
-  const avatarSrc = props.detailsModal?.connectedAccountAvatarUrl ?? pfp;
-
   const { hideSendFunds, hideReceiveFunds, hideBuyFunds } =
     props.detailsModal || {};
 
@@ -407,9 +422,9 @@ function DetailsModal(props: {
           overflow: "hidden",
         }}
       >
-        {avatarSrc ? (
+        {props.detailsModal?.connectedAccountAvatarUrl ? (
           <img
-            src={avatarSrc}
+            src={props.detailsModal.connectedAccountAvatarUrl}
             style={{
               height: "100%",
               width: "100%",
@@ -419,9 +434,9 @@ function DetailsModal(props: {
           />
         ) : (
           activeAccount && (
-            <Blobbie
-              address={activeAccount.address}
-              size={Number(iconSize.xxl)}
+            <AccountAvatar
+              loadingComponent={<AccountBlobbie size={Number(iconSize.xxl)} />}
+              fallbackComponent={<AccountBlobbie size={Number(iconSize.xxl)} />}
             />
           )
         )}
@@ -496,9 +511,22 @@ function DetailsModal(props: {
               alignItems: "center",
             }}
           >
-            <Text color="primaryText" weight={500} size="md">
-              {props.detailsModal?.connectedAccountName ?? name}
-            </Text>
+            {props.detailsModal?.connectedAccountName ? (
+              <Text color="primaryText" weight={500} size="md">
+                {props.detailsModal.connectedAccountName}
+              </Text>
+            ) : (
+              <Text color="primaryText" weight={500} size="md">
+                <AccountName
+                  loadingComponent={
+                    <AccountAddress formatFn={shortenAddress} />
+                  }
+                  fallbackComponent={
+                    <AccountAddress formatFn={shortenAddress} />
+                  }
+                />
+              </Text>
+            )}
             <IconButton>
               <CopyIcon
                 text={activeAccount?.address || ""}
@@ -964,7 +992,12 @@ function DetailsModal(props: {
               }
             }}
           >
-            {content}
+            <AccountProvider
+              address={activeAccount?.address || ""}
+              client={client}
+            >
+              {content}
+            </AccountProvider>
           </Modal>
         </ScreenSetupContext.Provider>
       </WalletUIStatesProvider>