Building the Dapp-Template from scratch

In this tutorial, we will create our Dapp-application from scratch. This exercise will demonstrate how we are using create-react-app and pollyfills to create the node decencies needed for pioneer-client.

Straight to the code: https://github.com/BitHighlander/dapp-template

Technologies used

• GitHub: GitHub is an open source version control system for tracking changes in source code. It is used by millions of developers and businesses to store and share their code, manage projects, and collaborate with other developers.
• Create React App: Create React App is a toolchain from Facebook that helps developers quickly create React applications with no build configuration. It provides a modern build setup with no configuration and helps developers focus on writing code.chakra UX framework
• Chakra UI Framework: Chakra UI is a component library for React that makes it easy to create accessible and composable user interfaces. It is built with accessibility and usability in mind, allowing developers to create apps that are accessible to all users.
• KeepKey SDK: KeepKey SDK is an open-source software development kit for building with KeepKey hardware wallet
• Pioneer API/SDK: The Pioneer API/SDK is a toolkit for building blockchain applications and services. It provides tools for developers to quickly and easily build blockchain apps, such as wallets, exchanges, and dapps.

Summary of what this guide covers

• Create a basic react web application
• Use the KeepKey SDK to intergratate with KeepKey Desktop
• Use Pioneer-SDK to query blockchain information

first we import the Pioneer-sdk, and configure

const configPioneer = {
        queryKey:'sdk:test-tutorial-medium',
        username:"dash-dapp",
        spec:"https://pioneers.dev/spec/swagger.json"
      }
      let pioneer = new Client(configPioneer.spec,configPioneer)
      pioneer = await pioneer.init()

We are setting the queryKey, username and spec

Pioneer API docs can be found here

Next we use the api client to query unspent inputs for an xpub.

An xpub is a public key used in a hierarchical deterministic wallet system, and more information can be found in this blog post: https://www.swanbitcoin.com/whats-in-an-xpub/

//get balance DASH
      let data = await pioneer.ListUnspent({network:'DASH',xpub:responsePubkey.xpub})
      data = data.data
      console.log("txData: ",data)

And finally we iterate over these inputs for calculate a balance

let balance = 0
      for(let i = 0; i < data.length; i++){
        balance += parseInt(data[i].value)
      }
      console.log("balance: ",balance)
      let balanceNative = balance
      setBalance(balanceNative)

(NOTE) You can checkout “checkpoint-2” to continue the tutorial from this point

Webpack Wizardy

Now for some magic! Unlike KeepKey-Desktop, which has a mostly static and well-defined API and is statically generated, the Pioneer server is rapidly changing and uses a module that dynamically adapts when the OpenAPI specifications change. It uses a package called OpenAPI-Generator to generate a client. This enables developers to not need to update the local npm client when the API specs change.

openapi-client-axios

And under the hood it uses a package called

json-schema-ref-parser

To dynamically download and parse fresh swagger.json files every time the client is run. This allows the client to update and change without developers needing to update their client packages.

Unfortunately these packages are built for node.js and will require us to use some webpack magic and bring in polyfills to support them.

Step1. bring in config-overrides.js file

const webpack = require('webpack');

module.exports = function override(config) {
    const fallback = config.resolve.fallback || {};
    Object.assign(fallback, {
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify"),
        "assert": require.resolve("assert"),
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "os": require.resolve("os-browserify"),
        "url": require.resolve("url"),
        "net": require.resolve("net"),
        // "zlib": require.resolve("zlib"),
        "zlib": require.resolve("browserify-zlib"),
        "path": require.resolve("path"),
        "tls": require.resolve("tls"),
        //@jsdevtools
        fs: false
    })
    config.resolve.fallback = fallback;
    config.plugins = (config.plugins || []).concat([
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer']
        })
    ])
    return config;
}

Modify Webpack itself to play nice with framer-motion a chakra UI package

webpack.config.js

module.exports = {
    rules: [
        {
            test: /\.m?js/,
            resolve: {
                fullySpecified: false
            },
        }
    ],
    node: {
        fs: "empty"
    }
};

step2. install react-app-rewired

yarn add react-app-rewired

reconfigure our run scripts

"scripts": {
    "start": "GENERATE_SOURCEMAP=false react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

Run your project!

yarn start

View your live page

http://localhost:3000/

A live hosted of the demo

https://dapp-template-nine.vercel.app/