davidbongcc/basic-wallet

This is a tutorial to build a basic wallet generation app using ethers.js and hyperapp. We will launch the app using parcel and surge.

Here's one I prepared earlier ;)

Install required packages

Create a new folder where you want your project to be. From the root folder run: $ npm init $ npm install --save ethers $ npm install --save hyperapp $ npm install -g parcel (if you don't have it already) $ npm install -g surge (if you don't have it already)

Creating a your basic app

Open up your root directory in your text editor.
Create a folder src in your root directory. We will keep all our front end related files here.
In the src folder, create the files index.js and index.html.
Place the following code in your index.html file, as per the parcel setup instructions:

<html>
<body>
  <script src="./index.js"></script>
</body>
</html>

Paste the following code into index.js. (For more information, see ethers.js wallets and signers and Follow the hyperapp example:

// importing the ethers.js library
const ethers = require('ethers');
// importing hyperapp
import { h, app } from "hyperapp";

// Create a wallet object with privateKey and address attributes with a default state set to null.
const state = {
  wallet: {
    privateKey: null,
    address: null
  }
}

// Create a generateWallet action in wallet, that calls the ethers.js library wallet.createRandom() method and returns a newly created privateKey and address. Set the created privateKey and address to the app state.
const actions = {
  wallet: {
    generateWallet: () => state => {
      const wallet = ethers.Wallet.createRandom();
      return {
        privateKey: wallet.privateKey,
        address: wallet.address
      };
    },
  },
};

// Displays the wallet address and privateKey states.
// Create a button that calls the generateWallet action.
const view = (state, actions) => (
  <div>
    <h1>{state.wallet.address}</h1>
    <h1>{state.wallet.privateKey}</h1>
    <button onclick={() => actions.wallet.generateWallet()}>
      Generate Wallet
    </button>
  </div>
);

app(state, actions, view, document.body)

Also, as per the hyperapp set up instructions, remember to create a .babelrc file with the following:

{
  "plugins": [["@babel/plugin-transform-react-jsx", { "pragma": "h" }]]
}

In your terminal window (you should be in the src directory), run $ parcel index.html. This sets up index.html as your entry file for parcel and starts a build for you. By default, it should start a server running on http://localhost:1234. Open a new tab in your browser and visit http://localhost:1234 to see if your basic hyperapp counter example is working.

Launching your app

Once your project is ready to be deployed, run $ parcel build index.html. Build files will automatically be created in a dist directory.

Navigate into the src/dist directory and run $ surge. This will prompt login information from surge.sh. Create a new account if you have not already done and login if you have an existing account. Once this is done, surge will provide you with the url your app has been launched on!

davidbongcc / basic-wallet

Install required packages

Creating a your basic app

Launching your app

About

Languages