Creating a simple cryptocurrency: part 13

The latest repository

Combining server.js and client.js into scryp.js

The next stage of development is to enhance client.js to have a user interface (UI) with a form and button for making a payment and server monitor showing the balance of the client account and recent client transactions. Since much of the same code needs to be used, it makes sense to combine server.js and client.js into one program scryp.js, which will be easier to maintain.

In this article, we concentrate on the UI and payment form/button and leave the server monitor for the future.

Electron user interface (UI)

We are using Javascript/Node.js code for our server program, which does not need a user interface. It can be launched from the command line in a console window, with port numbers as arguments. The program loads the .seed, .keys and .boot files and then logs its activities, which can be redirected to a log file. Javascript was created for browsers, which are user interfaces; then Node.js adapted Javascript to function as a server and/or interact with the operating system/file system, and able to function headless (without even a console window).

Node.js has become so popular that naturally attempts have been made to give it a UI. A natural fit with Node.js would seem to be browsers, because they have a UI, visually and structurally controlled by CSS and HTML, with behavior controlled by Javascript. But the technical obstacles are formidable. Electron is the best solution I have found, a relatively clean and complete union of the two technologies; it contains both Node.js and the Chromium browser.

We will use Electron for our client UI, at first consisting of just a payment form/button.

Installing Electron

1. Determine if Electron is already on your system, and which version it is: $ electron -v. It will be on your system if you are using Atom, for example, as I do.
2. If Electron is not on your system, you must install it. It is probably available in your operating system's repository. See below for a way to install it via NPM.
3. Chances are good that the version of Node.js embedded in your version of Electron is not compatible with the version of Node.js already on your system. To check this, first get the Node.js version: $ node -v. Determine the ABI (application binary interface a.k.a NODE_MODULE_VERSION) from this table. Compare it with the Electron ABI like so: $ electron --abi. On my system the former is 57 while the latter is 50.
4. If they are, in fact, incompatible, you must have a separate node_modules directory for downloaded NPM packages needed by the client, including any needed by Electron. In this case, it is best to have a separate client directory containing a node_modules subdirectory and all other programs needed by the client (such as scryp.js), without any other node_modules directory higher in the directory tree.
5. Place the shell script npm-electron in your directory of executables (which is included in $PATH), and make it executable: $ chmod +x npm-electron. This script adapts the npm program to install NPM packages compatible with your version of Electron and its embedded Node.js. Edit it as needed. Probably the only change needed is to replace the version number of Electron with your version.
6. Create a client directory neither above nor below any server directories in the directory tree. Change into it.
7. If Electron is not already installed, install it with npm globally and in your directory for executables: $ npm install electron -g; npm install electron. Put its version number in the npm-electron script.
8. Use npm-electron to download the following packages, using commands like $ npm-electron install package-name:
   1. ed25519-supercop
   2. webtorrent
   3. jquery (for easier control over the UI)
   4. object-entries (a shim needed for older versions of Node.js that are not ECMAScript 2017 compatible)
   5. [email protected] ( needed only for programmatic access to the remote module of electron, if it is already installed on your system and has version number x.y.z, which must also match the version number in npm-electron)
9. Use npm-electron ls -depth=0 to check the top-level contents of the node_modules directory that has been created in the new client directory.
10. As explained in a previous article, two of the webtorrent dependencies bittorrent-dht and k-rpc must be overrided or overwritten. Now, download repaired versions of bittorrent-dht and k-rpc, rename them without the -master extension, then copy them over their buggy counterparts in the node_modules directory (after first saving them somewhere for future use, if needed). Eventually, this step can be skipped.
11. Put the files index.js, index.html and scryp.js into the client directory. Note that scryp.js can be used without modification in either a client directory or a server directory. It is best to link scryp.js to the main copy in your executable directory, to avoid out-of-sync files.
12. Copy or preferably link from a server directory a .keys file containing the server public keys to your new client directory. The .seed and .boot files will be created automatically.
13. The node_modules directory used by servers should be moved into the directory for executables, after overwritting the bittorrent-dht and k-rpc subdirectories as described above. It should contain the same packages as its client counterpart, except installed by npm rather than npm-electron. And the old server.js program in that directory should be replaced with scryp.js.

This procedure is rather complicated and it would be unreasonable to expect a typical user of Scryp to follow it. But it should eventually be possible to create a single platform-specific downloadable executable file with the NPM electron-builder package.

Testing the client

1. In the console window, change to the new client directory.
2. Launch the client: $ electron index.js port-number or $ electron . to use the default torrent/dht port.
3. A Chrome window opens with a payment form consisting of two entry fields Payment and Payee and a button Send Payment.
4. Meanwhile, the program continues to log reports to the console, showing the configuration, initialization and which of the servers is the current alpha/beta server. One of the items in the console is a newly created public key.
5. Launch three servers and use pay.js to send a payment to the new account. Or, temporarily substitute the .seed file of a server for the newly created .seed file and restart the client, just to make a payment to the new account.
6. Return to the Chrome window and enter a payment amount and a payee public key, belonging to one of the three servers or a random key.
7. Click the payment button and observe to which server the payment is sent. The client automatically determines the correct server and whether the blackout is in effect. The payment is sent regardless of whether the destination server is running.
8. Since the client is unaware of its own account balance, it does not yet check if the payment is more than the balance, but it does check that the maximum payment 2^32 -1 is not exceeded.
9. The Payee is verified to be 64 hex-digits.
10. Notice that the client window has a menu, including View -> Toggle Developer Tools which opens the Chrome developer tools including a console window which will display the output of any console.log statements in scryp.js.

< part 12 | part 14 >