@frak-labs/core-sdk 0.0.9 → 0.0.10

package/dist/actions.d.cts

@@ -6,6 +6,7 @@ import type { SiweMessage } from 'viem/siwe';
 
 /**
  * All the currencies available
+ * @category Config
  */
 declare type Currency = "eur" | "usd" | "gbp";
 
@@ -17,31 +18,31 @@ declare type Currency = "eur" | "usd" | "gbp";
 export declare function displayEmbededWallet(client: FrakClient, params: DisplayEmbededWalletParamsType): Promise<void>;
 
 /**
- * The params used to display the embeded wallet
+ * The params used to display the embedded wallet
  *
- * @group Embeded wallet
+ * @group Embedded wallet
  */
 declare type DisplayEmbededWalletParamsType = {
     /**
-     * The embeded view to display once the user is logged in
+     * The embedded view to display once the user is logged in
      */
     loggedIn?: LoggedInEmbededView;
     /**
-     * The embeded view to display once the user is logged out
+     * The embedded view to display once the user is logged out
      */
     loggedOut?: LoggedOutEmbededView;
     /**
-     * Some metadata to customise the embeded view
+     * Some metadata to customize the embedded view
      */
     metadata?: {
         /**
-         * The logo to display on the embeded wallet
+         * 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 unedfined, will default to the domain of the calling website
+         * If undefined, will default to the domain of the calling website
          */
         homepageLink?: string;
         /**
@@ -52,6 +53,10 @@ declare type DisplayEmbededWalletParamsType = {
          * 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;
     };
 };
 
@@ -60,13 +65,13 @@ declare type DisplayEmbededWalletParamsType = {
  * @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 (customisation, etc)
+ * @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 `metadata.css` field of the top-level config.
+ * - 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)
@@ -83,9 +88,9 @@ declare type DisplayEmbededWalletParamsType = {
  * ```ts
  * const results = await displayModal(frakConfig, {
  *     steps: {
- *         // Simple login with no SSO, nor customisation
+ *         // Simple login with no SSO, nor customization
  *         login: { allowSso: false },
- *         // Simple session opening, with no customisation
+ *         // Simple session opening, with no customization
  *         openSession: {},
  *         // Success message
  *         final: {
@@ -104,7 +109,7 @@ declare type DisplayEmbededWalletParamsType = {
  * ```
  *
  * @example
- * A full modal example, with a few customisation options, with the steps:
+ * 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
@@ -121,16 +126,6 @@ declare type DisplayEmbededWalletParamsType = {
  *                 logoUrl: "https://my-app.com/logo.png",
  *                 homepageLink: "https://my-app.com",
  *             },
- *             metadata: {
- *                 // Modal title on desktop
- *                 title: "Login on My-App",
- *                 // Modal description (and yep it accept markdown)
- *                 description: "## Please login to continue",
- *                 // Primary button text
- *                 primaryActionText: "Register",
- *                 // Secondary button text
- *                 secondaryActionText: "Login",
- *             },
  *         },
  *         // Simple session opening, with no customisation
  *         openSession: {},
@@ -142,11 +137,6 @@ declare type DisplayEmbededWalletParamsType = {
  *                 nonce: generateSiweNonce(),
  *                 version: "1",
  *             },
- *             metadata: {
- *                 title: "Authenticate with SIWE",
- *                 description: "Please authenticate with SIWE to continue",
- *                 primaryActionText: "Authenticate",
- *             },
  *         },
  *         // Send batched transaction
  *         sendTransaction: {
@@ -154,10 +144,6 @@ declare type DisplayEmbededWalletParamsType = {
  *                 { to: "0xdeadbeef", data: "0xdeadbeef" },
  *                 { to: "0xdeadbeef", data: "0xdeadbeef" },
  *             ],
- *             metadata: {
- *                 title: "Send a transaction",
- *                 description: "Please send a transaction to continue",
- *             },
  *         },
  *         // Success message with sharing options
  *         final: {
@@ -200,9 +186,9 @@ declare type DisplayModalParamsType<T extends ModalStepTypes[]> = {
 };
 
 /**
- * The different type of action we can have on the embeded view (once the user is logged in)
+ * The different type of action we can have on the embedded view (once the user is logged in)
  *
- * @group Embeded wallet
+ * @group Embedded wallet
  */
 declare type EmbededViewAction = {
     key: "sharing";
@@ -212,11 +198,13 @@ declare type EmbededViewAction = {
     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;
         /**
@@ -261,7 +249,13 @@ declare type ExtractedReturnTypeFromRpc<TRpcSchema extends RpcSchema, TParameter
 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;
     };
@@ -298,13 +292,16 @@ declare type FrakClient = {
  * The current Frak Context
  *
  * For now, only contain a referrer address.
+ *
+ * @ignore
  */
 declare type FrakContext = {
     r: Address;
 };
 
 /**
- * Configuration for the Nexus Wallet SDK
+ * Configuration for the Frak Wallet SDK
+ * @category Config
  */
 declare type FrakWalletSdkConfig = {
     /**
@@ -320,20 +317,37 @@ declare type FrakWalletSdkConfig = {
          * Your application name (will be displayed in a few modals and in SSO)
          */
         name: string;
-        /**
-         * Custom CSS styles to apply to the modals and components
-         */
-        css?: string;
         /**
          * Language to display in the modal
          * If undefined, will default to the browser language
          */
-        lang?: "fr" | "en";
+        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
@@ -414,6 +428,41 @@ declare type GetProductInformationReturnType = {
     }[];
 };
 
+/**
+ * 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
+ */
+declare type I18nConfig = Record<Language, LocalizedI18nConfig> | LocalizedI18nConfig;
+
 /**
  * RPC interface that's used for the iframe communication
  *
@@ -464,7 +513,8 @@ declare type IFrameRpcSchema = [
     Method: "frak_displayModal";
     Parameters: [
     requests: ModalRpcStepsInput,
-    metadata: FrakWalletSdkConfig["metadata"] & ModalRpcMetadata
+    metadata: ModalRpcMetadata | undefined,
+    configMetadata: FrakWalletSdkConfig["metadata"]
     ];
     ReturnType: ModalRpcStepsResultType;
 },
@@ -505,12 +555,12 @@ declare type IFrameRpcSchema = [
     ReturnType: GetProductInformationReturnType;
 },
 /**
-* Method to show the embeded wallet, with potential customisation
+* Method to show the embedded wallet, with potential customization
 */
     {
     Method: "frak_displayEmbededWallet";
     Parameters: [
-    DisplayEmbededWalletParamsType,
+    request: DisplayEmbededWalletParamsType,
     metadata: FrakWalletSdkConfig["metadata"]
     ];
     ReturnType: undefined;
@@ -572,6 +622,12 @@ declare const interactionTypes: {
     };
 };
 
+/**
+ * All the languages available
+ * @category Config
+ */
+declare type Language = "fr" | "en";
+
 /**
  * Type used for a listening request
  * @inline
@@ -579,13 +635,21 @@ declare const interactionTypes: {
 declare type ListenerRequestFn<TRpcSchema extends RpcSchema> = <TParameters extends ExtractedParametersFromRpc<TRpcSchema> = ExtractedParametersFromRpc<TRpcSchema>, _ReturnType = ExtractedReturnTypeFromRpc<TRpcSchema, TParameters>>(args: TParameters, callback: (result: _ReturnType) => void) => Promise<void>;
 
 /**
- * Some configuration options for the embeded view
+ * A localized i18n config
+ * @category Config
+ */
+declare type LocalizedI18nConfig = `${string}.css` | {
+    [key: string]: string;
+};
+
+/**
+ * Some configuration options for the embedded view
  *
- * @group Embeded wallet
+ * @group Embedded wallet
  */
 declare type LoggedInEmbededView = {
     /**
-     * The main action to display on the logged in embeded view
+     * The main action to display on the logged in embedded view
      *  If none specified, the user will see his wallet with the activation button
      */
     action?: EmbededViewAction;
@@ -593,26 +657,28 @@ declare type LoggedInEmbededView = {
 
 /**
  * The view when a user is logged out
- * @group Embeded wallet
+ * @group Embedded wallet
  */
 declare type LoggedOutEmbededView = {
     /**
-     * Metadata option when displaying the embeded view
+     * 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 itneracting on your website
+         *      - {REWARD} -> The maximum reward a user can receive when interacting on your website
          *  - can be formatted in markdown
          *
-         * If not sert, it will default to a internalised message
+         * 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 internalised message
+         * If not set, it will default to a internationalized message
+         * @deprecated Use the top level `config.customizations.i18n`, or `metadata.i18n` instead
          */
         buttonText?: string;
     };
@@ -639,7 +705,7 @@ declare type LoginWithoutSso = {
 /** @inline */
 declare type LoginWithSso = {
     allowSso: true;
-    ssoMetadata: SsoMetadata;
+    ssoMetadata?: SsoMetadata;
 };
 
 /**
@@ -701,10 +767,16 @@ declare type ModalRpcMetadata = {
         title?: string;
         icon?: string;
     };
-    context?: 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;
@@ -767,29 +839,34 @@ export declare type ModalStepBuilder<Steps extends ModalStepTypes[] = ModalStepT
 };
 
 /**
- * Metadata that can be used to customise a modal step
+ * 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
  */
 declare type ModalStepMetadata = {
     metadata?: {
         /**
          * Custom title for the step
-         * If none provided, it will use an internationalised text
+         * 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 internationalised text
+         * 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 internationalised text
+         * 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 internationalised text
+         * If none provided, it will use an internationalized text
+         * @deprecated Use the top level `config.customizations.i18n`, or `metadata.i18n` instead
          */
         secondaryActionText?: string;
     };
@@ -850,7 +927,7 @@ declare type OpenInteractionSessionReturnType = {
  * ```ts [Redirection]
  * // Trigger an sso opening within a popup with direct exit
  * await openSso(frakConfig, {
- *     redirectUrl: "https://my-app.com/nexus-sso",
+ *     redirectUrl: "https://my-app.com/frak-sso",
  *     metadata,
  * });
  * ```