Merge pull request #293 from joule-labs/joule-refresh

Joule refresh
joule-labs · Dec 16, 2021 · 2786c3d · 2786c3d
2 parents c81cffd + fee58d3
commit 2786c3d
Show file tree

Hide file tree

Showing 39 changed files with 3,098 additions and 6,124 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -6,6 +6,6 @@
   "tabWidth": 2,
   "trailingComma": "all",
   "bracketSpacing": true,
-  "jsxBracketSameLine": false,
+  "bracketSameLine": false,
   "arrowParens": "avoid"
 }
diff --git a/package.json b/package.json
@@ -47,85 +47,81 @@
   "dependencies": {
     "@babel/core": "^7.11.6",
     "@babel/plugin-transform-react-constant-elements": "^7.10.4",
-    "@babel/preset-env": "7.11.5",
-    "@babel/preset-react": "7.10.4",
-    "@svgr/webpack": "5.4.0",
+    "@babel/preset-env": "^7.11.5",
+    "@babel/preset-react": "^7.10.4",
+    "@svgr/webpack": "^6.1.2",
     "antd": "^3.26.12",
     "babel-loader": "^8.1.0",
     "babel-plugin-import": "^1.13.3",
+    "babel-plugin-macros": "^3.1.0",
     "babel-plugin-module-resolver": "^4.0.0",
-    "bn.js": "5.1.3",
+    "bn.js": "^5.1.3",
+    "buffer": "^6.0.3",
     "classnames": "^2.2.6",
-    "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^6.3.2",
-    "core-js": "3.6.5",
-    "crypto-js": "4.0.0",
-    "css-loader": "^1.0.0",
-    "file-loader": "^6.1.1",
-    "html-webpack-plugin": "4.5.0",
-    "husky": "4.3.0",
-    "jdenticon": "3.0.1",
+    "core-js": "^3.6.5",
+    "crypto-js": "^4.0.0",
+    "css-loader": "^6.5.1",
+    "html-webpack-plugin": "^4.5.0",
+    "husky": "^4.3.0",
+    "jdenticon": "^3.0.1",
     "less": "^3.12.2",
-    "less-loader": "^7.0.2",
+    "less-loader": "^10.2.0",
     "mini-css-extract-plugin": "^1.3.1",
     "moment": "^2.29.1",
-    "node-sass": "^4.14.1",
-    "prettier": "2.1.2",
-    "qrcode.react": "1.0.0",
-    "query-string": "6.13.7",
+    "prettier": "^2.1.2",
+    "qrcode.react": "^1.0.0",
+    "query-string": "^6.13.7",
     "react": "^17.0.1",
-    "react-copy-to-clipboard": "5.0.2",
+    "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.2",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "redux": "^4.0.5",
-    "redux-devtools-extension": "^2.13.2",
     "redux-logger": "^3.0.6",
-    "redux-saga": "1.1.3",
-    "remote-redux-devtools": "0.5.16",
-    "semver": "7.3.2",
-    "style-loader": "^1.3.0",
-    "ts-loader": "8.0.11",
+    "redux-saga": "^1.1.3",
+    "semver": "^7.3.2",
+    "style-loader": "^3.3.1",
+    "ts-loader": "^8.0.11",
     "ts-node": "^9.0.0",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.13.0",
     "tslint-eslint-rules": "^5.3.1",
     "tslint-react": "^5.0.0",
-    "typescript": "^4.1.2",
-    "url-loader": "^4.1.1",
+    "typed-redux-saga": "^1.3.1",
+    "typescript": "^4.5.4",
     "webln": "0.2.2",
-    "webpack": "4.44.2",
+    "webpack": "^5.65.0",
     "webpack-cli": "^4.2.0",
-    "zip-webpack-plugin": "3.0.0",
-    "zxcvbn": "4.4.2"
+    "zip-webpack-plugin": "^3.0.0",
+    "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "@types/bn.js": "4.11.6",
+    "@types/bn.js": "^4.11.6",
     "@types/classnames": "^2.2.11",
-    "@types/crypto-js": "4.0.1",
+    "@types/crypto-js": "^4.0.1",
     "@types/node": "^14.11.2",
-    "@types/qrcode.react": "1.0.1",
-    "@types/query-string": "6.3.0",
-    "@types/react": "16.14.0",
-    "@types/react-copy-to-clipboard": "4.3.0",
+    "@types/qrcode.react": "^1.0.1",
+    "@types/query-string": "^6.3.0",
+    "@types/react": "^16.14.0",
+    "@types/react-copy-to-clipboard": "^4.3.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-redux": "^7.1.11",
     "@types/react-router": "^5.1.8",
     "@types/react-router-dom": "^5.1.6",
     "@types/redux-actions": "^2.3.0",
     "@types/redux-logger": "^3.0.8",
-    "@types/remote-redux-devtools": "0.5.4",
-    "@types/semver": "7.3.4",
+    "@types/semver": "^7.3.4",
     "@types/webpack": "^4.41.25",
-    "@types/zxcvbn": "4.4.0",
-    "cross-env": "7.0.2",
-    "pretty-quick": "3.1.0",
+    "@types/zxcvbn": "^4.4.0",
+    "cross-env": "^7.0.2",
+    "pretty-quick": "^3.1.0",
     "react-hot-loader": "^4.13.0",
-    "rimraf": "3.0.2",
-    "string-hash": "1.1.3",
-    "webextension-polyfill-ts": "0.20.0",
-    "webpack-dev-server": "3.11.0",
+    "rimraf": "^3.0.2",
+    "string-hash": "^1.1.3",
+    "webextension-polyfill-ts": "^0.20.0",
+    "webpack-dev-server": "^4.6.0",
     "write-file-webpack-plugin": "^4.5.0"
   }
 }
diff --git a/src/app/components/PromptTemplate/index.tsx b/src/app/components/PromptTemplate/index.tsx
@@ -103,7 +103,7 @@ export default class PromptTemplate extends React.Component<Props, State> {
       } catch (error) {
         this.setState({
           isConfirming: false,
-          error,
+          error: error as Error,
         });
         return;
       }

diff --git a/src/app/components/Splash/index.tsx b/src/app/components/Splash/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button } from 'antd';
 import { browser } from 'webextension-polyfill-ts';
+import { getAppContainer } from 'utils/globals';
 import './style.less';
 
 interface Props {
@@ -9,7 +10,7 @@ interface Props {
 
 export default class Splash extends React.Component<Props> {
   componentDidMount() {
-    if (process.env.APP_CONTAINER === 'page') {
+    if (getAppContainer() === 'page') {
       browser.storage.local.get('skipSplash').then(value => {
         if (value && value.skipSplash) {
           browser.storage.local.remove('skipSplash').then(() => {
@@ -43,7 +44,7 @@ export default class Splash extends React.Component<Props> {
   }
 
   private handleContinue = () => {
-    if (process.env.APP_CONTAINER === 'page') {
+    if (getAppContainer() === 'page') {
       this.props.handleContinue();
     } else {
       browser.storage.local.set({ skipSplash: true }).then(() => {

diff --git a/src/app/modules/account/index.ts b/src/app/modules/account/index.ts
@@ -1,8 +1,8 @@
-import reducers, { AccountState, INITIAL_STATE } from './reducers';
+import reducers, { INITIAL_STATE } from './reducers';
 import * as accountActions from './actions';
 import accountTypes from './types';
 import accountSagas from './sagas';
 
-export { accountActions, accountTypes, accountSagas, AccountState, INITIAL_STATE };
-
+export { accountActions, accountTypes, accountSagas, INITIAL_STATE };
+export type { AccountState } from './reducers';
 export default reducers;
diff --git a/src/app/modules/account/sagas.ts b/src/app/modules/account/sagas.ts
@@ -1,5 +1,4 @@
-import { SagaIterator } from 'redux-saga';
-import { takeLatest, select, call, all, put } from 'redux-saga/effects';
+import { takeLatest, select, call, all, put } from 'typed-redux-saga/macro';
 import BN from 'bn.js';
 import { selectNodeLibOrThrow } from 'modules/node/selectors';
 import { getNodePubKey } from 'modules/node/sagas';
@@ -11,19 +10,13 @@ import { getDepositAddress } from './actions';
 export function* handleGetAccountInfo() {
   try {
     const myPubKey: string = yield call(getNodePubKey);
-    const nodeLib: Yielded<typeof selectNodeLibOrThrow> = yield select(
-      selectNodeLibOrThrow,
-    );
+    const nodeLib = yield* select(selectNodeLibOrThrow);
     const calls = [
       call(nodeLib.getNodeInfo, myPubKey),
       call(nodeLib.getBlockchainBalance),
       call(nodeLib.getChannelsBalance),
-    ];
-    const [nodeInfo, chainBalances, channelsBalances]: [
-      Yielded<typeof nodeLib.getNodeInfo>,
-      Yielded<typeof nodeLib.getBlockchainBalance>,
-      Yielded<typeof nodeLib.getChannelsBalance>,
-    ] = yield all(calls);
+    ] as const;
+    const [nodeInfo, chainBalances, channelsBalances] = yield* all(calls);
     const payload: Account = {
       pubKey: myPubKey,
       alias: nodeInfo.node.alias,
@@ -57,25 +50,19 @@ export function* handleGetAccountInfo() {
 export function* handleGetTransactions() {
   try {
     // Get various transactions info
-    const nodeLib: Yielded<typeof selectNodeLibOrThrow> = yield select(
-      selectNodeLibOrThrow,
-    );
-    const [paymentsRes, invoicesRes, transactionsRes]: [
-      Yielded<typeof nodeLib.getPayments>,
-      Yielded<typeof nodeLib.getInvoices>,
-      Yielded<typeof nodeLib.getTransactions>,
-    ] = yield all([
+    const nodeLib = yield* select(selectNodeLibOrThrow);
+    const [paymentsRes, invoicesRes, transactionsRes] = yield* all([
       call(nodeLib.getPayments),
       call(nodeLib.getInvoices, { num_max_invoices: 30, reversed: true }),
       call(nodeLib.getTransactions),
-    ]);
+    ] as const);
 
     // Get node information from payments
-    const paymentNodeIds: string[] = paymentsRes.payments
+    const paymentNodeIds = paymentsRes.payments
       .map(payment => (payment.path.length ? payment.path[payment.path.length - 1] : ''))
       .filter(id => !!id)
       .filter((id, idx, ids) => ids.indexOf(id) === idx);
-    const paymentNodes: Yielded<typeof nodeLib.getNodeInfo>[] = yield all(
+    const paymentNodes = yield* all(
       paymentNodeIds.map(id => call(safeGetNodeInfo, nodeLib, id)),
     );
     const payments = paymentsRes.payments
@@ -126,13 +113,8 @@ export function* handleGetTransactions() {
 export function* handleGetDepositAddress(action: ReturnType<typeof getDepositAddress>) {
   try {
     yield call(requirePassword);
-    const nodeLib: Yielded<typeof selectNodeLibOrThrow> = yield select(
-      selectNodeLibOrThrow,
-    );
-    const res: Yielded<typeof nodeLib.getAddress> = yield call(
-      nodeLib.getAddress,
-      action.payload,
-    );
+    const nodeLib = yield* select(selectNodeLibOrThrow);
+    const res = yield* call(nodeLib.getAddress, action.payload);
     yield put({
       type: types.GET_DEPOSIT_ADDRESS_SUCCESS,
       payload: res.address,
@@ -145,7 +127,7 @@ export function* handleGetDepositAddress(action: ReturnType<typeof getDepositAdd
   }
 }
 
-export default function* channelsSagas(): SagaIterator {
+export default function* channelsSagas() {
   yield takeLatest(types.GET_ACCOUNT_INFO, handleGetAccountInfo);
   yield takeLatest(types.GET_TRANSACTIONS, handleGetTransactions);
   yield takeLatest(types.GET_DEPOSIT_ADDRESS, handleGetDepositAddress);

diff --git a/src/app/modules/channels/index.ts b/src/app/modules/channels/index.ts
@@ -1,8 +1,8 @@
-import reducers, { ChannelsState, INITIAL_STATE } from './reducers';
+import reducers, { INITIAL_STATE } from './reducers';
 import * as channelsActions from './actions';
 import channelsTypes from './types';
 import channelsSagas from './sagas';
 
-export { channelsActions, channelsTypes, channelsSagas, ChannelsState, INITIAL_STATE };
-
+export { channelsActions, channelsTypes, channelsSagas, INITIAL_STATE };
+export type { ChannelsState } from './reducers';
 export default reducers;
diff --git a/src/app/modules/channels/sagas.ts b/src/app/modules/channels/sagas.ts
@@ -1,5 +1,4 @@
-import { SagaIterator } from 'redux-saga';
-import { takeLatest, select, call, all, put } from 'redux-saga/effects';
+import { takeLatest, select, call, all, put } from 'typed-redux-saga/macro';
 import { selectNodeLibOrThrow } from 'modules/node/selectors';
 import { requirePassword } from 'modules/crypto/sagas';
 import { safeGetNodeInfo, safeConnectPeer, sleep } from 'utils/misc';
@@ -8,17 +7,15 @@ import types from './types';
 
 export function* handleGetChannels() {
   try {
-    const nodeLib: Yielded<typeof selectNodeLibOrThrow> = yield select(
-      selectNodeLibOrThrow,
-    );
+    const nodeLib = yield* select(selectNodeLibOrThrow);
     // Get open and pending channels in one go
     const [
       { channels },
       { pending_force_closing_channels, pending_open_channels, waiting_close_channels },
-    ]: [
-      Yielded<typeof nodeLib.getChannels>,
-      Yielded<typeof nodeLib.getPendingChannels>,
-    ] = yield all([call(nodeLib.getChannels), call(nodeLib.getPendingChannels)]);
+    ] = yield* all([
+      call(nodeLib.getChannels),
+      call(nodeLib.getPendingChannels),
+    ] as const);
 
     // Map all channels' node info together
     const allChannels = [
@@ -31,7 +28,7 @@ export function* handleGetChannels() {
       prev[c.remote_node_pub] = true;
       return prev;
     }, {} as { [pubkey: string]: boolean });
-    const nodeInfoResponses: Yielded<typeof nodeLib.getNodeInfo>[] = yield all(
+    const nodeInfoResponses = yield* all(
       Object.keys(nodePubKeys).map(pk => call(safeGetNodeInfo, nodeLib, pk)),
     );
     const nodeInfoMap = nodeInfoResponses.reduce((prev, node) => {
@@ -59,9 +56,7 @@ export function* handleGetChannels() {
 export function* handleOpenChannel(action: ReturnType<typeof openChannel>) {
   try {
     yield call(requirePassword);
-    const nodeLib: Yielded<typeof selectNodeLibOrThrow> = yield select(
-      selectNodeLibOrThrow,
-    );
+    const nodeLib = yield* select(selectNodeLibOrThrow);
 
     // Connect to peer and wait a sec just in case we weren't already
     yield call(safeConnectPeer, nodeLib, action.payload.address);
@@ -75,10 +70,7 @@ export function* handleOpenChannel(action: ReturnType<typeof openChannel>) {
       push_sat: action.payload.pushAmount,
       sat_per_byte: action.payload.fee,
     };
-    const res: Yielded<typeof nodeLib.openChannel> = yield call(
-      nodeLib.openChannel,
-      openParams,
-    );
+    const res = yield* call(nodeLib.openChannel, openParams);
     yield put({
       type: types.OPEN_CHANNEL_SUCCESS,
       payload: {
@@ -102,16 +94,10 @@ export function* handleOpenChannel(action: ReturnType<typeof openChannel>) {
 export function* handleCloseChannel(action: ReturnType<typeof closeChannel>) {
   try {
     yield call(requirePassword);
-    const nodeLib: Yielded<typeof selectNodeLibOrThrow> = yield select(
-      selectNodeLibOrThrow,
-    );
+    const nodeLib = yield* select(selectNodeLibOrThrow);
 
     const { fundingTxid, outputIndex } = action.payload;
-    const res: Yielded<typeof nodeLib.closeChannel> = yield call(
-      nodeLib.closeChannel,
-      fundingTxid,
-      outputIndex,
-    );
+    const res = yield* call(nodeLib.closeChannel, fundingTxid, outputIndex);
     yield put({
       type: types.CLOSE_CHANNEL_SUCCESS,
       payload: {
@@ -130,7 +116,7 @@ export function* handleCloseChannel(action: ReturnType<typeof closeChannel>) {
   }
 }
 
-export default function* channelsSagas(): SagaIterator {
+export default function* channelsSagas() {
   yield takeLatest(types.GET_CHANNELS, handleGetChannels);
   yield takeLatest(types.OPEN_CHANNEL, handleOpenChannel);
   yield takeLatest(types.CLOSE_CHANNEL, handleCloseChannel);

diff --git a/src/app/modules/crypto/index.ts b/src/app/modules/crypto/index.ts
@@ -1,8 +1,8 @@
-import reducers, { CryptoState, INITIAL_STATE } from './reducers';
+import reducers, { INITIAL_STATE } from './reducers';
 import * as cryptoActions from './actions';
 import * as cryptoTypes from './types';
 import cryptoSagas from './sagas';
 
-export { cryptoActions, cryptoTypes, cryptoSagas, CryptoState, INITIAL_STATE };
-
+export { cryptoActions, cryptoTypes, cryptoSagas, INITIAL_STATE };
+export type { CryptoState } from './reducers';
 export default reducers;