Update dependencies

.prettierrc

@@ -6,5 +6,6 @@
   "tabWidth": 2,
   "trailingComma": "all",
   "bracketSpacing": true,
-  "jsxBracketSameLine": false
+  "jsxBracketSameLine": false,
+  "arrowParens": "avoid"
 }

package.json

@@ -45,87 +45,87 @@
     }
   ],
   "dependencies": {
-    "@babel/core": "^7.0.1",
-    "@babel/preset-env": "7.6.0",
-    "@babel/preset-react": "7.0.0",
-    "@svgr/webpack": "3.1.0",
+    "@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",
     "antd": "^3.26.12",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-loader": "^8.0.2",
-    "babel-plugin-import": "^1.8.0",
-    "babel-plugin-module-resolver": "^3.1.1",
-    "bn.js": "4.11.8",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-import": "^1.13.0",
+    "babel-plugin-module-resolver": "^4.0.0",
+    "bn.js": "5.1.3",
     "classnames": "^2.2.6",
-    "clean-webpack-plugin": "^0.1.19",
-    "copy-webpack-plugin": "^5.1.1",
-    "core-js": "3.2.1",
-    "crypto-js": "3.1.9-1",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^6.1.1",
+    "core-js": "3.6.5",
+    "crypto-js": "4.0.0",
     "css-loader": "^1.0.0",
-    "file-loader": "^2.0.0",
-    "html-webpack-plugin": "3.2.0",
-    "husky": "2.1.0",
-    "jdenticon": "2.1.0",
-    "less": "^3.7.1",
-    "less-loader": "^4.1.0",
-    "mini-css-extract-plugin": "^0.4.2",
-    "moment": "^2.22.2",
-    "node-sass": "^4.9.2",
-    "prettier": "1.17.0",
-    "qrcode.react": "0.8.0",
-    "query-string": "6.2.0",
-    "react": "^16.4.0",
-    "react-copy-to-clipboard": "5.0.1",
-    "react-dom": "^16.4.0",
-    "react-redux": "^5.0.7",
-    "react-router": "^4.3.1",
-    "react-router-dom": "^4.3.1",
-    "redux": "^4.0.0",
+    "file-loader": "^6.1.0",
+    "html-webpack-plugin": "4.5.0",
+    "husky": "4.3.0",
+    "jdenticon": "3.0.1",
+    "less": "^3.12.2",
+    "less-loader": "^7.0.1",
+    "mini-css-extract-plugin": "^0.11.2",
+    "moment": "^2.27.0",
+    "node-sass": "^4.14.1",
+    "prettier": "2.1.2",
+    "qrcode.react": "1.0.0",
+    "query-string": "6.13.4",
+    "react": "^16.13.1",
+    "react-copy-to-clipboard": "5.0.2",
+    "react-dom": "^16.13.1",
+    "react-redux": "^7.2.1",
+    "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.0.5",
-    "remote-redux-devtools": "0.5.13",
-    "semver": "6.3.0",
-    "style-loader": "^0.23.0",
-    "ts-loader": "6.1.0",
-    "ts-node": "^7.0.1",
-    "tslint": "^5.10.0",
+    "redux-saga": "1.1.3",
+    "remote-redux-devtools": "0.5.16",
+    "semver": "7.3.2",
+    "style-loader": "^1.2.1",
+    "ts-loader": "8.0.4",
+    "ts-node": "^9.0.0",
+    "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.13.0",
     "tslint-eslint-rules": "^5.3.1",
-    "tslint-react": "^3.6.0",
-    "typescript": "^3.8.2",
-    "url-loader": "^1.1.1",
-    "webln": "0.2.0",
-    "webpack": "4.39.3",
-    "webpack-cli": "^3.1.0",
+    "tslint-react": "^5.0.0",
+    "typescript": "^4.0.3",
+    "url-loader": "^4.1.0",
+    "webln": "0.2.2",
+    "webpack": "4.44.2",
+    "webpack-cli": "^3.3.12",
     "zip-webpack-plugin": "3.0.0",
     "zxcvbn": "4.4.2"
   },
   "devDependencies": {
-    "@types/bn.js": "4.11.2",
-    "@types/classnames": "^2.2.6",
-    "@types/crypto-js": "3.1.43",
-    "@types/node": "^10.11.4",
-    "@types/qrcode.react": "0.8.1",
-    "@types/query-string": "6.1.1",
-    "@types/react": "16.3.16",
-    "@types/react-copy-to-clipboard": "4.2.6",
-    "@types/react-dom": "^16.0.6",
-    "@types/react-redux": "^6.0.2",
-    "@types/react-router": "^4.0.31",
-    "@types/react-router-dom": "^4.3.1",
+    "@types/bn.js": "4.11.6",
+    "@types/classnames": "^2.2.10",
+    "@types/crypto-js": "3.1.47",
+    "@types/node": "^14.11.2",
+    "@types/qrcode.react": "1.0.1",
+    "@types/query-string": "6.3.0",
+    "@types/react": "16.9.49",
+    "@types/react-copy-to-clipboard": "4.3.0",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-redux": "^7.1.9",
+    "@types/react-router": "^5.1.8",
+    "@types/react-router-dom": "^5.1.5",
     "@types/redux-actions": "^2.3.0",
-    "@types/redux-logger": "^3.0.6",
-    "@types/remote-redux-devtools": "0.5.3",
-    "@types/semver": "6.0.2",
-    "@types/webpack": "^4.4.14",
+    "@types/redux-logger": "^3.0.8",
+    "@types/remote-redux-devtools": "0.5.4",
+    "@types/semver": "7.3.4",
+    "@types/webpack": "^4.41.22",
     "@types/zxcvbn": "4.4.0",
-    "cross-env": "5.2.0",
-    "pretty-quick": "1.10.0",
-    "react-hot-loader": "^4.6.3",
-    "rimraf": "2.6.2",
+    "cross-env": "7.0.2",
+    "pretty-quick": "3.0.2",
+    "react-hot-loader": "^4.13.0",
+    "rimraf": "3.0.2",
     "string-hash": "1.1.3",
-    "webextension-polyfill-ts": "0.8.9",
-    "webpack-dev-server": "3.2.1",
+    "webextension-polyfill-ts": "0.20.0",
+    "webpack-dev-server": "3.11.0",
     "write-file-webpack-plugin": "^4.5.0"
   }
 }

src/app/components/ChannelList/ChannelRow.tsx

@@ -19,10 +19,7 @@ export default class ChannelRow extends React.Component<Props> {
   render() {
     const { channel, onClick } = this.props;
     const { local_balance, capacity, node } = channel;
-    const capacityPct = new BN(local_balance)
-      .muln(100)
-      .div(new BN(capacity))
-      .toString();
+    const capacityPct = new BN(local_balance).muln(100).div(new BN(capacity)).toString();
 
     let tooltipText = channelStatusText[channel.status];
     if (channel.status === CHANNEL_STATUS.FORCE_CLOSING) {

src/app/components/SelectNode/BTCPayServer.tsx

@@ -47,7 +47,7 @@ export default class BTCPayServer extends React.Component<Props, State> {
         </p>
         <ol className="BTCPayServer-steps">
           <li>Navigate to your BTCPayServer and log in as an admin</li>
-          <li>Go to Server Settings > Services > LND Rest - See information</li>
+          <li>Go to Server Settings &gt; Services &gt; LND Rest - See information</li>
           <li>Click "See QR Code information" and copy the QR Code data</li>
           <li>Paste the data below:</li>
         </ol>

src/app/components/SendForm/ChainSend.tsx

@@ -94,9 +94,7 @@ class ChainSend extends React.Component<Props, State> {
       <>
         <Icon type="exclamation-circle" /> Dust warning: This amount may not be spendable
       </>
-    ) : (
-      undefined
-    );
+    ) : undefined;
 
     return (
       <Form className="ChainSend" layout="vertical" onSubmit={this.handleSubmit}>

src/app/modules/account/sagas.ts

@@ -22,7 +22,7 @@ export function* handleGetAccountInfo() {
     const [nodeInfo, chainBalances, channelsBalances]: [
       Yielded<typeof nodeLib.getNodeInfo>,
       Yielded<typeof nodeLib.getBlockchainBalance>,
-      Yielded<typeof nodeLib.getChannelsBalance>
+      Yielded<typeof nodeLib.getChannelsBalance>,
     ] = yield all(calls);
     const payload: Account = {
       pubKey: myPubKey,
@@ -63,7 +63,7 @@ export function* handleGetTransactions() {
     const [paymentsRes, invoicesRes, transactionsRes]: [
       Yielded<typeof nodeLib.getPayments>,
       Yielded<typeof nodeLib.getInvoices>,
-      Yielded<typeof nodeLib.getTransactions>
+      Yielded<typeof nodeLib.getTransactions>,
     ] = yield all([
       call(nodeLib.getPayments),
       call(nodeLib.getInvoices, { num_max_invoices: 30, reversed: true }),
@@ -75,7 +75,7 @@ export function* handleGetTransactions() {
       .map(payment => (payment.path.length ? payment.path[payment.path.length - 1] : ''))
       .filter(id => !!id)
       .filter((id, idx, ids) => ids.indexOf(id) === idx);
-    const paymentNodes: Array<Yielded<typeof nodeLib.getNodeInfo>> = yield all(
+    const paymentNodes: Yielded<typeof nodeLib.getNodeInfo>[] = yield all(
       paymentNodeIds.map(id => call(safeGetNodeInfo, nodeLib, id)),
     );
     const payments = paymentsRes.payments

src/app/modules/channels/sagas.ts

@@ -17,7 +17,7 @@ export function* handleGetChannels() {
       { pending_force_closing_channels, pending_open_channels, waiting_close_channels },
     ]: [
       Yielded<typeof nodeLib.getChannels>,
-      Yielded<typeof nodeLib.getPendingChannels>
+      Yielded<typeof nodeLib.getPendingChannels>,
     ] = yield all([call(nodeLib.getChannels), call(nodeLib.getPendingChannels)]);
 
     // Map all channels' node info together
@@ -27,23 +27,17 @@ export function* handleGetChannels() {
       ...pending_open_channels,
       ...waiting_close_channels,
     ];
-    const nodePubKeys = allChannels.reduce(
-      (prev, c) => {
-        prev[c.remote_node_pub] = true;
-        return prev;
-      },
-      {} as { [pubkey: string]: boolean },
-    );
-    const nodeInfoResponses: Array<Yielded<typeof nodeLib.getNodeInfo>> = yield all(
+    const nodePubKeys = allChannels.reduce((prev, c) => {
+      prev[c.remote_node_pub] = true;
+      return prev;
+    }, {} as { [pubkey: string]: boolean });
+    const nodeInfoResponses: Yielded<typeof nodeLib.getNodeInfo>[] = yield all(
       Object.keys(nodePubKeys).map(pk => call(safeGetNodeInfo, nodeLib, pk)),
     );
-    const nodeInfoMap = nodeInfoResponses.reduce(
-      (prev, node) => {
-        prev[node.node.pub_key] = node;
-        return prev;
-      },
-      {} as { [pubkey: string]: Yielded<typeof nodeLib.getNodeInfo> },
-    );
+    const nodeInfoMap = nodeInfoResponses.reduce((prev, node) => {
+      prev[node.node.pub_key] = node;
+      return prev;
+    }, {} as { [pubkey: string]: Yielded<typeof nodeLib.getNodeInfo> });
 
     // Map all channels together with node info
     const payload = allChannels.map(channel => ({

src/app/modules/node/sagas.ts

@@ -47,10 +47,7 @@ export function* handleCheckNodes(action: ReturnType<typeof actions.checkNodes>)
         }
       });
     });
-    const validUrls: Array<string | null> = yield call(
-      Promise.all.bind(Promise),
-      requests,
-    );
+    const validUrls: (string | null)[] = yield call(Promise.all.bind(Promise), requests);
     const validUrl = validUrls.find(url => !!url);
     if (!validUrl) {
       throw new Error('None of the checked nodes were available');

src/app/modules/peers/sagas.ts

@@ -12,7 +12,7 @@ export function* handleGetPeers() {
       selectNodeLibOrThrow,
     );
     const { peers }: Yielded<typeof nodeLib.getPeers> = yield call(nodeLib.getPeers);
-    const nodes: Array<Yielded<typeof nodeLib.getNodeInfo>> = yield all(
+    const nodes: Yielded<typeof nodeLib.getNodeInfo>[] = yield all(
       peers.map(p => call(safeGetNodeInfo, nodeLib, p.pub_key)),
     );
     const payload = peers.map((peer, i) => ({

src/app/prompts/authorize.tsx

@@ -84,10 +84,7 @@ class AuthorizePrompt extends React.Component<Props, State> {
   };
 }
 
-export default connect<{}, DispatchProps, {}, {}>(
-  undefined,
-  {
-    addEnabledDomain,
-    addRejectedDomain,
-  },
-)(AuthorizePrompt);
+export default connect<{}, DispatchProps, {}, {}>(undefined, {
+  addEnabledDomain,
+  addRejectedDomain,
+})(AuthorizePrompt);

src/app/prompts/payment.tsx

@@ -182,9 +182,7 @@ class PaymentPrompt extends React.Component<Props, State> {
                     },
                     {
                       label: 'Time lock',
-                      value: moment()
-                        .add(route.total_time_lock, 'seconds')
-                        .fromNow(true),
+                      value: moment().add(route.total_time_lock, 'seconds').fromNow(true),
                     },
                     {
                       label: 'Expires',
@@ -280,18 +278,18 @@ class PaymentPrompt extends React.Component<Props, State> {
 }
 
 interface DetailsTableProps {
-  rows: Array<{
+  rows: {
     label: React.ReactNode;
     value: React.ReactNode;
     isLarge?: boolean;
-  }>;
+  }[];
 }
 
 const DetailsTable: React.SFC<DetailsTableProps> = ({ rows }) => (
   <table className="DetailsTable">
     <tbody>
-      {rows.map(r => (
-        <tr className={`DetailsTable-row ${r.isLarge ? 'is-large' : ''}`}>
+      {rows.map((r, idx) => (
+        <tr key={idx} className={`DetailsTable-row ${r.isLarge ? 'is-large' : ''}`}>
           <td className="DetailsTable-row-label">{r.label}</td>
           <td className="DetailsTable-row-value">{r.value}</td>
         </tr>

src/app/utils/constants.ts

@@ -62,7 +62,7 @@ export const coinSymbols: { [key in CHAIN_TYPE]: string } = {
 export const blockchainLogos: {
   [key in CHAIN_TYPE]: React.ComponentType<
     CustomIconComponentProps | React.SVGProps<SVGSVGElement>
-  >
+  >;
 } = {
   bitcoin: BitcoinLogo,
   decred: DecredLogo,

src/app/utils/sync.ts

@@ -41,7 +41,7 @@ export interface SyncData<T> {
   data: T;
 }
 
-export const syncConfigs: Array<SyncConfig<any>> = [
+export const syncConfigs: SyncConfig<any>[] = [
   {
     key: 'crypto',
     version: 1,
@@ -118,21 +118,18 @@ export async function storageSyncGet(keys: string[]) {
   try {
     // Format and migrate responses
     const allResponses = await browser.storage.sync.get(keys);
-    return keys.reduce(
-      (prev, key) => {
-        const res = allResponses[key];
-        // No data synced yet
-        if (!res) {
-          prev[key] = undefined;
-          return prev;
-        }
-        // Run migrations on unencrypted data
-        const config = getConfigByKey(key);
-        prev[key] = migrateSyncedData(config, res);
+    return keys.reduce((prev, key) => {
+      const res = allResponses[key];
+      // No data synced yet
+      if (!res) {
+        prev[key] = undefined;
         return prev;
-      },
-      {} as { [key: string]: any },
-    );
+      }
+      // Run migrations on unencrypted data
+      const config = getConfigByKey(key);
+      prev[key] = migrateSyncedData(config, res);
+      return prev;
+    }, {} as { [key: string]: any });
   } catch (err) {
     Promise.reject(err);
   }

src/app/utils/ts.ts

@@ -1,4 +1,4 @@
 // This includes helper functions / types for Typescript
-export function typedKeys<T extends object>(e: T): Array<keyof T> {
+export function typedKeys<T extends object>(e: T): (keyof T)[] {
   return Object.keys(e).map(k => k as keyof T);
 }