NEW: qv-steem-beneficiaries, NPM package for adding Beneficiaries support into your app!

Repository

<p dir="auto"><span><a href="https://github.com/irelandscape/qv-steem-beneficiaries" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/irelandscape/qv-steem-beneficiaries <h4>NPM Package <p dir="auto"><span><a href="https://www.npmjs.com/package/qv-steem-beneficiaries" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://www.npmjs.com/package/qv-steem-beneficiaries <h3>qv-steem-beneficiaries - Easily add beneficiary support into your Quasar/Vue application <p dir="auto">As a Steem developer have you ever felt like we keep on reinventing the wheel each time we work on a new dapp? <p dir="auto">This annoying feeling got me thinking and look back at my own code in search of components that could be shared with the community. <p dir="auto">I recently added support for beneficiaries in <a href="https://www.stemq.io" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">StemQ and thought that this would be a nice feature to make available through <a href="https://nodejs.org/en/" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">npm, the NodeJS package manager. <p dir="auto"><strong>Introducing <a href="https://www.npmjs.com/package/dsteem" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">qv-steem-beneficiaries, a <a href="https://quasar-framework.org" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Quasar based <a href="https://vuejs.org" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Vue component that will allow your users to add and remove beneficiaries before submitting a new post on the Steem blockchain. <h4>Component in action <p dir="auto">The component provides a button for managing beneficiaries:<br /> <a href="https://postimg.cc/xN5ncd5r" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link"><img src="https://images.hive.blog/768x0/https://i.postimg.cc/xqDCpJbd/Screenshot-from-2019-01-30-20-29-44.png" alt="Screenshot-from-2019-01-30-20-29-44.png" srcset="https://images.hive.blog/768x0/https://i.postimg.cc/xqDCpJbd/Screenshot-from-2019-01-30-20-29-44.png 1x, https://images.hive.blog/1536x0/https://i.postimg.cc/xqDCpJbd/Screenshot-from-2019-01-30-20-29-44.png 2x" /><br /> Once clicked, the button opens a dialog (QDialog) which allows the user to input beneficiary usernames and amounts expressed in percentage (in 5% steps):<br /> <a href="https://postimg.cc/Wd6BCzN2" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link"><img src="https://images.hive.blog/768x0/https://i.postimg.cc/P5BdLv08/Screenshot-from-2019-01-21-20-18-49.png" alt="Screenshot-from-2019-01-21-20-18-49.png" srcset="https://images.hive.blog/768x0/https://i.postimg.cc/P5BdLv08/Screenshot-from-2019-01-21-20-18-49.png 1x, https://images.hive.blog/1536x0/https://i.postimg.cc/P5BdLv08/Screenshot-from-2019-01-21-20-18-49.png 2x" /> <p dir="auto">The component stores the information in a json string suitable for insertion into a Steem broadcast operation (see below). <h4>Used Technologies <ul> <li><a href="https://vuejs.org" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Vue.js <li><a href="https://quasar-framework.org" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Quasar Framework <li><a href="https://github.com/jnordberg/dsteem" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">dsteem <h4>Usage <p dir="auto">The component can be installed into your Node.js project as follows: <pre><code>npm install --save qv-steem-beneficiaries <p dir="auto">In your application, import the <em>Beneficiaries component like so: <pre><code>import Beneficiaries from 'qv-steem-beneficiaries' <p dir="auto">Insert the component into your template and bind a data variable using <em>v-model: <pre><code><template> ... <beneficiaries v-model="beneficiaries" buttonColor="secondary" knobColor="secondary" dialogButtonsColor="secondary" /> ... </template> <p dir="auto">The <em>beneficiaries data can then be inserted into your broadcast operation as follows: <pre><code><script> ... let operations = [] const params = { parent_author: ..., parent_permlink: ... ... } operations.push(['comment', params]) let commentOptionsConfig = { ... extensions: [] } if (this.beneficiaries.length) { commentOptionsConfig.extensions.push([ 0, { beneficiaries: this.beneficiaries } ]) } operations.push(['comment_options', commentOptionsConfig]) vue.$store.getters['steem/client'].broadcast(operations).then(() => { ... } ... </script> <h4>Component properties <p dir="auto">The following code snippet gives you an indication of those properties that can be set from your application. The names should make the meaning of each property self-explanatory. <pre><code> props: { steemApiUrl: { type: String, default: 'https://api.steemit.com' }, buttonColor: { type: String, default: 'primary' }, dialogButtonsColor: { type: String, default: 'primary' }, knobColor: { type: String, default: 'primary' } }, <h4>Localization <p dir="auto">The localization of the labels and dialog title is supported, assuming that you are using <a href="https://www.npmjs.com/package/vue-i18n" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">vue-i18n within your project. <p dir="auto">If you are not using vue-i18n, text strings will appear with their default values in the English language. <h4>Dependencies <p dir="auto">This component relies on the following packages to be installed in your app: <ul> <li><a href="https://quasar-framework.org" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Quasar: make sure to add the <em>QDialog, <em>QBtn, <em>QIcon, <em>QInput, <em>QKnob <li><a href="https://www.npmjs.com/package/dsteem" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">dsteem <li><a href="https://www.npmjs.com/package/debounce" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">debounce <li><a href="https://www.npmjs.com/package/vue-i18n" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">vue-i18n: not strictly essential, but will allow you to provide your own string locales if you include it. <h4>Getting support <p dir="auto">For help, join the <a href="https://discord.gg/AMSChmj" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">StemQ Discord Server <h4>How to contribute? <p dir="auto">Bug reports can be submitted on github:<br /><span> <a href="https://github.com/irelandscape/qv-steem-beneficiaries/issues" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/irelandscape/qv-steem-beneficiaries/issues <p dir="auto">If you would like to propose new features or help with the software development of this component, please contact me on the <a href="https://discord.gg/AMSChmj" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">StemQ Discord Server. <h4>GitHub Account <p dir="auto"><span><a href="https://github.com/irelandscape" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/irelandscape