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

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

• Vue.js
• Quasar Framework
• dsteem

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.

GitHub Account

https://github.com/irelandscape