Merge pull request #244 from lightninglabs/update-deps

deps: update some npm dependencies

Author: jamaljsr

app/package.json

@@ -17,33 +17,32 @@
     "build-storybook": "build-storybook -s public"
   },
   "dependencies": {
-    "@emotion/core": "10.0.28",
-    "@emotion/styled": "10.0.27",
-    "@improbable-eng/grpc-web": "0.12.0",
+    "@emotion/react": "11.4.0",
+    "@emotion/styled": "11.3.0",
+    "@improbable-eng/grpc-web": "0.14.0",
     "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.21",
     "lottie-web": "5.7.0",
-    "mobx": "6.0.2",
-    "mobx-react-lite": "3.0.1",
-    "mobx-utils": "5.6.1",
+    "mobx": "6.3.2",
+    "mobx-react-lite": "3.2.0",
+    "mobx-utils": "6.0.4",
     "rc-select": "11.5.0",
     "rc-tooltip": "4.2.1",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-i18next": "11.7.0",
     "react-router": "5.2.0",
-    "react-scripts": "4.0.0",
+    "react-scripts": "4.0.2",
     "react-toastify": "6.0.6",
     "react-virtualized": "9.21.2",
     "reactour": "1.18.0",
@@ -68,8 +67,8 @@
     "@types/jest": "26.0.3",
     "@types/lodash": "4.14.157",
     "@types/node": "14.0.14",
-    "@types/react": "16.9.56",
-    "@types/react-dom": "16.9.9",
+    "@types/react": "17.0.13",
+    "@types/react-dom": "17.0.8",
     "@types/react-router": "5.1.8",
     "@types/react-virtualized": "9.21.10",
     "@types/reactour": "1.17.1",
@@ -85,7 +84,7 @@
     "node-sass": "4.14.1",
     "prettier": "2.1.2",
     "ts-protoc-gen": "0.12.0",
-    "typescript": "4.0.5"
+    "typescript": "4.1.6"
   },
   "eslintConfig": {
     "extends": "react-app",

app/src/components/NodeStatus.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
+import styled from '@emotion/styled';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import { HeaderFour, Jumbo, Small } from 'components/base';
 import { Bitcoin, Bolt } from './base';
 import Tip from './common/Tip';
 import Unit from './common/Unit';
-import { styled } from './theme';
 
 const Styled = {
   Wrapper: styled.div`

app/src/components/auth/AuthPage.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import { observer } from 'mobx-react-lite';
+import styled from '@emotion/styled';
 import { ReactComponent as LogoImage } from 'assets/images/logo.svg';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import { Background, Button, HeaderOne, Input } from 'components/base';
-import { styled } from 'components/theme';
 
 const Styled = {
   Wrapper: styled.div`

app/src/components/base/icons.tsx

@@ -1,10 +1,12 @@
+import styled from '@emotion/styled';
 import { ReactComponent as AlertTriangleIcon } from 'assets/icons/alert-triangle.svg';
 import { ReactComponent as ArrowDownCircleIcon } from 'assets/icons/arrow-down-circle.svg';
 import { ReactComponent as ArrowDownIcon } from 'assets/icons/arrow-down.svg';
 import { ReactComponent as ArrowLeftIcon } from 'assets/icons/arrow-left.svg';
 import { ReactComponent as ArrowRightIcon } from 'assets/icons/arrow-right.svg';
 import { ReactComponent as ArrowUpCircleIcon } from 'assets/icons/arrow-up-circle.svg';
 import { ReactComponent as ArrowUpIcon } from 'assets/icons/arrow-up.svg';
+import { ReactComponent as BarChartIcon } from 'assets/icons/bar-chart.svg';
 import { ReactComponent as BitcoinIcon } from 'assets/icons/bitcoin.svg';
 import { ReactComponent as BoltIcon } from 'assets/icons/bolt.svg';
 import { ReactComponent as CheckIcon } from 'assets/icons/check.svg';
@@ -20,16 +22,14 @@ import { ReactComponent as CopyIcon } from 'assets/icons/copy.svg';
 import { ReactComponent as DotIcon } from 'assets/icons/dot.svg';
 import { ReactComponent as DownloadIcon } from 'assets/icons/download.svg';
 import { ReactComponent as HelpCircleIcon } from 'assets/icons/help-circle.svg';
+import { ReactComponent as ListIcon } from 'assets/icons/list.svg';
 import { ReactComponent as MaximizeIcon } from 'assets/icons/maximize.svg';
 import { ReactComponent as MenuIcon } from 'assets/icons/menu.svg';
 import { ReactComponent as MinimizeIcon } from 'assets/icons/minimize.svg';
 import { ReactComponent as RefreshIcon } from 'assets/icons/refresh-cw.svg';
 import { ReactComponent as SettingsIcon } from 'assets/icons/settings.svg';
 import { ReactComponent as CancelIcon } from 'assets/icons/slash.svg';
 import { ReactComponent as UserPlusIcon } from 'assets/icons/user-plus.svg';
-import { ReactComponent as BarChartIcon } from 'assets/icons/bar-chart.svg';
-import { ReactComponent as ListIcon } from 'assets/icons/list.svg';
-import { styled } from 'components/theme';
 
 interface IconProps {
   size?: 'x-small' | 'small' | 'medium' | 'large';

app/src/components/base/shared.tsx

@@ -1,5 +1,5 @@
+import styled from '@emotion/styled';
 import Chevrons from 'assets/icons/chevrons.svg';
-import { styled } from 'components/theme';
 
 //
 // Misc

app/src/components/base/text.tsx

@@ -1,4 +1,4 @@
-import { styled } from 'components/theme';
+import styled from '@emotion/styled';
 
 interface HeaderProps {
   marginless?: boolean;

app/src/components/common/AlertContainer.tsx

@@ -3,8 +3,8 @@ import { toast, ToastContainer } from 'react-toastify';
 import { values } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { Alert } from 'types/state';
+import styled from '@emotion/styled';
 import { useStore } from 'store';
-import { styled } from 'components/theme';
 import { Close } from '../base';
 
 const Styled = {

app/src/components/common/BadgeList.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
+import styled from '@emotion/styled';
 import { Badge } from 'components/base';
-import { styled } from 'components/theme';
 
 const Styled = {
   Wrapper: styled.div<{ flex?: boolean }>`

app/src/components/common/Checkbox.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { styled } from 'components/theme';
+import styled from '@emotion/styled';
 import { Check } from '../base';
 
 const Styled = {

app/src/components/common/ExternalLink.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { styled } from 'components/theme';
+import styled from '@emotion/styled';
 
 const Styled = {
   Wrapper: styled.a`