Skip to content
darkblock-logo
Darkblock Docs
  • Pages
    • 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
darkblock-logo
Darkblock Docs
/
/
Ethereum

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

Want to print your doc?
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.