thirdweb 5.40.0 → 5.40.1-nightly-b128530355f0dc47d897bd2ef7c3823752ea9b6c-20240727000321

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

@@ -1,26 +0,0 @@
-import type { UseQueryOptions, UseQueryResult } from "@tanstack/react-query";
-import type { GetCapabilitiesResult } from "../../../../wallets/eip5792/get-capabilities.js";
-import { useCapabilitiesCore } from "../../../core/hooks/wallets/useCapabilities.js";
-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.
- * **The returned object contains a `message` field detailing any issues with the wallet's support for EIP-5792.**
- *
- * @returns a React Query object.
- * @beta
- * @example
- * ```tsx
- * import { useCapabilities } from "thirdweb/react";
- * const { data: capabilities, isLoading } = useCapabilities();
- * ```
- * @extension EIP5792
- */
-export function useCapabilities(options?: {
-  queryOptions?: Pick<UseQueryOptions, "enabled" | "retry">;
-}): UseQueryResult<GetCapabilitiesResult> {
-  const wallet = useActiveWallet();
-  return useCapabilitiesCore(options, wallet);
-}

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

@@ -1,37 +0,0 @@
-import type { ConnectManagerOptions } from "../../../../wallets/manager/index.js";
-import { useConnectCore } from "../../../core/hooks/wallets/useConnect.js";
-import { connectionManager } from "../../index.js";
-
-/**
- * A hook to set a wallet as active wallet
- * @returns A function that lets you connect a wallet.
- * @example
- * ```jsx
- * import { useConnect } from "thirdweb/react";
- * import { createWallet } from "thirdweb/wallets";
- *
- * function Example() {
- *   const { connect, isConnecting, error } = useConnect();
- *   return (
- *     <button
- *       onClick={() =>
- *         connect(async () => {
- *           // instantiate wallet
- *           const wallet = createWallet("io.metamask");
- *           // connect wallet
- *           await wallet.connect();
- *           // return the wallet
- *           return wallet;
- *         })
- *       }
- *     >
- *       Connect
- *     </button>
- *   );
- * }
- * ```
- * @walletConnection
- */
-export function useConnect(options?: ConnectManagerOptions) {
-  return useConnectCore(connectionManager, options);
-}

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

@@ -1,17 +0,0 @@
-import { useConnectedWalletsCore } from "../../../core/hooks/wallets/useConnectedWallets.js";
-import { connectionManager } from "../../index.js";
-
-/**
- * A hook that returns all connected wallets
- * @returns An array of all connected wallets
- * @example
- * ```jsx
- * import { useConnectedWallets } from "thirdweb/react";
- *
- * const wallets = useConnectedWallets();
- * ```
- * @walletConnection
- */
-export function useConnectedWallets() {
-  return useConnectedWalletsCore(connectionManager);
-}

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

@@ -1,26 +0,0 @@
-import { useDisconnectCore } from "../../../core/hooks/wallets/useDisconnect.js";
-import { connectionManager } from "../../index.js";
-
-/**
- * Disconnect from given account
- * @example
- * ```jsx
- * import { useDisconnect, useActiveWallet } from "thirdweb/react";
- *
- * function Example() {
- *   const { disconnect } = useDisconnect();
- *   const wallet = useActiveWallet();
- *
- *   return (
- *     <button onClick={() => disconnect(wallet)}>
- *       Disconnect
- *     </button>
- *   );
- * }
- * ```
- * @walletConnection
- * @returns An object with a function to disconnect an account
- */
-export function useDisconnect() {
-  return useDisconnectCore(connectionManager);
-}

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

@@ -1,19 +0,0 @@
-import { useIsAutoConnectingCore } from "../../../core/hooks/wallets/useIsAutoConnecting.js";
-import { connectionManager } from "../../index.js";
-
-/**
- * A hook to check if the auto connect is in progress.
- * @example
- * ```jsx
- * function Example() {
- *   const isAutoConnecting = useIsAutoConnecting();
- *
- *   return <div> ... </div>;
- * }
- * ```
- * @returns A boolean indicating if the auto connect is in progress.
- * @walletConnection
- */
-export function useIsAutoConnecting() {
-  return useIsAutoConnectingCore(connectionManager);
-}

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

@@ -1,86 +0,0 @@
-import type { UseMutationResult } from "@tanstack/react-query";
-import type { ThirdwebClient } from "../../../../client/client.js";
-import {
-  type SendCallsOptions,
-  sendCalls,
-} from "../../../../wallets/eip5792/send-calls.js";
-import type {
-  GetCallsStatusResponse,
-  WalletSendCallsId,
-} from "../../../../wallets/eip5792/types.js";
-import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
-import { useSendCallsCore } from "../../../core/hooks/wallets/useSendCalls.js";
-import { useActiveWallet } from "./useActiveWallet.js";
-
-/**
- * A hook to send [EIP-5792](https://eips.ethereum.org/EIPS/eip-5792) calls to a wallet.
- * This hook works with all Thirdweb wallets (in-app and smart) and certain injected wallets that already support EIP-5792.
- * Transactions will be bundled and sponsored when those capabilities are supported, otherwise they will be sent as individual transactions.
- * 
- * 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.
- *
- * @returns A React Query mutatuon object to interact with {@link sendCalls}
- * @throws an error if the wallet does not support EIP-5792.
- * @returns The ID of the bundle of the calls.
- *
- * @beta
- * @example
- * ```tsx
- * import { useSendCalls } from "thirdweb/react";
- * 
- * const sendTx1 = approve({
-      contract: USDT_CONTRACT,
-      amount: 100,
-      spender: "0x33d9B8BEfE81027E2C859EDc84F5636cbb202Ed6",
-    });
- * const sendTx2 = approve({
-      contract: USDT_CONTRACT,
-      amount: 100,
-      spender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
-    });
- * const { mutate: sendCalls, data: bundleId } = useSendCalls({ client });
- * await sendCalls({
- *   wallet,
- *   client,
- *   calls: [sendTx1, sendTx2],
- * });
- * ```
- * Await the bundle's full confirmation:
- * ```tsx
- * const { mutate: sendCalls, data: bundleId } = useSendCalls({ client, waitForResult: true });
- * await sendCalls({
- *   wallet,
- *   client,
- *   calls: [sendTx1, sendTx2],
- * });
- * ```
- * Sponsor transactions with a paymaster:
- * ```ts
- * const { mutate: sendCalls, data: bundleId } = useSendCalls();
- * await sendCalls({
- *   client,
- *   calls: [sendTx1, sendTx2],
- *   capabilities: {
- *     paymasterService: {
- *       url: `https://${CHAIN.id}.bundler.thirdweb.com/${client.clientId}`
- *     }
- *   }
- * });
- * @note We recommend proxying any paymaster calls via an API route you setup and control.
- * ```
- * @extension EIP5792
- */
-export function useSendCalls({
-  client,
-  waitForResult = true,
-}: { client: ThirdwebClient; waitForResult?: boolean }): UseMutationResult<
-  GetCallsStatusResponse | WalletSendCallsId,
-  Error,
-  Omit<SendCallsOptions, "chain" | "wallet"> & { wallet?: Wallet } // Optional wallet override
-> {
-  const wallet = useActiveWallet();
-  return useSendCallsCore({ client, waitForResult }, wallet);
-}

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

@@ -1,29 +0,0 @@
-import type { ThirdwebClient } from "../../../../client/client.js";
-import { useSendTokenCore } from "../../../core/hooks/wallets/useSendToken.js";
-import { useActiveWallet } from "./useActiveWallet.js";
-
-/**
- * Send Native or ERC20 tokens from active wallet to given address.
- * @example
- * ```tsx
- * const { mutate: sendToken } = useSendToken(client);
- *
- * // send native currency
- * sendToken({
- *    receiverAddress: "0x...",
- *    amount: "0.1",
- * });
- *
- * // send ERC20
- * sendToken({
- *   tokenAddress,
- *   receiverAddress: "0x...",
- *   amount: "0.5",
- * });
- * ```
- * @wallet
- */
-export function useSendToken(client: ThirdwebClient) {
-  const wallet = useActiveWallet();
-  return useSendTokenCore(client, wallet);
-}

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

@@ -1,20 +0,0 @@
-import { useSetActiveWalletCore } from "../../../core/hooks/wallets/useSetActiveWallet.js";
-import { connectionManager } from "../../index.js";
-
-/**
- * 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() {
-  return useSetActiveWalletCore(connectionManager);
-}

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

@@ -1,20 +0,0 @@
-import { useSetActiveWalletConnectionStatusCore } from "../../../core/hooks/wallets/useSetActiveWalletConnectionStatus.js";
-import { connectionManager } from "../../index.js";
-
-/**
- * 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() {
-  return useSetActiveWalletConnectionStatusCore(connectionManager);
-}

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

@@ -1,21 +0,0 @@
-import { useSwitchActiveWalletChainCore } from "../../../core/hooks/wallets/useSwitchActiveWalletChain.js";
-import { connectionManager } from "../../index.js";
-
-/**
- * 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() {
-  return useSwitchActiveWalletChainCore(connectionManager);
-}

package/src/react/web/index.ts

@@ -1,4 +0,0 @@
-import { webLocalStorage } from "../../utils/storage/webStorage.js";
-import { connectionManagerSingleton } from "../core/connectionManager.js";
-
-export const connectionManager = connectionManagerSingleton(webLocalStorage);

package/src/react/web/ui/ConnectWallet/Modal/ConnectModalInline.tsx

@@ -1,227 +0,0 @@
-"use client";
-import { Cross2Icon } from "@radix-ui/react-icons";
-import type { Chain } from "../../../../../chains/types.js";
-import type { ThirdwebClient } from "../../../../../client/client.js";
-import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
-import type { SmartWalletOptions } from "../../../../../wallets/smart/types.js";
-import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
-import {
-  type Theme,
-  iconSize,
-  radius,
-  shadow,
-} from "../../../../core/design-system/index.js";
-import type { SiweAuthOptions } from "../../../../core/hooks/auth/useSiweAuth.js";
-import { WalletUIStatesProvider } from "../../../providers/wallet-ui-states-provider.js";
-import { canFitWideModal } from "../../../utils/canFitWideModal.js";
-import { DynamicHeight } from "../../components/DynamicHeight.js";
-import { CrossContainer } from "../../components/Modal.js";
-import { IconButton } from "../../components/buttons.js";
-import { StyledDiv } from "../../design-system/elements.js";
-import type { LocaleId } from "../../types.js";
-import {
-  modalMaxWidthCompact,
-  modalMaxWidthWide,
-  wideModalMaxHeight,
-} from "../constants.js";
-import type { ConnectLocale } from "../locale/types.js";
-import type { WelcomeScreen } from "../screens/types.js";
-import { ConnectModalContent } from "./ConnectModalContent.js";
-import { useSetupScreen } from "./screen.js";
-
-/**
- * @internal
- */
-export type ConnectModalInlineProps = {
-  chainId?: bigint;
-  className?: string;
-  theme?: "dark" | "light" | Theme;
-  modalTitle?: string;
-  modalTitleIconUrl?: string;
-  style?: React.CSSProperties;
-  modalSize?: "compact" | "wide";
-  termsOfServiceUrl?: string;
-  privacyPolicyUrl?: string;
-  showThirdwebBranding?: boolean;
-  accountAbstraction: SmartWalletOptions | undefined;
-  auth: SiweAuthOptions | undefined;
-  chain: Chain | undefined;
-  chains: Chain[] | undefined;
-  client: ThirdwebClient;
-  connectLocale: ConnectLocale;
-  size: "compact" | "wide";
-  welcomeScreen: WelcomeScreen;
-  meta: {
-    title?: string;
-    titleIconUrl?: string;
-    showThirdwebBranding?: boolean;
-    termsOfServiceUrl?: string;
-    privacyPolicyUrl?: string;
-  };
-  isEmbed: boolean;
-  localeId: LocaleId;
-  onConnect: ((wallet: Wallet) => void) | undefined;
-  recommendedWallets: Wallet[] | undefined;
-  showAllWallets: boolean | undefined;
-  wallets: Wallet[];
-  walletConnect:
-    | {
-        projectId?: string;
-      }
-    | undefined;
-};
-
-/**
- * @internal
- */
-export const ConnectModalInline = (props: ConnectModalInlineProps) => {
-  const modalSize =
-    !canFitWideModal() || props.wallets.length === 1 ? "compact" : props.size;
-
-  return (
-    <WalletUIStatesProvider theme={props.theme} isOpen={true}>
-      <ConnectModalInlineContent
-        className={props.className}
-        size={modalSize}
-        meta={props.meta}
-        welcomeScreen={props.welcomeScreen}
-        wallets={props.wallets}
-        accountAbstraction={props.accountAbstraction}
-        auth={props.auth}
-        chain={props.chain}
-        client={props.client}
-        connectLocale={props.connectLocale}
-        isEmbed={props.isEmbed}
-        localeId={props.localeId}
-        onConnect={props.onConnect}
-        recommendedWallets={props.recommendedWallets}
-        showAllWallets={props.showAllWallets}
-        chains={props.chains}
-        walletConnect={props.walletConnect}
-      />
-    </WalletUIStatesProvider>
-  );
-};
-
-function ConnectModalInlineContent(props: {
-  className?: string;
-  style?: React.CSSProperties;
-  accountAbstraction: SmartWalletOptions | undefined;
-  auth: SiweAuthOptions | undefined;
-  chain: Chain | undefined;
-  chains: Chain[] | undefined;
-  client: ThirdwebClient;
-  connectLocale: ConnectLocale;
-  size: "compact" | "wide";
-  welcomeScreen: WelcomeScreen | undefined;
-  meta: {
-    title?: string;
-    titleIconUrl?: string;
-    showThirdwebBranding?: boolean;
-    termsOfServiceUrl?: string;
-    privacyPolicyUrl?: string;
-  };
-  isEmbed: boolean;
-  localeId: LocaleId;
-  onConnect: ((wallet: Wallet) => void) | undefined;
-  recommendedWallets: Wallet[] | undefined;
-  showAllWallets: boolean | undefined;
-  wallets: Wallet[];
-  walletConnect:
-    | {
-        projectId?: string;
-      }
-    | undefined;
-}) {
-  const screenSetup = useSetupScreen({
-    size: props.size,
-    welcomeScreen: props.welcomeScreen,
-    wallets: props.wallets,
-  });
-
-  const content = (
-    <>
-      <ConnectModalContent
-        shouldSetActive={true}
-        screenSetup={screenSetup}
-        setModalVisibility={() => {
-          // noop
-        }}
-        isOpen={true}
-        onClose={() => {
-          // no op
-        }}
-        accountAbstraction={props.accountAbstraction}
-        auth={props.auth}
-        chain={props.chain}
-        client={props.client}
-        connectLocale={props.connectLocale}
-        size={props.size}
-        meta={props.meta}
-        welcomeScreen={props.welcomeScreen}
-        isEmbed={props.isEmbed}
-        onConnect={props.onConnect}
-        recommendedWallets={props.recommendedWallets}
-        showAllWallets={props.showAllWallets}
-        wallets={props.wallets}
-        chains={props.chains}
-        walletConnect={props.walletConnect}
-        modalHeader={undefined}
-        walletIdsToHide={undefined}
-      />
-
-      {/* close icon */}
-      <CrossContainer>
-        <IconButton type="button" aria-label="Close">
-          <Cross2Icon
-            width={iconSize.md}
-            height={iconSize.md}
-            style={{
-              color: "inherit",
-            }}
-          />
-        </IconButton>
-      </CrossContainer>
-    </>
-  );
-
-  return (
-    <ConnectModalInlineContainer
-      className={props.className}
-      style={{
-        height: props.size === "compact" ? "auto" : wideModalMaxHeight,
-        maxWidth:
-          props.size === "compact" ? modalMaxWidthCompact : modalMaxWidthWide,
-        ...props.style,
-      }}
-    >
-      {props.size === "compact" ? (
-        <DynamicHeight> {content} </DynamicHeight>
-      ) : (
-        content
-      )}
-    </ConnectModalInlineContainer>
-  );
-}
-
-const ConnectModalInlineContainer = /* @__PURE__ */ StyledDiv((_) => {
-  const theme = useCustomTheme();
-  return {
-    background: theme.colors.modalBg,
-    color: theme.colors.primaryText,
-    transition: "background 0.2s ease",
-    borderRadius: radius.xl,
-    width: "100%",
-    boxSizing: "border-box",
-    boxShadow: shadow.lg,
-    position: "relative",
-    border: `1px solid ${theme.colors.borderColor}`,
-    lineHeight: "normal",
-    overflow: "hidden",
-    fontFamily: theme.fontFamily,
-    "& *::selection": {
-      backgroundColor: theme.colors.primaryText,
-      color: theme.colors.modalBg,
-    },
-  };
-});