@frak-labs/react-sdk 0.1.0-beta.278e9605 → 0.1.0-beta.7e126d46

package/dist/index.cjs

@@ -0,0 +1 @@
+let e=require(`@frak-labs/core-sdk/actions`),t=require(`@frak-labs/frame-connector`),n=require(`@tanstack/react-query`),r=require(`react`),i=require(`@frak-labs/core-sdk`);const a=(0,r.createContext)(void 0);function o(e){let{children:t,config:n}=e;return(0,r.createElement)(a.Provider,{value:{...n,walletUrl:n.walletUrl??`https://wallet.frak.id`,domain:n.domain??(typeof window<`u`?window?.location?.host:void 0)??`not-found`}},t)}const s=(0,r.createContext)(void 0);function c({style:e,children:t}){let n=g(),[a,o]=(0,r.useState)(void 0);return(0,r.createElement)(r.Fragment,null,(0,r.createElement)(`iframe`,{...i.baseIframeProps,src:`${n.walletUrl}/listener`,style:e??i.baseIframeProps.style,ref:e=>{!e||a||o((0,i.createIFrameFrakClient)({iframe:e,config:n}))}}),(0,r.createElement)(s.Provider,{value:a},t))}function l(){return(0,r.useContext)(s)}function u(){let i=(0,n.useQueryClient)(),a=l(),o=(0,r.useCallback)(e=>{i.setQueryData([`frak-sdk`,`wallet-status-listener`],e)},[i]);return(0,n.useQuery)({gcTime:0,staleTime:0,queryKey:[`frak-sdk`,`wallet-status-listener`],queryFn:async()=>{if(!a)throw new t.ClientNotFound;return(0,e.watchWalletStatus)(a,o)},enabled:!!a})}function d(){let[e,t]=(0,r.useState)(!1);return(0,r.useEffect)(()=>{t(!0)},[]),e}function f(){let e=d(),[t,n]=(0,r.useState)(e?window.location:void 0);return(0,r.useEffect)(()=>{if(!e)return;function r(){n(window.location)}return t||r(),window.addEventListener(`popstate`,r),()=>{window.removeEventListener(`popstate`,r)}},[e,t]),{location:t,href:(0,r.useMemo)(()=>t?.href,[t?.href])}}function p(){let{location:e}=f();return{frakContext:(0,r.useMemo)(()=>e?.href?i.FrakContextManager.parse({url:e.href}):null,[e?.href]),updateContext:(0,r.useCallback)(t=>{console.log(`Updating context`,{newContext:t}),i.FrakContextManager.replaceUrl({url:e?.href,context:t})},[e?.href])}}function m({productId:i,modalConfig:a,options:o}={}){let s=l(),{frakContext:c}=p(),{data:d}=u(),{data:f,error:m,status:h}=(0,n.useQuery)({gcTime:0,staleTime:0,queryKey:[`frak-sdk`,`auto-referral-interaction`,c?.r??`no-referrer`,d?.key??`no-wallet-status`,i??`no-product-id`],queryFn:()=>{if(!s)throw new t.ClientNotFound;return(0,e.processReferral)(s,{walletStatus:d,frakContext:c,modalConfig:a,productId:i,options:o})},enabled:!!d});return(0,r.useMemo)(()=>h===`pending`?`processing`:h===`error`?m:f||`idle`,[f,h,m])}function h({mutations:r}={}){let i=l();return(0,n.useMutation)({...r,mutationKey:[`frak-sdk`,`display-modal`],mutationFn:async n=>{if(!i)throw new t.ClientNotFound;return(0,e.displayModal)(i,n)}})}function g(){let e=(0,r.useContext)(a);if(!e)throw new t.FrakRpcError(t.RpcErrorCodes.configError,`Frak config not found`);return e}function _({query:r}={}){let i=l();return(0,n.useQuery)({...r,queryKey:[`frak-sdk`,`get-product-information`],queryFn:async()=>{if(!i)throw new t.ClientNotFound;return(0,e.getProductInformation)(i)}})}function v({mutations:r}={}){let i=l();return(0,n.useMutation)({...r,mutationKey:[`frak-sdk`,`open-sso`],mutationFn:async n=>{if(!i)throw new t.ClientNotFound;return(0,e.openSso)(i,n)}})}function y(r){let i=l();return(0,n.useQuery)({queryKey:[`frak-sdk`,`prepare-sso`,r],queryFn:async()=>{if(!i)throw new t.ClientNotFound;return(0,e.prepareSso)(i,r)}})}function b({mutations:r}={}){let i=l();return(0,n.useMutation)({...r,mutationKey:[`frak-sdk`,`send-interaction`],mutationFn:async n=>{if(!i)throw new t.ClientNotFound;return(0,e.sendInteraction)(i,n)}})}function x({mutations:r}={}){let i=l();return(0,n.useMutation)({...r,mutationKey:[`frak-sdk`,`send-transaction`],mutationFn:async n=>{if(!i)throw new t.ClientNotFound;return(0,e.sendTransaction)(i,n)}})}function S({mutations:r}={}){let i=l();return(0,n.useMutation)({...r,mutationKey:[`frak-sdk`,`siwe-authenticate`,i?.config.domain??`no-domain`],mutationFn:async n=>{if(!i)throw new t.ClientNotFound;return(0,e.siweAuthenticate)(i,n)}})}exports.FrakConfigContext=a,exports.FrakConfigProvider=o,exports.FrakIFrameClientContext=s,exports.FrakIFrameClientProvider=c,exports.useDisplayModal=h,exports.useFrakClient=l,exports.useFrakConfig=g,exports.useGetProductInformation=_,exports.useOpenSso=v,exports.usePrepareSso=y,exports.useReferralInteraction=m,exports.useSendInteraction=b,exports.useSendTransactionAction=x,exports.useSiweAuthenticate=S,exports.useWalletStatus=u;

package/dist/index.d.cts

@@ -0,0 +1,368 @@
+import * as _frak_labs_core_sdk1 from "@frak-labs/core-sdk";
+import { DisplayEmbeddedWalletParamsType, DisplayModalParamsType, FrakClient, FrakWalletSdkConfig, GetProductInformationReturnType, ModalRpcStepsResultType, ModalStepTypes, OpenSsoParamsType, OpenSsoReturnType, PrepareSsoParamsType, SendInteractionParamsType, SendInteractionReturnType, SendTransactionReturnType, SiweAuthenticateReturnType, WalletStatusReturnType } from "@frak-labs/core-sdk";
+import { ProcessReferralOptions, SendTransactionParams, SiweAuthenticateModalParams } from "@frak-labs/core-sdk/actions";
+import { Hex } from "viem";
+import * as _tanstack_react_query1 from "@tanstack/react-query";
+import { UseMutationOptions, UseQueryOptions } from "@tanstack/react-query";
+import { FrakRpcError } from "@frak-labs/frame-connector";
+import * as react2 from "react";
+import { CSSProperties, PropsWithChildren, ReactNode } from "react";
+
+//#region src/hook/helper/useReferralInteraction.d.ts
+
+/**
+ * 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
+ */
+declare function useReferralInteraction({
+  productId,
+  modalConfig,
+  options
+}?: {
+  productId?: Hex;
+  modalConfig?: DisplayEmbeddedWalletParamsType;
+  options?: ProcessReferralOptions;
+}): Error | ("error" | "processing" | "no-referrer" | "idle" | "success" | "no-wallet" | "no-session" | "self-referral");
+//#endregion
+//#region src/hook/useDisplayModal.d.ts
+/** @ignore */
+type MutationOptions$4<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$4<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
+ *
+ * @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_query1.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_sdk1.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_sdk1.FrakWalletSdkConfig;
+//#endregion
+//#region src/hook/useGetProductInformation.d.ts
+/** @ignore */
+type QueryOptions = Omit<UseQueryOptions<GetProductInformationReturnType, FrakRpcError, undefined>, "queryKey" | "queryFn">;
+/** @inline */
+interface UseGetProductInformationParams {
+  /**
+   * 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 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
+ */
+declare function useGetProductInformation({
+  query
+}?: UseGetProductInformationParams): _tanstack_react_query1.UseQueryResult<undefined, FrakRpcError<undefined>>;
+//#endregion
+//#region src/hook/useOpenSso.d.ts
+/** @ignore */
+type MutationOptions$3 = 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$3;
+}
+/**
+ * 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
+ */
+declare function useOpenSso({
+  mutations
+}?: UseOpenSsoParams): _tanstack_react_query1.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_query1.UseQueryResult<_frak_labs_core_sdk1.PrepareSsoReturnType, Error>;
+//#endregion
+//#region src/hook/useSendInteraction.d.ts
+/** @ignore */
+type MutationOptions$2 = Omit<UseMutationOptions<SendInteractionReturnType, FrakRpcError, SendInteractionParamsType>, "mutationFn" | "mutationKey">;
+/** @inline */
+interface UseSendInteractionParams {
+  /**
+   * Optional mutation options, see {@link @tanstack/react-query!useMutation | `useMutation()`} for more infos
+   */
+  mutations?: MutationOptions$2;
+}
+/**
+ * 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
+ */
+declare function useSendInteraction({
+  mutations
+}?: UseSendInteractionParams): _tanstack_react_query1.UseMutationResult<SendInteractionReturnType, FrakRpcError<undefined>, SendInteractionParamsType, unknown>;
+//#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
+ *
+ * @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_query1.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.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
+ */
+declare function useSiweAuthenticate({
+  mutations
+}?: UseSiweAuthenticateParams): _tanstack_react_query1.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_query1.UseQueryResult<WalletStatusReturnType, Error>;
+//#endregion
+//#region src/provider/FrakConfigProvider.d.ts
+/**
+ * The context that will keep the Frak Wallet SDK configuration
+ * @ignore
+ */
+declare const FrakConfigContext: react2.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>): react2.FunctionComponentElement<react2.ProviderProps<FrakWalletSdkConfig | undefined>>;
+//#endregion
+//#region src/provider/FrakIFrameClientProvider.d.ts
+/**
+ * The context that will keep the Frak Wallet SDK client
+ * @ignore
+ */
+declare const FrakIFrameClientContext: react2.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;
+}): react2.FunctionComponentElement<react2.FragmentProps>;
+//#endregion
+export { FrakConfigContext, FrakConfigProvider, type FrakConfigProviderProps, FrakIFrameClientContext, type FrakIFrameClientProps, FrakIFrameClientProvider, useDisplayModal, useFrakClient, useFrakConfig, useGetProductInformation, useOpenSso, usePrepareSso, useReferralInteraction, useSendInteraction, useSendTransactionAction, useSiweAuthenticate, useWalletStatus };

package/dist/index.d.ts

@@ -0,0 +1,368 @@
+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 react2 from "react";
+import { CSSProperties, PropsWithChildren, ReactNode } from "react";
+import * as _frak_labs_core_sdk0 from "@frak-labs/core-sdk";
+import { DisplayEmbeddedWalletParamsType, DisplayModalParamsType, FrakClient, FrakWalletSdkConfig, GetProductInformationReturnType, ModalRpcStepsResultType, ModalStepTypes, OpenSsoParamsType, OpenSsoReturnType, PrepareSsoParamsType, SendInteractionParamsType, SendInteractionReturnType, SendTransactionReturnType, SiweAuthenticateReturnType, WalletStatusReturnType } from "@frak-labs/core-sdk";
+import { Hex } from "viem";
+
+//#region src/hook/helper/useReferralInteraction.d.ts
+
+/**
+ * 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
+ */
+declare function useReferralInteraction({
+  productId,
+  modalConfig,
+  options
+}?: {
+  productId?: Hex;
+  modalConfig?: DisplayEmbeddedWalletParamsType;
+  options?: ProcessReferralOptions;
+}): Error | ("error" | "processing" | "no-referrer" | "idle" | "success" | "no-wallet" | "no-session" | "self-referral");
+//#endregion
+//#region src/hook/useDisplayModal.d.ts
+/** @ignore */
+type MutationOptions$4<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$4<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
+ *
+ * @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/useGetProductInformation.d.ts
+/** @ignore */
+type QueryOptions = Omit<UseQueryOptions<GetProductInformationReturnType, FrakRpcError, undefined>, "queryKey" | "queryFn">;
+/** @inline */
+interface UseGetProductInformationParams {
+  /**
+   * 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 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
+ */
+declare function useGetProductInformation({
+  query
+}?: UseGetProductInformationParams): _tanstack_react_query0.UseQueryResult<undefined, FrakRpcError<undefined>>;
+//#endregion
+//#region src/hook/useOpenSso.d.ts
+/** @ignore */
+type MutationOptions$3 = 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$3;
+}
+/**
+ * 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
+ */
+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/useSendInteraction.d.ts
+/** @ignore */
+type MutationOptions$2 = Omit<UseMutationOptions<SendInteractionReturnType, FrakRpcError, SendInteractionParamsType>, "mutationFn" | "mutationKey">;
+/** @inline */
+interface UseSendInteractionParams {
+  /**
+   * Optional mutation options, see {@link @tanstack/react-query!useMutation | `useMutation()`} for more infos
+   */
+  mutations?: MutationOptions$2;
+}
+/**
+ * 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
+ */
+declare function useSendInteraction({
+  mutations
+}?: UseSendInteractionParams): _tanstack_react_query0.UseMutationResult<SendInteractionReturnType, FrakRpcError<undefined>, SendInteractionParamsType, unknown>;
+//#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
+ *
+ * @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.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
+ */
+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: react2.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>): react2.FunctionComponentElement<react2.ProviderProps<FrakWalletSdkConfig | undefined>>;
+//#endregion
+//#region src/provider/FrakIFrameClientProvider.d.ts
+/**
+ * The context that will keep the Frak Wallet SDK client
+ * @ignore
+ */
+declare const FrakIFrameClientContext: react2.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;
+}): react2.FunctionComponentElement<react2.FragmentProps>;
+//#endregion
+export { FrakConfigContext, FrakConfigProvider, type FrakConfigProviderProps, FrakIFrameClientContext, type FrakIFrameClientProps, FrakIFrameClientProvider, useDisplayModal, useFrakClient, useFrakConfig, useGetProductInformation, useOpenSso, usePrepareSso, useReferralInteraction, useSendInteraction, useSendTransactionAction, useSiweAuthenticate, useWalletStatus };

package/dist/index.js

@@ -0,0 +1 @@
+import{displayModal as e,getProductInformation as t,openSso as n,prepareSso as r,processReferral as i,sendInteraction as a,sendTransaction as o,siweAuthenticate as s,watchWalletStatus as c}from"@frak-labs/core-sdk/actions";import{ClientNotFound as l,FrakRpcError as u,RpcErrorCodes as d}from"@frak-labs/frame-connector";import{useMutation as f,useQuery as p,useQueryClient as m}from"@tanstack/react-query";import{Fragment as h,createContext as g,createElement as _,useCallback as v,useContext as y,useEffect as b,useMemo as x,useState as S}from"react";import{FrakContextManager as C,baseIframeProps as w,createIFrameFrakClient as T}from"@frak-labs/core-sdk";const E=g(void 0);function D(e){let{children:t,config:n}=e;return _(E.Provider,{value:{...n,walletUrl:n.walletUrl??`https://wallet.frak.id`,domain:n.domain??(typeof window<`u`?window?.location?.host:void 0)??`not-found`}},t)}const O=g(void 0);function k({style:e,children:t}){let n=L(),[r,i]=S(void 0);return _(h,null,_(`iframe`,{...w,src:`${n.walletUrl}/listener`,style:e??w.style,ref:e=>{!e||r||i(T({iframe:e,config:n}))}}),_(O.Provider,{value:r},t))}function A(){return y(O)}function j(){let e=m(),t=A(),n=v(t=>{e.setQueryData([`frak-sdk`,`wallet-status-listener`],t)},[e]);return p({gcTime:0,staleTime:0,queryKey:[`frak-sdk`,`wallet-status-listener`],queryFn:async()=>{if(!t)throw new l;return c(t,n)},enabled:!!t})}function M(){let[e,t]=S(!1);return b(()=>{t(!0)},[]),e}function N(){let e=M(),[t,n]=S(e?window.location:void 0);return b(()=>{if(!e)return;function r(){n(window.location)}return t||r(),window.addEventListener(`popstate`,r),()=>{window.removeEventListener(`popstate`,r)}},[e,t]),{location:t,href:x(()=>t?.href,[t?.href])}}function P(){let{location:e}=N();return{frakContext:x(()=>e?.href?C.parse({url:e.href}):null,[e?.href]),updateContext:v(t=>{console.log(`Updating context`,{newContext:t}),C.replaceUrl({url:e?.href,context:t})},[e?.href])}}function F({productId:e,modalConfig:t,options:n}={}){let r=A(),{frakContext:a}=P(),{data:o}=j(),{data:s,error:c,status:u}=p({gcTime:0,staleTime:0,queryKey:[`frak-sdk`,`auto-referral-interaction`,a?.r??`no-referrer`,o?.key??`no-wallet-status`,e??`no-product-id`],queryFn:()=>{if(!r)throw new l;return i(r,{walletStatus:o,frakContext:a,modalConfig:t,productId:e,options:n})},enabled:!!o});return x(()=>u===`pending`?`processing`:u===`error`?c:s||`idle`,[s,u,c])}function I({mutations:t}={}){let n=A();return f({...t,mutationKey:[`frak-sdk`,`display-modal`],mutationFn:async t=>{if(!n)throw new l;return e(n,t)}})}function L(){let e=y(E);if(!e)throw new u(d.configError,`Frak config not found`);return e}function R({query:e}={}){let n=A();return p({...e,queryKey:[`frak-sdk`,`get-product-information`],queryFn:async()=>{if(!n)throw new l;return t(n)}})}function z({mutations:e}={}){let t=A();return f({...e,mutationKey:[`frak-sdk`,`open-sso`],mutationFn:async e=>{if(!t)throw new l;return n(t,e)}})}function B(e){let t=A();return p({queryKey:[`frak-sdk`,`prepare-sso`,e],queryFn:async()=>{if(!t)throw new l;return r(t,e)}})}function V({mutations:e}={}){let t=A();return f({...e,mutationKey:[`frak-sdk`,`send-interaction`],mutationFn:async e=>{if(!t)throw new l;return a(t,e)}})}function H({mutations:e}={}){let t=A();return f({...e,mutationKey:[`frak-sdk`,`send-transaction`],mutationFn:async e=>{if(!t)throw new l;return o(t,e)}})}function U({mutations:e}={}){let t=A();return f({...e,mutationKey:[`frak-sdk`,`siwe-authenticate`,t?.config.domain??`no-domain`],mutationFn:async e=>{if(!t)throw new l;return s(t,e)}})}export{E as FrakConfigContext,D as FrakConfigProvider,O as FrakIFrameClientContext,k as FrakIFrameClientProvider,I as useDisplayModal,A as useFrakClient,L as useFrakConfig,R as useGetProductInformation,z as useOpenSso,B as usePrepareSso,F as useReferralInteraction,V as useSendInteraction,H as useSendTransactionAction,U as useSiweAuthenticate,j as useWalletStatus};

package/package.json

@@ -11,7 +11,7 @@
       "url": "https://twitter.com/QNivelais"
     }
   ],
-  "version": "0.1.0-beta.278e9605",
+  "version": "0.1.0-beta.7e126d46",
   "description": "React SDK of the Frak wallet, low level library to interact directly with the frak ecosystem.",
   "repository": {
     "url": "https://github.com/frak-id/wallet",
@@ -77,22 +77,23 @@
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.2",
     "@frak-labs/dev-tooling": "0.0.0",
+    "@frak-labs/test-foundation": "0.1.0",
     "@frak-labs/wallet-shared": "0.0.0",
-    "@tanstack/react-query": "^5.90.7",
+    "@tanstack/react-query": "^5.90.16",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.1",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/jsdom": "^27.0.0",
-    "@types/node": "^24.10.0",
-    "@types/react": "19.2.2",
-    "@vitest/coverage-v8": "^4.0.8",
-    "@vitest/ui": "^4.0.8",
-    "jsdom": "^27.1.0",
-    "react": "^19.2.0",
-    "tsdown": "^0.16.1",
+    "@types/node": "^24.10.4",
+    "@types/react": "19.2.7",
+    "@vitest/coverage-v8": "^4.0.16",
+    "@vitest/ui": "^4.0.16",
+    "jsdom": "^27.3.0",
+    "react": "^19.2.3",
+    "tsdown": "^0.18.2",
     "typescript": "^5",
-    "viem": "^2.38.6",
-    "vitest": "^4.0.8"
+    "viem": "^2.39.0",
+    "vitest": "^4.0.16"
   }
 }