\n\n[](https://www.npmjs.org/package/@neftyblocks/market)\n[](https://www.npmjs.org/package/@neftyblocks/market)\n[](https://www.npmjs.org/package/@neftyblocks/market)\n\n# NeftyBlocks market\n\nWe 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!\n\n#### What does this embed include?\n\n- ⚙️ Fully functioning marketplace (filters, cards)\n- 🎨 [Customizable look](#-styling) (styling)\n- 💲 [Payment processing](#-payment-processing) (read more below)\n\n## 🚀 Usage\n\nFirst of all, you need to install the library:\n\n#### Package manager\n\n1. Type in the terminal:\n\n```bash\n # install dependencies\n $ npm i @neftyblocks/market\n\n # or yarn\n $ yarn add @neftyblocks/market\n```\n\n2. Include in your javascript file:\n\n```js\nimport '@neftyblocks/market';\n```\n\n3. Place in your HTML where you want to embed the market:\n\n```html\n\n```\n\n#### CDN (Plain HTML)\n\n1. Place in your HTML where you want to embed the market:\n\n```html\n\n\n\n```\n\n## 🎛 Options\n\nOptions are placed the element as `attributes` with a `value`.\nwhich looks as follows:\n\n```html\n\n```\n\nMost attributes are optional except for `collection`\n\n| Attribute | Value | Default | Description |\n| --------------------------- | ---------------------------------------------------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `collection` **(required)** | `your-collection-id` | None | set your collection name so the API knows which collection to send to the embed |\n| `limit` | number between `1` and `100` | `50` | set a value on how the maximum amount of NFT's to show per page |\n| `network` | [supported chains / networks](#supported-chains--networks) | `mainnet` | `mainnet` is the default network you can set it to `testnet` if you want to try it out first. |\n| `chain` | [supported chains / networks](#supported-chains--networks) | `wax` | there is support for multiple chains, see [supported chains / networks](#supported-chains--networks) below. |\n| `redirect` | None | None | the redirect URL is optional and is a way for you to interact with a transaction that happened [see redirect URL](#redirect-URL), default behavior is to redirect the user back to the URL it came from with no extra params. |\n| `endpoint` | None | `api.neftyblocks.me` | only useful for development, API is highly customized for it's purpose. |\n| `custom` | None | None | Used to customize the card quick information [See custom config](#custom-config) |\n\n#### supported chains / networks\n\nThe following blockchains are supported by the embedded marketplace\n\n| chain | network |\n| ------------- | -------------------------- |\n| wax (default) | mainnet (default), testnet |\n\n#### redirect URL\n\nif 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.\n\n- `tx`: the transaction hash\n- `status`: the status of the transaction (`executed` or `failed`) this still needs to be validated as successfully executed\n- `sale`: the sale id\n- `assets`: the asset ids as `\"12345,12345,12345\"`\n\nwhile 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.\n\n## 🎨 Styling\n\nTo get your look and feel to match your project, can customize by using [css variables](https://www.w3schools.com/css/css3_variables.asp).\n\neither place this in your `style.css` css file or add a `` tag in your HTML.\n\n```css\n:root {\n /* the font-family for all text */\n --nefty-font-family: sans-serif;\n /* the default font size (best kept as is) */\n --nefty-font-size: 16px;\n /* the smaller font size (best kept as is) */\n --nefty-font-size--small: 14px;\n\n /* the minimum and maximum width of the cards (responsive) */\n --nefty-card-size-min: 250px;\n --nefty-card-size-max: 1fr;\n\n /* the space between cards */\n --nefty-cards-gap: 28px;\n\n /* border radius for all roundings of inputs, buttons, images */\n --nefty-radius: 24px;\n --nefty-radius-image: 18px;\n --nefty-radius-small: 12px;\n\n /* border color for buttons, inputs */\n --nefty-border: #353945;\n /* border color for the cards (if none use same color as card background) */\n --nefty-border-card: #23262f;\n /* border thickness */\n --nefty-border-size: 1px;\n\n /* color primary text */\n --nefty-color: #fcfcfd;\n /* colors for non primary text */\n --nefty-color-secondary: #777e90;\n\n /* buy button in the card (highlight) */\n --nefty-btn-primary: #00ffff;\n --nefty-btn-primary-bg: #23262f;\n --nefty-btn-primary-border: #00ffff;\n --nefty-btn-primary--active: #23262f;\n --nefty-btn-primary-bg--active: #00ffff;\n --nefty-btn-primary-border--active: #00ffff;\n\n /* styling of pagination buttons and small reset button (will appear once you start filtering) */\n --nefty-btn-secondary: #fcfcfd;\n --nefty-btn-secondary-bg: #141416;\n --nefty-btn-secondary-border: #353945;\n --nefty-btn-secondary--active: #fcfcfd;\n --nefty-btn-secondary-bg--active: #353945;\n --nefty-btn-secondary-border--active: #353945;\n\n /* the filter button on mobile design */\n --nefty-btn-tertiary: #141416;\n --nefty-btn-tertiary-bg: #fcfcfd;\n --nefty-btn-tertiary-border: #fcfcfd;\n --nefty-btn-tertiary--active: #fcfcfd;\n --nefty-btn-tertiary-bg--active: #141416;\n --nefty-btn-tertiary-border--active: #fcfcfd;\n\n /* backgrounds */\n /* list background in filters (schemas) */\n --nefty-bg-list-item: #141416;\n /* card mint background */\n --nefty-bg-mint: #0e0f12;\n /* all inputs (filters) */\n --nefty-bg-inputs: #23262f;\n /* card background */\n --nefty-bg-card: #23262f;\n /* loading state */\n --nefty-bg-loading: rgba(255, 255, 255, 0.05);\n /* fallback background color for images (best kept as is) */\n --nefty-bg-image: rgba(255, 255, 255, 0.05);\n}\n```\n\n### 🪄 Advanced Styling Options\n\nFor more options we support the use of `::part` which will give you full controle to overwrite styling. [read more about ::part](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)\n\nTo see what you can style look at the HTML in the console and look for the attribute `part=\"...\"`\n\n```css\nneftyblocks-market::part(part-name) {\n /* override the styling */\n}\n```\n\nthe following parts are available\n\nMain part:\n\n- `mobile-filter`\n- `loader-group`\n- `loader-list`\n- `loader-cards`\n- `loader-cards-inner`\n- `loader-filters`\n- `market`\n- `pagination`\n- `pagination-btn`\n- `pagination-back`\n- `pagination-next`\n- `error`\n- `error-btn`\n\nCard part:\n\n- `card`\n- `card-group`\n- `card-empty`\n- `card-header`\n- `card-mint`\n- `card-info`\n- `card-info-loading`\n- `card-info-btn`\n- `card-info-item`\n- `card-info-item-spacer`\n- `card-info-item-value`\n- `card-visual`\n- `card-image`\n- `card-video`\n- `card-shadow`\n- `card-collection`\n- `card-name`\n- `card-pricing`\n- `card-price`\n- `card-price-image`\n- `card-price-usd`\n- `card-footer`\n- `card-buy`\n\nFilter part:\n\n- `filters`\n- `container`\n- `filter`\n- `filter-title`\n- `reset`\n- `filter-refresh`\n- `refresh`\n- `select`\n- `input`\n- `list`\n- `list-item`\n- `fields`\n- `field`\n- `field-input`\n- `field-icon`\n\nDynamic part:\n\n- `market-section-filters-active` - will hide cards if filters are active (on mobile only)\n- `market-pagination-filters-active` - will hide pagination if filters are active (on mobile only)\n\n## Custom config\n\n> **Note**\n> This is for advanced users and require basic knowledge on Javascript and API's.\n\nCustom config is used to customize the content you see if you click the \"i\" for more information about the sale.\n\nto use custom config you need to add a `config` object.\nthis object needs to be `stringified` and passed in to the attribute called `custom`.\n\n> **Note**\n> All optional `keys` can be removed (so no `skip: false`, but just delete the line)\n> this will reduce the params length for the GET call and gives room for more options.\n\n```js\n// Example config with all options\nconst config = {\n // global smart contract being used to fill field data\n contract: {\n // key can be \"sale_id\", \"template_id\", \"asset_id\"\n key: 'asset_id',\n // the address of the contract\n contract: 'custom.contract',\n // the scope of the contract\n scope: 'custom.contract',\n // the table of the contract\n table: 'yourtable',\n },\n // global content that will be display on every card\n content: [\n {\n // What you want to content to be called (!mandatory)\n name: 'Title',\n // value is based on path in sales item see: https://aa.neftyblocks.com/docs/#/sales/get_atomicmarket_v1_sales__sale_id_\n value: 'assets+0+name',\n },\n {\n name: 'Health',\n // symbol to append after the value (optional)\n symbol: '%',\n // use field to let the script know to use the smartcontract (no nested values supported)\n field: 'health',\n // if no value is found skip showing it (optional)\n skip: true,\n },\n ],\n // optional to set extra content per schema (all values will be appended to the global content)\n // and follow the same rules as the global content and contract above\n schemas: {\n 'schema name': {\n contract: {\n key: 'asset_id',\n contract: 'custom.contract',\n scope: 'custom.contract',\n table: 'yourtable',\n },\n content: [\n {\n name: 'rarity',\n value: 'assets+0+data+rarity',\n skip: true,\n },\n {\n name: 'Health',\n field: 'health',\n symbol: '%',\n skip: true,\n },\n ],\n },\n },\n};\n\n// use the way your framework provides dynamic attributes\n``;\n```\n\n## 💲 Payment processing\n\nAs 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](https://neftyblocks.me) and will deal with login, signing, and getting the user back to the site from where they came.\n\n## ❤️ Community & Support\n\n- [GitHub Issues.](https://github.com/neftyblocks/embeds) Best for: bugs and errors you encounter using the embeded market.\n- [Discord.](https://discord.com/invite/Bf789hjAsE) Best for: sharing your project and hanging out with the community.\n","readmeFilename":"README.md"}
![\"preview\"](\"https://neftyblocks.me/preview-market.png\")
\n\n