@frak-labs/core-sdk 0.1.0-beta.6e0d8026 → 0.1.0-beta.8d103039

package/src/actions/sendInteraction.ts

@@ -0,0 +1,32 @@
+import type {
+    FrakClient,
+    SendInteractionParamsType,
+    SendInteractionReturnType,
+} from "../types";
+import { computeProductId } from "../utils/computeProductId";
+
+/**
+ * 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 async function sendInteraction(
+    client: FrakClient,
+    { productId, interaction, validation }: SendInteractionParamsType
+): Promise<SendInteractionReturnType> {
+    const pId = productId ?? computeProductId(client.config);
+
+    return await client.request({
+        method: "frak_sendInteraction",
+        params: [pId, interaction, validation],
+    });
+}

package/src/actions/trackPurchaseStatus.ts

@@ -0,0 +1,53 @@
+/**
+ * Function used to track the status of a purchase
+ * when a purchase is tracked, the `purchaseCompleted` interactions will be automatically send for the user when we receive the purchase confirmation via webhook.
+ *
+ * @param args.customerId - The customer id that made the purchase (on your side)
+ * @param args.orderId - The order id of the purchase (on your side)
+ * @param args.token - The token of the purchase
+ *
+ * @description This function will send a request to the backend to listen for the purchase status.
+ *
+ * @example
+ * async function trackPurchase(checkout) {
+ *   const payload = {
+ *     customerId: checkout.order.customer.id,
+ *     orderId: checkout.order.id,
+ *     token: checkout.token,
+ *   };
+ *
+ *   await trackPurchaseStatus(payload);
+ * }
+ *
+ * @remarks
+ * - The `trackPurchaseStatus` function requires the `frak-wallet-interaction-token` stored in the session storage to authenticate the request.
+ * - This function will print a warning if used in a non-browser environment or if the wallet interaction token is not available.
+ */
+export async function trackPurchaseStatus(args: {
+    customerId: string | number;
+    orderId: string | number;
+    token: string;
+}) {
+    if (typeof window === "undefined") {
+        console.warn("[Frak] No window found, can't track purchase");
+        return;
+    }
+    const interactionToken = window.sessionStorage.getItem(
+        "frak-wallet-interaction-token"
+    );
+    if (!interactionToken) {
+        console.warn("[Frak] No frak session found, skipping purchase check");
+        return;
+    }
+
+    // Submit the listening request
+    await fetch("https://backend.frak.id/interactions/listenForPurchase", {
+        method: "POST",
+        headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+            "x-wallet-sdk-auth": interactionToken,
+        },
+        body: JSON.stringify(args),
+    });
+}

package/src/actions/watchWalletStatus.ts

@@ -0,0 +1,94 @@
+import { Deferred } from "@frak-labs/frame-connector";
+import type { FrakClient } from "../types/client";
+import type { WalletStatusReturnType } from "../types/rpc/walletStatus";
+
+/**
+ * Function used to watch the current frak wallet status
+ * @param client - The current Frak Client
+ * @param callback - The callback that will receive any wallet status change
+ * @returns A promise resolving with the initial wallet status
+ *
+ * @description This function will return the current wallet status, and will listen to any change in the wallet status.
+ *
+ * @example
+ * await watchWalletStatus(frakConfig, (status: WalletStatusReturnType) => {
+ *     if (status.key === "connected") {
+ *         console.log("Wallet connected:", status.wallet);
+ *         console.log("Current interaction session:", status.interactionSession);
+ *     } else {
+ *         console.log("Wallet not connected");
+ *     }
+ * });
+ */
+export function watchWalletStatus(
+    client: FrakClient,
+    callback?: (status: WalletStatusReturnType) => void
+): Promise<WalletStatusReturnType> {
+    // If no callback is provided, just do a request with deferred result
+    if (!callback) {
+        return client
+            .request({ method: "frak_listenToWalletStatus" })
+            .then((result) => {
+                // Handle side effects of this request
+                walletStatusSideEffect(client, result);
+
+                // Return the result
+                return result;
+            });
+    }
+
+    // Otherwise, listen to the wallet status and return the first one received
+    const firstResult = new Deferred<WalletStatusReturnType>();
+    let hasResolved = false;
+
+    // Start the listening request, and return the first result
+    client.listenerRequest(
+        {
+            method: "frak_listenToWalletStatus",
+        },
+        (status) => {
+            // Handle side effects of this request
+            walletStatusSideEffect(client, status);
+
+            // Transmit the status to the callback
+            callback(status);
+
+            // If the promise hasn't resolved yet, resolve it
+            if (!hasResolved) {
+                firstResult.resolve(status);
+                hasResolved = true;
+            }
+        }
+    );
+
+    return firstResult.promise;
+}
+
+/**
+ * Helper to save a potential interaction token
+ * @param interactionToken
+ */
+function walletStatusSideEffect(
+    client: FrakClient,
+    status: WalletStatusReturnType
+) {
+    if (typeof window === "undefined") {
+        return;
+    }
+
+    // Update the global properties
+    client.openPanel?.setGlobalProperties({
+        wallet: status.wallet ?? null,
+    });
+
+    if (status.interactionToken) {
+        // If we got an interaction token, save it
+        window.sessionStorage.setItem(
+            "frak-wallet-interaction-token",
+            status.interactionToken
+        );
+    } else {
+        // Otherwise, remove it
+        window.sessionStorage.removeItem("frak-wallet-interaction-token");
+    }
+}

package/src/actions/wrapper/modalBuilder.ts

@@ -0,0 +1,212 @@
+import type {
+    DisplayModalParamsType,
+    FinalActionType,
+    FinalModalStepType,
+    FrakClient,
+    LoginModalStepType,
+    ModalRpcMetadata,
+    ModalRpcStepsResultType,
+    ModalStepTypes,
+    OpenInteractionSessionModalStepType,
+    SendTransactionModalStepType,
+} from "../../types";
+import { displayModal } from "../displayModal";
+
+/**
+ * Represent the type of the modal step builder
+ */
+export 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>>;
+};
+
+/**
+ * Represent the output type of the modal builder
+ */
+export 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 function modalBuilder(
+    client: FrakClient,
+    {
+        metadata,
+        login,
+        openSession,
+    }: {
+        metadata?: ModalRpcMetadata;
+        login?: LoginModalStepType["params"];
+        openSession?: OpenInteractionSessionModalStepType["params"];
+    }
+): ModalBuilder {
+    // Build the initial modal params
+    const baseParams: DisplayModalParamsType<
+        [LoginModalStepType, OpenInteractionSessionModalStepType]
+    > = {
+        steps: {
+            login: login ?? {},
+            openSession: openSession ?? {},
+        },
+        metadata,
+    };
+
+    // Return the step builder
+    return modalStepsBuilder(client, baseParams);
+}
+
+/**
+ * Modal step builder, allowing to add new steps to the modal, and to build and display it
+ */
+function modalStepsBuilder<CurrentSteps extends ModalStepTypes[]>(
+    client: FrakClient,
+    params: DisplayModalParamsType<CurrentSteps>
+): ModalStepBuilder<CurrentSteps> {
+    // Function add the send tx step
+    function sendTx(options: SendTransactionModalStepType["params"]) {
+        return modalStepsBuilder<
+            [...CurrentSteps, SendTransactionModalStepType]
+        >(client, {
+            ...params,
+            steps: {
+                ...params.steps,
+                sendTransaction: options,
+            },
+        } as DisplayModalParamsType<
+            [...CurrentSteps, SendTransactionModalStepType]
+        >);
+    }
+
+    // Function to add a reward step at the end
+    function reward(options?: Omit<FinalModalStepType["params"], "action">) {
+        return modalStepsBuilder<[...CurrentSteps, FinalModalStepType]>(
+            client,
+            {
+                ...params,
+                steps: {
+                    ...params.steps,
+                    final: {
+                        ...options,
+                        action: { key: "reward" },
+                    },
+                },
+            } as DisplayModalParamsType<[...CurrentSteps, FinalModalStepType]>
+        );
+    }
+
+    // Function to add sharing step at the end
+    function sharing(
+        sharingOptions?: Extract<
+            FinalActionType,
+            { key: "sharing" }
+        >["options"],
+        options?: Omit<FinalModalStepType["params"], "action">
+    ) {
+        return modalStepsBuilder<[...CurrentSteps, FinalModalStepType]>(
+            client,
+            {
+                ...params,
+                steps: {
+                    ...params.steps,
+                    final: {
+                        ...options,
+                        action: { key: "sharing", options: sharingOptions },
+                    },
+                },
+            } as DisplayModalParamsType<[...CurrentSteps, FinalModalStepType]>
+        );
+    }
+
+    // Function to display it
+    async function display(
+        metadataOverride?: (
+            current?: ModalRpcMetadata
+        ) => ModalRpcMetadata | undefined
+    ) {
+        // If we have a metadata override, apply it
+        if (metadataOverride) {
+            params.metadata = metadataOverride(params.metadata ?? {});
+        }
+        return await displayModal(client, params);
+    }
+
+    return {
+        // Access current modal params
+        params,
+        // Function to add new steps
+        sendTx,
+        reward,
+        sharing,
+        // Display the modal
+        display,
+    };
+}

package/src/actions/wrapper/sendTransaction.ts

@@ -0,0 +1,62 @@
+import type {
+    FrakClient,
+    ModalRpcMetadata,
+    SendTransactionModalStepType,
+    SendTransactionReturnType,
+} from "../../types";
+import { displayModal } from "../displayModal";
+
+/**
+ * Parameters to directly show a modal used to send a transaction
+ * @inline
+ */
+export type SendTransactionParams = {
+    /**
+     * The transaction to be sent (either a single tx or multiple ones)
+     */
+    tx: SendTransactionModalStepType["params"]["tx"];
+    /**
+     * Custom metadata to be passed to the modal
+     */
+    metadata?: ModalRpcMetadata;
+};
+
+/**
+ * Function used to send a user transaction, simple wrapper around the displayModal function to ease the send transaction process
+ * @param client - The current Frak Client
+ * @param args - The parameters
+ * @returns The hash of the transaction that was sent in a promise
+ *
+ * @description This function will display a modal to the user with the provided transaction and metadata.
+ *
+ * @example
+ * const { hash } = await sendTransaction(frakConfig, {
+ *     tx: {
+ *         to: "0xdeadbeef",
+ *         value: toHex(100n),
+ *     },
+ *     metadata: {
+ *         header: {
+ *             title: "Sending eth",
+ *         },
+ *         context: "Send 100wei to 0xdeadbeef",
+ *     },
+ * });
+ * console.log("Transaction hash:", hash);
+ */
+export async function sendTransaction(
+    client: FrakClient,
+    { tx, metadata }: SendTransactionParams
+): Promise<SendTransactionReturnType> {
+    // Trigger a modal with login options
+    const result = await displayModal(client, {
+        metadata,
+        steps: {
+            login: {},
+            sendTransaction: { tx },
+        },
+    });
+
+    // Return the tx result only
+    return result.sendTransaction;
+}

package/src/actions/wrapper/siweAuthenticate.ts

@@ -0,0 +1,94 @@
+import { generateSiweNonce } from "viem/siwe";
+import type {
+    FrakClient,
+    ModalRpcMetadata,
+    SiweAuthenticateReturnType,
+    SiweAuthenticationParams,
+} from "../../types";
+import { displayModal } from "../displayModal";
+
+/**
+ * Parameter used to directly show a modal used to authenticate with SIWE
+ * @inline
+ */
+export type SiweAuthenticateModalParams = {
+    /**
+     * Partial SIWE params, since we can rebuild them from the SDK if they are empty
+     *
+     * If no parameters provider, some fields will be recomputed from the current configuration and environment.
+     *  - `statement` will be set to a default value
+     *  - `nonce` will be generated
+     *  - `uri` will be set to the current domain
+     *  - `version` will be set to "1"
+     *  - `domain` will be set to the current window domain
+     *
+     * @default {}
+     */
+    siwe?: Partial<SiweAuthenticationParams>;
+    /**
+     * Custom metadata to be passed to the modal
+     */
+    metadata?: ModalRpcMetadata;
+};
+
+/**
+ * Function used to launch a siwe authentication
+ * @param client - The current Frak Client
+ * @param args - The parameters
+ * @returns The SIWE authentication result (message + signature) in a promise
+ *
+ * @description This function will display a modal to the user with the provided SIWE parameters and metadata.
+ *
+ * @example
+ * import { siweAuthenticate } from "@frak-labs/core-sdk/actions";
+ * import { parseSiweMessage } from "viem/siwe";
+ *
+ * const { signature, message } = await siweAuthenticate(frakConfig, {
+ *     siwe: {
+ *         statement: "Sign in to My App",
+ *         domain: "my-app.com",
+ *         expirationTimeTimestamp: Date.now() + 1000 * 60 * 5,
+ *     },
+ *     metadata: {
+ *         header: {
+ *             title: "Sign in",
+ *         },
+ *         context: "Sign in to My App",
+ *     },
+ * });
+ * console.log("Parsed final message:", parseSiweMessage(message));
+ * console.log("Siwe signature:", signature);
+ */
+export async function siweAuthenticate(
+    client: FrakClient,
+    { siwe, metadata }: SiweAuthenticateModalParams
+): Promise<SiweAuthenticateReturnType> {
+    const effectiveDomain = client.config?.domain ?? window.location.host;
+    const realStatement =
+        siwe?.statement ??
+        `I confirm that I want to use my Frak wallet on: ${client.config.metadata.name}`;
+
+    // Fill up the siwe request params
+    const builtSiwe: SiweAuthenticationParams = {
+        ...siwe,
+        statement: realStatement,
+        nonce: siwe?.nonce ?? generateSiweNonce(),
+        uri: siwe?.uri ?? `https://${effectiveDomain}`,
+        version: siwe?.version ?? "1",
+        domain: effectiveDomain,
+    };
+
+    // Trigger a modal with login options
+    const result = await displayModal(client, {
+        metadata,
+        steps: {
+            login: {},
+            siweAuthenticate: {
+                siwe: builtSiwe,
+            },
+        },
+    });
+
+    // Return the SIWE result only
+    return result.siweAuthenticate;
+}

package/src/bundle.ts

@@ -0,0 +1,3 @@
+export * from "./index";
+export * from "./actions";
+export * from "./interactions";