JavaScript required
We’re sorry, but Coda doesn’t work properly without JavaScript enabled.
Darkblock Docs
Darkblock Docs
Darkblock Docs
What is Darkblock?
How does it work?
Creating a darkblock
Viewing Darkblock content
The Darkblock Protocol
Supported Blockchains
HIDEME Sample NFT with Darkblocks
For Creators
Products
The Darkblock API
The Darkblock Viewer
The Upgrader
The Darkblock Web App
The Darkblock TV App
Features
NFT Upgrades
Collection Upgrades
Content Stacking
Editing Metadata
Send to Kindle
Use Cases
Comics and Books
Movies
Content Creation
PFPs
Gamified Experiences
Developer Integration
Getting Started
The Darkblock API Overview
Get an API Key
Embed Darkblocks into any website
NPM
Ethereum
Polygon
Solana
Tezos
Avalanche
Customization
Direct Integration
HIDEME UGC (User Generated Content)
Content Monetization
Subscriptions using Unlock Protocol
Content Rental with Unlock Protocol
Help / Support
Terminology
Help, I made a mistake!
Tutorials
Unlockable Party Pack
NPM
Avalanche
Getting Started 🚀
Install Darkblock's React Avalanche Widget using
yarn
or
npm
yarn add @darkblock.io/eth-widget
npm i @darkblock.io/eth-widget --save
Once the library is installed, import or require components into your codebase, i.e:
import EthereumDarkblockWidget from "@darkblock.io/eth-widget"
https://www.npmjs.com/package/@darkblock.io/avax-widget#avalanche-widget-component
Avalanche Widget Component
https://www.npmjs.com/package/@darkblock.io/avax-widget#input
Input
contractAddress: contractAddress
tokenId: id of the NFT in Avalanche
w3:* web3 object
cb: callback function to be triggered on the widget's state change (optional)
config: config object (optional)
cb function example, the callback function will have the widget's state passed as a parameter:
const cb = (param) => {
console.log(param)
}
config object's default value:
{
customCssClass: "", // pass here a class name you plan to use
debug: false, // debug flag to console.log some variables
imgViewer: { // image viewer control parameters
showRotationControl: true,
autoHideControls: true,
controlsFadeDelay: true,
},
}
https://www.npmjs.com/package/@darkblock.io/avax-widget#example
Example
import { AvalancheDarkblockWidget } from "@darkblock.io/avax-widget"
const Widget = () => {
...
const contractAddress = 'nft contract address'
const tokenId = 'nft token id'
return (
<AvalancheDarkblockWidget
contractAddress={contractAddress}
tokenId={tokenId
w3={web3}
cb={(p) => console.log(p)}
config={config}
/>
)
}
export default Widget
https://www.npmjs.com/package/@darkblock.io/avax-widget#example-1
Example
import { AvalancheUpgradeWidget } from "@darkblock.io/avax-widget"
const Widget = () => {
const apiKey = '** contact darkblock for apikey **'
const contractAddress = 'nft contract address'
const tokenId = 'nft token id'
return (
<AvalancheUpgradeWidget
apiKey={apiKey}
contractAddress={contractAddress}
tokenId={tokenId}
w3={web3}
cb={(p) => console.log(p)}
config={config}
/>
)
}
export default Widget
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
Ctrl
P
) instead.