JavaScript required
We’re sorry, but Coda doesn’t work properly without JavaScript enabled.
Gallery
Darkblock Docs
Share
Explore
Gallery
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
Ethereum
Getting Started 🚀
Install Darkblock's React Ethereum 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/eth-widget#ethereum-widget-component
Ethereum Widget Component
https://www.npmjs.com/package/@darkblock.io/eth-widget#input
Input
contractAddress: contractAddress
tokenId: id of the NFT in Ethereum
w3:* web3 object
cb: callback function to be triggered on the widget's state change (optional)
config: config object (optional)
network: mainnet or rinkeby (optional - default is mainnet)
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/eth-widget#example
Example
import { EthereumDarkblockWidget } from "@darkblock.io/eth-widget"
const Widget = () => {
...
return (
<EthereumDarkblockWidget
contractAddress="0x495f947276749ce646f68ac8c248420045cb7b5e"
tokenId="30553606573219150352991292921105176340809048341686170040023897672591735783425"
w3={web3}
cb={(p) => console.log(p)}
config={config}
network={'mainnet' || 'rinkeby'}
/>
)
}
export default Widget
https://www.npmjs.com/package/@darkblock.io/eth-widget#example-1
Example
import { EthUpgradeWidget } from "@darkblock.io/eth-widget"
const Widget = () => {
const apiKey = '** contact darkblock for apikey **'
return (
<EthUpgradeWidget
apiKey={apiKey}
contractAddress="0x495f947276749ce646f68ac8c248420045cb7b5e"
tokenId="30553606573219150352991292921105176340809048341686170040023897672591735783425"
w3={web3}
cb={(p) => console.log(p)}
config={config}
network={'mainnet' || 'rinkeby'}
/>
)
}
export default Widget
Gallery
Share
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.