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
/
/
Solana

Solana

Getting Started 🚀
​
⁠
⁠

Install Darkblock's React Solana Widget using yarn or npm
yarn add @darkblock.io/sol-widget


npm i @darkblock.io/sol-widget --save


Once the library is installed, import or require components into your codebase
import "@darkblock.io/sol-widget"

require("@darkblock.io/sol-widget")


⁠
https://www.npmjs.com/package/@darkblock.io/sol-widget#solana-widget-component
⁠
Solana Widget Component
​
⁠
⁠

⁠
https://www.npmjs.com/package/@darkblock.io/sol-widget#input
⁠
⁠

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)
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/sol-widget#example-viewer
⁠
⁠

Example Viewer
​
⁠
⁠

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/sol-widget"

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


⁠
https://www.npmjs.com/package/@darkblock.io/sol-widget#example-add-content
⁠
⁠

Example Add Content
​
⁠
⁠

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/sol-widget"

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

const apiKey = '** contact darkblock for apikey **'

return (
<SolUpgradeWidget
apiKey={apiKey}
tokenId={HgYuunWM9Hpi2oc3MpK31yvURoZhSog13jTbjQYYjPM}
walletAdapter={wallAdapter}
cb={(p) => console.log(p)}
config={config}
/>
)
}

const Main = () => {
...

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

<Widget />

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

export default Main

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