Mode

Built-in Modes

Mode.dialog

Dialog mode embeds the hosted Porto Dialog (an iframe pointing to id.porto.sh) and forwards every request that requires user interaction to that dialog.

Diagram

In the diagram below, Mode.dialog is utilized within the Application to communicate with the Porto Dialog (id.porto.sh).

Usage

import { Porto, Mode } from 'porto'
 
const porto = Porto.create({
  mode: Mode.dialog(), 
})

Options

fallback

• Type: Mode.Mode
• Default: Mode.rpcServer()

Mode to fall back to if the renderer does not support background operations (e.g. popups and web views).

host

• Type: string
• Default: "https://id.porto.sh/dialog"

URL of the dialog embed.

import { Porto, Mode } from 'porto'
 
const porto = Porto.create({
  mode: Mode.dialog({
    host: 'https://account.my-wallet.com/dialog', 
  }),
})

renderer

• Type: Dialog.Dialog
• Default: Dialog.iframe()

The renderer to use for the dialog. Available: Dialog.iframe, Dialog.popup

import { Dialog, Porto, Mode } from 'porto'
 
const porto = Porto.create({
  mode: Mode.dialog({
    renderer: Dialog.popup(), 
  }),
})

theme

• Type: ThemeFragment | undefined

A custom theme to apply to the dialog, where only colorScheme is required. See the Theme API for the list of styling properties that can be defined.

themeController

• Type: Dialog.ThemeController | undefined

A controller to manage the dialog theme, created by Dialog.createThemeController(). It can be used to change the theme of the dialog without reinitializing it, with themeController.setTheme(). This is intended for advanced use cases, theme should be sufficient in regular scenarios.

Mode.rpcServer

Interacts with the Porto RPC Server directly. Signing is performed via the SDK. Account management, chain interop, and transaction management is orchestrated on the RPC Server.

Diagram

In the diagram below, Mode.rpcServer is utilized within the Porto Dialog (id.porto.sh) to communicate with the RPC Server.

Usage

import { Porto, Mode } from 'porto'
 
const porto = Porto.create({
  mode: Mode.rpcServer(), 
})

Caveats

• When you run Mode.rpcServer the Passkey Host (WebAuthn Relying Party) becomes your domain, not id.porto.sh. Credentials created here cannot be asserted on other domains, which means users cannot reuse their Porto account created on id.porto.sh.

Options

keystoreHost

• Type: string
• Default: "self"

Keystore host (WebAuthn relying party).

import { Porto, Mode } from 'porto'
 
const porto = Porto.create({
  mode: Mode.rpcServer({
    keystoreHost: 'https://account.my-wallet.com', 
  }),
})

persistPreCalls

• Type: boolean
• Default: true

Whether to store pre-calls in a persistent storage. If this is set to false, it is expected that the consumer will manually store pre-calls, and provide them to actions that support a preCalls parameter.

import { Porto, Mode } from 'porto'
 
const porto = Porto.create({
  mode: Mode.rpcServer({
    persistPreCalls: false, 
  }),
})