Skip to content

Documentation / @frak-labs/core-sdk / actions / displayModal

Function: displayModal()

displayModal<T>(client, args, placement?): Promise<ModalRpcStepsResultType<T>>

Defined in: actions/displayModal.ts:111

Function used to display a modal

Type Parameters

T

T extends ModalStepTypes[] = ModalStepTypes[]

Parameters

client

FrakClient

The current Frak Client

args

DisplayModalParamsType<T>

placement?

string

Optional placement ID to associate with this modal display

Returns

Promise<ModalRpcStepsResultType<T>>

The result of each modal steps

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 step will be automatically skipped if the user is already logged in. It's safe to include this step in all cases to ensure proper user state.
  • Steps are automatically reordered in the following sequence:
    1. login (if needed)
    2. All other steps in the order specified
    3. success (if included, always last)

Examples

Simple sharing modal with steps:

  1. Login (Skipped if already logged in)
  2. Display a success message with sharing link option
const results = await displayModal(frakConfig, {
    steps: {
        // Simple login with no SSO, nor customization
        login: { allowSso: false },
        // 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);

A full modal example, with a few customization options, with the steps:

  1. Login (Skipped if already logged in)
  2. Authenticate via SIWE
  3. Send a transaction
  4. Display a success message with sharing link options
const results = await displayModal(frakConfig, {
    steps: {
        // Login step
        login: {
            allowSso: true,
            ssoMetadata: {
                logoUrl: "https://my-app.com/logo.png",
                homepageLink: "https://my-app.com",
            },
        },
        // 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",
    },
});