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 ;)
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)
- Open up your root directory in your text editor.
- Create a folder
srcin your root directory. We will keep all our front end related files here. - In the
srcfolder, create the filesindex.jsandindex.html. - Place the following code in your
index.htmlfile, 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
srcdirectory), run$ parcel index.html. This sets upindex.htmlas your entry file for parcel and starts a build for you. By default, it should start a server running onhttp://localhost:1234. Open a new tab in your browser and visithttp://localhost:1234to see if your basic hyperapp counter example is working.
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!