{"_id":"@darkblock.io/sol-widget-r16","_rev":"1-71668a2cb2ea68c044618a6cde3025ca","name":"@darkblock.io/sol-widget-r16","dist-tags":{"latest":"0.0.0"},"versions":{"0.0.0":{"name":"@darkblock.io/sol-widget-r16","version":"0.0.0","description":"Darkblock.io React Component Library","main":"./dist/index.js","module":"./dist/index.es.js","author":{"name":"roberto@darkblock.io"},"license":"MIT","keywords":["web3.0","darkblock.io","react","widget","NFT"],"dependencies":{"@xstate/react":"^2.0.0","base64-arraybuffer":"^1.0.2","openseadragon":"^3.0.0","photoswipe":"^4.1.3","plyr-react":"^3.2.1","react":"^16.8.0","react-dom":"^16.8.0","react-lottie":"^1.2.3","react-scripts":"5.0.0","xstate":"^4.30.1"},"peerDependencies":{"react":"16.8.0 - 17","react-dom":"16.8.0 - 17"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"gitHead":"05fdb1aa35dd53e77308ef80877bce38336b7f90","_id":"@darkblock.io/sol-widget-r16@0.0.0","_nodeVersion":"16.13.2","_npmVersion":"8.5.1","dist":{"integrity":"sha512-DMVrRhnt7AbbnSHFosAPw0eJU3AmfqsCNtqTi5uLo2qhPkLXQaBz5aYr/KcI95dOlLCCnps4gV/2cGBgPy0AOg==","shasum":"93fc41da82e186fe4968dc2767d427953fffeec8","tarball":"https://registry.npmjs.org/@darkblock.io/sol-widget-r16/-/sol-widget-r16-0.0.0.tgz","fileCount":4,"unpackedSize":1741943,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBxWBPOaFmwLauhMmXkhng6KnDtiyJdG9M/oF6FcSeHgAiEA76DbsdAvuHXqP1Zs/I+2u2qZI8cCOB/13vbSGUsFGAU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicYm1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqiVA//Sl5De1Ch3cyQFQTBSKcdONu4abcQmUyIigwIqLhelf06vNkn\r\n5Mf92N2gkMhQJ0FSTXJmSzBf17CQKpThFd/fov1UDIo/jDewx1NS/P3Nkud/\r\nYqNHzQO/qKECZqcQm0KbMUsQP6xsgcUeHaP0stONMkB307+zmyHyt7iLqz6V\r\npa96Lx0PNNASCppvKU89zMc7At2g/j4mxs4Exf33BKj93dWzMLoDyV4OFHPf\r\nEtkDKVrPUFE5h2seQ+GFl3sndM+FAgmgh4G0XNzT9vyu3019TV+LK6x3Uwx0\r\nyLNXMDzSa5aBDLz0JVR3yglmYkXknlfPWllTos1yULWWBVZNvYzMDM/8p02k\r\nDsX3fziOvXHdjJFQeZo2YBou7hnl3wrh6O4Yt9d+vQ022gnycIxowcV6JdNw\r\n1MjTkwLSzHhhITh+rrGRIxU59xfCYmanZUZCVOz8ssjycEKAsNnuUYsYUiXT\r\nnxXgFdVsLd8168W6EfpdTGQArzbqYWUD8AUjDd4hwJJQ8VO7HAeVwWi03j5n\r\nc/hcSfr+l2wqYmE2Xz2IIM/vihYDVCW/5i2gkTQ4rfkHWNSpOfVyYkY+olg1\r\ns7PEuun97vApnMIe50QAdS3bUXuDvSmklrVRYgLGfA7BrCdLYbdpBmq6agpV\r\nX3XmIfuB1mgckrr3hywzT42BXBOi8ObUPUU=\r\n=WJnY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"maninkari","email":"ts.roberto@gmail.com"},"directories":{},"maintainers":[{"name":"maninkari","email":"ts.roberto@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sol-widget-r16_0.0.0_1651607988968_0.9162426520445535"},"_hasShrinkwrap":false}},"time":{"created":"2022-05-03T19:59:48.885Z","0.0.0":"2022-05-03T19:59:49.200Z","modified":"2022-08-03T19:07:47.927Z"},"maintainers":[],"description":"Darkblock.io React Component Library","keywords":["web3.0","darkblock.io","react","widget","NFT"],"author":{"name":"roberto@darkblock.io"},"license":"MIT","readme":"# Darkblock.io React Component Library\n\n## Getting Started 🚀\n\nInstall Darkblock's React Component Library using `yarn` or `npm`\n\n```\nyarn add @darkblock.io/darkblock-widgets\n```\n\n```\nnpm i @darkblock.io/darkblock-widgets --save\n```\n\nOnce the library is installed, import or require components into your codebase\n\n```\nimport \"@darkblock.io/darkblock-widgets\"\n\nrequire(\"@darkblock.io/darkblock-widgets\")\n```\n\n## Solana Widget Component\n\n### Input\n\n- **tokenId:** id of the NFT in Solana\n- **walletAdapter:** wallet context state object returned from `useWallet()`\n- **cb:** callback function to be triggered on the widget's state change (optional)\n- **config:** config object (optional)\n\n**callback** function example, the callback function will have the widget's state passed as a parameter:\n\n```\nconst cb = (param) => {\n  console.log(param)\n}\n```\n\n**config** object's default value:\n\n```\n{\n  customCssClass: \"\",             // pass here a class name you plan to use\n  debug: false,                   // debug flag to console.log some variables\n  imgViewer: {                    // image viewer control parameters\n    showRotationControl: true,\n    autoHideControls: true,\n    controlsFadeDelay: true,\n  },\n}\n```\n\n### Example\n\nThis component needs to be used within the scope of the Solana Wallet Adapter component. `useWallet` should also be called under the Wallet Adapter scope:\n\n```\nimport { ConnectionProvider, WalletProvider, useWallet } from \"@solanawallet-adapter-react\"\nimport SolanaDarkblockWidget from \"@darkblock.io/darkblockwidgets\"\n\nconst Widget = () => {\n  const walletAdapter = useWallet()\n\n  return (\n    <SolanaDarkblockWidget\n      tokenId=\"HgYuunWM9Hpi2oc3MpK31yvURoZhSog13jTbjQYYjPM\"\n      walletAdapter={walletAdapter}\n      cb={cb}\n      config={config}\n    />\n  )\n}\n\nconst Main = () => {\n  ...\n\n  return (\n    <ConnectionProvider endpoint={endpoint}>\n      <WalletProvider wallets={wallets} autoConnect>\n        <WalletModalProvider>\n          <WalletMultiButton />\n\n          <Widget />\n\n        </WalletModalProvider>\n      </WalletProvider>\n    </ConnectionProvider>\n  )\n}\n\nexport default Main\n\n```\n","readmeFilename":"README.md"}