darkblock-logo
Darkblock Docs
darkblock-logo
Darkblock Docs
NPM

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 ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.