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",
});
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, aLOG_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 renderedclient.EVENTS.ALL
- Any of the above events has occurred.
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.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
requestor |
string |
The name of your application. This field is used in permission prompts, e.g.
|
||
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 |
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 |
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.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
requestor |
string |
The name of your application. This field is used in permission prompts, e.g.
|
||
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 |
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 |
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 |
async CurrentPath() → string
Retrieve the current location path of the wallet app
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
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 |
async LogOut()
Sign the current user out
async Navigate({pageoptional,paramsoptional,pathoptional,loginRequiredoptional,marketplaceFiltersoptional}) → 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
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
page |
string |
<optional> |
A named app path |
params |
Object |
<optional> |
URL parameters for the specified path, e.g. { tokenId: |
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 |
async Reload()
Reload the wallet application
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 |
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 |
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 |
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 |