@frak-labs/react-sdk/dist/index.d.ts

React SDK of the Frak wallet, low level library to interact directly with the frak ecosystem.

import { ProcessReferralOptions, SendTransactionParams, SiweAuthenticateModalParams } from "@frak-labs/core-sdk/actions";
import { FrakRpcError } from "@frak-labs/frame-connector";
import * as _tanstack_react_query0 from "@tanstack/react-query";
import { UseMutationOptions, UseQueryOptions } from "@tanstack/react-query";
import * as react from "react";
import { CSSProperties, PropsWithChildren, ReactNode } from "react";
import * as _frak_labs_core_sdk0 from "@frak-labs/core-sdk";
import { DisplayModalParamsType, FrakClient, FrakWalletSdkConfig, GetMerchantInformationReturnType, ModalRpcStepsResultType, ModalStepTypes, OpenSsoParamsType, OpenSsoReturnType, PrepareSsoParamsType, SendTransactionReturnType, SiweAuthenticateReturnType, WalletStatusReturnType } from "@frak-labs/core-sdk";

//#region src/hook/helper/useReferralInteraction.d.ts
/**
 * Helper hook to automatically submit a referral interaction when detected
 *
 * @group hooks
 *
 * @param args
 * @param args.options - Some options for the referral interaction
 *
 * @returns  The resulting referral state, or a potential error
 *
 * @description This function will automatically handle the referral interaction process
 *
 * @see {@link @frak-labs/core-sdk!actions.processReferral | `processReferral()`} for more details on the automatic referral handling process
 */
declare function useReferralInteraction({
  options
}?: {
  options?: ProcessReferralOptions;
}): "processing" | Error | "no-referrer" | "idle" | "success" | "self-referral";
//#endregion
//#region src/hook/useDisplayModal.d.ts
/** @ignore */
type MutationOptions$3<T extends ModalStepTypes[]> = Omit<UseMutationOptions<ModalRpcStepsResultType<T>, FrakRpcError, DisplayModalParamsType<T>>, "mutationFn" | "mutationKey">;
/** @inline */
interface UseDisplayModalParams<T extends ModalStepTypes[] = ModalStepTypes[]> {
  /**
   * Optional mutation options, see {@link @tanstack/react-query!useMutation | `useMutation()`} for more infos
   */
  mutations?: MutationOptions$3<T>;
}
/**
 * Hook that return a mutation helping to display a modal to the user
 *
 * It's a {@link @tanstack/react-query!home | `tanstack`} wrapper around the {@link @frak-labs/core-sdk!actions.displayModal | `displayModal()`} action
 *
 * @param args - Optional config object with `mutations` for customizing the underlying {@link @tanstack/react-query!useMutation | `useMutation()`}
 *
 * @typeParam T
 * The modal steps types to display (the result will correspond to the steps types asked in params)
 * An array of {@link @frak-labs/core-sdk!index.ModalStepTypes | `ModalStepTypes`}
 * If not provided, it will default to a generic array of `ModalStepTypes`
 *
 * @group hooks
 *
 * @returns
 * The mutation hook wrapping the `displayModal()` action
 * The `mutate` and `mutateAsync` argument is of type {@link @frak-labs/core-sdk!index.DisplayModalParamsType | `DisplayModalParamsType<T>`}, with type params `T` being the modal steps types to display
 * The `data` result is a {@link @frak-labs/core-sdk!index.ModalRpcStepsResultType | `ModalRpcStepsResultType`}
 *
 * @see {@link @frak-labs/core-sdk!actions.displayModal | `displayModal()`} for more info about the underlying action
 * @see {@link @tanstack/react-query!useMutation | `useMutation()`} for more info about the mutation options and response
 */
declare function useDisplayModal<T extends ModalStepTypes[] = ModalStepTypes[]>({
  mutations
}?: UseDisplayModalParams<T>): _tanstack_react_query0.UseMutationResult<ModalRpcStepsResultType<T>, FrakRpcError<undefined>, DisplayModalParamsType<T>, unknown>;
//#endregion
//#region src/hook/useFrakClient.d.ts
/**
 * Get the current Frak client
 *
 * @group hooks
 */
declare function useFrakClient(): _frak_labs_core_sdk0.FrakClient | undefined;
//#endregion
//#region src/hook/useFrakConfig.d.ts
/**
 * Get the current Frak config
 * @throws {FrakRpcError} if the config is not found (only if this hooks is used outside a FrakConfigProvider)
 * @group hooks
 *
 * @see {@link @frak-labs/react-sdk!FrakConfigProvider | FrakConfigProvider} for the config provider
 * @see {@link @frak-labs/core-sdk!index.FrakWalletSdkConfig | FrakWalletSdkConfig} for the config type
 */
declare function useFrakConfig(): _frak_labs_core_sdk0.FrakWalletSdkConfig;
//#endregion
//#region src/hook/useGetMerchantInformation.d.ts
/** @ignore */
type QueryOptions = Omit<UseQueryOptions<GetMerchantInformationReturnType, FrakRpcError, GetMerchantInformationReturnType>, "queryKey" | "queryFn">;
/** @inline */
interface UseGetMerchantInformationParams {
  /**
   * Optional query options, see {@link @tanstack/react-query!useQuery | `useQuery()`} for more infos
   */
  query?: QueryOptions;
}
/**
 * Hook that return a query helping to get the current merchant information
 *
 * It's a {@link @tanstack/react-query!home | `tanstack`} wrapper around the {@link @frak-labs/core-sdk!actions.getMerchantInformation | `getMerchantInformation()`} action
 *
 * @param args - Optional config object with `query` for customizing the underlying {@link @tanstack/react-query!useQuery | `useQuery()`}
 *
 * @group hooks
 *
 * @returns
 * The query hook wrapping the `getMerchantInformation()` action
 * The `data` result is a {@link @frak-labs/core-sdk!index.GetMerchantInformationReturnType | `GetMerchantInformationReturnType`}
 *
 * @see {@link @frak-labs/core-sdk!actions.getMerchantInformation | `getMerchantInformation()`} for more info about the underlying action
 * @see {@link @tanstack/react-query!useQuery | `useQuery()`} for more info about the useQuery options and response
 */
declare function useGetMerchantInformation({
  query
}?: UseGetMerchantInformationParams): _tanstack_react_query0.UseQueryResult<GetMerchantInformationReturnType, FrakRpcError<undefined>>;
//#endregion
//#region src/hook/useOpenSso.d.ts
/** @ignore */
type MutationOptions$2 = Omit<UseMutationOptions<OpenSsoReturnType, FrakRpcError, OpenSsoParamsType>, "mutationFn" | "mutationKey">;
/** @inline */
interface UseOpenSsoParams {
  /**
   * Optional mutation options, see {@link @tanstack/react-query!useMutation | `useMutation()`} for more infos
   */
  mutations?: MutationOptions$2;
}
/**
 * Hook that return a mutation helping to open the SSO page
 *
 * It's a {@link @tanstack/react-query!home | `tanstack`} wrapper around the {@link @frak-labs/core-sdk!actions.openSso | `openSso()`} action
 *
 * @param args - Optional config object with `mutations` for customizing the underlying {@link @tanstack/react-query!useMutation | `useMutation()`}
 *
 * @group hooks
 *
 * @returns
 * The mutation hook wrapping the `openSso()` action
 * The `mutate` and `mutateAsync` argument is of type {@link @frak-labs/core-sdk!index.OpenSsoParamsType | `OpenSsoParamsType`}
 * The mutation doesn't output any value
 *
 * @see {@link @frak-labs/core-sdk!actions.openSso | `openSso()`} for more info about the underlying action
 * @see {@link @tanstack/react-query!useMutation | `useMutation()`} for more info about the mutation options and response
 */
declare function useOpenSso({
  mutations
}?: UseOpenSsoParams): _tanstack_react_query0.UseMutationResult<OpenSsoReturnType, FrakRpcError<undefined>, OpenSsoParamsType, unknown>;
//#endregion
//#region src/hook/usePrepareSso.d.ts
/**
 * Hook that generates SSO URL for popup flow
 *
 * This is a **synchronous** hook (no async calls) that generates the SSO URL
 * client-side without communicating with the wallet iframe.
 *
 * @param params - SSO parameters for URL generation
 *
 * @group hooks
 *
 * @returns
 * Object containing:
 * - `ssoUrl`: Generated SSO URL (or undefined if client not ready)
 * - `isReady`: Boolean indicating if URL is available
 *
 * @example
 * ```tsx
 * function MyComponent() {
 *   const { data } = usePrepareSso({
 *     metadata: { logoUrl: "..." },
 *     directExit: true
 *   });
 *
 *   const handleClick = () => {
 *     if (ssoUrl) {
 *       window.open(data?.ssoUrl, "_blank");
 *     }
 *   };
 *
 *   return <button onClick={handleClick} disabled={!isReady}>Login</button>;
 * }
 * ```
 *
 * @see {@link @frak-labs/core-sdk!actions.prepareSso | `prepareSso()`} for the underlying action
 * @see {@link @frak-labs/core-sdk!actions.openSso | `openSso()`} for the recommended high-level API
 */
declare function usePrepareSso(params: PrepareSsoParamsType): _tanstack_react_query0.UseQueryResult<_frak_labs_core_sdk0.PrepareSsoReturnType, Error>;
//#endregion
//#region src/hook/useSendTransaction.d.ts
/** @ignore */
type MutationOptions$1 = Omit<UseMutationOptions<SendTransactionReturnType, FrakRpcError, SendTransactionParams>, "mutationFn" | "mutationKey">;
/** @inline */
interface UseSendTransactionParams {
  /**
   * Optional mutation options, see {@link @tanstack/react-query!useMutation | `useMutation()`} for more infos
   */
  mutations?: MutationOptions$1;
}
/**
 * Hook that return a mutation helping to send a transaction
 *
 * It's a {@link @tanstack/react-query!home | `tanstack`} wrapper around the {@link @frak-labs/core-sdk!actions.sendTransaction | `sendTransaction()`} action
 *
 * @param args - Optional config object with `mutations` for customizing the underlying {@link @tanstack/react-query!useMutation | `useMutation()`}
 *
 * @group hooks
 *
 * @returns
 * The mutation hook wrapping the `sendTransaction()` action
 * The `mutate` and `mutateAsync` argument is of type {@link @frak-labs/core-sdk!actions.SendTransactionParams | `SendTransactionParams`}
 * The `data` result is a {@link @frak-labs/core-sdk!index.SendTransactionReturnType | `SendTransactionReturnType`}
 *
 * @see {@link @frak-labs/core-sdk!actions.sendTransaction | `sendTransaction()`} for more info about the underlying action
 * @see {@link @tanstack/react-query!useMutation | `useMutation()`} for more info about the mutation options and response
 */
declare function useSendTransactionAction({
  mutations
}?: UseSendTransactionParams): _tanstack_react_query0.UseMutationResult<SendTransactionReturnType, FrakRpcError<undefined>, SendTransactionParams, unknown>;
//#endregion
//#region src/hook/useSiweAuthenticate.d.ts
/** @inline */
type MutationOptions = Omit<UseMutationOptions<SiweAuthenticateReturnType, FrakRpcError, SiweAuthenticateModalParams>, "mutationFn" | "mutationKey">;
/** @ignore */
interface UseSiweAuthenticateParams {
  /**
   * Optional mutation options, see {@link @tanstack/react-query!useMutation | `useMutation()`} for more infos
   */
  mutations?: MutationOptions;
}
/**
 * Hook that return a mutation helping to send perform a SIWE authentication
 *
 * It's a {@link @tanstack/react-query!home | `tanstack`} wrapper around the {@link @frak-labs/core-sdk!actions.siweAuthenticate | `siweAuthenticate()`} action
 *
 * @param args - Optional config object with `mutations` for customizing the underlying {@link @tanstack/react-query!useMutation | `useMutation()`}
 *
 * @group hooks
 *
 * @returns
 * The mutation hook wrapping the `siweAuthenticate()` action
 * The `mutate` and `mutateAsync` argument is of type {@link @frak-labs/core-sdk!actions.SiweAuthenticateModalParams | `SiweAuthenticateModalParams`}
 * The `data` result is a {@link @frak-labs/core-sdk!index.SiweAuthenticateReturnType | `SiweAuthenticateReturnType`}
 *
 * @see {@link @frak-labs/core-sdk!actions.siweAuthenticate | `siweAuthenticate()`} for more info about the underlying action
 * @see {@link @tanstack/react-query!useMutation | `useMutation()`} for more info about the mutation options and response
 */
declare function useSiweAuthenticate({
  mutations
}?: UseSiweAuthenticateParams): _tanstack_react_query0.UseMutationResult<SiweAuthenticateReturnType, FrakRpcError<undefined>, SiweAuthenticateModalParams, unknown>;
//#endregion
//#region src/hook/useWalletStatus.d.ts
/**
 * Hook that return a query helping to get the current wallet status.
 *
 * It's a {@link @tanstack/react-query!home | `tanstack`} wrapper around the {@link @frak-labs/core-sdk!actions.watchWalletStatus | `watchWalletStatus()`} action
 *
 * @group hooks
 *
 * @returns
 * The query hook wrapping the `watchWalletStatus()` action
 * The `data` result is a {@link @frak-labs/core-sdk!index.WalletStatusReturnType | `WalletStatusReturnType`}
 *
 * @see {@link @frak-labs/core-sdk!actions.watchWalletStatus | `watchWalletStatus()`} for more info about the underlying action
 * @see {@link @tanstack/react-query!useQuery | `useQuery()`} for more info about the useQuery response
 */
declare function useWalletStatus(): _tanstack_react_query0.UseQueryResult<WalletStatusReturnType, Error>;
//#endregion
//#region src/provider/FrakConfigProvider.d.ts
/**
 * The context that will keep the Frak Wallet SDK configuration
 * @ignore
 */
declare const FrakConfigContext: react.Context<FrakWalletSdkConfig | undefined>;
/**
 * Props to instantiate the Frak Wallet SDK configuration provider
 *
 * @group provider
 */
type FrakConfigProviderProps = {
  /**
   * The wanted Frak configuration
   * @see {@link @frak-labs/core-sdk!index.FrakWalletSdkConfig | FrakWalletSdkConfig}
   */
  config: FrakWalletSdkConfig;
};
/**
 * Simple config provider for the Frak Wallet SDK
 *
 * Should be wrapped within a {@link @tanstack/react-query!QueryClientProvider | `QueryClientProvider`}
 *
 * @group provider
 *
 * @param parameters
 */
declare function FrakConfigProvider(parameters: PropsWithChildren<FrakConfigProviderProps>): react.FunctionComponentElement<react.ProviderProps<FrakWalletSdkConfig | undefined>>;
//#endregion
//#region src/provider/FrakIFrameClientProvider.d.ts
/**
 * The context that will keep the Frak Wallet SDK client
 * @ignore
 */
declare const FrakIFrameClientContext: react.Context<FrakClient | undefined>;
/**
 * Props to instantiate the Frak Wallet SDK configuration provider
 *
 * @group provider
 */
type FrakIFrameClientProps = {
  config: FrakWalletSdkConfig;
};
/**
 * IFrame client provider for the Frak Wallet SDK
 * It will automatically create the frak wallet iFrame (required for the wallet to communicate with the SDK securely), and provide it in the context
 *
 * @group provider
 *
 * @remarks
 * This provider must be wrapped within a {@link FrakConfigProvider} to work properly
 *
 * @param args
 * @param args.style - Some custom styles to apply to the iFrame
 * @param args.children - Descedant components that will have access to the Frak Client
 */
declare function FrakIFrameClientProvider({
  style,
  children
}: {
  style?: CSSProperties;
  children?: ReactNode;
}): react.FunctionComponentElement<react.FragmentProps>;
//#endregion
export { FrakConfigContext, FrakConfigProvider, type FrakConfigProviderProps, FrakIFrameClientContext, type FrakIFrameClientProps, FrakIFrameClientProvider, useDisplayModal, useFrakClient, useFrakConfig, useGetMerchantInformation, useOpenSso, usePrepareSso, useReferralInteraction, useSendTransactionAction, useSiweAuthenticate, useWalletStatus };