ElvWalletFrameClient

This page contains documentation for client setup, navigation and other management.

For details on retrieving information from and performing actions in the wallet, see the wallet client methods page.

Wallet Client Proxy

Most methods available in the Eluvio Wallet Client are also available via proxy in the frame client. Simply access them through walletFrameClient.walletClient. Certain methods, such as those that generate signatures, are not available.

await walletFrameClient.walletClient.UserItems({
  start: 50,
  limit: 10
});

Constructor

new ElvWalletFrameClient()

This constructor should not be used. Please use InitializeFrame or InitializePopup instead.

import { ElvWalletFrameClient } from "@eluvio/elv-wallet-frame-client";
// Initialize in iframe at target element
const frameClient = await ElvWalletFrameClient.InitializeFrame({
requestor: "My App",
walletAppUrl: "https://wallet.contentfabric.io",
target: document.getElementById("#wallet-target")
});

// Or initialize in a popup
const frameClient = await ElvWalletFrameClient.InitializePopup({
requestor: "My App",
walletAppUrl: "https://wallet.contentfabric.io",
});

AddEventListener

AddEventListener(
  event,
  Listener
)

Add an event listener for the specified event

Example:

walletClient.AddEventListener(walletClient.EVENTS.LOG_IN, HandleLogin);

Parameters

Name	Type	Required	Description
event	string	✓	An event key from Events
Listener	function	✓	An event listener

CurrentPath

CurrentPath() → string

Retrieve the current location path of the wallet app

Returns: The current path of the wallet app

Events

Events()

Event keys that can be registered in AddEventListener.

Available options: LOADED, LOG_IN, LOG_OUT, ROUTE_CHANGE, CLOSE, ALL

Also accessible as a property via walletClient.EVENTS

InitializeFrame

InitializeFrame({
  requestor,
  walletAppUrl, // optional
  target,
  tenantSlug, // optional
  marketplaceSlug, // optional
  marketplaceId, // optional
  previewMarketplaceId, // optional
  requireLogin, // optional
  loginOnly, // optional
  captureLogin, // optional
  darkMode // optional
}) → Promise.<ElvWalletFrameClient>

Initialize the media wallet in a new iframe. The target can be an existing iframe or an element in which to create the iframe, and the target can be passed in either as an element directly, or by element ID.

Returns: The ElvWalletFrameClient initialized to communicate with the media wallet app in the new iframe.

Parameters

Name	Type	Required	Description
requestor	string	✓	The name of your application. This field is used in permission prompts, e.g. <requestor> is requesting to perform <action>
walletAppUrl	string		The URL of the Eluvio Media Wallet app (default: https://wallet.contentfabric.io)
target	Object | string	✓	An HTML element or the ID of an element
tenantSlug	string		Specify the URL slug of your tenant. Required if specifying marketplace slug
marketplaceSlug	string		Specify the URL slug of your marketplace
marketplaceId	string		Specify the ID of your marketplace. Not necessary if marketplaceSlug is specified
previewMarketplaceId	string		Specify the ID of a marketplace to show a preview for.
requireLogin	boolean		If specified, users will be required to log in before accessing any page in the app (default: false)
loginOnly	boolean		If specified, only the login flow will be shown. Be sure to register an event listener for the LOG_IN event. Note that once this mode is activated, it cannot be deactivated - you must re-initialize the popup/frame. (default: false)
captureLogin	boolean		If specified, the parent frame will be responsible for handling login requests. When the user attempts to log in, the LOG_IN_REQUESTED event will be fired.
darkMode	boolean		Specify whether the app should be in dark mode (default: false)

InitializePopup

InitializePopup({
  requestor,
  walletAppUrl, // optional
  tenantSlug, // optional
  marketplaceSlug, // optional
  marketplaceId, // optional
  previewMarketplaceId, // optional
  requireLogin, // optional
  loginOnly, // optional
  captureLogin, // optional
  darkMode // optional
}) → Promise.<ElvWalletFrameClient>

Initialize the media wallet in a new window.

Calling client.Destroy() will close the popup.

Returns: The ElvWalletFrameClient initialized to communicate with the media wallet app in the new window.

Parameters

Name	Type	Required	Description
requestor	string	✓	The name of your application. This field is used in permission prompts, e.g. <requestor> is requesting to perform <action>
walletAppUrl	string		The URL of the Eluvio Media Wallet app (default: https://wallet.contentfabric.io)
tenantSlug	string		Specify the URL slug of your tenant. Required if specifying marketplaceSlug
marketplaceSlug	string		Specify the URL slug of your marketplace
marketplaceId	string		Specify the ID of your marketplace. Not necessary if marketplaceSlug is specified
previewMarketplaceId	string		Specify the ID of a marketplace to show a preview for.
requireLogin	boolean		If specified, users will be required to log in before accessing any page in the app (default: false)
loginOnly	boolean		If specified, only the login flow will be shown. Be sure to register an event listener for the LOG_IN event. client.Destroy() can be used to close the popup after login. Note that once this mode is activated, it cannot be deactivated - you must re-initialize the popup/frame. (default: false)
captureLogin	boolean		If specified, the parent frame will be responsible for handling login requests. When the user attempts to log in, the LOG_IN_REQUESTED event will be fired. (default: false)
darkMode	boolean		Specify whether the app should be in dark mode (default: false)

LogIn

LogIn({
  clientAuthToken, // optional
  email, // optional
  address, // optional
  tenantId, // optional
  idToken, // optional
  authToken, // optional
  fabricToken, // optional
  walletName, // optional
  expiresAt // optional
})

Sign the user in to the wallet app. Authorization can be provided in three ways:

• - Wallet app token retrieved from elv-wallet-app-client (Preferred)
• - ID token from an OAuth flow
• - Eluvio authorization token previously retrieved from exchanging an ID token



NOTE: This is only to be used if authorization is performed outside of the wallet app. To direct the wallet application to the login page, use the Navigate method

Parameters

Name	Type	Required	Description
clientAuthToken	string		An app token retrieved via elv-wallet-app-client. If this is provided, no other parameters are necessary.
email	string		The email address of the user
address	string		The address of the user
tenantId	string		A tenant Id to associate with the login
idToken	string		An OAuth ID token to authenticate with
authToken	string		An Eluvio authorization token
fabricToken	string		An Eluvio authorization token signed by the user
walletName	string		If signing in from an external wallet such as metamask, the name of the wallet
expiresAt	number		A unix epoch timestamp indicating when the specified authorization expires

LogOut

LogOut()

Sign the current user out

Navigate

Navigate({
  page, // optional
  params, // optional
  path, // optional
  loginRequired, // optional
  marketplaceFilters // optional
}) → string

Request the wallet app navigate to the specified page.

When specifying a marketplace, you must provide either:

- tenantSlug and marketplaceSlug - Slugs for the tenant and marketplace - marketplaceHash - Version hash of a marketplace - marketplaceId - Object ID of a marketplace

Currently supported pages:

- 'login' - The login page - 'wallet' - The user's global wallet - 'items' - List of items in the user's wallet - 'item' - A specific item in the user's wallet -- Required param: `contractAddress` or `contractId` -- Required param: `tokenId` - 'profile' - The user's profile - 'marketplaces' - 'marketplace': -- Required param: marketplace parameters - 'marketplaceItem` -- Required params: `sku`, marketplace parameters - 'marketplaceWallet' - The user's collection for the specified marketplace -- Required params: marketplace parameters - `drop` -- Required params: `tenantSlug`, `eventSlug`, `dropId`, marketplace parameters - `listings` - `marketplaceListings` -- Required params: marketplace parameters

Returns: Returns the actual route to which the app has navigated

Parameters

Name	Type	Required	Description
page	string		A named app path
params	Object		Parameters for the specified path, e.g. { tokenId: } for an 'item' page.
path	string		An absolute app path
loginRequired	boolean		If login was specified, this parameter will control whether the login prompt is dismissible
marketplaceFilters	Array.<string>		A list of filters to limit items shown in the marketplace store page

Reload

Reload()

Reload the wallet application

RemoveEventListener

RemoveEventListener(
  event,
  Listener
)

Remove the specified event listener

Parameters

Name	Type	Required	Description
event	string	✓	An event key from Events
Listener	function	✓	The listener to remove

ToggleNavigation

ToggleNavigation({ enabled }) // optional

Request the navigation header and footer to be shown or hidden in the wallet

Parameters

Name	Type	Required	Description
enabled	boolean		True to show navigation, false to hide it (default: true)

ToggleSidePanelMode

ToggleSidePanelMode({ enabled }) // optional

Request the wallet enter/exit 'side panel' mode, where certain elements are hidden

Parameters

Name	Type	Required	Description
enabled	boolean		Whether side panel mode should be enabled (default: true)