{"_id":"3box-chatbox-react","_rev":"51-278eba259dddfdcca6bbad00467e207f","name":"3box-chatbox-react","dist-tags":{"beta":"0.1.6-beta.0","next":"0.2.1-beta.1","latest":"0.3.0"},"versions":{"0.0.1-beta.1":{"name":"3box-chatbox-react","version":"0.0.1-beta.1","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.1-beta.1","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"b51575561b720be0340dc3ddb3f61cfc7643ab5e","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.1-beta.1.tgz","fileCount":13,"integrity":"sha512-VXpBUTTHlV/hqxa+jFsLR1Xt/ymPlZz6Ymb4PftMd74fGdp54nJ9h0H47NJjngx+ef/ZmS3jki/lgs6cDD6OVw==","signatures":[{"sig":"MEYCIQDY3GRzaAEeM8nDjudS64w+Oi3gT8FsZ520+3eO6sgCgwIhAIJM5j0SnNfwroNPVRetOy3DB/Y9gIMFifpCuzIXnsaj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2981622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnTh+CRA9TVsSAnZWagAADD0QAJ5kOOcY+ll/0Pa6FG10\nYXlt1/zTru70IuL9bRuphA9RO6HgqgfgngAxebad/jqdRLewY42cx4tz3lvq\nxhWN3Drr6vEuZo8Rww+VuKX9cePrN7Jzvnols3CGFXvP5KYW47PH+Uzb6iQF\nJa0R9OP6nN604u8aR6ttfxgA0RE3h06rYwe5s7SzyXyvMu+A2AgpCIDyOvMl\nJ6eF7gjCDWMs8fQCyolEBx6NJUHdCwY25z9BXQ910YwZ7oEsIfYZ0TxEvcD4\ntSUD43kQ9V7YG55Gxbz8/yj4vIyH3r5fmeH4lD+NqS7W1AJocAg7Rcv5q+51\ne/PlFe6nAscydCPFz2jbOWUZE8JHTakidfou0UDdYYxdGYJmix3E7qDR15qV\npPb81vzH/SuzsXGFRaD+KmW1O0cmVhVCrjWaqJjrGvLL+Qf7XmokAjvxiGs+\no33/uidHAXRk9Je5ZKx3UCQdBzoKXKoT2gJor0MqNPBg9SgwQ7UtKYbnY9do\n+YQrBd0EsYCM/jDtnrd2OE+XeSVEiCkm3z/QaDETzlO3LOKvVXu5SsqP+laY\nDa9iCq+sllTwt6N4P7COmos6wFeD4+Dpkm3Wv4N8V1JW9Kv6IllKE91spwzW\n+u8xRgicjy9+hPGsekYnzmb32eoims70p9HV/VmIJ+u4CHRA3+c5sbanjEih\nTY2t\r\n=jUEp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/index.js","gitHead":"0c2f801b61b1f9d2f881dd5de2dde61d024967f2","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","coverage":"jest --coverage","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.12.0","emoji-js":"^3.4.1","babel-core":"^7.0.0-bridge.0","react-tilt":"^0.1.4","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-text-loop":"^2.1.1","svg-inline-loader":"^0.8.0","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","node-sass":"^4.7.2","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-inlinesvg":"^1.1.6","react-hot-loader":"next","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.1-beta.1_1570584701602_0.21354236026122653","host":"s3://npm-registry-packages"}},"0.0.1-beta.2":{"name":"3box-chatbox-react","version":"0.0.1-beta.2","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.1-beta.2","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"1520b5fa3bf3750d0e92dfb16b297c991b2c8c7c","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.1-beta.2.tgz","fileCount":14,"integrity":"sha512-PEQxFCec9aHP2JPbdPn7y0qhkRZI00IxTpqmL1WRgUPwr/5TjuAA1tYwJADWFidhdlbdTsbvyvA6ac8dVPGl0A==","signatures":[{"sig":"MEQCIEcLushOHwcbhoCZYq7dIvH343utmOWLaLwV5bq/2og5AiAg7+6V5fHYuq8dTnU2b+/R07+78n1kczSkWQOv7LUYwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2980997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpThQCRA9TVsSAnZWagAA8T8QAKEdlFLD8GrwPn1DxX5H\n/ThgxwdAqhI2Vxtr6IIm4CEUDK2AZMWHvAiKxTSLlHLwyCf4PviRHfP91EEf\ngCC8JKuxYTeeHkJYQZG/3y3LvyjVM9LNBY2O/tPMuf7WuZcKNlXltS44g806\ncZfyRhAZ22wtkQttVfPJkK7MPmv7y/aSW6HSGTRR2I5C11rReRVif29Vp75+\nldmCv7RPNMz9vWuql1Ha4JwvscNq5TGZfqvZ9aTFsKY3QNrp/5XTJEgHhGOP\ndjQLnUravcD/rSvTadi4kDAZAAdKtHNm5LAl2TRCmRA36F3MvQQ3eEKKPVhw\nvJqmw8gyAqwWYeCxqRkJr/BrvsTyCfk45+V9nphBSWW/0gJshJN89+7Eayrh\nc6Yk61gXwdCuRJe9IHdUBGDqiLAd3dhAFozt3xf8207HT7fDwJ/lND7fmus4\nEkFcIoPWJJsSFcR0AD4GwTeoWgjeVxVh/8MD2Q8R+TXCsXTChetOvPRRfDUM\n7VbQvApLpwYVTYl8/5NvvTfGMucdPEv/iXOr/mVAsdb0HHIfzQs+ZXM3Ztf8\nI+wauwS3YvzTA0jZ4kcri8TW7FFydmGHoC6K5QzQuYMd7RXXFHJwD7SUyl+p\naqWkT4GibovkqZYjG82j775TgaWc7TRf8/GqV9n922+nEaEbOs8g+7QG4Jk/\n7wNl\r\n=XioN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/index.js","readme":"[![Discord](https://img.shields.io/discord/484729862368526356.svg?style=for-the-badge)](https://discordapp.com/invite/Z3f3Cxy)\r\n[![npm](https://img.shields.io/npm/v/3box-chatbox-react.svg?style=for-the-badge)](https://www.npmjs.com/package/3box-chatbox-react)\r\n[![Twitter Follow](https://img.shields.io/twitter/follow/3boxdb.svg?style=for-the-badge&label=Twitter)](https://twitter.com/3boxdb)\r\n\r\n# 3Box Chatbox Plugin 💬\r\n\r\n`3box-chatbox-react` node package is a drop-in react component that provides Web3 developers with a readymade chat system for their Ethereum application. Easily add rich, decentralized social discourse to your dApp with one line of code. The 3Box Chatbox plugin is built using 3Box infrastructure, and handles all logic for creating a chatbox. *Read the docs on [docs.3box.io](https://docs.3box.io/build/plugins/comments)*.\r\n\r\n### Try the demo [here](https://3box.github.io/3box-comments-react/examples/dist/)\r\n![Example Screenshot](comments-example-screenshot.png)\r\n</br>\r\n\r\n## How it Works\r\n#### Architecture\r\nThe Chatbox plugin is built using a standard implementation of [Open Threads](https://docs.3box.io/build/web-apps/messaging/choose#open-threads) which are defined in the [3Box Threads API](https://docs.3box.io/api/messaging) and made available via the [`3Box.js SDK`](https://github.com/3box/3box-js). Chatbox messages are ephemeral and are persisted only as long as there is at least one user in the chatbox. The Chatbox plugin includes UI for inputting and displaying both an in-window and pop-up chat and all relevant logic. The component is configurable to various authentication patterns, and can handle both Web3/3Box logged-in & logged-out states. \r\n\r\n#### Authentication\r\nThe content of the configured chatbox cannot be read until a user has authenticated into their 3Box and joined the ephemeral (`ghost`-type) thread.  After authenticating, a user can post and receive messages from other users in *real-time*.\r\n</br>\r\n</br>\r\n\r\n## Getting Started\r\n1. Install the component\r\n2. Choose your authentication pattern\r\n3. Configure application settings\r\n4. Usage\r\n\r\n### 1. Install the component\r\n\r\n```shell\r\nnpm i -S 3box-chatbox-react\r\n```\r\n\r\n### 2. Choose your authentication pattern\r\nDepending on *when and how* your dApp handles authentication for web3 and 3Box, you will need to provide a different set of props to the component. Three acceptable authentication patterns and their respective props are discussed below in A-C:\r\n\r\n**A) Dapp handles web3 and 3Box logins, and they run *before* component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the `box` instance returned from `Box.openBox(ethAddr)` via 3Box.js should be passed to the `box` prop in the comments component. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages are their own.\r\n\r\n**B) Dapp handles web3 and 3Box logins, but they haven't run before component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-comments-react` component. In this case, the login logic implemented in the dapp should be passed to the Comments component as the `loginFunction` prop, which is run when a user attempts to post a comment. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine `deletePost` access on each comment.\r\n\r\n**C) Dapp has no web3 and 3Box login logic.**\r\n\r\nDapp only integrates with the `3box-comments-react` component, but not `3Box.js SDK`. All web3 and 3Box login logic will be handled within the Comments component, though it's required for the `ethereum` object from your dapp's preferred web3 provider be passed to the `ethereum` prop in the component.\r\n\r\n#### Best practice\r\n\r\nFor the best UX, we recommend implementing one of the following authentication patterns: A; B; or B with A.\r\n\r\nEach of these patterns allow your application to make the `box` object available in global application state where it can be used by all instances of the Chatbox component regardless of which page the user is on. This global pattern removes the need for users to authenticate on each chatbox component, should you decide to have more than one, which would be the case in C.\r\n\r\n### 3. Configure application settings\r\n\r\n**First, choose a name for your application's 3Box space.**\r\n\r\nAlthough you are free to choose whichever name you'd like for your app's space, we recommend using the name of your app. If your application already has a 3Box space, you are welcome to use that same one for the chatbox.\r\n\r\n**Next, choose a naming convention for your application's threads.**\r\n\r\nThe Chatbox thread needs a name, and we recommend that your application creates `threadNames` according to a simple rule. We generally like using a natural identifier, such as community name, page URL, token ID, or other similar means.\r\n\r\n</br>\r\n</br>\r\n\r\n\r\n### 4. Usage\r\n\r\n#### Example\r\n\r\n```jsx\r\nimport ThreeBoxComments from '3box-comments-react';\r\n\r\nconst MyComponent = ({ handleLogin, box, ethereum, myAddress, currentUser3BoxProfile, adminEthAddr }) => (\r\n    <ChatBox \r\n        // required\r\n        spaceName=\"mySpaceName\"\r\n        threadName=\"myThreadName\"\r\n\r\n\r\n        // Required props for context A) & B)\r\n        box={box}\r\n        currentUserAddr={myAddress}\r\n\r\n        // Required prop for context B)\r\n        loginFunction={handleLogin}\r\n\r\n        // Required prop for context C)\r\n        ethereum={ethereum}\r\n\r\n        // optional\r\n        mute={false}\r\n        popupChat\r\n        showEmoji\r\n        colorTheme=\"#181F21\"\r\n        currentUser3BoxProfile={currentUser3BoxProfile}\r\n        userProfileURL={address => `https://mywebsite.com/user/${address}`}\r\n        spaceOpts={}\r\n        threadOpts={}\r\n        agentProfile={\r\n            chatName: \"3Box\",\r\n            imageUrl: \"https://imgur.com/RXJO8FD\"\r\n        }\r\n    />\r\n);\r\n```\r\n\r\n\r\n#### Prop Types\r\n\r\n| Property | Type          | Default  | Required Case          | Description |\r\n| :-------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `spaceName`    | String        |    |  Always   | Likely your dApp name and / or comment category.  A single `spaceName` with different `threadName`s is common practice when building a dApp with multiple Comment threads. |\r\n| `threadName`    | String       |   | Always    | A name specific to this Comments thread. |\r\n| `adminEthAddr`    | String (Ethereum Address)       |   | Always    | The Ethereum address you wish to give admin rights to for the Comments thread.  This user will be able to delete all comments and accept members in a members-only thread. **A thread with a new admin address, despite identical `spaceName` and `threadName`, will create an entirely new thread.**|\r\n| `box`    | Object         |   | A (and likely B)    | The `box` instance returned from running `await Box.openBox(address, web3)` somewhere in your dApp.|\r\n| `currentUserAddr`    | String (Ethereum Address)          |    | A & B | The current user's Ethereum address. Passing this will help determine whether a user has delete access on each comment.  This prop will also let the component fetch that user's 3Box profile on component mount and render that data (profile picture) in the Comment input UI. |\r\n| `loginFunction`    | Function       |    | B    | A function from your dApp that handles web3 and 3Box login at the global dApp state. This callback will run when a user attempts to save a comment but a `box` instance doesn't yet exist. Running this function should result in a box instance (from `const box = Box.openBox(address, web3)`) being passed as the `box` prop to this component.  |\r\n| `ethereum`    | Object        |  window.ethereum  | C    | The `ethereum` object from whichever web3 provider your dApp uses.  The `enable` method on this object will be used to get the current user's Ethereum address and that address will be used to `openBox` within the current Component context.|\r\n| `popupChat`    | Boolean       |  False   | Optional    | A boolean - `true` - to configure a pop up style chatbox with a button fixed to the bottom right of the window to pop open the chat UI. False will render the component in whichever container you have implemented. |\r\n| `agentProfile`    | Object       |  { chatName: 'Chatbox', imageUrl: null }   | Optional    | An object with the name of the chatbox which will appear in the `Join thread` step and in the header of the chat UI.  The default `imageUrl` is the provided chat icon. |\r\n| `spaceOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `threadOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `colorTheme`    | String       |  False  | Optional    | Pass an rgb or hex color string to match the color theme of your application |\r\n| `mute`    | Boolean       |  False  | Optional    | Pass false to turn off sound for incoming messages. |\r\n| `showEmoji`    | Boolean       |  False  | Optional    | Pass false to turn off the emoji pop up within the chat input UI. |\r\n| `currentUser3BoxProfile`    | Object       |   | Optional    | If the current user has already had their 3Box data fetched at the global dApp state, pass the object returned from `Box.getProfile(profileAddress)` to avoid an extra request.  This data will be rendered in the Comment input interface.|\r\n| `userProfileURL`    | Function       |  Defaults to returning user's 3Box profile URL  | Optional    | A function that returns a correctly formatted URL of a user's profile on the current platform.  The function will be passed an Ethereum address within the component, if needed.  A user will be redirected to the URL returned from this function when clicking on the name or Ethereum address associated with the comment in the thread.|\r\n\r\n## License\r\n\r\nMIT\r\n","gitHead":"668d77329b9c2e8f7f5a676970b9c1ab1a4caf99","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","coverage":"jest --coverage","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.12.0","emoji-js":"^3.4.1","orbit-db":"^0.21.4","babel-core":"^7.0.0-bridge.0","react-tilt":"^0.1.4","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-text-loop":"^2.1.1","svg-inline-loader":"^0.8.0","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","node-sass":"^4.7.2","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-inlinesvg":"^1.1.6","react-hot-loader":"next","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.1-beta.2_1571108944175_0.0250058306766483","host":"s3://npm-registry-packages"}},"0.0.1-beta.3":{"name":"3box-chatbox-react","version":"0.0.1-beta.3","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.1-beta.3","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"109fb2cb70933618011e867b815c884dbd6b7e07","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.1-beta.3.tgz","fileCount":14,"integrity":"sha512-hCrbdH0ZHQ6ccHbfdzWV8KurVhWOdo6xmJ+ICtP6KJof7Rozqb4zzk4FksJCMLYN0c++ZdqyIy9DRAvIejgdbw==","signatures":[{"sig":"MEUCIQCQBKak2jWtUQHGS3NA0uYxw5qkoA5EZGN3UgSD8FU57wIgYfDBHT22QhZvrttUJgXt4poB1LRe9UV6XGFbbhjEMDA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2981536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdptXkCRA9TVsSAnZWagAA1pMP+wUMMEJHbqwVbA8p2g9H\nTxvAI3kvcis9Qvdy8rKaJG6HVQvusXBB4I1Xf40t6TXEkw4vh0aaCAR+Sd/Y\njm0v38gTjUeQjw6yvsSl5P+bkMhJpIKL5kVzsijq019Fo1ma1IWdzpr4yaam\nEPk+YpYCdDzM9S7NWDjHU/osuDyAhIPmrtHphauhD4Y1ez1X977gq3gK3IPh\nihZ10NCZqJh8Vq74lf7h6BG1wiNLTjtvVOns81+lzn9dIidkjbgNpvd7G4TL\norvd2Uq5JLz78rkWXTLOOIM7vGHpg2oY+Hl1iY7eofLZese31FIDG/x3t0Bd\ni476DwjQEVPt+nujT8wBc5wJYy/lvgG/Sosq8I2fbvDnozXihn7dgdIgSd9M\nQgQ5l8+r788/nm3ORNCdL9/czKwyuTfSinA+mXypTyvGAHv2bJZZr4Um0P6R\nv45AC0QQNgvpgZY9ntexoY7wy/MePdD1US6/Ib/KwHAdhhYDZfzEPsb2DxYT\nGJz5R6SSr/XN+zJ+B2xVhWgKShmKil0mZSbTQbKbnfJ39tQ0U7xZTnPUPk/k\nm9PZbjq2/FXZBQbI51sqgZa5KppMaR9CUMPL1ttU88clgor1kLLeoWJ792pF\ncz+4peDPMKcU2SdaH8sWNNh0Uc8hKsWqs4ifZ2U1Xm03moPJtsOU4bPzYJWb\nkwXw\r\n=6chF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/index.js","gitHead":"64672e1573fc23f6810f2327855aad7597b8a947","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","coverage":"jest --coverage","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.12.0","emoji-js":"^3.4.1","orbit-db":"^0.21.4","babel-core":"^7.0.0-bridge.0","react-tilt":"^0.1.4","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-text-loop":"^2.1.1","svg-inline-loader":"^0.8.0","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","node-sass":"^4.7.2","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-inlinesvg":"^1.1.6","react-hot-loader":"next","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.1-beta.3_1571214819473_0.8441594226666085","host":"s3://npm-registry-packages"}},"0.0.1-beta.4":{"name":"3box-chatbox-react","version":"0.0.1-beta.4","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.1-beta.4","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"5e6fc6e3c2941ebfda279b3c595d05ab2c077fb8","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.1-beta.4.tgz","fileCount":15,"integrity":"sha512-aKdTakmY+XObjJPTOggnBfGi8NVODCF0rJPci6wBNstsDJrK6Zw2L4tOHXsIug6G3GIMoxiU8PiZsvaeTkrinw==","signatures":[{"sig":"MEUCIQDns+RW+De4oFgHwUGPcwudwQRCciOHCUVvHk3gBU58ogIgZs2qfBqFonYIfv1uGnJsrYdk1mfOPvkWax74fs+hstQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3403740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdptgxCRA9TVsSAnZWagAAcdsQAIXWfDbcM1lVfNaX+0Ow\ndjCBF/w5GWW37GOFJWjgr5LgrCr1Jbgx3FQBigOcDj+ZJI+eO/MA1mutff0N\nU1x2t7F3LFZ+vWN9fdOiJDmLrhexLO+v3FhJX+3g+O4+BtZLznWKrIVfwrHx\nrI7d0+m8kU8oe9Zu1zmaWg3wgqK+wMPjItluJUe47F3uVu+bzcmNfA7sdE2J\nghEjgIewtoN9GhjirIMJqOJSbd5+aysLA1X9C1GgzFMifmLk/PSUnX/pmFB2\nU43dXM7fvsvYmP8ktgkVrFMvOOehLYPeJFDqUu9KgJaunm7DI0Q51Li1mruv\n7SxhBLDw0QgNZ+fvjrDoS7H1013lpj0BpFnWMop1XpsnCW6zNnIFGAdysO/r\neTS3LrnAKhwhmoSBv4MFFFnSy/pMcjnMIS1cO864rj+sjgUHf1EkcvSeAIJX\ne3f+P16DYBdmd/wstpiDZGQ87GCfKQeB0iS0/E7JYEWL9nDkp5IlkjI8FXJA\nNYKeYdRJl3RZ98/rp5HK0Mz+h3XBoMpf3G6Y1q+aNi3X8Uddd9zHcr9Lb2WT\nysi2m+eIRc2+GJjF53UPmpmw7quummo6RI0vkbtlnU1+kiRvf6+hj59VmaMc\n96NciES7OXmDeNqjLV+gG1Y+9zrfUfq0Oz9kjgKYWbKIS3quH539m86AkKIx\nAR4o\r\n=aYna\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/index.js","gitHead":"5c1a41a9002efa19827d2731660964a1e9ebd24a","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","coverage":"jest --coverage","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.12.0","emoji-js":"^3.4.1","orbit-db":"^0.21.4","babel-core":"^7.0.0-bridge.0","react-tilt":"^0.1.4","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-text-loop":"^2.1.1","svg-inline-loader":"^0.8.0","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","node-sass":"^4.7.2","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-inlinesvg":"^1.1.6","react-hot-loader":"next","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.1-beta.4_1571215409162_0.610670655846747","host":"s3://npm-registry-packages"}},"0.0.1-beta.5":{"name":"3box-chatbox-react","version":"0.0.1-beta.5","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.1-beta.5","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"62d024a7ea3e68e85913ed4a310f443d440ca92d","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.1-beta.5.tgz","fileCount":13,"integrity":"sha512-Lp4yQq6bgvZeuzpIq0kuSh03E4/QGm3ED8LnIN8QJ8DEiSErGlvAoaAuoKRXJfpx0ipxVFm3tuUu/XTjkf5Y6A==","signatures":[{"sig":"MEQCIDFy9DrBKlGmcuvxDmu3TASJNEhPii5c6UyMchPVD8bdAiB8DhhdQCXBOS0x8yibmc6hWRxz/kjcyShl4t+9MjAIzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3403799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpuCGCRA9TVsSAnZWagAAoFYP/0gTWqcv5Q+Kz7iRWsNk\ngwwM6z0U5ptVOT/OdSxLaphJXlzaScvLG7IIF9jZH32Kcr+lkKMWZ05N2Xaq\npDmYhoLtXDv+UrZFCzYGhn+7IKJvV1AMDkPIaLIBNzJEyEImiqIbvKrNJfB9\nkQqplHQM6qYBIJz1TjI/sEL/lG8RDFJVIAQ5c7+1ECIKTNDojUApZB5oBE0p\nF44WpQ60fX1ozd0vVbHJ5xfDkX2eaDzWu3xg+rNNsoTBRG3O8DwwHzxqX6UC\n3Ug/S/fqSvP6doBXvuEzMMsBeZWFMVzkC4pDjfMzMpdEgf0ofG7HQ6A420My\nVkyA/HIjZ74Y6TckphuU4xOfnt4Jron4uDO4KgWzDCtBpLsX1gJYn0m8J0vN\niIHz+O1rLq56dfzoJdou43r+i/zgWK9j+fRXk2H0v+t6G8ZxymvTgVyBP20G\ngIScyYxAZcjZJ+xXGTxf/B1FUoWLoMWjzai4p7cUCzRXMZQx4p+ipzGA69yi\nQxvatroHXXRsMzrm4IjimOnh1960SXCVwVqCDU8KzJuC//Rqu/b1MocT3GnU\n62jpgyYjrcrCBJbe9NCladN+kkFSLyVo3cUahudM2JXl+l4qKZPOFJekucIl\n/pt22v1OlwXkglzZLvrGQ8XsZrittEoNjQV1Co7Mfda+HoOQgsmT0Fy6o4o1\nPQ89\r\n=9m7w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/index.js","gitHead":"5bd3ba0d11b2fc0b56a76ef915f85e5d9cd1d731","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","coverage":"jest --coverage","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.12.0","emoji-js":"^3.4.1","orbit-db":"^0.21.4","babel-core":"^7.0.0-bridge.0","react-tilt":"^0.1.4","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-text-loop":"^2.1.1","svg-inline-loader":"^0.8.0","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","node-sass":"^4.7.2","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-inlinesvg":"^1.1.6","react-hot-loader":"next","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.1-beta.5_1571217541781_0.777957516731806","host":"s3://npm-registry-packages"}},"0.0.1-beta.6":{"name":"3box-chatbox-react","version":"0.0.1-beta.6","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.1-beta.6","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"75e6aac39800b7a56477aad4de946615a9153e56","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.1-beta.6.tgz","fileCount":13,"integrity":"sha512-xl3diQc0kg0gTe0RfAkrRDer0SEhqmCsU339NF6hS/lzXmGllCva92ljY+Hf84g4+kteZGJ5bPwP/ZNR0Karng==","signatures":[{"sig":"MEUCIQDRtUO7VEQH1PlA3pdwb7PPXSJw8wZm2VBxouJMz8ZpvQIgDk/FcdREyXb2lmHLLYbHTmtsqlzF34Tx83hZuJbPkYc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3403777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpxxACRA9TVsSAnZWagAAqpgP/iv8Qz2TtWPdS3BDPk2a\nU/jEOK+zTtvQ7yuwZDguwoDQOBwKVGvFOjenwQorO8AxfIqEN/n3Lz3U5Sj2\nzPiq/FBh88Z8n9kDEErHQ7YZns7oLAembjhRqqiXhGkVpYJcT2kojgkXehUy\niL1akn6caB2QD4QvIUahYsxLpUSWmatpbbja38+n1H9N6QuTSslh1+HkuGiB\nXF6/dxrhT4HoLIywqwWpY4yD1Ni53/tw19Bwq3DV4JDyVxoh0KN7Ku0+Npr3\nI9PT/vogpNkTEDrPXGwnkk6Tjy4YzgSzn0qZe9rWg9tuZURrpitzibxRJ3t8\n9d0Ut+ZZJlUnW4GC88GPOEQpML2wcCna+t1IeUMvhrK7JwuYGfVJXlyEWEdj\nYSTDt7GICw+vN6VLodf/t/f5MRoHrK18Xk2OVFcFwcnc105oKFiA6HCBuubk\nJjJ+ZMFr4eSEfnHuJpTNy2lm8T64hEwWQau6GRqLuKymlvRAyalK/RFGanfh\nebMLwNMq/PF+d/K4z/OM180Ay1jefg6o0tZmBDiSapQW+nBYP/iBgG3iXZGB\nHQchBvHvPSTbHw60rNKLjUUEIsnOfD9SHWEBnpXWZAYWpDuu10xK5X0iLfMX\n5vpNSIjweYDhuHiaEx/0Cl3yixRiPydr7nwahw4JNI5RFNnAjAM+W6Gnnq1I\nJ8GC\r\n=Xw0z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/index.js","gitHead":"e1dfb459a88b30cda13c193ca7e3c60024d7d3fa","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","coverage":"jest --coverage","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.12.0","emoji-js":"^3.4.1","orbit-db":"^0.21.4","babel-core":"^7.0.0-bridge.0","react-tilt":"^0.1.4","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-text-loop":"^2.1.1","svg-inline-loader":"^0.8.0","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","node-sass":"^4.7.2","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-inlinesvg":"^1.1.6","react-hot-loader":"next","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.1-beta.6_1571232831911_0.08370884912513255","host":"s3://npm-registry-packages"}},"0.0.1-beta.7":{"name":"3box-chatbox-react","version":"0.0.1-beta.7","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.1-beta.7","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"706b4f58e812f23b506a7c7ad81d9f8c7b01460b","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.1-beta.7.tgz","fileCount":13,"integrity":"sha512-yh5ZmCPmB7mWntU1JyfxnhGiZv4tHnCbvbehJ1uA2yIaQ78ZZYdJh9+7S7lz5bCMtLW/D854gXjeLAFyjOO3Mg==","signatures":[{"sig":"MEYCIQCeBYqW+y4MNY1SYGZ7thoYrTJyiKTIa93i7/EBlL5YmwIhALyLhEO4TIUziXFcIwgnHTRDs0XbbmulysVbzYNJAq0F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3403809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpx6tCRA9TVsSAnZWagAA8EUP/imDlceRihwDOZMIGXUA\nm6G/BzfzWpkiW1iO7n9H4rYkGzQjdYMiIHT764LtlhhOg+t1L4lSeXYUmFWU\n+c8pbjj+hrCGFeTA6ImKhFSCHpe34okC034MuGs2tHsUg+O72DVHj/1IwzpL\n5lFdH81Ajtz7CAa4zXJaybThqtCk9g98LfAEwUYirpXTLsBp9kb772OYI6KO\nm5W7pSRUjUQKWQZp+54pkXBHogRMb7prnpKrrbms0moyTe0Qxtvv2IIrEnRK\np60BLF8All4667lL9ENimzS/hANK+K6UDtojM7TsB/7vV9Njx/c/sHRhK/LK\ntcqzCLIQBWvPCKSJmdE9dW8HPAYSiqQ7hL8BogK+HLRBvyet/RHiSPcJU3OW\nofIsHyNAJb81o9dV10kVa5lKIe8xboW2auHw8s2BvRFIoFVJqgVTSe5068Mr\nflmjcH2o1paIFSISHdPe6/Du+eEXJezKwC+cIibKjUvIgY0rvb7/JGvR+/b9\n834/3UcnDTs+PYewq3wQCIkeOQKCBooTqdWASsxcGPtVC3ScXzzD/g8UKF80\nZjEfUujvbKlfp4Kk+T/Qa1qT0QFEDv6Ae2SuT4M8qjFEbJjf8BgG1BMVS6Jp\nc00m9x7PAnh2qWSHTm0qOoojvLI3SnYbLh8HljG8Wf4N25MMrt7OkEx6CsrC\nyY3Y\r\n=9xby\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/index.js","gitHead":"a63147158d75dcb5175b8b521ecadfe7900bfdcf","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","coverage":"jest --coverage","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.12.0","emoji-js":"^3.4.1","orbit-db":"^0.21.4","babel-core":"^7.0.0-bridge.0","react-tilt":"^0.1.4","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-text-loop":"^2.1.1","svg-inline-loader":"^0.8.0","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","node-sass":"^4.7.2","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-inlinesvg":"^1.1.6","react-hot-loader":"next","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.1-beta.7_1571233446461_0.9663287826380529","host":"s3://npm-registry-packages"}},"0.0.1-beta.9":{"name":"3box-chatbox-react","version":"0.0.1-beta.9","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.1-beta.9","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"083cd17f3a4c0d143920e71b0e72eebc190ab37d","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.1-beta.9.tgz","fileCount":13,"integrity":"sha512-J/TDcycTq2OAZeVvDXCccbzlyJYo/LS+iKMkj0dOyb5F0YF9iMxNHSYbLDylZcyhVEFs0IaVIV4rIgseemxIPw==","signatures":[{"sig":"MEQCIHxQMUs9QpoA+dP47KRQ1Kh6DLYj9Byv5J9d+NJFfXwBAiBBpjahPcVoq+sVPYtG+K/wmetD3dp0kFsPcIfAqZyCRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3404115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqZr1CRA9TVsSAnZWagAA9ZsP/iIMEda8jtHCd70SYTOR\n3sMT+d9O7nwvn2i0g/6OGa566Np0UJhg0mTpP1ce5dcnFFZWKfpfrH6kjuva\nNMtt5XbaiocK9HpuQPbximupsfrZpCTyoKladSgd5WMccCYlo8SSN6f3Y/nL\nZfymt0GbeRxhy5m8jGXpHf0tyFPOahj+134AAI6ehfcEH843Rxnga4iyHOox\nK0rTk1LxeHurxTNRHejcZKMdXE/tTAjNzKW2drr0tgyqoP7CwcknywzoDgQ4\njgSGssHjsXSJaVY3imZSVYfoCFlDeXuLJ34yTZp88jX2F5i7J2M1r639eBju\nIHN4l5crTEdkuuD0gxDoXSwANDQeYfnkmCza5a0TI/jK19J3i0AXFFyPPAyS\nDlSYVr5y44I15EZTEZDqz0s+ab6d+rJVecdOtx80oZxIC3Tzd0O44aIOmW9S\nlxjlM5+H7szEw4FQmwesZHL0DfHeOa4+kclDj6d4GV/F2ViCAbchSi1LnWMw\nSR69UeRnxpMInfROrgMydZNrlVwdioZm2Kgi42kzV6CmI7Ex6Ik5pDKDAWzI\nkeBRVlyhZvltWvTb+5D/oN0qQTCyibX1mGa+bXZCilrFoV/p702J2V2KhYJn\nYDEacBlOSvKVO1TlmwcqYlZyJNUfpzYMS3lqnoE4sfeWBF+MVa8OKYLgDvKt\nRmP9\r\n=c3I5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/index.js","gitHead":"07225fce67b9e24096cf2cb62777fad4dcbbef6e","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","coverage":"jest --coverage","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.12.0","emoji-js":"^3.4.1","orbit-db":"^0.21.4","babel-core":"^7.0.0-bridge.0","react-tilt":"^0.1.4","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-text-loop":"^2.1.1","svg-inline-loader":"^0.8.0","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","node-sass":"^4.7.2","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-inlinesvg":"^1.1.6","react-hot-loader":"next","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.1-beta.9_1571396340611_0.7086821091303912","host":"s3://npm-registry-packages"}},"0.0.1-beta.10":{"name":"3box-chatbox-react","version":"0.0.1-beta.10","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.1-beta.10","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"6c71b524e2dff52549a14f045f3d79001c74fc2e","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.1-beta.10.tgz","fileCount":13,"integrity":"sha512-/ECtNyvA37EcikFFbiMCogCorcFhFbsxLWMc6hUkFvjoVxx8+SIDDHBWKZnkxa80zNbgWLhjWwgFjdgeelyyIg==","signatures":[{"sig":"MEUCIQCihrncNOpfZoSVvcWwWnn+FB9JqV2BUSHjB5Wu9iScHwIgZVrSEJtt7qwypPCpyj0X5CAwzBsFb1rk5iJSCuKhtQ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3404308,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdr3PhCRA9TVsSAnZWagAAt/kP/RbhSdoBNqCgyFA7bTs3\n/kx3eXWILhaY/B7Tv25BFCzQHFDAh250+lJoC9pCsnuj4RwcMz2nXDFMSja9\nrR0l+ZKVJ1VfKmpDyvimhXPfGb17IXrBf/cRl0+U9fqIcHvh6yyky1Ow1K9x\n1XPUy40kAGoHXgHAhPz3PpYln2gdLPbuKNrce/vSy0xwzt+HTT9BE0JpOaCB\nvW8pnaABLz+DTDeAq5mpMhcmANKKKxeUvtCQqNvg7fMYv0SjVWcJQU+UG1kL\npbQiXvvAS09JFV7rdXLGNOBQ36lX+J8AYZJIKrxxC7+RqucrPsjD8Kt1n1gz\n0es72rp/8s37yi+sELISNj0GS3wlIJwXcppLy8jRDDmKplhqizfUWOnF0igw\nlDUXTdvMJOYVYE2Pqjmh9Qwcxe/Eb2u/eRcx4YIOk3MHCh+Tq8a+hcEdk9jf\nUo7unEek7zD7xVdZsvTTDHYuNq4GStr46DifOL4kNjIOPtecRd4pvM9gxYdx\nURHLIg5vtG1BWNZsSTJIauyFN5gqarjgO4tFin08NK8Fde3C2Mo95ENwdN21\nzX7uT6TZHHBWKhDZj6ZpMcSaSc1pcx6baO8x7W14lqukPtJuDpzG7b1ARfh+\n52ObyQ7kLBfTKq8jZ6FVhDVWgOdE0/iVCe8EVsPBiq7NRz7he+bZEww9POv5\nsMNf\r\n=v0Vk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/index.js","gitHead":"1cf88edc6f24535997476b58eee58aa32bbed78e","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","coverage":"jest --coverage","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.12.0","emoji-js":"^3.4.1","orbit-db":"^0.21.4","babel-core":"^7.0.0-bridge.0","react-tilt":"^0.1.4","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-text-loop":"^2.1.1","svg-inline-loader":"^0.8.0","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","node-sass":"^4.7.2","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-inlinesvg":"^1.1.6","react-hot-loader":"next","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.1-beta.10_1571779553248_0.41207898642584717","host":"s3://npm-registry-packages"}},"0.0.1-beta.11":{"name":"3box-chatbox-react","version":"0.0.1-beta.11","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.1-beta.11","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"16da00acb12dad09d3572ad9cdcfdcda6901b431","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.1-beta.11.tgz","fileCount":14,"integrity":"sha512-flHb9bV1x2iQDhpSkEtSAzZTFST1xc86iLspztRWoFblkkBgmlOGR1G6xrqsHY/vZWN8eywDTQ6arOy3pOJkCg==","signatures":[{"sig":"MEUCIEAG/MM1vIzSV99tkTgJqWDFUDsGpcz+wt3GtDSfEVUYAiEA/edLT9SE4Gj+vfGJFWhEl/TdBkt/pEGSdPTP6fePzxo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3387399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyst7CRA9TVsSAnZWagAAcGQP/1wbCqJnDc0cRjuhIvXz\nra+Da0eV6o/5+fQNGmDg01dMq3rhPfn6vnLD/VvjBXIIsL4hqRNnMsaJrvcD\ny7P4mPpkgYREA2ZzXtEwAAHNQZ3dKrRBOOa8TxVsOC8rR3TlYo7vri+W6kbw\ni+zZDTnqLj3QtmT6gOBKPlEFEJmawwGHIwBbTaTNnoexI2FG53h5FNF3ryYm\nr87A25+Za00NunwB5+WRrgxwneNxUEXUkWZ2SFfOWQ0fs2II9eJ97TXAemRr\nFUbugOVC86k1qyLSKQ4zN/M0lKc1f4MQ63UCX6HYwgf7YQNzHB1g517ZQY0+\nW0+Vbojb801zYjTqx3auPYxMHp6kJoJSQnZqEJEMX1cEsOBdHemmK441kmRi\nnPTFY5siBc5/aigS+aszHlKFDA7jYTg0/aMN0PMj/6YeLuvoEFw7h6HXv7Dl\nMx8bKcEGb6IplX7RmPWIId/ExOrWPNVXHZvOqL0Fk62jDO2XIKSOG0XQDJmJ\nvBaG/5IQe1IAstKOR+Fr+Na6wnkNirIM0FVmVBi/kevIqZuQ1uFvV0ZWoPpi\nnGIcINoquPAjGGImlHMKugzsM1GlzuEwye6vv04oSsCk1aOswTVMhZ/emCzn\npN3nrbsniLrYaqLr4L0DKtYhUScA5LJb62KGRfNTNE2IF/T71JCjVO07CNzM\nTb7v\r\n=ExGU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/index.js","gitHead":"531e497e13ca8e0e124e0737efcd8c2dca44d061","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","coverage":"jest --coverage","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.12.0","emoji-js":"^3.4.1","orbit-db":"^0.21.4","babel-core":"^7.0.0-bridge.0","react-tilt":"^0.1.4","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-text-loop":"^2.1.1","svg-inline-loader":"^0.8.0","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","node-sass":"^4.7.2","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-inlinesvg":"^1.1.6","react-hot-loader":"next","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.1-beta.11_1573571450990_0.5714304349969335","host":"s3://npm-registry-packages"}},"0.0.1-beta.12":{"name":"3box-chatbox-react","version":"0.0.1-beta.12","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.1-beta.12","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"4eb486e5b9fae3b46e29850301b0948b43c2ff68","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.1-beta.12.tgz","fileCount":14,"integrity":"sha512-TGyAvZQwcmf5DDHp44oJ6Y+bE483BFz+jCA/Ilj/o/s3qwo9qGBQuWoAW0e3QcbegBOKb8/ocYTbEQcKw6HvfA==","signatures":[{"sig":"MEUCIQDlvArh1v93p0Z3kIuGOsrF3yqoN60TpfJFLclBH+URhwIgE9yJtWdNTCf4QWJpbv+3imvonQKJ/EwD4aLNiI0Il8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3387416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1wfbCRA9TVsSAnZWagAAJLQQAJ2orURuSnZRxVV4Rm6a\npFQ8I/rCuanj0d1YpBvWLthotKiv7yjQsfwzP8+DNBVT9Fw01xljspmnOUDU\nnVz97UgSDfK8FB3Y1MAJmHgZuKujUn95Noay6zDpR7dot/XXMeLWk62z8yot\nn1TwwAFQyiIWaQWbmq++LNpE+OS5dQ8hpQFm8jsIBFs6+3dNasHdmh0Ev6Ye\n2TbhYRn0bFrpCBmcj9mvdmKhK2EnZJGdnEJ1XlS0gt6FtVgR1MRxmFC7LRMD\nOmNlvFIYq3uHbA6j2Qphhzs0mEqzGbzVZH/UNMlxXW4zAszyBb9D54xvXLG3\npGTXicTw1I6rtyLm70x9+MV775u6VRhGmucVovEb6PloA2m9SATzxox4wmaM\naXx9iWZvqggpqzIOpKTg7wnhMewYk5bEwTfZw/7KnhdsaMEknXE0IgcWko1D\nobKMIsj8byWKF+mWfy5Pu8JWhY+0arQPX/Fz/ORHcFi2BuaKK3CKkVaX5VtL\nBvpmoyQLo86Xt7vf6/gkOrnjk1mvHdB6NcEraLjNVgCZttfKiMQjEQ0+7UMr\n0LrpAON9vv79jOV3WzYzx79OyKml4xmMzY1ny64/JmlMdwOTwKDYKg4k1+BE\nvII3INqg+NCH0EIf2EByoAg6UbC43B0RC+Q+FpjBj6nG612wst7b/p9iYDH4\nblvY\r\n=DER3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/index.js","gitHead":"a0a736f8347774228815786b6b786833e308e3ff","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","coverage":"jest --coverage","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.12.0","emoji-js":"^3.4.1","orbit-db":"^0.21.4","babel-core":"^7.0.0-bridge.0","react-tilt":"^0.1.4","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-text-loop":"^2.1.1","svg-inline-loader":"^0.8.0","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","node-sass":"^4.7.2","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-inlinesvg":"^1.1.6","react-hot-loader":"next","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.1-beta.12_1574373339343_0.4260438698645119","host":"s3://npm-registry-packages"}},"0.0.1-beta.14":{"name":"3box-chatbox-react","version":"0.0.1-beta.14","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.1-beta.14","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"6a63e5ec90b29ba7611df4141ec8522a09c59409","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.1-beta.14.tgz","fileCount":14,"integrity":"sha512-cD0faWQhyrBENSQFBxa/yF6BJH6eP1yJcXE/qqvB1R9U+s+g6kMmgxNUnP43cmNWX5FnIXwdVV/Mk3X/Qgj3Zw==","signatures":[{"sig":"MEUCIGxbrvoDPa9NC6nk8Zen2qgICjOMlUy7fwKQ9+gOQ8nZAiEAsJtUpPLs9pZSRI14FqWRn8ND2/hOEWNQMgm9YQJKRdQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3433078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8QQPCRA9TVsSAnZWagAAUx0P/07krKEK9JTkfpPyccEh\nUVEbmIhTTRSSQZr60cZMIShls7AAGZhs7E66G2zOCov7jaG6SkPA1rkcivcb\nbcnzGiWtzOdtU1c78Ju8WfTJh5A9FZJ+peyZdoUbcCg57VnHkSZYFLsjcDtb\nhM4DR/WnD4HoIMiGR9dGMY12/GEgYxB8cISrUFhNtxV/vNpDbEfH0RZkin+N\nMZMDIQ2fd/jMbNDVMygtf6/J5LU5Q2d6o6eGyhzr9+Sf7E5EhxUQO2bMXhdM\nLyJm9fA2+pA05Pe9o3CgUH73pj0BXq934mI5zPzV0w5ln/FO92+ayM0FwwSh\nlEFkbeLFXuj1wGAcrEBp5FG3Dgrhoo6iJY0Xi2SaAGgeWRHoWXcQuzfNJHrN\nAUe3m/R7qOgpvxnJ2oiNzRH0wdnS0sBUYmOrcGLW60R07ZRFAQv4vxob/WJ3\n1mYSbRnlKMqewlI6jlOZs90UxtJ4RHzH2QBTboKa6xLuaf+jQPMfdlpVuZN8\niTaizF2C9PuM6NwCS6U6R6cc0QXooxpY+8kjdIAHM77yueSdNe3C6v+40UnZ\nE6xNTNoHk218VgIxrF/Kc1B5txWGiguUyRWgi9TvS7iknhGCeMUF6uK+OcQR\nz8ZRvOl6tj0lgn4BW0bNP0lkJOv3obW3VOrT5z3jnVB0Bg/EXkQGnbOGOx5I\ngEzX\r\n=DQvC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/index.js","gitHead":"d6bfa4b3f174ee59c877656764d94ac24fa3b932","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","coverage":"jest --coverage","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.14.0","emoji-js":"^3.4.1","orbit-db":"^0.21.4","babel-core":"^7.0.0-bridge.0","multicodec":"^0.5.6","react-tilt":"^0.1.4","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-text-loop":"^2.1.1","svg-inline-loader":"^0.8.0","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","node-sass":"^4.7.2","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-inlinesvg":"^1.1.6","react-hot-loader":"next","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.1-beta.14_1576076303080_0.10416053302935468","host":"s3://npm-registry-packages"}},"0.0.1-beta.15":{"name":"3box-chatbox-react","version":"0.0.1-beta.15","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.1-beta.15","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"ac5bf24d660dc8c30a1466078dd3a3b09a9a9bc6","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.1-beta.15.tgz","fileCount":14,"integrity":"sha512-FBV5MSbAYvXdS/1Bi3tDWBjp/Hxqk2g3p8uepRcEryCjk5ot3vZmlO+zAxDrGQZ6ieXKs5hVuyGOYvC677b/Pg==","signatures":[{"sig":"MEUCIGT3oNpuh9+xmVhrZC95O2HNoVVG6oI56aINdY2uUfq/AiEA+SL1FnF19nOV7LsR8YA673rIW99AdKgj6r1jF5DhyTo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3464750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8TUwCRA9TVsSAnZWagAA1g8P/29BnmFtA+BguBZeWK6o\ngyclQZGmuWDF4lhHWdxPd6N1dkrDkOmtK+GxtN9RuBJkW9TtB4VvrQsl7EKI\nrGRaCBgZGDryYnF3ozKOMOouvdDBVfNgvctXthYV1Ln7AzGkeEiJDK676zgB\nhRUUjCmpJuvvNC+Yyi3zV2SfFFO094qrkvPJO5c6vIL4Amc0Xwr8m2i8DAY2\n165ydZrdYNIjqD2r1O7i0urhYHpjtu81jYQ6EJtefdjxLMpivoXi+NoO1XWY\nOymhBVtKy5ujDtCQ7uDtNnce43AGu7+QzpXL/RfdHcXyM3xuWkeM7dE78o/w\nXfr33DNmaJHwvUyRUC6kbP0LaxU3FAomzfmCNXAyoxNg7ghoOHWWHMeviuSm\n7u8v4OUuc6FcO4qYPYc+Wlr3H4Fr8aM16PIB+9bitjcegD4GPU00CVBVY+76\nIWRxQ7xWJ0mezjZP0k+21Plf7CfmQX5zIfDXARvCfEeL7yJ+b7Fs5np5jdod\ny6cmprOlhvQvDu5V7XYs60E6p+1VEmBUrpWdV6INyHynjm0sKWv08aMrPuDu\n0ZUjNqZ3R08hc/vjKkBY9htMOSD1HkNO2fF1mkb0/Pto2+HgaQGdFG4MADvp\nrM4OMb+jAkJ6C1Yn0UEN34ZdRvGuSGkwD074tzm4vEhsMa7/zNH6Kcdg+H8j\nYt9m\r\n=P+g9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/index.js","readme":"[![Discord](https://img.shields.io/discord/484729862368526356.svg?style=for-the-badge)](https://discordapp.com/invite/Z3f3Cxy)\r\n[![npm](https://img.shields.io/npm/v/3box-chatbox-react.svg?style=for-the-badge)](https://www.npmjs.com/package/3box-chatbox-react)\r\n[![Twitter Follow](https://img.shields.io/twitter/follow/3boxdb.svg?style=for-the-badge&label=Twitter)](https://twitter.com/3boxdb)\r\n\r\n# 3Box Chatbox Plugin 💬\r\n\r\n`3box-chatbox-react` node package is a drop-in react component that provides Web3 developers with a readymade chat system for their Ethereum application. Easily add rich, decentralized social discourse to your dApp with one line of code. The 3Box Chatbox plugin is built using 3Box infrastructure, and handles all logic for creating a chatbox. *Read the docs on [docs.3box.io](https://docs.3box.io/build/plugins/chatbox)*.\r\n\r\n### Try the demo [here](https://3box.github.io/3box-chatbox/examples/dist/)\r\n![Example Screenshot](chatbox-example-screenshot.png)\r\n</br>\r\n\r\n## How it Works\r\n#### Architecture\r\nThe Chatbox plugin is built using a standard implementation of [Open Threads](https://docs.3box.io/build/web-apps/messaging/choose#open-threads) which are defined in the [3Box Threads API](https://docs.3box.io/api/messaging) and made available via the [`3Box.js SDK`](https://github.com/3box/3box-js). Chatbox messages are ephemeral and are persisted only as long as there is at least one user in the chatbox. The Chatbox plugin includes UI for inputting and displaying both an in-window and pop-up chat and all relevant logic. The component is configurable to various authentication patterns, and can handle both Web3/3Box logged-in & logged-out states. \r\n\r\n#### Authentication\r\nThe content of the configured chatbox cannot be read until a user has authenticated into their 3Box and joined the ephemeral (`ghost`-type) thread.  After authenticating, a user can post and receive messages from other users in *real-time*.\r\n</br>\r\n</br>\r\n\r\n## Getting Started\r\n1. Install the component\r\n2. Choose your authentication pattern\r\n3. Configure application settings\r\n4. Usage\r\n\r\n### 1. Install the component\r\n\r\n```shell\r\nnpm i -S 3box-chatbox-react\r\n```\r\n\r\n### 2. Choose your authentication pattern\r\nDepending on *when and how* your dApp handles authentication for web3 and 3Box, you will need to provide a different set of props to the component. Three acceptable authentication patterns and their respective props are discussed below in A-C:\r\n\r\n**A) Dapp handles web3 and 3Box logins, and they run *before* component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the `box` instance returned from `Box.openBox(ethAddr)` via 3Box.js should be passed to the `box` prop in the chatbox component. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages are their own.\r\n\r\n**B) Dapp handles web3 and 3Box logins, but they haven't run before component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the login logic implemented in the dapp should be passed to the Chatbox component as the `loginFunction` prop, which is run when a user attempts to post a message. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages belong to that user.\r\n\r\n**C) Dapp has no web3 and 3Box login logic.**\r\n\r\nDapp only integrates with the `3box-chatbox-react` component, but not `3Box.js SDK`. All web3 and 3Box login logic will be handled within the Chatbox component, though it's required for the `ethereum` object from your dapp's preferred web3 provider be passed to the `ethereum` prop in the component.\r\n\r\n#### Best practice\r\n\r\nFor the best UX, we recommend implementing one of the following authentication patterns: A; B; or B with A.\r\n\r\nEach of these patterns allow your application to make the `box` object available in global application state where it can be used by all instances of the Chatbox component regardless of which page the user is on. This global pattern removes the need for users to authenticate on each chatbox component, should you decide to have more than one, which would be the case in C.\r\n\r\n### 3. Configure application settings\r\n\r\n**First, choose a name for your application's 3Box space.**\r\n\r\nAlthough you are free to choose whichever name you'd like for your app's space, we recommend using the name of your app. If your application already has a 3Box space, you are welcome to use that same one for the chatbox.\r\n\r\n**Next, choose a naming convention for your application's threads.**\r\n\r\nThe Chatbox thread needs a name, and we recommend that your application creates `threadNames` according to a simple rule. We generally like using a natural identifier, such as community name, page URL, token ID, or other similar means.\r\n\r\n</br>\r\n</br>\r\n\r\n\r\n### 4. Usage\r\n\r\n#### Example\r\n\r\n```jsx\r\nimport ChatBox from '3box-chatbox-react';\r\n\r\nconst MyComponent = ({ handleLogin, box, ethereum, myAddress, currentUser3BoxProfile, adminEthAddr }) => (\r\n    <ChatBox \r\n        // required\r\n        spaceName=\"mySpaceName\"\r\n        threadName=\"myThreadName\"\r\n\r\n\r\n        // Required props for context A) & B)\r\n        box={box}\r\n        currentUserAddr={myAddress}\r\n\r\n        // Required prop for context B)\r\n        loginFunction={handleLogin}\r\n\r\n        // Required prop for context C)\r\n        ethereum={ethereum}\r\n\r\n        // optional\r\n        mute={false}\r\n        popupChat\r\n        showEmoji\r\n        colorTheme=\"#181F21\"\r\n        currentUser3BoxProfile={currentUser3BoxProfile}\r\n        userProfileURL={address => `https://mywebsite.com/user/${address}`}\r\n        spaceOpts={}\r\n        threadOpts={}\r\n        agentProfile={\r\n            chatName: \"3Box\",\r\n            imageUrl: \"https://imgur.com/RXJO8FD\"\r\n        }\r\n    />\r\n);\r\n```\r\n\r\n\r\n#### Prop Types\r\n\r\n| Property | Type          | Default  | Required Case          | Description |\r\n| :-------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `spaceName`    | String        |    |  Always   | Likely your dApp name and / or chatbox category.  A single `spaceName` with different `threadName`s is common practice when building a dApp with multiple Chatbox threads. |\r\n| `threadName`    | String       |   | Always    | A name specific to this Chatbox. |\r\n| `box`    | Object         |   | A (and likely B)    | The `box` instance returned from running `await Box.openBox(address, web3)` somewhere in your dApp.|\r\n| `currentUserAddr`    | String (Ethereum Address)          |    | A & B | The current user's Ethereum address. Passing this will be used to check which messages belong to the current user and can be used for fetching their 3Box profile to render in the Chatbox input UI. |\r\n| `loginFunction`    | Function       |    | B    | A function from your dApp that handles web3 and 3Box login at the global dApp state. This callback will run when a user attempts to join the Chatbox but a `box` instance doesn't yet exist. Running this function should result in a box instance (from `const box = Box.openBox(address, web3)`) being passed as the `box` prop to this component.  |\r\n| `ethereum`    | Object        |  window.ethereum  | C    | The `ethereum` object from whichever web3 provider your dApp uses.  The `enable` method on this object will be used to get the current user's Ethereum address and that address will be used to `openBox` within the current Component context.|\r\n| `popupChat`    | Boolean       |  False   | Optional    | A boolean - `true` - to configure a pop up style chatbox with a button fixed to the bottom right of the window to pop open the chat UI. False will render the component in whichever container you have implemented. |\r\n| `agentProfile`    | Object       |  { chatName: 'Chatbox', imageUrl: null }   | Optional    | An object with the name of the chatbox which will appear in the `Join thread` step and in the header of the chat UI.  The default `imageUrl` is the provided chat icon. |\r\n| `spaceOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `threadOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `colorTheme`    | String       |  False  | Optional    | Pass an rgb or hex color string to match the color theme of your application |\r\n| `mute`    | Boolean       |  False  | Optional    | Pass false to turn off sound for incoming messages. |\r\n| `showEmoji`    | Boolean       |  False  | Optional    | Pass false to turn off the emoji pop up within the chat input UI. |\r\n| `currentUser3BoxProfile`    | Object       |   | Optional    | If the current user has already had their 3Box data fetched at the global dApp state, pass the object returned from `Box.getProfile(profileAddress)` to avoid an extra request.  This data will be rendered in the Chatbox input interface.|\r\n| `userProfileURL`    | Function       |  Defaults to returning user's 3Box profile URL  | Optional    | A function that returns a correctly formatted URL of a user's profile on the current platform.  The function will be passed an Ethereum address within the component, if needed.  A user will be redirected to the URL returned from this function when clicking on the name or Ethereum address associated with the message in the chatbox.|\r\n\r\n## License\r\n\r\nMIT\r\n","gitHead":"d6bfa4b3f174ee59c877656764d94ac24fa3b932","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","coverage":"jest --coverage","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"emoji-js":"^3.4.1","orbit-db":"^0.21.4","babel-core":"^7.0.0-bridge.0","multicodec":"^0.5.6","react-tilt":"^0.1.4","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-text-loop":"^2.1.1","svg-inline-loader":"^0.8.0","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","node-sass":"^4.7.2","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-inlinesvg":"^1.1.6","react-hot-loader":"next","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"3box":"^1.14.0","react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.1-beta.15_1576088880462_0.16390071085117253","host":"s3://npm-registry-packages"}},"0.0.1-beta.16":{"name":"3box-chatbox-react","version":"0.0.1-beta.16","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.1-beta.16","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"b64a6e40e02c7e48e141e947f32718e1476994c9","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.1-beta.16.tgz","fileCount":58,"integrity":"sha512-4qkg0j3O49USg552AuesL/9VRsDoKGlgfVQITsb3YqC6YCvqg3PPn6sIVY5UFAI9zmuGxThv6aZpig9Ftvb3Hw==","signatures":[{"sig":"MEQCIGrhazo7DioBmS53jfQWNhMVespAMwT1GDiy1j/Txb6EAiBmfmN0ZjVoXHpLpZTdvjlUfEw+CvrqCdmnMSqCPd7i5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3609856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8UNZCRA9TVsSAnZWagAAvvwP/RfCqKX8vzezk7HqhdFH\ncwQzHjbHuXTJuN4dZB1aJQtVupZCcBwnyN9AViOlf5xhFp7RBP+6zpJj68++\nMgkR3IiHIG7ROFci9WcDRjhCEvPWS8JHZTnL7BOPcoD3ybvlrIh1V1GFDBs0\nfi0RkrMVmKfcJYBunVkUyMCPBFiCbCg3DLabx5CWS7/ujqKS8dgav/RU/qAW\nHSvEAzQaPJ5oZJcfHY6HFs6/UIwS0EYDmD2OCNP5sMTFqUBMTm+4rK4R+RJh\ntKmJBj3B2Z7ziXfAPKRSdI9n1WyHBtFGmFL4817zYCsSy5bReKORzvbPTy2s\nmUw1RJ16QSgCA47SOgix6yNZAyJoJNlOvODuDlnHjhgjj+m9L40hha4DE3d3\npSGzXuFk0Zf6AoNi4ED3MGrjc/3dBz3t1v3H8V8T7suihZ+wEiEOnBo/ZvNv\naQPF/tKHU2JfERs1PKI2KTQ0MKpVhhbyiBOeW4CYNb+w7FfhXfcxoN/jos8u\nGAGn2iUORZoUZNPsTIh7meMHJq8kieBaaNjpwfEWKMC0Un8OGKx7o+8cC0eR\nDID4BvSU5MQe0IcFXVcVphYjqSpRZgkArTcMqmDCXQZDI4kakjkRcaY4nwgz\nHtIHQopf9mnGYnzkFof+xHagohERzxM8Bv4ru74Yh4Q2z6TkzuurMFm8zCBu\nje4/\r\n=ZLLx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/index.js","readme":"[![Discord](https://img.shields.io/discord/484729862368526356.svg?style=for-the-badge)](https://discordapp.com/invite/Z3f3Cxy)\r\n[![npm](https://img.shields.io/npm/v/3box-chatbox-react.svg?style=for-the-badge)](https://www.npmjs.com/package/3box-chatbox-react)\r\n[![Twitter Follow](https://img.shields.io/twitter/follow/3boxdb.svg?style=for-the-badge&label=Twitter)](https://twitter.com/3boxdb)\r\n\r\n# 3Box Chatbox Plugin 💬\r\n\r\n`3box-chatbox-react` node package is a drop-in react component that provides Web3 developers with a readymade chat system for their Ethereum application. Easily add rich, decentralized social discourse to your dApp with one line of code. The 3Box Chatbox plugin is built using 3Box infrastructure, and handles all logic for creating a chatbox. *Read the docs on [docs.3box.io](https://docs.3box.io/build/plugins/chatbox)*.\r\n\r\n### Try the demo [here](https://3box.github.io/3box-chatbox/examples/dist/)\r\n![Example Screenshot](chatbox-example-screenshot.png)\r\n</br>\r\n\r\n## How it Works\r\n#### Architecture\r\nThe Chatbox plugin is built using a standard implementation of [Open Threads](https://docs.3box.io/build/web-apps/messaging/choose#open-threads) which are defined in the [3Box Threads API](https://docs.3box.io/api/messaging) and made available via the [`3Box.js SDK`](https://github.com/3box/3box-js). Chatbox messages are ephemeral and are persisted only as long as there is at least one user in the chatbox. The Chatbox plugin includes UI for inputting and displaying both an in-window and pop-up chat and all relevant logic. The component is configurable to various authentication patterns, and can handle both Web3/3Box logged-in & logged-out states. \r\n\r\n#### Authentication\r\nThe content of the configured chatbox cannot be read until a user has authenticated into their 3Box and joined the ephemeral (`ghost`-type) thread.  After authenticating, a user can post and receive messages from other users in *real-time*.\r\n</br>\r\n</br>\r\n\r\n## Getting Started\r\n1. Install the component\r\n2. Choose your authentication pattern\r\n3. Configure application settings\r\n4. Usage\r\n\r\n### 1. Install the component\r\n\r\n```shell\r\nnpm i -S 3box-chatbox-react\r\n```\r\n\r\n### 2. Choose your authentication pattern\r\nDepending on *when and how* your dApp handles authentication for web3 and 3Box, you will need to provide a different set of props to the component. Three acceptable authentication patterns and their respective props are discussed below in A-C:\r\n\r\n**A) Dapp handles web3 and 3Box logins, and they run *before* component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the `box` instance returned from `Box.openBox(ethAddr)` via 3Box.js should be passed to the `box` prop in the chatbox component. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages are their own.\r\n\r\n**B) Dapp handles web3 and 3Box logins, but they haven't run before component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the login logic implemented in the dapp should be passed to the Chatbox component as the `loginFunction` prop, which is run when a user attempts to post a message. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages belong to that user.\r\n\r\n**C) Dapp has no web3 and 3Box login logic.**\r\n\r\nDapp only integrates with the `3box-chatbox-react` component, but not `3Box.js SDK`. All web3 and 3Box login logic will be handled within the Chatbox component, though it's required for the `ethereum` object from your dapp's preferred web3 provider be passed to the `ethereum` prop in the component.\r\n\r\n#### Best practice\r\n\r\nFor the best UX, we recommend implementing one of the following authentication patterns: A; B; or B with A.\r\n\r\nEach of these patterns allow your application to make the `box` object available in global application state where it can be used by all instances of the Chatbox component regardless of which page the user is on. This global pattern removes the need for users to authenticate on each chatbox component, should you decide to have more than one, which would be the case in C.\r\n\r\n### 3. Configure application settings\r\n\r\n**First, choose a name for your application's 3Box space.**\r\n\r\nAlthough you are free to choose whichever name you'd like for your app's space, we recommend using the name of your app. If your application already has a 3Box space, you are welcome to use that same one for the chatbox.\r\n\r\n**Next, choose a naming convention for your application's threads.**\r\n\r\nThe Chatbox thread needs a name, and we recommend that your application creates `threadNames` according to a simple rule. We generally like using a natural identifier, such as community name, page URL, token ID, or other similar means.\r\n\r\n</br>\r\n</br>\r\n\r\n\r\n### 4. Usage\r\n\r\n#### Example\r\n\r\n```jsx\r\nimport ChatBox from '3box-chatbox-react';\r\n\r\nconst MyComponent = ({ handleLogin, box, ethereum, myAddress, currentUser3BoxProfile, adminEthAddr }) => (\r\n    <ChatBox \r\n        // required\r\n        spaceName=\"mySpaceName\"\r\n        threadName=\"myThreadName\"\r\n\r\n\r\n        // Required props for context A) & B)\r\n        box={box}\r\n        currentUserAddr={myAddress}\r\n\r\n        // Required prop for context B)\r\n        loginFunction={handleLogin}\r\n\r\n        // Required prop for context C)\r\n        ethereum={ethereum}\r\n\r\n        // optional\r\n        mute={false}\r\n        popupChat\r\n        showEmoji\r\n        colorTheme=\"#181F21\"\r\n        currentUser3BoxProfile={currentUser3BoxProfile}\r\n        userProfileURL={address => `https://mywebsite.com/user/${address}`}\r\n        spaceOpts={}\r\n        threadOpts={}\r\n        agentProfile={\r\n            chatName: \"3Box\",\r\n            imageUrl: \"https://imgur.com/RXJO8FD\"\r\n        }\r\n    />\r\n);\r\n```\r\n\r\n\r\n#### Prop Types\r\n\r\n| Property | Type          | Default  | Required Case          | Description |\r\n| :-------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `spaceName`    | String        |    |  Always   | Likely your dApp name and / or chatbox category.  A single `spaceName` with different `threadName`s is common practice when building a dApp with multiple Chatbox threads. |\r\n| `threadName`    | String       |   | Always    | A name specific to this Chatbox. |\r\n| `box`    | Object         |   | A (and likely B)    | The `box` instance returned from running `await Box.openBox(address, web3)` somewhere in your dApp.|\r\n| `currentUserAddr`    | String (Ethereum Address)          |    | A & B | The current user's Ethereum address. Passing this will be used to check which messages belong to the current user and can be used for fetching their 3Box profile to render in the Chatbox input UI. |\r\n| `loginFunction`    | Function       |    | B    | A function from your dApp that handles web3 and 3Box login at the global dApp state. This callback will run when a user attempts to join the Chatbox but a `box` instance doesn't yet exist. Running this function should result in a box instance (from `const box = Box.openBox(address, web3)`) being passed as the `box` prop to this component.  |\r\n| `ethereum`    | Object        |  window.ethereum  | C    | The `ethereum` object from whichever web3 provider your dApp uses.  The `enable` method on this object will be used to get the current user's Ethereum address and that address will be used to `openBox` within the current Component context.|\r\n| `popupChat`    | Boolean       |  False   | Optional    | A boolean - `true` - to configure a pop up style chatbox with a button fixed to the bottom right of the window to pop open the chat UI. False will render the component in whichever container you have implemented. |\r\n| `agentProfile`    | Object       |  { chatName: 'Chatbox', imageUrl: null }   | Optional    | An object with the name of the chatbox which will appear in the `Join thread` step and in the header of the chat UI.  The default `imageUrl` is the provided chat icon. |\r\n| `spaceOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `threadOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `colorTheme`    | String       |  False  | Optional    | Pass an rgb or hex color string to match the color theme of your application |\r\n| `mute`    | Boolean       |  False  | Optional    | Pass false to turn off sound for incoming messages. |\r\n| `showEmoji`    | Boolean       |  False  | Optional    | Pass false to turn off the emoji pop up within the chat input UI. |\r\n| `currentUser3BoxProfile`    | Object       |   | Optional    | If the current user has already had their 3Box data fetched at the global dApp state, pass the object returned from `Box.getProfile(profileAddress)` to avoid an extra request.  This data will be rendered in the Chatbox input interface.|\r\n| `userProfileURL`    | Function       |  Defaults to returning user's 3Box profile URL  | Optional    | A function that returns a correctly formatted URL of a user's profile on the current platform.  The function will be passed an Ethereum address within the component, if needed.  A user will be redirected to the URL returned from this function when clicking on the name or Ethereum address associated with the message in the chatbox.|\r\n\r\n## License\r\n\r\nMIT\r\n","gitHead":"d6bfa4b3f174ee59c877656764d94ac24fa3b932","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.14.0","emoji-js":"^3.4.1","babel-core":"^7.0.0-bridge.0","react-tilt":"^0.1.4","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-text-loop":"^2.1.1","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","node-sass":"^4.7.2","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-inlinesvg":"^1.1.6","react-hot-loader":"next","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.1-beta.16_1576092504828_0.6998493119641729","host":"s3://npm-registry-packages"}},"0.0.1-beta.17":{"name":"3box-chatbox-react","version":"0.0.1-beta.17","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.1-beta.17","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"09107e22fd53710cfe65dc85273012617497ba36","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.1-beta.17.tgz","fileCount":58,"integrity":"sha512-e2YiNh2Tlp9sQj02TfZemMw4dEEd2bSvlMQHVmZe+K+w85ufkt+kz840fIY1gKNKWYqwYrdzMLC7+1vZDyb23w==","signatures":[{"sig":"MEQCIDGXKwaY/wTr6ym/KYXGSg7vPnF77Aw14O1JShKsekzjAiARafjyF10id3fJP+XuqRdLlETfS4eavhsOY5eRssPZxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3609826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8lVZCRA9TVsSAnZWagAAfaYP/0Kpa5AVM18vgy+Wuj0v\nTbC6c0sYcelyP/fVGFiCfJns9qfPNq5BwLash/TvstT07b13E0/vbg9s0/Kb\nHprWzeJaN+uj3/dFyy81Ir0AHr+3JRohdJbGtr870hBMIwmfRmS6oO/u2edh\nb26CinbmyZHJoPZMBz3moXL+JP9x0QNnhNWsqBvIdPPj7I8uT4ENbrPHzS9f\nREMVrtC91MmGRqTI2sDufCaIyT5X2eA6uYJQfsxUWD0ePVv7nvlJM8vAoS/S\nfysQ6Ej82bv0L54Wduzn5ByR33P4msWMKRHIZIDwDUfOXtrhRZXS7mE1x9uJ\n5TjJpTXa7vwxOmQezMFhQydON1LqwBSq0J4XzlimBbOK37AP60JhSrNzKMJQ\nlRBC+ebBzKqRwxbSTtUWE7YMyRqB2MgjcdGaI5/j7yln1O3KR8jkjwcAfaVg\nZAJ536nqIVQAlvWfcrMkxDctR1bF/yu74PpMUzpoZLkvC8kupAr3VMM8C/uS\nd7IlH2/kNFGCViqVfT7+lFcS93QzBLvgowiJgv9jYtV7BlVXB68fzm0cHYnh\nnLFgNUoHQnumGpX03Eml5THRolNp7a+VclMuzMukDuOW+yP8/5Vhlike01Qd\n8sfpyGIAGZNsOR4KZ9vJJYkArdiTG6SbhwEQUXBv6qhLAhKga0grfF0SS5TV\npOgV\r\n=SShv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"[![Discord](https://img.shields.io/discord/484729862368526356.svg?style=for-the-badge)](https://discordapp.com/invite/Z3f3Cxy)\r\n[![npm](https://img.shields.io/npm/v/3box-chatbox-react.svg?style=for-the-badge)](https://www.npmjs.com/package/3box-chatbox-react)\r\n[![Twitter Follow](https://img.shields.io/twitter/follow/3boxdb.svg?style=for-the-badge&label=Twitter)](https://twitter.com/3boxdb)\r\n\r\n# 3Box Chatbox Plugin 💬\r\n\r\n`3box-chatbox-react` node package is a drop-in react component that provides Web3 developers with a readymade chat system for their Ethereum application. Easily add rich, decentralized social discourse to your dApp with one line of code. The 3Box Chatbox plugin is built using 3Box infrastructure, and handles all logic for creating a chatbox. *Read the docs on [docs.3box.io](https://docs.3box.io/build/plugins/chatbox)*.\r\n\r\n### Try the demo [here](https://3box.github.io/3box-chatbox/examples/dist/)\r\n![Example Screenshot](chatbox-example-screenshot.png)\r\n</br>\r\n\r\n## How it Works\r\n#### Architecture\r\nThe Chatbox plugin is built using a standard implementation of [Open Threads](https://docs.3box.io/build/web-apps/messaging/choose#open-threads) which are defined in the [3Box Threads API](https://docs.3box.io/api/messaging) and made available via the [`3Box.js SDK`](https://github.com/3box/3box-js). Chatbox messages are ephemeral and are persisted only as long as there is at least one user in the chatbox. The Chatbox plugin includes UI for inputting and displaying both an in-window and pop-up chat and all relevant logic. The component is configurable to various authentication patterns, and can handle both Web3/3Box logged-in & logged-out states. \r\n\r\n#### Authentication\r\nThe content of the configured chatbox cannot be read until a user has authenticated into their 3Box and joined the ephemeral (`ghost`-type) thread.  After authenticating, a user can post and receive messages from other users in *real-time*.\r\n</br>\r\n</br>\r\n\r\n## Getting Started\r\n1. Install the component\r\n2. Choose your authentication pattern\r\n3. Configure application settings\r\n4. Usage\r\n\r\n### 1. Install the component\r\n\r\n```shell\r\nnpm i -S 3box-chatbox-react\r\n```\r\n\r\n### 2. Choose your authentication pattern\r\nDepending on *when and how* your dApp handles authentication for web3 and 3Box, you will need to provide a different set of props to the component. Three acceptable authentication patterns and their respective props are discussed below in A-C:\r\n\r\n**A) Dapp handles web3 and 3Box logins, and they run *before* component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the `box` instance returned from `Box.openBox(ethAddr)` via 3Box.js should be passed to the `box` prop in the chatbox component. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages are their own.\r\n\r\n**B) Dapp handles web3 and 3Box logins, but they haven't run before component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the login logic implemented in the dapp should be passed to the Chatbox component as the `loginFunction` prop, which is run when a user attempts to post a message. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages belong to that user.\r\n\r\n**C) Dapp has no web3 and 3Box login logic.**\r\n\r\nDapp only integrates with the `3box-chatbox-react` component, but not `3Box.js SDK`. All web3 and 3Box login logic will be handled within the Chatbox component, though it's required for the `ethereum` object from your dapp's preferred web3 provider be passed to the `ethereum` prop in the component.\r\n\r\n#### Best practice\r\n\r\nFor the best UX, we recommend implementing one of the following authentication patterns: A; B; or B with A.\r\n\r\nEach of these patterns allow your application to make the `box` object available in global application state where it can be used by all instances of the Chatbox component regardless of which page the user is on. This global pattern removes the need for users to authenticate on each chatbox component, should you decide to have more than one, which would be the case in C.\r\n\r\n### 3. Configure application settings\r\n\r\n**First, choose a name for your application's 3Box space.**\r\n\r\nAlthough you are free to choose whichever name you'd like for your app's space, we recommend using the name of your app. If your application already has a 3Box space, you are welcome to use that same one for the chatbox.\r\n\r\n**Next, choose a naming convention for your application's threads.**\r\n\r\nThe Chatbox thread needs a name, and we recommend that your application creates `threadNames` according to a simple rule. We generally like using a natural identifier, such as community name, page URL, token ID, or other similar means.\r\n\r\n</br>\r\n</br>\r\n\r\n\r\n### 4. Usage\r\n\r\n#### Example\r\n\r\n```jsx\r\nimport ChatBox from '3box-chatbox-react';\r\n\r\nconst MyComponent = ({ handleLogin, box, ethereum, myAddress, currentUser3BoxProfile, adminEthAddr }) => (\r\n    <ChatBox \r\n        // required\r\n        spaceName=\"mySpaceName\"\r\n        threadName=\"myThreadName\"\r\n\r\n\r\n        // Required props for context A) & B)\r\n        box={box}\r\n        currentUserAddr={myAddress}\r\n\r\n        // Required prop for context B)\r\n        loginFunction={handleLogin}\r\n\r\n        // Required prop for context C)\r\n        ethereum={ethereum}\r\n\r\n        // optional\r\n        mute={false}\r\n        popupChat\r\n        showEmoji\r\n        colorTheme=\"#181F21\"\r\n        currentUser3BoxProfile={currentUser3BoxProfile}\r\n        userProfileURL={address => `https://mywebsite.com/user/${address}`}\r\n        spaceOpts={}\r\n        threadOpts={}\r\n        agentProfile={\r\n            chatName: \"3Box\",\r\n            imageUrl: \"https://imgur.com/RXJO8FD\"\r\n        }\r\n    />\r\n);\r\n```\r\n\r\n\r\n#### Prop Types\r\n\r\n| Property | Type          | Default  | Required Case          | Description |\r\n| :-------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `spaceName`    | String        |    |  Always   | Likely your dApp name and / or chatbox category.  A single `spaceName` with different `threadName`s is common practice when building a dApp with multiple Chatbox threads. |\r\n| `threadName`    | String       |   | Always    | A name specific to this Chatbox. |\r\n| `box`    | Object         |   | A (and likely B)    | The `box` instance returned from running `await Box.openBox(address, web3)` somewhere in your dApp.|\r\n| `currentUserAddr`    | String (Ethereum Address)          |    | A & B | The current user's Ethereum address. Passing this will be used to check which messages belong to the current user and can be used for fetching their 3Box profile to render in the Chatbox input UI. |\r\n| `loginFunction`    | Function       |    | B    | A function from your dApp that handles web3 and 3Box login at the global dApp state. This callback will run when a user attempts to join the Chatbox but a `box` instance doesn't yet exist. Running this function should result in a box instance (from `const box = Box.openBox(address, web3)`) being passed as the `box` prop to this component.  |\r\n| `ethereum`    | Object        |  window.ethereum  | C    | The `ethereum` object from whichever web3 provider your dApp uses.  The `enable` method on this object will be used to get the current user's Ethereum address and that address will be used to `openBox` within the current Component context.|\r\n| `popupChat`    | Boolean       |  False   | Optional    | A boolean - `true` - to configure a pop up style chatbox with a button fixed to the bottom right of the window to pop open the chat UI. False will render the component in whichever container you have implemented. |\r\n| `agentProfile`    | Object       |  { chatName: 'Chatbox', imageUrl: null }   | Optional    | An object with the name of the chatbox which will appear in the `Join thread` step and in the header of the chat UI.  The default `imageUrl` is the provided chat icon. |\r\n| `spaceOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `threadOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `colorTheme`    | String       |  False  | Optional    | Pass an rgb or hex color string to match the color theme of your application |\r\n| `mute`    | Boolean       |  False  | Optional    | Pass false to turn off sound for incoming messages. |\r\n| `showEmoji`    | Boolean       |  False  | Optional    | Pass false to turn off the emoji pop up within the chat input UI. |\r\n| `currentUser3BoxProfile`    | Object       |   | Optional    | If the current user has already had their 3Box data fetched at the global dApp state, pass the object returned from `Box.getProfile(profileAddress)` to avoid an extra request.  This data will be rendered in the Chatbox input interface.|\r\n| `userProfileURL`    | Function       |  Defaults to returning user's 3Box profile URL  | Optional    | A function that returns a correctly formatted URL of a user's profile on the current platform.  The function will be passed an Ethereum address within the component, if needed.  A user will be redirected to the URL returned from this function when clicking on the name or Ethereum address associated with the message in the chatbox.|\r\n\r\n## License\r\n\r\nMIT\r\n","gitHead":"d6bfa4b3f174ee59c877656764d94ac24fa3b932","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.14.0","emoji-js":"^3.4.1","babel-core":"^7.0.0-bridge.0","react-tilt":"^0.1.4","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-text-loop":"^2.1.1","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","node-sass":"^4.7.2","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-inlinesvg":"^1.1.6","react-hot-loader":"next","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.1-beta.17_1576162648898_0.6992558627601362","host":"s3://npm-registry-packages"}},"0.0.1-beta.18":{"name":"3box-chatbox-react","version":"0.0.1-beta.18","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.1-beta.18","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"a98082c8d2d326c245bc274376f1a31085e2f7f1","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.1-beta.18.tgz","fileCount":58,"integrity":"sha512-8ovFbmN1CKoEE6O/6dVuzzOxLqlz5ZcVjDzPkxaYlTlWbC6vJMHTX+sblFZC7jZsuXXfPFIVxZC9HG9muhtAUQ==","signatures":[{"sig":"MEQCIBDmQQxS2IVchMzeJteZhfIAbp5d1jHjsEbSJMwqnzd0AiAyxVYpRirA6osjgLgQDbXUyjnEKGV6WJRHfenxO/57PQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3609860,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8laICRA9TVsSAnZWagAA3PMP+gPEO7aaRNuJacCgrlIE\ntkdXOnD9yv+fnU3LdIX/MxN8paBYcUXKS5vKajMKdsmRaQxTOW1of6adntXe\nnW7HjxJ+JSYkQCHMPsnIJH0vYq3iJ17lbKtZ7eCStCeT7RKCCfIQ8ruZp39V\nX1aiVJKfEhw7duRa+sTgyEcfWTNEGwiqF7JjHbN4jpcNudgr74JuAaOBDs8f\nucxmDPEIlQ5ndLCQFMCBOWFLLpV7Q7d9slkEn3Kzg7xwChek6EGXiFp79LmZ\nmBJ6QJp2wV+iPL/nkuFTFjp8dCVa2TLvgoFR0FBfdgxwZQ4Fd932z/Ey26rI\njXZVsqE16uJXx0qI1+f1hfHZPjlYAPWneDRHl8AzVwMABsLa7+6yKpR17pQt\nCbX54kcdG0LJJ8cpIBjtU9x7Q1ZcIfqGlAUkue5jJDTqG7BgwMXBLz4byUiM\n7HV7ybTQ82TA9Wl6mmUFUzPvgp3JBX17bGaO/QCxIYQOQJ7pf52OPUhyRW/g\nPYBXUDlUoBaajEe/pghRmsZFPyO/4w9r3TcaR2OXMF7b15BQN132uSsN+Dhu\nvm5AcDXyLOpoKTQKPmJs9PZe4XUDJRTnHja00sGxgRbnKeXCfi567IIB48jz\neToxs9h058SLT4acedwUsRM/yCJiEZhs548civYIK4nUse3ir6rf/PanXpe0\nqKCH\r\n=hDMW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"[![Discord](https://img.shields.io/discord/484729862368526356.svg?style=for-the-badge)](https://discordapp.com/invite/Z3f3Cxy)\r\n[![npm](https://img.shields.io/npm/v/3box-chatbox-react.svg?style=for-the-badge)](https://www.npmjs.com/package/3box-chatbox-react)\r\n[![Twitter Follow](https://img.shields.io/twitter/follow/3boxdb.svg?style=for-the-badge&label=Twitter)](https://twitter.com/3boxdb)\r\n\r\n# 3Box Chatbox Plugin 💬\r\n\r\n`3box-chatbox-react` node package is a drop-in react component that provides Web3 developers with a readymade chat system for their Ethereum application. Easily add rich, decentralized social discourse to your dApp with one line of code. The 3Box Chatbox plugin is built using 3Box infrastructure, and handles all logic for creating a chatbox. *Read the docs on [docs.3box.io](https://docs.3box.io/build/plugins/chatbox)*.\r\n\r\n### Try the demo [here](https://3box.github.io/3box-chatbox/examples/dist/)\r\n![Example Screenshot](chatbox-example-screenshot.png)\r\n</br>\r\n\r\n## How it Works\r\n#### Architecture\r\nThe Chatbox plugin is built using a standard implementation of [Open Threads](https://docs.3box.io/build/web-apps/messaging/choose#open-threads) which are defined in the [3Box Threads API](https://docs.3box.io/api/messaging) and made available via the [`3Box.js SDK`](https://github.com/3box/3box-js). Chatbox messages are ephemeral and are persisted only as long as there is at least one user in the chatbox. The Chatbox plugin includes UI for inputting and displaying both an in-window and pop-up chat and all relevant logic. The component is configurable to various authentication patterns, and can handle both Web3/3Box logged-in & logged-out states. \r\n\r\n#### Authentication\r\nThe content of the configured chatbox cannot be read until a user has authenticated into their 3Box and joined the ephemeral (`ghost`-type) thread.  After authenticating, a user can post and receive messages from other users in *real-time*.\r\n</br>\r\n</br>\r\n\r\n## Getting Started\r\n1. Install the component\r\n2. Choose your authentication pattern\r\n3. Configure application settings\r\n4. Usage\r\n\r\n### 1. Install the component\r\n\r\n```shell\r\nnpm i -S 3box-chatbox-react\r\n```\r\n\r\n### 2. Choose your authentication pattern\r\nDepending on *when and how* your dApp handles authentication for web3 and 3Box, you will need to provide a different set of props to the component. Three acceptable authentication patterns and their respective props are discussed below in A-C:\r\n\r\n**A) Dapp handles web3 and 3Box logins, and they run *before* component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the `box` instance returned from `Box.openBox(ethAddr)` via 3Box.js should be passed to the `box` prop in the chatbox component. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages are their own.\r\n\r\n**B) Dapp handles web3 and 3Box logins, but they haven't run before component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the login logic implemented in the dapp should be passed to the Chatbox component as the `loginFunction` prop, which is run when a user attempts to post a message. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages belong to that user.\r\n\r\n**C) Dapp has no web3 and 3Box login logic.**\r\n\r\nDapp only integrates with the `3box-chatbox-react` component, but not `3Box.js SDK`. All web3 and 3Box login logic will be handled within the Chatbox component, though it's required for the `ethereum` object from your dapp's preferred web3 provider be passed to the `ethereum` prop in the component.\r\n\r\n#### Best practice\r\n\r\nFor the best UX, we recommend implementing one of the following authentication patterns: A; B; or B with A.\r\n\r\nEach of these patterns allow your application to make the `box` object available in global application state where it can be used by all instances of the Chatbox component regardless of which page the user is on. This global pattern removes the need for users to authenticate on each chatbox component, should you decide to have more than one, which would be the case in C.\r\n\r\n### 3. Configure application settings\r\n\r\n**First, choose a name for your application's 3Box space.**\r\n\r\nAlthough you are free to choose whichever name you'd like for your app's space, we recommend using the name of your app. If your application already has a 3Box space, you are welcome to use that same one for the chatbox.\r\n\r\n**Next, choose a naming convention for your application's threads.**\r\n\r\nThe Chatbox thread needs a name, and we recommend that your application creates `threadNames` according to a simple rule. We generally like using a natural identifier, such as community name, page URL, token ID, or other similar means.\r\n\r\n</br>\r\n</br>\r\n\r\n\r\n### 4. Usage\r\n\r\n#### Example\r\n\r\n```jsx\r\nimport ChatBox from '3box-chatbox-react';\r\n\r\nconst MyComponent = ({ handleLogin, box, ethereum, myAddress, currentUser3BoxProfile, adminEthAddr }) => (\r\n    <ChatBox \r\n        // required\r\n        spaceName=\"mySpaceName\"\r\n        threadName=\"myThreadName\"\r\n\r\n\r\n        // Required props for context A) & B)\r\n        box={box}\r\n        currentUserAddr={myAddress}\r\n\r\n        // Required prop for context B)\r\n        loginFunction={handleLogin}\r\n\r\n        // Required prop for context C)\r\n        ethereum={ethereum}\r\n\r\n        // optional\r\n        mute={false}\r\n        popupChat\r\n        showEmoji\r\n        colorTheme=\"#181F21\"\r\n        currentUser3BoxProfile={currentUser3BoxProfile}\r\n        userProfileURL={address => `https://mywebsite.com/user/${address}`}\r\n        spaceOpts={}\r\n        threadOpts={}\r\n        agentProfile={\r\n            chatName: \"3Box\",\r\n            imageUrl: \"https://imgur.com/RXJO8FD\"\r\n        }\r\n    />\r\n);\r\n```\r\n\r\n\r\n#### Prop Types\r\n\r\n| Property | Type          | Default  | Required Case          | Description |\r\n| :-------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `spaceName`    | String        |    |  Always   | Likely your dApp name and / or chatbox category.  A single `spaceName` with different `threadName`s is common practice when building a dApp with multiple Chatbox threads. |\r\n| `threadName`    | String       |   | Always    | A name specific to this Chatbox. |\r\n| `box`    | Object         |   | A (and likely B)    | The `box` instance returned from running `await Box.openBox(address, web3)` somewhere in your dApp.|\r\n| `currentUserAddr`    | String (Ethereum Address)          |    | A & B | The current user's Ethereum address. Passing this will be used to check which messages belong to the current user and can be used for fetching their 3Box profile to render in the Chatbox input UI. |\r\n| `loginFunction`    | Function       |    | B    | A function from your dApp that handles web3 and 3Box login at the global dApp state. This callback will run when a user attempts to join the Chatbox but a `box` instance doesn't yet exist. Running this function should result in a box instance (from `const box = Box.openBox(address, web3)`) being passed as the `box` prop to this component.  |\r\n| `ethereum`    | Object        |  window.ethereum  | C    | The `ethereum` object from whichever web3 provider your dApp uses.  The `enable` method on this object will be used to get the current user's Ethereum address and that address will be used to `openBox` within the current Component context.|\r\n| `popupChat`    | Boolean       |  False   | Optional    | A boolean - `true` - to configure a pop up style chatbox with a button fixed to the bottom right of the window to pop open the chat UI. False will render the component in whichever container you have implemented. |\r\n| `agentProfile`    | Object       |  { chatName: 'Chatbox', imageUrl: null }   | Optional    | An object with the name of the chatbox which will appear in the `Join thread` step and in the header of the chat UI.  The default `imageUrl` is the provided chat icon. |\r\n| `spaceOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `threadOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `colorTheme`    | String       |  False  | Optional    | Pass an rgb or hex color string to match the color theme of your application |\r\n| `mute`    | Boolean       |  False  | Optional    | Pass false to turn off sound for incoming messages. |\r\n| `showEmoji`    | Boolean       |  False  | Optional    | Pass false to turn off the emoji pop up within the chat input UI. |\r\n| `currentUser3BoxProfile`    | Object       |   | Optional    | If the current user has already had their 3Box data fetched at the global dApp state, pass the object returned from `Box.getProfile(profileAddress)` to avoid an extra request.  This data will be rendered in the Chatbox input interface.|\r\n| `userProfileURL`    | Function       |  Defaults to returning user's 3Box profile URL  | Optional    | A function that returns a correctly formatted URL of a user's profile on the current platform.  The function will be passed an Ethereum address within the component, if needed.  A user will be redirected to the URL returned from this function when clicking on the name or Ethereum address associated with the message in the chatbox.|\r\n\r\n## License\r\n\r\nMIT\r\n","gitHead":"d6bfa4b3f174ee59c877656764d94ac24fa3b932","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.14.0","emoji-js":"^3.4.1","babel-core":"^7.0.0-bridge.0","react-tilt":"^0.1.4","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-text-loop":"^2.1.1","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","node-sass":"^4.7.2","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-inlinesvg":"^1.1.6","react-hot-loader":"next","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.1-beta.18_1576162951627_0.7800415578528976","host":"s3://npm-registry-packages"}},"0.0.1-beta.19":{"name":"3box-chatbox-react","version":"0.0.1-beta.19","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.1-beta.19","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"d78216806b07d5b11316f3e5ab5ae5f9937d1315","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.1-beta.19.tgz","fileCount":58,"integrity":"sha512-4WF8T6X/m7TYTzjAGqeGMQIbmfJKMCpL9jrwy6UAVt69NBWHF5uBKz5o+3no98oh7kTjDIsa8nFsaX3pgWaubQ==","signatures":[{"sig":"MEQCIDk8xyKEqAxjE+8GFj0dSMHhB1QXU3P/anENRKlBG/XDAiALGgJY99nQrX7czl5BeLIIMKv71HeQeDgg8+GvGEYHBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3609888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD08cCRA9TVsSAnZWagAAzD0P/0hNwiyDxCHMsWcayngX\n1r2EB9wyYgO4OBwbelFHuHqrugvIJqQooM1HtGrcFKzC47OV5yLO88qvXZZf\nbQ6rTPswupjaRetkxZgbQ5zHgfOxgpExouJwrvdGQ/n8r60fH6AgDbv29gov\nyroLhkidluVL3Wd5vCZZjYjdTTLd41N91hQSt4k3QboCsgODbKAOEit6gxRm\nJu+kHxi4EyE0b6pbkwG8isu4juzsc75Oa2YRKPckRtBpkmnvPjrOMERfj0Nh\nk2OoeI0uUtwjZHsKcdbXnZ6NyNlJiuJx8jl6ejGnKdcDmqS7PfhIaLop5dmj\nbzZjGZqKYuzRN3u2hAdSKuLMu9SEOBP6ROoO6INq1Ew0LTYeH5OL/c78bEOi\nkPRnPAzCEEZTD/dH1JDvKFV7DVPVzAFKUAXV8YkzTd/GbVxSGxIXMxJsmaHN\n46wxXqB33an4QmS3Qr45wG+UlALQAHfRXRtsLRStjEhQKf7ZpH0TkiLHHNy1\nHjHM66rH0vkq3QG48sEWV7jjKLWassPZFT2GGMCtneFLwFggDp0h8rdRt5ju\neWIwh+Fbaklg23Z/nqVAw9MTjKlpopLKQvqAS3pb/gsX6Z6JJEFEApR9EkHV\nBfNdJ5HOVjMH/f8+5R9fz7eVvWLy5nw/R5Gueh6yGM5JLDLDKwjHkZiKwOgK\nwdst\r\n=qw/p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./src/index.js","readme":"[![Discord](https://img.shields.io/discord/484729862368526356.svg?style=for-the-badge)](https://discordapp.com/invite/Z3f3Cxy)\r\n[![npm](https://img.shields.io/npm/v/3box-chatbox-react.svg?style=for-the-badge)](https://www.npmjs.com/package/3box-chatbox-react)\r\n[![Twitter Follow](https://img.shields.io/twitter/follow/3boxdb.svg?style=for-the-badge&label=Twitter)](https://twitter.com/3boxdb)\r\n\r\n# 3Box Chatbox Plugin 💬\r\n\r\n`3box-chatbox-react` node package is a drop-in react component that provides Web3 developers with a readymade chat system for their Ethereum application. Easily add rich, decentralized social discourse to your dApp with one line of code. The 3Box Chatbox plugin is built using 3Box infrastructure, and handles all logic for creating a chatbox. *Read the docs on [docs.3box.io](https://docs.3box.io/build/plugins/chatbox)*.\r\n\r\n### Try the demo [here](https://3box.github.io/3box-chatbox/examples/dist/)\r\n![Example Screenshot](chatbox-example-screenshot.png)\r\n</br>\r\n\r\n## How it Works\r\n#### Architecture\r\nThe Chatbox plugin is built using a standard implementation of [Open Threads](https://docs.3box.io/build/web-apps/messaging/choose#open-threads) which are defined in the [3Box Threads API](https://docs.3box.io/api/messaging) and made available via the [`3Box.js SDK`](https://github.com/3box/3box-js). Chatbox messages are ephemeral and are persisted only as long as there is at least one user in the chatbox. The Chatbox plugin includes UI for inputting and displaying both an in-window and pop-up chat and all relevant logic. The component is configurable to various authentication patterns, and can handle both Web3/3Box logged-in & logged-out states. \r\n\r\n#### Authentication\r\nThe content of the configured chatbox cannot be read until a user has authenticated into their 3Box and joined the ephemeral (`ghost`-type) thread.  After authenticating, a user can post and receive messages from other users in *real-time*.\r\n</br>\r\n</br>\r\n\r\n## Getting Started\r\n1. Install the component\r\n2. Choose your authentication pattern\r\n3. Configure application settings\r\n4. Usage\r\n\r\n### 1. Install the component\r\n\r\n```shell\r\nnpm i -S 3box-chatbox-react\r\n```\r\n\r\n### 2. Choose your authentication pattern\r\nDepending on *when and how* your dApp handles authentication for web3 and 3Box, you will need to provide a different set of props to the component. Three acceptable authentication patterns and their respective props are discussed below in A-C:\r\n\r\n**A) Dapp handles web3 and 3Box logins, and they run *before* component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the `box` instance returned from `Box.openBox(ethAddr)` via 3Box.js should be passed to the `box` prop in the chatbox component. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages are their own.\r\n\r\n**B) Dapp handles web3 and 3Box logins, but they haven't run before component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the login logic implemented in the dapp should be passed to the Chatbox component as the `loginFunction` prop, which is run when a user attempts to post a message. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages belong to that user.\r\n\r\n**C) Dapp has no web3 and 3Box login logic.**\r\n\r\nDapp only integrates with the `3box-chatbox-react` component, but not `3Box.js SDK`. All web3 and 3Box login logic will be handled within the Chatbox component, though it's required for the `ethereum` object from your dapp's preferred web3 provider be passed to the `ethereum` prop in the component.\r\n\r\n#### Best practice\r\n\r\nFor the best UX, we recommend implementing one of the following authentication patterns: A; B; or B with A.\r\n\r\nEach of these patterns allow your application to make the `box` object available in global application state where it can be used by all instances of the Chatbox component regardless of which page the user is on. This global pattern removes the need for users to authenticate on each chatbox component, should you decide to have more than one, which would be the case in C.\r\n\r\n### 3. Configure application settings\r\n\r\n**First, choose a name for your application's 3Box space.**\r\n\r\nAlthough you are free to choose whichever name you'd like for your app's space, we recommend using the name of your app. If your application already has a 3Box space, you are welcome to use that same one for the chatbox.\r\n\r\n**Next, choose a naming convention for your application's threads.**\r\n\r\nThe Chatbox thread needs a name, and we recommend that your application creates `threadNames` according to a simple rule. We generally like using a natural identifier, such as community name, page URL, token ID, or other similar means.\r\n\r\n</br>\r\n</br>\r\n\r\n\r\n### 4. Usage\r\n\r\n#### Example\r\n\r\n```jsx\r\nimport ChatBox from '3box-chatbox-react';\r\n\r\nconst MyComponent = ({ handleLogin, box, ethereum, myAddress, currentUser3BoxProfile, adminEthAddr }) => (\r\n    <ChatBox \r\n        // required\r\n        spaceName=\"mySpaceName\"\r\n        threadName=\"myThreadName\"\r\n\r\n\r\n        // Required props for context A) & B)\r\n        box={box}\r\n        currentUserAddr={myAddress}\r\n\r\n        // Required prop for context B)\r\n        loginFunction={handleLogin}\r\n\r\n        // Required prop for context C)\r\n        ethereum={ethereum}\r\n\r\n        // optional\r\n        mute={false}\r\n        popupChat\r\n        showEmoji\r\n        colorTheme=\"#181F21\"\r\n        currentUser3BoxProfile={currentUser3BoxProfile}\r\n        userProfileURL={address => `https://mywebsite.com/user/${address}`}\r\n        spaceOpts={}\r\n        threadOpts={}\r\n        agentProfile={\r\n            chatName: \"3Box\",\r\n            imageUrl: \"https://imgur.com/RXJO8FD\"\r\n        }\r\n    />\r\n);\r\n```\r\n\r\n\r\n#### Prop Types\r\n\r\n| Property | Type          | Default  | Required Case          | Description |\r\n| :-------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `spaceName`    | String        |    |  Always   | Likely your dApp name and / or chatbox category.  A single `spaceName` with different `threadName`s is common practice when building a dApp with multiple Chatbox threads. |\r\n| `threadName`    | String       |   | Always    | A name specific to this Chatbox. |\r\n| `box`    | Object         |   | A (and likely B)    | The `box` instance returned from running `await Box.openBox(address, web3)` somewhere in your dApp.|\r\n| `currentUserAddr`    | String (Ethereum Address)          |    | A & B | The current user's Ethereum address. Passing this will be used to check which messages belong to the current user and can be used for fetching their 3Box profile to render in the Chatbox input UI. |\r\n| `loginFunction`    | Function       |    | B    | A function from your dApp that handles web3 and 3Box login at the global dApp state. This callback will run when a user attempts to join the Chatbox but a `box` instance doesn't yet exist. Running this function should result in a box instance (from `const box = Box.openBox(address, web3)`) being passed as the `box` prop to this component.  |\r\n| `ethereum`    | Object        |  window.ethereum  | C    | The `ethereum` object from whichever web3 provider your dApp uses.  The `enable` method on this object will be used to get the current user's Ethereum address and that address will be used to `openBox` within the current Component context.|\r\n| `popupChat`    | Boolean       |  False   | Optional    | A boolean - `true` - to configure a pop up style chatbox with a button fixed to the bottom right of the window to pop open the chat UI. False will render the component in whichever container you have implemented. |\r\n| `agentProfile`    | Object       |  { chatName: 'Chatbox', imageUrl: null }   | Optional    | An object with the name of the chatbox which will appear in the `Join thread` step and in the header of the chat UI.  The default `imageUrl` is the provided chat icon. |\r\n| `spaceOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `threadOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `colorTheme`    | String       |  False  | Optional    | Pass an rgb or hex color string to match the color theme of your application |\r\n| `mute`    | Boolean       |  False  | Optional    | Pass false to turn off sound for incoming messages. |\r\n| `showEmoji`    | Boolean       |  False  | Optional    | Pass false to turn off the emoji pop up within the chat input UI. |\r\n| `currentUser3BoxProfile`    | Object       |   | Optional    | If the current user has already had their 3Box data fetched at the global dApp state, pass the object returned from `Box.getProfile(profileAddress)` to avoid an extra request.  This data will be rendered in the Chatbox input interface.|\r\n| `userProfileURL`    | Function       |  Defaults to returning user's 3Box profile URL  | Optional    | A function that returns a correctly formatted URL of a user's profile on the current platform.  The function will be passed an Ethereum address within the component, if needed.  A user will be redirected to the URL returned from this function when clicking on the name or Ethereum address associated with the message in the chatbox.|\r\n\r\n## License\r\n\r\nMIT\r\n","gitHead":"d6bfa4b3f174ee59c877656764d94ac24fa3b932","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.14.0","emoji-js":"^3.4.1","babel-core":"^7.0.0-bridge.0","react-tilt":"^0.1.4","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-text-loop":"^2.1.1","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","node-sass":"^4.7.2","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-inlinesvg":"^1.1.6","react-hot-loader":"next","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.1-beta.19_1578061595967_0.845318337151969","host":"s3://npm-registry-packages"}},"0.0.1-beta.20":{"name":"3box-chatbox-react","version":"0.0.1-beta.20","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.1-beta.20","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"67c9fa524c18ce550edbc455f63283f83fd450c5","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.1-beta.20.tgz","fileCount":76,"integrity":"sha512-sktmU3C4lnZoyNORGL461gpLJrUe4JD5TTycGFZbkPUa8l+KgK3aCc4FmQISWtjyDQVAOQ76rPtQWJOFRoCQdg==","signatures":[{"sig":"MEUCIQCeY2Bl5zlLJ52iKo7GPWldsEHYOVABRrP97cq7U16nJQIgUERaVfoICahx7mm/l4hAB6Ip/GkrEZWmXLNUUwo1rq4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3715887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD1DyCRA9TVsSAnZWagAARrMP/jDxpycVWzhbmIIXIrbA\nUsfezhQ3fUpr1Hx8lwJ9+vH/19vcZdwUuJDOzWRqpMVuC9gQfSMlt5HqL4FH\nXtyH4W/WS8tUk2W7t0KYtSU0x9LkuAckcLfWQwM9zOlnJ6zBFmDsJ1orNos/\nMtDP0vdMXP3R0RtE6IdUp2X6nyIC7B2NRTaKjEq5TfkDhoMNm3ruSTtQxuRJ\n4QZeXZ3LnQyJSdjHmyCk2/N4Vvy8ZB8UItYmyU3zBkFs42CR5wfPiBIr//LL\ntlPtROzc+ZyNCMPXuMnyn3Bx2zU4fTuojh9hW8r3iUVdS6ieUJtotoeWyhSp\nCGV4ZD55AVLY7EpCyXwgNhlyJxNlqS+xx7L6/J0qOWLUY4nbfHBrtP6TswAS\nxuIvHI5ZBKkn9aK+hBwQnXGxNl8hofhuzSoU2YpjHKTYX1MWfdeNdqERvS1S\nCum0gPwuAexGx7kwtITTECpuXEOM3PThPjZZTpkPlzYXY/NMR9wrQ3WX8XCL\n/AniaUSESoi3lyZX9iEmZTV8NzMAcc0/QTtpR9RnKwYUGjwiWj/m5TV2c9XU\nACkbscSj+7nSWVfU4VPfPQRoZ3/7bG68grGUOwvV2UK76LWGO+1VYxlXJO17\nf0aXhJiNg73jUT6OmR9QRwon2hwjkejOgnHUpndAEzSFfgNUVh6VyOGRUdTi\nnbVW\r\n=roQL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","readme":"[![Discord](https://img.shields.io/discord/484729862368526356.svg?style=for-the-badge)](https://discordapp.com/invite/Z3f3Cxy)\r\n[![npm](https://img.shields.io/npm/v/3box-chatbox-react.svg?style=for-the-badge)](https://www.npmjs.com/package/3box-chatbox-react)\r\n[![Twitter Follow](https://img.shields.io/twitter/follow/3boxdb.svg?style=for-the-badge&label=Twitter)](https://twitter.com/3boxdb)\r\n\r\n# 3Box Chatbox Plugin 💬\r\n\r\n`3box-chatbox-react` node package is a drop-in react component that provides Web3 developers with a readymade chat system for their Ethereum application. Easily add rich, decentralized social discourse to your dApp with one line of code. The 3Box Chatbox plugin is built using 3Box infrastructure, and handles all logic for creating a chatbox. *Read the docs on [docs.3box.io](https://docs.3box.io/build/plugins/chatbox)*.\r\n\r\n### Try the demo [here](https://3box.github.io/3box-chatbox/examples/dist/)\r\n![Example Screenshot](chatbox-example-screenshot.png)\r\n</br>\r\n\r\n## How it Works\r\n#### Architecture\r\nThe Chatbox plugin is built using a standard implementation of [Open Threads](https://docs.3box.io/build/web-apps/messaging/choose#open-threads) which are defined in the [3Box Threads API](https://docs.3box.io/api/messaging) and made available via the [`3Box.js SDK`](https://github.com/3box/3box-js). Chatbox messages are ephemeral and are persisted only as long as there is at least one user in the chatbox. The Chatbox plugin includes UI for inputting and displaying both an in-window and pop-up chat and all relevant logic. The component is configurable to various authentication patterns, and can handle both Web3/3Box logged-in & logged-out states. \r\n\r\n#### Authentication\r\nThe content of the configured chatbox cannot be read until a user has authenticated into their 3Box and joined the ephemeral (`ghost`-type) thread.  After authenticating, a user can post and receive messages from other users in *real-time*.\r\n</br>\r\n</br>\r\n\r\n## Getting Started\r\n1. Install the component\r\n2. Choose your authentication pattern\r\n3. Configure application settings\r\n4. Usage\r\n\r\n### 1. Install the component\r\n\r\n```shell\r\nnpm i -S 3box-chatbox-react\r\n```\r\n\r\n### 2. Choose your authentication pattern\r\nDepending on *when and how* your dApp handles authentication for web3 and 3Box, you will need to provide a different set of props to the component. Three acceptable authentication patterns and their respective props are discussed below in A-C:\r\n\r\n**A) Dapp handles web3 and 3Box logins, and they run *before* component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the `box` instance returned from `Box.openBox(ethAddr)` via 3Box.js should be passed to the `box` prop in the chatbox component. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages are their own.\r\n\r\n**B) Dapp handles web3 and 3Box logins, but they haven't run before component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the login logic implemented in the dapp should be passed to the Chatbox component as the `loginFunction` prop, which is run when a user attempts to post a message. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages belong to that user.\r\n\r\n**C) Dapp has no web3 and 3Box login logic.**\r\n\r\nDapp only integrates with the `3box-chatbox-react` component, but not `3Box.js SDK`. All web3 and 3Box login logic will be handled within the Chatbox component, though it's required for the `ethereum` object from your dapp's preferred web3 provider be passed to the `ethereum` prop in the component.\r\n\r\n#### Best practice\r\n\r\nFor the best UX, we recommend implementing one of the following authentication patterns: A; B; or B with A.\r\n\r\nEach of these patterns allow your application to make the `box` object available in global application state where it can be used by all instances of the Chatbox component regardless of which page the user is on. This global pattern removes the need for users to authenticate on each chatbox component, should you decide to have more than one, which would be the case in C.\r\n\r\n### 3. Configure application settings\r\n\r\n**First, choose a name for your application's 3Box space.**\r\n\r\nAlthough you are free to choose whichever name you'd like for your app's space, we recommend using the name of your app. If your application already has a 3Box space, you are welcome to use that same one for the chatbox.\r\n\r\n**Next, choose a naming convention for your application's threads.**\r\n\r\nThe Chatbox thread needs a name, and we recommend that your application creates `threadNames` according to a simple rule. We generally like using a natural identifier, such as community name, page URL, token ID, or other similar means.\r\n\r\n</br>\r\n</br>\r\n\r\n\r\n### 4. Usage\r\n\r\n#### Example\r\n\r\n```jsx\r\nimport ChatBox from '3box-chatbox-react';\r\n\r\nconst MyComponent = ({ handleLogin, box, ethereum, myAddress, currentUser3BoxProfile, adminEthAddr }) => (\r\n    <ChatBox \r\n        // required\r\n        spaceName=\"mySpaceName\"\r\n        threadName=\"myThreadName\"\r\n\r\n\r\n        // Required props for context A) & B)\r\n        box={box}\r\n        currentUserAddr={myAddress}\r\n\r\n        // Required prop for context B)\r\n        loginFunction={handleLogin}\r\n\r\n        // Required prop for context C)\r\n        ethereum={ethereum}\r\n\r\n        // optional\r\n        mute={false}\r\n        popupChat\r\n        showEmoji\r\n        colorTheme=\"#181F21\"\r\n        currentUser3BoxProfile={currentUser3BoxProfile}\r\n        userProfileURL={address => `https://mywebsite.com/user/${address}`}\r\n        spaceOpts={}\r\n        threadOpts={}\r\n        agentProfile={\r\n            chatName: \"3Box\",\r\n            imageUrl: \"https://imgur.com/RXJO8FD\"\r\n        }\r\n    />\r\n);\r\n```\r\n\r\n\r\n#### Prop Types\r\n\r\n| Property | Type          | Default  | Required Case          | Description |\r\n| :-------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `spaceName`    | String        |    |  Always   | Likely your dApp name and / or chatbox category.  A single `spaceName` with different `threadName`s is common practice when building a dApp with multiple Chatbox threads. |\r\n| `threadName`    | String       |   | Always    | A name specific to this Chatbox. |\r\n| `box`    | Object         |   | A (and likely B)    | The `box` instance returned from running `await Box.openBox(address, web3)` somewhere in your dApp.|\r\n| `currentUserAddr`    | String (Ethereum Address)          |    | A & B | The current user's Ethereum address. Passing this will be used to check which messages belong to the current user and can be used for fetching their 3Box profile to render in the Chatbox input UI. |\r\n| `loginFunction`    | Function       |    | B    | A function from your dApp that handles web3 and 3Box login at the global dApp state. This callback will run when a user attempts to join the Chatbox but a `box` instance doesn't yet exist. Running this function should result in a box instance (from `const box = Box.openBox(address, web3)`) being passed as the `box` prop to this component.  |\r\n| `ethereum`    | Object        |  window.ethereum  | C    | The `ethereum` object from whichever web3 provider your dApp uses.  The `enable` method on this object will be used to get the current user's Ethereum address and that address will be used to `openBox` within the current Component context.|\r\n| `popupChat`    | Boolean       |  False   | Optional    | A boolean - `true` - to configure a pop up style chatbox with a button fixed to the bottom right of the window to pop open the chat UI. False will render the component in whichever container you have implemented. |\r\n| `agentProfile`    | Object       |  { chatName: 'Chatbox', imageUrl: null }   | Optional    | An object with the name of the chatbox which will appear in the `Join thread` step and in the header of the chat UI.  The default `imageUrl` is the provided chat icon. |\r\n| `spaceOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `threadOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `colorTheme`    | String       |  False  | Optional    | Pass an rgb or hex color string to match the color theme of your application |\r\n| `mute`    | Boolean       |  False  | Optional    | Pass false to turn off sound for incoming messages. |\r\n| `showEmoji`    | Boolean       |  False  | Optional    | Pass false to turn off the emoji pop up within the chat input UI. |\r\n| `currentUser3BoxProfile`    | Object       |   | Optional    | If the current user has already had their 3Box data fetched at the global dApp state, pass the object returned from `Box.getProfile(profileAddress)` to avoid an extra request.  This data will be rendered in the Chatbox input interface.|\r\n| `userProfileURL`    | Function       |  Defaults to returning user's 3Box profile URL  | Optional    | A function that returns a correctly formatted URL of a user's profile on the current platform.  The function will be passed an Ethereum address within the component, if needed.  A user will be redirected to the URL returned from this function when clicking on the name or Ethereum address associated with the message in the chatbox.|\r\n\r\n## License\r\n\r\nMIT\r\n","gitHead":"d6bfa4b3f174ee59c877656764d94ac24fa3b932","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.14.0","emoji-js":"^3.4.1","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","react-tilt":"^0.1.4","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-text-loop":"^2.1.1","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","node-sass":"^4.7.2","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-inlinesvg":"^1.1.6","react-hot-loader":"next","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.1-beta.20_1578062066528_0.6716653152671697","host":"s3://npm-registry-packages"}},"0.0.1-beta.21":{"name":"3box-chatbox-react","version":"0.0.1-beta.21","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.1-beta.21","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"043e8477f5acb48a037386865ceda6e925a2e0a1","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.1-beta.21.tgz","fileCount":102,"integrity":"sha512-hmPCrcKiW8Txayq2zn4NZ4wLVaQCSNN2b/1rO/nmJT6Vp0gO5IWpPp/CjouQnCd/IjGf6xltIUZLYemr9Nsgfg==","signatures":[{"sig":"MEQCICqGIsBd2hHHx+Zrut35fg9LLsvIs7IXju0pWWcGxq5HAiBabSjYLqeyVu79BlgJYGS0PVDlcJdc1lqsz20GT4xiKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3956967,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD1KqCRA9TVsSAnZWagAAyGAP/34gz0ELAdZ0k84LNjVU\nMln0aFCjXU3N6MDvYDEjPyJpA3oZWr4vrZT6v5fNAtIrxQvyAiLpuZf4mgnM\nLuEtsuc9h+nptjnv69xYA/1cq6QxWTobFuaYI7nUIkRYRJgdUGAYiewIZySD\nW4anfN84UB7wZhvc3KHkAvC0bGhVv2KOV2Ag8iWnitwun4Erc+jxK6xeOJnd\n2SBcViQ79xWBmX1thSNS8rFTeIpAhbq5ibk/MyeuWEn7Afkpv35OqCv8DYLU\nJplymwSPanSzlt4tNS+a4CAEDp4ptBZyfUTzpKJzNttBE3uZIoAo4yisAa+j\ndYhan1KsFWVA2lbSzAIXRYaeqWZTtV6oDXrMKRTd/1FwWFYMEmjhZrETzp0G\n1NO+9AfzwDuRXyNsDbH4qanyd10AeGwZdM231OVNjvpwWs2XlFiB6d4CC3+b\nGU+fUAUSAunZuOVtLNfwObiwhlyXd6umNamHrIDZuM/OQ6qVqempUObBBKIB\nwKlNDAGYXDY3/K8SY/PiYVDcQv10Phm8U48or2b35D1JmQzIyHSWDiQyS00v\nH7DDdU+Z+saDUUIOKju6uLmkz4QCTGfAp5lWwfxhopKMNOR2itpDo39wiY9l\nc4C1xtqKK2IrfZDeerpCHuDsqjCUkKkM6H3W898HHhQ8PYVmlhhk8sFwv61i\nJkMB\r\n=l9iH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","readme":"[![Discord](https://img.shields.io/discord/484729862368526356.svg?style=for-the-badge)](https://discordapp.com/invite/Z3f3Cxy)\r\n[![npm](https://img.shields.io/npm/v/3box-chatbox-react.svg?style=for-the-badge)](https://www.npmjs.com/package/3box-chatbox-react)\r\n[![Twitter Follow](https://img.shields.io/twitter/follow/3boxdb.svg?style=for-the-badge&label=Twitter)](https://twitter.com/3boxdb)\r\n\r\n# 3Box Chatbox Plugin 💬\r\n\r\n`3box-chatbox-react` node package is a drop-in react component that provides Web3 developers with a readymade chat system for their Ethereum application. Easily add rich, decentralized social discourse to your dApp with one line of code. The 3Box Chatbox plugin is built using 3Box infrastructure, and handles all logic for creating a chatbox. *Read the docs on [docs.3box.io](https://docs.3box.io/build/plugins/chatbox)*.\r\n\r\n### Try the demo [here](https://3box.github.io/3box-chatbox/examples/dist/)\r\n![Example Screenshot](chatbox-example-screenshot.png)\r\n</br>\r\n\r\n## How it Works\r\n#### Architecture\r\nThe Chatbox plugin is built using a standard implementation of [Open Threads](https://docs.3box.io/build/web-apps/messaging/choose#open-threads) which are defined in the [3Box Threads API](https://docs.3box.io/api/messaging) and made available via the [`3Box.js SDK`](https://github.com/3box/3box-js). Chatbox messages are ephemeral and are persisted only as long as there is at least one user in the chatbox. The Chatbox plugin includes UI for inputting and displaying both an in-window and pop-up chat and all relevant logic. The component is configurable to various authentication patterns, and can handle both Web3/3Box logged-in & logged-out states. \r\n\r\n#### Authentication\r\nThe content of the configured chatbox cannot be read until a user has authenticated into their 3Box and joined the ephemeral (`ghost`-type) thread.  After authenticating, a user can post and receive messages from other users in *real-time*.\r\n</br>\r\n</br>\r\n\r\n## Getting Started\r\n1. Install the component\r\n2. Choose your authentication pattern\r\n3. Configure application settings\r\n4. Usage\r\n\r\n### 1. Install the component\r\n\r\n```shell\r\nnpm i -S 3box-chatbox-react\r\n```\r\n\r\n### 2. Choose your authentication pattern\r\nDepending on *when and how* your dApp handles authentication for web3 and 3Box, you will need to provide a different set of props to the component. Three acceptable authentication patterns and their respective props are discussed below in A-C:\r\n\r\n**A) Dapp handles web3 and 3Box logins, and they run *before* component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the `box` instance returned from `Box.openBox(ethAddr)` via 3Box.js should be passed to the `box` prop in the chatbox component. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages are their own.\r\n\r\n**B) Dapp handles web3 and 3Box logins, but they haven't run before component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the login logic implemented in the dapp should be passed to the Chatbox component as the `loginFunction` prop, which is run when a user attempts to post a message. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages belong to that user.\r\n\r\n**C) Dapp has no web3 and 3Box login logic.**\r\n\r\nDapp only integrates with the `3box-chatbox-react` component, but not `3Box.js SDK`. All web3 and 3Box login logic will be handled within the Chatbox component, though it's required for the `ethereum` object from your dapp's preferred web3 provider be passed to the `ethereum` prop in the component.\r\n\r\n#### Best practice\r\n\r\nFor the best UX, we recommend implementing one of the following authentication patterns: A; B; or B with A.\r\n\r\nEach of these patterns allow your application to make the `box` object available in global application state where it can be used by all instances of the Chatbox component regardless of which page the user is on. This global pattern removes the need for users to authenticate on each chatbox component, should you decide to have more than one, which would be the case in C.\r\n\r\n### 3. Configure application settings\r\n\r\n**First, choose a name for your application's 3Box space.**\r\n\r\nAlthough you are free to choose whichever name you'd like for your app's space, we recommend using the name of your app. If your application already has a 3Box space, you are welcome to use that same one for the chatbox.\r\n\r\n**Next, choose a naming convention for your application's threads.**\r\n\r\nThe Chatbox thread needs a name, and we recommend that your application creates `threadNames` according to a simple rule. We generally like using a natural identifier, such as community name, page URL, token ID, or other similar means.\r\n\r\n</br>\r\n</br>\r\n\r\n\r\n### 4. Usage\r\n\r\n#### Example\r\n\r\n```jsx\r\nimport ChatBox from '3box-chatbox-react';\r\n\r\nconst MyComponent = ({ handleLogin, box, ethereum, myAddress, currentUser3BoxProfile, adminEthAddr }) => (\r\n    <ChatBox \r\n        // required\r\n        spaceName=\"mySpaceName\"\r\n        threadName=\"myThreadName\"\r\n\r\n\r\n        // Required props for context A) & B)\r\n        box={box}\r\n        currentUserAddr={myAddress}\r\n\r\n        // Required prop for context B)\r\n        loginFunction={handleLogin}\r\n\r\n        // Required prop for context C)\r\n        ethereum={ethereum}\r\n\r\n        // optional\r\n        mute={false}\r\n        popupChat\r\n        showEmoji\r\n        colorTheme=\"#181F21\"\r\n        currentUser3BoxProfile={currentUser3BoxProfile}\r\n        userProfileURL={address => `https://mywebsite.com/user/${address}`}\r\n        spaceOpts={}\r\n        threadOpts={}\r\n        agentProfile={\r\n            chatName: \"3Box\",\r\n            imageUrl: \"https://imgur.com/RXJO8FD\"\r\n        }\r\n    />\r\n);\r\n```\r\n\r\n\r\n#### Prop Types\r\n\r\n| Property | Type          | Default  | Required Case          | Description |\r\n| :-------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `spaceName`    | String        |    |  Always   | Likely your dApp name and / or chatbox category.  A single `spaceName` with different `threadName`s is common practice when building a dApp with multiple Chatbox threads. |\r\n| `threadName`    | String       |   | Always    | A name specific to this Chatbox. |\r\n| `box`    | Object         |   | A (and likely B)    | The `box` instance returned from running `await Box.openBox(address, web3)` somewhere in your dApp.|\r\n| `currentUserAddr`    | String (Ethereum Address)          |    | A & B | The current user's Ethereum address. Passing this will be used to check which messages belong to the current user and can be used for fetching their 3Box profile to render in the Chatbox input UI. |\r\n| `loginFunction`    | Function       |    | B    | A function from your dApp that handles web3 and 3Box login at the global dApp state. This callback will run when a user attempts to join the Chatbox but a `box` instance doesn't yet exist. Running this function should result in a box instance (from `const box = Box.openBox(address, web3)`) being passed as the `box` prop to this component.  |\r\n| `ethereum`    | Object        |  window.ethereum  | C    | The `ethereum` object from whichever web3 provider your dApp uses.  The `enable` method on this object will be used to get the current user's Ethereum address and that address will be used to `openBox` within the current Component context.|\r\n| `popupChat`    | Boolean       |  False   | Optional    | A boolean - `true` - to configure a pop up style chatbox with a button fixed to the bottom right of the window to pop open the chat UI. False will render the component in whichever container you have implemented. |\r\n| `agentProfile`    | Object       |  { chatName: 'Chatbox', imageUrl: null }   | Optional    | An object with the name of the chatbox which will appear in the `Join thread` step and in the header of the chat UI.  The default `imageUrl` is the provided chat icon. |\r\n| `spaceOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `threadOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `colorTheme`    | String       |  False  | Optional    | Pass an rgb or hex color string to match the color theme of your application |\r\n| `mute`    | Boolean       |  False  | Optional    | Pass false to turn off sound for incoming messages. |\r\n| `showEmoji`    | Boolean       |  False  | Optional    | Pass false to turn off the emoji pop up within the chat input UI. |\r\n| `currentUser3BoxProfile`    | Object       |   | Optional    | If the current user has already had their 3Box data fetched at the global dApp state, pass the object returned from `Box.getProfile(profileAddress)` to avoid an extra request.  This data will be rendered in the Chatbox input interface.|\r\n| `userProfileURL`    | Function       |  Defaults to returning user's 3Box profile URL  | Optional    | A function that returns a correctly formatted URL of a user's profile on the current platform.  The function will be passed an Ethereum address within the component, if needed.  A user will be redirected to the URL returned from this function when clicking on the name or Ethereum address associated with the message in the chatbox.|\r\n\r\n## License\r\n\r\nMIT\r\n","gitHead":"d6bfa4b3f174ee59c877656764d94ac24fa3b932","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.14.0","emoji-js":"^3.4.1","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","react-tilt":"^0.1.4","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-text-loop":"^2.1.1","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","node-sass":"^4.7.2","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-inlinesvg":"^1.1.6","react-hot-loader":"next","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.1-beta.21_1578062506105_0.37523134235119704","host":"s3://npm-registry-packages"}},"0.0.1-beta.22":{"name":"3box-chatbox-react","version":"0.0.1-beta.22","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.1-beta.22","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"04a5d2a85c2292b6bf99353cb86568b439078bba","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.1-beta.22.tgz","fileCount":56,"integrity":"sha512-tat0oqDE3o+e+87xTdurChmhVft6Pk8FW72bN9VgICOHaMTt2Rzn5MGD1S4yZ/lkJmBE6LuXm+BUtM1SNrsGcA==","signatures":[{"sig":"MEUCICL1JBTIND0W1oWIXHygmdAwd0XpZ2qBD2fZamSI4Y8TAiEAlPhhUDd97kTmCSd5V2Tt2Yjwa5seI7lYO6Gag0h5AQE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":787447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE5DrCRA9TVsSAnZWagAAs7wP/2IJphZPPPUnuTY/MQPZ\nJajGXY3I8vFmE6UZNI5wR6/11SuzArzuwV0ohfC5p5lE8R/MfnqfhJIll1j6\n+pLXc8KraGZGBnjsO8qKU5rlMJPoPt+VMF8RXBFC9ROmbxZg2RmMBvTlD6cs\nrgyi9H6rDQkZRmYi+0I8/3yvJ/uuhpRnLcLDA4OX0kzzC+0lWJ5wodDTP+yE\nRgT1AxGI1cQw9TAyF4nou2LOKPVQ1IUd0C15SQFwZSwjcMuer6atC3EZY9Eu\nIPzQLNzaGaRVz6LSBM/YDYT3ByeiMkyRKcqJF5f94KICe3GMDMYEXA6yJ2nr\n/H3L4+iWw79IeYyNeDQFQaUWnB6NsFufPN2JC65KQk3XkafV6uKKVQI2q9R6\nET9PdZO9XkwTl8ObkTmySYIfA0rfTGV9Cr55Cf/AHgqMV5MOVvIbZJsRI2JQ\nJwAFlLyLCGP9reE2vo8/6kW4eN2DnBEXEPTWJ95Nnj4M4NrTLwg5jx2A7P05\nidIGnv6YrfzLnQaZLx2uIVxjXo/qoSnaCk3Ks6PmEBJYDBTyzyefh58jDMoq\nc1Wy1xQvxbkZEiLlhNGONm2n0t9P7oF+Ir6c2HI8P4OAVyylcKirx+0gULXh\nSIY3Icxegfv98tuGMyCcalpdNQUxRlEo53fYg/EYthLZ3wFcI/3+tV53HCna\nf/KD\r\n=EdTy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","readme":"[![Discord](https://img.shields.io/discord/484729862368526356.svg?style=for-the-badge)](https://discordapp.com/invite/Z3f3Cxy)\r\n[![npm](https://img.shields.io/npm/v/3box-chatbox-react.svg?style=for-the-badge)](https://www.npmjs.com/package/3box-chatbox-react)\r\n[![Twitter Follow](https://img.shields.io/twitter/follow/3boxdb.svg?style=for-the-badge&label=Twitter)](https://twitter.com/3boxdb)\r\n\r\n# 3Box Chatbox Plugin 💬\r\n\r\n`3box-chatbox-react` node package is a drop-in react component that provides Web3 developers with a readymade chat system for their Ethereum application. Easily add rich, decentralized social discourse to your dApp with one line of code. The 3Box Chatbox plugin is built using 3Box infrastructure, and handles all logic for creating a chatbox. *Read the docs on [docs.3box.io](https://docs.3box.io/build/plugins/chatbox)*.\r\n\r\n### Try the demo [here](https://3box.github.io/3box-chatbox/examples/dist/)\r\n![Example Screenshot](chatbox-example-screenshot.png)\r\n</br>\r\n\r\n## How it Works\r\n#### Architecture\r\nThe Chatbox plugin is built using a standard implementation of [Open Threads](https://docs.3box.io/build/web-apps/messaging/choose#open-threads) which are defined in the [3Box Threads API](https://docs.3box.io/api/messaging) and made available via the [`3Box.js SDK`](https://github.com/3box/3box-js). Chatbox messages are ephemeral and are persisted only as long as there is at least one user in the chatbox. The Chatbox plugin includes UI for inputting and displaying both an in-window and pop-up chat and all relevant logic. The component is configurable to various authentication patterns, and can handle both Web3/3Box logged-in & logged-out states. \r\n\r\n#### Authentication\r\nThe content of the configured chatbox cannot be read until a user has authenticated into their 3Box and joined the ephemeral (`ghost`-type) thread.  After authenticating, a user can post and receive messages from other users in *real-time*.\r\n</br>\r\n</br>\r\n\r\n## Getting Started\r\n1. Install the component\r\n2. Choose your authentication pattern\r\n3. Configure application settings\r\n4. Usage\r\n\r\n### 1. Install the component\r\n\r\n```shell\r\nnpm i -S 3box-chatbox-react\r\n```\r\n\r\n### 2. Choose your authentication pattern\r\nDepending on *when and how* your dApp handles authentication for web3 and 3Box, you will need to provide a different set of props to the component. Three acceptable authentication patterns and their respective props are discussed below in A-C:\r\n\r\n**A) Dapp handles web3 and 3Box logins, and they run *before* component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the `box` instance returned from `Box.openBox(ethAddr)` via 3Box.js should be passed to the `box` prop in the chatbox component. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages are their own.\r\n\r\n**B) Dapp handles web3 and 3Box logins, but they haven't run before component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the login logic implemented in the dapp should be passed to the Chatbox component as the `loginFunction` prop, which is run when a user attempts to post a message. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages belong to that user.\r\n\r\n**C) Dapp has no web3 and 3Box login logic.**\r\n\r\nDapp only integrates with the `3box-chatbox-react` component, but not `3Box.js SDK`. All web3 and 3Box login logic will be handled within the Chatbox component, though it's required for the `ethereum` object from your dapp's preferred web3 provider be passed to the `ethereum` prop in the component.\r\n\r\n#### Best practice\r\n\r\nFor the best UX, we recommend implementing one of the following authentication patterns: A; B; or B with A.\r\n\r\nEach of these patterns allow your application to make the `box` object available in global application state where it can be used by all instances of the Chatbox component regardless of which page the user is on. This global pattern removes the need for users to authenticate on each chatbox component, should you decide to have more than one, which would be the case in C.\r\n\r\n### 3. Configure application settings\r\n\r\n**First, choose a name for your application's 3Box space.**\r\n\r\nAlthough you are free to choose whichever name you'd like for your app's space, we recommend using the name of your app. If your application already has a 3Box space, you are welcome to use that same one for the chatbox.\r\n\r\n**Next, choose a naming convention for your application's threads.**\r\n\r\nThe Chatbox thread needs a name, and we recommend that your application creates `threadNames` according to a simple rule. We generally like using a natural identifier, such as community name, page URL, token ID, or other similar means.\r\n\r\n</br>\r\n</br>\r\n\r\n\r\n### 4. Usage\r\n\r\n#### Example\r\n\r\n```jsx\r\nimport ChatBox from '3box-chatbox-react';\r\n\r\nconst MyComponent = ({ handleLogin, box, ethereum, myAddress, currentUser3BoxProfile, adminEthAddr }) => (\r\n    <ChatBox \r\n        // required\r\n        spaceName=\"mySpaceName\"\r\n        threadName=\"myThreadName\"\r\n\r\n\r\n        // Required props for context A) & B)\r\n        box={box}\r\n        currentUserAddr={myAddress}\r\n\r\n        // Required prop for context B)\r\n        loginFunction={handleLogin}\r\n\r\n        // Required prop for context C)\r\n        ethereum={ethereum}\r\n\r\n        // optional\r\n        mute={false}\r\n        popupChat\r\n        showEmoji\r\n        colorTheme=\"#181F21\"\r\n        currentUser3BoxProfile={currentUser3BoxProfile}\r\n        userProfileURL={address => `https://mywebsite.com/user/${address}`}\r\n        spaceOpts={}\r\n        threadOpts={}\r\n        agentProfile={\r\n            chatName: \"3Box\",\r\n            imageUrl: \"https://imgur.com/RXJO8FD\"\r\n        }\r\n    />\r\n);\r\n```\r\n\r\n\r\n#### Prop Types\r\n\r\n| Property | Type          | Default  | Required Case          | Description |\r\n| :-------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `spaceName`    | String        |    |  Always   | Likely your dApp name and / or chatbox category.  A single `spaceName` with different `threadName`s is common practice when building a dApp with multiple Chatbox threads. |\r\n| `threadName`    | String       |   | Always    | A name specific to this Chatbox. |\r\n| `box`    | Object         |   | A (and likely B)    | The `box` instance returned from running `await Box.openBox(address, web3)` somewhere in your dApp.|\r\n| `currentUserAddr`    | String (Ethereum Address)          |    | A & B | The current user's Ethereum address. Passing this will be used to check which messages belong to the current user and can be used for fetching their 3Box profile to render in the Chatbox input UI. |\r\n| `loginFunction`    | Function       |    | B    | A function from your dApp that handles web3 and 3Box login at the global dApp state. This callback will run when a user attempts to join the Chatbox but a `box` instance doesn't yet exist. Running this function should result in a box instance (from `const box = Box.openBox(address, web3)`) being passed as the `box` prop to this component.  |\r\n| `ethereum`    | Object        |  window.ethereum  | C    | The `ethereum` object from whichever web3 provider your dApp uses.  The `enable` method on this object will be used to get the current user's Ethereum address and that address will be used to `openBox` within the current Component context.|\r\n| `popupChat`    | Boolean       |  False   | Optional    | A boolean - `true` - to configure a pop up style chatbox with a button fixed to the bottom right of the window to pop open the chat UI. False will render the component in whichever container you have implemented. |\r\n| `agentProfile`    | Object       |  { chatName: 'Chatbox', imageUrl: null }   | Optional    | An object with the name of the chatbox which will appear in the `Join thread` step and in the header of the chat UI.  The default `imageUrl` is the provided chat icon. |\r\n| `spaceOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `threadOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `colorTheme`    | String       |  False  | Optional    | Pass an rgb or hex color string to match the color theme of your application |\r\n| `mute`    | Boolean       |  False  | Optional    | Pass false to turn off sound for incoming messages. |\r\n| `showEmoji`    | Boolean       |  False  | Optional    | Pass false to turn off the emoji pop up within the chat input UI. |\r\n| `currentUser3BoxProfile`    | Object       |   | Optional    | If the current user has already had their 3Box data fetched at the global dApp state, pass the object returned from `Box.getProfile(profileAddress)` to avoid an extra request.  This data will be rendered in the Chatbox input interface.|\r\n| `userProfileURL`    | Function       |  Defaults to returning user's 3Box profile URL  | Optional    | A function that returns a correctly formatted URL of a user's profile on the current platform.  The function will be passed an Ethereum address within the component, if needed.  A user will be redirected to the URL returned from this function when clicking on the name or Ethereum address associated with the message in the chatbox.|\r\n\r\n## License\r\n\r\nMIT\r\n","gitHead":"d6bfa4b3f174ee59c877656764d94ac24fa3b932","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.14.0","emoji-js":"^3.4.1","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","react-tilt":"^0.1.4","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-text-loop":"^2.1.1","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","node-sass":"^4.7.2","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-inlinesvg":"^1.1.6","react-hot-loader":"next","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.1-beta.22_1578340586690_0.8659990861865048","host":"s3://npm-registry-packages"}},"0.0.2":{"name":"3box-chatbox-react","version":"0.0.2","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.2","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"d58b3f423f722ad3ba4cf9bdb387527c86992bd5","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.2.tgz","fileCount":57,"integrity":"sha512-lhKHC7B/O7yMHQO9FKhK5lWbhl1scjAh3xEbG8psMRSciJYwoilRIkfZKYcjqmY5jvcDKeDwQonYTjmsl70nJQ==","signatures":[{"sig":"MEUCIQD6NoYziDgSCqUx5sHwMkrzuX+7mlH1YdQjiU/WjS9gPgIgUFbxgxiY6GZnseremWK9Yby4R9FAn59G7NRv+L3+6Ao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":787512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE5MTCRA9TVsSAnZWagAAyRwP/2yazDFx7JtYqJ/Rino8\nyhb6xxaHAVjd5K/0MISTrbwBrgS6ZBmzPgZbl14SHBIIU2s2AaXwLQK6hy0A\nBTVMTTPLLGTL7OKtmVjytN5ERsaiLR+d+5Hs1WWSwJndmFzzXHp8EJgwumPC\nKU4p2yxmp9ihL180qKlPJF3MsPGc2vilw9A2zxSZlI6UQIR7div8tk8JA4FQ\nJvodL50/DJ+6Z1ZE6SGYYH2p4AtrT9VYj+nejxNT9dw+C4m03uY3gGf0qEo/\nGixQN/BFZG3K/YVkXsOCoPBXdb7iX9eqo8b4PpyT5m5insf2j0GiZotVPxxK\nn4rk2joiesOlMrKpFniOXR46lswcQEsGgCdkpuSPCAcv8oyJq3Uh7R/at4h0\nT6fPByXUIGwseDFa3V/hgvdqxdlUHkyCbyq7l45wHKrjhon2J51vNJuC4sgQ\nSn9UP3Fxo00FvA2sriqhaU0rbNmxSnphYvnQFUMAdBiYh206FCQMVWmgz5xD\nxveK/ssSooGKBS++6ZtIxUBC6SIH3Cxl6YA3Q5Wfazj53vX0uF23CQwfPa6x\nDreqRYYNMctAA79aHgGeOdjaEUj9x5nOZdZNyTC2VkupSvbpEboBRIsFTGaN\nBwNsJaae50xVd53gwU7a78miIxM/1tl0nfaXvX6QcVVo+Wo9LCvkZ0AWBCIQ\nbqzp\r\n=/7sL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","gitHead":"d6bfa4b3f174ee59c877656764d94ac24fa3b932","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"deprecated":"Deprecated in favor of Ceramic: https://developers.ceramic.network","_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.14.0","emoji-js":"^3.4.1","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","react-tilt":"^0.1.4","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-text-loop":"^2.1.1","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","node-sass":"^4.7.2","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-inlinesvg":"^1.1.6","react-hot-loader":"next","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.2_1578341138554_0.31390911373174646","host":"s3://npm-registry-packages"}},"0.0.4":{"name":"3box-chatbox-react","version":"0.0.4","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.4","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"5a173b5afb886016b285fea44544abc9749db8c0","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.4.tgz","fileCount":57,"integrity":"sha512-C35JWplFaSSrg8wxbutbJmYQoeWTeEgEwyYMIH+WcJgrfpfp7ljgpZ8hFPBxLXbYuRz4bfx17JUcvFwTVXIRUw==","signatures":[{"sig":"MEUCIQCzrfubewk7JFjQAxkGePgqGDTFqr/LP12V5gul+LuAxAIgat98dFuFTloSmEm1FU8HuUoxHn9LcaHcZnqNp+eqPDQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":793780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHLhICRA9TVsSAnZWagAAlzQQAJ0sON/ncgJu98qKKUMz\n+NjrxAkb4G+SfIitlEJrgWr+ehBI+5XUguzWoDD2BdGs0/et2ATz6mR2tPqv\n6WnI/tK9lUXbJvpGFHrEVYx5s2G8PO3Yo+im/D/YQrybdkyScKGRNEQEQHfi\nMPxJ7Rh0d8pzKqeDVlVQyMWkyHw5WKEwL1chMIC6aXaI+by/ZTCuXeMUUH4M\nlL6YAK5lrfn3GkYZwDNlo4udB6n3GvMwysTHDL06HlFiIwIN5I80OQSw4W+X\ngHnOvGBa2fbW5S936HolvY+9//kHjkUqyzb6HhuQ7RWc5PVkFnwkihMpU5km\npwDZEyn0sfWX39HlLCeYokjNdMOG7R28DYuOsPYm6PDpAHKYT5YJFjZG6dTn\nvB1kgRo98GoYkNQENSQ2iO1FuOd7XCNn7DPJpu3oNhSqFDjvi9lszeDD93r2\nN4uklfYwHrp55RsyvuBU1QnNLDZrSNENKvjoca58PRocbNu05S9/V0+L9hPJ\nAH6AnN1kmKAXOh4uEspFnoFUiLlXwpgQEmhbwwfIfpCqYQMXFxqVmj5yYeeA\n0M/D23SJpQ65ZOXha1OK3J/eRJ6egdOepV1Tu0p3Tfqg5bbwWjdIas2h2Iw+\nZYwOkhQk7A8TV7LeG+JlPqD1xFAz1tD7YJ53DVfOdBXs5um5JvTBVJbXUEwc\nAxWk\r\n=PoYb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","gitHead":"d9ab316e679fa7148c2cdbaa26222c08d507d56b","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"deprecated":"Deprecated in favor of Ceramic: https://developers.ceramic.network","_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.16.0-beta.1","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","multicodec":"^0.5.6","react-tilt":"^0.1.4","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","react-text-loop":"^2.1.1","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"next","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.4_1578940488439_0.6299359481863158","host":"s3://npm-registry-packages"}},"0.0.5-beta.1":{"name":"3box-chatbox-react","version":"0.0.5-beta.1","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.5-beta.1","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"78387020502e29d537f7218f40b5f03fef3c9dd1","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.5-beta.1.tgz","fileCount":57,"integrity":"sha512-Iqv4K8908eGhUu3I0dl0/7Auz8ktos+UjaNfoPBTp+18b8KiwDp4kRytJbKV8j/3QxScAGC/vTQ5+/D4/YWv8Q==","signatures":[{"sig":"MEUCIA5bRZ3v2LU77yUs378u3i8QVGUeU6k49VBrLyII1oVEAiEA2tZDcLuzo1eIOn74qk7TOaJhegWQoaBtDmnFg2Y8uyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":793673,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHgOiCRA9TVsSAnZWagAAD78P/j94W/A80FEaD/HfIdt0\n4VqSgnDhgdmOvF7xKe6y4Xj7dVl1wwoQ0AsSfU06X9VJjgLU5cc++JdbQIfP\nKS80Iu+cAxVD0OPZ1pEQCN+v8N3qnwtaPuKqTiKNmRnDMsgcgHgvZjfcWSop\nk4RrvbmOowQF1MU4M8HA3SidBfa2R7z7g1j8wnr8m8irFp/pxO8pHKbIQ9Cj\nghajaDaRYOB5vqLMRAkxE9Z50o0JzBxj2U5Ky0+As4VuKEuRRM82qw2glNHo\nEbOed8sr2uDjvGFCM8sP+ATxDQCLs4NpTHxUJDCVJHB9hblkSWELjQG3rEXh\npJ+OYhB6bt7A7gFtAvjBJXxoVOxA6DllMcO6rLeVZEEAOxorus2ZruL6++U0\nMMq4QXr9zLSRO+yEiFiRNC2QDyHcaOdtbqA9g9Pqt8hy0P4iCbG41Uoji2PX\nlotJZuuHD9VWiejZzXTpaitQ5tHQD6z6/TAQwt9p9JnBxLVRYU/U7NO0mmeA\n0gjwcdGfLBH6ICmzTFZqpBF/MA6Q6lzKqWSw79SUqaCPo9T9QHVXeW6/7vRC\n69FaJcIfK3kledQ/iBKbE3YyA/WZM/+c0yRyrR8e8bxT0QlVg9IQSUMZdfBW\nda+xUKtCb/9BiWJdZKbATwWSXMrGqGfOZKITgD9wQrbxprbn32bJrbg/X1vI\nkNPQ\r\n=BYf4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","readme":"[![Discord](https://img.shields.io/discord/484729862368526356.svg?style=for-the-badge)](https://discordapp.com/invite/Z3f3Cxy)\r\n[![npm](https://img.shields.io/npm/v/3box-chatbox-react.svg?style=for-the-badge)](https://www.npmjs.com/package/3box-chatbox-react)\r\n[![Twitter Follow](https://img.shields.io/twitter/follow/3boxdb.svg?style=for-the-badge&label=Twitter)](https://twitter.com/3boxdb)\r\n\r\n# 3Box Chatbox Plugin 💬\r\n\r\n`3box-chatbox-react` node package is a drop-in react component that provides Web3 developers with a readymade chat system for their Ethereum application. Easily add rich, decentralized social discourse to your dApp with one line of code. The 3Box Chatbox plugin is built using 3Box infrastructure, and handles all logic for creating a chatbox. *Read the docs on [docs.3box.io](https://docs.3box.io/build/plugins/chatbox)*.\r\n\r\n### Try the demo [here](https://3box.github.io/3box-chatbox/examples/dist/)\r\n![Example Screenshot](chatbox-example-screenshot.png)\r\n</br>\r\n\r\n## How it Works\r\n#### Architecture\r\nThe Chatbox plugin is built using a standard implementation of [Open Threads](https://docs.3box.io/build/web-apps/messaging/choose#open-threads) which are defined in the [3Box Threads API](https://docs.3box.io/api/messaging) and made available via the [`3Box.js SDK`](https://github.com/3box/3box-js). Chatbox messages are ephemeral and are persisted only as long as there is at least one user in the chatbox. The Chatbox plugin includes UI for inputting and displaying both an in-window and pop-up chat and all relevant logic. The component is configurable to various authentication patterns, and can handle both Web3/3Box logged-in & logged-out states. \r\n\r\n#### Authentication\r\nThe content of the configured chatbox cannot be read until a user has authenticated into their 3Box and joined the ephemeral (`ghost`-type) thread.  After authenticating, a user can post and receive messages from other users in *real-time*.\r\n</br>\r\n</br>\r\n\r\n## Getting Started\r\n1. Install the component\r\n2. Choose your authentication pattern\r\n3. Configure application settings\r\n4. Usage\r\n\r\n### 1. Install the component\r\n\r\n```shell\r\nnpm i -S 3box-chatbox-react\r\n```\r\n\r\n### 2. Choose your authentication pattern\r\nDepending on *when and how* your dApp handles authentication for web3 and 3Box, you will need to provide a different set of props to the component. Three acceptable authentication patterns and their respective props are discussed below in A-C:\r\n\r\n**A) Dapp handles web3 and 3Box logins, and they run *before* component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the `box` instance returned from `Box.openBox(ethAddr)` via 3Box.js should be passed to the `box` prop in the chatbox component. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages are their own.\r\n\r\n**B) Dapp handles web3 and 3Box logins, but they haven't run before component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the login logic implemented in the dapp should be passed to the Chatbox component as the `loginFunction` prop, which is run when a user attempts to post a message. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages belong to that user.\r\n\r\n**C) Dapp has no web3 and 3Box login logic.**\r\n\r\nDapp only integrates with the `3box-chatbox-react` component, but not `3Box.js SDK`. All web3 and 3Box login logic will be handled within the Chatbox component, though it's required for the `ethereum` object from your dapp's preferred web3 provider be passed to the `ethereum` prop in the component.\r\n\r\n#### Best practice\r\n\r\nFor the best UX, we recommend implementing one of the following authentication patterns: A; B; or B with A.\r\n\r\nEach of these patterns allow your application to make the `box` object available in global application state where it can be used by all instances of the Chatbox component regardless of which page the user is on. This global pattern removes the need for users to authenticate on each chatbox component, should you decide to have more than one, which would be the case in C.\r\n\r\n### 3. Configure application settings\r\n\r\n**First, choose a name for your application's 3Box space.**\r\n\r\nAlthough you are free to choose whichever name you'd like for your app's space, we recommend using the name of your app. If your application already has a 3Box space, you are welcome to use that same one for the chatbox.\r\n\r\n**Next, choose a naming convention for your application's threads.**\r\n\r\nThe Chatbox thread needs a name, and we recommend that your application creates `threadNames` according to a simple rule. We generally like using a natural identifier, such as community name, page URL, token ID, or other similar means.\r\n\r\n</br>\r\n</br>\r\n\r\n\r\n### 4. Usage\r\n\r\n#### Example\r\n\r\n```jsx\r\nimport ChatBox from '3box-chatbox-react';\r\n\r\nconst MyComponent = ({ handleLogin, box, ethereum, myAddress, currentUser3BoxProfile, adminEthAddr }) => (\r\n    <ChatBox \r\n        // required\r\n        spaceName=\"mySpaceName\"\r\n        threadName=\"myThreadName\"\r\n\r\n\r\n        // Required props for context A) & B)\r\n        box={box}\r\n        currentUserAddr={myAddress}\r\n\r\n        // Required prop for context B)\r\n        loginFunction={handleLogin}\r\n\r\n        // Required prop for context C)\r\n        ethereum={ethereum}\r\n\r\n        // optional\r\n        mute={false}\r\n        popupChat\r\n        showEmoji\r\n        colorTheme=\"#181F21\"\r\n        currentUser3BoxProfile={currentUser3BoxProfile}\r\n        userProfileURL={address => `https://mywebsite.com/user/${address}`}\r\n        spaceOpts={}\r\n        threadOpts={}\r\n        agentProfile={\r\n            chatName: \"3Box\",\r\n            imageUrl: \"https://imgur.com/RXJO8FD\"\r\n        }\r\n    />\r\n);\r\n```\r\n\r\n\r\n#### Prop Types\r\n\r\n| Property | Type          | Default  | Required Case          | Description |\r\n| :-------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `spaceName`    | String        |    |  Always   | Likely your dApp name and / or chatbox category.  A single `spaceName` with different `threadName`s is common practice when building a dApp with multiple Chatbox threads. |\r\n| `threadName`    | String       |   | Always    | A name specific to this Chatbox. |\r\n| `box`    | Object         |   | A (and likely B)    | The `box` instance returned from running `await Box.openBox(address, web3)` somewhere in your dApp.|\r\n| `currentUserAddr`    | String (Ethereum Address)          |    | A & B | The current user's Ethereum address. Passing this will be used to check which messages belong to the current user and can be used for fetching their 3Box profile to render in the Chatbox input UI. |\r\n| `loginFunction`    | Function       |    | B    | A function from your dApp that handles web3 and 3Box login at the global dApp state. This callback will run when a user attempts to join the Chatbox but a `box` instance doesn't yet exist. Running this function should result in a box instance (from `const box = Box.openBox(address, web3)`) being passed as the `box` prop to this component.  |\r\n| `ethereum`    | Object        |  window.ethereum  | C    | The `ethereum` object from whichever web3 provider your dApp uses.  The `enable` method on this object will be used to get the current user's Ethereum address and that address will be used to `openBox` within the current Component context.|\r\n| `popupChat`    | Boolean       |  False   | Optional    | A boolean - `true` - to configure a pop up style chatbox with a button fixed to the bottom right of the window to pop open the chat UI. False will render the component in whichever container you have implemented. |\r\n| `agentProfile`    | Object       |  { chatName: 'Chatbox', imageUrl: null }   | Optional    | An object with the name of the chatbox which will appear in the `Join thread` step and in the header of the chat UI.  The default `imageUrl` is the provided chat icon. |\r\n| `spaceOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `threadOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `colorTheme`    | String       |  False  | Optional    | Pass an rgb or hex color string to match the color theme of your application |\r\n| `mute`    | Boolean       |  False  | Optional    | Pass false to turn off sound for incoming messages. |\r\n| `showEmoji`    | Boolean       |  False  | Optional    | Pass false to turn off the emoji pop up within the chat input UI. |\r\n| `currentUser3BoxProfile`    | Object       |   | Optional    | If the current user has already had their 3Box data fetched at the global dApp state, pass the object returned from `Box.getProfile(profileAddress)` to avoid an extra request.  This data will be rendered in the Chatbox input interface.|\r\n| `userProfileURL`    | Function       |  Defaults to returning user's 3Box profile URL  | Optional    | A function that returns a correctly formatted URL of a user's profile on the current platform.  The function will be passed an Ethereum address within the component, if needed.  A user will be redirected to the URL returned from this function when clicking on the name or Ethereum address associated with the message in the chatbox.|\r\n\r\n## License\r\n\r\nMIT\r\n","gitHead":"7f03dfd1bd8180602b4839fb144915d92658cb7c","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.16.1","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","3box-comments-react":"0.0.5-beta.1","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"^4.12.18","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.5-beta.1_1579025313879_0.06125076811457553","host":"s3://npm-registry-packages"}},"0.0.5-beta.2":{"name":"3box-chatbox-react","version":"0.0.5-beta.2","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.5-beta.2","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"a929c9d894ac07d07ceba2e5a3aa4a7062477089","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.5-beta.2.tgz","fileCount":55,"integrity":"sha512-HrXeGt6C44wgxh1VeB1ZXCubjbZMszi5oTrJQrNVGre/iy35Rv60Xq2T/GXX4ZBmCe2MlS/mJMb62qSIQQCR6g==","signatures":[{"sig":"MEUCIQCjSOeSbFbBkEV4FTF6FOQh/hit3FHbBD03PrwXiBLe5wIgInGX+cQ3KowQCejyZNauVIDPEeJcsSdcMsPmx5K4Q6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":757728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHgPECRA9TVsSAnZWagAA5UwP/13UHJUd2szhHFKfTHOh\ndPm2RQ8hzHwigqg+DFggb/KTrad7Opiy8msvVJcYlyvjwytIt8Siusm9lQZ3\nk4ReUJ7uSgdANmP8dDvO6+QuZAJUij9E42P8cUREQlquF82R0bQ012YnG/bC\nev6kUvj/92cjUrpp97xQ8ep6cOMAUqHtLBUoEqjFOARecC1IM0zGL3MQadF3\nU4d/WzsUbeLJnao32Mr+bn1mF4kluwFiE4z45pFQ1HfzWMWG/IXriyVfM+bd\nj1ClZKSRWuaTaB9dHUUUp3ean6XWn70wO4QlhQQIh1WRmGusQrOoABgHCJEn\nkzb0xwDgvJrUbvvvd5O4bb50t4Fk+77eA9cpbRD3+OxUE/f+jMyJb0Gu/MGa\nr1DQwD45ye83tsinkumYV4uvT6DEAGStNDaHESjEKTm1nzhtk67ZVuwESTFc\n0z4JKMizm3QDWpqbSwtNdE/XX0GoWHlLVqaVTIPFD2eOh/czXgCjEDOozati\n8maBna/NZRuW0FqDykQ8r0ha6KXBkabHAlgkdN8mrzjCm19Kvo7Xz4XUhOLY\nhdNVHMyZsfccnPm7G//ShLZU3o9rUrOhyFOr6dDY8XvC4Dj+e4zL42qLGqN3\nP81e20hTU5FmORJ+miOR6rgMKtEl4JDuJRI0w9HSApu9NSD0Y0DyqcxVSRtI\nV50x\r\n=1KdU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","readme":"[![Discord](https://img.shields.io/discord/484729862368526356.svg?style=for-the-badge)](https://discordapp.com/invite/Z3f3Cxy)\r\n[![npm](https://img.shields.io/npm/v/3box-chatbox-react.svg?style=for-the-badge)](https://www.npmjs.com/package/3box-chatbox-react)\r\n[![Twitter Follow](https://img.shields.io/twitter/follow/3boxdb.svg?style=for-the-badge&label=Twitter)](https://twitter.com/3boxdb)\r\n\r\n# 3Box Chatbox Plugin 💬\r\n\r\n`3box-chatbox-react` node package is a drop-in react component that provides Web3 developers with a readymade chat system for their Ethereum application. Easily add rich, decentralized social discourse to your dApp with one line of code. The 3Box Chatbox plugin is built using 3Box infrastructure, and handles all logic for creating a chatbox. *Read the docs on [docs.3box.io](https://docs.3box.io/build/plugins/chatbox)*.\r\n\r\n### Try the demo [here](https://3box.github.io/3box-chatbox/examples/dist/)\r\n![Example Screenshot](chatbox-example-screenshot.png)\r\n</br>\r\n\r\n## How it Works\r\n#### Architecture\r\nThe Chatbox plugin is built using a standard implementation of [Open Threads](https://docs.3box.io/build/web-apps/messaging/choose#open-threads) which are defined in the [3Box Threads API](https://docs.3box.io/api/messaging) and made available via the [`3Box.js SDK`](https://github.com/3box/3box-js). Chatbox messages are ephemeral and are persisted only as long as there is at least one user in the chatbox. The Chatbox plugin includes UI for inputting and displaying both an in-window and pop-up chat and all relevant logic. The component is configurable to various authentication patterns, and can handle both Web3/3Box logged-in & logged-out states. \r\n\r\n#### Authentication\r\nThe content of the configured chatbox cannot be read until a user has authenticated into their 3Box and joined the ephemeral (`ghost`-type) thread.  After authenticating, a user can post and receive messages from other users in *real-time*.\r\n</br>\r\n</br>\r\n\r\n## Getting Started\r\n1. Install the component\r\n2. Choose your authentication pattern\r\n3. Configure application settings\r\n4. Usage\r\n\r\n### 1. Install the component\r\n\r\n```shell\r\nnpm i -S 3box-chatbox-react\r\n```\r\n\r\n### 2. Choose your authentication pattern\r\nDepending on *when and how* your dApp handles authentication for web3 and 3Box, you will need to provide a different set of props to the component. Three acceptable authentication patterns and their respective props are discussed below in A-C:\r\n\r\n**A) Dapp handles web3 and 3Box logins, and they run *before* component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the `box` instance returned from `Box.openBox(ethAddr)` via 3Box.js should be passed to the `box` prop in the chatbox component. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages are their own.\r\n\r\n**B) Dapp handles web3 and 3Box logins, but they haven't run before component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the login logic implemented in the dapp should be passed to the Chatbox component as the `loginFunction` prop, which is run when a user attempts to post a message. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages belong to that user.\r\n\r\n**C) Dapp has no web3 and 3Box login logic.**\r\n\r\nDapp only integrates with the `3box-chatbox-react` component, but not `3Box.js SDK`. All web3 and 3Box login logic will be handled within the Chatbox component, though it's required for the `ethereum` object from your dapp's preferred web3 provider be passed to the `ethereum` prop in the component.\r\n\r\n#### Best practice\r\n\r\nFor the best UX, we recommend implementing one of the following authentication patterns: A; B; or B with A.\r\n\r\nEach of these patterns allow your application to make the `box` object available in global application state where it can be used by all instances of the Chatbox component regardless of which page the user is on. This global pattern removes the need for users to authenticate on each chatbox component, should you decide to have more than one, which would be the case in C.\r\n\r\n### 3. Configure application settings\r\n\r\n**First, choose a name for your application's 3Box space.**\r\n\r\nAlthough you are free to choose whichever name you'd like for your app's space, we recommend using the name of your app. If your application already has a 3Box space, you are welcome to use that same one for the chatbox.\r\n\r\n**Next, choose a naming convention for your application's threads.**\r\n\r\nThe Chatbox thread needs a name, and we recommend that your application creates `threadNames` according to a simple rule. We generally like using a natural identifier, such as community name, page URL, token ID, or other similar means.\r\n\r\n</br>\r\n</br>\r\n\r\n\r\n### 4. Usage\r\n\r\n#### Example\r\n\r\n```jsx\r\nimport ChatBox from '3box-chatbox-react';\r\n\r\nconst MyComponent = ({ handleLogin, box, ethereum, myAddress, currentUser3BoxProfile, adminEthAddr }) => (\r\n    <ChatBox \r\n        // required\r\n        spaceName=\"mySpaceName\"\r\n        threadName=\"myThreadName\"\r\n\r\n\r\n        // Required props for context A) & B)\r\n        box={box}\r\n        currentUserAddr={myAddress}\r\n\r\n        // Required prop for context B)\r\n        loginFunction={handleLogin}\r\n\r\n        // Required prop for context C)\r\n        ethereum={ethereum}\r\n\r\n        // optional\r\n        mute={false}\r\n        popupChat\r\n        showEmoji\r\n        colorTheme=\"#181F21\"\r\n        currentUser3BoxProfile={currentUser3BoxProfile}\r\n        userProfileURL={address => `https://mywebsite.com/user/${address}`}\r\n        spaceOpts={}\r\n        threadOpts={}\r\n        agentProfile={\r\n            chatName: \"3Box\",\r\n            imageUrl: \"https://imgur.com/RXJO8FD\"\r\n        }\r\n    />\r\n);\r\n```\r\n\r\n\r\n#### Prop Types\r\n\r\n| Property | Type          | Default  | Required Case          | Description |\r\n| :-------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `spaceName`    | String        |    |  Always   | Likely your dApp name and / or chatbox category.  A single `spaceName` with different `threadName`s is common practice when building a dApp with multiple Chatbox threads. |\r\n| `threadName`    | String       |   | Always    | A name specific to this Chatbox. |\r\n| `box`    | Object         |   | A (and likely B)    | The `box` instance returned from running `await Box.openBox(address, web3)` somewhere in your dApp.|\r\n| `currentUserAddr`    | String (Ethereum Address)          |    | A & B | The current user's Ethereum address. Passing this will be used to check which messages belong to the current user and can be used for fetching their 3Box profile to render in the Chatbox input UI. |\r\n| `loginFunction`    | Function       |    | B    | A function from your dApp that handles web3 and 3Box login at the global dApp state. This callback will run when a user attempts to join the Chatbox but a `box` instance doesn't yet exist. Running this function should result in a box instance (from `const box = Box.openBox(address, web3)`) being passed as the `box` prop to this component.  |\r\n| `ethereum`    | Object        |  window.ethereum  | C    | The `ethereum` object from whichever web3 provider your dApp uses.  The `enable` method on this object will be used to get the current user's Ethereum address and that address will be used to `openBox` within the current Component context.|\r\n| `popupChat`    | Boolean       |  False   | Optional    | A boolean - `true` - to configure a pop up style chatbox with a button fixed to the bottom right of the window to pop open the chat UI. False will render the component in whichever container you have implemented. |\r\n| `agentProfile`    | Object       |  { chatName: 'Chatbox', imageUrl: null }   | Optional    | An object with the name of the chatbox which will appear in the `Join thread` step and in the header of the chat UI.  The default `imageUrl` is the provided chat icon. |\r\n| `spaceOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `threadOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `colorTheme`    | String       |  False  | Optional    | Pass an rgb or hex color string to match the color theme of your application |\r\n| `mute`    | Boolean       |  False  | Optional    | Pass false to turn off sound for incoming messages. |\r\n| `showEmoji`    | Boolean       |  False  | Optional    | Pass false to turn off the emoji pop up within the chat input UI. |\r\n| `currentUser3BoxProfile`    | Object       |   | Optional    | If the current user has already had their 3Box data fetched at the global dApp state, pass the object returned from `Box.getProfile(profileAddress)` to avoid an extra request.  This data will be rendered in the Chatbox input interface.|\r\n| `userProfileURL`    | Function       |  Defaults to returning user's 3Box profile URL  | Optional    | A function that returns a correctly formatted URL of a user's profile on the current platform.  The function will be passed an Ethereum address within the component, if needed.  A user will be redirected to the URL returned from this function when clicking on the name or Ethereum address associated with the message in the chatbox.|\r\n\r\n## License\r\n\r\nMIT\r\n","gitHead":"7f03dfd1bd8180602b4839fb144915d92658cb7c","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.16.1","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","3box-comments-react":"0.0.5-beta.1","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"^4.12.18","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.5-beta.2_1579025348492_0.3504002533160122","host":"s3://npm-registry-packages"}},"0.0.5-beta.3":{"name":"3box-chatbox-react","version":"0.0.5-beta.3","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.5-beta.3","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"efdaf3249df3270c9e110f8302e6c02e3e8e0373","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.5-beta.3.tgz","fileCount":55,"integrity":"sha512-/pQM9090dn/YKqKePR60Nb9L6LZnS34psUQkcZNLF85Exi0MXWjz3sJQTSlsPvoI4arf4RxHAA7OeN0oLCJMDA==","signatures":[{"sig":"MEUCIQCrXD19wf6sDgRgFbwQrXbfBaiTD3KWT9INwGohvGwltwIgVVYKV9CPBIEtmDarAEkJ0wu70Simt7LKrReVztJZtzg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":757880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHgYkCRA9TVsSAnZWagAAlcYP/3FHlRCdAZxi0w29V/XA\nMi3Ywcp0Usn2aw+PrjNMDpI+hJGZMLvbwSMUudN5UI4St4i2mujTtO2FaPxt\nHdBqxfYnjit6uxWJQsfqZzqYSzhGD8kyBh6OSzmaButF8yFBd/eeSBlyIHPS\nklChjvjjfSzDrFI8mQ8XsODnPyf5Z5eXPN8qESAFqiSwPG9R5Y1wMzfq6/4s\n9+Lh5UTda9KjvwCkmpZEvWqaTTCmQD6+RyFXlsczxVWZU8uHJ/oFb5+66qD0\nuB1PW34SlIaAPpNMwfr0QPgnOM3dTBcI0wHwKm8wcPahvepJXQQ4rqXmDbkS\ntZ9QJax+ZNAHbzqUx4A5vtS5lN9++wXVg9W0fJJbS/T5g98JDxSGe82VzoaD\nfBJgDcD+8eDJ5IV6UggY/LuOJsMzAQ9vpyL+xfX42P7RP28LAqUFV0bqZT2M\nAhtIimEKL7NKL8LckNr+CBgxwgA4nZ93CK5HIZEEBIb3S4OSVZgYvbnlxPu0\ngqlT0ONPbW5WlGRmT/LC4JUIdvx1nY73zX176E3ipbIn/c4a54v9fA7FJQWA\nx7F03M4U/V8Ku7Uzpwl8dlrU+afFs/dqzptSIq/A3t9//L4IMhVDuYNl3tBr\nOCMsDSfXq9Fv9D9fiJIImxrTBPcYpf9PCUI24Lnu8+GfNCeHDuvMs/QHQdwQ\n/3Xm\r\n=5Qqv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","readme":"[![Discord](https://img.shields.io/discord/484729862368526356.svg?style=for-the-badge)](https://discordapp.com/invite/Z3f3Cxy)\r\n[![npm](https://img.shields.io/npm/v/3box-chatbox-react.svg?style=for-the-badge)](https://www.npmjs.com/package/3box-chatbox-react)\r\n[![Twitter Follow](https://img.shields.io/twitter/follow/3boxdb.svg?style=for-the-badge&label=Twitter)](https://twitter.com/3boxdb)\r\n\r\n# 3Box Chatbox Plugin 💬\r\n\r\n`3box-chatbox-react` node package is a drop-in react component that provides Web3 developers with a readymade chat system for their Ethereum application. Easily add rich, decentralized social discourse to your dApp with one line of code. The 3Box Chatbox plugin is built using 3Box infrastructure, and handles all logic for creating a chatbox. *Read the docs on [docs.3box.io](https://docs.3box.io/build/plugins/chatbox)*.\r\n\r\n### Try the demo [here](https://3box.github.io/3box-chatbox/examples/dist/)\r\n![Example Screenshot](chatbox-example-screenshot.png)\r\n</br>\r\n\r\n## How it Works\r\n#### Architecture\r\nThe Chatbox plugin is built using a standard implementation of [Open Threads](https://docs.3box.io/build/web-apps/messaging/choose#open-threads) which are defined in the [3Box Threads API](https://docs.3box.io/api/messaging) and made available via the [`3Box.js SDK`](https://github.com/3box/3box-js). Chatbox messages are ephemeral and are persisted only as long as there is at least one user in the chatbox. The Chatbox plugin includes UI for inputting and displaying both an in-window and pop-up chat and all relevant logic. The component is configurable to various authentication patterns, and can handle both Web3/3Box logged-in & logged-out states. \r\n\r\n#### Authentication\r\nThe content of the configured chatbox cannot be read until a user has authenticated into their 3Box and joined the ephemeral (`ghost`-type) thread.  After authenticating, a user can post and receive messages from other users in *real-time*.\r\n</br>\r\n</br>\r\n\r\n## Getting Started\r\n1. Install the component\r\n2. Choose your authentication pattern\r\n3. Configure application settings\r\n4. Usage\r\n\r\n### 1. Install the component\r\n\r\n```shell\r\nnpm i -S 3box-chatbox-react\r\n```\r\n\r\n### 2. Choose your authentication pattern\r\nDepending on *when and how* your dApp handles authentication for web3 and 3Box, you will need to provide a different set of props to the component. Three acceptable authentication patterns and their respective props are discussed below in A-C:\r\n\r\n**A) Dapp handles web3 and 3Box logins, and they run *before* component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the `box` instance returned from `Box.openBox(ethAddr)` via 3Box.js should be passed to the `box` prop in the chatbox component. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages are their own.\r\n\r\n**B) Dapp handles web3 and 3Box logins, but they haven't run before component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the login logic implemented in the dapp should be passed to the Chatbox component as the `loginFunction` prop, which is run when a user attempts to post a message. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages belong to that user.\r\n\r\n**C) Dapp has no web3 and 3Box login logic.**\r\n\r\nDapp only integrates with the `3box-chatbox-react` component, but not `3Box.js SDK`. All web3 and 3Box login logic will be handled within the Chatbox component, though it's required for the `ethereum` object from your dapp's preferred web3 provider be passed to the `ethereum` prop in the component.\r\n\r\n#### Best practice\r\n\r\nFor the best UX, we recommend implementing one of the following authentication patterns: A; B; or B with A.\r\n\r\nEach of these patterns allow your application to make the `box` object available in global application state where it can be used by all instances of the Chatbox component regardless of which page the user is on. This global pattern removes the need for users to authenticate on each chatbox component, should you decide to have more than one, which would be the case in C.\r\n\r\n### 3. Configure application settings\r\n\r\n**First, choose a name for your application's 3Box space.**\r\n\r\nAlthough you are free to choose whichever name you'd like for your app's space, we recommend using the name of your app. If your application already has a 3Box space, you are welcome to use that same one for the chatbox.\r\n\r\n**Next, choose a naming convention for your application's threads.**\r\n\r\nThe Chatbox thread needs a name, and we recommend that your application creates `threadNames` according to a simple rule. We generally like using a natural identifier, such as community name, page URL, token ID, or other similar means.\r\n\r\n</br>\r\n</br>\r\n\r\n\r\n### 4. Usage\r\n\r\n#### Example\r\n\r\n```jsx\r\nimport ChatBox from '3box-chatbox-react';\r\n\r\nconst MyComponent = ({ handleLogin, box, ethereum, myAddress, currentUser3BoxProfile, adminEthAddr }) => (\r\n    <ChatBox \r\n        // required\r\n        spaceName=\"mySpaceName\"\r\n        threadName=\"myThreadName\"\r\n\r\n\r\n        // Required props for context A) & B)\r\n        box={box}\r\n        currentUserAddr={myAddress}\r\n\r\n        // Required prop for context B)\r\n        loginFunction={handleLogin}\r\n\r\n        // Required prop for context C)\r\n        ethereum={ethereum}\r\n\r\n        // optional\r\n        mute={false}\r\n        popupChat\r\n        showEmoji\r\n        colorTheme=\"#181F21\"\r\n        currentUser3BoxProfile={currentUser3BoxProfile}\r\n        userProfileURL={address => `https://mywebsite.com/user/${address}`}\r\n        spaceOpts={}\r\n        threadOpts={}\r\n        agentProfile={\r\n            chatName: \"3Box\",\r\n            imageUrl: \"https://imgur.com/RXJO8FD\"\r\n        }\r\n    />\r\n);\r\n```\r\n\r\n\r\n#### Prop Types\r\n\r\n| Property | Type          | Default  | Required Case          | Description |\r\n| :-------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `spaceName`    | String        |    |  Always   | Likely your dApp name and / or chatbox category.  A single `spaceName` with different `threadName`s is common practice when building a dApp with multiple Chatbox threads. |\r\n| `threadName`    | String       |   | Always    | A name specific to this Chatbox. |\r\n| `box`    | Object         |   | A (and likely B)    | The `box` instance returned from running `await Box.openBox(address, web3)` somewhere in your dApp.|\r\n| `currentUserAddr`    | String (Ethereum Address)          |    | A & B | The current user's Ethereum address. Passing this will be used to check which messages belong to the current user and can be used for fetching their 3Box profile to render in the Chatbox input UI. |\r\n| `loginFunction`    | Function       |    | B    | A function from your dApp that handles web3 and 3Box login at the global dApp state. This callback will run when a user attempts to join the Chatbox but a `box` instance doesn't yet exist. Running this function should result in a box instance (from `const box = Box.openBox(address, web3)`) being passed as the `box` prop to this component.  |\r\n| `ethereum`    | Object        |  window.ethereum  | C    | The `ethereum` object from whichever web3 provider your dApp uses.  The `enable` method on this object will be used to get the current user's Ethereum address and that address will be used to `openBox` within the current Component context.|\r\n| `popupChat`    | Boolean       |  False   | Optional    | A boolean - `true` - to configure a pop up style chatbox with a button fixed to the bottom right of the window to pop open the chat UI. False will render the component in whichever container you have implemented. |\r\n| `agentProfile`    | Object       |  { chatName: 'Chatbox', imageUrl: null }   | Optional    | An object with the name of the chatbox which will appear in the `Join thread` step and in the header of the chat UI.  The default `imageUrl` is the provided chat icon. |\r\n| `spaceOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `threadOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `colorTheme`    | String       |  False  | Optional    | Pass an rgb or hex color string to match the color theme of your application |\r\n| `mute`    | Boolean       |  False  | Optional    | Pass false to turn off sound for incoming messages. |\r\n| `showEmoji`    | Boolean       |  False  | Optional    | Pass false to turn off the emoji pop up within the chat input UI. |\r\n| `currentUser3BoxProfile`    | Object       |   | Optional    | If the current user has already had their 3Box data fetched at the global dApp state, pass the object returned from `Box.getProfile(profileAddress)` to avoid an extra request.  This data will be rendered in the Chatbox input interface.|\r\n| `userProfileURL`    | Function       |  Defaults to returning user's 3Box profile URL  | Optional    | A function that returns a correctly formatted URL of a user's profile on the current platform.  The function will be passed an Ethereum address within the component, if needed.  A user will be redirected to the URL returned from this function when clicking on the name or Ethereum address associated with the message in the chatbox.|\r\n\r\n## License\r\n\r\nMIT\r\n","gitHead":"7f03dfd1bd8180602b4839fb144915d92658cb7c","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.16.1","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","3box-comments-react":"0.0.5-beta.1","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"^4.12.18","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.5-beta.3_1579025956354_0.02073236757094188","host":"s3://npm-registry-packages"}},"0.0.5-beta.4":{"name":"3box-chatbox-react","version":"0.0.5-beta.4","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.5-beta.4","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"a07327aa3076f4bea1007b38c1b1761ad7e2d2cf","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.5-beta.4.tgz","fileCount":55,"integrity":"sha512-ulVxguU998W4/hPG6mgwm5fzea+OLv9EIgs9tFHls8eGeBWk5VyJ7zn6QbBWTdN9XuWSuv/2We9Lqbf0iI6omA==","signatures":[{"sig":"MEUCIQDX8it0ah0TR5kzf+NBHWLUNRDWUe0GRzIB4GMfZn3jBAIgehbVD7kfUC4/2UNFfjBKoqL2JhH2CmSrA5Cz8sfbWr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHgtWCRA9TVsSAnZWagAAWWoP/2QwzuiXBmNUwX/CGHlf\nrhdya5TKNai39w701k0C9Hx2eRcUBIWykON5GuzRzQdifKWpLV+21X94iXJm\nkc0Z9xu2GwqH4v2ig7aM2pFZg/xxx3W7St9mkea9rkKkbFcVnrCjSDVgS4Vj\nd68rW3iz7p075ofQ2BQKHyw3sLr49M07eltfgwTRmZBbnSpUcNwmP9WsvJrO\naOSRL2Rizdy00J59vtt7gws2K+1rqwJ1HbaSfF1qrRkiLaY67RtVZv67f1yL\nzLVZ4Yr1NldMBkdgNe0rQBmQLcOiQrv45N0c/VW5Yc1pPaIUGFtw0WbPqfHy\n2XOSoStCMep7nwFdYpFX4RdPaxwGTg2aXLibW+i8RZFFSQjgvkFWppqPWl+y\nDwq15Ya15MBKIY5jBoqJEi0NEYUweBV1K7E8+kzd0iYNm3nwYp2FfNTxx9eV\nKeBDzqT+y2uaEH1Q/1DaaV6oUH1e3DqpJrgQmoNmk5vpNgYGDWUNlwMN13tE\nLkrxjegicIDNUK/2sEaLCVLsGOGAObq31U+/GGgX+kPvgjnLEkrn/me/8khk\no/lcK9fPvP76t4Fn1IGWYsFMh4yzbtP6/V457R7TkvZrfE9UOPlkxxqWWXd2\nsohWeq2p8T/a/CJbMlulsxrnxHmO00KL5BA/gtSDC1lo8N+VZqPTJ5XwXs5i\n9/8f\r\n=d5cP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","readme":"[![Discord](https://img.shields.io/discord/484729862368526356.svg?style=for-the-badge)](https://discordapp.com/invite/Z3f3Cxy)\r\n[![npm](https://img.shields.io/npm/v/3box-chatbox-react.svg?style=for-the-badge)](https://www.npmjs.com/package/3box-chatbox-react)\r\n[![Twitter Follow](https://img.shields.io/twitter/follow/3boxdb.svg?style=for-the-badge&label=Twitter)](https://twitter.com/3boxdb)\r\n\r\n# 3Box Chatbox Plugin 💬\r\n\r\n`3box-chatbox-react` node package is a drop-in react component that provides Web3 developers with a readymade chat system for their Ethereum application. Easily add rich, decentralized social discourse to your dApp with one line of code. The 3Box Chatbox plugin is built using 3Box infrastructure, and handles all logic for creating a chatbox. *Read the docs on [docs.3box.io](https://docs.3box.io/build/plugins/chatbox)*.\r\n\r\n### Try the demo [here](https://3box.github.io/3box-chatbox/examples/dist/)\r\n![Example Screenshot](chatbox-example-screenshot.png)\r\n</br>\r\n\r\n## How it Works\r\n#### Architecture\r\nThe Chatbox plugin is built using a standard implementation of [Open Threads](https://docs.3box.io/build/web-apps/messaging/choose#open-threads) which are defined in the [3Box Threads API](https://docs.3box.io/api/messaging) and made available via the [`3Box.js SDK`](https://github.com/3box/3box-js). Chatbox messages are ephemeral and are persisted only as long as there is at least one user in the chatbox. The Chatbox plugin includes UI for inputting and displaying both an in-window and pop-up chat and all relevant logic. The component is configurable to various authentication patterns, and can handle both Web3/3Box logged-in & logged-out states. \r\n\r\n#### Authentication\r\nThe content of the configured chatbox cannot be read until a user has authenticated into their 3Box and joined the ephemeral (`ghost`-type) thread.  After authenticating, a user can post and receive messages from other users in *real-time*.\r\n</br>\r\n</br>\r\n\r\n## Getting Started\r\n1. Install the component\r\n2. Choose your authentication pattern\r\n3. Configure application settings\r\n4. Usage\r\n\r\n### 1. Install the component\r\n\r\n```shell\r\nnpm i -S 3box-chatbox-react\r\n```\r\n\r\n### 2. Choose your authentication pattern\r\nDepending on *when and how* your dApp handles authentication for web3 and 3Box, you will need to provide a different set of props to the component. Three acceptable authentication patterns and their respective props are discussed below in A-C:\r\n\r\n**A) Dapp handles web3 and 3Box logins, and they run *before* component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the `box` instance returned from `Box.openBox(ethAddr)` via 3Box.js should be passed to the `box` prop in the chatbox component. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages are their own.\r\n\r\n**B) Dapp handles web3 and 3Box logins, but they haven't run before component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the login logic implemented in the dapp should be passed to the Chatbox component as the `loginFunction` prop, which is run when a user attempts to post a message. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages belong to that user.\r\n\r\n**C) Dapp has no web3 and 3Box login logic.**\r\n\r\nDapp only integrates with the `3box-chatbox-react` component, but not `3Box.js SDK`. All web3 and 3Box login logic will be handled within the Chatbox component, though it's required for the `ethereum` object from your dapp's preferred web3 provider be passed to the `ethereum` prop in the component.\r\n\r\n#### Best practice\r\n\r\nFor the best UX, we recommend implementing one of the following authentication patterns: A; B; or B with A.\r\n\r\nEach of these patterns allow your application to make the `box` object available in global application state where it can be used by all instances of the Chatbox component regardless of which page the user is on. This global pattern removes the need for users to authenticate on each chatbox component, should you decide to have more than one, which would be the case in C.\r\n\r\n### 3. Configure application settings\r\n\r\n**First, choose a name for your application's 3Box space.**\r\n\r\nAlthough you are free to choose whichever name you'd like for your app's space, we recommend using the name of your app. If your application already has a 3Box space, you are welcome to use that same one for the chatbox.\r\n\r\n**Next, choose a naming convention for your application's threads.**\r\n\r\nThe Chatbox thread needs a name, and we recommend that your application creates `threadNames` according to a simple rule. We generally like using a natural identifier, such as community name, page URL, token ID, or other similar means.\r\n\r\n</br>\r\n</br>\r\n\r\n\r\n### 4. Usage\r\n\r\n#### Example\r\n\r\n```jsx\r\nimport ChatBox from '3box-chatbox-react';\r\n\r\nconst MyComponent = ({ handleLogin, box, ethereum, myAddress, currentUser3BoxProfile, adminEthAddr }) => (\r\n    <ChatBox \r\n        // required\r\n        spaceName=\"mySpaceName\"\r\n        threadName=\"myThreadName\"\r\n\r\n\r\n        // Required props for context A) & B)\r\n        box={box}\r\n        currentUserAddr={myAddress}\r\n\r\n        // Required prop for context B)\r\n        loginFunction={handleLogin}\r\n\r\n        // Required prop for context C)\r\n        ethereum={ethereum}\r\n\r\n        // optional\r\n        mute={false}\r\n        popupChat\r\n        showEmoji\r\n        colorTheme=\"#181F21\"\r\n        currentUser3BoxProfile={currentUser3BoxProfile}\r\n        userProfileURL={address => `https://mywebsite.com/user/${address}`}\r\n        spaceOpts={}\r\n        threadOpts={}\r\n        agentProfile={\r\n            chatName: \"3Box\",\r\n            imageUrl: \"https://imgur.com/RXJO8FD\"\r\n        }\r\n        openOnMount={false}\r\n    />\r\n);\r\n```\r\n\r\n\r\n#### Prop Types\r\n\r\n| Property | Type          | Default  | Required Case          | Description |\r\n| :-------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `spaceName`    | String        |    |  Always   | Likely your dApp name and / or chatbox category.  A single `spaceName` with different `threadName`s is common practice when building a dApp with multiple Chatbox threads. |\r\n| `threadName`    | String       |   | Always    | A name specific to this Chatbox. |\r\n| `box`    | Object         |   | A (and likely B)    | The `box` instance returned from running `await Box.openBox(address, web3)` somewhere in your dApp.|\r\n| `currentUserAddr`    | String (Ethereum Address)          |    | A & B | The current user's Ethereum address. Passing this will be used to check which messages belong to the current user and can be used for fetching their 3Box profile to render in the Chatbox input UI. |\r\n| `loginFunction`    | Function       |    | B    | A function from your dApp that handles web3 and 3Box login at the global dApp state. This callback will run when a user attempts to join the Chatbox but a `box` instance doesn't yet exist. Running this function should result in a box instance (from `const box = Box.openBox(address, web3)`) being passed as the `box` prop to this component.  |\r\n| `ethereum`    | Object        |  window.ethereum  | C    | The `ethereum` object from whichever web3 provider your dApp uses.  The `enable` method on this object will be used to get the current user's Ethereum address and that address will be used to `openBox` within the current Component context.|\r\n| `popupChat`    | Boolean       |  False   | Optional    | A boolean - `true` - to configure a pop up style chatbox with a button fixed to the bottom right of the window to pop open the chat UI. False will render the component in whichever container you have implemented. |\r\n| `agentProfile`    | Object       |  { chatName: 'Chatbox', imageUrl: null }   | Optional    | An object with the name of the chatbox which will appear in the `Join thread` step and in the header of the chat UI.  The default `imageUrl` is the provided chat icon. |\r\n| `spaceOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `threadOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `colorTheme`    | String       |  False  | Optional    | Pass an rgb or hex color string to match the color theme of your application |\r\n| `mute`    | Boolean       |  False  | Optional    | Pass false to turn off sound for incoming messages. |\r\n| `showEmoji`    | Boolean       |  False  | Optional    | Pass false to turn off the emoji pop up within the chat input UI. |\r\n| `currentUser3BoxProfile`    | Object       |   | Optional    | If the current user has already had their 3Box data fetched at the global dApp state, pass the object returned from `Box.getProfile(profileAddress)` to avoid an extra request.  This data will be rendered in the Chatbox input interface.|\r\n| `userProfileURL`    | Function       |  Defaults to returning user's 3Box profile URL  | Optional    | A function that returns a correctly formatted URL of a user's profile on the current platform.  The function will be passed an Ethereum address within the component, if needed.  A user will be redirected to the URL returned from this function when clicking on the name or Ethereum address associated with the message in the chatbox.|\r\n| `openOnMount`    | Boolean       |  False  | Optional    | Set whether a Popup style Chatbox is open on component mount. |\r\n\r\n## License\r\n\r\nMIT\r\n","gitHead":"45b4fe3a3a048064a508bb39aeafe61357adb218","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.16.1","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"^4.12.18","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.5-beta.4_1579027286328_0.8591833966849358","host":"s3://npm-registry-packages"}},"0.0.5":{"name":"3box-chatbox-react","version":"0.0.5","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.0.5","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"8d3f11374013719d6e6d59fde36d57e167980ed9","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.0.5.tgz","fileCount":55,"integrity":"sha512-aj7LV6iOc+tzPOQHXomAvi1/45ZbgxFKiBmEHmGXYY+Vq28ongARWdBCW5sIlKsyjLxHW6t2CeT5Da9n2sAysg==","signatures":[{"sig":"MEUCICzT3Viad6sjI4yoZtX+WIJB78DM400s8ueitCH7UsY9AiEAm2DrGvxefdNIZEkhtwUvIRUTkb0jGzzuEgX+XZ32RCo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":758630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHg4jCRA9TVsSAnZWagAAvpEP/j5/8t785y0m2VI7IZ/g\nUmcOLGQW1uK3Qfb+7YVkAHsTS+AqD+6ECiMrOfH7HHqabMjHBfMp1ZukCE1t\nfk3iSfOj87fpeUIPqNMJiVWH9gvrKlpp8GqBvvHBxG6va77aMZGKRh4E3jEG\npSxe4IzM6QaeL6opNYDB7hyWreoTBofxwF+bs0BvH/qbwkC01O89VJ8FtQ4t\n/jGO0LOip6HK8HJNMJgXCd4kFGTRIuM79zrlnkGFuKBQN4L+ZQaIZ51Ah5+G\nT6gzIrrMdHHBy/R4ysefcTPT0gJdb+bO1yCihBNjCz4dffC6Vs/atO7nun+Q\n+1pdKxU0yb+tISUXlEPJhKa+8HHvyHALsvglfaGz2NZsk5LjVTjgyZaXvazj\nrdEfjgoLmJJ7fS3Py3uD+pTR/T6lyJ2DXmIW0aIZOyYy/ytjf37VzQ4IHIsz\n0Hd2awbfNNAHk9UnWqqK+QNKA6XTo7xyvYrffO1J6ZSiAS7IIjhk1M2Qnevq\nWyWIVJvpE8qgN8rRUvyWOktJyAdUBGgUFjbQ8HZLwM+RoSUvvpAqbNKM77RN\nA1OzsItGkvhCWI0rbmCvADdEYvAJQQE+6KxITzf5Qj2sJyuGiECXN1E/V5+m\nYxnPu4FZIir20IR5TYUbBteri//418YsZDKXRJj+eSHwTKbVFyAQ+p2y2bVY\nCaCG\r\n=zWXw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","gitHead":"45b4fe3a3a048064a508bb39aeafe61357adb218","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"deprecated":"Deprecated in favor of Ceramic: https://developers.ceramic.network","_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"8.12.0","dependencies":{"3box":"^1.16.1","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"^4.12.18","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.0.5_1579028002579_0.7599439792051528","host":"s3://npm-registry-packages"}},"0.1.0":{"name":"3box-chatbox-react","version":"0.1.0","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.1.0","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"a6778e496c0c547fc26a3196c90cf0a1e5002077","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.1.0.tgz","fileCount":55,"integrity":"sha512-ki9/GaoO6/JPe9LPHGp5oFMMU8mUUxXwncxYsMGm9piMrbISTJs45abZ4oMz6Tan+2Fh84QrWeaG7lPYSe/E4w==","signatures":[{"sig":"MEQCIGLc9UsKlbEZe73j2Ca/IHGEm8vT/JqAGj41/sGuKBfgAiBRf+Yi8CNHA3j3MJruB1Y16keqkwMHHrDjTZ2cHPV0jg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOw70CRA9TVsSAnZWagAAkSQQAItE334sgMo4a1tOooj4\nooj4YKsZyeHa+Kog/b4ucQVhytIObH01J0Fp1daSalhO8cYHCuxC5BEKudqI\noBQUozolsaoWDVECnc97nflsMGUvaaqFF1tvvDvArLEZ5xr4mJXUTCQsM7Gm\njDgv9DtR1Uft0FbiwPqag+W7KyRjx9BVCJJiV957O/aKcMA2tXth2xj1et/c\n/yv22SIrRLjRjiRcZFmqpHzw58ERB//knOiqOQXgHe3Lk+BMrJ2xwo3pjI4Y\nBOyHCDEoKjoEvzJKMIZ32uVMEF8PHplNZmrhMiPNyKhFkuH92vdOhMGZOPVQ\nACdTw+ThftLEULSvEeHiulx3btv4eLDLUFqiGtWDe8Wl0R7OWFtBxCXhv5JP\n+LQPlkoVFxlO6jvVBHTArhEP0U6sdxvgiUeor1UuDaxCDHdtrcCGMeHlYrTC\nvOosGVW5BHGAQolKGkOg+OM/MGv2b4Wt6KU1AjW6+OmUfCzAqJxWfGmDVzMu\nzeobiogRPffpNTnhhLUWxVA4hxGosLqLRrH+wKGRGMXwaCDknxa3Z+Q17A1r\npWX6nE+VWUh+1AAq2csags77qQ/GwQG+bNwwf1Ahn1uM+pciruKgzQWCaGL+\n39yfzN9srUGa0GgdxQralTStWVuwrao1rGNEoMF+rybQRgi+Q+BTDVCO8Md0\nPm1V\r\n=fem8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","gitHead":"4cef5497fa1ad83d6dcf7add02530ec463af1d50","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"deprecated":"Deprecated in favor of Ceramic: https://developers.ceramic.network","_npmVersion":"6.13.4","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"12.14.1","dependencies":{"3box":"^1.16.1","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"^4.12.18","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.1.0_1580928755546_0.7435301033239243","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"3box-chatbox-react","version":"0.1.1","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.1.1","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"0fe28107e5e8ffc767276c09be016cd159987bce","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.1.1.tgz","fileCount":58,"integrity":"sha512-b+ZfQNx91dSXY+0iUE7IeJcMvmz0ODTKrAA6+iNoUsLIB2WejAbxtyHF0Q8hwH6T3cU8/lcCPzFMg25132g1eQ==","signatures":[{"sig":"MEYCIQDhXpBzLqtaRM1JU2CBV2UhM0WBH4XG4I+UzhemYJw1DwIhAMaLs9cPuBRD8frr0pQJWvBKM3B0geuoZhIWZ8KXNCvA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":720584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOyDqCRA9TVsSAnZWagAA4H8P/2QvXKrkJ1F1D/owpZN9\nlIXbj85UnwWsMqvreypo2EHuzcRSKckkJQ5oyzhprULg4Jbf00UnmN3gr0kj\n0rZp8Et94CVIIs8dXSwMBGkNHbOV8dZfiuYMFZRRUdnseduYBl+IlWCNEHAm\n2qqaE/r1Bk47agGkwrLOtH+aj2I4wMwrv9MZvmLOMiNWuo9zxkyoLGqb+j/s\n22AltIjc2i8l5mal52I5NHw5lyPuEk/SrKWTb0nypeS70wkrVN4dJdtpBrup\n8tyl/THx8x60MxqO0H0uLoWwD6IQfNuWe9eg/JKkLM4DV16jUK7MaW+X6Qdt\nsJzT3lLJC7w3MhiKZo+CAudi/UNKZYOSt4J1n3OCgL41w1HLO49YjCwB0GuD\nmk42wpn3b4YxXgDj4rqzP5AohwQsp5mfs6YE8VCt+Emlg0MCCUc4HXAw/34T\nbsVgBBKMmJ5FarbW08Xode6sHFG1cKfn3J5D9Cwl/w1ZiKEkUrJ1FriO6lCm\nDD3wGR3I/VLkkQGRiGENsCMcSuqHbxRU7pfMVLNw3yRB5WY0xVDbF40p3muG\nkVB9vTvHDC4p6zI5G6Jv3GKw2BHY5dqwW3w/QA/dvqpUEaqd72l8U1GqNYZ9\nWATOOplsZABFU4T2KL1Ui9Bq6TmClxMJqSpqb22GFZLNAuQLuTQQqNI+L7Z7\nvGk0\r\n=inot\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","gitHead":"4cef5497fa1ad83d6dcf7add02530ec463af1d50","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"deprecated":"Deprecated in favor of Ceramic: https://developers.ceramic.network","_npmVersion":"6.13.4","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"12.14.1","dependencies":{"3box":"^1.16.1","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"^4.12.18","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.1.1_1580933353687_0.18774424468236917","host":"s3://npm-registry-packages"}},"0.1.2":{"name":"3box-chatbox-react","version":"0.1.2","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.1.2","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"d84e862ded181ac34a86ed4d9db7f7d6b434a0ab","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.1.2.tgz","fileCount":58,"integrity":"sha512-Up843b3gFBpWqS2a5xSp83JxZO1fpoa7oWyINqZrV0t8kkldc1iGLlCjzgIPI8UdgGvLH8Ns8vhA7W3PczKhXg==","signatures":[{"sig":"MEYCIQD9Se0HhnkIenPfgKks6Z/UVspGjq3LzATq2TLqKlvGoAIhAKDQrCMM1eTgBg66PbfnUrfuvbNsCJ5+8YpbkFFflEOB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":720663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOyaCCRA9TVsSAnZWagAAuhYQAIdJ66UKzKoH9PCuXpuq\n7ItGx+gGpA7ZQt6o860RyiIvazEVh27sllPVEb2uEIbyEf2yDF/aj3I1I80C\noFHyTuN+UkEqeicl24x4DLXSCkDzz2z9AySwcRj7srqWPcOxtHvn0iWrLJ78\nOJDT4u1an0NhrwEBnXebPF57NNVl42q406IJG9I9AxPj3YFXMDMJpReOH/T9\n7vmJfHFLdbAduF7IRnCrP9XRlXpKErRsjBHXdY0IZFBLiHhxTyq7pIG6ihyj\neEa/CqCYFtECLd0HqriUu52eld7Qaf8waDduT7DJmNinhyXAAk9os6gvZzBq\nkQ316A0fa3gHL9yb4N3L1nNUL2yCi5wm65LVgodp7v55piGN3HlU2TOeqXms\nxcfhIsOPWKUfbA4rszeKz9teSoKij8WTTXQmm/RFX2PCEfI5F2tYX8OfeLgQ\nk2vrCjt4PKr9Khjuk3yKLSyd9XjOn//fVQlbr6vMp2eQNQEmftNg1Omsh5pq\nzG/0infP5R0WZkWFDBPL3d2Vh3l+pW7ZeiWlyzlhaFFZt0KEaAcpYQdxf0sV\nqJvXAGRdt2w4mmGEZnYMovn9L7uH4Boshf9Yd0dHilaD6pT/UtCXszZgTjFg\n2dmChj0126ML5WI/7TkJ51x/dsP9Wdgsdd9H57C+jG1O7XQkGBowFWc+ChDn\n9viv\r\n=3mpx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","gitHead":"4cef5497fa1ad83d6dcf7add02530ec463af1d50","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"deprecated":"Deprecated in favor of Ceramic: https://developers.ceramic.network","_npmVersion":"6.13.4","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"12.14.1","dependencies":{"3box":"^1.16.1","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"^4.12.18","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.1.2_1580934785397_0.750285495151179","host":"s3://npm-registry-packages"}},"0.1.3":{"name":"3box-chatbox-react","version":"0.1.3","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.1.3","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"d990db33e70cbeaf37e3d5aad6b8ca347882ad21","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.1.3.tgz","fileCount":58,"integrity":"sha512-hAw7a3dOXf1EnunEYgVGuVXJS05mPXlaZvhRJFdYSgu5yy4IvyLkjZxDqKN27/cOu3znH5JDDlu2l70q1b31ow==","signatures":[{"sig":"MEYCIQCIVFlr6hFhUUU+KTJViBtqJhkSbKdcwuQRIeQGAtXUnwIhAOGMZJEc/Ia1WuQ1TRnVy4keN86EP3CyHssZfq2j4/J1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOy5/CRA9TVsSAnZWagAAkhkP/04cnEosMIWEg94wRHbj\ncG6fo2QU7ZTuR9we5vHKF+D4nI6nbL1SSmfAsHxmM+yr/iHZrjcgQxzd9bX3\n2Z7oAx+Q4a+8ew62vIKjjzN5l2H0gEtbAixB/8GY+XOFq/87NVwL/RFpw9Xz\n0EUnVDBN8Ex6TkTenxXA7BXe1PpBWk0stMoN1aR2RnXnIAeHJuhMU9wrLJ7v\nmI1npFesEzAze3QrpC6ovy/mhwfDA4bjdawIV0WhXzYh3qTpkuZ30nc/dhN9\nUQ9ur694VksvcuvIQpaknIuGnCbuaGkDI8uBNOZgbnAFQ3v6ly68u6iLFtlO\ninJuAwNmDdrkQ3VrZwA5tkNHPXT8SCKvQwkDC26LqVXKZsw32m+QyUOzLR+1\nJH0ehNhrNmQzsr2MzJs8wreCum1NQH7TB5fxPIAXlY0o2lgmUXHtYGOa07TU\nfg1uq6AbKns4Wz2U1snU8vj+AmbIr31B0KOLuZAzg9pkvROxGu3ko6V5gMjB\nwhHXsaQrg3P76hvu4g0Pn46VlAqnC+OtgJ3r/VE78TJzSh6+MOt97z9kIsZN\nq5Qn9Jw/mn/TlSnQOHPQJ4tCf5VUmn2qFyJ6HIS4tdefqeZMBo1LYxzalQwl\nkMq2Fr5d4qn0xTWInTg9PgPuJKQyx9/ZXv01jksAppi7wFV3+/h2uK8pVnrO\nrTO3\r\n=1buU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","gitHead":"1c452b3dbcae157476be44dd76fb073b6ed0a7f3","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"deprecated":"Deprecated in favor of Ceramic: https://developers.ceramic.network","_npmVersion":"6.13.4","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"12.14.1","dependencies":{"3box":"^1.16.1","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"^4.12.18","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.1.3_1580936830892_0.08190198367923762","host":"s3://npm-registry-packages"}},"0.1.4":{"name":"3box-chatbox-react","version":"0.1.4","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.1.4","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"c2b34191b2bf01e1e823b0b5c1d8fcf5f5da565f","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.1.4.tgz","fileCount":58,"integrity":"sha512-QS2cRq/Bctl1biZMhIJVWfD4KNZZbQYbFf1IJaFDhL32yWG8QYBsvYO6/8MiZ4QdiYW+SjzCPcFVurUlyjw2+Q==","signatures":[{"sig":"MEQCIE4270qh0KlA/GhE83fxopISYN67IxoSmGE/uyO4ubx1AiAGLW6BYW+VLap4MbO5MrFLpSqMksXFMMBiZgfNbNzBGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOzkcCRA9TVsSAnZWagAAiOwP/3TZsXjDtHhJwoFMO84k\nCI3zRAz93jE+C2QIChgy/dNwdsBjC+OkK+WkWpKW3kQUAY2dZF7j8Sb/9tMs\n2Da5ZdfkQPv1TPNZ12+wNNfDkyHExhJsI6QM8jYm4dJvtSUDdGWsXsxpz8VT\n44HLBcimfYHCJ9MK8T+McWKzp9gXBsJkxGHHkwD94zIUfIsZF1bb1L0HIcNG\nCTYbSH/Efl8I6DvqpST/xDqKI96FKf8gvEW6Q2XuSaN44JpTqdp3kHE00mo0\nMUUcW1031gJ9wpzZRqofJ5IMOiCcIvedKp6lML6oOjujcNWeI1yiYog1BrTx\nxReFb+PDNSJ/gcMRDEjU8IcFpg/V/rTXbuIFWoBvUI9xTHulO8zOE/OB5Ok4\nYGmLN/qW4BHe3/CW+j1ADf1gdc5ElGzjrgLaCt07pXfqdyYEAk3R6bx83hQf\nKRjmOWlWem/Cz3eCB6hhck+vZ/H1qbS08h/vYCQCiF5CRSP4Z5LUesmwfBrV\nSPT/pwtO+DNkXB7FD8kVHzlffaS1DZRojRVMV8hNdKoFJv1Fd8p0RIfmL/aG\n9DCSpEketuI6PkbZ6AAXfdBWKH/s6rotpLyTNiWdmfxEySjyQlCKggrBoTB0\nRIcdU9zBXTFza782Ow2vw9Dy/llJfi799QN39v5eS9I+t9iDghskwKRrOWim\n4OF8\r\n=eih+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","gitHead":"c9d0187de08bf2ca3c15510639cd0afeea563870","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"deprecated":"Deprecated in favor of Ceramic: https://developers.ceramic.network","_npmVersion":"6.13.4","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"12.14.1","dependencies":{"3box":"^1.16.1","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"^4.12.18","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.1.4_1580939547971_0.05019305199960211","host":"s3://npm-registry-packages"}},"0.1.5":{"name":"3box-chatbox-react","version":"0.1.5","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.1.5","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"261d3b96ece821020df08f89f5e46d70a43321f3","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.1.5.tgz","fileCount":58,"integrity":"sha512-k9UEu9Qsdwe653dw3nwzjPL8hheBHrYcBykGjbniAhMuHODWfJg1X6IZlQHdbJjA2FNxHiWZ9/M0l2QVkdXotw==","signatures":[{"sig":"MEYCIQCKHRFrQD+2SgTwNbR7kgxViXIOyQx/7zYoHobwA9wpNQIhAKh2VYitkTxrvYl6ZxWYBSfbGcUD/RVK5TuBmhuNB4BJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePDeICRA9TVsSAnZWagAAxxIQAJoXJRCzlIzIg8AdXtPN\nUOSLc2C26FfNz9QA1GfjQuOkEhTTkd4VGVB5IuOckOUHAMOCyxAhpDwnJ72Z\nw+RRUDghqcdGbCcVG2dszVzC9cK52DzPuqvFNSOw7IvAwWYQ7Fn27541hj40\ntn3/Jk23AyBiSh1MxRss7QUfzoIoFyUQZD6dgLsPgWp9y7yh8Gvj4xg602Sd\nTvttS3ee9gp6uhpLgMoyQzigzqdQ5+mDC5P4/X95d0GS/UvtVBc6E9FIx9+h\nvvkx5QFSJfRFPV5iTJa/tKLH+341a8lMJDkN3okfMzKXUwvWVlCw7crYO3IA\nEzN2ELWVQKV2dgSSvkJjOPp6UOwMUVwihQypN9/1T/6vck6X0Al37BZu3Cid\nYh2g6AXtBvJJcoKaQDmpDsF9l1rjdZaYcww0z69anIeWMPn3hGBF3bH6w9cj\noAuwrKWc8JJL1x1wblM19C++TdoZQ+64aLgD4maEYEvbOBhvl2QERqP7tXTW\nSbZ+GYNDy2Jqf61o+ULpJtYgm73s1TclZqTzRKxKSddgsGA/JswNjMQh3+Dr\ne50CtYCGAUcToidXCvwD1tIIc5m18JnuNnjYLSkqdDo4BfkBuwl3So/rPqSC\n6CEJRDE8QiLFnI0Jxnp7PcSykTeROzflIOEIxFfZNG2V8/7YmO6Xonp4I/AN\nZVb+\r\n=hEzP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","gitHead":"7bfa6df4e90d07fae9536399235c6e83573ba523","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"deprecated":"Deprecated in favor of Ceramic: https://developers.ceramic.network","_npmVersion":"6.13.4","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"12.14.1","dependencies":{"3box":"^1.16.1","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"^4.12.18","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.1.5_1581004680189_0.9389802604412751","host":"s3://npm-registry-packages"}},"0.1.6-beta.0":{"name":"3box-chatbox-react","version":"0.1.6-beta.0","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.1.6-beta.0","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"a45c6779afa7c3b28fc7332db81fd19948373de3","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.1.6-beta.0.tgz","fileCount":58,"integrity":"sha512-cbQ/WIG7I4rR3dfF7PU3mHccfO57as+tkVS9NzVc629U9XLOyqMwilWRIwj692EAnK7WuSRFaujso+KdCOQz7Q==","signatures":[{"sig":"MEUCIQDovENhs0KAInkRw7bGoQz3JkY8gPiEUFAttIx8462nHAIgS5B6JyXG0H9h3Kf3ouJnz9YF8fCbZCSBYKBU2PadGEg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRWG/CRA9TVsSAnZWagAAJOAQAJFYuYi4C0eSYtvZzC/l\n80UAMtkCbVbEK+u7twWnd3iQbCZoOTAwNlZoM0e2ZCpJ6GYKAkuHZfsX/nFD\ndxeOd5m/rKaTuQ9pb7y/g9dY12b9U/K8j7qPxiEh0BQR2k/DqIApqN5kd0//\naQhqSKzMarJnxsXEpmuox6aRCv12OGVQ5iJUi9mlhOFcUfrJqPRDGCHpl1xc\nknUEiZMeJjHw6XVNxZMSKVz5eDR5Ib0G92AY4eHNmQLDNG5/4wqCr4lMLAzg\nPYE7OUUT6/ZtJQ2aOQwH2MRdApJrTWtHYZhrMbulh4c5sY1H/lSbuF+HNFwD\nwL4OSN/9FBZ7FwtZ4Otc8Ibte+h2lihgg1iOovYoFjmlV8H9qtSnrUpgkUyG\nZU91Cnd0oFoTfBbvojqoJygKY27Vb+/pReZludecseK0S1nMemLpj1KOkjaq\nP/iHU8WHkx9mOjpacViQ5pV8dgtvcrYOYwayPX5OnpBX0vqgL54TIOQioqO/\ncaJOjLYO+JWCEai8p8oBHFwDBNEtmArR47pkJckG6aOL68AEZHdP+EYZ+p2Q\n3v4a0srkOxHeeomR48SmfZwm3GXxZ/fapybY93PV5Dcq6PJCGKAYm9uY83+/\nbfTFsixsvLn2TeXtFV1PGukj9YO60XyZnjQ14UVFQxa2OADjY/3xpmke6nnh\n2C5h\r\n=huQP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","readme":"[![Discord](https://img.shields.io/discord/484729862368526356.svg?style=for-the-badge)](https://discordapp.com/invite/Z3f3Cxy)\r\n[![npm](https://img.shields.io/npm/v/3box-chatbox-react.svg?style=for-the-badge)](https://www.npmjs.com/package/3box-chatbox-react)\r\n[![Twitter Follow](https://img.shields.io/twitter/follow/3boxdb.svg?style=for-the-badge&label=Twitter)](https://twitter.com/3boxdb)\r\n\r\n# 3Box Chatbox Plugin 💬\r\n\r\n`3box-chatbox-react` node package is a drop-in react component that provides Web3 developers with a readymade chat system for their Ethereum application. Easily add rich, decentralized social discourse to your dApp with one line of code. The 3Box Chatbox plugin is built using 3Box infrastructure, and handles all logic for creating a chatbox. Starting with v0.1.0, Chatbox supports likes for every message. *Read the docs on [docs.3box.io](https://docs.3box.io/build/plugins/chatbox)*.\r\n\r\n### Try the demo [here](https://3box.github.io/3box-chatbox-react/examples/dist/)\r\n![Example Screenshot](chatbox-example-screenshot.png)\r\n</br>\r\n\r\n## How it Works\r\n#### Architecture\r\nThe Chatbox plugin is built using a standard implementation of [Open Threads](https://docs.3box.io/build/web-apps/messaging/choose#open-threads) which are defined in the [3Box Threads API](https://docs.3box.io/api/messaging) and made available via the [`3Box.js SDK`](https://github.com/3box/3box-js). Chatbox messages are ephemeral and are persisted only as long as there is at least one user in the chatbox. The Chatbox plugin includes UI for inputting and displaying both an in-window and pop-up chat and all relevant logic. The component is configurable to various authentication patterns, and can handle both Web3/3Box logged-in & logged-out states. \r\n\r\n#### Authentication\r\nStarting with version 0.0.5, the content of the configured chatbox can be read right on component mount.  Authentication into the space provided is handled automatically when the user decides to post to the chatbox.\r\n</br>\r\n</br>\r\n\r\n## Getting Started\r\n1. Install the component\r\n2. Choose your authentication pattern\r\n3. Configure application settings\r\n4. Usage\r\n\r\n### 1. Install the component\r\n\r\n```shell\r\nnpm i -S 3box-chatbox-react\r\n```\r\n\r\n### 2. Choose your authentication pattern\r\nDepending on *when and how* your dApp handles authentication for web3 and 3Box, you will need to provide a different set of props to the component. Three acceptable authentication patterns and their respective props are discussed below in A-C:\r\n\r\n**A) Dapp handles web3 and 3Box logins, and they run *before* component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the `box` instance returned from `Box.openBox(ethAddr)` via 3Box.js should be passed to the `box` prop in the chatbox component. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages are their own.\r\n\r\n**B) Dapp handles web3 and 3Box logins, but they haven't run before component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the login logic implemented in the dapp should be passed to the Chatbox component as the `loginFunction` prop, which is run when a user attempts to post a message. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages belong to that user.\r\n\r\n**C) Dapp has no web3 and 3Box login logic.**\r\n\r\nDapp only integrates with the `3box-chatbox-react` component, but not `3Box.js SDK`. All web3 and 3Box login logic will be handled within the Chatbox component, though it's required for the `ethereum` object from your dapp's preferred web3 provider be passed to the `ethereum` prop in the component.\r\n\r\n#### Best practice\r\n\r\nFor the best UX, we recommend implementing one of the following authentication patterns: A; B; or B with A.\r\n\r\nEach of these patterns allow your application to make the `box` object available in global application state where it can be used by all instances of the Chatbox component regardless of which page the user is on. This global pattern removes the need for users to authenticate on each chatbox component, should you decide to have more than one, which would be the case in C.\r\n\r\n### 3. Configure application settings\r\n\r\n**First, choose a name for your application's 3Box space.**\r\n\r\nAlthough you are free to choose whichever name you'd like for your app's space, we recommend using the name of your app. If your application already has a 3Box space, you are welcome to use that same one for the chatbox.\r\n\r\n**Next, choose a naming convention for your application's threads.**\r\n\r\nThe Chatbox thread needs a name, and we recommend that your application creates `threadNames` according to a simple rule. We generally like using a natural identifier, such as community name, page URL, token ID, or other similar means.\r\n\r\n</br>\r\n</br>\r\n\r\n\r\n### 4. Usage\r\n\r\n#### Example\r\n\r\n```jsx\r\nimport ChatBox from '3box-chatbox-react';\r\n\r\nconst MyComponent = ({ handleLogin, box, ethereum, myAddress, currentUser3BoxProfile, adminEthAddr }) => (\r\n    <ChatBox \r\n        // required\r\n        spaceName=\"mySpaceName\"\r\n        threadName=\"myThreadName\"\r\n\r\n\r\n        // Required props for context A) & B)\r\n        box={box}\r\n        currentUserAddr={myAddress}\r\n\r\n        // Required prop for context B)\r\n        loginFunction={handleLogin}\r\n\r\n        // Required prop for context C)\r\n        ethereum={ethereum}\r\n\r\n        // optional\r\n        mute={false}\r\n        popupChat\r\n        showEmoji\r\n        colorTheme=\"#181F21\"\r\n        currentUser3BoxProfile={currentUser3BoxProfile}\r\n        userProfileURL={address => `https://mywebsite.com/user/${address}`}\r\n        spaceOpts={}\r\n        threadOpts={}\r\n        agentProfile={\r\n            chatName: \"3Box\",\r\n            imageUrl: \"https://imgur.com/RXJO8FD\"\r\n        }\r\n        openOnMount={false}\r\n    />\r\n);\r\n```\r\n\r\n\r\n#### Prop Types\r\n\r\n| Property | Type          | Default  | Required Case          | Description |\r\n| :-------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `spaceName`    | String        |    |  Always   | Likely your dApp name and / or chatbox category.  A single `spaceName` with different `threadName`s is common practice when building a dApp with multiple Chatbox threads. |\r\n| `threadName`    | String       |   | Always    | A name specific to this Chatbox. |\r\n| `box`    | Object         |   | A (and likely B)    | The `box` instance returned from running `await Box.openBox(address, web3)` somewhere in your dApp.|\r\n| `currentUserAddr`    | String (Ethereum Address)          |    | A & B | The current user's Ethereum address. Passing this will be used to check which messages belong to the current user and can be used for fetching their 3Box profile to render in the Chatbox input UI. |\r\n| `loginFunction`    | Function       |    | B    | A function from your dApp that handles web3 and 3Box login at the global dApp state. This callback will run when a user attempts to join the Chatbox but a `box` instance doesn't yet exist. Running this function should result in a box instance (from `const box = Box.openBox(address, web3)`) being passed as the `box` prop to this component.  |\r\n| `ethereum`    | Object        |  window.ethereum  | C    | The `ethereum` object from whichever web3 provider your dApp uses.  The `enable` method on this object will be used to get the current user's Ethereum address and that address will be used to `openBox` within the current Component context.|\r\n| `popupChat`    | Boolean       |  False   | Optional    | A boolean - `true` - to configure a pop up style chatbox with a button fixed to the bottom right of the window to pop open the chat UI. False will render the component in whichever container you have implemented. |\r\n| `agentProfile`    | Object       |  { chatName: 'Chatbox', imageUrl: null }   | Optional    | An object with the name of the chatbox which will appear in the `Join thread` step and in the header of the chat UI.  The default `imageUrl` is the provided chat icon. |\r\n| `spaceOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `threadOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `colorTheme`    | String       |  False  | Optional    | Pass an rgb or hex color string to match the color theme of your application |\r\n| `mute`    | Boolean       |  False  | Optional    | Pass false to turn off sound for incoming messages. |\r\n| `showEmoji`    | Boolean       |  False  | Optional    | Pass false to turn off the emoji pop up within the chat input UI. |\r\n| `currentUser3BoxProfile`    | Object       |   | Optional    | If the current user has already had their 3Box data fetched at the global dApp state, pass the object returned from `Box.getProfile(profileAddress)` to avoid an extra request.  This data will be rendered in the Chatbox input interface.|\r\n| `userProfileURL`    | Function       |  Defaults to returning user's 3Box profile URL  | Optional    | A function that returns a correctly formatted URL of a user's profile on the current platform.  The function will be passed an Ethereum address within the component, if needed.  A user will be redirected to the URL returned from this function when clicking on the name or Ethereum address associated with the message in the chatbox. This prop is also used in the \"Edit profile\" link in the header of the Chatbox component.|\r\n| `openOnMount`    | Boolean       |  False  | Optional    | Set whether a Popup style Chatbox is open on component mount. This prop only affects desktop browsers. |\r\n\r\n## License\r\n\r\nMIT\r\n","gitHead":"7bfa6df4e90d07fae9536399235c6e83573ba523","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.13.4","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"12.14.1","dependencies":{"3box":"^1.16.2","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"^4.12.18","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.1.6-beta.0_1581605310542_0.6602590586373003","host":"s3://npm-registry-packages"}},"0.1.6":{"name":"3box-chatbox-react","version":"0.1.6","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.1.6","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"45c6a6c2ff834ad7f3e287755236c17016fc4634","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.1.6.tgz","fileCount":58,"integrity":"sha512-1D9T5QADAYuUqRbAw37Z9mSmMUKPqT5LcRSpilABnyDXZLuE1lgMz48F6Ik52u/mw6MVa8ruJwWykUqUX0ErBw==","signatures":[{"sig":"MEUCIQDuHTL7VfPey8z5xWVO+eJFliR1h/xy42Pv84qpJ9PrhgIgN5RQtHTYWB+SJ+kT8K3gONLXPJdrpXZZD+hWLr/Mh/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRwaNCRA9TVsSAnZWagAAvB8P/jTCtFKquyX9CUwAk45a\nGRWFzB/AmJOJCmrQOlByv8Q1+ye5wZoSdsQE/luwlxkKWuEUzInMnJ37mh/L\nq4aFxdC30KwogB/GW5pJHlHwd1/YqrJBavpygElz+2pk7jt4LCoIBN7ehWP7\nUYdbjmIy65VQNT9+G6JneIgVK0EBmv8EWrE5Aywr1xsunWhGCyXEILMS0/qP\n2TjeqBoy6T/w+6WJF3TOatpe12bnt8Q28E98OxQG6YJthnVwBzCc2kTaFJji\nzYK2uKStzuVAArjD0Uls7VHoJz5dleE1wgZQb5YfefyfKSxIplIkeqv3mook\njXMyBpNLjUSO3guw6WAbGizzTXwu5p/nZGprx3A3N3aN4dkN8QSuo9a8oLaR\nSaDFL7rBO7Om3bplBK7/eXT09JsY3D4Dpgyjnb2JTxt+NyNE/UWdJdCaYQqm\n0BnqGd5YqBa7xF5I0IAZ8wWcoV2ykr/N7gyEQYaucs5L7Ej7qkA81Jf+p/iZ\nhqr0mbw2lbxck/aRoD8WSL9b1At5pn7QbuRvz7XbHWn1SjPeVwMJzxwurO6C\n9KGHBA9s/dkI1G1of6vyK6tn/udg8gszgyEcDJmWOGzrH2Km2a/XZQG0lgoK\nIZ8hR6Y/AZK6nkEHRDbTdcDWAyBFafV2rJWOSeV66slsKJC2Fl2tqIf2Raq5\nMsWZ\r\n=Vi2f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","gitHead":"f9830c4d3c8b51bf8b22abf1f1f7dc6f2cfd3e87","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"deprecated":"Deprecated in favor of Ceramic: https://developers.ceramic.network","_npmVersion":"6.13.4","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"12.14.1","dependencies":{"3box":"^1.17.0","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"^4.12.18","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.1.6_1581713037276_0.8808709798431806","host":"s3://npm-registry-packages"}},"0.1.7":{"name":"3box-chatbox-react","version":"0.1.7","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.1.7","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"48d5d1a4e7b9cd0348839a24b4bed50b3aaa4626","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.1.7.tgz","fileCount":58,"integrity":"sha512-LcQ4p251CfFBQxdK0mfsxEwh+wLMRtaht0s1IWMEstRqLQNXkMP8PFPcKMAV9moJnAak7lFl+Mpdwm0UEL54cQ==","signatures":[{"sig":"MEQCIDYOZaFvQIyQ3GKT3VJsdEPq1ZcdsI/aus4hdGFolLDOAiBPv+6Y8legR1ymRS9QWXmxP/H9mvYuYeopwaKKOJrUdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh0KVCRA9TVsSAnZWagAAC7gP/2P8DeXSZeI7tZTytW1x\n9vwZ+MpDU9GSj0L0nNXavX1FXGJ8oczEXiJFHDWWw+AP/DjI7ZcIzecocQtj\nBr2RPr/L7OQyPUZ+9N025ryKY4nnJRzGjlRBQwE3TXDAmO9RmYxJXJYc3AAh\nMK2yl7pKsvr0efxHGlzSI02kB3pcqDJDoBs/quA7wWR4MPnFTqgbzmnfl5EH\nlUuBx89C7HFV8ydYXE42CB1d1BhaELuuuiCXU3MT8bSjC4j2tPbSHCzxcNTJ\nC+bkobeHbRvN1k2T6AQ6+geGW/FZgFdDAqDnYRmhxsyBfHBXTETtvUgxpTbX\ncXLuiy0l9AqPNp+TixzojD58UPQb4TRwevvPcHivNBSys79MixL8gucqO9WO\njPTjTEzBjSqjuEmIaO7fmbIJdLTxF798txdffOZGs/AbPqyi/j8X3Q8EMc3s\nFMZiLZckjCgJCJ8FeRm+ZJncKBiQIuwnZ8HgWP26igmuIw59lJnTiyei/Dgp\nsmug7dffGYYv4nJ8ZJXSVV8eVOS9HAgEYFc5Wssd3SCp64BjKfkt35WCdddw\nR1AHXJk9MNylpJm7qmd8VxszOC2iwv39ktwUlUQxnXVe8A27WENIOW8UDUE8\n1m9jfIjonTAlh7dk3XWxjxRg805NL2JpStUQl8xep7Wbcnpw6FwLaRyrH0xO\nqBUA\r\n=Hv6H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","gitHead":"191bf5549a1b00840c9eec63e14ce5fdecc847d6","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"deprecated":"Deprecated in favor of Ceramic: https://developers.ceramic.network","_npmVersion":"6.13.4","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"10.18.0","dependencies":{"3box":"^1.17.1","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"^4.12.18","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.1.7_1585922708497_0.18782081728196776","host":"s3://npm-registry-packages"}},"0.1.8":{"name":"3box-chatbox-react","version":"0.1.8","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.1.8","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"9c6e4a824a46026ca1d707e865edf059e4182a38","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.1.8.tgz","fileCount":58,"integrity":"sha512-ioEL1hTDpHRQCvJ4ghYfOXv9Zk318/hKk7YTxQ/L8FN0nhA29lj8njS/W+ydHBJsxlq+H2nIpulE1DI5B7lWpA==","signatures":[{"sig":"MEUCIQCZN5xBfrhQJkK9eb0j9dZbFgWB9+Ykg84iLl9Ju/N5WwIga4FvLrurt1MHK53fg75knZnj6TNyLIN3INl5pzwdLgc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelLQwCRA9TVsSAnZWagAAWacP/2JajmAeoouZKzvBAtbe\nG672FHaAADgbzc1ormSjRw6H3YJYnl270/PP9NlcXw378QN9oisnMV+j7Nnb\nD6NYBWRuehauRj7KePBCnpQVr15douLal9tjt04+Lgj5vdgP5e675fR3fwHE\nByJig7Jiz+RQytERwnfJKsy2e8dOw++WFUBojmKUGB7wIANmLYSD6p0uiAQM\nzUrJoyUAzDRNxGfcdz0DCcmj1FQmCY5vc7Z/Lt30tufO6ueL/f6Qm9IS8SYl\nPL6gv8HwIZgfkws6tOrtoL/puYdm+evii+ipeqfd9r/lIDCKkMlstyjW+fNQ\nyHreO7QUm0iMlYxe3t7noRajvGaF9ZLuyNgWPvpRMJ9R+jicvjpdOY8JTA8I\nCt75Ug/iKPqxzZ6M8VEwIiljpsxTW+LLja21TWipVNEQQylGjPz+r8SzOjux\nkkmChQxuMCY0gRKkRWlLqcDGUd6DL0Zez5rS+gSe75R02xX+vVjCAk/h6b1X\nxt+ZghfKBn3IQyTg9KPg4lHPHagpuGkpeCzEUQHJH6biOOxQaQfa4ZsqECOJ\n5lTn0xH05zS2/+h4pGGYNKlcErZZIQhB5KvrpIAOoOsJDfVu4fS1q7KCdl0U\nSJ7+7X2WPLufQ0Vkz7mZBT0HRFRkvr9jLvW8/SAbjA0mYq83QfT1GKdIFZsb\nr+L7\r\n=IZNt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","gitHead":"77d68c84ea203e01d964507c9ed39be38c510018","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"deprecated":"Deprecated in favor of Ceramic: https://developers.ceramic.network","_npmVersion":"6.13.4","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"10.18.0","dependencies":{"3box":"^1.17.1","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"^4.12.18","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.1.8_1586803759843_0.9317561553515685","host":"s3://npm-registry-packages"}},"0.1.9":{"name":"3box-chatbox-react","version":"0.1.9","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.1.9","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"1d3c0554e5d38718fab3a1bd33c52f4368321ee5","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.1.9.tgz","fileCount":58,"integrity":"sha512-QonPW3xL1R8/l7wyobeEkugc9M5oHhRUJnlSxCcY9T+iuGAbYZdcQjx6EV1CzPhNfa7rQb99LLqIFLoCjs0WLQ==","signatures":[{"sig":"MEUCIQCDZPj/qK+Ayw5Magsl1AGKk1NcFihktCWa+3mkcO7TYAIgVTRIbcgLIk+p5gu3PXQ7UKUsAfE/tWKyhOTFdG6YCpY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":722201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelLbhCRA9TVsSAnZWagAAf0YP/2z/DFT+YWC3N99X/CKf\nCvhygvJpgwvuNtaKt7eaQvXJ1bbRosnrd5pk940VW0HPhhxdHRPl7JNkTK5Y\ngDBo+W77VJqCdFKYAmYMqA1j0XcQfXHWM377m9Ya3XBtO6qOBt3Rfpld56IY\ndnNw6Om/oDqyUOMSRvJyXNMP6v/SIj08BrhSqmIXMeg41rQIO9KzmFvabu/r\nWhCJSrdSaDZecCfjI9NMVYUbUptbS1L0jIFCVtj9KG7tCudiyOPgpB9MPGvl\nvqD5v2ejwJz7MWPKmelpesrKgOt9ndz0j+ngrJuDWpdNfLbGAegi4Lv57uTl\nAgwQ516m3mOBFquyvJD6SQQ/2FQMuCxGKFiuj8Of1uUhNurDbmnMjaOk5qox\n0KOKSvvJEPaZb8FiRhqzVOv3eJyxT+xy1Qjx89R/nXJ5iC1S4iGs2smHeR+6\nbeVUoSguec6cvV+TraFEY/hhthR6XZQTVQOkeibYHU4Erz9Ytucg/+yBYSeE\nNO+QtEz4in11jzT9VriPPINnFJ3/XuuvKg5qk3ihbYdTmNefUUZ3zJVdzoF8\nIck6R/1YR2N2cb8HVblVeqJCzSsvTsjeQu/Q1jlwaDb2pbFA6Qi9hEMnH73v\nOJsQbCyltIz1jTjgfDv1tbd8ZDltmBbKsfXDnWjNJ5sQGgh9JYpdMnv9Ea2m\ntzE+\r\n=PBZk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","gitHead":"77d68c84ea203e01d964507c9ed39be38c510018","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"deprecated":"Deprecated in favor of Ceramic: https://developers.ceramic.network","_npmVersion":"6.13.4","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"10.18.0","dependencies":{"3box":"^1.17.1","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"^4.12.18","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.1.9_1586804448516_0.938376543169243","host":"s3://npm-registry-packages"}},"0.1.10":{"name":"3box-chatbox-react","version":"0.1.10","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.1.10","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"b72d1d96fde020c88a44efb4dd8ab0d138d748e8","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.1.10.tgz","fileCount":58,"integrity":"sha512-HhL11s1EkmhSD7mCFu9S8EqjKvZ7+zcU3NakQVyn8+nDKw2Tya6L3w/kasL5o4iSE1dqOOjOZOQ365Wod+LRig==","signatures":[{"sig":"MEQCIHkSLws6rkisnYUqeb/iqTzgJ5NWKl2R4LRBRoB4OwJjAiAeth1B/35g/+vfzZhnt2RxBLGp+Zdp3oOAa0NJJSi6qw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelN+cCRA9TVsSAnZWagAAFvgP/3diUo1DIeZllJuiOh84\nndSsw/2Qm3TDd9LZ1OIXURvUGP8TcUpGkmcWZ4EYvyq01/rxymURdr9c6gVE\nQensiR3FAlyaQkapTjynF2T5SupTfjohE/Q/Rc36Xj0ktQuVgM21+LMPVFhv\n/+SKGdZXh7CHoydwrvTmMFueq7jtOvoHZsSCQF4yTEuGU7mItZ+ikCaK3QUf\nnptn1ZQYAvwK7eS4S6XhnEtvxVQDd2ms9jpoKZ8MQCM4ka24eqtugl2LL34E\nsgnGND8NfjcYY6yWPh/OxIFAJ9lYOBw2NgXdPmfg7sPk/LglBpjgpwQHKqgx\nd7ngPrynL/q7flJiHaeTgJmkB1dZOUKEXr82lsh4u7uZGCKmrkMnIloyCVs0\nGqyG5/jXvzsWZdw15hI93pMHpv9QG0sW6rZNlqJQQ1SgxU1cCRP7azNRfxCc\n/Zhe9ZbJepdPcNGGm5yhqNjb/ZOuzc4dAmdImI6pmi5307jXSNrbWg3Vvz8p\nPRgiTn/CIHaGLolB50F1krMKvsG6IeSCJVU5aC07G44w/iCyAndToBKMT2M7\nNVZbvkiGLDmoTGW+6SkKK4hH0Xjo27R8vG9TB0DW3YhdfYAaUYbtFzlmHZoy\n4jAstQOP5It4lZnj5hduTXLzJ/R0+nOe2ivZFwltiOwuBzWZkbrEJKd5dJrc\nXNY3\r\n=SaO1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","gitHead":"35c949b3d0b8011533d621889de45df84d9fcfd3","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"deprecated":"Deprecated in favor of Ceramic: https://developers.ceramic.network","_npmVersion":"6.13.4","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"10.18.0","dependencies":{"3box":"^1.17.1","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"^4.12.18","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.1.10_1586814875913_0.01907853673637927","host":"s3://npm-registry-packages"}},"0.1.11-beta.1":{"name":"3box-chatbox-react","version":"0.1.11-beta.1","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.1.11-beta.1","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"ce99ceb62e91be9736aa962d15666075480dd23e","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.1.11-beta.1.tgz","fileCount":58,"integrity":"sha512-eRF8U69Kw9cyrxkd6OKGUJ9hZcKIZyCxPhIJhrhqxpclicmR6E4fQqYUi299ee+OFCEH0wNDId4IWRnoR6FgRQ==","signatures":[{"sig":"MEUCIQCbvrHd79RU5f5kR9rCmfaqVpHeSHtzVhdahGw0xy6fhQIgTK7GyPPyI8e8jR4YJO+Sg76N9lmByfIQC1y2K9HAZJM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":733140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqw/uCRA9TVsSAnZWagAAZksP/RE+Viw8OduIi2PgeA7g\n50rwPH9NiJnIUJDOZmIOxo98NuN9kyPxOp8jw2AEF1f7juRq+OayfTg+peGW\nsbrYTzl/C94QIOn36IUOPveTugpvJLpP6UU6vupoHQyX56AS3oOVYNh3tfwF\nU4mwHZevJnL0fIXilV1iE/1xhx2GTRoJsTkpljWPgXrEZbYlJwIqvjVXzlNZ\nmM2d3oUHcurSUpovoZHyZh3xTqsSoiwEo4RrMdJfvWI8+KV5P3fVWhXHyxDf\n9zsyC6P3UfrmwrEtHKaoS8WGXyGy69F9TTKnXTcooxPlTNurcn/+CUuCFYzi\n4pZphu+Qsc3yXl6mnnqfMaicbc3OuoifxY+R4kqVhBrGeMD19+EW5xx7Gs/8\nNRZFYuLHsa1mOvO+dWZm8b3S2H2xYWIKxnshwX8dRzoqDWFWFiFzN3pPD/Lo\n/epYFykZ62evG8IiDm5IyH+l06qjAMg8IpbxDLpNvZl85cUjEruTGg7T5Egw\neRj4ieS4uDuuZ/cSSezj7q6zWUA4KnPikMXzVmwGU869sieN9p4hvXnNArAg\npIaapSawYh4VQ7OQ3qq8K16fm640507bWpfIjwTHHS8x6d1OAtCLqzG9JcMg\nV2HmlPkasaDz8+GvUWhCqUX/DuCoitC5A43RPy4nn0edBv/uDGfxjpLEF1iZ\nIiSF\r\n=wB16\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","gitHead":"35c949b3d0b8011533d621889de45df84d9fcfd3","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"_npmVersion":"6.13.4","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"10.18.0","dependencies":{"3box":"^1.17.1","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"^4.12.18","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.1.11-beta.1_1588269038341_0.9728006468938428","host":"s3://npm-registry-packages"}},"0.1.11":{"name":"3box-chatbox-react","version":"0.1.11","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.1.11","maintainers":[{"name":"oznekenzo","email":"mkn293@nyu.edu"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"1ccb402d4c3f2f12a87103bd3cdcf00d873628b3","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.1.11.tgz","fileCount":58,"integrity":"sha512-dBQjToBtbqlBEiCMZ0sxZebvE4znxT/vupa/YoIIhB3I1jMF5QCD1kUUfCHE7GD2dAuLxCWqocZRmjSlOlw2iA==","signatures":[{"sig":"MEUCIDVVjpjyZzfOf5YACKTdOYpzPxrCcXnkDga4GswEIViKAiEAgSL6cRjBA+ExoxQbASTRIpwUz1UQ1St2iUY2SjuN6r4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":733133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqz37CRA9TVsSAnZWagAAJWkP/iztG0tvyHcBCP3WDG0k\nKqECN2f6rmDGcz5BB3vJCBJFheZpVAZHHInyIFy9NcQEKXdrjEmwwRRwk3hR\nIG/4bLQy5NRcD0Q8FYOYKoa/oh1BIFdmcuwYtw6/9UmTqxNo2RmYhRWd+eZe\nae3c//cj/KXL98T4ugKYwqrlMuXMwWdYm6ObCX9zYFwWcF9nsFsM6T5KpONg\n3RkQTIu13IJT6UFkIJ1OZm1F0dVPs/wRt9vMgfpxM5q8W96Ctf4YmdvYcLBf\ngO0gF1V3mp6Zy6aqYmhcqCNSvOSDCsmJ4lL7aeuRlit4V/F/LJZ+GouM0UXh\nJXk+KW/RmnBrE9dbBOoyH2cZeSdeWCv9QKTLbROb2KTPPKCAlz+msrbDR4bJ\nXC3x6Bwk1jOZMlC418JaedF0Z+2DK2MX22+LC8OiyQyVYhp2s32q68GqlD8p\nE2qpz7LFpe6yxL9i4Zn8UH7175jJdprWycB939MXEq4k7kVDIWXQmVqQubV4\nEe87Ek1hGJxab9DMq1+yU7hUn6ousPnmfTnNDrjyQYLmV5Zy3Ht1jfuTBf/G\nUZk61RrhkrhRLVNTk6FZNGu8SPqtpXi37oKNqMyTSWPA3DBT3fL7ai+Dtf1y\nC2jGENBdo5hYAk6VI4SOT0HEMdKEJvAHoQiSyh4o/5OPZZSRi4vcMM73nDeJ\ni9B1\r\n=SGZ0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","gitHead":"35c949b3d0b8011533d621889de45df84d9fcfd3","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oznekenzo","email":"mkn293@nyu.edu"},"deprecated":"Deprecated in favor of Ceramic: https://developers.ceramic.network","_npmVersion":"6.13.4","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"10.18.0","dependencies":{"3box":"^1.17.1","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","3id-resolver":"0.0.6","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","did-resolver":"0.0.7","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"^4.12.18","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.1.11_1588280826531_0.39870448726031826","host":"s3://npm-registry-packages"}},"0.2.0":{"name":"3box-chatbox-react","version":"0.2.0","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.2.0","maintainers":[{"name":"oed","email":"oed@3box.io"},{"name":"zachferland","email":"zachferland@gmail.com"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"ef867f48175d63d26e9bee343ae7a21d5ea407f7","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.2.0.tgz","fileCount":13,"integrity":"sha512-0sWAcepqvvlHn0jcJHDhDpqvslDnEV/YIgNVt9Pl5QJhPC9o/P57e7+W+hG/38l/dGxRprGDcJZ2gbctsHrmGA==","signatures":[{"sig":"MEMCIHOiJCMwBWb3YEztY0GRXpsCLzYfa1iMwPn1geXZwrUHAh8X1nETtqx9LIKGwyJyZuIHaIVYG5E/X7q5V8XGhyWo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeznYuCRA9TVsSAnZWagAAH1AP/0otqS7pdhbLkJtWYw7D\nPnbR57XDvwXf9QoV+LUkbtwIKcWwnk08AUhyoTXuvpu2DAzXw67+cZWPQsBA\nLBVPGGZHXk/CuCVu0o3qt+xBelOle684SzgtmDVJVHKnxfJxct7i3nmKMvJJ\nIDr7wjvcUs97dmXeWJ0OwpQBSivE2NIAKUG7DZX03Un2EUb0cx4fKwSuiem4\nMWU9th184AhIbv/RhcfSdJaTKQNGiTvU9ELXu5RUSQFJLYvXGck9fhBaC0Eu\nYYtm10bMRUY811pC9amM/XjgRoShsy+9SThm9zQtIxKAEcdGWKGS2dGhQh8C\nbPZilwB8uyppxjsImeaID3OFXeH7XBwTlz/WGNRaYSakPz6fCKjZVQPNgLmd\nzHxCWV3K4yytXiF3fzEbPKDwHfcW0KANioDTQcvW2ttjjlC+/cS9HDquH2Nv\n7vl6SQSaEIG8clod+qijAljHROyahe+xG9trqe/VG9tebCThKT5JR9OElXH0\n/XKHsn8oltvS9jXulk3FNqiLOEkMbOWjstxI2p7/aVjw6/lAp0/WPmUDJjp8\ntyZLKjaQ+/w/yhmhwP0K4fbXFLzMjcihaa9QL6s4L07PB8qMRAmxsgj50iil\n22oT8TQJCVuHtnjd0W5u3gj7+EpEvCKTxogWqsE3s5CMgExBnwExWvOGEI7F\nUjVp\r\n=7J0t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","gitHead":"97d24fb782a338408707326125086c11f6b69aa6","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"oed","email":"oed@3box.io"},"deprecated":"Deprecated in favor of Ceramic: https://developers.ceramic.network","_npmVersion":"6.11.3","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"10.16.3","dependencies":{"3box":"^1.19.0","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","3id-resolver":"^1.0.0","did-resolver":"^1.1.0","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"^4.12.18","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.2.0_1590588973476_0.6061311555459525","host":"s3://npm-registry-packages"}},"0.2.1-beta.1":{"name":"3box-chatbox-react","version":"0.2.1-beta.1","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.2.1-beta.1","maintainers":[{"name":"oed","email":"oed@3box.io"},{"name":"zachferland","email":"zachferland@gmail.com"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"b0acdbc825b7fddf8151f5bd167a55edcab5c063","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.2.1-beta.1.tgz","fileCount":58,"integrity":"sha512-cRbG94lL3BopPRMI5YNzXnPlyftfN+ReV9qHSNrxdBTib2FhsYemZX0UJnxPWwDUwXb34gNVwxnB88T00jPrRg==","signatures":[{"sig":"MEYCIQDlPnBtVfyQeIny365Mr+exmhUja6rTLvUjp5fypXypaAIhAOfj/Uv1w16njH5AxvxaJ/fvZwMiy1vwzxylh0k8Q/e3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":733443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOWNCRA9TVsSAnZWagAAQoQQAKOuZ+8DDPetd0gXiFnk\na+t0qkmf47OysbvBQXGLH7AfrNnx6EZ8Ln+y49ek5ltuBd0J5+viUIh2WgSI\nd6fNBRO5BRIQhqjPntRLiMSS2FinQg+hSeR0fFyxqtuJyiu1yJF3qmZj6BWo\nbyfshWY2TxQ+EOsNsDx1JwRCUzjd86A+EPB3qhFVjtkSJv+PWL0350VI/xxb\nXdHTZdX3jo0wSWqTcJN5US8MnFMnwgHqqLgOwzWKWSKJZXTPaomt/HtdG8lZ\nm+e4JUnx+Gd+czgHXXaHUYnmkRpw3dAMyckEKVBneuPpo/0Ot4BbN8UKLe2s\nCsdWdIL/uPubwtA1/08Bm/T4PMi1lPL05gDI7uM5OgmmfbLJDuOoHzG2KjFb\nmBpJA0x3DfyF3nG0qKWxqVf1tpVKzybfyp1AVSBq7HJwCIc9sXwHTkpENRXn\nI/i6LM9i7+rce1BndbBNclyXsTPs5NloEsHIWkRM5rbq0MDCKwcMIhs0a5Xh\nSUND9m6FO4E55xTWhW+3tf5jJAH6Dtq8nHmVO/32NG1yG3gGqjGlvogpxAGB\naX3CBRYhfD7SKFP5LDr3zUw05qkCvVCY/1JhzVydyGWK+XuO4TIOPB6EW2j7\nJ0/NtneqEiJxNTGSxt9qDu4W8Bd206LDhnUGc5lbAM/Ijko2a1SYKvxNIHKY\n5gej\r\n=6IGI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","readme":"[![Discord](https://img.shields.io/discord/484729862368526356.svg?style=for-the-badge)](https://discordapp.com/invite/Z3f3Cxy)\r\n[![npm](https://img.shields.io/npm/v/3box-chatbox-react.svg?style=for-the-badge)](https://www.npmjs.com/package/3box-chatbox-react)\r\n[![Twitter Follow](https://img.shields.io/twitter/follow/3boxdb.svg?style=for-the-badge&label=Twitter)](https://twitter.com/3boxdb)\r\n\r\n# 3Box Chatbox Plugin 💬\r\n\r\n`3box-chatbox-react` node package is a drop-in react component that provides Web3 developers with a readymade chat system for their Ethereum application. Easily add rich, decentralized social discourse to your dApp with one line of code. The 3Box Chatbox plugin is built using 3Box infrastructure, and handles all logic for creating a chatbox. Starting with v0.1.0, Chatbox supports likes for every message. *Read the docs on [docs.3box.io](https://docs.3box.io/build/plugins/chatbox)*.\r\n\r\n### Try the demo [here](https://3box.github.io/3box-chatbox-react/examples/dist/)\r\n![Example Screenshot](chatbox-example-screenshot.png)\r\n</br>\r\n\r\n## How it Works\r\n#### Architecture\r\nThe Chatbox plugin is built using a standard implementation of [Open Threads](https://docs.3box.io/build/web-apps/messaging/choose#open-threads) which are defined in the [3Box Threads API](https://docs.3box.io/api/messaging) and made available via the [`3Box.js SDK`](https://github.com/3box/3box-js). Chatbox messages are ephemeral and are persisted only as long as there is at least one user in the chatbox. The Chatbox plugin includes UI for inputting and displaying both an in-window and pop-up chat and all relevant logic. The component is configurable to various authentication patterns, and can handle both Web3/3Box logged-in & logged-out states. \r\n\r\n#### Authentication\r\nStarting with version 0.0.5, the content of the configured chatbox can be read right on component mount.  Authentication into the space provided is handled automatically when the user decides to post to the chatbox.\r\n</br>\r\n</br>\r\n\r\n## Getting Started\r\n1. Install the component\r\n2. Choose your authentication pattern\r\n3. Configure application settings\r\n4. Usage\r\n\r\n### 1. Install the component\r\n\r\n```shell\r\nnpm i -S 3box-chatbox-react\r\n```\r\n\r\n### 2. Choose your authentication pattern\r\nDepending on *when and how* your dApp handles authentication for web3 and 3Box, you will need to provide a different set of props to the component. Three acceptable authentication patterns and their respective props are discussed below in A-C:\r\n\r\n**A) Dapp handles web3 and 3Box logins, and they run *before* component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the `box` instance returned from `Box.openBox(ethAddr)` via 3Box.js should be passed to the `box` prop in the chatbox component. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages are their own.\r\n\r\n**B) Dapp handles web3 and 3Box logins, but they haven't run before component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the login logic implemented in the dapp should be passed to the Chatbox component as the `loginFunction` prop, which is run when a user attempts to post a message. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages belong to that user.\r\n\r\n**C) Dapp has no web3 and 3Box login logic.**\r\n\r\nDapp only integrates with the `3box-chatbox-react` component, but not `3Box.js SDK`. All web3 and 3Box login logic will be handled within the Chatbox component, though it's required for the `ethereum` object from your dapp's preferred web3 provider be passed to the `ethereum` prop in the component.\r\n\r\n#### Best practice\r\n\r\nFor the best UX, we recommend implementing one of the following authentication patterns: A; B; or B with A.\r\n\r\nEach of these patterns allow your application to make the `box` object available in global application state where it can be used by all instances of the Chatbox component regardless of which page the user is on. This global pattern removes the need for users to authenticate on each chatbox component, should you decide to have more than one, which would be the case in C.\r\n\r\n### 3. Configure application settings\r\n\r\n**First, choose a name for your application's 3Box space.**\r\n\r\nAlthough you are free to choose whichever name you'd like for your app's space, we recommend using the name of your app. If your application already has a 3Box space, you are welcome to use that same one for the chatbox.\r\n\r\n**Next, choose a naming convention for your application's threads.**\r\n\r\nThe Chatbox thread needs a name, and we recommend that your application creates `threadNames` according to a simple rule. We generally like using a natural identifier, such as community name, page URL, token ID, or other similar means.\r\n\r\n</br>\r\n</br>\r\n\r\n\r\n### 4. Usage\r\n\r\n#### Example\r\n\r\n```jsx\r\nimport ChatBox from '3box-chatbox-react';\r\n\r\nconst MyComponent = ({ handleLogin, box, ethereum, myAddress, currentUser3BoxProfile, adminEthAddr }) => (\r\n    <ChatBox \r\n        // required\r\n        spaceName=\"mySpaceName\"\r\n        threadName=\"myThreadName\"\r\n\r\n\r\n        // Required props for context A) & B)\r\n        box={box}\r\n        currentUserAddr={myAddress}\r\n\r\n        // Required prop for context B)\r\n        loginFunction={handleLogin}\r\n\r\n        // Required prop for context C)\r\n        ethereum={ethereum}\r\n\r\n        // optional\r\n        mute={false}\r\n        popupChat\r\n        showEmoji\r\n        colorTheme=\"#181F21\"\r\n        currentUser3BoxProfile={currentUser3BoxProfile}\r\n        userProfileURL={address => `https://mywebsite.com/user/${address}`}\r\n        spaceOpts={}\r\n        agentProfile={{\r\n            chatName: \"3Box\",\r\n            imageUrl: \"https://imgur.com/RXJO8FD\"\r\n        }}\r\n        openOnMount={false}\r\n    />\r\n);\r\n```\r\n\r\n\r\n#### Prop Types\r\n\r\n| Property | Type          | Default  | Required Case          | Description |\r\n| :-------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `spaceName`    | String        |    |  Always   | Likely your dApp name and / or chatbox category.  A single `spaceName` with different `threadName`s is common practice when building a dApp with multiple Chatbox threads. |\r\n| `threadName`    | String       |   | Always    | A name specific to this Chatbox. |\r\n| `box`    | Object         |   | A (and likely B)    | The `box` instance returned from running `await Box.openBox(address, web3)` somewhere in your dApp.|\r\n| `currentUserAddr`    | String (Ethereum Address)          |    | A & B | The current user's Ethereum address. Passing this will be used to check which messages belong to the current user and can be used for fetching their 3Box profile to render in the Chatbox input UI. |\r\n| `loginFunction`    | Function       |    | B    | A function from your dApp that handles web3 and 3Box login at the global dApp state. This callback will run when a user attempts to join the Chatbox but a `box` instance doesn't yet exist. Running this function should result in a box instance (from `const box = Box.openBox(address, web3)`) being passed as the `box` prop to this component.  |\r\n| `ethereum`    | Object        |  window.ethereum  | C    | The `ethereum` object from whichever web3 provider your dApp uses.  The `enable` method on this object will be used to get the current user's Ethereum address and that address will be used to `openBox` within the current Component context.|\r\n| `popupChat`    | Boolean       |  False   | Optional    | A boolean - `true` - to configure a pop up style chatbox with a button fixed to the bottom right of the window to pop open the chat UI. False will render the component in whichever container you have implemented. |\r\n| `agentProfile`    | Object       |  { chatName: 'Chatbox', imageUrl: null }   | Optional    | An object with the name of the chatbox which will appear in the `Join thread` step and in the header of the chat UI.  The default `imageUrl` is the provided chat icon. |\r\n| `spaceOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `colorTheme`    | String/Boolean       |  False  | Optional    | Pass an rgb or hex color string to match the color theme of your application |\r\n| `mute`    | Boolean       |  False  | Optional    | Pass false to turn off sound for incoming messages. |\r\n| `showEmoji`    | Boolean       |  False  | Optional    | Pass false to turn off the emoji pop up within the chat input UI. |\r\n| `currentUser3BoxProfile`    | Object       |   | Optional    | If the current user has already had their 3Box data fetched at the global dApp state, pass the object returned from `Box.getProfile(profileAddress)` to avoid an extra request.  This data will be rendered in the Chatbox input interface.|\r\n| `userProfileURL`    | Function       |  Defaults to returning user's 3Box profile URL  | Optional    | A function that returns a correctly formatted URL of a user's profile on the current platform.  The function will be passed an Ethereum address within the component, if needed.  A user will be redirected to the URL returned from this function when clicking on the name or Ethereum address associated with the message in the chatbox. This prop is also used in the \"Edit profile\" link in the header of the Chatbox component.|\r\n| `openOnMount`    | Boolean       |  False  | Optional    | Set whether a Popup style Chatbox is open on component mount. This prop only affects desktop browsers. |\r\n\r\n## Maintainers\r\n[@oed](https://github.com/oed)\r\n\r\n## License\r\n\r\nMIT\r\n","gitHead":"5fdd55d8db1a5a4fc20925516aadabb398eb5686","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"zachferland","email":"zachferland@gmail.com"},"_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"10.12.0","dependencies":{"3box":"^1.19.0","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","3id-resolver":"^1.0.0","did-resolver":"^1.1.0","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"^4.12.18","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.2.1-beta.1_1595467149028_0.8898514876475219","host":"s3://npm-registry-packages"}},"0.3.0":{"name":"3box-chatbox-react","version":"0.3.0","keywords":["chat","3Box","decentralized","ethereum"],"author":{"name":"3box.io"},"license":"MIT","_id":"3box-chatbox-react@0.3.0","maintainers":[{"name":"oed","email":"oed@3box.io"},{"name":"zachferland","email":"zachferland@gmail.com"}],"contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"dist":{"shasum":"478f82a11ff3558263ce9453d832f1ec1c415fdf","tarball":"https://registry.npmjs.org/3box-chatbox-react/-/3box-chatbox-react-0.3.0.tgz","fileCount":58,"integrity":"sha512-ch3IMloU58ZdxaOew1PJkxwv48FSFT4ZorfApAxFJrv/mXViSHaYcXqZpgXEwN5NWVc4qzXaK4bEBWyifO+Kjw==","signatures":[{"sig":"MEYCIQD//DIBCSS9Kv/Hwf/ErKQ4LEJW1u3QAceWUE4RCJeP3gIhALsr7fsoAmSKOPnmtrujJPbRz4yGZNnrnMvzhS6Hs4X5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":733457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIi3XCRA9TVsSAnZWagAAvpcP/RS7jDxvlFcUDbBmk30f\nHEui1toVmWLJ5VHHJrJaVk6tVRIW7PxIIzJ7bhCAEaQ+plyGngT11Yph02MU\ni0mC2LoHMFZNYiLma8dPxneG/7CzinhyE+urfqlHBuM8CQwhU+he84GoyZc3\nBdm/Xzq8KaXfH0bER5D3nl9ScKqGYXvbwBvm6sjb+bxXJdPXcU/j3V4TdHf4\nxM02JNaukdL7ob8xnFAQgSwq6Du9P1bVI+axGjdf8GXB5xANMXdNcpDFnG7n\nuz7OR3MLZseISl3wzlqHr4y3oHa/gXzXpoeUmAbd+/iDmF/yq7x0dKXymcDb\nB/uqgUUsZ8uqexCPVBXGZ7mNtsQWoCmlr8B6/GVKXLyQCyVkR6q+WijF/NnL\nOXjgZHez7VISQmZ4SZ9mn0YDU9WHHZiFsGiGTSkwqY3RAkeY5z/c7OUX6Ab+\nsp/F+ymRDzf/z4ac4ot8bFPP1M07bLUjzTq2RaiTIA7raNBfSMh7xy9A9UGr\nrjVhL9aCMjGcIMTXw8RLR4wvASnYqNf9lrqeAzI2MQcGiTf1C1wJi+PQQACC\nFnKefN7Y4KMbqwvwcxabJN26u2PjZPuVh1tvG6grigiuaTRFl2t/yIGMP+Yf\nTK3Cw6fO8a6ygj5/ziYaYP9213skFzfGVaQmyd71Sqdo15GtKr0gd4s7SE7z\ny7/9\r\n=73gg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/index.js","gitHead":"4423bc2895fa62981155d6c1310d507c46f10c2c","scripts":{"lint":"eslint ./src","test":"npm run lint && npm run coverage","build":"webpack --config webpack.config.babel.js && npm run build:es5","clean":"rm -rf dist coverage","start":"webpack-dev-server --config examples/webpack.config.live.babel.js","analyze":"source-map-explorer 'dist/index.js'","coverage":"jest --coverage","build:es5":"rm -rf ./lib; ./node_modules/.bin/babel src --out-dir lib --source-maps inline --copy-files --ignore=src/__tests__/,src/__mocks__/","prepublish":"npm run clean && npm run test && npm run build","build-examples":"webpack --config examples/webpack.config.babel.js --progress"},"_npmUser":{"name":"zachferland","email":"zachferland@gmail.com"},"deprecated":"Deprecated in favor of Ceramic: https://developers.ceramic.network","_npmVersion":"6.4.1","description":"Chat component for decentralized applications by 3Box","directories":{},"resolutions":{"babel-core":"7.0.0-bridge.0"},"_nodeVersion":"10.12.0","dependencies":{"3box":"^1.19.0","emoji-js":"^3.4.1","node-sass":"^4.7.2","@babel/cli":"^7.7.7","babel-core":"^7.0.0-bridge.0","3id-resolver":"^1.0.0","did-resolver":"^1.1.0","react-linkify":"^1.0.0-alpha","@babel/runtime":"^7.6.0","react-inlinesvg":"^1.1.6","istanbul-reports":"^2.2.6","svg-inline-loader":"^0.8.0","source-map-explorer":"^2.1.2","ethereum-blockies-base64":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","react":"^16.6.0","enzyme":"^3.3.0","eslint":"^5.8.0","webpack":"^4.9.1","jest-cli":"^23.6.0","react-dom":"^16.6.0","babel-jest":"^23.6.0","css-loader":"^1.0.1","prop-types":"^15.6.0","@babel/core":"^7.1.2","file-loader":"^4.2.0","sass-loader":"^7.0.1","webpack-cli":"^3.1.2","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","style-loader":"^0.23.1","@babel/register":"^7.0.0","react-hot-loader":"^4.12.18","@babel/preset-env":"^7.1.0","webpack-dev-server":"^3.1.4","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.0.0","regenerator-runtime":"^0.12.1","clean-webpack-plugin":"^0.1.16","enzyme-adapter-react-16":"^1.1.1","react-addons-test-utils":"^15.5.1","@babel/plugin-proposal-class-properties":"^7.5.5"},"peerDependencies":{"react":">= 16.3.0","react-dom":">= 16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/3box-chatbox-react_0.3.0_1596075478998_0.901625391336166","host":"s3://npm-registry-packages"}}},"time":{"created":"2019-10-09T01:31:41.601Z","modified":"2024-10-23T15:43:13.423Z","0.0.1-beta.1":"2019-10-09T01:31:41.821Z","0.0.1-beta.2":"2019-10-15T03:09:04.344Z","0.0.1-beta.3":"2019-10-16T08:33:39.663Z","0.0.1-beta.4":"2019-10-16T08:43:29.432Z","0.0.1-beta.5":"2019-10-16T09:19:02.026Z","0.0.1-beta.6":"2019-10-16T13:33:52.087Z","0.0.1-beta.7":"2019-10-16T13:44:06.731Z","0.0.1-beta.9":"2019-10-18T10:59:00.827Z","0.0.1-beta.10":"2019-10-22T21:25:53.488Z","0.0.1-beta.11":"2019-11-12T15:10:51.219Z","0.0.1-beta.12":"2019-11-21T21:55:39.547Z","0.0.1-beta.14":"2019-12-11T14:58:23.220Z","0.0.1-beta.15":"2019-12-11T18:28:00.689Z","0.0.1-beta.16":"2019-12-11T19:28:25.019Z","0.0.1-beta.17":"2019-12-12T14:57:29.073Z","0.0.1-beta.18":"2019-12-12T15:02:31.863Z","0.0.1-beta.19":"2020-01-03T14:26:36.157Z","0.0.1-beta.20":"2020-01-03T14:34:26.691Z","0.0.1-beta.21":"2020-01-03T14:41:46.343Z","0.0.1-beta.22":"2020-01-06T19:56:26.905Z","0.0.2":"2020-01-06T20:05:38.772Z","0.0.4":"2020-01-13T18:34:48.578Z","0.0.5-beta.1":"2020-01-14T18:08:34.039Z","0.0.5-beta.2":"2020-01-14T18:09:08.686Z","0.0.5-beta.3":"2020-01-14T18:19:16.595Z","0.0.5-beta.4":"2020-01-14T18:41:26.475Z","0.0.5":"2020-01-14T18:53:22.753Z","0.1.0":"2020-02-05T18:52:35.701Z","0.1.1":"2020-02-05T20:09:13.822Z","0.1.2":"2020-02-05T20:33:05.624Z","0.1.3":"2020-02-05T21:07:11.047Z","0.1.4":"2020-02-05T21:52:28.134Z","0.1.5":"2020-02-06T15:58:00.449Z","0.1.6-beta.0":"2020-02-13T14:48:30.691Z","0.1.6":"2020-02-14T20:43:57.437Z","0.1.7":"2020-04-03T14:05:08.669Z","0.1.8":"2020-04-13T18:49:20.105Z","0.1.9":"2020-04-13T19:00:48.748Z","0.1.10":"2020-04-13T21:54:36.135Z","0.1.11-beta.1":"2020-04-30T17:50:38.489Z","0.1.11":"2020-04-30T21:07:06.778Z","0.2.0":"2020-05-27T14:16:13.681Z","0.2.1-beta.1":"2020-07-23T01:19:09.176Z","0.3.0":"2020-07-30T02:17:59.226Z"},"author":{"name":"3box.io"},"license":"MIT","keywords":["chat","3Box","decentralized","ethereum"],"description":"Chat component for decentralized applications by 3Box","contributors":[{"name":"Kenzo Nakamura","email":"kenzo@nyu.edu"}],"maintainers":[{"email":"oed@3box.io","name":"oed"}],"readme":"[![Discord](https://img.shields.io/discord/484729862368526356.svg?style=for-the-badge)](https://discordapp.com/invite/Z3f3Cxy)\r\n[![npm](https://img.shields.io/npm/v/3box-chatbox-react.svg?style=for-the-badge)](https://www.npmjs.com/package/3box-chatbox-react)\r\n[![Twitter Follow](https://img.shields.io/twitter/follow/3boxdb.svg?style=for-the-badge&label=Twitter)](https://twitter.com/3boxdb)\r\n\r\n# 3Box Chatbox Plugin 💬\r\n\r\n`3box-chatbox-react` node package is a drop-in react component that provides Web3 developers with a readymade chat system for their Ethereum application. Easily add rich, decentralized social discourse to your dApp with one line of code. The 3Box Chatbox plugin is built using 3Box infrastructure, and handles all logic for creating a chatbox. Starting with v0.1.0, Chatbox supports likes for every message. *Read the docs on [docs.3box.io](https://docs.3box.io/build/plugins/chatbox)*.\r\n\r\n### Try the demo [here](https://3box.github.io/3box-chatbox-react/examples/dist/)\r\n![Example Screenshot](chatbox-example-screenshot.png)\r\n</br>\r\n\r\n## How it Works\r\n#### Architecture\r\nThe Chatbox plugin is built using a standard implementation of [Open Threads](https://docs.3box.io/build/web-apps/messaging/choose#open-threads) which are defined in the [3Box Threads API](https://docs.3box.io/api/messaging) and made available via the [`3Box.js SDK`](https://github.com/3box/3box-js). Chatbox messages are ephemeral and are persisted only as long as there is at least one user in the chatbox. The Chatbox plugin includes UI for inputting and displaying both an in-window and pop-up chat and all relevant logic. The component is configurable to various authentication patterns, and can handle both Web3/3Box logged-in & logged-out states. \r\n\r\n#### Authentication\r\nStarting with version 0.0.5, the content of the configured chatbox can be read right on component mount.  Authentication into the space provided is handled automatically when the user decides to post to the chatbox.\r\n</br>\r\n</br>\r\n\r\n## Getting Started\r\n1. Install the component\r\n2. Choose your authentication pattern\r\n3. Configure application settings\r\n4. Usage\r\n\r\n### 1. Install the component\r\n\r\n```shell\r\nnpm i -S 3box-chatbox-react\r\n```\r\n\r\n### 2. Choose your authentication pattern\r\nDepending on *when and how* your dApp handles authentication for web3 and 3Box, you will need to provide a different set of props to the component. Three acceptable authentication patterns and their respective props are discussed below in A-C:\r\n\r\n**A) Dapp handles web3 and 3Box logins, and they run *before* component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the `box` instance returned from `Box.openBox(ethAddr)` via 3Box.js should be passed to the `box` prop in the chatbox component. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages are their own.\r\n\r\n**B) Dapp handles web3 and 3Box logins, but they haven't run before component is mounted. (recommended)**\r\n\r\nDapp integrates with `3Box.js SDK` and the `3box-chatbox-react` component. In this case, the login logic implemented in the dapp should be passed to the Chatbox component as the `loginFunction` prop, which is run when a user attempts to post a message. The user's current Ethereum address should be passed to the `currentUserAddr` prop to determine which messages belong to that user.\r\n\r\n**C) Dapp has no web3 and 3Box login logic.**\r\n\r\nDapp only integrates with the `3box-chatbox-react` component, but not `3Box.js SDK`. All web3 and 3Box login logic will be handled within the Chatbox component, though it's required for the `ethereum` object from your dapp's preferred web3 provider be passed to the `ethereum` prop in the component.\r\n\r\n#### Best practice\r\n\r\nFor the best UX, we recommend implementing one of the following authentication patterns: A; B; or B with A.\r\n\r\nEach of these patterns allow your application to make the `box` object available in global application state where it can be used by all instances of the Chatbox component regardless of which page the user is on. This global pattern removes the need for users to authenticate on each chatbox component, should you decide to have more than one, which would be the case in C.\r\n\r\n### 3. Configure application settings\r\n\r\n**First, choose a name for your application's 3Box space.**\r\n\r\nAlthough you are free to choose whichever name you'd like for your app's space, we recommend using the name of your app. If your application already has a 3Box space, you are welcome to use that same one for the chatbox.\r\n\r\n**Next, choose a naming convention for your application's threads.**\r\n\r\nThe Chatbox thread needs a name, and we recommend that your application creates `threadNames` according to a simple rule. We generally like using a natural identifier, such as community name, page URL, token ID, or other similar means.\r\n\r\n</br>\r\n</br>\r\n\r\n\r\n### 4. Usage\r\n\r\n#### Example\r\n\r\n```jsx\r\nimport ChatBox from '3box-chatbox-react';\r\n\r\nconst MyComponent = ({ handleLogin, box, ethereum, myAddress, currentUser3BoxProfile, adminEthAddr }) => (\r\n    <ChatBox \r\n        // required\r\n        spaceName=\"mySpaceName\"\r\n        threadName=\"myThreadName\"\r\n\r\n\r\n        // Required props for context A) & B)\r\n        box={box}\r\n        currentUserAddr={myAddress}\r\n\r\n        // Required prop for context B)\r\n        loginFunction={handleLogin}\r\n\r\n        // Required prop for context C)\r\n        ethereum={ethereum}\r\n\r\n        // optional\r\n        mute={false}\r\n        popupChat\r\n        showEmoji\r\n        colorTheme=\"#181F21\"\r\n        currentUser3BoxProfile={currentUser3BoxProfile}\r\n        userProfileURL={address => `https://mywebsite.com/user/${address}`}\r\n        spaceOpts={}\r\n        agentProfile={{\r\n            chatName: \"3Box\",\r\n            imageUrl: \"https://imgur.com/RXJO8FD\"\r\n        }}\r\n        openOnMount={false}\r\n    />\r\n);\r\n```\r\n\r\n\r\n#### Prop Types\r\n\r\n| Property | Type          | Default  | Required Case          | Description |\r\n| :-------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `spaceName`    | String        |    |  Always   | Likely your dApp name and / or chatbox category.  A single `spaceName` with different `threadName`s is common practice when building a dApp with multiple Chatbox threads. |\r\n| `threadName`    | String       |   | Always    | A name specific to this Chatbox. |\r\n| `box`    | Object         |   | A (and likely B)    | The `box` instance returned from running `await Box.openBox(address, web3)` somewhere in your dApp.|\r\n| `currentUserAddr`    | String (Ethereum Address)          |    | A & B | The current user's Ethereum address. Passing this will be used to check which messages belong to the current user and can be used for fetching their 3Box profile to render in the Chatbox input UI. |\r\n| `loginFunction`    | Function       |    | B    | A function from your dApp that handles web3 and 3Box login at the global dApp state. This callback will run when a user attempts to join the Chatbox but a `box` instance doesn't yet exist. Running this function should result in a box instance (from `const box = Box.openBox(address, web3)`) being passed as the `box` prop to this component.  |\r\n| `ethereum`    | Object        |  window.ethereum  | C    | The `ethereum` object from whichever web3 provider your dApp uses.  The `enable` method on this object will be used to get the current user's Ethereum address and that address will be used to `openBox` within the current Component context.|\r\n| `popupChat`    | Boolean       |  False   | Optional    | A boolean - `true` - to configure a pop up style chatbox with a button fixed to the bottom right of the window to pop open the chat UI. False will render the component in whichever container you have implemented. |\r\n| `agentProfile`    | Object       |  { chatName: 'Chatbox', imageUrl: null }   | Optional    | An object with the name of the chatbox which will appear in the `Join thread` step and in the header of the chat UI.  The default `imageUrl` is the provided chat icon. |\r\n| `spaceOpts`    | Object       | | Optional    | Optional parameters for threads (see [Docs.3box.io](https://Docs.3box.io) for more info)|\r\n| `colorTheme`    | String/Boolean       |  False  | Optional    | Pass an rgb or hex color string to match the color theme of your application |\r\n| `mute`    | Boolean       |  False  | Optional    | Pass false to turn off sound for incoming messages. |\r\n| `showEmoji`    | Boolean       |  False  | Optional    | Pass false to turn off the emoji pop up within the chat input UI. |\r\n| `currentUser3BoxProfile`    | Object       |   | Optional    | If the current user has already had their 3Box data fetched at the global dApp state, pass the object returned from `Box.getProfile(profileAddress)` to avoid an extra request.  This data will be rendered in the Chatbox input interface.|\r\n| `userProfileURL`    | Function       |  Defaults to returning user's 3Box profile URL  | Optional    | A function that returns a correctly formatted URL of a user's profile on the current platform.  The function will be passed an Ethereum address within the component, if needed.  A user will be redirected to the URL returned from this function when clicking on the name or Ethereum address associated with the message in the chatbox. This prop is also used in the \"Edit profile\" link in the header of the Chatbox component.|\r\n| `openOnMount`    | Boolean       |  False  | Optional    | Set whether a Popup style Chatbox is open on component mount. This prop only affects desktop browsers. |\r\n\r\n## Maintainers\r\n[@oed](https://github.com/oed)\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}