Add new UI

package.json

@@ -26,7 +26,8 @@
     "@metamask/object-multiplex": "1.2.0",
     "@metamask/post-message-stream": "4.0.0",
     "@mycrypto/eth-scan": "3.4.4",
-    "@mycrypto/ui": "0.24.1",
+    "@mycrypto/ui": "1.11.2",
+    "@mycrypto/ui-legacy": "0.24.1",
     "@mycrypto/unlock-scan": "1.2.0",
     "@mycrypto/wallets": "1.4.2",
     "@reduxjs/toolkit": "1.6.0",
@@ -64,22 +65,23 @@
     "react-content-loader": "5.1.4",
     "react-copy-to-clipboard": "5.0.3",
     "react-dom": "17.0.2",
-    "react-is": "16.12.0",
+    "react-is": "17.0.2",
     "react-markdown": "6.0.2",
     "react-redux": "7.2.4",
     "react-responsive": "8.2.0",
     "react-router-dom": "5.1.2",
     "react-select": "4.3.1",
     "react-spring": "v8.0",
     "react-transition-group": "4.0.0",
+    "rebass": "4.0.7",
     "recharts": "1.8.5",
     "redux": "4.0.5",
     "redux-logger": "3.0.6",
     "redux-persist": "6.0.0",
     "redux-saga": "1.1.3",
     "regenerator-runtime": "0.13.7",
     "rskjs-util": "1.0.3",
-    "styled-components": "5.1.0",
+    "styled-components": "5.2.3",
     "styled-system": "5.1.5",
     "toasted-notes": "3.2.0",
     "uuid": "3.2.1",
@@ -138,6 +140,7 @@
     "@types/react-router-dom": "5.1.3",
     "@types/react-select": "4.0.15",
     "@types/react-transition-group": "4.2.3",
+    "@types/rebass": "4.0.10",
     "@types/recharts": "1.8.5",
     "@types/semver": "6.2.0",
     "@types/sha256": "0.2.0",
@@ -252,7 +255,9 @@
     "validate:codecov": "curl --data-binary @codecov.yml https://codecov.io/validate"
   },
   "resolutions": {
-    "@storybook/**/@emotion/sheet": "1.0.1"
+    "@emotion/sheet": "1.0.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
   },
   "lint-staged": {
     "**/*.{ts,tsx}": [

src/components/Account.tsx

@@ -1,14 +1,14 @@
 import { ReactNode } from 'react';
 
-import { Avatar, scale } from '@mycrypto/ui';
+import { Blockie } from '@mycrypto/ui';
+import { scale } from '@mycrypto/ui-legacy';
 import { toChecksumAddress } from 'ethereumjs-util';
 import styled from 'styled-components';
 
 import { BREAK_POINTS, FONT_SIZE, SPACING } from '@theme';
 import { translateRaw } from '@translations';
 
 import EthAddress from './EthAddress';
-import { Identicon } from './Identicon';
 import Tooltip from './Tooltip';
 import Typography from './Typography';
 
@@ -43,32 +43,18 @@ const Address = styled(EthAddress)`
   font-size: ${scale(0.25)};
 `;
 
-const SAvatar = styled(Avatar)`
-  &&& img {
-    height: 36px;
-    width: 36px;
-  }
-`;
-
-const SIdenticon = styled(Identicon)`
-  &&& img {
-    height: 36px;
-    width: 36px;
-    max-width: none;
-  }
+const SBlockie = styled(Blockie)`
+  height: 36px;
+  width: 36px;
+  max-width: none;
 `;
 
-interface TooltipType {
-  image?: string;
-  content: ReactNode | string;
-}
-
 interface Props {
   address: string;
   title?: JSX.Element | string;
   className?: string;
   isCopyable?: boolean;
-  tooltip?: TooltipType;
+  tooltip?: ReactNode | string;
   truncate: boolean;
   onSubmit?(title?: string): void;
 }
@@ -82,8 +68,7 @@ export default function Account({
   className
 }: Props) {
   const TitleComponent = title ? Title : MissingTitle;
-  const ImageComponent = () =>
-    tooltip && tooltip.image ? <SAvatar src={tooltip.image} /> : <SIdenticon address={address} />;
+  const ImageComponent = () => <SBlockie address={address} />;
 
   const TitleItem = typeof title === 'string' ? <TitleComponent>{title}</TitleComponent> : title;
   const renderAddressContent = () => (
@@ -103,7 +88,7 @@ export default function Account({
   );
 
   return tooltip ? (
-    <Tooltip tooltip={<Typography as="div">{tooltip.content}</Typography>}>
+    <Tooltip tooltip={<Typography as="div">{tooltip}</Typography>}>
       {renderAddressContent()}
     </Tooltip>
   ) : (

src/components/AccountList.tsx

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction, useState } from 'react';
 
+import { Blockie } from '@mycrypto/ui';
 import cloneDeep from 'lodash/cloneDeep';
 import isNumber from 'lodash/isNumber';
 import styled from 'styled-components';
@@ -45,7 +46,6 @@ import { truncate, useScreenSize } from '@utils';
 import Checkbox from './Checkbox';
 import { default as Currency } from './Currency';
 import { DashboardPanel } from './DashboardPanel';
-import { Identicon } from './Identicon';
 import Tooltip from './Tooltip';
 
 const SDashboardPanel = styled(DashboardPanel)<{ dashboard?: boolean }>`
@@ -104,11 +104,9 @@ const PrivacyCheckBox = styled(Checkbox)`
   margin-bottom: 0px;
 `;
 
-const SIdenticon = styled(Identicon)`
-  img {
-    height: 2em;
-    min-width: 2em;
-  }
+const SBlockie = styled(Blockie)`
+  height: 2em;
+  min-width: 2em;
   margin-right: 0.8em;
   @media (min-width: ${BREAK_POINTS.SCREEN_SM}) {
     margin-right: 1em;
@@ -481,7 +479,7 @@ const BuildAccountTable = (
     body: getFullTableData.map(({ account, index, total, addressCard }) => {
       let bodyContent = [
         <Label key={index}>
-          <SIdenticon address={account.address} />
+          <SBlockie address={account.address} />
           <LabelWithWallet>
             <EditableAccountLabel
               addressBookEntry={addressCard}

src/components/AmountInput.tsx

@@ -1,4 +1,4 @@
-import { Input } from '@mycrypto/ui';
+import { Input } from '@mycrypto/ui-legacy';
 import styled from 'styled-components';
 
 import { Asset } from '@types';

src/components/Button.tsx

@@ -1,184 +1,7 @@
-import { ComponentProps, ReactNode } from 'react';
+import { Button, ButtonProps } from '@mycrypto/ui';
 
-import { Button } from '@mycrypto/ui';
-import styled, { css } from 'styled-components';
-
-import { COLORS, SPACING } from '@theme';
-
-import Spinner from './Spinner';
-import Typography from './Typography';
-
-const ButtonColorSchemes = {
-  default: 'default',
-  inverted: 'inverted',
-  warning: 'warning',
-  transparent: 'transparent'
-};
-
-type TButtonColorScheme = keyof typeof ButtonColorSchemes;
-
-interface ButtonProps {
-  children: ReactNode | string;
-  fullwidth?: boolean;
-  disabled?: boolean;
-  loading?: boolean;
-  colorScheme?: TButtonColorScheme;
-}
-
-interface StyledButtonProps {
-  fullwidth?: boolean;
-  disabled?: boolean;
-  colorScheme?: TButtonColorScheme;
-  // Since using 'loading' causes warnings from React
-  _loading?: boolean;
-}
-
-export type Props = ButtonProps & ComponentProps<typeof Button>;
-
-const Wrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const LoadingSpinnerWrapper = styled.div`
-  display: flex;
-  margin-right: ${SPACING.XS};
-`;
-
-// CSS calculation since Spinner has a constant size of 1em
-const SButton = styled(Button)<StyledButtonProps>`
-  &&& {
-    font-size: 1rem;
-    ${(props) => props._loading && 'padding-left: calc(2.25em - 1em)'}
-  }
-
-  div > span {
-    color: ${COLORS.WHITE};
-  }
-
-  ${(props) =>
-    props.disabled &&
-    `
-      cursor: default;
-    `}
-
-  ${(props) =>
-    props.colorScheme === 'default' &&
-    `
-      background-color: ${props.disabled ? COLORS.GREY_LIGHT : COLORS.BLUE_LIGHT};
-
-      &:hover {
-        background-color: ${props.disabled ? COLORS.GREY_LIGHT : COLORS.BLUE_LIGHT_DARKISH};
-      }
-  `}
-
-  ${(props) =>
-    props.colorScheme === 'inverted' &&
-    `
-      background-color: ${props.disabled ? COLORS.GREY_LIGHT : COLORS.WHITE};
-
-      div > span {
-        color:  ${props.disabled ? COLORS.GREY_LIGHT : COLORS.BLUE_LIGHT_DARKISH};
-      }
-
-      &:hover {
-        div > span {
-          color: ${props.disabled ? COLORS.GREY_LIGHT : COLORS.WHITE};
-        }
-      }
-
-      border: 2px solid ${props.disabled ? COLORS.GREY_LIGHT : COLORS.BLUE_LIGHT_DARKISH};
-      border-radius: 3px;
-
-      &:hover {
-        background-color: ${props.disabled ? COLORS.GREY_LIGHT : COLORS.BLUE_LIGHT_DARKISH};
-      }
-      &:focus {
-        div > span {
-          color: ${props.disabled ? COLORS.GREY_LIGHT : COLORS.WHITE};
-        }
-      }
-  `}
-
-  ${(props) =>
-    props.colorScheme === 'warning' &&
-    `
-      background-color: ${props.disabled ? COLORS.GREY_LIGHT : COLORS.WHITE};
-
-      div > span {
-        color: ${props.disabled ? COLORS.WHITE : COLORS.WARNING_ORANGE};
-      }
-
-      &:hover {
-        div > span {
-          color: ${COLORS.WHITE};
-        }
-      }
-
-      border: 2px solid ${props.disabled ? COLORS.GREY_LIGHT : COLORS.WARNING_ORANGE};
-      border-radius: 3px;
-
-      &:hover {
-        background-color: ${props.disabled ? COLORS.GREY_LIGHT : COLORS.WARNING_ORANGE};
-      }
-      &:focus {
-        div > span {
-          color: ${COLORS.WHITE};
-        }
-      }
-  `}
-
-  ${(props) =>
-    props.colorScheme === 'transparent' &&
-    `
-      background-color: ${props.disabled ? COLORS.GREY_LIGHT : 'transparent'};
-
-      div > span {
-        color:  ${props.disabled ? COLORS.WHITE : COLORS.WHITE};
-      }
-
-      &:hover {
-        div > span {
-          color: ${props.disabled ? COLORS.WHITE : COLORS.BLUE_LIGHT};
-        }
-      }
-
-      border: 2px solid ${props.disabled ? COLORS.GREY_LIGHT : COLORS.WHITE};
-      border-radius: 3px;
-
-      &:hover {
-        background-color: ${props.disabled ? COLORS.GREY_LIGHT : COLORS.WHITE};
-      }
-      &:focus {
-        div > span {
-          color: ${props.disabled ? COLORS.GREY_LIGHT : COLORS.WHITE};
-        }
-      }
-  `}
-
-
-  ${(props) =>
-    props.fullwidth &&
-    css`
-      width: 100%;
-      margin-top: 1rem;
-    `}
-`;
-
-function StyledButton({ children, disabled, loading, colorScheme = 'default', ...props }: Props) {
-  return (
-    <SButton disabled={disabled || loading} _loading={loading} colorScheme={colorScheme} {...props}>
-      <Wrapper>
-        {loading && (
-          <LoadingSpinnerWrapper>
-            <Spinner />
-          </LoadingSpinnerWrapper>
-        )}
-        <Typography>{children}</Typography>
-      </Wrapper>
-    </SButton>
-  );
+function StyledButton({ children, ...props }: Omit<ButtonProps, 'css'>) {
+  return <Button {...props}>{children}</Button>;
 }
 
 export default StyledButton;

src/components/Checkbox.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@mycrypto/ui';
+import { Body } from '@mycrypto/ui';
 import styled from 'styled-components';
 
 interface CheckboxProps {
@@ -139,7 +139,7 @@ export default function Checkbox({
         {icon && <SIconContainer>{icon()}</SIconContainer>}
         {label && (
           <SLabelContainer>
-            <Typography style={{ fontSize: '1em', margin: 0 }}>{label}</Typography>
+            <Body style={{ fontSize: '1em', margin: 0 }}>{label}</Body>
           </SLabelContainer>
         )}
       </div>

src/components/ContentPanel.tsx

@@ -1,4 +1,5 @@
-import { Button, Panel, Typography } from '@mycrypto/ui';
+import { Body } from '@mycrypto/ui';
+import { Button, Panel } from '@mycrypto/ui-legacy';
 import styled from 'styled-components';
 
 import backArrowIcon from '@assets/images/icn-back-arrow.svg';
@@ -61,7 +62,7 @@ const ContentPanelHeadingIcon = styled.img`
   height: 45px;
 `;
 
-const ContentPanelDescription = styled(Typography)`
+const ContentPanelDescription = styled(Body)`
   margin: 0;
   margin-bottom: 15px;
 `;