diff --git a/package.json b/package.json index 7bf430ed20b..c682575d7b0 100644 --- a/package.json +++ b/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,7 +65,7 @@ "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", @@ -72,6 +73,7 @@ "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", @@ -79,7 +81,7 @@ "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}": [ diff --git a/src/assets/images/icn-toast-error.svg b/src/assets/images/icn-toast-error.svg index ce40627b77c..5ad23489884 100644 --- a/src/assets/images/icn-toast-error.svg +++ b/src/assets/images/icn-toast-error.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/components/Account.tsx b/src/components/Account.tsx index 790b664af1f..d9a17c35769 100644 --- a/src/components/Account.tsx +++ b/src/components/Account.tsx @@ -1,6 +1,7 @@ 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'; @@ -8,7 +9,6 @@ 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 ? : ; + const ImageComponent = () => ; const TitleItem = typeof title === 'string' ? {title} : title; const renderAddressContent = () => ( @@ -103,7 +88,7 @@ export default function Account({ ); return tooltip ? ( - {tooltip.content}}> + {tooltip}}> {renderAddressContent()} ) : ( diff --git a/src/components/AccountList.tsx b/src/components/AccountList.tsx index 8bf69397d64..19c064915bf 100644 --- a/src/components/AccountList.tsx +++ b/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} )} diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx index dc2d10656cd..175cb8ac014 100644 --- a/src/components/ContentPanel.tsx +++ b/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; `; diff --git a/src/components/CopyableCodeBlock.tsx b/src/components/CopyableCodeBlock.tsx index 12f09b56aee..c01b2c8169f 100644 --- a/src/components/CopyableCodeBlock.tsx +++ b/src/components/CopyableCodeBlock.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react'; -import { Copyable } from '@mycrypto/ui'; +import { Copyable } from '@mycrypto/ui-legacy'; import styled from 'styled-components'; interface Props { diff --git a/src/components/EthAddress.tsx b/src/components/EthAddress.tsx index f8a8143d2e2..4ae9fbdf11b 100644 --- a/src/components/EthAddress.tsx +++ b/src/components/EthAddress.tsx @@ -1,6 +1,6 @@ import { MouseEvent } from 'react'; -import { Copyable } from '@mycrypto/ui'; +import { Copyable } from '@mycrypto/ui-legacy'; import { toChecksumAddress } from 'ethereumjs-util'; import styled from 'styled-components'; diff --git a/src/components/ExtendedContentPanel.tsx b/src/components/ExtendedContentPanel.tsx index 041107ab923..af43cffe2fa 100644 --- a/src/components/ExtendedContentPanel.tsx +++ b/src/components/ExtendedContentPanel.tsx @@ -1,4 +1,4 @@ -import { Button, Panel } from '@mycrypto/ui'; +import { Button, Panel } from '@mycrypto/ui-legacy'; import styled from 'styled-components'; import backArrowIcon from '@assets/images/icn-back-arrow.svg'; diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 2eb9d95cbfc..a9dc9168fd4 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -127,6 +127,7 @@ import statusBadgePending from '@assets/images/icn-status-badge-pending.svg'; import statusBadgeSuccess from '@assets/images/icn-status-badge-success.svg'; import swapFlip from '@assets/images/icn-swap-flip.svg'; import swap from '@assets/images/icn-swap.svg'; +import warningTriangle from '@assets/images/icn-toast-error.svg'; import warning from '@assets/images/icn-warning.svg'; import lendLogo from '@assets/images/lend-logo.png'; import linkOutIcon from '@assets/images/link-out.svg'; @@ -168,6 +169,7 @@ const svgIcons = { questionWhite, questionBlack, warning, + warningTriangle, /* Noun icons */ website, diff --git a/src/components/Identicon.tsx b/src/components/Identicon.tsx deleted file mode 100644 index d4e72c48533..00000000000 --- a/src/components/Identicon.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { ClassAttributes, HTMLAttributes, useMemo } from 'react'; - -import { Typography } from '@mycrypto/ui'; -import makeBlockie from 'ethereum-blockies-base64'; -import styled from 'styled-components'; - -// We need Typography to set the appropriate em size, but without its extra negative space -const TypographyWrapper = styled(Typography)` - line-height: 0; - margin: 0; -`; - -const RoundedImage = styled.img` - border-radius: 50%; - height: 2.5em; -`; - -// @todo Use new UI library instead -export const Identicon = ({ - address, - ...rest -}: { address: string } & Omit< - ClassAttributes & - HTMLAttributes & { muted?: boolean }, - 'ref' ->) => { - const blockie = useMemo(() => makeBlockie(address), [address]); - return ( - - - - ); -}; - -export default Identicon; diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx index 9da6c0756b1..ccb8b51d810 100644 --- a/src/components/InputField.tsx +++ b/src/components/InputField.tsx @@ -1,6 +1,5 @@ import { Component, ElementType, HTMLProps } from 'react'; -import { Icon } from '@mycrypto/ui'; import styled from 'styled-components'; import { InlineMessage, Label, Spinner } from '@components'; @@ -20,7 +19,6 @@ interface WrapperProps { interface CustomInputProps { inputError?: string | JSX.Element; inputErrorBorder?: boolean; - showEye?: boolean; customIcon?: ElementType; height?: string; maxHeight?: string; @@ -32,7 +30,7 @@ const CustomInput = styled.input` background: ${(props) => props.theme.controlBackground}; border: 0.125em solid ${(props) => props.theme.controlBorder}; border-radius: 0.125em; - padding: ${(props) => (props.showEye || props.customIcon ? '12px 36px 12px 12px' : '12px 12px')}; + padding: ${(props) => (props.customIcon ? '12px 36px 12px 12px' : '12px 12px')}; display: flex; :focus-within { outline: none; @@ -51,7 +49,7 @@ const CustomTextArea = styled.textarea` background: ${(props) => props.theme.controlBackground}; border: 0.125em solid ${(props) => props.theme.controlBorder}; border-radius: 0.125em; - padding: ${(props) => (props.showEye ? '12px 36px 12px 12px' : '12px 12px')}; + padding: 12px 12px; display: flex; :focus-within { outline: none; @@ -78,21 +76,6 @@ const InputWrapper = styled.div` } `; -interface CustomIconProps { - showPassword?: boolean; -} - -const EyeIcon = styled(Icon)` - svg { - margin-top: 6px; - width: 23px; - height: 23px; - color: ${(props: CustomIconProps) => (props.showPassword ? COLORS.BLUE_BRIGHT : '')}; - cursor: pointer; - user-select: none; - } -`; - const DefaultIconWrapper = styled.div` display: flex; height: 100%; @@ -132,7 +115,6 @@ interface Props { inputError?: string | JSX.Element | undefined; inputErrorType?: InlineMessageType; inputErrorBorder?: boolean; - showEye?: boolean; customIcon?: ElementType; textarea?: boolean; placeholder?: string; @@ -168,7 +150,6 @@ export class InputField extends Component { inputErrorType, inputErrorBorder = false, type, - showEye, customIcon, textarea, placeholder, @@ -221,7 +202,6 @@ export class InputField extends Component { inputError={inputError} inputErrorBorder={inputErrorBorder} onKeyUp={this.handleKeyUp} - showEye={showEye} customIcon={customIcon} type={this.state.showPassword ? 'text' : type ? type : 'text'} placeholder={placeholder ? placeholder : ''} @@ -239,12 +219,6 @@ export class InputField extends Component { )} - {showEye && ( - - - - )} - {isLoading && ( diff --git a/src/components/Network.tsx b/src/components/Network.tsx index d0ec753b473..20d795524de 100644 --- a/src/components/Network.tsx +++ b/src/components/Network.tsx @@ -1,10 +1,10 @@ import { FC } from 'react'; -import { scale } from '@mycrypto/ui'; +import { Box, BoxProps } from '@mycrypto/ui'; +import { scale } from '@mycrypto/ui-legacy'; import { size } from 'polished'; import styled from 'styled-components'; -import Box from './Box'; import { Text } from './NewTypography'; const Color = styled.div` @@ -16,8 +16,12 @@ const Color = styled.div` ${size(scale(-1))}; `; -export const Network: FC<{ color: string }> = ({ children, color }) => ( - +export const Network: FC<{ color: string } & Omit> = ({ + children, + color, + ...props +}) => ( + {children} diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx index ba943c03737..e548ac75ea4 100644 --- a/src/components/Panel.tsx +++ b/src/components/Panel.tsx @@ -1,4 +1,4 @@ -import { Panel as UIPanel } from '@mycrypto/ui'; +import { Panel as UIPanel } from '@mycrypto/ui-legacy'; import styled from 'styled-components'; export const Panel = styled(UIPanel)` diff --git a/src/components/RowDeleteOverlay.tsx b/src/components/RowDeleteOverlay.tsx index 9ad27357410..6e143c5199b 100644 --- a/src/components/RowDeleteOverlay.tsx +++ b/src/components/RowDeleteOverlay.tsx @@ -1,6 +1,6 @@ +import { Button } from '@mycrypto/ui'; import styled from 'styled-components'; -import { Button } from '@components'; import { BREAK_POINTS, COLORS, SPACING } from '@theme'; import { translateRaw } from '@translations'; @@ -65,9 +65,7 @@ const RowDeleteOverlay = ({ {prompt} - + ); diff --git a/src/components/StackedCard.tsx b/src/components/StackedCard.tsx index e19089ae64d..b69c4c8bfa7 100644 --- a/src/components/StackedCard.tsx +++ b/src/components/StackedCard.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react'; -import { scale } from '@mycrypto/ui'; +import { scale } from '@mycrypto/ui-legacy'; import styled, { css } from 'styled-components'; import { isEmpty } from '@vendor'; diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx index f420995bb9e..40af3d3180d 100644 --- a/src/components/Tooltip.tsx +++ b/src/components/Tooltip.tsx @@ -1,6 +1,6 @@ import { ComponentProps, FC, ReactNode } from 'react'; -import { Tooltip as UITooltip } from '@mycrypto/ui'; +import { Tooltip as UITooltip } from '@mycrypto/ui-legacy'; import styled from 'styled-components'; import { display, diff --git a/src/components/TransactionFlow/MultiTxReceipt.tsx b/src/components/TransactionFlow/MultiTxReceipt.tsx index d08157a1080..17180f9c770 100644 --- a/src/components/TransactionFlow/MultiTxReceipt.tsx +++ b/src/components/TransactionFlow/MultiTxReceipt.tsx @@ -184,7 +184,7 @@ export default function MultiTxReceipt({ })} {shouldRenderPendingBtn && ( )} {completeButtonText && !shouldRenderPendingBtn && ( - )} - diff --git a/src/components/TransactionFlow/TxPendingState.tsx b/src/components/TransactionFlow/TxPendingState.tsx index 064777c7100..81cc44a7b9a 100644 --- a/src/components/TransactionFlow/TxPendingState.tsx +++ b/src/components/TransactionFlow/TxPendingState.tsx @@ -299,7 +299,7 @@ export const TxPendingState = ({ )} )} - diff --git a/src/components/TransactionFlow/TxReceipt.scss b/src/components/TransactionFlow/TxReceipt.scss index bfca80cfc18..1af7e151e9d 100644 --- a/src/components/TransactionFlow/TxReceipt.scss +++ b/src/components/TransactionFlow/TxReceipt.scss @@ -107,10 +107,6 @@ &-tweet-text { flex: 1; } - &-back { - width: 100%; - margin-bottom: 25px; - } &-detailButton { width: 100%; margin-bottom: 15px; diff --git a/src/components/TransactionFlow/TxReceipt.stories.tsx b/src/components/TransactionFlow/TxReceipt.stories.tsx index e2b6682c714..56e5bcaf62d 100644 --- a/src/components/TransactionFlow/TxReceipt.stories.tsx +++ b/src/components/TransactionFlow/TxReceipt.stories.tsx @@ -140,7 +140,7 @@ TxReceiptFaucet.args = { )} isExternal={true} > - diff --git a/src/components/TransactionFlow/TxReceipt.tsx b/src/components/TransactionFlow/TxReceipt.tsx index 9549a7be957..eef3bc0af64 100644 --- a/src/components/TransactionFlow/TxReceipt.tsx +++ b/src/components/TransactionFlow/TxReceipt.tsx @@ -493,7 +493,7 @@ export const TxReceiptUI = ({ {completeButton && !(txStatus === ITxStatus.PENDING) && ( <> {typeof completeButton === 'string' ? ( - ) : ( @@ -530,7 +530,7 @@ export const TxReceiptUI = ({ )} - diff --git a/src/components/TransactionFlow/displays/TransactionDetailsDisplay.tsx b/src/components/TransactionFlow/displays/TransactionDetailsDisplay.tsx index e57fd807301..adf9c462e19 100644 --- a/src/components/TransactionFlow/displays/TransactionDetailsDisplay.tsx +++ b/src/components/TransactionFlow/displays/TransactionDetailsDisplay.tsx @@ -2,10 +2,10 @@ import { useState } from 'react'; import { BigNumber } from '@ethersproject/bignumber'; import { formatUnits } from '@ethersproject/units'; -import { Button, Network as UINetwork } from '@mycrypto/ui'; +import { Button } from '@mycrypto/ui-legacy'; import styled from 'styled-components'; -import { CopyableCodeBlock, EthAddress } from '@components'; +import { CopyableCodeBlock, EthAddress, Network as UINetwork } from '@components'; import { DEFAULT_ASSET_DECIMAL } from '@config'; import { COLORS } from '@theme'; import translate, { translateRaw } from '@translations'; @@ -228,7 +228,9 @@ function TransactionDetailsDisplay({
{translateRaw('NETWORK')}:
- {network.name} + + {network.name} +
diff --git a/src/components/TransactionFlow/displays/TxIntermediaryDisplay.tsx b/src/components/TransactionFlow/displays/TxIntermediaryDisplay.tsx index 4da372e31ab..ca7a568db85 100644 --- a/src/components/TransactionFlow/displays/TxIntermediaryDisplay.tsx +++ b/src/components/TransactionFlow/displays/TxIntermediaryDisplay.tsx @@ -1,4 +1,4 @@ -import { Copyable } from '@mycrypto/ui'; +import { Copyable } from '@mycrypto/ui-legacy'; import styled from 'styled-components'; import { Icon, Tooltip } from '@components'; diff --git a/src/components/Typography.tsx b/src/components/Typography.tsx index 5a053a8a8a4..dc3674bf306 100644 --- a/src/components/Typography.tsx +++ b/src/components/Typography.tsx @@ -1,6 +1,6 @@ import { ComponentType, CSSProperties, FC, MouseEvent, ReactElement } from 'react'; -import { Typography as UITypography } from '@mycrypto/ui'; +import { Typography as UITypography } from '@mycrypto/ui-legacy'; import styled from 'styled-components'; import { BREAK_POINTS } from '@theme'; diff --git a/src/components/UndoDeleteOverlay.tsx b/src/components/UndoDeleteOverlay.tsx index a5372f0ebb7..201604412ee 100644 --- a/src/components/UndoDeleteOverlay.tsx +++ b/src/components/UndoDeleteOverlay.tsx @@ -1,11 +1,11 @@ import { FC } from 'react'; +import { Blockie } from '@mycrypto/ui'; import styled from 'styled-components'; import { BREAK_POINTS, COLORS, FONT_SIZE, SPACING } from '@theme'; import Button from './Button'; -import { Identicon } from './Identicon'; const TableOverlay = styled.div` height: 100%; @@ -27,16 +27,14 @@ const ContentOverlay = styled.div` align-items: center; `; -const SIdenticon = styled(Identicon)` +const SBlockie = styled(Blockie)` padding-top: 4px; margin-left: ${SPACING.SM}; margin-right: ${SPACING.SM}; margin-bottom: ${SPACING.SM}; - img { - height: 2em; - min-width: 2em; - } + height: 2em; + min-width: 2em; @media (min-width: ${BREAK_POINTS.SCREEN_SM}) { padding-top: 0; @@ -77,11 +75,11 @@ interface Props { const UndoDeleteOverlay: FC = ({ overlayText, restoreAccount, address }) => ( - + {overlayText} - diff --git a/src/components/WalletList/WalletButton.tsx b/src/components/WalletList/WalletButton.tsx index 581ae043187..269b782f8b1 100644 --- a/src/components/WalletList/WalletButton.tsx +++ b/src/components/WalletList/WalletButton.tsx @@ -1,4 +1,4 @@ -import { Tooltip } from '@mycrypto/ui'; +import { Tooltip } from '@mycrypto/ui-legacy'; import styled, { keyframes } from 'styled-components'; import { BREAK_POINTS, COLORS } from '@theme'; diff --git a/src/components/WalletList/WalletList.tsx b/src/components/WalletList/WalletList.tsx index 9ab6341dafe..d4289ff6c49 100644 --- a/src/components/WalletList/WalletList.tsx +++ b/src/components/WalletList/WalletList.tsx @@ -90,7 +90,7 @@ const WalletList = ({ {accounts.length === 0 && ( diff --git a/src/features/InteractWithContracts/components/Interact.tsx b/src/features/InteractWithContracts/components/Interact.tsx index 523367c37e2..fe518658a85 100644 --- a/src/features/InteractWithContracts/components/Interact.tsx +++ b/src/features/InteractWithContracts/components/Interact.tsx @@ -1,12 +1,12 @@ import { useEffect, useState } from 'react'; +import { Button } from '@mycrypto/ui'; import { Formik } from 'formik'; import { RouteComponentProps, withRouter } from 'react-router-dom'; import styled from 'styled-components'; import { object, string } from 'yup'; import { - Button, ContractLookupField, Icon, InlineMessage, @@ -398,12 +398,7 @@ function Interact(props: CombinedProps) { onChange={({ target: { value } }) => handleCustomContractNameChanged(value)} /> - diff --git a/src/features/NotificationsPanel/NotificationsPanel.tsx b/src/features/NotificationsPanel/NotificationsPanel.tsx index 5ad30b82c2a..4118547deba 100644 --- a/src/features/NotificationsPanel/NotificationsPanel.tsx +++ b/src/features/NotificationsPanel/NotificationsPanel.tsx @@ -1,6 +1,6 @@ import { Fragment } from 'react'; -import { Button, Panel } from '@mycrypto/ui'; +import { Button, Panel } from '@mycrypto/ui-legacy'; import styled from 'styled-components'; import closeIcon from '@assets/images/icn-close.svg'; diff --git a/src/features/NotificationsPanel/components/GetHardwareWalletNotification.tsx b/src/features/NotificationsPanel/components/GetHardwareWalletNotification.tsx index 4ba47b0c665..4afc94dcfe0 100644 --- a/src/features/NotificationsPanel/components/GetHardwareWalletNotification.tsx +++ b/src/features/NotificationsPanel/components/GetHardwareWalletNotification.tsx @@ -35,12 +35,12 @@ const getResources = () => { return ( <> - + {translate('NOTIFICATIONS_GET_WALLET_RESOURCE_TREZOR')} - + {translate('NOTIFICATIONS_GET_WALLET_RESOURCE_LEDGER')} diff --git a/src/features/NotificationsPanel/components/OnboardingPleaseUnderstandNotification.tsx b/src/features/NotificationsPanel/components/OnboardingPleaseUnderstandNotification.tsx index 3b3ec8d53bf..cb45e5a6c7c 100644 --- a/src/features/NotificationsPanel/components/OnboardingPleaseUnderstandNotification.tsx +++ b/src/features/NotificationsPanel/components/OnboardingPleaseUnderstandNotification.tsx @@ -71,7 +71,9 @@ export default function OnboardingPleaseUnderstandNotification() { target="_blank" rel="noopener noreferrer" > - {translate('NOTIFICATIONS_ONBOARDING_MORE')} + + {translate('NOTIFICATIONS_ONBOARDING_MORE')} + } > diff --git a/src/features/NotificationsPanel/components/OnboardingResponsibleNotification.tsx b/src/features/NotificationsPanel/components/OnboardingResponsibleNotification.tsx index d2a73ebbe8c..7a78bf5ec82 100644 --- a/src/features/NotificationsPanel/components/OnboardingResponsibleNotification.tsx +++ b/src/features/NotificationsPanel/components/OnboardingResponsibleNotification.tsx @@ -94,7 +94,9 @@ export default function OnboardingResponsibleNotification() { target="_blank" rel="noopener noreferrer" > - {translate('NOTIFICATIONS_ONBOARDING_MORE')} + + {translate('NOTIFICATIONS_ONBOARDING_MORE')} + } > diff --git a/src/features/NotificationsPanel/components/SaveDashboardNotification.tsx b/src/features/NotificationsPanel/components/SaveDashboardNotification.tsx index 183051cf05e..2f826b0be7c 100644 --- a/src/features/NotificationsPanel/components/SaveDashboardNotification.tsx +++ b/src/features/NotificationsPanel/components/SaveDashboardNotification.tsx @@ -31,7 +31,7 @@ export default function SaveDashboardNotification() { description={translate('NOTIFICATIONS_SAVE_DASHBOARD_DESCRIPTION')} resources={ - + {translate('NOTIFICATIONS_SAVE_DASHBOARD_RESOURCE')} diff --git a/src/features/NotificationsPanel/components/WinterNotification.tsx b/src/features/NotificationsPanel/components/WinterNotification.tsx index 00d584109c0..ae53c676da5 100644 --- a/src/features/NotificationsPanel/components/WinterNotification.tsx +++ b/src/features/NotificationsPanel/components/WinterNotification.tsx @@ -81,7 +81,7 @@ const NotificationContent = () => { onClick={handleClaim} loading={isClaiming} disabled={analyticsId.length === 0} - colorScheme="transparent" + variant="transparent" > {translateRaw('CLAIM_NOW')} diff --git a/src/features/ProtectTransaction/components/ProtectTxProtection.stories.tsx b/src/features/ProtectTransaction/components/ProtectTxProtection.stories.tsx index 5df4ce637ba..4fdf1ac8e08 100644 --- a/src/features/ProtectTransaction/components/ProtectTxProtection.stories.tsx +++ b/src/features/ProtectTransaction/components/ProtectTxProtection.stories.tsx @@ -1,4 +1,4 @@ -import { Panel } from '@mycrypto/ui'; +import { Panel } from '@mycrypto/ui-legacy'; import { storiesOf } from '@storybook/react'; import { Fiats } from '@config'; diff --git a/src/features/ProtectTransaction/components/ProtectTxReport.stories.tsx b/src/features/ProtectTransaction/components/ProtectTxReport.stories.tsx index 01431ba8b55..50dca9dd58b 100644 --- a/src/features/ProtectTransaction/components/ProtectTxReport.stories.tsx +++ b/src/features/ProtectTransaction/components/ProtectTxReport.stories.tsx @@ -1,4 +1,4 @@ -import { Panel } from '@mycrypto/ui'; +import { Panel } from '@mycrypto/ui-legacy'; import { storiesOf } from '@storybook/react'; import { loadingReport, scamReport, unknownReport, verifiedReport } from '@fixtures'; diff --git a/src/features/ProtectTransaction/components/ProtectTxSign.stories.tsx b/src/features/ProtectTransaction/components/ProtectTxSign.stories.tsx index c62758de367..5b2eec5d947 100644 --- a/src/features/ProtectTransaction/components/ProtectTxSign.stories.tsx +++ b/src/features/ProtectTransaction/components/ProtectTxSign.stories.tsx @@ -1,4 +1,4 @@ -import { Panel } from '@mycrypto/ui'; +import { Panel } from '@mycrypto/ui-legacy'; import { storiesOf } from '@storybook/react'; import { NETWORKS_CONFIG, NODES_CONFIG } from '@database/data'; diff --git a/src/features/ProtectTransaction/components/WithProtectTx.tsx b/src/features/ProtectTransaction/components/WithProtectTx.tsx index 6b20b06d8db..1c4125bd463 100644 --- a/src/features/ProtectTransaction/components/WithProtectTx.tsx +++ b/src/features/ProtectTransaction/components/WithProtectTx.tsx @@ -1,6 +1,6 @@ import { ComponentType, useCallback, useContext, useEffect, useState } from 'react'; -import { Panel } from '@mycrypto/ui'; +import { Panel } from '@mycrypto/ui-legacy'; import styled from 'styled-components'; import { ContentPanel } from '@components'; diff --git a/src/features/RequestAssets/RequestAssets.tsx b/src/features/RequestAssets/RequestAssets.tsx index b87dbb256b7..3deb5667d7a 100644 --- a/src/features/RequestAssets/RequestAssets.tsx +++ b/src/features/RequestAssets/RequestAssets.tsx @@ -1,6 +1,7 @@ import { useEffect, useState } from 'react'; -import { Heading, Input, Tooltip } from '@mycrypto/ui'; +import { Heading } from '@mycrypto/ui'; +import { Input, Tooltip } from '@mycrypto/ui-legacy'; import { Field, FieldProps, Form, Formik, FormikProps } from 'formik'; import { RouteComponentProps, withRouter } from 'react-router-dom'; import styled from 'styled-components'; diff --git a/src/features/SendAssets/components/SendAssetsForm.tsx b/src/features/SendAssets/components/SendAssetsForm.tsx index 3766ec58054..3944bc4e2a2 100644 --- a/src/features/SendAssets/components/SendAssetsForm.tsx +++ b/src/features/SendAssets/components/SendAssetsForm.tsx @@ -1,7 +1,7 @@ import { ChangeEvent, useContext, useEffect, useMemo, useState } from 'react'; import { BigNumber } from '@ethersproject/bignumber'; -import { Button as UIBtn } from '@mycrypto/ui'; +import { Button as UIBtn } from '@mycrypto/ui-legacy'; import isEmpty from 'lodash/isEmpty'; import mergeDeepWith from 'ramda/src/mergeDeepWith'; import styled from 'styled-components'; diff --git a/src/features/Settings/Export/Export.tsx b/src/features/Settings/Export/Export.tsx index 532fe69b118..175e3c68533 100644 --- a/src/features/Settings/Export/Export.tsx +++ b/src/features/Settings/Export/Export.tsx @@ -1,4 +1,4 @@ -import { Typography } from '@mycrypto/ui'; +import { Body } from '@mycrypto/ui'; import { connect, ConnectedProps } from 'react-redux'; import { RouteComponentProps, withRouter } from 'react-router-dom'; import styled from 'styled-components'; @@ -31,7 +31,7 @@ export function Export(props: Props) { return ( - {translate('SETTINGS_EXPORT_INFO')} + {translate('SETTINGS_EXPORT_INFO')} {appState} {isMobile && ( diff --git a/src/features/Settings/Import/components/ImportSuccess.tsx b/src/features/Settings/Import/components/ImportSuccess.tsx index 6901867a96f..e7200aeecd0 100644 --- a/src/features/Settings/Import/components/ImportSuccess.tsx +++ b/src/features/Settings/Import/components/ImportSuccess.tsx @@ -14,7 +14,7 @@ export default function ImportSuccess() { {translate('SETTINGS_IMPORT_SUCCESS')} - diff --git a/src/features/Settings/components/AddOrEditNetworkNode.tsx b/src/features/Settings/components/AddOrEditNetworkNode.tsx index 3e592edeabe..51ace7406d7 100644 --- a/src/features/Settings/components/AddOrEditNetworkNode.tsx +++ b/src/features/Settings/components/AddOrEditNetworkNode.tsx @@ -1,6 +1,6 @@ import { MouseEventHandler, useCallback, useState } from 'react'; -import { Tooltip, Button as UIButton } from '@mycrypto/ui'; +import { Tooltip, Button as UIButton } from '@mycrypto/ui-legacy'; import { DEFAULT_ETH } from '@mycrypto/wallets'; import { Field, FieldProps, Form, Formik } from 'formik'; import styled from 'styled-components'; @@ -127,7 +127,7 @@ const SError = styled.div` color: ${COLORS.PASTEL_RED}; `; -const DeleteButton = styled(Button) <{ disabled: boolean }>` +const DeleteButton = styled(Button)<{ disabled: boolean }>` ${(props) => !props.disabled && ` @@ -307,31 +307,31 @@ export default function AddOrEditNetworkNode({ const network: Network = !isAddingCustomNetwork ? getNetworkById(selectedNetworkId) : { - id: selectedNetworkId, - name: networkName!, - chainId: parseInt(chainId!, 10), - baseUnit: baseUnit as TTicker, - baseAsset: generateAssetUUID(chainId!), - isCustom: true, - nodes: [node], - dPaths: { - [WalletId.TREZOR]: DEFAULT_ETH, - [WalletId.LEDGER_NANO_S]: DEFAULT_ETH, - default: DEFAULT_ETH - }, - gasPriceSettings: { - min: 1, - max: 100, - initial: 1 - }, - shouldEstimateGasPrice: false, - color: undefined, - selectedNode: node.name, - blockExplorer: makeExplorer({ + id: selectedNetworkId, name: networkName!, - origin: ETHPLORER_URL - }) - }; + chainId: parseInt(chainId!, 10), + baseUnit: baseUnit as TTicker, + baseAsset: generateAssetUUID(chainId!), + isCustom: true, + nodes: [node], + dPaths: { + [WalletId.TREZOR]: DEFAULT_ETH, + [WalletId.LEDGER_NANO_S]: DEFAULT_ETH, + default: DEFAULT_ETH + }, + gasPriceSettings: { + min: 1, + max: 100, + initial: 1 + }, + shouldEstimateGasPrice: false, + color: undefined, + selectedNode: node.name, + blockExplorer: makeExplorer({ + name: networkName!, + origin: ETHPLORER_URL + }) + }; const provider = new ProviderHandler({ ...network, nodes: [node] }, false); await provider.getLatestBlockNumber(); diff --git a/src/features/Settings/components/AddToAddressBook.tsx b/src/features/Settings/components/AddToAddressBook.tsx index b3e96f58829..89314598cfb 100644 --- a/src/features/Settings/components/AddToAddressBook.tsx +++ b/src/features/Settings/components/AddToAddressBook.tsx @@ -83,7 +83,7 @@ export default function AddToAddressBook({ toggleFlipped, createContact }: Props - + Back {translateRaw('ADDRESS_BOOK_TABLE_ADD_ADDRESS')} @@ -173,7 +173,7 @@ export default function AddToAddressBook({ toggleFlipped, createContact }: Props -