Steem Delegations Tutorial Part Three

Delegating your Steem Power to another user can be a great way to invest in Steem and Steemit. You can get an excellent annual percentage rate (APR) on your investment if you delegate your Steem Power to another user.

This post is part three of a tutorial series about Steem delegations. This post is the last part of the series. If you want to read the first two tutorials, you can do so by following the links in the curriculum.

Curriculum

---

Part One

You will learn how to …

• get the current delegations for a user from the Steem blockchain
• convert VESTS to Steem Power (SP)
• show the information in a simple web application

Part Two

You will learn how to …

• get the transaction history for an account
• how to filter relevant data from the historical transaction data
• calculate the annual percentage rate for your investments
• show the information in a simple web application

Part Three (this article)

You will learn how to …

• make a simple form for new delegations
• delegate your Steem Power to another Steem user
• to remove your delegation
• to increase or decrease your delegation

Technologies Used

---

• SteemJS—Steem.js the official JavaScript library for the Steem blockchain
• Next generation JavaScript
• Hyperapp—1 KB JavaScript library for building frontend applications
• Hyperapp Router—Declarative routing for Hyperapp using the History API
• Bulma—free and open source CSS framework based on Flexbox
• Fontawesome—the web’s most popular icon set
• Parcel—Blazing fast, zero configuration web application bundler

Steem Delegation Tutorial Three

---

In the second part of this tutorial series, we looked at how we can build a delegation history. The delegation history lists all delegations and the transfers we received from the delegatees.

But how can we make a delegation from our account to another in the first place? This question will be answered in this article.

First I will show you how easy it is to make a delegation and then we will add a form to our existing application to collect the necessary data, like the delegator, the delegatee, and the amount of Steem Power we want to delegate.

You will also learn how to convert Steem Power to Vests because all delegations are done in Vests and not in SP.

How To Delegate Steem Power

---

When I started this tutorial series I thought that the most difficult part would be the actual delegation from one account to another. Well, it turns out that the delegation is achieved quite easily when you utilize steemconnect.com.

The only thing you need to have to make a delegation programmatically is the right URL.

Let me give you an improbable example: Jerry Banfield is delegating 100 SP to the postpromoter bot. This screenshot shows what Jerry will see in his browser:

And the URL in the browser would be similar to this one:

https://steemconnect.com/sign/delegate-vesting-shares?delegator=jerrybanfield&delegatee=postpromoter&vesting_shares=204201.531923%20VESTS

You see that the URL has all the information which is necessary to conduct a delegation: the delegator, the delegatee, and the amount.

As you can see the amount in the URL is not given in SP but VESTS. So there is only one question left for us to be able to build such an URL. How do we convert the 100 SP to the 204201.531923 VESTS?

Well, easy. I give you a function :)

// /src/common/utils.js
// Convert Steem to Vests
export const steem2Vests = (steem, dynamicGlobalProperties) => {
  const { total_vesting_fund_steem, total_vesting_shares } = dynamicGlobalProperties
  const totalVestingFundSteemNumber = unitString2Number(total_vesting_fund_steem)
  const totalVestingSharesNumber = unitString2Number(total_vesting_shares)

  const vests = steem / (totalVestingFundSteemNumber / totalVestingSharesNumber)
  return vests.toFixed(6)
}

This function is very similar to the utility function vests2Steem we used before in this tutorial series.

Building The Delegation Form

---

Now that we know how to make a delegation in our program and how we prepare the data to build the URL for the correct call to steemconnect, there is only one thing left we need to do. We need to have a form where the user can enter all the data and then submit the form to initiate the delegation.

For this, we will build a new view which we call the DelegationView. We will put the delegation view which shows the delegation form on its own page. The form will look like this:

The delegation form needs a new piece of the global app state. Look at the delegationForm slice. The form will save its data there.

// src/state/index.js

export default {
  error: {
    message: ''
  },
  delegationForm: {
    delegator: '',
    delegatee: '',
    amount: ''
  },
  location: location.state,
  isNavbarMenuActive: false,
  username: '',
  delegations: [],
  dynamicGlobalProperties: null,
  accountHistory: [],
  delegationHistory: []
}

And here are the actions that will change the state object.

// src/actions/index.js
…
  delegationForm: {
    changeDelegator: value => ({ delegator: value }),
    changeDelegatee: value => ({ delegatee: value }),
    changeAmount: value => ({ amount: value })
  },
…

The code for the delegation form is self-explanatory. You can see the actions wired up to the input fields. Then there is the delegateSteemPower function which will be called when the user clicks the delegate button.

The delegateSteemPower function takes the delegator, delegatee, and amount from the state and constructs the URL. The URL will then be called with window.open.

// src/views/DelegationView.js
import {h} from 'hyperapp'
import config from '../common/config'
import { unitString2Number, vests2Steem, steem2Vests } from '../common/utils'

export default ({state, actions}) => {
  const delegateSteemPower = () => {
    const delegationURL = `https://steemconnect.com/sign/delegate-vesting-shares?delegator=${state.delegationForm.delegator}&delegatee=${state.delegationForm.delegatee}&vesting_shares=${steem2Vests(state.delegationForm.amount, state.dynamicGlobalProperties)} VESTS`
    window.open(delegationURL)
  }

  if (!state.dynamicGlobalProperties) {
    actions.requestDynamicGlobalProperties()
    return (
      <div class='container'>
        <div class='column is-half is-offset-one-quarter'>
          <h1>Loading …</h1>
        </div>
      </div>
    )
  }

  return (
    <div class='container'>
      <div class='column is-half is-offset-one-quarter'>
        <section class='section'>
          <div class="field is-horizontal">
            <div class="field-label is-normal">
              <label class="label">Delegator</label>
            </div>
            <div class="field-body">
              <div class="field is-expanded">
                <div class="field has-addons">
                  <p class="control">
                    <a class="button is-static">
                      @
                    </a>
                  </p>
                  <p class="control is-expanded">
                    <input
                      onkeyup={event => actions.delegationForm.changeDelegator(event.target.value)}
                      class="input" type="text" placeholder="Your Steemit username"
                    />
                  </p>
                </div>
                <p class="help">The account you want to delegate SP from. Normally you enter your Steemit username here.</p>
              </div>
            </div>
          </div>

          <div class="field is-horizontal">
            <div class="field-label is-normal">
              <label class="label">Delegatee</label>
            </div>
            <div class="field-body">
              <div class="field is-expanded">
                <div class="field has-addons">
                  <p class="control">
                    <a class="button is-static">
                      @
                    </a>
                  </p>
                  <p class="control is-expanded">
                    <input
                      onkeyup={event => actions.delegationForm.changeDelegatee(event.target.value)}
                      class="input" type="tel" placeholder="Steemit username"
                    />
                  </p>
                </div>
                <p class="help">The account you want to delegate SP to.</p>
              </div>
            </div>
          </div>

          <div class="field is-horizontal">
            <div class="field-label is-normal">
              <label class="label">Amount</label>
            </div>
            <div class="field-body">
              <div class="field is-expanded">
                <div class="field has-addons">
                  <p class="control">
                    <a class="button is-static">
                      SP
                    </a>
                  </p>
                  <p class="control is-expanded">
                    <input
                      onkeyup={event => actions.delegationForm.changeAmount(event.target.value)}
                      class="input" type="tel" placeholder="Amount in Steem Power"
                    />
                  </p>
                </div>
                <p class="help">The amount of SP you want to delegate.</p>
              </div>
            </div>
          </div>

          <div class="field is-horizontal">
            <div class="field-label">
            </div>
            <div class="field-body">
              <div class="field">
                <div class="control">
                  <button class='button is-primary' onclick={delegateSteemPower}>
                    Delegate
                  </button>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  )
}

Room For Improvement

---

There is no error handling in the sample code. Validation of the various form fields is also missing.

It would also be nice when the user would be redirected to our application after having done the delegation on steemconnect.

If you like, you can make a contribution the above issues on GitHub. I will be happy to merge these in.

Conclusion

---

If you want to follow along you can check out the source codes by using the Git tags I added to the repository.

List tags with git tag.

Checkout part one with git checkout part1.
Checkout part two with git checkout part2.
Checkout part three with git checkout part3.

Click this link to see the application we built in this series.

This article concludes the Steem Delegation tutorial series. I hoped you learned something new.

Stay awesome,
Jo

@cutemachine on Steemit

---

Posted on Utopian.io - Rewarding Open Source Contributors

---