thirdweb 5.40.0-nightly-3848327373e49aa83c5902e6a16d5b8e96cf1eeb-20240726000343 → 5.40.1-nightly-b128530355f0dc47d897bd2ef7c3823752ea9b6c-20240727000321

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

@@ -1,5 +1,20 @@
-import type { ConnectionManager } from "../../../../wallets/manager/index.js";
+import { useConnectionManager } from "../../providers/connection-manager.js";
 
-export function useSetActiveWalletCore(manager: ConnectionManager) {
+/**
+ * A hook that lets you set the active wallet.
+ * @returns A function that lets you set the active wallet.
+ * @example
+ * ```jsx
+ * import { useSetActiveWallet } from "thirdweb/react";
+ *
+ * const setActiveAccount = useSetActiveWallet();
+ *
+ * // later in your code
+ * await setActiveAccount(account);
+ * ```
+ * @walletConnection
+ */
+export function useSetActiveWallet() {
+  const manager = useConnectionManager();
   return manager.setActiveWallet;
 }

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

@@ -1,7 +1,20 @@
-import type { ConnectionManager } from "../../../../wallets/manager/index.js";
+import { useConnectionManager } from "../../providers/connection-manager.js";
 
-export function useSetActiveWalletConnectionStatusCore(
-  manager: ConnectionManager,
-) {
+/**
+ * A hook that returns the active wallet's connection status.
+ * @example
+ * ```jsx
+ * function Example() {
+ *   const setActiveStatus = useSetActiveWalletConnectionStatus();
+ *
+ *   // when you want to set the connection status of the wallet
+ *   setActiveStatus(status)
+ * }
+ * ```
+ * @returns The active wallet's connection status.
+ * @internal
+ */
+export function useSetActiveWalletConnectionStatus() {
+  const manager = useConnectionManager();
   return manager.activeWalletConnectionStatusStore.setValue;
 }

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

@@ -1,5 +1,21 @@
-import type { ConnectionManager } from "../../../../wallets/manager/index.js";
+import { useConnectionManager } from "../../providers/connection-manager.js";
 
-export function useSwitchActiveWalletChainCore(manager: ConnectionManager) {
+/**
+ * Switch to blockchain with given chain id in the active wallet.
+ * @returns A function to switch to blockchain with given chain id in the active wallet.
+ * @example
+ * ```jsx
+ * import { useSwitchActiveWalletChain } from "thirdweb/react";
+ * import { sepolia } from "thirdweb/chains";
+ *
+ * const switchChain = useSwitchActiveWalletChain();
+ *
+ * // later in your code
+ * <button onClick={() => switchChain(sepolia)}>Switch Chain</button>
+ * ```
+ * @walletConnection
+ */
+export function useSwitchActiveWalletChain() {
+  const manager = useConnectionManager();
   return manager.switchActiveWalletChain;
 }

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

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+import type { ConnectionManager } from "../../../wallets/manager/index.js";
+
+export const ConnectionManagerCtx = createContext<
+  ConnectionManager | undefined
+>(undefined);
+
+export function useConnectionManager() {
+  const connectionManager = useContext(ConnectionManagerCtx);
+  if (!connectionManager) {
+    throw new Error(
+      "useConnectionManager must be used within a ConnectionManager Provider",
+    );
+  }
+  return connectionManager;
+}

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

@@ -5,27 +5,18 @@ import { waitForReceipt } from "../../../transaction/actions/wait-for-tx-receipt
 import { isBaseTransactionOptions } from "../../../transaction/types.js";
 import type { Hex } from "../../../utils/encoding/hex.js";
 import { isObjectWithKeys } from "../../../utils/type-guards.js";
+import type { ConnectionManager } from "../../../wallets/manager/index.js";
 import { SetRootElementContext } from "./RootElementContext.js";
+import { ConnectionManagerCtx } from "./connection-manager.js";
 import { invalidateWalletBalance } from "./invalidateWalletBalance.js";
 
 /**
- * The ThirdwebProvider is component is a provider component that sets up the React Query client.
- * @param props - The props for the ThirdwebProvider
- * @example
- * ```jsx
- * import { ThirdwebProvider } from "thirdweb/react";
- *
- * function Example() {
- *  return (
- *    <ThirdwebProvider>
- *      <App />
- *    </ThirdwebProvider>
- *   )
- * }
- * ```
- * @component
+ * @internal
  */
-export function ThirdwebProvider(props: React.PropsWithChildren) {
+export function ThirdwebProviderCore(props: {
+  manager: ConnectionManager;
+  children: React.ReactNode;
+}) {
   const [el, setEl] = useState<React.ReactNode>(null);
   const [queryClient] = useState(
     () =>
@@ -78,11 +69,13 @@ export function ThirdwebProvider(props: React.PropsWithChildren) {
   );
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <SetRootElementContext.Provider value={setEl}>
-        {props.children}
-      </SetRootElementContext.Provider>
-      {el}
-    </QueryClientProvider>
+    <ConnectionManagerCtx.Provider value={props.manager}>
+      <QueryClientProvider client={queryClient}>
+        <SetRootElementContext.Provider value={setEl}>
+          {props.children}
+        </SetRootElementContext.Provider>
+        {el}
+      </QueryClientProvider>
+    </ConnectionManagerCtx.Provider>
   );
 }

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

@@ -1,3 +1,4 @@
+import type { Chain } from "../../../chains/types.js";
 import type { Address } from "../../../utils/address.js";
 
 export type TokenInfo = {
@@ -34,31 +35,8 @@ const fantomIcon =
 export type SupportedTokens = Record<number, TokenInfo[]>;
 export type SupportedNFTs = Record<number, Address[]>;
 
-/**
- * Default tokens shown in [`ConnectButton`](https://portal.thirdweb.com/react/v4/components/ConnectButton)'s SendFunds screen for each network.
- *
- * You can use the default tokens as a starting point for your own list of tokens and override tokens for specific networks.
- * @example
- * Below example shows adding a custom token for the Ethereum mainnet at start of the list of default tokens for the Ethereum mainnet. Here the `1` represents the chainId of Ethereum mainnet.
- *
- * ```tsx
- * const ethereumChainId = 1;
- *
- * <ConnectButton supportedTokens={{
- *  ...defaultTokens,
- *  [ethereumChainId]: [
- *    {
- *      address: 'YOUR_TOKEN_ADDRESS',
- *      name: 'YOUR_TOKEN_NAME',
- *      symbol: 'YOUR_TOKEN_SYMBOL',
- *      icon: 'YOUR_TOKEN_ICON_URL'
- *    },
- *    ...defaultTokens[ethereumChainId],
- *  ]
- * }} />
- * ```
- */
-export const defaultTokens: SupportedTokens = {
+// TODO these should be moved to chain definitions
+const DEFAULT_TOKENS = {
   "1": [
     {
       address: "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2",
@@ -333,4 +311,38 @@ export const defaultTokens: SupportedTokens = {
       icon: usdcIcon,
     },
   ],
-};
+} as const;
+
+/**
+ * Default tokens shown in [`ConnectButton`](https://portal.thirdweb.com/react/v4/components/ConnectButton)'s SendFunds screen for each network.
+ *
+ * You can use the default tokens as a starting point for your own list of tokens and override tokens for specific networks.
+ * @example
+ * Below example shows adding a custom token for the Ethereum mainnet at start of the list of default tokens for the Ethereum mainnet. Here the `1` represents the chainId of Ethereum mainnet.
+ *
+ * ```tsx
+ * const ethereumChainId = 1;
+ *
+ * <ConnectButton supportedTokens={{
+ *  ...defaultTokens,
+ *  [ethereumChainId]: [
+ *    {
+ *      address: 'YOUR_TOKEN_ADDRESS',
+ *      name: 'YOUR_TOKEN_NAME',
+ *      symbol: 'YOUR_TOKEN_SYMBOL',
+ *      icon: 'YOUR_TOKEN_ICON_URL'
+ *    },
+ *    ...defaultTokens[ethereumChainId],
+ *  ]
+ * }} />
+ * ```
+ */
+export const defaultTokens = DEFAULT_TOKENS as unknown as SupportedTokens;
+
+type SupportedSymbol =
+  (typeof DEFAULT_TOKENS)[keyof typeof DEFAULT_TOKENS][number]["symbol"];
+
+export function getDefaultToken(chain: Chain, symbol: SupportedSymbol) {
+  const tokens = defaultTokens[chain.id];
+  return tokens?.find((t) => t.symbol === symbol);
+}

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

@@ -5,12 +5,75 @@ import type { ThirdwebClient } from "../../../client/client.js";
 import { resolveAvatar } from "../../../extensions/ens/resolve-avatar.js";
 import { resolveName } from "../../../extensions/ens/resolve-name.js";
 import { getWalletInfo } from "../../../wallets/__generated__/getWalletInfo.js";
-import type { Account } from "../../../wallets/interfaces/wallet.js";
+import type { Account, Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { WalletInfo } from "../../../wallets/wallet-info.js";
 import type { WalletId } from "../../../wallets/wallet-types.js";
 import { useWalletBalance } from "../hooks/others/useWalletBalance.js";
 import { shortenString } from "./addresses.js";
 
+/**
+ * Get the ENS name and avatar for an address
+ * @param options - the client and address to get the ENS name and avatar for
+ * @returns - a query object that resolves to the ENS name
+ * @example
+ * ```tsx
+ * import { useEnsName } from "thirdweb/react";
+ *
+ * const { data: ensName } = useEnsName({
+ *  client,
+ *  address: "0x1234...",
+ * });
+ * ```
+ * @extension ENS
+ */
+export function useEnsName(options: {
+  client: ThirdwebClient;
+  address: string | undefined;
+}) {
+  const { client, address } = options;
+  return useQuery({
+    queryKey: ["ens-name", address],
+    enabled: !!address,
+    queryFn: () =>
+      resolveName({
+        client,
+        address: address || "",
+        resolverChain: ethereum,
+      }),
+  });
+}
+
+/**
+ * Get the ENS avatar for an ENS name
+ * @param options - the client and ENS name to get the avatar for
+ * @returns - a query object that resolves to the avatar
+ * @example
+ * ```tsx
+ * import { useEnsAvatar } from "thirdweb/react";
+ *
+ * const { data: ensAvatar } = useEnsAvatar({
+ *  client,
+ *  ensName: "my-ens-name.eth",
+ * });
+ * ```
+ * @extension ENS
+ */
+export function useEnsAvatar(options: {
+  client: ThirdwebClient;
+  ensName: string | null | undefined;
+}) {
+  const { client, ensName } = options;
+  return useQuery({
+    queryKey: ["ens-avatar", ensName],
+    enabled: !!ensName,
+    queryFn: async () =>
+      resolveAvatar({
+        client,
+        name: ensName || "",
+      }),
+  });
+}
+
 /**
  * @internal
  */
@@ -25,25 +88,14 @@ export function useConnectedWalletDetails(
       ? displayBalanceToken[Number(walletChain.id)]
       : undefined;
 
-  const ensNameQuery = useQuery({
-    queryKey: ["ens-name", activeAccount?.address],
-    enabled: !!activeAccount?.address,
-    queryFn: () =>
-      resolveName({
-        client,
-        address: activeAccount?.address || "",
-        resolverChain: ethereum,
-      }),
+  const ensNameQuery = useEnsName({
+    client,
+    address: activeAccount?.address,
   });
 
-  const ensAvatarQuery = useQuery({
-    queryKey: ["ens-avatar", ensNameQuery.data],
-    enabled: !!ensNameQuery.data,
-    queryFn: async () =>
-      resolveAvatar({
-        client,
-        name: ensNameQuery.data || "",
-      }),
+  const ensAvatarQuery = useEnsAvatar({
+    client,
+    ensName: ensNameQuery.data,
   });
 
   const shortAddress = activeAccount?.address
@@ -107,3 +159,35 @@ export function useWalletImage(id: WalletId | undefined) {
     enabled: !!id,
   });
 }
+
+/**
+ * @internal
+ */
+export function hasSponsoredTransactionsEnabled(wallet: Wallet | undefined) {
+  if (!wallet) {
+    return false;
+  }
+  let sponsoredTransactionsEnabled = false;
+  if (wallet && wallet.id === "smart") {
+    const options = (wallet as Wallet<"smart">).getConfig();
+    if ("sponsorGas" in options) {
+      sponsoredTransactionsEnabled = options.sponsorGas;
+    }
+    if ("gasless" in options) {
+      sponsoredTransactionsEnabled = options.gasless;
+    }
+  }
+  if (wallet && wallet.id === "inApp") {
+    const options = (wallet as Wallet<"inApp">).getConfig();
+    if (options && "smartAccount" in options && options.smartAccount) {
+      const smartOptions = options.smartAccount;
+      if ("sponsorGas" in smartOptions) {
+        sponsoredTransactionsEnabled = smartOptions.sponsorGas;
+      }
+      if ("gasless" in smartOptions) {
+        sponsoredTransactionsEnabled = smartOptions.gasless;
+      }
+    }
+  }
+  return sponsoredTransactionsEnabled;
+}

package/src/react/native/hooks/transaction/useSendTransaction.tsx

@@ -2,8 +2,8 @@ import {
   type SendTransactionConfig,
   useSendTransactionCore,
 } from "../../../core/hooks/transaction/useSendTransaction.js";
-import { useActiveWallet } from "../wallets/useActiveWallet.js";
-import { useSwitchActiveWalletChain } from "../wallets/useSwitchActiveWalletChain.js";
+import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
+import { useSwitchActiveWalletChain } from "../../../core/hooks/wallets/useSwitchActiveWalletChain.js";
 
 /**
  * A hook to send a transaction.

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

@@ -1,7 +1,6 @@
 import { nativeLocalStorage } from "../../../../utils/storage/nativeStorage.js";
 import type { AutoConnectProps } from "../../../core/hooks/connection/types.js";
 import { useAutoConnectCore } from "../../../core/hooks/wallets/useAutoConnect.js";
-import { connectionManager } from "../../index.js";
 import { getDefaultWallets } from "../../wallets/defaultWallets.js";
 
 /**
@@ -24,7 +23,7 @@ import { getDefaultWallets } from "../../wallets/defaultWallets.js";
  * @returns whether the auto connect was successful.
  */
 export function useAutoConnect(props: AutoConnectProps) {
-  return useAutoConnectCore(connectionManager, nativeLocalStorage, {
+  return useAutoConnectCore(nativeLocalStorage, {
     ...props,
     wallets: props.wallets || getDefaultWallets(props),
   });

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

@@ -0,0 +1,43 @@
+"use client";
+import { useMemo } from "react";
+import { nativeLocalStorage } from "../../../utils/storage/nativeStorage.js";
+import {
+  type ConnectionManager,
+  createConnectionManager,
+} from "../../../wallets/manager/index.js";
+import { ThirdwebProviderCore } from "../../core/providers/thirdweb-provider.js";
+
+/**
+ * The ThirdwebProvider is component is a provider component that sets up the React Query client.
+ * @param props - The props for the ThirdwebProvider
+ * @example
+ * ```jsx
+ * import { ThirdwebProvider } from "thirdweb/react";
+ *
+ * function Example() {
+ *  return (
+ *    <ThirdwebProvider>
+ *      <App />
+ *    </ThirdwebProvider>
+ *   )
+ * }
+ * ```
+ * @component
+ */
+export function ThirdwebProvider(
+  props: React.PropsWithChildren<{
+    connectionManager?: ConnectionManager;
+  }>,
+) {
+  const connectionManager = useMemo(
+    () =>
+      props.connectionManager || createConnectionManager(nativeLocalStorage),
+    [props.connectionManager],
+  );
+
+  return (
+    <ThirdwebProviderCore manager={connectionManager}>
+      {props.children}
+    </ThirdwebProviderCore>
+  );
+}

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

@@ -1,8 +1,8 @@
 "use client";
 import { useEffect } from "react";
 import type { AutoConnectProps } from "../../../core/hooks/connection/types.js";
+import { useSetActiveWalletConnectionStatus } from "../../../core/hooks/wallets/useSetActiveWalletConnectionStatus.js";
 import { useAutoConnect } from "../../hooks/wallets/useAutoConnect.js";
-import { useSetActiveWalletConnectionStatus } from "../../hooks/wallets/useSetActiveWalletConnectionStatus.js";
 
 /**
  * AutoConnect last connected wallet on page reload or revisit.

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

@@ -13,9 +13,9 @@ 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 "../../hooks/wallets/useActiveAccount.js";
-import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
-import { useActiveWalletConnectionStatus } from "../../hooks/wallets/useActiveWalletConnectionStatus.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 { useAutoConnect } from "../../hooks/wallets/useAutoConnect.js";
 import { ThemedButton } from "../components/button.js";
 import { ThemedSpinner } from "../components/spinner.js";

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

@@ -9,11 +9,11 @@ import type { Theme } from "../../../core/design-system/index.js";
 import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
 import type { ConnectEmbedProps } from "../../../core/hooks/connection/ConnectEmbedProps.js";
+import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
+import { useDisconnect } from "../../../core/hooks/wallets/useDisconnect.js";
+import { useConnectionManager } from "../../../core/providers/connection-manager.js";
 import { useWalletInfo } from "../../../core/utils/wallet.js";
 import { radius, spacing } from "../../design-system/index.js";
-import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
-import { useDisconnect } from "../../hooks/wallets/useDisconnect.js";
-import { connectionManager } from "../../index.js";
 import { getDefaultWallets } from "../../wallets/defaultWallets.js";
 import { type ContainerType, Header } from "../components/Header.js";
 import { RNImage } from "../components/RNImage.js";
@@ -105,6 +105,7 @@ export function ConnectModal(
     | undefined;
   const externalWallets = wallets.filter((wallet) => wallet.id !== "inApp");
   const showBranding = props.connectModal?.showThirdwebBranding !== false;
+  const connectionManager = useConnectionManager();
 
   const connector = useCallback(
     async (args: {
@@ -145,7 +146,14 @@ export function ConnectModal(
         });
       }
     },
-    [client, accountAbstraction, onConnect, onClose, siweAuth],
+    [
+      client,
+      accountAbstraction,
+      onConnect,
+      onClose,
+      siweAuth,
+      connectionManager,
+    ],
   );
 
   let content: JSX.Element;

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

@@ -2,9 +2,9 @@ import { StyleSheet, View } from "react-native";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { parseTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
+import { useActiveWalletChain } from "../../../core/hooks/wallets/useActiveWalletChain.js";
 import { useConnectedWalletDetails } from "../../../core/utils/wallet.js";
 import { fontSize, spacing } from "../../design-system/index.js";
-import { useActiveWalletChain } from "../../hooks/wallets/useActiveWalletChain.js";
 import { Skeleton } from "../components/Skeleton.js";
 import { WalletImage } from "../components/WalletImage.js";
 import { ThemedButton } from "../components/button.js";

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

@@ -8,13 +8,13 @@ import type { Theme } from "../../../core/design-system/index.js";
 import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
 import { useChainName } from "../../../core/hooks/others/useChainQuery.js";
+import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
+import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
+import { useActiveWalletChain } from "../../../core/hooks/wallets/useActiveWalletChain.js";
+import { useDisconnect } from "../../../core/hooks/wallets/useDisconnect.js";
 import { hasSmartAccount } from "../../../core/utils/isSmartWallet.js";
 import { useConnectedWalletDetails } from "../../../core/utils/wallet.js";
 import { fontSize, radius, spacing } from "../../design-system/index.js";
-import { useActiveAccount } from "../../hooks/wallets/useActiveAccount.js";
-import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
-import { useActiveWalletChain } from "../../hooks/wallets/useActiveWalletChain.js";
-import { useDisconnect } from "../../hooks/wallets/useDisconnect.js";
 import { Address } from "../components/Address.js";
 import { ChainIcon } from "../components/ChainIcon.js";
 import { type ContainerType, Header } from "../components/Header.js";

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

@@ -3,14 +3,14 @@ import { StyleSheet, View } from "react-native";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import { useChainSymbol } from "../../../core/hooks/others/useChainQuery.js";
+import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
+import { useActiveWalletChain } from "../../../core/hooks/wallets/useActiveWalletChain.js";
+import { useSendToken } from "../../../core/hooks/wallets/useSendToken.js";
 import type {
   SupportedTokens,
   TokenInfo,
 } from "../../../core/utils/defaultTokens.js";
 import { radius, spacing } from "../../design-system/index.js";
-import { useActiveAccount } from "../../hooks/wallets/useActiveAccount.js";
-import { useActiveWalletChain } from "../../hooks/wallets/useActiveWalletChain.js";
-import { useSendToken } from "../../hooks/wallets/useSendToken.js";
 import { type ContainerType, Header } from "../components/Header.js";
 import { ThemedButton } from "../components/button.js";
 import { ThemedInput } from "../components/input.js";

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

@@ -3,14 +3,14 @@ import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import { useWalletBalance } from "../../../core/hooks/others/useWalletBalance.js";
+import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
+import { useActiveWalletChain } from "../../../core/hooks/wallets/useActiveWalletChain.js";
 import {
   type SupportedTokens,
   type TokenInfo,
   defaultTokens,
 } from "../../../core/utils/defaultTokens.js";
 import { spacing } from "../../design-system/index.js";
-import { useActiveAccount } from "../../hooks/wallets/useActiveAccount.js";
-import { useActiveWalletChain } from "../../hooks/wallets/useActiveWalletChain.js";
 import { RNImage } from "../components/RNImage.js";
 import { Skeleton } from "../components/Skeleton.js";
 import { TokenIcon } from "../components/TokenIcon.js";

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

@@ -4,8 +4,8 @@ import {
   type TransactionButtonProps,
   useTransactionButtonMutation,
 } from "../../../core/hooks/transaction/transaction-button-utils.js";
+import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
 import { useSendTransaction } from "../../hooks/transaction/useSendTransaction.js";
-import { useActiveAccount } from "../../hooks/wallets/useActiveAccount.js";
 import { ThemedButton } from "../components/button.js";
 import { ThemedSpinner } from "../components/spinner.js";