Darkblock React Tezos Widget

Getting Started 🚀

Install Darkblock's React Tezos Widget using yarn or npm

Copy
Copied
yarn add @darkblock.io/tez-widget
Copy
Copied
npm i @darkblock.io/tez-widget --save

Once the library is installed, import or require components into your codebase, i.e:

Copy
Copied
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:

Copy
Copied
const cb = (param) => {
  console.log(param)
}

config object's default value:

Copy
Copied
{
  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

Copy
Copied
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

Copy
Copied
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