UNPKG

@frak-labs/core-sdk

Version:

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

1,572 lines (1,481 loc) 61 kB
import { Address } from 'viem'; import { Hex } from 'viem'; import type { LifecycleMessage } from '@frak-labs/frame-connector'; import type { OpenPanel } from '@openpanel/web'; import type { RpcClient } from '@frak-labs/frame-connector'; import { RpcMessage } from '@frak-labs/frame-connector'; import { RpcResponse } from '@frak-labs/frame-connector'; import type { SiweMessage } from 'viem/siwe'; /** * Decode a base64url encoded string * @param value The value to decode * @returns The decoded value */ export declare function base64urlDecode(value: string): Uint8Array; /** * Encode a buffer to a base64url encoded string * @param buffer The buffer to encode * @returns The encoded string */ export declare function base64urlEncode(buffer: Uint8Array): string; /** * Base props for the iframe * @ignore */ export declare const baseIframeProps: { id: string; name: string; title: string; allow: string; style: { width: string; height: string; border: string; position: string; zIndex: number; top: string; left: string; colorScheme: string; }; }; /** * Event related to the iframe lifecycle * @ignore */ export declare type ClientLifecycleEvent = CustomCssEvent | CustomI18nEvent | RestoreBackupEvent | HearbeatEvent | HandshakeResponse | SsoRedirectCompleteEvent; /** * Compress the current Frak context * @param context - The context to be compressed * @returns A compressed string containing the Frak context */ declare function compress(context?: Partial<FrakContext>): string | undefined; /** * The received encoded data from a client * -> The encoded should contain a HashProtectedData once decoded * @ignore */ export declare type CompressedData = Uint8Array; /** * Compress json data * @param data * @ignore */ export declare function compressJsonToB64(data: unknown): string; /** * Create the Frak iframe * @param args * @param args.walletBaseUrl - Use `config.walletUrl` instead. Will be removed in future versions. * @param args.config - The configuration object containing iframe options, including the replacement for `walletBaseUrl`. */ export declare function createIframe({ walletBaseUrl, config, }: { walletBaseUrl?: string; config?: FrakWalletSdkConfig; }): Promise<HTMLIFrameElement | undefined>; /** * Create a new iframe Frak client * @param args * @param args.config - The configuration to use for the Frak Wallet SDK * @param args.iframe - The iframe to use for the communication * @returns The created Frak Client * * @example * const frakConfig: FrakWalletSdkConfig = { * metadata: { * name: "My app title", * }, * } * const iframe = await createIframe({ config: frakConfig }); * const client = createIFrameFrakClient({ config: frakConfig, iframe }); */ export declare function createIFrameFrakClient({ config, iframe, }: { config: FrakWalletSdkConfig; iframe: HTMLIFrameElement; }): FrakClient; /** * All the currencies available * @category Config */ export declare type Currency = "eur" | "usd" | "gbp"; declare type CustomCssEvent = { clientLifecycle: "modal-css"; data: { cssLink: string; }; }; declare type CustomI18nEvent = { clientLifecycle: "modal-i18n"; data: { i18n: I18nConfig; }; }; /** @ignore */ export declare class DebugInfoGatherer { private config?; private iframe?; private isSetupDone; private lastResponse; private lastRequest; constructor(config?: FrakWalletSdkConfig, iframe?: HTMLIFrameElement); setLastResponse(message: RpcMessage, response: RpcResponse): void; setLastRequest(event: RpcMessage): void; updateSetupStatus(status: boolean): void; private base64Encode; /** * Extract information from the iframe status */ private getIframeStatus; private getNavigatorInfo; private gatherDebugInfo; static empty(): DebugInfoGatherer; /** * Format Frak debug information */ formatDebugInfo(error: Error | unknown | string): string; } /** * Decompress the given Frak context * @param context - The raw context to be decompressed into a `FrakContext` * @returns The decompressed Frak context, or undefined if it fails */ declare function decompress(context?: string): FrakContext | undefined; /** * Decompress json data * @param data * @ignore */ export declare function decompressJsonFromB64<T>(data: string): T | null; /** * Function used to display the Frak embedded wallet popup * @param client - The current Frak Client * @param params - The parameter used to customise the embedded wallet */ export declare function displayEmbeddedWallet(client: FrakClient, params: DisplayEmbeddedWalletParamsType): Promise<DisplayEmbeddedWalletResultType>; /** * The params used to display the embedded wallet * * @group Embedded wallet */ export declare type DisplayEmbeddedWalletParamsType = { /** * The embedded view to display once the user is logged in */ loggedIn?: LoggedInEmbeddedView; /** * The embedded view to display once the user is logged out */ loggedOut?: LoggedOutEmbeddedView; /** * Some metadata to customize the embedded view */ metadata?: { /** * The logo to display on the embedded wallet * If undefined, will default to no logo displayed */ logo?: string; /** * Link to the homepage of the calling website * If undefined, will default to the domain of the calling website */ homepageLink?: string; /** * The target interaction behind this modal */ targetInteraction?: FullInteractionTypesKey; /** * The position of the component */ position?: "left" | "right"; /** * Some i18n override for the displayed modal (i.e. update the displayed text only for this modal) */ i18n?: I18nConfig; }; }; /** * The result of the display embedded wallet rpc request * * @group Embedded wallet */ export declare type DisplayEmbeddedWalletResultType = { wallet: Address; }; /** * Function used to display a modal * @param client - The current Frak Client * @param args * @param args.steps - The different steps of the modal * @param args.metadata - The metadata for the modal (customization, etc) * @returns The result of each modal steps * * @description This function will display a modal to the user with the provided steps and metadata. * * @remarks * - The UI of the displayed modal can be configured with the `customCss` property in the `customizations.css` field of the top-level config. * - The `login` and `openSession` steps will be automatically skipped if the user is already logged in or has an active session. It's safe to include these steps in all cases to ensure proper user state. * - Steps are automatically reordered in the following sequence: * 1. `login` (if needed) * 2. `openSession` (if needed) * 3. All other steps in the order specified * 4. `success` (if included, always last) * * @example * Simple sharing modal with steps: * 1. Login (Skipped if already logged in) * 2. Open a session (Skipped if already opened) * 3. Display a success message with sharing link option * * ```ts * const results = await displayModal(frakConfig, { * steps: { * // Simple login with no SSO, nor customization * login: { allowSso: false }, * // Simple session opening, with no customization * openSession: {}, * // Success message * final: { * action: { key: "reward" }, * // Skip this step, it will be only displayed in the stepper within the modal * autoSkip: true, * }, * }, * }); * * console.log("Login step - wallet", results.login.wallet); * console.log("Open session step - start + end", { * start: results.openSession.startTimestamp, * end: results.openSession.endTimestamp, * }); * ``` * * @example * A full modal example, with a few customization options, with the steps: * 1. Login (Skipped if already logged in) * 2. Open a session (Skipped if already opened) * 3. Authenticate via SIWE * 4. Send a transaction * 5. Display a success message with sharing link options * * ```ts * const results = await displayModal(frakConfig, { * steps: { * // Login step * login: { * allowSso: true, * ssoMetadata: { * logoUrl: "https://my-app.com/logo.png", * homepageLink: "https://my-app.com", * }, * }, * // Simple session opening, with no customisation * openSession: {}, * // Siwe authentication * siweAuthenticate: { * siwe: { * domain: "my-app.com", * uri: "https://my-app.com/", * nonce: generateSiweNonce(), * version: "1", * }, * }, * // Send batched transaction * sendTransaction: { * tx: [ * { to: "0xdeadbeef", data: "0xdeadbeef" }, * { to: "0xdeadbeef", data: "0xdeadbeef" }, * ], * }, * // Success message with sharing options * final: { * action: { * key: "sharing", * options: { * popupTitle: "Share the app", * text: "Discover my super app website", * link: "https://my-app.com", * }, * }, * dismissedMetadata: { * title: "Dismiss", * description: "You won't be rewarded for this sharing action", * }, * }, * }, * metadata: { * // Header of desktop modals * header: { * title: "My-App", * icon: "https://my-app.com/logo.png", * }, * // Context that will be present in every modal steps * context: "My-app overkill flow", * }, * }); * ``` */ export declare function displayModal<T extends ModalStepTypes[] = ModalStepTypes[]>(client: FrakClient, { steps, metadata }: DisplayModalParamsType<T>): Promise<ModalRpcStepsResultType<T>>; /** * Params used to display a modal * @typeParam T - The list of modal steps we expect to have in the modal * @group Modal Display */ export declare type DisplayModalParamsType<T extends ModalStepTypes[]> = { steps: ModalRpcStepsInput<T>; metadata?: ModalRpcMetadata; }; declare type DoBackupEvent = { iframeLifecycle: "do-backup"; data: { backup?: string; }; }; /** * The action to display on the logged out embedded view when the user is referred * * @group Embedded wallet */ export declare type EmbeddedViewActionReferred = { key: "referred"; /** * No options for a referred action */ options?: never; }; /** * The different type of action we can have on the embedded view (once the user is logged in) * * @group Embedded wallet */ export declare type EmbeddedViewActionSharing = { key: "sharing"; /** * Some sharing options */ options?: { /** * The title that will be displayed on the system popup once the system sharing window is open * @deprecated Use the top level `config.metadata.i18n` instead */ popupTitle?: string; /** * The text that will be shared alongside the link. * Can contain the variable {LINK} to specify where the link is placed, otherwise it will be added at the end * @deprecated Use the top level `config.metadata.i18n` instead */ text?: string; /** * The link to be shared (will be suffixed with the Frak sharing context) */ link?: string; }; }; declare type EventProps = Record<string, unknown>; /** * The different types of final actions we can display in the final step * @group Modal Display */ export declare type FinalActionType = { key: "sharing"; options?: { /** * @deprecated Use the top level `config.metadata.i18n` instead */ popupTitle?: string; /** * @deprecated Use the top level `config.metadata.i18n` instead */ text?: string; link?: string; }; } | { key: "reward"; options?: never; }; /** * The final modal step type, could be used to display sharing options or a success reward screen. * * **Input**: What type final step to display? * **Output**: None * * @group Modal Display */ export declare type FinalModalStepType = GenericModalStepType<"final", { dismissedMetadata?: ModalStepMetadata["metadata"]; action: FinalActionType; autoSkip?: boolean; }, object>; export declare function formatAmount(amount: number, currency?: Currency): string; /** * Representing a Frak client, used to interact with the Frak Wallet */ export declare type FrakClient = { config: FrakWalletSdkConfig; debugInfo: { formatDebugInfo: (error: Error | unknown | string) => string; }; openPanel?: OpenPanel; } & IFrameTransport; /** * The current Frak Context * * For now, only contain a referrer address. * * @ignore */ export declare type FrakContext = { r: Address; }; /** * Export our frak context */ export declare const FrakContextManager: { compress: typeof compress; decompress: typeof decompress; parse: typeof parse; update: typeof update; remove: typeof remove; replaceUrl: typeof replaceUrl; }; declare type FrakEvent = "share_button_clicked" | "wallet_button_clicked" | "share_modal_error" | "user_referred"; /** * Represent an iframe event */ export declare type FrakLifecycleEvent = IFrameLifecycleEvent | ClientLifecycleEvent; /** * Configuration for the Frak Wallet SDK * @category Config */ export declare type FrakWalletSdkConfig = { /** * The Frak wallet url * @defaultValue "https://wallet.frak.id" */ walletUrl?: string; /** * Some metadata about your implementation of the Frak SDK */ metadata: { /** * Your application name (will be displayed in a few modals and in SSO) */ name: string; /** * Language to display in the modal * If undefined, will default to the browser language */ lang?: Language; /** * The currency to display in the modal * @defaultValue `"eur"` */ currency?: Currency; /** * The logo URL that will be displayed in a few components */ logoUrl?: string; /** * The homepage link that could be displayed in a few components */ homepageLink?: string; }; /** * Some customization for the modal */ customizations?: { /** * Custom CSS styles to apply to the modals and components */ css?: `${string}.css`; /** * Custom i18n configuration for the modal */ i18n?: I18nConfig; }; /** * The domain name of your application * @defaultValue window.location.host */ domain?: string; }; /** * The keys for each interaction types (e.g. `press.openArticle`) -> category_type.interaction_type * @inline */ export declare type FullInteractionTypesKey = { [Category in keyof typeof interactionTypes]: `${Category & string}.${keyof (typeof interactionTypes)[Category] & string}`; }[keyof typeof interactionTypes]; /** * Represent a generic modal step type * @ignore * @inline */ declare type GenericModalStepType<TKey, TParams, TReturns> = { key: TKey; params: TParams extends never ? ModalStepMetadata : ModalStepMetadata & TParams; returns: TReturns; }; /** * Get the currency amount key for a given currency * @param currency - The currency to use * @returns The currency amount key */ export declare function getCurrencyAmountKey(currency?: Currency): keyof TokenAmountType; /** * Function used to get the current product information * @param client - The current Frak Client * @returns The product information in a promise */ export declare function getProductInformation(client: FrakClient): Promise<GetProductInformationReturnType>; /** * Response of the `frak_getProductInformation` RPC method * @group RPC Schema */ export declare type GetProductInformationReturnType = { /** * Current product id */ id: Hex; /** * Some metadata */ onChainMetadata: { /** * Name of the product on-chain */ name: string; /** * Domain of the product on-chain */ domain: string; /** * The supported product types */ productTypes: ProductTypesKey[]; }; /** * The max potential reward for the referrer */ maxReferrer?: TokenAmountType; /** * The max potential reward for the referee */ maxReferee?: TokenAmountType; /** * List of all the potentials reward arround this product */ rewards: { token: Address; campaign: Address; interactionTypeKey: FullInteractionTypesKey; referrer: TokenAmountType; referee: TokenAmountType; }[]; }; /** * Get the supported currency for a given currency * @param currency - The currency to use * @returns The supported currency */ export declare function getSupportedCurrency(currency?: Currency): Currency; /** * Get the supported locale for a given currency * @param currency - The currency to use * @returns The supported locale */ export declare function getSupportedLocale(currency?: Currency): (typeof locales)[LocalesKey]; declare type HandshakeRequestEvent = { iframeLifecycle: "handshake"; data: { token: string; }; }; declare type HandshakeResponse = { clientLifecycle: "handshake-response"; data: { token: string; currentUrl: string; }; }; /** * The encoded data to send to a client / received by a client * @ignore */ export declare type HashProtectedData<DataType> = Readonly<DataType & { validationHash: string; }>; declare type HearbeatEvent = { clientLifecycle: "heartbeat"; data?: never; }; /** * Custom i18n configuration for the modal * See [i18next json format](https://www.i18next.com/misc/json-format#i18next-json-v4) * * Available variables * - `{{ productName }}` : The name of your website (`metadata.name`) * - `{{ productOrigin }}` : The origin url of your website * - `{{ estimatedReward }}` : The estimated reward for the user (based on the specific `targetInteraction` you can specify, or the max referrer reward if no target interaction is specified) * * Context of the translation [see i18n context](https://www.i18next.com/translation-function/context) * - For modal display, the key of the final action (`sharing`, `reward`, or undefined) * - For embedded wallet display, the key of the logged in action (`sharing` or undefined) * * @example * ```ts * // Multi language config * const multiI18n = { * fr: { * "sdk.modal.title": "Titre de modal", * "sdk.modal.description": "Description de modal, avec {{ estimatedReward }} de gains possible", * }, * en: "https://example.com/en.json" * } * * // Single language config * const singleI18n = { * "sdk.modal.title": "Modal title", * "sdk.modal.description": "Modal description, with {{ estimatedReward }} of gains possible", * } * ``` * * @category Config */ export declare type I18nConfig = Record<Language, LocalizedI18nConfig> | LocalizedI18nConfig; /** * Event related to the iframe lifecycle * @ignore */ export declare type IFrameLifecycleEvent = { iframeLifecycle: "connected" | "show" | "hide" | "remove-backup"; data?: never; } | DoBackupEvent | HandshakeRequestEvent | RedirectRequestEvent; /** * RPC interface that's used for the iframe communication * * Define all the methods available within the iFrame RPC client with response type annotations * * @group RPC Schema * * @remarks * Each method in the schema now includes a ResponseType field that indicates: * - "promise": One-shot request that resolves once * - "stream": Streaming request that can emit multiple values * * ### Methods: * * #### frak_listenToWalletStatus * - Params: None * - Returns: {@link WalletStatusReturnType} * - Response Type: stream (emits updates when wallet status changes) * * #### frak_displayModal * - Params: [requests: {@link ModalRpcStepsInput}, metadata?: {@link ModalRpcMetadata}, configMetadata: {@link FrakWalletSdkConfig}["metadata"]] * - Returns: {@link ModalRpcStepsResultType} * - Response Type: promise (one-shot) * * #### frak_sendInteraction * - Params: [productId: Hex, interaction: {@link PreparedInteraction}, signature?: Hex] * - Returns: {@link SendInteractionReturnType} * - Response Type: promise (one-shot) * * #### frak_sso * - Params: [params: {@link OpenSsoParamsType}, name: string, customCss?: string] * - Returns: {@link OpenSsoReturnType} * - Response Type: promise (one-shot) * * #### frak_getProductInformation * - Params: None * - Returns: {@link GetProductInformationReturnType} * - Response Type: promise (one-shot) * * #### frak_displayEmbeddedWallet * - Params: [request: {@link DisplayEmbeddedWalletParamsType}, metadata: {@link FrakWalletSdkConfig}["metadata"]] * - Returns: {@link DisplayEmbeddedWalletResultType} * - Response Type: promise (one-shot) */ export declare type IFrameRpcSchema = [ /** * Method used to listen to the wallet status * This is a streaming method that emits updates when wallet status changes */ { Method: "frak_listenToWalletStatus"; Parameters?: undefined; ReturnType: WalletStatusReturnType; }, /** * Method to display a modal with the provided steps * This is a one-shot request */ { Method: "frak_displayModal"; Parameters: [ requests: ModalRpcStepsInput, metadata: ModalRpcMetadata | undefined, configMetadata: FrakWalletSdkConfig["metadata"] ]; ReturnType: ModalRpcStepsResultType; }, /** * Method to transmit a user interaction * This is a one-shot request */ { Method: "frak_sendInteraction"; Parameters: [ productId: Hex, interaction: PreparedInteraction, signature?: Hex ]; ReturnType: SendInteractionReturnType; }, /** * Method to start a SSO * This is a one-shot request */ { Method: "frak_sso"; Parameters: [ params: OpenSsoParamsType, name: string, customCss?: string ]; ReturnType: OpenSsoReturnType; }, /** * Method to get current product information's * - Is product minted? * - Does it have running campaign? * - Estimated reward on actions * This is a one-shot request */ { Method: "frak_getProductInformation"; Parameters?: undefined; ReturnType: GetProductInformationReturnType; }, /** * Method to show the embedded wallet, with potential customization * This is a one-shot request */ { Method: "frak_displayEmbeddedWallet"; Parameters: [ request: DisplayEmbeddedWalletParamsType, metadata: FrakWalletSdkConfig["metadata"] ]; ReturnType: DisplayEmbeddedWalletResultType; } ]; /** * IFrame transport interface */ export declare type IFrameTransport = { /** * Wait for the connection to be established */ waitForConnection: Promise<boolean>; /** * Wait for the setup to be done */ waitForSetup: Promise<void>; /** * Function used to perform a single request via the iframe transport */ request: RpcClient<IFrameRpcSchema, LifecycleMessage>["request"]; /** * Function used to listen to a request response via the iframe transport */ listenerRequest: RpcClient<IFrameRpcSchema, LifecycleMessage>["listen"]; /** * Function used to destroy the iframe transport */ destroy: () => Promise<void>; }; /** * Each interactions types according to the product types */ export declare const interactionTypes: { readonly press: { readonly openArticle: "0xc0a24ffb"; readonly readArticle: "0xd5bd0fbe"; }; readonly dapp: { readonly proofVerifiableStorageUpdate: "0x2ab2aeef"; readonly callableVerifiableStorageUpdate: "0xa07da986"; }; readonly webshop: { readonly open: "0xb311798f"; }; readonly referral: { readonly referred: "0x010cc3b9"; readonly createLink: "0xb2c0f17c"; }; readonly purchase: { readonly started: "0xd87e90c3"; readonly completed: "0x8403aeb4"; readonly unsafeCompleted: "0x4d5b14e0"; }; readonly retail: { readonly customerMeeting: "0x74489004"; }; }; /** * The final keys for each interaction types (e.g. `openArticle`) -> interaction type * @inline */ export declare type InteractionTypesKey = { [K in keyof typeof interactionTypes]: keyof (typeof interactionTypes)[K]; }[keyof typeof interactionTypes]; /** * Represent a key provider used for the hashed and secure compression * @ignore */ export declare type KeyProvider<DataType> = (value: DataType) => string[]; /** * All the languages available * @category Config */ export declare type Language = "fr" | "en"; /** * Map the currency to the locale */ export declare const locales: { readonly eur: "fr-FR"; readonly usd: "en-US"; readonly gbp: "en-GB"; }; /** * The keys for each locales * @inline */ export declare type LocalesKey = keyof typeof locales; /** * A localized i18n config * @category Config */ export declare type LocalizedI18nConfig = `${string}.css` | { [key: string]: string; }; /** * Some configuration options for the embedded view * * @group Embedded wallet */ export declare type LoggedInEmbeddedView = { /** * The main action to display on the logged in embedded view */ action?: EmbeddedViewActionSharing | EmbeddedViewActionReferred; }; /** * The view when a user is logged out * @group Embedded wallet */ export declare type LoggedOutEmbeddedView = { /** * Metadata option when displaying the embedded view */ metadata?: { /** * The main CTA for the logged out view * - can include some variable, available ones are: * - {REWARD} -> The maximum reward a user can receive when interacting on your website * - can be formatted in markdown * * If not set, it will default to a internationalized message * @deprecated Use the top level `config.customizations.i18n`, or `metadata.i18n` instead */ text?: string; /** * The text that will be displayed on the login button * * If not set, it will default to a internationalized message * @deprecated Use the top level `config.customizations.i18n`, or `metadata.i18n` instead */ buttonText?: string; }; }; /** * The login step for a Modal * * **Input**: Do we allow SSO or not? Is yes then the SSO metadata * **Output**: The logged in wallet address * * @group Modal Display */ export declare type LoginModalStepType = GenericModalStepType<"login", LoginWithSso | LoginWithoutSso, { wallet: Address; }>; /** @inline */ declare type LoginWithoutSso = { allowSso?: false; ssoMetadata?: never; }; /** @inline */ declare type LoginWithSso = { allowSso: true; ssoMetadata?: SsoMetadata; }; /** * Represent the output type of the modal builder */ export declare type ModalBuilder = ModalStepBuilder<[ LoginModalStepType, OpenInteractionSessionModalStepType ]>; /** * Helper to craft Frak modal, and share a base initial config * @param client - The current Frak Client * @param args * @param args.metadata - Common modal metadata (customisation, language etc) * @param args.login - Login step parameters * @param args.openSession - Open session step parameters * * @description This function will create a modal builder with the provided metadata, login and open session parameters. * * @example * Here is an example of how to use the `modalBuilder` to create and display a sharing modal: * * ```js * // Create the modal builder * const modalBuilder = window.FrakSDK.modalBuilder(frakClient, baseModalConfig); * * // Configure the information to be shared via the sharing link * const sharingConfig = { * popupTitle: "Share this with your friends", * text: "Discover our product!", * link: window.location.href, * }; * * // Display the sharing modal * function modalShare() { * modalBuilder.sharing(sharingConfig).display(); * } * ``` * * @see {@link ModalStepTypes} for more info about each modal step types and their parameters * @see {@link ModalRpcMetadata} for more info about the metadata that can be passed to the modal * @see {@link ModalRpcStepsResultType} for more info about the result of each modal steps * @see {@link displayModal} for more info about how the modal is displayed */ export declare function modalBuilder(client: FrakClient, { metadata, login, openSession, }: { metadata?: ModalRpcMetadata; login?: LoginModalStepType["params"]; openSession?: OpenInteractionSessionModalStepType["params"]; }): ModalBuilder; /** * RPC metadata for the modal, used on top level modal configuration * @group Modal Display * @group RPC Schema */ export declare type ModalRpcMetadata = { header?: { title?: string; icon?: string; }; targetInteraction?: FullInteractionTypesKey; /** * Some i18n override for the displayed modal (i.e. update the displayed text only for this modal) */ i18n?: I18nConfig; } & ({ isDismissible: true; /** * @deprecated Use `config.customizations.i18n` or `metadata.i18n` instead */ dismissActionTxt?: string; } | { isDismissible?: false; dismissActionTxt?: never; }); /** * Type for the RPC input of a modal * Just the `params` type of each `ModalStepTypes` * @typeParam T - The list of modal steps we expect to have in the modal * @group Modal Display * @group RPC Schema */ export declare type ModalRpcStepsInput<T extends ModalStepTypes[] = ModalStepTypes[]> = { [K in T[number]["key"]]?: Extract<T[number], { key: K; }>["params"]; }; /** * Type for the result of a modal request * Just the `returns` type of each `ModalStepTypes` * @typeParam T - The list of modal steps we expect to have in the modal * @group Modal Display * @group RPC Schema */ export declare type ModalRpcStepsResultType<T extends ModalStepTypes[] = ModalStepTypes[]> = { [K in T[number]["key"]]: Extract<T[number], { key: K; }>["returns"]; }; /** * Represent the type of the modal step builder */ export declare type ModalStepBuilder<Steps extends ModalStepTypes[] = ModalStepTypes[]> = { /** * The current modal params */ params: DisplayModalParamsType<Steps>; /** * Add a send transaction step to the modal */ sendTx: (options: SendTransactionModalStepType["params"]) => ModalStepBuilder<[...Steps, SendTransactionModalStepType]>; /** * Add a final step of type reward to the modal */ reward: (options?: Omit<FinalModalStepType["params"], "action">) => ModalStepBuilder<[...Steps, FinalModalStepType]>; /** * Add a final step of type sharing to the modal */ sharing: (sharingOptions?: Extract<FinalActionType, { key: "sharing"; }>["options"], options?: Omit<FinalModalStepType["params"], "action">) => ModalStepBuilder<[...Steps, FinalModalStepType]>; /** * Display the modal * @param metadataOverride - Function returning optional metadata to override the current modal metadata */ display: (metadataOverride?: (current?: ModalRpcMetadata) => ModalRpcMetadata | undefined) => Promise<ModalRpcStepsResultType<Steps>>; }; /** * Metadata that can be used to customize a modal step * @group Modal Display * @deprecated Use the top level `config.customizations.i18n`, or `metadata.i18n` instead */ export declare type ModalStepMetadata = { metadata?: { /** * Custom title for the step * If none provided, it will use an internationalized text * @deprecated Use the top level `config.customizations.i18n`, or `metadata.i18n` instead */ title?: string; /** * Custom description for the step * If none provided, it will use an internationalized text * @deprecated Use the top level `config.customizations.i18n`, or `metadata.i18n` instead */ description?: string; /** * Custom text for the primary action of the step * If none provided, it will use an internationalized text * @deprecated Use the top level `config.customizations.i18n`, or `metadata.i18n` instead */ primaryActionText?: string; /** * Custom text for the secondary action of the step * If none provided, it will use an internationalized text * @deprecated Use the top level `config.customizations.i18n`, or `metadata.i18n` instead */ secondaryActionText?: string; }; }; /** * Generic type of steps we will display in the modal to the end user * @group Modal Display */ export declare type ModalStepTypes = LoginModalStepType | SiweAuthenticateModalStepType | SendTransactionModalStepType | OpenInteractionSessionModalStepType | FinalModalStepType; /** * The open interaction session step for a Modal * * **Input**: None * **Output**: The interactions session period (start and end timestamp) * * @group Modal Display */ export declare type OpenInteractionSessionModalStepType = GenericModalStepType<"openSession", object, OpenInteractionSessionReturnType>; /** * Return type of the open session modal step * @inline * @ignore */ export declare type OpenInteractionSessionReturnType = { startTimestamp: number; endTimestamp: number; }; /** * Function used to open the SSO * @param client - The current Frak Client * @param args - The SSO parameters * * @description This function will open the SSO with the provided parameters. * * @example * First we build the sso metadata * ```ts * // Build the metadata * const metadata: SsoMetadata = { * logoUrl: "https://my-app.com/logo.png", * homepageLink: "https://my-app.com", * }; * ``` * * Then, either use it with direct exit (and so user is directly redirected to your website), or a custom redirect URL * :::code-group * ```ts [Direct exit] * // Trigger an sso opening with redirection * await openSso(frakConfig, { * directExit: true, * metadata, * }); * ``` * ```ts [Redirection] * // Trigger an sso opening within a popup with direct exit * await openSso(frakConfig, { * redirectUrl: "https://my-app.com/frak-sso", * metadata, * }); * ``` * ```ts [With tracking] * // Trigger an sso with consumeKey for tracking * const result = await openSso(frakConfig, { * directExit: true, * generateConsumeKey: true, * metadata, * }); * console.log(result.consumeKey); // Use this to track SSO status * ``` * ::: */ export declare function openSso(client: FrakClient, args: OpenSsoParamsType): Promise<OpenSsoReturnType>; /** * Params to start a SSO * @group RPC Schema */ export declare type OpenSsoParamsType = { /** * Redirect URL after the SSO (optional) */ redirectUrl?: string; /** * If the SSO should directly exit after completion * @defaultValue true */ directExit?: boolean; /** * If true, opens SSO in same window instead of popup * Defaults to true when redirectUrl is provided, false otherwise */ openInSameWindow?: boolean; /** * Language of the SSO page (optional) * It will default to the current user language (or "en" if unsupported language) */ lang?: "en" | "fr"; /** * Custom SSO metadata */ metadata: SsoMetadata; }; /** * Response after an SSO has been openned */ export declare type OpenSsoReturnType = { /** * Optional wallet address, returned when SSO completes via postMessage * Note: Only present when SSO flow completes (not immediately on open) */ wallet?: Hex; }; /** * Parse the current URL into a Frak Context * @param args * @param args.url - The url to parse * @returns The parsed Frak context */ declare function parse({ url }: { url: string; }): FrakContext | null | undefined; /** * Represent a prepared user interaction, ready to be sent on-chain via the wallet */ export declare type PreparedInteraction = { handlerTypeDenominator: Hex; interactionData: Hex; }; /** * Press interactions allow you to track user engagement with articles or other press content on your platform. * After setting up these interactions, you can create acquisition campaign based on the user engagement with your press content. * * :::info * To properly handle press interactions, ensure that the "Press" product type is enabled in your Business dashboard. * ::: * * @description Encode press related user interactions * * @group Interactions Encoder * * @see {@link PreparedInteraction} The prepared interaction object that can be sent * @see {@link !actions.sendInteraction | `sendInteraction()`} Action used to send the prepared interaction to the Frak Wallet */ export declare const PressInteractionEncoder: { /** * Encode an open article interaction * @param args * @param args.articleId - The id of the article the user opened (32 bytes), could be a `keccak256` hash of the article slug, or your internal id */ openArticle({ articleId }: { articleId: Hex; }): PreparedInteraction; /** * Encode a read article interaction * @param args * @param args.articleId - The id of the article the user opened (32 bytes), could be a `keccak256` hash of the article slug, or your internal id */ readArticle({ articleId }: { articleId: Hex; }): PreparedInteraction; }; /** * This function handle all the heavy lifting of the referral interaction process * 1. Check if the user has been referred or not (if not, early exit) * 2. Then check if the user is logged in or not * 2.1 If not logged in, try a soft login, if it fail, display a modal for the user to login * 3. Check if that's not a self-referral (if yes, early exit) * 4. Check if the user has an interaction session or not * 4.1 If not, display a modal for the user to open a session * 5. Push the referred interaction * 6. Update the current url with the right data * 7. Return the resulting referral state * * If any error occurs during the process, the function will catch it and return an error state * * @param client - The current Frak Client * @param args * @param args.walletStatus - The current user wallet status * @param args.frakContext - The current frak context * @param args.modalConfig - The modal configuration to display if the user is not logged in * @param args.productId - The product id to interact with (if not specified will be recomputed from the current domain) * @param args.options - Some options for the referral interaction * @returns A promise with the resulting referral state * * @see {@link displayModal} for more details about the displayed modal * @see {@link sendInteraction} for more details on the interaction submission part * @see {@link ReferralInteractionEncoder} for more details about the referred interaction * @see {@link ModalStepTypes} for more details on each modal steps types */ export declare function processReferral(client: FrakClient, { walletStatus, frakContext, modalConfig, productId, options, }: { walletStatus?: WalletStatusReturnType; frakContext?: Partial<FrakContext> | null; modalConfig?: DisplayEmbeddedWalletParamsType; productId?: Hex; options?: ProcessReferralOptions; }): Promise<ReferralState>; /** * Options for the referral auto-interaction process */ export declare type ProcessReferralOptions = { /** * If we want to always append the url with the frak context or not * @defaultValue false */ alwaysAppendUrl?: boolean; }; /** * List of the product types per denominator */ export declare const productTypes: { dapp: number; press: number; webshop: number; retail: number; referral: number; purchase: number; }; /** * The keys for each product types * @inline */ export declare type ProductTypesKey = keyof typeof productTypes; /** * Bitmask for each product types */ export declare const productTypesMask: Record<ProductTypesKey, bigint>; /** * Purchase interactions allow you to track user purchases on your platform. * After setting up these interactions, you can create acquisition campaign based on the user purchase (starting a new one, completed, or even purchase dropped). * * :::info * To properly handle purchase interactions, ensure that the "Purchase" product type is enabled in your Business dashboard, and that you have set up everything correctly in the `Purchasetracker` section. * ::: * * :::note * The `purchaseId` is used on both interactions. It can be computed like this: * * ```ts * const purchaseId = keccak256(concatHex([productId, toHex(externalPurchaseId)])); * ``` * * With: * - `productId`: The id of your product, you can find it in the product dashboard. * - `externalPurchaseId`: The id of the purchase in your system (e.g. the shopify `order_id`). * ::: * * @description Encode purchase related user interactions * * @group Interactions Encoder * * @see {@link !actions.sendInteraction | `sendInteraction()`} Action used to send the prepared interaction to the Frak Wallet * @see {@link PreparedInteraction} The prepared interaction object that can be sent * @see {@link !actions.trackPurchaseStatus | `trackPurchaseStatus()`} Action that will automatically send the purchase upon completion * @see [Purchase Webhooks](/wallet-sdk/references-api/webhook) Webhooks to be implemented on your side to confirm a purchase * @see [Purchase Proof](/wallet-sdk/references-api/purchaseProof) Get a merklee proof for the purchase */ export declare const PurchaseInteractionEncoder: { /** * Encode a start purchase interaction * @param args * @param args.purchaseId - The id of the purchase that is being started. */ startPurchase({ purchaseId }: { purchaseId: Hex; }): PreparedInteraction; /** * Encode a complete purchase interaction * @param args * @param args.purchaseId - The id of the purchase that is being completed. * @param args.proof - The merkle proof that the user has completed the purchase (see [Purchase Webhooks](/wallet-sdk/references-api/webhook) for more details). */ completedPurchase({ purchaseId, proof, }: { purchaseId: Hex; proof: Hex[]; }): PreparedInteraction; /** * Encode an unsafe complete purchase interaction (when we can't provide the proof) * @param args * @param args.purchaseId - The id of the purchase that is being completed. */ unsafeCompletedPurchase({ purchaseId, }: { purchaseId: Hex; }): PreparedInteraction; }; declare type RedirectRequestEvent = { iframeLifecycle: "redirect"; data: { /** * The base url to redirect to * If it contain a query param `u`, the client need will suffix the current url to the base url */ baseRedirectUrl: string; }; }; /** * Function used to display a modal * @param client - The current Frak Client * @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 A promise with the resulting referral state, or undefined in case of an error * * @description This function will automatically handle the referral interaction process * * @see {@link processReferral} for more details on the automatic referral handling process * @see {@link ModalStepTypes} for more details on each modal steps types */ export declare function referralInteraction(client: FrakClient, { productId, modalConfig, options, }?: { productId?: Hex; modalConfig?: DisplayEmbeddedWalletParamsType; options?: ProcessReferralOptions; }): Promise<("error" | "idle" | "processing" | "success" | "no-wallet" | "no-session" | "no-referrer" | "self-referral") | undefined>; /** * Referral interactions allow you to track user sharing activities. * These interactions are essential for platforms looking to grow their user base through user-to-user referrals and reward systems. * * :::info * To properly handle referral interactions, ensure that the "Referral" product type is enabled in your Business dashboard. * ::: * * @description Encode referral related user interactions * * @group Interactions Encoder * * @see {@link PreparedInteraction} The prepared interaction object that can be sent * @see {@link !actions.sendInteraction | `sendInteraction()`} Action used to send the prepared interaction to the Frak Wallet */ export declare const ReferralInteractionEncoder: { /** * Records the event of a user creating a referral link. Note that this interaction doesn't actually create the link itself; it only sends an event to track that a link was created. */ createLink(): PreparedInteraction; /** * Encode a referred interaction * @param args * @param args.referrer - The Ethereum address of the user who made the referral */ referred({ referrer }: { referrer: Address; }): PreparedInteraction; }; /** * The different states of the referral process * @inline */ declare type ReferralState = "idle" | "processing" | "success" | "no-wallet" | "no-session" | "error" | "no-referrer" | "self-referral"; /** * Remove Frak context from current url * @param url - The url to update * @returns The new url without the Frak context */ declare function remove(url: string): string; /** * Replace the current url with the given Frak context * @param args * @param args.url - The url to update * @param args.context - The context to update */ declare function replaceUrl({ url: baseUrl, context, }: { url?: string; context: Partial<FrakContext> | null; }): void; declare type RestoreBackupEvent = { clientLifecycle: "restore-backup"; data: { backup: string; }; }; /** * Retail interactions allow you to track user activities on your retails products. * * :::info * To properly handle retail interactions, ensure that the "Retail" product type is enabled in your Business dashboard. * ::: * * @description Encode retail related user interactions * * @group Interactions Encoder * * @see {@link PreparedInteraction} The prepared interaction object that can be sent * @see {@link !actions.sendInteraction | `sendInteraction()`} Action used to send the prepared interaction to the Frak Wallet */ export declare const RetailInteractionEncoder: { /** * Encode a customer meeting retail interaction * @param args * @param args.agencyId - The id of the agency that the customer is meeting with * */ customerMeeting({ agencyId }: { agencyId: Hex; }): PreparedInteraction; }; /** * Function used to send an interaction * @param client - The current Frak Client * @param args * * @example * const interaction = PressInteractionEncoder.openArticle({ * articleId: keccak256(toHex("article-slug")), * }); * const { delegationId } = await sendInteraction(frakConfig, { * interaction, * }); * console.log("Delegated interaction id", delegationId); */ export declare function sendInteraction(client: FrakClient, { productId, interaction, validation }: