A Non-Fancy Interface to Broadcast Custom-Json Operations Built in 1 Night

Hello everyone.

I was bored one night, my 3-month long internship had just ended and I had nothing better to do. So, I just decided to nerd it out and learn about Github actions.

For the uninitiated, Github actions is a CI-CD(stands for Continuous Integration - Continuous Deployment) feature that can build and test your scripts right when you push a new commit.

While I was interested in learning about Github actions, I had also been thinking about building an NFT market but then decided it wasn't worth the effort since there are already quite a few good ones out there.

At the same time, I have been playing with Hive-Engine stuff for a while now and I wanted an interface to broadcast custom-json operations. This was before I knew about JsonDoctor.

Thus, my average looking but fully functioning interface to broadcast custom-jsons was born.

https://rahul-thapa.github.io/hive-custom-json/

This was built using React and hive_keychain.js. I built this in one night and if you look at the commits, it took me a while before the CI-CD was set up properly.(Read edit at the end)

onChangeHandler = (e) => {
    const key = e.target.name;
    const obj = {};
    obj[key] = e.target.value;
    this.setState({ ...obj });
  };

The function above listens for change events on the input fields and puts them in their state for the below function.

onSubmitHandler = (e) => {
    e.preventDefault();
    hive_keychain.requestCustomJson(
      this.state.username,
      this.state.id,
      this.state.key,
      this.state.json,
      "Doing stuff"
    );
  };

And this function gets called when the submit button is clicked which then invokes keychain to broadcast the transaction.

The YAML script below does the heavy lifting of installing the dependencies and does the CI-CD stuff.

# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Auto Serve for react

on:
  push:
    branches: [master]
  pull_request:
    branches: [master]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - run: npm ci
      - run: npm run build --if-present

      - name: Deploy
        run: |
          git config --global user.name $user_name
          git config --global user.email $user_email
          git remote set-url origin https://${github_token}@github.com/${repository}
          npm run deploy
        env:
          user_name: "github-actions[bot]"
          user_email: "github-actions[bot]@users.noreply.github.com"
          github_token: ${{ secrets.HIVECJ_DEPLOY_ACCESS_TOKEN }}
          repository: ${{ github.repository }}

And there you have it. Feel free to use it however you wish to. The code is open-source. If this was at all helpful to you, please let me know.

Link to github repo

Edit due to my stupidity:

While I was reviewing my code, I found I had leaked some information that I should not have. Hence I had to remove all the commit history. It was originally pushed on November 26 even if GitHub says it was today.