Feat/v0.2.0 (#19)

* chore: bump version

* style: password field changes

* Feat/lerna integration (#17)

* chore: move into package folder

* chore: initial lerna setup

* chore: yarn lock cleanup

* chore: package organization

* chore: yarn lock update

* chore: update packages

* chore: wip lerna integration

* chore: downgrade date-fns

* chore: lerna cleanup

* chore: add env file

* docs: update README

* chore: organize configs

* Feat/hodlhodl integration (#18)

* feat: hodl integration start

* chore: add pagination and more

* chore: change filter flow

* chore: change offer card ui

* chore: more offer card changes

* chore: small refactors and stylings

* v0.2.0

* docs: update README

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -1,7 +1,7 @@
 # **ThunderHub - Lightning Node Manager**
 
 ![Home Screenshot](assets/Home.png)
-[![license](https://img.shields.io/github/license/DAVFoundation/captain-n3m0.svg?style=flat-square)](https://github.com/DAVFoundation/captain-n3m0/blob/master/LICENSE) [![Known Vulnerabilities](https://snyk.io/test/github/apotdevin/thunderhub/badge.svg?targetFile=client/package.json)](https://snyk.io/test/github/apotdevin/thunderhub) [![Known Vulnerabilities](https://snyk.io/test/github/apotdevin/thunderhub/badge.svg?targetFile=server/package.json)](https://snyk.io/test/github/apotdevin/thunderhub)
+[![license](https://img.shields.io/github/license/DAVFoundation/captain-n3m0.svg?style=flat-square)](https://github.com/DAVFoundation/captain-n3m0/blob/master/LICENSE) [![Known Vulnerabilities](https://snyk.io/test/github/apotdevin/thunderhub/badge.svg?targetFile=client/package.json)](https://snyk.io/test/github/apotdevin/thunderhub) [![Known Vulnerabilities](https://snyk.io/test/github/apotdevin/thunderhub/badge.svg?targetFile=server/package.json)](https://snyk.io/test/github/apotdevin/thunderhub) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
 
 ## Table Of Contents
 
@@ -16,6 +16,8 @@ ThunderHub is an **open-source** LND node manager where you can manage and monit
 
 ### Tech Stack
 
+The repository consists of two packages (client and server) and is maintained with LernaJS and Yarn Workspaces.
+
 #### Client
 
 [![Known Vulnerabilities](https://snyk.io/test/github/apotdevin/thunderhub/badge.svg?targetFile=client/package.json)](https://snyk.io/test/github/apotdevin/thunderhub)
@@ -48,6 +50,7 @@ ThunderHub is an **open-source** LND node manager where you can manage and monit
 - View all transactions.
 - View all forwarded payments.
 - View all chain transactions.
+- View all unspent UTXOS.
 
 ### Management
 
@@ -58,6 +61,7 @@ ThunderHub is an **open-source** LND node manager where you can manage and monit
 - Balance your channels through circular payments. ([Check out the Tutorial](https://medium.com/coinmonks/lightning-network-channel-balancing-with-thunderhub-972b41bf9243))
 - Update your all your channels fees or individual ones.
 - Backup, verify and recover all your channels.
+- Sign and verify messages.
 
 ### Visual
 
@@ -69,13 +73,18 @@ ThunderHub is an **open-source** LND node manager where you can manage and monit
 
 - Many ways to connect to your node: **HEX/Base64 strings**, **LNDConnect Url**, **BTCPayServer Info** or **QR codes**.
 - Have view-only and/or admin accounts.
-- Manage up to 10 different nodes.
+- Manage however many accounts your browser storage can hold.
 - Quickly sync your accounts between devices. No need to copy/paste macaroons and certificates.
 
+### Deployment
+
+- Docker images for easier deployment (WIP)
+
 ### Future Features
 
 - Loop In and Out to provide liquidity or remove it from your channels.
-- Docker Image for easy deployments.
+- Integration with HodlHodl
+- Storefront interface
 
 ## Installation
 
@@ -88,26 +97,19 @@ git clone https://github.com/apotdevin/thunderhub.git
 ### **Requirements**
 
 - Node installed
-- Yarn or NPM installed
+- Yarn installed
 
-After cloning the repository, go into both the `/client` and the `/server` folders, and run `yarn` or `npm install` in both of them to get all the necessary modules installed.
+After cloning the repository run `yarn` to get all the necessary modules installed. Yarn workspaces will handle installing modules for both the client and the server.
 
 ### **ThunderHub - Server**
 
-#### To get the server running use the following commands
-
-##### This must be done in the `/server` folder
+To be able to use the HodlHodl integration create a `.env` file in the `/server` folder with `HODL_KEY='[YOUR API KEY]'` and replace `[YOUR API KEY]` with the one that HodlHodl provides you.
 
-```javascript
-//With yarn:
-yarn build
-yarn start
-```
+#### To get the server running use the following commands
 
 ```javascript
-//With npm:
-npm run build
-npm run start
+yarn server:prod
+yarn server:run
 ```
 
 If the server starts succesfully, you should see `info [server.js]: Server ready at http://localhost:3001/` in the terminal
@@ -119,51 +121,29 @@ If the server starts succesfully, you should see `info [server.js]: Server ready
 ##### This must be done in the `/client` folder
 
 ```javascript
-//With yarn:
 yarn start
 ```
 
-```javascript
-//With npm:
-npm run start
-```
-
 If the frontend starts succesfully, you should see `Compiled successfully! You can now view app in the browser.` in the terminal and a browser window should have opened in your browser.
 
 ## Development
 
-If you want to develop on ThunderHub and want hot reloading when you do changes use the following commands
+If you want to develop on ThunderHub and want hot reloading when you do changes, use the following commands:
 
 ### ThunderHub - Server
 
 ```javascript
-//With yarn:
-yarn build:dev
-
-// In another terminal
-yarn dev
-```
-
-```javascript
-//With npm:
-npm run build:dev
-
-// In another terminal
-npm run dev
+yarn server:dev
 ```
 
 ### ThunderHub - Client
 
-Running the commands `yarn start` or `npm run start` works for development.
+Running the commands `yarn start` in the `client` folder works for development.
+
+#### Storybook
 
 You can also get storybook running for quicker component development.
 
 ```javascript
-//With yarn:
 yarn storybook
 ```
-
-```javascript
-//With npm:
-npm run storybook
-```

client/.storybook/main.js

@@ -7,7 +7,7 @@ module.exports = {
         '@storybook/addon-links',
         '@storybook/addon-viewport/register',
     ],
-    webpackFinal: async config => {
+    webpackFinal: async (config) => {
         config.module.rules.push({
             test: /\.(ts|tsx)$/,
             use: [

client/.storybook/themeDecorator.js

@@ -17,7 +17,7 @@ const StyledBackground = styled.div`
     align-items: center;
 `;
 
-const ThemeDecorator = storyFn => {
+const ThemeDecorator = (storyFn) => {
     const background = boolean('No Background', false);
     const cardBackground = boolean('Card Background', true);
     return (

client/package.json

@@ -1,6 +1,6 @@
 {
-    "name": "thunderhub-client",
-    "version": "0.1.17",
+    "name": "@thunderhub/client",
+    "version": "0.2.0",
     "description": "",
     "scripts": {
         "start": "react-scripts start",
@@ -9,7 +9,8 @@
         "eject": "react-scripts eject",
         "storybook": "start-storybook -p 9009 -s public",
         "build-storybook": "build-storybook -s public",
-        "deploy": "yarn build && aws s3 --profile EBFullAccess sync build/ s3://thunderhub-client"
+        "deploy": "yarn build && aws s3 --profile EBFullAccess sync build/ s3://thunderhub-client",
+        "precommit": "pretty-quick --staged"
     },
     "repository": {
         "type": "git",
@@ -21,14 +22,14 @@
     "dependencies": {
         "@apollo/react-hooks": "^3.1.3",
         "@types/crypto-js": "^3.1.44",
-        "@types/jest": "25.1.4",
+        "@types/jest": "25.1.5",
         "@types/lodash.debounce": "^4.0.6",
         "@types/lodash.merge": "^4.6.6",
         "@types/lodash.sortby": "^4.7.6",
-        "@types/node": "13.9.8",
+        "@types/node": "13.11.0",
         "@types/numeral": "^0.0.26",
         "@types/qrcode.react": "^1.0.0",
-        "@types/react": "16.9.31",
+        "@types/react": "16.9.32",
         "@types/react-copy-to-clipboard": "^4.3.0",
         "@types/react-dom": "16.9.6",
         "@types/react-modal": "^3.10.5",
@@ -42,17 +43,15 @@
         "@types/victory": "^33.1.4",
         "@types/zxcvbn": "^4.4.0",
         "apollo-boost": "^0.4.4",
-        "base64url": "^3.0.1",
         "crypto-js": "^4.0.0",
-        "date-fns": "^2.11.0",
-        "graphql": "^14.6.0",
         "intersection-observer": "^0.7.0",
         "lodash.debounce": "^4.0.8",
         "lodash.merge": "^4.6.2",
         "lodash.sortby": "^4.7.0",
         "node-sass": "^4.13.0",
         "numeral": "^2.0.6",
         "qrcode.react": "^1.0.0",
+        "qs": "^6.9.3",
         "react": "^16.13.0",
         "react-copy-to-clipboard": "^5.0.2",
         "react-dom": "^16.13.0",
@@ -83,9 +82,6 @@
         "@storybook/preset-create-react-app": "^2.1.1",
         "@storybook/react": "^5.3.18",
         "awesome-typescript-loader": "^5.2.1",
-        "husky": "^4.2.3",
-        "prettier": "2.0.2",
-        "pretty-quick": "^2.0.1",
         "react-docgen-typescript-loader": "^3.7.2"
     },
     "eslintConfig": {
@@ -102,10 +98,5 @@
             "last 1 firefox version",
             "last 1 safari version"
         ]
-    },
-    "husky": {
-        "hooks": {
-            "pre-commit": "pretty-quick --staged"
-        }
     }
 }

client/src/App.test.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import App from './App';
 
 it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+    const div = document.createElement('div');
+    ReactDOM.render(<App />, div);
+    ReactDOM.unmountComponentAtNode(div);
 });

client/src/components/animated/AnimatedNumber.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useSpring, animated } from 'react-spring';
 import { getValue } from '../../helpers/Helpers';
 import { useSettings } from '../../context/SettingsContext';
-import { usePriceState } from 'context/PriceContext';
+import { usePriceState } from '../../context/PriceContext';
 
 type PriceProps = {
     price: number;
@@ -43,7 +43,7 @@ export const AnimatedNumber = ({ amount }: AnimatedProps) => {
 
     return (
         <animated.div>
-            {value.interpolate(amount => getValue({ amount, ...priceProps }))}
+            {value.interpolate((amount) => getValue({ amount, ...priceProps }))}
         </animated.div>
     );
 };

client/src/components/auth/views/Password.tsx

@@ -26,7 +26,7 @@ export const PasswordInput = ({
             <SubTitle>Please Input a Password</SubTitle>
             <Line>
                 <Sub4Title>Password:</Sub4Title>
-                <Input onChange={e => setPass(e.target.value)} />
+                <Input onChange={(e) => setPass(e.target.value)} />
             </Line>
             <Line>
                 <Sub4Title>Strength:</Sub4Title>

client/src/components/buttons/secureButton/LoginModal.tsx

@@ -12,9 +12,10 @@ import styled from 'styled-components';
 import { useAccount } from '../../../context/AccountContext';
 import { saveSessionAuth } from '../../../utils/auth';
 import { useSettings } from '../../../context/SettingsContext';
-import { textColorMap } from '../../../styles/Themes';
+import { textColorMap, mediaDimensions } from '../../../styles/Themes';
 import { ColorButton } from '../colorButton/ColorButton';
 import { Input } from '../../input/Input';
+import { useSize } from 'hooks/UseSize';
 
 const RadioText = styled.div`
     margin-left: 10px;
@@ -42,7 +43,9 @@ export const LoginModal = ({
     callback,
     variables,
 }: LoginProps) => {
+    const { width } = useSize();
     const { theme } = useSettings();
+
     const [pass, setPass] = useState<string>('');
     const [storeSession, setStoreSession] = useState<boolean>(false);
     const { host, cert, refreshAccount } = useAccount();
@@ -83,7 +86,13 @@ export const LoginModal = ({
             <SubTitle>Unlock your Account</SubTitle>
             <ResponsiveLine>
                 <Sub4Title>Password:</Sub4Title>
-                <Input onChange={(e) => setPass(e.target.value)} />
+                <Input
+                    withMargin={
+                        width <= mediaDimensions.mobile ? '0' : '0 0 0 16px'
+                    }
+                    type={'password'}
+                    onChange={(e) => setPass(e.target.value)}
+                />
             </ResponsiveLine>
             <ResponsiveLine>
                 <NoWrapTitle>Don't ask me again this session:</NoWrapTitle>

client/src/components/generic/Helpers.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { SmallLink, DarkSubTitle, OverflowText } from './Styled';
+import { SmallLink, DarkSubTitle, OverflowText, SingleLine } from './Styled';
 import { StatusDot, DetailLine } from '../../views/channels/Channels.style';
 import { formatDistanceStrict, format } from 'date-fns';
+import { XSvg } from './Icons';
 
 export const getTransactionLink = (transaction: string) => {
     const link = `https://www.blockchain.com/btc/tx/${transaction}`;
@@ -51,12 +52,23 @@ export const renderLine = (
     title: string,
     content: any,
     key?: string | number,
+    deleteCallback?: () => void,
 ) => {
     if (!content) return null;
     return (
         <DetailLine key={key}>
             <DarkSubTitle>{title}</DarkSubTitle>
-            <OverflowText>{content}</OverflowText>
+            <SingleLine>
+                <OverflowText>{content}</OverflowText>
+                {deleteCallback && (
+                    <div
+                        style={{ margin: '0 0 -4px 4px' }}
+                        onClick={deleteCallback}
+                    >
+                        <XSvg />
+                    </div>
+                )}
+            </SingleLine>
         </DetailLine>
     );
 };

client/src/components/generic/Icons.ts

@@ -47,6 +47,9 @@ import { ReactComponent as Mail } from '../../assets/icons/mail.svg';
 import { ReactComponent as Github } from '../../assets/icons/github.svg';
 import { ReactComponent as Repeat } from '../../assets/icons/repeat.svg';
 import { ReactComponent as CheckIcon } from '../../assets/icons/check.svg';
+import { ReactComponent as StarIcon } from '../../assets/icons/star.svg';
+import { ReactComponent as HalfStarIcon } from '../../assets/icons/half-star.svg';
+import { ReactComponent as CreditCardIcon } from '../../assets/icons/credit-card.svg';
 
 export interface IconProps {
     color?: string;
@@ -116,3 +119,6 @@ export const MailIcon = styleIcon(Mail);
 export const GithubIcon = styleIcon(Github);
 export const RepeatIcon = styleIcon(Repeat);
 export const Check = styleIcon(CheckIcon);
+export const Star = styleIcon(StarIcon);
+export const HalfStar = styleIcon(HalfStarIcon);
+export const CreditCard = styleIcon(CreditCardIcon);

client/src/components/generic/Styled.tsx

@@ -56,10 +56,11 @@ export const Separation = styled.div`
 interface SubCardProps {
     color?: string;
     padding?: string;
+    withMargin?: string;
 }
 
 export const SubCard = styled.div`
-    margin-bottom: 10px;
+    margin: ${({ withMargin }) => (withMargin ? withMargin : '0 0 10px 0')};
     padding: ${({ padding }) => (padding ? padding : '16px')};
     background: ${subCardColor};
     border: 1px solid ${cardBorderColor};

client/src/components/input/Input.tsx

@@ -76,7 +76,7 @@ export const Input = ({
             value={value}
             color={color}
             withMargin={withMargin}
-            onChange={e => onChange(e)}
+            onChange={(e) => onChange(e)}
             fullWidth={fullWidth}
             inputWidth={width}
             maxWidth={maxWidth}