Darkblock.io React Component Library

Getting Started 🚀

Install Darkblock's React Component Library using yarn or npm

yarn add @darkblock.io/darkblock-widgets

npm i @darkblock.io/darkblock-widgets --save

Once the library is installed, import or require components into your codebase

import "@darkblock.io/darkblock-widgets"

require("@darkblock.io/darkblock-widgets")

Solana Widget Component

Input

• tokenId: id of the NFT in Solana
• walletAdapter: wallet context state object returned from useWallet()
• cb: callback function to be triggered on the widget's state change (optional)
• config: config object (optional)

callback 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

This component needs to be used within the scope of the Solana Wallet Adapter component. useWallet should also be called under the Wallet Adapter scope:

import { ConnectionProvider, WalletProvider, useWallet } from "@solanawallet-adapter-react"
import SolanaDarkblockWidget from "@darkblock.io/darkblockwidgets"

const Widget = () => {
  const walletAdapter = useWallet()

  return (
    <SolanaDarkblockWidget
      tokenId="HgYuunWM9Hpi2oc3MpK31yvURoZhSog13jTbjQYYjPM"
      walletAdapter={walletAdapter}
      cb={cb}
      config={config}
    />
  )
}

const Main = () => {
  ...

  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
        <WalletModalProvider>
          <WalletMultiButton />

          <Widget />

        </WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  )
}

export default Main