@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 { Context } from 'react';
import { CSSProperties } from 'react';
import { DisplayEmbeddedWalletParamsType } from '@frak-labs/core-sdk';
import { DisplayModalParamsType } from '@frak-labs/core-sdk';
import { FrakClient } from '@frak-labs/core-sdk';
import { FrakRpcError } from '@frak-labs/core-sdk';
import { FrakWalletSdkConfig } from '@frak-labs/core-sdk';
import { FunctionComponentElement } from 'react';
import { GetProductInformationReturnType } from '@frak-labs/core-sdk';
import { Hex } from 'viem';
import { ModalRpcStepsResultType } from '@frak-labs/core-sdk';
import { ModalStepTypes } from '@frak-labs/core-sdk';
import { OpenSsoParamsType } from '@frak-labs/core-sdk';
import { ProcessReferralOptions } from '@frak-labs/core-sdk/actions';
import { PropsWithChildren } from 'react';
import { ProviderProps } from 'react';
import { ReactNode } from 'react';
import { SendInteractionParamsType } from '@frak-labs/core-sdk';
import { SendInteractionReturnType } from '@frak-labs/core-sdk';
import { SendTransactionParams } from '@frak-labs/core-sdk/actions';
import { SendTransactionReturnType } from '@frak-labs/core-sdk';
import { SiweAuthenticateModalParams } from '@frak-labs/core-sdk/actions';
import { SiweAuthenticateReturnType } from '@frak-labs/core-sdk';
import { UseMutationOptions } from '@tanstack/react-query';
import { UseMutationResult } from '@tanstack/react-query';
import { UseQueryOptions } from '@tanstack/react-query';
import { UseQueryResult } from '@tanstack/react-query';
import { WalletStatusReturnType } from '@frak-labs/core-sdk';

/**
 * The context that will keep the Frak Wallet SDK configuration
 * @ignore
 */
export declare const FrakConfigContext: Context<FrakWalletSdkConfig | undefined>;

/**
 * Simple config provider for the Frak Wallet SDK
 *
 * Should be wrapped within a {@link @tanstack/react-query!QueryClientProvider | `QueryClientProvider`}
 *
 * @group provider
 *
 * @param parameters
 */
export declare function FrakConfigProvider(parameters: PropsWithChildren<FrakConfigProviderProps>): FunctionComponentElement<ProviderProps<FrakWalletSdkConfig | undefined>>;

/**
 * Props to instantiate the Frak Wallet SDK configuration provider
 *
 * @group provider
 */
export declare type FrakConfigProviderProps = {
    /**
     * The wanted Frak configuration
     * @see {@link @frak-labs/core-sdk!index.FrakWalletSdkConfig | FrakWalletSdkConfig}
     */
    config: FrakWalletSdkConfig;
};

/**
 * The context that will keep the Frak Wallet SDK client
 * @ignore
 */
export declare const FrakIFrameClientContext: Context<FrakClient | undefined>;

/**
 * Props to instantiate the Frak Wallet SDK configuration provider
 *
 * @group provider
 */
export declare 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
 */
export declare function FrakIFrameClientProvider({ style, children, }: {
    style?: CSSProperties;
    children?: ReactNode;
}): FunctionComponentElement<    {
children?: ReactNode | undefined;
}>;

/** @ignore */
declare type MutationOptions = Omit<UseMutationOptions<SendTransactionReturnType, FrakRpcError, SendTransactionParams>, "mutationFn" | "mutationKey">;

/** @ignore */
declare type MutationOptions_2 = Omit<UseMutationOptions<SendInteractionReturnType, FrakRpcError, SendInteractionParamsType>, "mutationFn" | "mutationKey">;

/** @inline */
declare type MutationOptions_3 = Omit<UseMutationOptions<SiweAuthenticateReturnType, FrakRpcError, SiweAuthenticateModalParams>, "mutationFn" | "mutationKey">;

/** @ignore */
declare type MutationOptions_4<T extends ModalStepTypes[]> = Omit<UseMutationOptions<ModalRpcStepsResultType<T>, FrakRpcError, DisplayModalParamsType<T>>, "mutationFn" | "mutationKey">;

/** @ignore */
declare type MutationOptions_5 = Omit<UseMutationOptions<void, FrakRpcError, OpenSsoParamsType>, "mutationFn" | "mutationKey">;

/** @ignore */
declare type QueryOptions = Omit<UseQueryOptions<GetProductInformationReturnType, FrakRpcError, undefined>, "queryKey" | "queryFn">;

/**
 * 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
 *
 * @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
 */
export declare function useDisplayModal<T extends ModalStepTypes[] = ModalStepTypes[]>({ mutations, }?: UseDisplayModalParams<T>): UseMutationResult<    { [K in T[number]["key"]]: Extract<T[number], {
key: K;
}>["returns"]; }, FrakRpcError<undefined>, DisplayModalParamsType<T>, unknown>;

/** @inline */
declare interface UseDisplayModalParams<T extends ModalStepTypes[] = ModalStepTypes[]> {
    /**
     * Optional mutation options, see {@link @tanstack/react-query!useMutation | `useMutation()`} for more infos
     */
    mutations?: MutationOptions_4<T>;
}

/**
 * Get the current Frak client
 *
 * @group hooks
 */
export declare function useFrakClient(): FrakClient | undefined;

/**
 * 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
 */
export declare function useFrakConfig(): FrakWalletSdkConfig;

/**
 * Hook that return a query helping to get the current product information
 *
 * It's a {@link @tanstack/react-query!home | `tanstack`} wrapper around the {@link @frak-labs/core-sdk!actions.getProductInformation | `getProductInformation()`} action
 *
 * @param args
 *
 * @group hooks
 *
 * @returns
 * The query hook wrapping the `getProductInformation()` action
 * The `data` result is a {@link @frak-labs/core-sdk!index.GetProductInformationReturnType | `GetProductInformationReturnType`}
 *
 * @see {@link @frak-labs/core-sdk!actions.getProductInformation | `getProductInformation()`} for more info about the underlying action
 * @see {@link @tanstack/react-query!useQuery | `useQuery()`} for more info about the useQuery options and response
 */
export declare function useGetProductInformation({ query, }?: UseGetProductInformationParams): UseQueryResult<undefined, FrakRpcError<undefined>>;

/** @inline */
declare interface UseGetProductInformationParams {
    /**
     * Optional query options, see {@link @tanstack/react-query!useQuery | `useQuery()`} for more infos
     */
    query?: QueryOptions;
}

/**
 * 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
 *
 * @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
 */
export declare function useOpenSso({ mutations }?: UseSendInteractionParams_2): UseMutationResult<void, FrakRpcError<undefined>, OpenSsoParamsType, unknown>;

/**
 * Helper hook to automatically submit a referral interaction when detected
 *
 * @group hooks
 *
 * @param args
 * @param args.productId - The product id to interact with (if not specified will be recomputed from the current domain)
 * @param args.modalConfig - The modal configuration to display if the user is not logged in
 * @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
 */
export declare function useReferralInteraction({ productId, modalConfig, options, }?: {
    productId?: Hex;
    modalConfig?: DisplayEmbeddedWalletParamsType;
    options?: ProcessReferralOptions;
}): Error | ("error" | "no-referrer" | "idle" | "processing" | "success" | "no-wallet" | "no-session" | "self-referral");

/**
 * Hook that return a mutation helping to send a user interaction
 *
 * It's a {@link @tanstack/react-query!home | `tanstack`} wrapper around the {@link @frak-labs/core-sdk!actions.sendInteraction | `sendInteraction()`} action
 *
 * @param args
 *
 * @group hooks
 *
 * @returns
 * The mutation hook wrapping the `sendInteraction()` action
 * The `mutate` and `mutateAsync` argument is of type {@link @frak-labs/core-sdk!index.SendInteractionParamsType | `SendInteractionParamsType`}
 * The `data` result is a {@link @frak-labs/core-sdk!index.SendInteractionReturnType | `SendInteractionReturnType`}
 *
 * @see {@link @frak-labs/core-sdk!actions.sendInteraction | `sendInteraction()`} for more info about the underlying action
 * @see {@link @tanstack/react-query!useMutation | `useMutation()`} for more info about the mutation options and response
 */
export declare function useSendInteraction({ mutations, }?: UseSendInteractionParams): UseMutationResult<    {
delegationId: string;
}, FrakRpcError<undefined>, SendInteractionParamsType, unknown>;

/** @inline */
declare interface UseSendInteractionParams {
    /**
     * Optional mutation options, see {@link @tanstack/react-query!useMutation | `useMutation()`} for more infos
     */
    mutations?: MutationOptions_2;
}

/** @inline */
declare interface UseSendInteractionParams_2 {
    /**
     * Optional mutation options, see {@link @tanstack/react-query!useMutation | `useMutation()`} for more infos
     */
    mutations?: MutationOptions_5;
}

/**
 * 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
 *
 * @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
 */
export declare function useSendTransactionAction({ mutations, }?: UseSendTransactionParams): UseMutationResult<    {
hash: Hex;
}, FrakRpcError<undefined>, SendTransactionParams, unknown>;

/** @inline */
declare interface UseSendTransactionParams {
    /**
     * 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.sendTransaction | `sendTransaction()`} action
 *
 * @param args
 *
 * @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
 */
export declare function useSiweAuthenticate({ mutations, }?: UseSiweAuthenticateParams): UseMutationResult<    {
signature: Hex;
message: string;
}, FrakRpcError<undefined>, SiweAuthenticateModalParams, unknown>;

/** @ignore */
declare interface UseSiweAuthenticateParams {
    /**
     * Optional mutation options, see {@link @tanstack/react-query!useMutation | `useMutation()`} for more infos
     */
    mutations?: MutationOptions_3;
}

/**
 * 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
 */
export declare function useWalletStatus(): UseQueryResult<WalletStatusReturnType, Error>;

export { }