Merge pull request #45 from jpcapurro-atixlabs/integrate-js-bindings

Integrate js bindings

Author: NicolasDP

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",