6551 Display Widget

Display ERC6551 NFTs that own other NFTs anytime anywhere

Current Version

0.0.1

Javascript Library

https://6551display.manifoldxyz.dev/0.0.1/6551-display-widget.umd.js

Base CSS Library

https://6551display.manifoldxyz.dev/0.0.1/6551-display-widget.css

Additional CSS Themes

The examples below show how to reskin this Widget by using a CSS overrides. We've created an example light and dark mode skin for you.

https://6551display.manifoldxyz.dev/0.0.1/main.dark.css

https://6551display.manifoldxyz.dev/0.0.1/main.light.css

ERC 6551 Specification

https://docs.tokenbound.org/

https://eips.ethereum.org/EIPS/eip-6551

Configuration

Required Properties

• data-widget: "m-6551-display-widget"

• data-network: 1 or 5

• data-token-id: any token id

• data-token-contract: any NFT contract address

• data-implementation: see ERC6551 spec

• data-salt: see ERC6551 spec

Optional Properties

• data-layout: see Layout

• data-query-filters: see Query Filters

• data-on-populate: see On Populate Callback

• data-on-call-to-action: see Call To Action Callback and UX Text

• data-only-owner-can-call-to-action: see Call To Action Callback and UX Text

• data-call-to-action-text: see Call To Action Callback and UX Text

Minimum Viable Example

<script src="https://connect.manifoldxyz.dev/2.2.7/connect.umd.min.js"></script>
<script src="https://6551display.manifoldxyz.dev/0.0.1/6551-display-widget.umd.js"></script>
<link rel="stylesheet" href="https://6551display.manifoldxyz.dev/0.0.1/6551-display-widget.css">
<div
    data-widget="m-6551-display-widget"
    data-network="5"
    data-token-id="261"
    data-token-contract="0x7a77F2cFB02546F217d39157471d5B5914DD7644"
    data-implementation="0x2d25602551487c3f3354dd80d76d54383a243358"
    data-salt="0"
/>

Maximum Viable Example

<script src="https://connect.manifoldxyz.dev/2.2.7/connect.umd.min.js"></script>
<script src="https://6551display.manifoldxyz.dev/0.0.1/6551-display-widget.umd.min.js"></script>
<link rel="stylesheet" href="https://6551display.manifoldxyz.dev/0.0.1/6551-display-widget.css">
<link rel="stylesheet" href="https://6551display.manifoldxyz.dev/0.0.1/main.dark.css">
<div
    data-widget="m-6551-display-widget"
    data-fallback-provider="https://...someprc"
    data-transferrable="true"
    data-network="5"
    data-layout="backpack"
    data-token-id="261"
    data-token-contract="0x7a77F2cFB02546F217d39157471d5B5914DD7644"
    data-implementation="0x2d25602551487c3f3354dd80d76d54383a243358"
    data-salt="0"
    data-query-filters=exampleQueryFilter
    data-on-populate=exampleOnPopulate
    data-on-call-to-action=exampleOnCallToAction
    data-only-owner-can-call-to-action="true"
    data-call-to-action-text="Dress Up"
  />

Optional Parameters

Layout

type: String, // 'backpack' or 'photoalbum'
default: 'backpack'
// ex
data-layout="photoalbum"

Allows for changing of the overall UX of the widget. Default is photoalbum, and backpack is another option. We may have more layouts soon.

photoalbum example

backpack layout

Tranferrable

type: Boolean,
default: false
// ex
data-transferrable="true"

When set to true, the widget will display a Connect Widget to login with, and then a transfer button next to every NFT your ERC6551 NFT owns.

The connect button shows when data-transferrable or only-owner-can-call-to-action is true

Once logged in, the user will be able to transfer NFTs in and out of their 6551 Account as long as they are the owner of the original ERC6551 NFT.

A "selected" asset when selectable is true for its Group

Query Filters

export interface TokenFilter {
    contractAddress: string;
    tokenId?: string;
    tokenIds?: Array<string>;
    minTokenId?: string;
    maxTokenId?: string;
    attributes?: Array<TokenAttribute>;
}

export interface TokenAttribute {
    traitType?: string;
    value: string;
}

type: (): TokenFilter[],
default: (): TokenFilter[] => [],
// ex
function yourQueryFilterFunction (...) {...}
data-query-filters=yourQueryFilterFunction

Allows for filtering of the initial request for all NFTs owned by the ERC6551 NFT in its 6551 Account. Set this to a function reference.

See filtering information here

On Populate Callback

export type DataClientNFT = {
  contractAddress: string;
  tokenId: string;
  ownerAddress: string;
  name: string;
  image: string;
  spec: string;
  count: string;
  assets?: {
    nfts: DataClientNFT[];
  }
  metadata: {
    image?: string;
    image_url?: string;
    animation_url?: string;
  }
}

type Groups = {
  [key:string]: GroupDefinition
}

type GroupDefinition {
  items: DataClientNFT[],
  selectable?: boolean
  selectableLimit?: number
  selectedIndices?: number[]
}

type: (nft: DataClientNFT, groups: Groups): { nft: DataClientNFT, groups: Groups },
default: (nft: DataClientNFT, groups: Groups): Groups  => {
  // these assets are what will display next to the `nft`
  // feel free to sort them, or split them into new Groups
  return { nft,  groups };
}
// ex
function yourOnPopulateFunction (...) {...}
data-on-populate=yourOnPopulateFunction

Allows for sorting of the assets returned by the Data Client into specified groups, and allows for inspection of the core ERC6551 NFT as nft.

The assets can be returned as is, or modified in order to sort and regroup the NFTs.

You may also customize whether the NFTs in each group are selectable and the max selectableLimit of each group.

This data is updated as the user interacts with the widget, and returned into the on-call-to-action callback for your usage.

The backpack layout will automatically create a headline for each of the returnedGroups and break up the grid into sections based on said headline.

You may optional give selectedIndices an initial value in order to have the widget preselect those NFTs on initial render.

When selected, we give a basic skinnable UX to signify which ones are selected. We disable the rest once the maxSelectableLimit for the group is reached.

Call To Action Callback and UX Text

export type DataClientNFT = {
  contractAddress: string;
  tokenId: string;
  ownerAddress: string;
  name: string;
  image: string;
  spec: string;
  count: string;
  assets?: {
    nfts: DataClientNFT[];
  }
  metadata: {
    image?: string;
    image_url?: string;
    animation_url?: string;
  }
}

type Groups = {
  [key:string]: GroupDefinition
}

type GroupDefinition {
  items: DataClientNFT[],
  selectable?: boolean
  selectableLimit?: number
  selectedIndices?: number[]
}

type: (nft: DataClientNFT, groups: Groups): Promise<void | {
  nft: DataClientNFT,
  groups: Groups
}>
default: (nft: DataClientNFT, groups: Groups): Promise<void | {
  nft: DataClientNFT,
  groups: Groups
}> => {
  return;
}
// ex
function yourOnCallToActionFunction (...) {...}
data-on-call-to-action=yourOnCallToActionFunction

type: String
default: ''
// ex
data-call-to-action-text="Dress Up"

type: Boolean
default: true
// ex
data-only-owner-can-call-to-action="false"

When both data-on-call-to-action and data-call-to-action-textare defined, a call to action button will appear in the top right of the UX with your specifed text inside of it.

An example where the data-call-to-action-text is Dress Up and data-only-owner-can-call-to-action is set to true

When clicked, it will perform you call to action callback. The UX will disable while your callback executes asynchronously.

The data-only-owner-can-call-to-action option will cause a Connect Widget to appear, and cause the CTA button to disable unless the user is the owner of the ERC6551 NFT.

One example usage for this would be PFPs and 3D Avatars that could potentially execute a "Dress Up" call to action whenever the owner is done selecting NFTs from each Group to "wear", you can then modify the nft data before passing it back in order to show the updates!

CSS Theme'ing and Overriding

Manifold CSS Vars Overriding

--manifold-theme--color--primary
--manifold-element--color--background
--manifold-page--color--background
--manifold-text--color--muted
--manifold-element--color-blurry
--manifold-theme--color--info
--manifold-theme--color--success
--manifold-theme--color--error
--manifold-text--color--body
--manifold-text--font-family--body
--manifold-text--font-size--body
--manifold-text--font-size--header
--manifold-text--font-size--info
--manifold-theme--border
--manifold-theme--border-radius

Toastify CSS

/*!
 * Toastify js 1.12.0
 * https://github.com/apvarun/toastify-js
 * @license MIT licensed
 *
 * Copyright (C) 2018 Varun A P
 */

// Here are the defaults so you know what's already defined and what you might 
// want to override.

// These are the little toast that show up in the top right during transefr tx.

.toastify {
    padding: 12px 20px;
    color: #ffffff;
    display: inline-block;
    box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);

    position: fixed;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
    max-width: calc(50% - 20px);
    z-index: 2147483647;
}

.toast-close {
    background: transparent;
    border: 0;
    color: white;
    cursor: pointer;
    font-family: inherit;
    font-size: 1em;
    opacity: 0.4;
    padding: 0 5px;
}

.toastify-rounded {
    border-radius: 25px;
}