feat: ✨ stats view (#54)

* feat: ✨ channel stats * chore: 🔧 add node resolver * chore: 🔧 add monitored time * chore: 🔧 and queries to front * fix: 🐛 floats to ints * chore: 🔧 add progress bars * chore: 🔧 add channel resolver * chore: 🔧 refactor forwards frontend * refactor: ♻️ channel resolvers * chore: 🔧 refactor channel queries * refactor: ♻️ peer resolver * refactor: ♻️ peer query * fix: 🐛 small changes * fix: 🐛 typo * chore: 🔧 stats view wip * chore: 🔧 add update script * chore: 🔧 improve ui * chore: 🔧 move buttons * fix: 🐛 home path * chore: 🔧 add public key to node resolver * refactor: ♻️ resume resolver * chore: 🔧 remove test account * chore: 🔧 change logger for lnpay * feat: ✨ github version Co-authored-by: apotdevin <[email protected]>
apotdevin · Jun 5, 2020 · 009195c · 009195c
1 parent f80492b
commit 009195c
Show file tree

Hide file tree

Showing 85 changed files with 3,295 additions and 826 deletions.
diff --git a/README.md b/README.md
@@ -13,10 +13,14 @@
 - [Development](#development)
 - [Docker deployment](#docker)
 
+---
+
 ## Introduction
 
 ThunderHub is an **open-source** LND node manager where you can manage and monitor your node on any device or browser. It allows you to take control of the lightning network with a simple and intuitive UX and the most up-to-date tech stack.
 
+---
+
 ### Integrations
 
 **BTCPay Server**
@@ -25,6 +29,8 @@ ThunderHub is currently integrated into BTCPay for easier deployment. If you alr
 **Raspiblitz**
 For Raspiblitz users you can also get ThunderHub running by following this [gist](https://gist.github.com/openoms/8ba963915c786ce01892f2c9fa2707bc)
 
+---
+
 ### Tech Stack
 
 This repository consists of a **NextJS** server that handles both the backend **Graphql Server** and the frontend **React App**. ThunderHub connects to your Lightning Network node by using the gRPC ports.
@@ -38,6 +44,8 @@ This repository consists of a **NextJS** server that handles both the backend **
 - GraphQL
 - Ln-Service
 
+---
+
 ## Features
 
 ### Monitoring
@@ -89,6 +97,8 @@ This repository consists of a **NextJS** server that handles both the backend **
 - Loop In and Out to provide liquidity or remove it from your channels.
 - Storefront interface
 
+---
+
 ## **Requirements**
 
 - Yarn/npm installed
@@ -109,6 +119,8 @@ npm run dev -> npm run dev:compatible
 
 **HodlHodl integration will not work with older versions of Node!**
 
+---
+
 ## Config
 
 You can define some environment variables that ThunderHub can start with. To do this create a `.env` file in the root directory with the following parameters:
@@ -190,6 +202,8 @@ location /thub/ {
 }
 ```
 
+---
+
 ## Installation
 
 To run ThunderHub you first need to clone this repository.
@@ -224,26 +238,56 @@ yarn start -p 4000
 npm start -- -p 4000
 ```
 
+---
+
 ## Updating
 
-To update ThunderHub to the latest version follow these commands.
+There are multiple ways to update ThunderHub to it's latest version.
 
 _Commands have to be called inside the thunderhub repository folder._
 
-```js
+**1. Script Shortcut**
+
+```sh
+// Yarn
+yarn update
+
+// NPM
+npm run update
+```
+
+**2. Script**
+
+```sh
+sh ./scripts/updateToLatest.sh
+```
+
+**3. Step by Step**
+
+```sh
 // Yarn
 git pull
 yarn
 yarn build
-yarn start
 
 // NPM
 git pull
 npm install
 npm run build
+```
+
+**Then you can start your server:**
+
+```sh
+// Yarn
+yarn start
+
+// NPM
 npm run start
 ```
 
+---
+
 ## Development
 
 If you want to develop on ThunderHub and want hot reloading when you do changes, use the following commands:
@@ -256,6 +300,8 @@ yarn dev
 npm run dev
 ```
 
+---
+
 ## Docker
 
 ThunderHub also provides docker images for easier deployment. [Docker Hub](https://hub.docker.com/repository/docker/apotdevin/thunderhub)

diff --git a/codegen.yml b/codegen.yml
@@ -2,6 +2,9 @@ overwrite: true
 schema: 'http://localhost:3000/api/v1'
 documents: 'src/graphql/**/*.ts'
 generates:
+  src/graphql/fragmentTypes.json:
+    plugins:
+      - fragment-matcher
   src/graphql/types.ts:
     - typescript
   src/graphql/:

diff --git a/config/client.tsx b/config/client.tsx
@@ -3,8 +3,16 @@ import * as React from 'react';
 import Head from 'next/head';
 import { ApolloProvider } from '@apollo/react-hooks';
 import { ApolloClient } from 'apollo-client';
-import { InMemoryCache } from 'apollo-cache-inmemory';
+import {
+  InMemoryCache,
+  IntrospectionFragmentMatcher,
+} from 'apollo-cache-inmemory';
 import getConfig from 'next/config';
+import introspectionQueryResultData from 'src/graphql/fragmentTypes.json';
+
+const fragmentMatcher = new IntrospectionFragmentMatcher({
+  introspectionQueryResultData,
+});
 
 let globalApolloClient = null;
 
@@ -32,7 +40,7 @@ function createIsomorphLink(ctx) {
  */
 function createApolloClient(ctx = {}, initialState = {}) {
   const ssrMode = typeof window === 'undefined';
-  const cache = new InMemoryCache().restore(initialState);
+  const cache = new InMemoryCache({ fragmentMatcher }).restore(initialState);
 
   // Check out https://github.com/zeit/next.js/pull/4611 if you want to use the AWSAppSyncClient
   return new ApolloClient({

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,7 +28,8 @@
     "build:64": "docker build -f arm64v8.Dockerfile -t apotdevin/thunderhub:test-arm64v8 .",
     "build:manifest": "docker manifest create apotdevin/thunderhub:test apotdevin/thunderhub:test-amd64 apotdevin/thunderhub:test-arm32v7 apotdevin/thunderhub:test-arm64v8",
     "upgrade-latest": "npx npm-check -u",
-    "tsc": "tsc"
+    "tsc": "tsc",
+    "update": "sh ./scripts/updateToLatest.sh"
   },
   "keywords": [],
   "author": "",
@@ -63,6 +64,7 @@
     "numeral": "^2.0.6",
     "qrcode.react": "^1.0.0",
     "react": "^16.13.1",
+    "react-circular-progressbar": "^2.0.3",
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^16.13.1",
     "react-feather": "^2.0.8",
@@ -86,6 +88,7 @@
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
     "@graphql-codegen/cli": "^1.15.0",
+    "@graphql-codegen/fragment-matcher": "^1.15.1",
     "@graphql-codegen/introspection": "^1.15.0",
     "@graphql-codegen/near-operation-file-preset": "^1.15.0",
     "@graphql-codegen/typescript": "^1.15.0",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -12,6 +12,7 @@ import { Footer } from '../src/layouts/footer/Footer';
 import 'react-toastify/dist/ReactToastify.css';
 import { PageWrapper, HeaderBodyWrapper } from '../src/layouts/Layout.styled';
 import { parseCookies } from '../src/utils/cookies';
+import 'react-circular-progressbar/dist/styles.css';
 
 toast.configure({ draggable: false, pauseOnFocusLoss: false });
 

diff --git a/pages/forwards.tsx b/pages/forwards.tsx
@@ -65,7 +65,7 @@ const ForwardsView = () => {
         </CardTitle>
         {data.getForwards.forwards.length <= 0 && renderNoForwards()}
         <Card mobileCardPadding={'0'} mobileNoBackground={true}>
-          {data.getForwards.forwards.map((forward: any, index: number) => (
+          {data.getForwards.forwards.map((forward, index: number) => (
             <ForwardCard
               forward={forward}
               key={index}

diff --git a/pages/home.tsx b/pages/home.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { GridWrapper } from 'src/components/gridWrapper/GridWrapper';
 import { withApollo } from 'config/client';
+import { Version } from 'src/components/version/Version';
 import { NetworkInfo } from '../src/views/home/networkInfo/NetworkInfo';
 import { AccountInfo } from '../src/views/home/account/AccountInfo';
 import { QuickActions } from '../src/views/home/quickActions/QuickActions';
@@ -13,6 +14,7 @@ import { NodeBar } from '../src/components/nodeInfo/NodeBar';
 const HomeView = () => {
   return (
     <>
+      <Version />
       <AccountInfo />
       <NodeBar />
       <ConnectCard />

diff --git a/pages/settings.tsx b/pages/settings.tsx
@@ -35,7 +35,7 @@ const SettingsView = () => {
 };
 
 const Wrapped = () => (
-  <GridWrapper>
+  <GridWrapper noNavigation={true}>
     <SettingsView />
   </GridWrapper>
 );

diff --git a/pages/stats.tsx b/pages/stats.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+import { GridWrapper } from 'src/components/gridWrapper/GridWrapper';
+import { withApollo } from 'config/client';
+import { VolumeStats } from 'src/views/stats/VolumeStats';
+import { TimeStats } from 'src/views/stats/TimeStats';
+import { FeeStats } from 'src/views/stats/FeeStats';
+import { StatResume } from 'src/views/stats/StatResume';
+import { StatsProvider } from 'src/views/stats/context';
+import { SingleLine } from '../src/components/generic/Styled';
+
+export const ButtonRow = styled.div`
+  width: auto;
+  display: flex;
+`;
+
+export const SettingsLine = styled(SingleLine)`
+  margin: 8px 0;
+`;
+
+const StatsView = () => {
+  return (
+    <>
+      <StatResume />
+      <VolumeStats />
+      <TimeStats />
+      <FeeStats />
+    </>
+  );
+};
+
+const Wrapped = () => (
+  <GridWrapper>
+    <StatsProvider>
+      <StatsView />
+    </StatsProvider>
+  </GridWrapper>
+);
+
+export default withApollo(Wrapped);
diff --git a/pages/transactions.tsx b/pages/transactions.tsx
@@ -22,7 +22,6 @@ import { FlowBox } from '../src/views/home/reports/flow';
 const TransactionsView = () => {
   const [indexOpen, setIndexOpen] = useState(0);
   const [token, setToken] = useState('');
-  const [fetching, setFetching] = useState(false);
 
   const { auth } = useAccountState();
 
@@ -42,7 +41,7 @@ const TransactionsView = () => {
     return <LoadingCard title={'Transactions'} />;
   }
 
-  const resumeList = JSON.parse(data.getResume.resume);
+  const resumeList = data.getResume.resume;
 
   return (
     <>
@@ -75,10 +74,7 @@ const TransactionsView = () => {
           <ColorButton
             fullWidth={true}
             withMargin={'16px 0 0'}
-            loading={fetching}
-            disabled={fetching}
             onClick={() => {
-              setFetching(true);
               fetchMore({
                 variables: { auth, token },
                 updateQuery: (
@@ -89,18 +85,17 @@ const TransactionsView = () => {
                 ) => {
                   if (!result) return prev;
                   const newToken = result.getResume.token || '';
-                  const prevEntries = JSON.parse(prev.getResume.resume);
-                  const newEntries = JSON.parse(result.getResume.resume);
+                  const prevEntries = prev.getResume.resume;
+                  const newEntries = result.getResume.resume;
 
                   const allTransactions = newToken
                     ? [...prevEntries, ...newEntries]
                     : prevEntries;
 
-                  setFetching(false);
                   return {
                     getResume: {
                       token: newToken,
-                      resume: JSON.stringify(allTransactions),
+                      resume: allTransactions,
                       __typename: 'getResumeType',
                     },
                   };