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",
});
Source:

Members

static EVENTS

client.EVENTS contains event keys for the AddEventListener and RemoveEventListener methods

  • client.EVENTS.LOADED - Wallet app has finished loading and authentication is settled. If a user is currently logged in, a LOG_IN event will have preceded this event.
  • client.EVENTS.LOG_IN - User has logged in. Event data contains user address.
  • client.EVENTS.LOG_OUT - User has logged out. Event data contains user address.
  • client.EVENTS.CLOSE - Target window or frame has been closed or has otherwise unloaded the wallet app.
  • client.EVENTS.ROUTE_CHANGE - The wallet app's current route has changed. Event data contains the current route of the app.
  • client.EVENTS.RESIZE - This event will specify the full height and width of the wallet application as currently rendered
  • client.EVENTS.ALL - Any of the above events has occurred.
Source:

Methods

async, static InitializeFrame({
requestor,
walletAppUrloptional,
target,
tenantSlugoptional,
marketplaceSlugoptional,
marketplaceIdoptional,
previewMarketplaceIdoptional,
requireLoginoptional,
loginOnlyoptional,
captureLoginoptional,
darkModeoptional
}) → 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 Attributes Default 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 <optional>
 https://wallet.contentfabric.io

The URL of the Eluvio Media Wallet app
target Object | string

An HTML element or the ID of an element
tenantSlug string <optional>

Specify the URL slug of your tenant. Required if specifying marketplace slug
marketplaceSlug string <optional>

Specify the URL slug of your marketplace
marketplaceId string <optional>

Specify the ID of your marketplace. Not necessary if marketplaceSlug is specified
previewMarketplaceId string <optional>

Specify the ID of a marketplace to show a preview for.
requireLogin boolean <optional>
 false

If specified, users will be required to log in before accessing any page in the app
loginOnly boolean <optional>
 false

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.
captureLogin boolean <optional>

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 <optional>
 false

Specify whether the app should be in dark mode
Source:

async, static InitializePopup({
requestor,
walletAppUrloptional,
tenantSlugoptional,
marketplaceSlugoptional,
marketplaceIdoptional,
previewMarketplaceIdoptional,
requireLoginoptional,
loginOnlyoptional,
captureLoginoptional,
darkModeoptional
}) → 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 Attributes Default 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 <optional>
 https://wallet.contentfabric.io

The URL of the Eluvio Media Wallet app
tenantSlug string <optional>

Specify the URL slug of your tenant. Required if specifying marketplaceSlug
marketplaceSlug string <optional>

Specify the URL slug of your marketplace
marketplaceId string <optional>

Specify the ID of your marketplace. Not necessary if marketplaceSlug is specified
previewMarketplaceId string <optional>

Specify the ID of a marketplace to show a preview for.
requireLogin boolean <optional>
 false

If specified, users will be required to log in before accessing any page in the app
loginOnly boolean <optional>
 false

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.
captureLogin boolean <optional>
 false

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 <optional>
 false

Specify whether the app should be in dark mode
Source:

AddEventListener(
event,
Listener
)

Add an event listener for the specified event

Example:

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

Parameters:
Name Type Description
event string

An event key from Events
Listener function

An event listener
Source:

async CurrentPath() → string

Retrieve the current location path of the wallet app

Returns: The current path of the wallet app
Source:

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

Source:

async LogIn({
clientAuthTokenoptional,
emailoptional,
addressoptional,
tenantIdoptional,
idTokenoptional,
authTokenoptional,
fabricTokenoptional,
walletNameoptional,
expiresAtoptional
})

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 Attributes Description
clientAuthToken string <optional>

An app token retrieved via elv-wallet-app-client. If this is provided, no other parameters are necessary.
email string <optional>

The email address of the user
address string <optional>

The address of the user
tenantId string <optional>

A tenant Id to associate with the login
idToken string <optional>

An OAuth ID token to authenticate with
authToken string <optional>

An Eluvio authorization token
fabricToken string <optional>

An Eluvio authorization token signed by the user
walletName string <optional>

If signing in from an external wallet such as metamask, the name of the wallet
expiresAt number <optional>

A unix epoch timestamp indicating when the specified authorization expires
Source:

async LogOut()

Sign the current user out

Source:

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 Attributes Description
page string <optional>

A named app path
params Object <optional>

URL parameters for the specified path, e.g. { tokenId: } for an 'item' page.
path string <optional>

An absolute app path
loginRequired boolean <optional>

If login was specified, this parameter will control whether the login prompt is dismissible
marketplaceFilters Array.<string> <optional>

A list of filters to limit items shown in the marketplace store page
Source:

async Reload()

Reload the wallet application

Source:

RemoveEventListener(
event,
Listener
)

Remove the specified event listener

Parameters:
Name Type Description
event string

An event key from Events
Listener function

The listener to remove
Source:

async ToggleDarkMode({enabledoptional})

Set whether the wallet should be displayed in dark mode

Parameters:
Name Type Attributes Default Description
enabled boolean <optional>
 true

True to enable dark mode, false to disable
Source:

async ToggleNavigation({enabledoptional})

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

Parameters:
Name Type Attributes Default Description
enabled boolean <optional>
 true

True to show navigation, false to hide it
Source:

async ToggleSidePanelMode({enabledoptional})

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

Parameters:
Name Type Attributes Default Description
enabled boolean <optional>
 true

Whether side panel mode should be enabled
Source: