Merge pull request #175 from lightninglabs/pool-ui

Pool UI (preview)

Author: jamaljsr

.github/workflows/main.yml

@@ -77,6 +77,11 @@ jobs:
         os: [ubuntu-latest, windows-latest, macOS-latest]
 
     steps:
+      - name: Set git to use LF
+        run: |
+          git config --global core.eol lf
+          git config --global core.autocrlf false
+
       - name: git checkout
         uses: actions/checkout@v2
 

.vscode/settings.json

@@ -66,5 +66,5 @@
   "eslint.workingDirectories": [
     "./app"
   ],
-  "eslint.enable": true
+  "typescript.tsdk": "./app/node_modules/typescript/lib"
 }

app/.eslintrc

@@ -24,6 +24,7 @@
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/explicit-member-accessibility": "off",
     "@typescript-eslint/no-explicit-any": 0,
-    "@typescript-eslint/explicit-module-boundary-types": "off"
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "prettier/prettier": ["error", { "endOfLine": "auto" }]
   }
 }

app/.storybook/preview.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import 'mobx-react-lite/batchingForReactDom';
 import { addDecorator } from '@storybook/react';
 import '../src/App.scss';
 import '../src/i18n';

app/package.json

@@ -23,25 +23,27 @@
     "big.js": "5.2.2",
     "bootstrap": "4.5.0",
     "copy-to-clipboard": "3.3.1",
+    "d3": "6.3.1",
     "date-fns": "2.14.0",
     "debug": "4.1.1",
     "emotion-theming": "10.0.27",
     "file-saver": "2.0.2",
+    "history": "4.10.1",
     "http-proxy-middleware": "1.0.4",
     "i18next": "19.5.1",
     "i18next-browser-languagedetector": "5.0.0",
     "lodash": "4.17.19",
     "lottie-web": "5.7.0",
-    "mobx": "5.15.4",
-    "mobx-react-lite": "2.0.7",
-    "mobx-react-router": "4.1.0",
+    "mobx": "6.0.2",
+    "mobx-react-lite": "3.0.1",
     "mobx-utils": "5.6.1",
+    "rc-select": "11.5.0",
     "rc-tooltip": "4.2.1",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
     "react-i18next": "11.7.0",
     "react-router": "5.2.0",
-    "react-scripts": "3.4.1",
+    "react-scripts": "4.0.0",
     "react-toastify": "6.0.6",
     "react-virtualized": "9.21.2",
     "reactour": "1.18.0",
@@ -54,35 +56,36 @@
     "@storybook/addons": "5.3.19",
     "@storybook/preset-create-react-app": "3.1.2",
     "@storybook/react": "5.3.19",
-    "@testing-library/jest-dom": "5.11.0",
-    "@testing-library/react": "10.4.3",
-    "@testing-library/user-event": "12.0.11",
+    "@testing-library/jest-dom": "5.11.5",
+    "@testing-library/react": "11.1.1",
+    "@testing-library/user-event": "12.2.0",
     "@types/big.js": "4.0.5",
+    "@types/d3": "6.2.0",
     "@types/debug": "4.1.5",
     "@types/file-saver": "2.0.1",
     "@types/google-protobuf": "3.7.2",
     "@types/history": "4.7.6",
     "@types/jest": "26.0.3",
     "@types/lodash": "4.14.157",
     "@types/node": "14.0.14",
-    "@types/react": "16.9.41",
-    "@types/react-dom": "16.9.8",
+    "@types/react": "16.9.56",
+    "@types/react-dom": "16.9.9",
     "@types/react-router": "5.1.8",
     "@types/react-virtualized": "9.21.10",
     "@types/reactour": "1.17.1",
-    "@typescript-eslint/eslint-plugin": "3.5.0",
-    "@typescript-eslint/parser": "3.5.0",
+    "@typescript-eslint/eslint-plugin": "4.7.0",
+    "@typescript-eslint/parser": "4.7.0",
     "cross-env": "7.0.2",
-    "eslint-config-prettier": "6.11.0",
+    "eslint-config-prettier": "6.15.0",
     "eslint-plugin-prettier": "3.1.4",
-    "eslint-plugin-react": "7.20.2",
+    "eslint-plugin-react": "7.21.5",
     "google-protobuf": "3.12.2",
-    "jest-canvas-mock": "2.2.0",
+    "jest-canvas-mock": "2.3.0",
     "jest-environment-jsdom-sixteen": "1.0.3",
     "node-sass": "4.14.1",
-    "prettier": "2.0.5",
+    "prettier": "2.1.2",
     "ts-protoc-gen": "0.12.0",
-    "typescript": "~3.9.5"
+    "typescript": "4.0.5"
   },
   "eslintConfig": {
     "extends": "react-app",
@@ -92,6 +95,7 @@
   },
   "jest": {
     "globalSetup": "./src/setupTestsGlobal.ts",
+    "resetMocks": false,
     "collectCoverageFrom": [
       "src/**/*.{js,jsx,ts,tsx}",
       "!src/**/*.d.ts",

app/public/index.html

@@ -4,54 +4,33 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/icons/favicon-32x32.png" />
     <meta name="theme-color" content="#000000" />
-    <link rel="apple-touch-icon" sizes="48x48" href="%PUBLID_URL%/icons/icon-48x48.png" />
-    <link rel="apple-touch-icon" sizes="72x72" href="%PUBLID_URL%/icons/icon-72x72.png" />
-    <link rel="apple-touch-icon" sizes="96x96" href="%PUBLID_URL%/icons/icon-96x96.png" />
+    <link rel="apple-touch-icon" sizes="48x48" href="%PUBLIC_URL%/icons/icon-48x48.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="%PUBLIC_URL%/icons/icon-72x72.png" />
+    <link rel="apple-touch-icon" sizes="96x96" href="%PUBLIC_URL%/icons/icon-96x96.png" />
     <link
       rel="apple-touch-icon"
       sizes="144x144"
-      href="%PUBLID_URL%/icons/icon-144x144.png"
+      href="%PUBLIC_URL%/icons/icon-144x144.png"
     />
     <link
       rel="apple-touch-icon"
       sizes="192x192"
-      href="%PUBLID_URL%/icons/icon-192x192.png"
+      href="%PUBLIC_URL%/icons/icon-192x192.png"
     />
     <link
       rel="apple-touch-icon"
       sizes="256x256"
-      href="%PUBLID_URL%/icons/icon-256x256.png"
+      href="%PUBLIC_URL%/icons/icon-256x256.png"
     />
     <link
       rel="apple-touch-icon"
       sizes="384x384"
-      href="%PUBLID_URL%/icons/icon-384x384.png"
+      href="%PUBLIC_URL%/icons/icon-384x384.png"
     />
     <link
       rel="apple-touch-icon"
       sizes="512x512"
-      href="%PUBLID_URL%/icons/icon-512x512.png"
-    />
-    <link
-      rel="preload"
-      href="%PUBLIC_URL%/fonts/OpenSans-Regular.ttf"
-      as="font"
-      type="font/ttf"
-      crossorigin="anonymous"
-    />
-    <link
-      rel="preload"
-      href="%PUBLIC_URL%/fonts/WorkSans-Light.ttf"
-      as="font"
-      type="font/ttf"
-      crossorigin="anonymous"
-    />
-    <link
-      rel="preload"
-      href="%PUBLIC_URL%/fonts/WorkSans-Medium.ttf"
-      as="font"
-      type="font/ttf"
-      crossorigin="anonymous"
+      href="%PUBLIC_URL%/icons/icon-512x512.png"
     />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Lightning Terminal</title>

app/scripts/build-protos.js

@@ -13,6 +13,7 @@ const appPath = join(__dirname, '..');
  */
 const LND_VERSION_PATTERN = /^\tgithub\.com\/lightningnetwork\/lnd (v[\d.]+-beta)/ms;
 const LOOP_VERSION_PATTERN = /^\tgithub\.com\/lightninglabs\/loop (v[\d.]+-beta)/ms;
+const POOL_VERSION_PATTERN = /^\tgithub\.com\/lightninglabs\/pool (v[\d.]+-alpha)/ms;
 
 /** mapping of proto files to the github url to download each from */
 const protoSources = async () => {
@@ -24,23 +25,32 @@ const protoSources = async () => {
   if (!lndVersion || lndVersion.length !== 2) {
     throw new Error(`go.mod did not match pattern ${LND_VERSION_PATTERN}`);
   }
-  
+
   const loopVersion = goModSource.match(LOOP_VERSION_PATTERN);
   if (!loopVersion || loopVersion.length !== 2) {
     throw new Error(`go.mod did not match pattern ${LOOP_VERSION_PATTERN}`);
   }
 
+  const poolVersion = goModSource.match(POOL_VERSION_PATTERN);
+  if (!poolVersion || poolVersion.length !== 2) {
+    throw new Error(`go.mod did not match pattern ${POOL_VERSION_PATTERN}`);
+  }
+
   console.log(`Found lnd version ${lndVersion[1]} and loop version ${loopVersion[1]}.`);
   return {
     lnd: `lightningnetwork/lnd/${lndVersion[1]}/lnrpc/rpc.proto`,
     loop: `lightninglabs/loop/${loopVersion[1]}/looprpc/client.proto`,
+    trader: `lightninglabs/pool/${poolVersion[1]}/poolrpc/trader.proto`,
+    auctioneer: `lightninglabs/pool/${poolVersion[1]}/poolrpc/auctioneer.proto`,
   };
 };
 
 /** list of proto files and patches to apply */
 const filePatches = {
   lnd: 'lnrpc: {}',
   loop: 'looprpc: {}',
+  trader: 'poolrpc: {}',
+  auctioneer: 'poolrpc: {}',
   'google/api/annotations': 'google: { api: {} }',
   'google/api/http': 'google: { api: {} }',
 };

app/src/App.scss

@@ -14,65 +14,66 @@
 @import '../node_modules/bootstrap/scss/grid';
 @import '../node_modules/bootstrap/scss/custom-forms';
 
-// rc-tooltip component styles
+// react-component component styles
 @import '../node_modules/rc-tooltip/assets/bootstrap_white.css';
+@import './assets/styles/rc-select.scss';
 
 // react-toastify styles
 @import '../node_modules/react-toastify/dist/ReactToastify.css';
 
 @font-face {
   font-family: 'OpenSans Light';
-  src: url('/fonts/OpenSans-Light.ttf') format('truetype');
+  src: url('./assets/fonts/OpenSans-Light.ttf') format('truetype');
   font-style: normal;
   font-weight: 300;
   font-display: swap;
 }
 @font-face {
   font-family: 'OpenSans Regular';
-  src: url('/fonts/OpenSans-Regular.ttf') format('truetype');
+  src: url('./assets/fonts/OpenSans-Regular.ttf') format('truetype');
   font-style: normal;
   font-weight: 400;
   font-display: swap;
 }
 @font-face {
   font-family: 'OpenSans SemiBold';
-  src: url('/fonts/OpenSans-SemiBold.ttf') format('truetype');
+  src: url('./assets/fonts/OpenSans-SemiBold.ttf') format('truetype');
   font-style: normal;
   font-weight: 600;
   font-display: swap;
 }
 @font-face {
   font-family: 'OpenSans Bold';
-  src: url('/fonts/OpenSans-Bold.ttf') format('truetype');
+  src: url('./assets/fonts/OpenSans-Bold.ttf') format('truetype');
   font-style: normal;
   font-weight: 700;
   font-display: swap;
 }
 @font-face {
   font-family: 'OpenSans ExtraBold';
-  src: url('/fonts/OpenSans-ExtraBold.ttf') format('truetype');
+  src: url('./assets/fonts/OpenSans-ExtraBold.ttf') format('truetype');
   font-style: normal;
   font-weight: 800;
   font-display: swap;
 }
 
 @font-face {
   font-family: 'WorkSans Light';
-  src: url('/fonts/WorkSans-Light.ttf') format('truetype');
+  src: url('./assets/fonts/WorkSans-Light.ttf') format('truetype');
   font-style: normal;
   font-weight: 300;
   font-display: swap;
 }
 @font-face {
   font-family: 'WorkSans Medium';
-  src: url('/fonts/WorkSans-Medium.ttf') format('truetype');
+  src: url('./assets/fonts/WorkSans-Medium.ttf') format('truetype');
   font-style: normal;
   font-weight: 500;
   font-display: swap;
 }
 @font-face {
   font-family: 'WorkSans SemiBold';
-  src: url('/fonts/WorkSans-SemiBold.ttf') format('truetype');
+  src: url('./assets/fonts/WorkSans-SemiBold.ttf') format('truetype');
   font-style: normal;
   font-weight: 600;
   font-display: swap;
@@ -81,7 +82,7 @@
 html,
 body,
 #root {
-  min-height: 100vh;
+  background-color: #252f4a;
   width: 100%;
   min-width: 1024px;
 }

app/src/App.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import './App.scss';
 import { createStore, StoreProvider } from 'store';
 import AlertContainer from 'components/common/AlertContainer';
+import FullHeight from 'components/common/FullHeight';
 import { ThemeProvider } from 'components/theme';
 import TourHost from 'components/tour/TourHost';
 import Routes from './Routes';
@@ -10,13 +11,15 @@ const App = () => {
   const store = createStore();
 
   return (
-    <StoreProvider store={store}>
-      <ThemeProvider>
-        <Routes />
-        <AlertContainer />
-        <TourHost />
-      </ThemeProvider>
-    </StoreProvider>
+    <FullHeight>
+      <StoreProvider store={store}>
+        <ThemeProvider>
+          <Routes />
+          <AlertContainer />
+          <TourHost />
+        </ThemeProvider>
+      </StoreProvider>
+    </FullHeight>
   );
 };
 

app/src/Routes.tsx

@@ -7,6 +7,7 @@ import { Layout } from 'components/layout';
 const LazyAuthPage = React.lazy(() => import('components/auth/AuthPage'));
 const LazyLoopPage = React.lazy(() => import('components/loop/LoopPage'));
 const LazyHistoryPage = React.lazy(() => import('components/history/HistoryPage'));
+const LazyPoolPage = React.lazy(() => import('components/pool/PoolPage'));
 const LazySettingsPage = React.lazy(() => import('components/settings/SettingsPage'));
 
 const Routes: React.FC = () => {
@@ -23,6 +24,7 @@ const Routes: React.FC = () => {
                 <Suspense fallback={<Loading delay={500} />}>
                   <Route path="/loop" component={LazyLoopPage} />
                   <Route path="/history" component={LazyHistoryPage} />
+                  <Route path="/pool" component={LazyPoolPage} />
                   <Route path="/settings" component={LazySettingsPage} />
                 </Suspense>
               </Switch>