Repository
https://github.com/irelandscape/qv-steem-beneficiaries
NPM Package
https://www.npmjs.com/package/qv-steem-beneficiaries
qv-steem-beneficiaries - Easily add beneficiary support into your Quasar/Vue application
As a Steem developer have you ever felt like we keep on reinventing the wheel each time we work on a new dapp?
This annoying feeling got me thinking and look back at my own code in search of components that could be shared with the community.
I recently added support for beneficiaries in StemQ and thought that this would be a nice feature to make available through npm, the NodeJS package manager.
Introducing qv-steem-beneficiaries, a Quasar based Vue component that will allow your users to add and remove beneficiaries before submitting a new post on the Steem blockchain.
Component in action
The component provides a button for managing beneficiaries:
Once clicked, the button opens a dialog (QDialog) which allows the user to input beneficiary usernames and amounts expressed in percentage (in 5% steps):
The component stores the information in a json string suitable for insertion into a Steem broadcast operation (see below).
Used Technologies
Usage
The component can be installed into your Node.js project as follows:
npm install --save qv-steem-beneficiaries
In your application, import the Beneficiaries component like so:
import Beneficiaries from 'qv-steem-beneficiaries'
Insert the component into your template and bind a data variable using v-model:
<template>
...
<beneficiaries
v-model="beneficiaries"
buttonColor="secondary"
knobColor="secondary"
dialogButtonsColor="secondary"
/>
...
</template>
The beneficiaries data can then be inserted into your broadcast operation as follows:
<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>
Component properties
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.
props: {
steemApiUrl: {
type: String,
default: 'https://api.steemit.com'
},
buttonColor: {
type: String,
default: 'primary'
},
dialogButtonsColor: {
type: String,
default: 'primary'
},
knobColor: {
type: String,
default: 'primary'
}
},
Localization
The localization of the labels and dialog title is supported, assuming that you are using vue-i18n within your project.
If you are not using vue-i18n, text strings will appear with their default values in the English language.
Dependencies
This component relies on the following packages to be installed in your app:
- Quasar: make sure to add the QDialog, QBtn, QIcon, QInput, QKnob
- dsteem
- debounce
- vue-i18n: not strictly essential, but will allow you to provide your own string locales if you include it.
Getting support
For help, join the StemQ Discord Server
How to contribute?
Bug reports can be submitted on github:
https://github.com/irelandscape/qv-steem-beneficiaries/issues
If you would like to propose new features or help with the software development of this component, please contact me on the StemQ Discord Server.