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: