react-steem-provider

What is react-steem-provider?

Start quickly a steem project with this flexible library that combines SteemConnect and Steem

---

Content

1. Installing.

2. Using SteemConnect Context.

- Step 1: Setting up our provider.

- Step 2: Using the context consumer.

- What is in the steem instance?

3. Async Steem functions.

4. Helpers.

5. Example.

---

1.Installing

$ npm install react-steem-provider
$ yarn add react-steem-provider

---

2.Using SteemConnect Context.

This library implements a context provider to manage the login state and other steemConnect instances.

Step 1: Setting up the context provider (you MUST do this step)

When the context provider is mounted, checks if there is the callback url with the token from SteemConnect to authenticate the user automatically.

Note: The context provider requires the Steem Connect configJSON of your project

App.js

import React from 'react';
import SteemProvider from 'react-steem-provider';
import Dashboard from './Dashboard'; //Caution!

//SteemConnect Config JSON
const STEEM_CONFIG = {
        baseURL: 'https://steemconnect.com',
        app: '<appname>', 
        callbackURL: "<callbackURL>", 
        scope: [ 'login', 'vote', 
                'comment', 'delete_comment', 
                'comment_options', 'custom_json'
                ]
        };



const App = ()=>{
  return( 
    <SteemProvider config={STEEM_CONFIG}>
      <Dashboard />
    </SteemProvider>
    );
}

export default App;

---

Step 2: Using the Steem Context Consumer.

Once we have the SteemProvider in a parent component (App.js) we need to consume our Context Provider to use the instances and functions from SteemConnect, in React there are many options to consume context, let's some of them.

(Option A) - Using steem context consumer with useContext (hooks)

Note: Your React version must be >= 16.8 to use hooks

Dahsboard.js

import React, {useContext} from 'react';
import {SteemContext} from 'react-steem-provider';

const Dashboard = (props)=>{
  const {
    loginUrl,
    auth,
    loading
    } = useContext(SteemContext);
    
  if(loading) return <h1>Loading, please wait...</h1>

  return( 
    <React.Fragment>
      {auth?<h1>You are logged</h1>:<a href={loginUrl}>Log in</a>}
    </React.Fragment>
    )
}

export default Dashboard;

---

(Option B) - Using steem context consumer with withSteem (HOC)

Dahsboard.js

import React from 'react';
import {withSteem} from 'react-steem-provider'; //CONSUMER HOC

//Note: withSteem(HOC) is responsible of the **steem** prop. 
const Dashboard = withSteem(({steem})=>{
  const {
    loginUrl,
    auth,
    loading
    } = steem;

  if(loading) return (<h1>Loading, please wait...</h1>);

  return( 
    <React.Fragment>
      {auth?<h1 >You are logged</h1>:<a href={loginUrl}>Log in</a>}
    </React.Fragment>
    )
});


export default Dashboard;


/*
NOTE:

Instead of using withSteem (HOC), you can import the **SteemContext** as well to use it's Consumer .
import {SteemContext} from 'react-steem-provider';

<SteemContext.Consumer>
{(steem)=>{
    return <h1><SteemContext.Consumer></h1>
}}
</SteemContext.Consumer>

*/

---

What is in the steem instance?

List of instances from SteemContext (steem)

    {
        loginUrl,//SteemConnect loginUrl 
        auth, //steem user or null
        steemConnect,//steemConnect original instance (client)
        logout, //logout function
        loading, //true when auth is loading
        actions //Set of writtig functions
    }

---

List of actions from SteemContext (steem.actions)

Note: You MUST be logged to use some actions

• Get logged user

await steem.actions.me()

• Publish a post

await steem.actions.post(post_params, advanced = [])

post_params

post_params = {
   permlink, /*This is not required an uuidv4 id is replace in case if npt pasing this argument*/
   title,
   body,
   category,
   parent_permlink,
   jsonmetadata = {}
}

advanced (optional)

advanced = [["comment_options", {...options }], ["vote", {...voteOptions }], ...otherOperations]

• Reply post

await steem.actions.reply(reply_params, advanced=[])

reply_params

reply_params = {
   author, 
   post, 
   body,  
   jsonmetadata = {}
}

advanced (optional)

advanced = [["comment_options", {...options }], ["vote", {...voteOptions }], ...otherOperations]

• Remove post

await steem.actions.remove(permlink)

• Create regular post

await steem.actions.comment(parentAuthor, parentPermlink, author, permlink, title, body, jsonMetadata)

• Reblog Post

await steem.actions.reblog(account, author, permlink)

• Follow account

await steem.actions.follow(following)

• Unfollow account

await steem.actions.unfollow(unfollower, unfollowing)

• Claim Reward Balance

await steem.actions.claimRewardBalance(account, rewardSteem, rewardSbd, rewardVests)

• Update User Metadata

await steem.actions.updateUserMetadata(metadata)

• Remove token

await steem.actions.revokeToken()

---

3.Async Steem functions:

A simplificated set of async steem functions.

Note: you dont need to use the SteemContext to implement this functions

import SteemAsync from 'react-steem-provider/SteemAsync';

• List of posts in the platform.

// getBy: "Trending | Created | Hot | Promoted"
 SteemAsync.readPostGeneral(tag, getBy, limit).then(
    (response)=>{ console.log(response) }).catch(
    (err)=>console.error(err));

• Get full post

 SteemAsync.getPost(author, permlink).then(
    (response)=>{ console.log(response) }).catch(
    (err)=>console.error(err));

• Get user by username

const user =  await SteemAsync.getUserAccount(username);

• List of posts in an account

const post = await SteemAsync.getDiscussionsByBlog(username, limit);

• Get Follows Count in an account

 SteemAsync.getFollowCount(username).then(
    (response)=>{ console.log(response) }).catch(
    (err)=>console.error(err));

• Get following

  await SteemAsync.getFollowing(username, limit, startAtSting = "a"); 

• Get Followers

const followers =  SteemAsync.getFollowers(username, limit,  startAtSting = "a").then(
    (response)=>{ console.log(response) }).catch(
    (err)=>console.error(err));

---

You can access to the steem.js package:

import {steem} from 'react-steem-provider/SteemAsync';

---

4.Helpers

Useful functions for your steem project.

• Parse reputation

import {parserSteemRep, parserSteemSimpleRep} from 'react-steem-provider/Helpers';
parserSteemRep("<<reputation>>") 
parserSteemSimpleRep("<<reputation>>")

• Parse Steem markdown

import {parseSteemMarkdown} from 'react-steem-provider/Helpers';
parseSteemMarkdown("<<post.body>>")

---

5.Example

Dahsboard.js

Note: Remember to implement the context provider as parent component.

import React, { useEffect, useContext } from "react";
import SteemAsync from "react-steem-provider/SteemAsync";
import { SteemContext } from "react-steem-provider";

const PrintPost = props => {
  const { actions, auth } = useContext(SteemContext);

  useEffect(async () => {
    let post = await SteemAsync.readPostGeneral("", "Trending", 10);
    console.log(post);
  });

  const makeANewPost = () => {
    actions
      .post({
        title: "_react-steem-provider",
        body: "### npm install react-steem-provider",
        category: "developer"
      })
      .then(() => {
        alert("Post created");
      })
      .catch(error => {
        alert("UPS, there is an error");
      });
  };

  if (!auth) throw "User not logged";
  return (
    <React.Fragment>
      <h1>
        This button create a post in your blog, be wise when you click on it{" "}
      </h1>
      <button onClick={makeANewPost}>Make a new post</button>
    </React.Fragment>
  );
};

const Dashboard = props => {
  const { auth, loginUrl } = useContext(SteemContext);
  return (
    <React.Fragment>
      {auth ? <PrintPost /> : <a href={loginUrl}>Log in</a>}
    </React.Fragment>
  );
};

export default Dashboard;

Contribute

Help us to make of this an epic package.

License

Licensed under MIT