Including js bindings via npm dependency

HACK: wasm file added as in the electron 'file' config so it ends up in the asar archive.
modified UX so it specifies that the address and not the accountid should be used
updated documentation

Author: jpcapurro-atixlabs

examples/wallet/README.md

@@ -6,27 +6,46 @@ This is a light wallet, it does not run its own node, and depends on one running
 The node address will be configurable in the future 🙃
 
 ## development tools
-* `npm run dev`: to run the app with a debugger
-* `npm run lint`: lint js files with eslint
-* `npm run lint-styles`: lint css files with stylelint
-* `npm run flow`: check [flow](https://flow.org/) type annotations
+
+- `yarn install`: install dependencies
+- `yarn dev`: to run the app with a debugger
+- `yarn lint`: lint js files with eslint
+- `yarn lint-styles`: lint css files with stylelint
+- `yarn flow`: check [flow](https://flow.org/) type annotations
+
+To run the application in development mode, first install the dependencies with
+`yarn install` and then run it with `yarn dev`.
+
+To build an appimage package, first install the dependencies with
+`yarn install` and then package the app with `yarn package-{linux,win}`
 
 ## TODO
+
 - [ x ] show the balance of a given address
-- [  ] verify the validity of an address before making a request to the a node (js bindings will be added here, ideally, before tackling any more complex issues such as creating transactione)
-- [  ] let the user use its private key.
-    - [  ] prompt the user for its private key, ideally locking parts of the app until a valid one is inserted
-    - [  ] bip39?
-- [  ] send account-based transactions
-    - [  ] UI
-    - [  ] verify validity of the recipient's address
-    - [  ] update sender's account counter
-    - [  ] generate transaction
-        - [  ] add output
-        - [  ] add witness
-    - [  ] broadcast transaction
-- [  ] locally store the user's private key
-    - [  ] define a password schema for unlocking the app (so the funds are secure if the user's device is used by someone else)
-    - [  ] define a password schema for encrypting the private keys(so the funds are secure if the device's storage is compromised)
-- [  ] view mode?
-- [  ] list user transactions and their status?
+- [ ] verify the validity of an address before making a request to the a node (js bindings will be added here, ideally, before tackling any more complex issues such as creating transactione)
+  - [ x ] add js-chain-libs bindings
+  - [ ] handle errors in address format
+- [ ] let the user use its private key.
+  - [ ] prompt the user for its private key, ideally locking parts of the app until a valid one is inserted
+  - [ ] bip39?
+- [ ] send account-based transactions
+  - [ ] UI
+  - [ ] verify validity of the recipient's address
+  - [ ] update sender's account counter
+  - [ ] generate transaction
+    - [ ] add output
+    - [ ] add witness
+  - [ ] broadcast transaction
+- [ ] locally store the user's private key
+  - [ ] define a password schema for unlocking the app (so the funds are secure if the user's device is used by someone else)
+  - [ ] define a password schema for encrypting the private keys(so the funds are secure if the device's storage is compromised)
+- [ ] view mode?
+- [ ] list user transactions and their status?
+
+## Tech debt
+
+- [ ] extract flow types from the js-chain-libs with [flowtype](https://github.com/joarwilk/flowgen), and have a module that exports them and abstracts the initialization of the wasm
+- [ ] research: Is the mechanism for importing wasm smart enough to not load it
+      several times into memory if it is imported in more than one place?
+  - [ ] if it is not, have the aforementioned module take care of
+        initializing it only one time.

examples/wallet/app/actions/addressInfo.js

@@ -1,28 +1,35 @@
 // @flow
 import type { Dispatch } from 'redux';
 import { getBalance } from '../utils/nodeConnection';
-import { Address, Balance } from '../models';
+
+const wasmBindings = import('js-chain-libs/js_chain_libs');
 
 export const SET_ADDRESS = 'SET_ADDRESS';
 
 export type SetAddressAction = {
   type: 'SET_ADDRESS',
-  address: Address,
-  balance: Balance
+  address: string,
+  balance: string
 };
 
-export function setAddress(address: string) {
+export function setAddress(addressStr: string) {
   return function setAddressAndRefreshBalance(
     dispatch: Dispatch<SetAddressAction>
   ) {
-    // FIXME: we should add the logic to convert from the address to the accountId.
-    // currently, it only works if the accountId is passed instead.
-    return getBalance(address).then(balance =>
-      dispatch({
-        type: SET_ADDRESS,
-        address,
-        balance
+    return wasmBindings
+      .then(({ Account, Address }) => {
+        const address = Address.from_string(addressStr);
+        const accountId = Account.from_address(address)
+          .to_identifier()
+          .to_hex();
+        return getBalance(accountId);
       })
-    );
+      .then(balance =>
+        dispatch({
+          type: SET_ADDRESS,
+          address: addressStr,
+          balance
+        })
+      );
   };
 }

examples/wallet/app/components/AddressInfo.js

@@ -17,8 +17,7 @@ export default ({ setAddress, balance, address }: Props) => {
     <div>
       <form onSubmit={handleSubmit}>
         <label htmlFor="address">
-          {/* FIXME: get the address here and compute the accountId from it somewhere else */}
-          accountId:
+          Address:
           <input
             type="text"
             name="address"
@@ -28,7 +27,7 @@ export default ({ setAddress, balance, address }: Props) => {
         </label>
         <input type="submit" value="Get balance!" />
       </form>
-      <p>Current Account Id: {address}</p>
+      <p>Current Address: {address}</p>
       <p>Balance: {balance}</p>
     </div>
   );

examples/wallet/package.json

@@ -61,6 +61,7 @@
     "files": [
       "app/dist/",
       "app/app.html",
+      "node_modules/js-chain-libs/js_chain_libs_bg.wasm",
       "app/main.prod.js",
       "app/main.prod.js.map",
       "package.json"
@@ -268,6 +269,7 @@
     "electron-log": "3.0.4",
     "electron-updater": "4.0.6",
     "history": "4.9.0",
+    "js-chain-libs": "0.1.2",
     "react": "16.8.6",
     "react-dom": "16.8.6",
     "react-hot-loader": "4.8.2",