add initial mobx infrastructure

.gitignore

@@ -1,3 +1,6 @@
 # generated proxy commands
 https.cert
 https.key
+
+# local environment vars to ignore
+.env*.local

.vscode/settings.json

@@ -0,0 +1,66 @@
+{
+  "files.associations": {
+    ".commitlintrc": "jsonc",
+    ".electronbuildrc": "jsonc",
+    ".eslintrc": "jsonc",
+    ".lintstagedrc": "jsonc",
+    ".prettierrc": "jsonc",
+    ".renovaterc": "jsonc",
+    ".stylelintrc": "json",
+    ".versionrc": "json",
+    ".tsimportsorter": "json"
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "importSorter.generalConfiguration.sortOnBeforeSave": true,
+  "importSorter.sortConfiguration.removeUnusedImports": true,
+  "importSorter.importStringConfiguration.tabSize": 2,
+  "importSorter.importStringConfiguration.trailingComma": "multiLine",
+  "importSorter.importStringConfiguration.maximumNumberOfImportExpressionsPerLine.count": 90,
+  "importSorter.importStringConfiguration.maximumNumberOfImportExpressionsPerLine.type": "newLineEachExpressionAfterCountLimit",
+  "importSorter.sortConfiguration.customOrderingRules.defaultNumberOfEmptyLinesAfterGroup": 0,
+  "importSorter.sortConfiguration.customOrderingRules.defaultOrderLevel": 50,
+  "importSorter.sortConfiguration.customOrderingRules.rules": [
+    {
+      "regex": "^(first entry ignored by the plugin. idk why)",
+      "orderLevel": 0
+    },
+    {
+      "regex": "^(react)",
+      "orderLevel": 10
+    },
+    {
+      "regex": "^(mobx|mobx-react|types)",
+      "orderLevel": 20
+    },
+    {
+      "regex": "^[@]",
+      "orderLevel": 30
+    },
+    {
+      "type": "importMember",
+      "regex": "^$",
+      "orderLevel": 40,
+      "disableSort": true
+    },
+    {
+      "regex": "^(action|api|store)",
+      "orderLevel": 60
+    },
+    {
+      "regex": "^(components|resources)",
+      "orderLevel": 70
+    },
+    {
+      "regex": "^[.]",
+      "orderLevel": 80
+    }
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

README.md

@@ -5,12 +5,14 @@ Requirements: [Go](https://golang.org/doc/install), [protoc](https://github.com/
 ## One-time Setup
 
 Create certificate for browser to backend proxy communication
+
 ```
 openssl genrsa -out https.key 2048
 openssl req -new -x509 -key https.key -out https.cert -days 365
 ```
 
 Install client app dependencies
+
 ```sh
 npm install -g yarn # if yarn isn't already installed
 cd app/
@@ -20,15 +22,30 @@ yarn
 ## Development
 
 - Spin up a local regtest env with nautilus and loopd (See [docker-regtest](https://github.com/lightninglabs/dev-resources/tree/master/docker-regtest))
-- Copy admin.macaroon hex into App.tsx
-- Start backend server
+- Create a `.env.local` file in the `app/` directory with the following content. Replace `<macaroon>` with the HEX encoded admin.macaroon of the LND node to connect to
+  ```
+  REACT_APP_DEV_MACAROON=<macaroon>
+  REACT_APP_DEV_HOST=http://localhost:3000
+  ```
+- Start backend server, updating the ports for the LND and Loop nodes if necessary
   ```sh
   go run . --lndhost=localhost:10011 --loophost=localhost:11010
-  ```  
+  ```
 - Run the client app in a separate terminal
   ```sh
   cd app
   yarn start
   ```
 
-Open browser at https://localhost:3000 and accept invalid cert (may not work in Chrome, use Firefox)
+Open browser at http://localhost:3000
+
+## Testing
+
+- Run all unit tests and output coverage
+  ```sh
+  yarn test:ci
+  ```
+- Run tests on locally modified files in watch mode
+  ```sh
+  yarn test
+  ```

app/.eslintrc

@@ -0,0 +1,28 @@
+{
+  "parser": "@typescript-eslint/parser", // Specifies the ESLint parser
+  "extends": [
+    "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+    "plugin:@typescript-eslint/recommended", // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    "prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+    "plugin:prettier/recommended" // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2018, // Allows for the parsing of modern ECMAScript features
+    "sourceType": "module", // Allows for the use of imports
+    "ecmaFeatures": {
+      "jsx": true // Allows for the parsing of JSX
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
+    }
+  },
+  "rules": {
+    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+    "react/prop-types": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-member-accessibility": "off",
+    "@typescript-eslint/no-explicit-any": 0
+  }
+}

app/.prettierrc

@@ -0,0 +1,19 @@
+{
+  "overrides": [
+    {
+      "files": [".prettierrc", ".babelrc", ".eslintrc", ".stylelintrc"],
+      "options": {
+        "parser": "json"
+      }
+    }
+  ],
+  "printWidth": 90,
+  "singleQuote": true,
+  "useTabs": false,
+  "semi": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "avoid"
+}

app/package.json

@@ -8,35 +8,49 @@
     "start": "BROWSER=none react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "test:ci": "CI=true yarn test --coverage",
     "eject": "react-scripts eject",
     "protos": "./scripts/build-protos.sh"
   },
   "proxy": "https://localhost:8443",
   "dependencies": {
     "@improbable-eng/grpc-web": "0.12.0",
+    "mobx": "5.15.4",
+    "mobx-react": "6.2.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.1"
+  },
+  "devDependencies": {
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "@types/google-protobuf": "3.7.2",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "@typescript-eslint/eslint-plugin": "^2.27.0",
+    "@typescript-eslint/parser": "^2.27.0",
     "google-protobuf": "3.11.4",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1",
+    "prettier": "2.0.4",
+    "ts-protoc-gen": "0.12.0",
     "typescript": "~3.7.2"
   },
-  "devDependencies": {
-    "@types/google-protobuf": "3.7.2",
-    "ts-protoc-gen": "0.12.0"
-  },
   "eslintConfig": {
     "extends": "react-app",
     "ignorePatterns": [
       "src/types/generated/**/*.js"
     ]
   },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!src/**/*.d.ts",
+      "!src/types/**/*.{js,ts}",
+      "!src/index.tsx"
+    ]
+  },
   "browserslist": {
     "production": [
       ">0.2%",

app/src/App.css

@@ -8,15 +8,27 @@
 }
 
 .App-info {
-  width: auto;
+  width: 800px;
   min-width: 40vmin;
   height: 20vmin;
-  margin: 0 auto 20px;
+  margin: 20px auto;
   overflow-y: scroll;
   font-size: 14px;
   text-align: left;
-  background-color: #ccc;
-  color: black;
+  border: 1px solid #ddd;
+}
+
+.App-table {
+  margin: 0 auto;
+  border: 1px solid #ddd;
+  border-collapse: collapse;
+}
+
+.App-table th,
+.App-table td {
+  padding: 5px 10px;
+  border: 1px solid #ddd;
+  text-align: left;
 }
 
 @media (prefers-reduced-motion: no-preference) {

app/src/App.test.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import App from './App';
 
-test('renders learn react link', () => {
+it('renders the App', () => {
   const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
+  const linkElement = getByText('Node Info');
   expect(linkElement).toBeInTheDocument();
 });