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 dependencies 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 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 integrate 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.

Next, we use the API client to query unspent inputs for 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 to 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 Wizardry

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.

Step 1. Bring in

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.

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

Step 2. Install

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 demo: https://dapp-template-nine.vercel.app/

---