newocean-drops
v0.3.4-rc.9
Newocean drops embed
0/weekUpdated 3 years agoMITUnpacked: 62.1 KB
Published by NeftyBlocks
npm install newocean-drops
Newocean drops
We at Newocean 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 drops 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 drops overview
- 🎨 Customizable look (styling)
- 💲 Payment processing (read more below)
🚀 Usage
Install the library:
#### Package manager
1. Type in the terminal:
``bash
# install dependencies
$ npm i newocean-drops
# or yarn
$ yarn add newocean-drops
`
2. Include in your javascript file:
`js`
import 'newocean-drops';
3. Place in your HTML where you want to embed the drops:
`html`
#### CDN (Plain HTML)
1. Place in your HTML where you want to embed the drops:
`html
`
🎛 Options
Options are placed the element as attributes with a value.
which looks as follows:
`html`
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 | 8 | set a value on how the maximum amount of drops 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. |options
| | None | None | Used to customize the drops order, sorting, etc. See options config |hidebanner
| | boolean | false | Used to hide the option to buy tokens from Newsafe, by default is visible |
#### supported chains / networks
The following blockchains are supported by the embedded drops
| 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 hashstatus
- : the status of the transaction (executed or failed) this still needs to be validated as successfully executedsale
- : the sale idassets
- : 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 tag in your HTML.
`css
:root {
/ the font-family for all text /
--newocean-font-family: sans-serif;
/ the default font size (best kept as is) /
--newocean-font-size: 16px;
/ the smaller font size (best kept as is) /
--newocean-font-size--small: 14px;
/ the minimum and maximum width of the drop (responsive) /
--newocean-drop-size-min: 250px;
--newocean-drop-size-max: 1fr;
/ the space between drops /
--newocean-drops-gap: 48px;
/ spacing between paragraphs in the description (markdown) /
--newocean-spacing: 6px;
/ border radius for all roundings of inputs, buttons, images, markdown /
--newocean-radius: 24px;
--newocean-radius-image: 18px;
--newocean-radius-markdown: 18px;
--newocean-radius-small: 12px;
/ border color for buttons, inputs /
--newocean-border: #353945;
/ border color for the drop/
--newocean-border-drop: #23262f;
/ border thickness /
--newocean-border-size: 1px;
/ color primary text /
--newocean-color: #fcfcfd;
/ colors for non primary text /
--newocean-color-secondary: #777e90;
/ color for highlights (if price is free) /
--newocean-color-highlight: #00ffff;
/ color for the banner text /
--newocean-color-banner: #24262f;
/ color for the lock icon if drop is secured /
--newocean-icon-banner: #fff;
/ claim button in the drop (highlight) /
--newocean-btn-primary: #00ffff;
--newocean-btn-primary-bg: #23262f;
--newocean-btn-primary-border: #00ffff;
--newocean-btn-primary--active: #23262f;
--newocean-btn-primary-bg--active: #00ffff;
--newocean-btn-primary-border--active: #00ffff;
/ sold button in the drop (no hover state) /
--newocean-btn-sold: #cc333d;
--newocean-btn-sold-bg: rgba(255, 255, 255, 0);
--newocean-btn-sold-border: #cc333d;
/ styling of pagination, info, and visual carousel buttons /
--newocean-btn-secondary: #fcfcfd;
--newocean-btn-secondary-bg: #141416;
--newocean-btn-secondary-bg-50: rgba(20, 20, 22, 0.5);
--newocean-btn-secondary-border: #353945;
--newocean-btn-secondary--active: #fcfcfd;
--newocean-btn-secondary-bg--active: #353945;
--newocean-btn-secondary-border--active: #353945;
/ backgrounds /
/ drop mint background /
--newocean-bg-mint: #0e0f12;
/ all inputs /
--newocean-bg-inputs: #23262f;
/ drop background /
--newocean-bg-drop: #23262f;
/ markdown (desciption) background /
--newocean-bg-markdown: #353843;
/ banner (info for secure drop) /
--newocean-bg-banner: #fcfcfd;
/ loading state /
--newocean-bg-loading: rgba(255, 255, 255, 0.05);
/ fallback background color for images (best kept as is) /
--newocean-bg-image: rgba(255, 255, 255, 0.05);
}
`
$3
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="..."
`css`
newocean-drops::part(part-name) {
/ override the styling /
}
the following parts are available
Drops part:
- drops
-
-
-
-
-
Drop part:
- drop
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Drop markdown (description) part:
- drop-md-button
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Other part:
- loading-group
-
-
-
-
-
-
Options config
> Note
> This is for advanced users and require basic knowledge on Javascript and API's.
Options config is used to customize the drops being displayed, this give you the option to only show drops you want or to sort or order the drops.
See aa.neftyblocks.com for all options
To use options config you need to add a options object.stringified
this object needs to be and passed in to the attribute called options.
`js
// Example config with some options
const options = {
ids: '10001,10002,10003',
order: 'desc',
symbol: 'NEFTY',
sort: 'start_time',
};
// use the way your framework provides dynamic attributes;``
💲 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 drops.
- Discord. Best for: sharing your project and hanging out with the community.