NeftyBlocks market

We at NeftyBlocks understand the importance of keeping your users engaged. We want to make it easy for you to keep your community of NFT gamers, collectors and enthusiast close to your project. So, we have created a marketplace for you to embed in your website and keep your users engaged with what matters most, your NFT project!

What does this embed include?

⚙️ Fully functioning marketplace (filters, cards)
🎨 Customizable look (styling)
💲 Payment processing (read more below)

🚀 Usage

First of all, you need to install the library:

Package manager

Type in the terminal:

    # install dependencies
    $ npm i @neftyblocks/market

    # or yarn
    $ yarn add @neftyblocks/market

Include in your javascript file:

import '@neftyblocks/market';

Place in your HTML where you want to embed the market:

<neftyblocks-market collection="your-collection"></neftyblocks-market>

CDN (Plain HTML)

Place in your HTML where you want to embed the market:

<neftyblocks-market collection="your-collection"> </neftyblocks-market>

<script type="module">
    import 'https://cdn.jsdelivr.net/npm/@neftyblocks/market@latest';
</script>

🎛 Options

Options are placed the element as attributes with a value. which looks as follows:

<neftyblocks-market collection="your-collection-id" network="mainnet"> </neftyblocks-market>

Most attributes are optional except for collection

Attribute	Value	Default	Description
`collection` (required)	`your-collection-id`	None	set your collection name so the API knows which collection to send to the embed
`limit`	number between `1` and `100`	`50`	set a value on how the maximum amount of NFT's to show per page
`network`	supported chains / networks	`mainnet`	`mainnet` is the default network you can set it to `testnet` if you want to try it out first.
`chain`	supported chains / networks	`wax`	there is support for multiple chains, see supported chains / networks below.
`redirect`	None	None	the redirect URL is optional and is a way for you to interact with a transaction that happened see redirect URL, default behavior is to redirect the user back to the URL it came from with no extra params.
`endpoint`	None	`api.neftyblocks.me`	only useful for development, API is highly customized for it's purpose.
`custom`	None	None	Used to customize the card quick information See custom config

supported chains / networks

The following blockchains are supported by the embedded marketplace

chain	network
wax (default)	mainnet (default), testnet

redirect URL

if a redirect URL is placed as an attribute after the user has signed the transaction, the user will be redirected to the redirect URL after the transaction has been completed. we will include a couple of attributes in the query string to help you with the process.

tx: the transaction hash
status: the status of the transaction (executed or failed) this still needs to be validated as successfully executed
sale: the sale id
assets: the asset ids as "12345,12345,12345"

while we provide some useful data it's still up to you to validate that the transaction is valid and the user did make the sale. Everybody can write to a URL so be careful.

🎨 Styling

To get your look and feel to match your project, can customize by using css variables.

either place this in your style.css css file or add a <style> ... css here ... </style> tag in your HTML.

:root {
    /* the font-family for all text */
    --nefty-font-family: sans-serif;
    /* the default font size (best kept as is) */
    --nefty-font-size: 16px;
    /* the smaller font size (best kept as is) */
    --nefty-font-size--small: 14px;

    /* the minimum and maximum width of the cards (responsive)  */
    --nefty-card-size-min: 250px;
    --nefty-card-size-max: 1fr;

    /*  the space between cards */
    --nefty-cards-gap: 28px;

    /* border radius for all roundings of inputs, buttons, images */
    --nefty-radius: 24px;
    --nefty-radius-image: 18px;
    --nefty-radius-small: 12px;

    /* border color for buttons, inputs */
    --nefty-border: #353945;
    /* border color for the cards (if none use same color as card background) */
    --nefty-border-card: #23262f;
    /* border thickness */
    --nefty-border-size: 1px;

    /* color primary text */
    --nefty-color: #fcfcfd;
    /* colors for non primary text */
    --nefty-color-secondary: #777e90;

    /* buy button in the card (highlight) */
    --nefty-btn-primary: #00ffff;
    --nefty-btn-primary-bg: #23262f;
    --nefty-btn-primary-border: #00ffff;
    --nefty-btn-primary--active: #23262f;
    --nefty-btn-primary-bg--active: #00ffff;
    --nefty-btn-primary-border--active: #00ffff;

    /* styling of pagination buttons and small reset button (will appear once you start filtering) */
    --nefty-btn-secondary: #fcfcfd;
    --nefty-btn-secondary-bg: #141416;
    --nefty-btn-secondary-border: #353945;
    --nefty-btn-secondary--active: #fcfcfd;
    --nefty-btn-secondary-bg--active: #353945;
    --nefty-btn-secondary-border--active: #353945;

    /* the filter button on mobile design */
    --nefty-btn-tertiary: #141416;
    --nefty-btn-tertiary-bg: #fcfcfd;
    --nefty-btn-tertiary-border: #fcfcfd;
    --nefty-btn-tertiary--active: #fcfcfd;
    --nefty-btn-tertiary-bg--active: #141416;
    --nefty-btn-tertiary-border--active: #fcfcfd;

    /* backgrounds */
    /* list background in filters (schemas) */
    --nefty-bg-list-item: #141416;
    /* card mint background */
    --nefty-bg-mint: #0e0f12;
    /* all inputs (filters) */
    --nefty-bg-inputs: #23262f;
    /* card background */
    --nefty-bg-card: #23262f;
    /* loading state */
    --nefty-bg-loading: rgba(255, 255, 255, 0.05);
    /* fallback background color for images (best kept as is) */
    --nefty-bg-image: rgba(255, 255, 255, 0.05);
}

🪄 Advanced Styling Options

For more options we support the use of ::part which will give you full controle to overwrite styling. read more about ::part

To see what you can style look at the HTML in the console and look for the attribute part="..."

neftyblocks-market::part(part-name) {
    /* override the styling */
}

the following parts are available

Main part:

mobile-filter
loader-group
loader-list
loader-cards
loader-cards-inner
loader-filters
market
pagination
pagination-btn
pagination-back
pagination-next
error
error-btn

Card part:

card
card-group
card-empty
card-header
card-mint
card-info
card-info-loading
card-info-btn
card-info-item
card-info-item-spacer
card-info-item-value
card-visual
card-image
card-video
card-shadow
card-collection
card-name
card-pricing
card-price
card-price-image
card-price-usd
card-footer
card-buy

Filter part:

filters
container
filter
filter-title
reset
filter-refresh
refresh
select
input
list
list-item
fields
field
field-input
field-icon

Dynamic part:

market-section-filters-active - will hide cards if filters are active (on mobile only)
market-pagination-filters-active - will hide pagination if filters are active (on mobile only)

Custom config

Note This is for advanced users and require basic knowledge on Javascript and API's.

Custom config is used to customize the content you see if you click the "i" for more information about the sale.

to use custom config you need to add a config object. this object needs to be stringified and passed in to the attribute called custom.

Note All optional keys can be removed (so no skip: false, but just delete the line) this will reduce the params length for the GET call and gives room for more options.

// Example config with all options
const config = {
    // global smart contract being used to fill field data
    contract: {
        // key can be "sale_id", "template_id", "asset_id"
        key: 'asset_id',
        // the address of the contract
        contract: 'custom.contract',
        // the scope of the contract
        scope: 'custom.contract',
        // the table of the contract
        table: 'yourtable',
    },
    // global content that will be display on every card
    content: [
        {
            // What you want to content to be called (!mandatory)
            name: 'Title',
            // value is based on path in sales item see: https://aa.neftyblocks.com/docs/#/sales/get_atomicmarket_v1_sales__sale_id_
            value: 'assets+0+name',
        },
        {
            name: 'Health',
            // symbol to append after the value (optional)
            symbol: '%',
            // use field to let the script know to use the smartcontract (no nested values supported)
            field: 'health',
            // if no value is found skip showing it (optional)
            skip: true,
        },
    ],
    // optional to set extra content per schema (all values will be appended to the global content)
    // and follow the same rules as the global content and contract above
    schemas: {
        'schema name': {
            contract: {
                key: 'asset_id',
                contract: 'custom.contract',
                scope: 'custom.contract',
                table: 'yourtable',
            },
            content: [
                {
                    name: 'rarity',
                    value: 'assets+0+data+rarity',
                    skip: true,
                },
                {
                    name: 'Health',
                    field: 'health',
                    symbol: '%',
                    skip: true,
                },
            ],
        },
    },
};

// use the way your framework provides dynamic attributes
`<neftyblocks-market collection="yourCollection" custom=${JSON.stringify(config)}></neftyblocks-market>`;

💲 Payment processing

As we do not expect everybody to have a login and a way to handle signing transactions, we provide a payment processor that will be used to handle the payment process. The payment processor runs on a custom domain https://neftyblocks.me and will deal with login, signing, and getting the user back to the site from where they came.

❤️ Community & Support

GitHub Issues. Best for: bugs and errors you encounter using the embeded market.
Discord. Best for: sharing your project and hanging out with the community.

neftyblocks/neftyblocksme-docs