Darkblock React Tezos Widget
Getting Started 🚀​
Install Darkblock's React Tezos Widget using yarn
 or npm
yarn add @darkblock.io/tez-widget
npm i @darkblock.io/tez-widget --save
Once the library is installed, import or require components into your codebase, i.e:
import TezosDarkblockWidget from "@darkblock.io/tez-widget"
Tezos Widget Component​
Input​
- contractAddress:Â contractAddress
- tokenId:Â id of the NFT in Tezos
- w3:*Â tezos wallet 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,
},
}
Example​
import { TezosDarkblockWidget } from "@darkblock.io/tez-widget"
const Widget = () => {
...
const contractAddress = 'nft contract address'
const tokenId = 'nft token id'
return (
<TezosDarkblockWidget
contractAddress={contractAddress}
tokenId={tokenId
w3={web3}
cb={(p) => console.log(p)}
config={config}
/>
)
}
export default Widget
Example​
import { TezosUpgradeWidget } from "@darkblock.io/tez-widget"
const Widget = () => {
const apiKey = '** contact darkblock for apikey **'
const contractAddress = 'nft contract address'
const tokenId = 'nft token id'
return (
<TezosUpgradeWidget
apiKey={apiKey}
contractAddress={contractAddress}
tokenId={tokenId}
w3={web3}
cb={(p) => console.log(p)}
config={config}
/>
)
}
export default Widget