diff --git a/packages/yoroi-extension/app/App.js b/packages/yoroi-extension/app/App.js index cc243640ca..838d6a2c45 100644 --- a/packages/yoroi-extension/app/App.js +++ b/packages/yoroi-extension/app/App.js @@ -11,11 +11,10 @@ import { observable, autorun, runInAction } from 'mobx'; import { Routes } from './Routes'; import { locales, translations } from './i18n/translations'; import { Logger } from './utils/logging'; -import { LayoutProvider } from './styles/context/layout'; import { ColorModeProvider } from './styles/context/mode'; import { CssBaseline } from '@mui/material'; import { globalStyles } from './styles/globalStyles'; -import { changeToplevelTheme, MuiThemes, THEMES } from './styles/themes'; +import { changeToplevelTheme, MuiThemes } from './styles/themes'; import ThemeManager from './ThemeManager'; import environment from './environment'; import MaintenancePage from './containers/MaintenancePage'; @@ -82,27 +81,22 @@ class App extends Component { '--default-font': !environment.isProduction() ? 'wingdings' : 'Times New Roman', }; - const currentTheme = stores.profile.currentTheme || THEMES.YOROI_BASE; - + const currentTheme = stores.profile.currentTheme; changeToplevelTheme(currentTheme); - const muiTheme = MuiThemes[currentTheme]; - Logger.debug(`[yoroi] themes changed`); return (
- - - - {globalStyles(muiTheme)} - - {/* Automatically pass a theme prop to all components in this subtree. */} - - {this.getContent()} - - - + + + {globalStyles(muiTheme)} + + {/* Automatically pass a theme prop to all components in this subtree. */} + + {this.getContent()} + +
); } diff --git a/packages/yoroi-extension/app/Routes.js b/packages/yoroi-extension/app/Routes.js index ed7da0d740..a493678e70 100644 --- a/packages/yoroi-extension/app/Routes.js +++ b/packages/yoroi-extension/app/Routes.js @@ -7,7 +7,7 @@ import type { ConfigType } from '../config/config-types'; import type { ActionsMap } from './actions/index'; import ConnectedWebsitesPage, { ConnectedWebsitesPagePromise } from './containers/dapp-connector/ConnectedWebsitesContainer'; import Transfer, { WalletTransferPagePromise } from './containers/transfer/Transfer'; -import AddWalletPage, { AddAnotherWalletPromise } from './containers/wallet/AddWalletPage'; +import AddWalletPage from './containers/wallet/AddWalletPage'; import StakingPage, { StakingPageContentPromise } from './containers/wallet/staking/StakingPage'; import VotingPage, { VotingPageContentPromise } from './containers/wallet/voting/VotingPage'; import { ROUTES } from './routes-config'; @@ -138,12 +138,6 @@ const NFTsPageRevamp = React.lazy(NFTsPageRevampPromise); const NFTDetailPageRevampPromise = () => import('./containers/wallet/NFTDetailPageRevamp'); const NFTDetailPageRevamp = React.lazy(NFTDetailPageRevampPromise); -const YoroiPalettePagePromise = () => import('./containers/experimental/YoroiPalette'); -const YoroiPalettePage = React.lazy(YoroiPalettePagePromise); - -const YoroiThemesPagePromise = () => import('./containers/experimental/yoroiThemes'); -const YoroiThemesPage = React.lazy(YoroiThemesPagePromise); - // SWAP const SwapPagePromise = () => import('./containers/swap/asset-swap/SwapPage'); const SwapPage = React.lazy(SwapPagePromise); @@ -154,7 +148,6 @@ const ExchangeEndPagePromise = () => import('./containers/ExchangeEndPage'); const ExchangeEndPage = React.lazy(ExchangeEndPagePromise); export const LazyLoadPromises: Array<() => any> = [ - AddAnotherWalletPromise, StakingPageContentPromise, CreateWalletPagePromise, RestoreWalletPagePromise, @@ -188,8 +181,6 @@ export const LazyLoadPromises: Array<() => any> = [ NFTsPageRevampPromise, NFTDetailPageRevampPromise, ConnectedWebsitesPagePromise, - YoroiPalettePagePromise, - YoroiThemesPagePromise, SwapPagePromise, SwapOrdersPagePromise, OptForAnalyticsPagePromise, @@ -271,16 +262,6 @@ export const Routes = (stores: StoresMap, actions: ActionsMap): Node => { path={ROUTES.DAPP_CONNECTOR.CONNECTED_WEBSITES} component={props => } /> - } - /> - } - /> wrapWallet({ ...props, stores, actions }, WalletsSubpages(stores, actions))} diff --git a/packages/yoroi-extension/app/UI/layout/GeneralPageLayout.js b/packages/yoroi-extension/app/UI/layout/GeneralPageLayout.js index 6b95139445..91b47a74a6 100644 --- a/packages/yoroi-extension/app/UI/layout/GeneralPageLayout.js +++ b/packages/yoroi-extension/app/UI/layout/GeneralPageLayout.js @@ -4,13 +4,12 @@ import { intlShape } from 'react-intl'; import TopBarLayout from '../../components/layout/TopBarLayout'; import BannerContainer from '../../containers/banners/BannerContainer'; import SidebarContainer from '../../containers/SidebarContainer'; -import { withLayout } from '../../styles/context/layout'; import { ModalProvider } from '../components/modals/ModalContext'; import { ModalManager } from '../components/modals/ModalManager'; import { IntlProvider } from '../context/IntlProvider'; @observer -class GeneralPageLayout extends React.Component { +export default class GeneralPageLayout extends React.Component { static defaultProps = { children: undefined, }; @@ -36,5 +35,3 @@ class GeneralPageLayout extends React.Component { ); } } - -export default withLayout(GeneralPageLayout); diff --git a/packages/yoroi-extension/app/assets/images/add-label.inline.svg b/packages/yoroi-extension/app/assets/images/add-label.inline.svg deleted file mode 100644 index f8e8ae55e1..0000000000 --- a/packages/yoroi-extension/app/assets/images/add-label.inline.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - icon/label - Created with Sketch. - - - - - - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/add-wallet/add-wallet-bg-modern.inline.svg b/packages/yoroi-extension/app/assets/images/add-wallet/add-wallet-bg-modern.inline.svg deleted file mode 100644 index afa7fbabbf..0000000000 --- a/packages/yoroi-extension/app/assets/images/add-wallet/add-wallet-bg-modern.inline.svg +++ /dev/null @@ -1,61 +0,0 @@ - - - - -add wallet_bg - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/yoroi-extension/app/assets/images/add-wallet/connect-hw-classic.inline.svg b/packages/yoroi-extension/app/assets/images/add-wallet/connect-hw-classic.inline.svg deleted file mode 100644 index bf03fc227c..0000000000 --- a/packages/yoroi-extension/app/assets/images/add-wallet/connect-hw-classic.inline.svg +++ /dev/null @@ -1,55 +0,0 @@ - - - - hardware_wallet.inline - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/add-wallet/connect-hw-modern.inline.svg b/packages/yoroi-extension/app/assets/images/add-wallet/connect-hw-modern.inline.svg deleted file mode 100644 index eddc9a80fb..0000000000 --- a/packages/yoroi-extension/app/assets/images/add-wallet/connect-hw-modern.inline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/add-wallet/restore-wallet-classic.inline.svg b/packages/yoroi-extension/app/assets/images/add-wallet/restore-wallet-classic.inline.svg deleted file mode 100644 index d10eb9d418..0000000000 --- a/packages/yoroi-extension/app/assets/images/add-wallet/restore-wallet-classic.inline.svg +++ /dev/null @@ -1,76 +0,0 @@ - - - - restore_wallet.inline - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/add-wallet/restore-wallet-modern.inline.svg b/packages/yoroi-extension/app/assets/images/add-wallet/restore-wallet-modern.inline.svg deleted file mode 100644 index 44e803a777..0000000000 --- a/packages/yoroi-extension/app/assets/images/add-wallet/restore-wallet-modern.inline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/cross-dark.inline.svg b/packages/yoroi-extension/app/assets/images/cross-dark.inline.svg deleted file mode 100644 index a3871260e5..0000000000 --- a/packages/yoroi-extension/app/assets/images/cross-dark.inline.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - close - Created with Sketch. - - - - - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/dapp-connector/delete.inline.svg b/packages/yoroi-extension/app/assets/images/dapp-connector/delete.inline.svg deleted file mode 100644 index e66c61d793..0000000000 --- a/packages/yoroi-extension/app/assets/images/dapp-connector/delete.inline.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - icon/delete - - - - - - - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/dapp-connector/no-dapps-connected.inline.svg b/packages/yoroi-extension/app/assets/images/dapp-connector/no-dapps-connected.inline.svg deleted file mode 100644 index ec19d5888f..0000000000 --- a/packages/yoroi-extension/app/assets/images/dapp-connector/no-dapps-connected.inline.svg +++ /dev/null @@ -1,48 +0,0 @@ - - - - v - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/generate-uri.inline.svg b/packages/yoroi-extension/app/assets/images/generate-uri.inline.svg deleted file mode 100644 index eee391c3e1..0000000000 --- a/packages/yoroi-extension/app/assets/images/generate-uri.inline.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/hardware-wallet/trezor/check.inline.svg b/packages/yoroi-extension/app/assets/images/hardware-wallet/trezor/check.inline.svg deleted file mode 100644 index b4d1899bb6..0000000000 --- a/packages/yoroi-extension/app/assets/images/hardware-wallet/trezor/check.inline.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/hardware-wallet/trezor/connect-error.inline.svg b/packages/yoroi-extension/app/assets/images/hardware-wallet/trezor/connect-error.inline.svg deleted file mode 100644 index fbf3f139e6..0000000000 --- a/packages/yoroi-extension/app/assets/images/hardware-wallet/trezor/connect-error.inline.svg +++ /dev/null @@ -1,40 +0,0 @@ - - - - connect-error.inline - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/hardware-wallet/trezor/connect-load.gif b/packages/yoroi-extension/app/assets/images/hardware-wallet/trezor/connect-load.gif deleted file mode 100644 index 93e8c96528..0000000000 Binary files a/packages/yoroi-extension/app/assets/images/hardware-wallet/trezor/connect-load.gif and /dev/null differ diff --git a/packages/yoroi-extension/app/assets/images/hardware-wallet/trezor/save-error.inline.svg b/packages/yoroi-extension/app/assets/images/hardware-wallet/trezor/save-error.inline.svg deleted file mode 100644 index 4e19983a60..0000000000 --- a/packages/yoroi-extension/app/assets/images/hardware-wallet/trezor/save-error.inline.svg +++ /dev/null @@ -1,60 +0,0 @@ - - - - Group 9 Copy 2 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/hardware-wallet/trezor/save-load.inline.svg b/packages/yoroi-extension/app/assets/images/hardware-wallet/trezor/save-load.inline.svg deleted file mode 100644 index 18fda8e491..0000000000 --- a/packages/yoroi-extension/app/assets/images/hardware-wallet/trezor/save-load.inline.svg +++ /dev/null @@ -1,66 +0,0 @@ - - - - save.inline - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/question-mark.inline.svg b/packages/yoroi-extension/app/assets/images/question-mark.inline.svg deleted file mode 100644 index 9806c07e0c..0000000000 --- a/packages/yoroi-extension/app/assets/images/question-mark.inline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/sidebar/my_wallets.inline.svg b/packages/yoroi-extension/app/assets/images/sidebar/my_wallets.inline.svg deleted file mode 100644 index 904bbf0b17..0000000000 --- a/packages/yoroi-extension/app/assets/images/sidebar/my_wallets.inline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/sidebar/open-sidebar.inline.svg b/packages/yoroi-extension/app/assets/images/sidebar/open-sidebar.inline.svg deleted file mode 100644 index 3a67705315..0000000000 --- a/packages/yoroi-extension/app/assets/images/sidebar/open-sidebar.inline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/sidebar/transfer_wallets.inline.svg b/packages/yoroi-extension/app/assets/images/sidebar/transfer_wallets.inline.svg deleted file mode 100644 index 91ecf1089f..0000000000 --- a/packages/yoroi-extension/app/assets/images/sidebar/transfer_wallets.inline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/sidebar/yoroi-logo-expanded.inline.svg b/packages/yoroi-extension/app/assets/images/sidebar/yoroi-logo-expanded.inline.svg deleted file mode 100644 index 561ef95b88..0000000000 --- a/packages/yoroi-extension/app/assets/images/sidebar/yoroi-logo-expanded.inline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/sidebar/yoroi-logo.inline.svg b/packages/yoroi-extension/app/assets/images/sidebar/yoroi-logo.inline.svg deleted file mode 100644 index d479106fbe..0000000000 --- a/packages/yoroi-extension/app/assets/images/sidebar/yoroi-logo.inline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/social/revamp/discord.inline.svg b/packages/yoroi-extension/app/assets/images/social/revamp/discord.inline.svg deleted file mode 100644 index de241a8adc..0000000000 --- a/packages/yoroi-extension/app/assets/images/social/revamp/discord.inline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/social/revamp/facebook.inline.svg b/packages/yoroi-extension/app/assets/images/social/revamp/facebook.inline.svg deleted file mode 100644 index f6fd20492d..0000000000 --- a/packages/yoroi-extension/app/assets/images/social/revamp/facebook.inline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/social/revamp/github.inline.svg b/packages/yoroi-extension/app/assets/images/social/revamp/github.inline.svg deleted file mode 100644 index 59264e3b86..0000000000 --- a/packages/yoroi-extension/app/assets/images/social/revamp/github.inline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/social/revamp/personal.inline.svg b/packages/yoroi-extension/app/assets/images/social/revamp/personal.inline.svg deleted file mode 100644 index e1682cefb7..0000000000 --- a/packages/yoroi-extension/app/assets/images/social/revamp/personal.inline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/social/revamp/telegram.inline.svg b/packages/yoroi-extension/app/assets/images/social/revamp/telegram.inline.svg deleted file mode 100644 index 5060bf9fa4..0000000000 --- a/packages/yoroi-extension/app/assets/images/social/revamp/telegram.inline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/social/revamp/twitch.inline.svg b/packages/yoroi-extension/app/assets/images/social/revamp/twitch.inline.svg deleted file mode 100644 index 64b05a04e8..0000000000 --- a/packages/yoroi-extension/app/assets/images/social/revamp/twitch.inline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/social/revamp/twitter.inline.svg b/packages/yoroi-extension/app/assets/images/social/revamp/twitter.inline.svg deleted file mode 100644 index c4143b923c..0000000000 --- a/packages/yoroi-extension/app/assets/images/social/revamp/twitter.inline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/social/revamp/youtube.inline.svg b/packages/yoroi-extension/app/assets/images/social/revamp/youtube.inline.svg deleted file mode 100644 index ef9863bf2d..0000000000 --- a/packages/yoroi-extension/app/assets/images/social/revamp/youtube.inline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/success-small.inline.svg b/packages/yoroi-extension/app/assets/images/success-small.inline.svg deleted file mode 100644 index b8d76a069d..0000000000 --- a/packages/yoroi-extension/app/assets/images/success-small.inline.svg +++ /dev/null @@ -1 +0,0 @@ -C1A491E1-87A9-4229-AF18-5B141E6D99B6 \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/top-bar/back-arrow-white.inline.svg b/packages/yoroi-extension/app/assets/images/top-bar/back-arrow-white.inline.svg deleted file mode 100644 index 90c40efc2b..0000000000 --- a/packages/yoroi-extension/app/assets/images/top-bar/back-arrow-white.inline.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/transaction/export-tx-to-file.inline.svg b/packages/yoroi-extension/app/assets/images/transaction/export-tx-to-file.inline.svg deleted file mode 100644 index 19dff8a1dd..0000000000 --- a/packages/yoroi-extension/app/assets/images/transaction/export-tx-to-file.inline.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - export.inline copy - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/uri/about-url-classic.inline.svg b/packages/yoroi-extension/app/assets/images/uri/about-url-classic.inline.svg deleted file mode 100644 index 895130a540..0000000000 --- a/packages/yoroi-extension/app/assets/images/uri/about-url-classic.inline.svg +++ /dev/null @@ -1,59 +0,0 @@ - - - - picture/about-url.inline - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/verify-icon.inline.svg b/packages/yoroi-extension/app/assets/images/verify-icon.inline.svg deleted file mode 100644 index eaffcaa010..0000000000 --- a/packages/yoroi-extension/app/assets/images/verify-icon.inline.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - icon/verify - Created with Sketch. - - - - - - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/wallet-nav/back-arrow.inline.svg b/packages/yoroi-extension/app/assets/images/wallet-nav/back-arrow.inline.svg deleted file mode 100644 index af0beccc38..0000000000 --- a/packages/yoroi-extension/app/assets/images/wallet-nav/back-arrow.inline.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - Artboard - Created with Sketch. - - - - - - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/widget/cross.inline.svg b/packages/yoroi-extension/app/assets/images/widget/cross.inline.svg deleted file mode 100644 index c4915c5799..0000000000 --- a/packages/yoroi-extension/app/assets/images/widget/cross.inline.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - Shape Copy - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/widget/tick.inline.svg b/packages/yoroi-extension/app/assets/images/widget/tick.inline.svg deleted file mode 100644 index 9e392c1010..0000000000 --- a/packages/yoroi-extension/app/assets/images/widget/tick.inline.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - Shape - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/yoroi-logo-blue.inline.svg b/packages/yoroi-extension/app/assets/images/yoroi-logo-blue.inline.svg deleted file mode 100644 index ccee841188..0000000000 --- a/packages/yoroi-extension/app/assets/images/yoroi-logo-blue.inline.svg +++ /dev/null @@ -1 +0,0 @@ -yoroi logo \ No newline at end of file diff --git a/packages/yoroi-extension/app/assets/images/yoroi-logo-nightly-white.inline.svg b/packages/yoroi-extension/app/assets/images/yoroi-logo-nightly-white.inline.svg deleted file mode 100644 index 08f3d1e1e3..0000000000 --- a/packages/yoroi-extension/app/assets/images/yoroi-logo-nightly-white.inline.svg +++ /dev/null @@ -1,187 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/yoroi-extension/app/assets/images/yoroi-logo-nightly.inline.svg b/packages/yoroi-extension/app/assets/images/yoroi-logo-nightly.inline.svg deleted file mode 100644 index 6f92d71b7a..0000000000 --- a/packages/yoroi-extension/app/assets/images/yoroi-logo-nightly.inline.svg +++ /dev/null @@ -1,275 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/yoroi-extension/app/assets/images/yoroi-logo-white.inline.svg b/packages/yoroi-extension/app/assets/images/yoroi-logo-white.inline.svg deleted file mode 100644 index 3c941929b5..0000000000 --- a/packages/yoroi-extension/app/assets/images/yoroi-logo-white.inline.svg +++ /dev/null @@ -1,76 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/yoroi-extension/app/assets/images/yoroi-nightly-icon.inline.svg b/packages/yoroi-extension/app/assets/images/yoroi-nightly-icon.inline.svg deleted file mode 100644 index c53a77e1c0..0000000000 --- a/packages/yoroi-extension/app/assets/images/yoroi-nightly-icon.inline.svg +++ /dev/null @@ -1,139 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/yoroi-extension/app/components/common/TextField.js b/packages/yoroi-extension/app/components/common/TextField.js index 705ccb9a41..bf88ae611f 100644 --- a/packages/yoroi-extension/app/components/common/TextField.js +++ b/packages/yoroi-extension/app/components/common/TextField.js @@ -68,6 +68,7 @@ function TextField({ event.preventDefault(); }; + // pending removal cuz always true? the `-light` part is SUS const isRevampTheme = appTheme.name === 'revamp-light'; return ( diff --git a/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/ConnectedWebsitesPage.js b/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/ConnectedWebsitesPage.js index bed03e58d8..464980cc92 100644 --- a/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/ConnectedWebsitesPage.js +++ b/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/ConnectedWebsitesPage.js @@ -1,5 +1,5 @@ // @flow -import type { ComponentType, Node } from 'react'; +import type { Node } from 'react'; import { Component } from 'react'; import type { WhitelistEntry } from '../../../../chrome/extension/connector/types'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; @@ -7,12 +7,8 @@ import { defineMessages, intlShape } from 'react-intl'; import type { TokenRow } from '../../../api/ada/lib/storage/database/primitives/tables'; import type { TokenLookupKey } from '../../../api/common/lib/MultiToken'; import { observer } from 'mobx-react'; -import { ReactComponent as NoDappsFoundImg } from '../../../assets/images/dapp-connector/no-dapps-connected.inline.svg'; import { ReactComponent as NoDappsConnected } from '../../../assets/images/revamp/no-dapps-connected.inline.svg'; import { connectorMessages } from '../../../i18n/global-messages'; -import { withLayout } from '../../../styles/context/layout'; -import styles from './ConnectedWebsitesPage.scss'; -import WalletRow from './WalletRow'; import WalletRowRevamp from './WalletRowRevamp'; import { Box, Typography } from '@mui/material'; import type { WalletState } from '../../../../chrome/extension/background/types'; @@ -26,10 +22,6 @@ type Props = {| +shouldHideBalance: boolean, |}; -type InjectedProps = {| isRevampLayout: boolean |}; - -type AllProps = {| ...Props, ...InjectedProps |}; - const messages = defineMessages({ connectedWallets: { id: 'connector.connect.connectedWallets', @@ -58,12 +50,12 @@ const messages = defineMessages({ }); @observer -class ConnectedWebsitesPage extends Component { +export default class ConnectedWebsitesPage extends Component { static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; - renderRevamp(): Node { + render(): Node { const { intl } = this.context; const genNoResult = () => ( @@ -151,79 +143,4 @@ class ConnectedWebsitesPage extends Component { ); } - - render(): Node { - const { isRevampLayout } = this.props; - - if (isRevampLayout) return this.renderRevamp(); - - const { intl } = this.context; - const genNoResult = () => ( -
-
- -

{intl.formatMessage(messages.noWebsitesConnected)}

-
{intl.formatMessage(connectorMessages.messageReadOnly)}
-
-
- ); - - const { whitelistEntries, wallets } = this.props; - if ( - whitelistEntries == null || - whitelistEntries.length === 0 || - wallets == null || - wallets.length === 0 - ) { - return genNoResult(); - } - - const cardanoNodes = whitelistEntries - .map(({ url, publicDeriverId, image }) => { - const wallet = wallets.find( - cacheEntry => cacheEntry.publicDeriverId === publicDeriverId - ); - if (wallet == null) { - return null; - } - - return ( - - ); - }) - .filter(x => x != null); - - return ( -
-
-
-
{intl.formatMessage(messages.walletsLabel)}
-
{intl.formatMessage(messages.dappsLabel)}
-
-
- {cardanoNodes.length > 0 && ( -
-

{intl.formatMessage(messages.cardanoLabel)}

- {cardanoNodes} -
- )} -
-
-
- ); - } } - -export default (withLayout(ConnectedWebsitesPage): ComponentType); diff --git a/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/ConnectedWebsitesPage.scss b/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/ConnectedWebsitesPage.scss deleted file mode 100644 index 9112ef4189..0000000000 --- a/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/ConnectedWebsitesPage.scss +++ /dev/null @@ -1,91 +0,0 @@ -.component { - height: 100%; - width: 100%; - background-color: #fff; - display: flex; - justify-content: center; - - .container { - width: 750px; - height: 500px; - overflow-y: scroll; - background-color: white; - border: 1px solid #dce0e9; - border-radius: 8px; - -ms-overflow-style: none; - scrollbar-width: none; - } - - .container::-webkit-scrollbar { - display: none; - } - - .header { - display: grid; - grid-template-columns: 1fr 1fr; - box-shadow: 0 2px 4px 0 rgba(56, 57, 61, 0.2); - - & > p { - padding-left: 40px; - padding-top: 28px; - color: #000; - font-family: Rubik; - font-size: 14px; - letter-spacing: 0; - line-height: 22px; - padding-bottom: 16px; - } - } - .chain { - padding: 0px 24px; - & > h1 { - margin-top: 8px; - margin-bottom: 8px; - margin-left: 14px; - color: #a7afc0; - font-family: Rubik; - font-size: 14px; - letter-spacing: 0; - line-height: 22px; - } - } - - .line { - position: relative; - width: 100%; - - &::after { - content: ''; - left: 50%; - position: absolute; - width: 95%; - height: 1px; - background-color: #dce0e9; - transform: translateX(-50%); - } - } - .chain:first-child { - padding-top: 20px; - } -} - -.noDappsFound { - width: 100%; - height: 100%; - padding-bottom: 20px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - color: var(--yoroi-palette-gray-600); - text-align: center; - svg { - margin-bottom: 24px; - } - h3 { - font-size: 26px; - font-weight: 500; - margin-bottom: 20px; - line-height: 35px; - } -} diff --git a/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/WalletRow.js b/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/WalletRow.js deleted file mode 100644 index 711bc010b7..0000000000 --- a/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/WalletRow.js +++ /dev/null @@ -1,182 +0,0 @@ -// @flow - -import { Component } from 'react'; -import type { Node } from 'react'; -import styles from './WalletRow.scss'; -import type { MultiToken, TokenLookupKey } from '../../../api/common/lib/MultiToken'; -import type { TokenRow } from '../../../api/ada/lib/storage/database/primitives/tables'; -import { getTokenName } from '../../../stores/stateless/tokenHelpers'; -import { hiddenAmount } from '../../../utils/strings'; -import { ReactComponent as DeleteIcon } from '../../../assets/images/dapp-connector/delete.inline.svg'; -import { ReactComponent as NoDappImage } from '../../../assets/images/dapp-connector/no-dapp.inline.svg'; -import WalletType from '../../widgets/WalletType'; -import NavPlate from '../../topbar/NavPlate'; -import { intlShape, defineMessages } from 'react-intl'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import type { WalletChecksum } from '@emurgo/cip4-js'; -import { splitAmount, truncateToken } from '../../../utils/formatters'; -import { Tooltip, Typography } from '@mui/material'; -import type { WalletType as WalletT } from '../../../../chrome/extension/background/types'; - -const messages = defineMessages({ - active: { - id: 'connector.connect.connectedWallets.active', - defaultMessage: '!!!Active', - }, -}); - -type Props = {| - +url: ?string, - +isActiveSite: boolean, - +shouldHideBalance: boolean, - +onRemoveWallet: ({| url: ?string |}) => void, - +getTokenInfo: ($ReadOnly>) => $ReadOnly, - +walletName: string, - +websiteIcon: string, - +balance: MultiToken | null, - +plate: WalletChecksum, - +walletType: WalletT, -|}; - -type State = {| - showDeleteIcon: boolean, -|}; - -export default class WalletRow extends Component { - static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { - intl: intlShape.isRequired, - }; - - state: State = { - showDeleteIcon: false, - }; - - showDeleteIcon: void => void = () => { - this.setState({ showDeleteIcon: true }); - }; - - hideDeleteIcon: void => void = () => { - this.setState({ showDeleteIcon: false }); - }; - - renderAmountDisplay: ({| - shouldHideBalance: boolean, - amount: ?MultiToken, - |}) => Node = request => { - if (request.amount == null) { - return
; - } - - const defaultEntry = request.amount.getDefaultEntry(); - const tokenInfo = this.props.getTokenInfo(defaultEntry); - const shiftedAmount = defaultEntry.amount.shiftedBy(-tokenInfo.Metadata.numberOfDecimals); - - let balanceDisplay; - if (request.shouldHideBalance) { - balanceDisplay = {hiddenAmount}; - } else { - const [beforeDecimalRewards, afterDecimalRewards] = splitAmount( - shiftedAmount, - tokenInfo.Metadata.numberOfDecimals - ); - - balanceDisplay = ( - <> - {beforeDecimalRewards} - {afterDecimalRewards} - - ); - } - - return ( - <> - {balanceDisplay} {truncateToken(getTokenName(tokenInfo))} - - ); - }; - - render(): Node { - const { - isActiveSite, - url, - plate, - onRemoveWallet, - balance, - shouldHideBalance, - walletName, - websiteIcon, - walletType, - } = this.props; - const { showDeleteIcon } = this.state; - const { intl } = this.context; - - return ( -
-
-
- {walletName} - - {' '} - · - -
-
-
-
-
- -
-
- {this.renderAmountDisplay({ - shouldHideBalance, - amount: balance, - })} -
-
-
-
-
- {websiteIcon ? {url} : } -
-
- {url}} - > - - {url} - - - {isActiveSite && ( -
{intl.formatMessage(messages.active)}
- )} -
-
-
- {showDeleteIcon && ( - - )} -
-
-
-
- ); - } -} diff --git a/packages/yoroi-extension/app/components/experimental/YoroiPalette/YoroiPalette.js b/packages/yoroi-extension/app/components/experimental/YoroiPalette/YoroiPalette.js deleted file mode 100644 index 747497df42..0000000000 --- a/packages/yoroi-extension/app/components/experimental/YoroiPalette/YoroiPalette.js +++ /dev/null @@ -1,139 +0,0 @@ -// @flow -import { Component } from 'react'; -import { observer } from 'mobx-react'; -import styles from './YoroiPalette.scss'; -import type { Node } from 'react'; -import { classicTheme } from '../../../styles/themes/legacy/classic-theme'; -import { modernTheme } from '../../../styles/themes/legacy/modern-theme'; -import classNames from 'classnames'; -import { ReactComponent as ArrowDown } from '../../../assets/images/down-arrow.inline.svg'; -import { getMainYoroiPalette, formatPalette } from '../../../styles/globalStyles'; -import type { DesignToken } from '../../../styles/globalStyles'; - -/** - * @todos - * 1. Print transaction status - * 2. Print the actual theme object - */ -type Props = {||}; - -type Theme = 'classic' | 'modern'; - -type State = {| - currentTheme: Theme, -|}; - -const themes = { - classic: classicTheme, - modern: modernTheme, -}; - -@observer -export default class YoroiPalettePage extends Component { - state: State = { - currentTheme: 'classic', - }; - - switchTheme(theme: Theme): void { - this.setState({ currentTheme: theme }); - } - - render(): Node { - const { currentTheme } = this.state; - const palette = getMainYoroiPalette(themes[currentTheme]); - const { designTokens, nameToHex } = formatPalette(palette, themes[currentTheme]); - return ( -
-
- - -
- -
-

Design tokens

-
- {designTokens.map(color => ( -
    {this.renderRow(color).map(node => node)}
- ))} -
-
- -

Colors Direct Hex Colors

- {nameToHex.map(color => ( -
- -
{String(color.hex)}
-
{color.name}
-
- ))} -
- ); - } - - renderRow(color: DesignToken): Node[] { - const subRows = [ - { - text: color.hex, - classnames: [styles.flexWithMargin, styles.multiLayerColorHex], - }, - { - text: color.path.join('-'), - classnames: [styles.flexWithMargin, styles.designTokens], - }, - { - text: color.child, - classnames: [styles.flexWithMargin, styles.child], - }, - { - text: color.parent, - classnames: [styles.flexWithMargin, styles.parent], - }, - ]; - - const nodes = []; - - for (let i = 0; i < subRows.length; i++) { - const subRow = subRows[i]; - nodes.push( - <> -
  • -
    -
    {subRow.text}
    -
    • - {i < subRows.length - 1 && ( -
  • - -
    • - )} - - ); - } - - return nodes; - } -} diff --git a/packages/yoroi-extension/app/components/experimental/YoroiPalette/YoroiPalette.scss b/packages/yoroi-extension/app/components/experimental/YoroiPalette/YoroiPalette.scss deleted file mode 100644 index 2d3c518d5f..0000000000 --- a/packages/yoroi-extension/app/components/experimental/YoroiPalette/YoroiPalette.scss +++ /dev/null @@ -1,101 +0,0 @@ -.component { - padding: 20px 40px; - - .themes { - display: grid; - grid-template-columns: 1fr 1fr; - width: 400px; - gap: 10px; - margin-bottom: 20px; - button { - font-size: 16px; - font-weight: 400; - color: #333438; - padding: 10px 16px; - border-radius: 10px; - background-color: #F0F3F5; - } - .active { - background-color: #59B1F4; - color: #fff; - } - } - - .row { - max-width: 1000px; - display: grid; - grid-template-columns: 1fr 2fr 2fr; - align-items: center; - justify-content: flex-start; - gap: 10px; - margin-bottom: 10px; - - .colorBox { - margin-right: 20px; - width: 124px; - height: 40px; - box-shadow: 3px 6px 8px rgba(0, 0, 0, 0.1); - border-radius: 10px; - } - - .colorName { - font-weight: 500; - font-size: 16px; - } - } - - .multiLayer { - - h1 { - font-size: 32px; - line-height: 32px; - margin: 40px 0px; - } - .multiLayerRows { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 20px; - .multiLayerRow { - background-color: var(--yoroi-palette-gray-50); - margin-bottom: 20px; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - padding: 20px 40px; - border-radius: 9px; - - .flexWithMargin { - display: flex; - align-items: center; - justify-content: flex-start; - font-family: Courier, monospace; - font-weight: 500; - color: var(--yoroi-palette-gray-900); - p { - margin-left: 10px; - } - } - - .arrowDown { - margin-bottom: 10px; - margin-top: 10px; - display: inline-block; - width: 100%; - padding-left: 30px; - - svg { - width: 35px; - height: 35px; - } - } - } - } - } - - .nameToHexHeader { - font-size: 32px; - line-height: 32px; - margin: 20px 0px; - } -} diff --git a/packages/yoroi-extension/app/components/experimental/YoroiTheme/YoroiThemesPage.js b/packages/yoroi-extension/app/components/experimental/YoroiTheme/YoroiThemesPage.js deleted file mode 100644 index 4394fc699f..0000000000 --- a/packages/yoroi-extension/app/components/experimental/YoroiTheme/YoroiThemesPage.js +++ /dev/null @@ -1,119 +0,0 @@ -// @flow -import { Component } from 'react'; -import { observer } from 'mobx-react'; -import styles from './YoroiThemesPage.scss' -import type { Node } from 'react'; -import { classicTheme } from '../../../styles/themes/legacy/classic-theme'; -import { modernTheme } from '../../../styles/themes/legacy/modern-theme'; -import classNames from 'classnames'; - -type Props = {||} -type Theme = 'classic' | 'modern' - -type State = {| - currentTheme: Theme -|} - -const themes = { - classic: classicTheme, - modern: modernTheme -} - -@observer -export default class YoroiThemesPage extends Component { - - state: State = { - currentTheme: 'classic', - } - - switchTheme(theme: Theme): void { - this.setState({ currentTheme: theme }) - } - - render(): Node { - const { currentTheme } = this.state - delete themes[currentTheme].components - return ( -
    -
    - - -
    -
    -

    Shadows

    -
    - {themes[currentTheme].shadows.map(shadow => ( -
    {shadow} -
    - ))} -
    -
    -
    -

    Typography

    -
    - {Object.entries(themes[currentTheme].typography).map(entry => { - if (typeof entry[1] === 'object') { - return ( -
    -
    {entry[0]}
    -
      - {Object.entries(Object(entry[1])).map(row => ( -
    • -
      {JSON.stringify(row[0])}
      -
      {JSON.stringify(row[1])}
      -
      • - ))} -
    -
    - ) - } - - return '' - })} -
    -
    - -
    -

    Show All ({currentTheme})

    -
    - - -
    -
    - 
    {JSON.stringify(themes[currentTheme], null, 5)}
    -
    -
    -
    - ) - } -} \ No newline at end of file diff --git a/packages/yoroi-extension/app/components/experimental/YoroiTheme/YoroiThemesPage.scss b/packages/yoroi-extension/app/components/experimental/YoroiTheme/YoroiThemesPage.scss deleted file mode 100644 index a02c58c032..0000000000 --- a/packages/yoroi-extension/app/components/experimental/YoroiTheme/YoroiThemesPage.scss +++ /dev/null @@ -1,121 +0,0 @@ -.component { - padding: 20px 40px; - padding-bottom: 200px; - - .themes { - display: grid; - grid-template-columns: 1fr 1fr; - width: 400px; - gap: 10px; - margin-bottom: 20px; - button { - font-size: 16px; - font-weight: 400; - color: #333438; - padding: 10px 16px; - border-radius: 10px; - background-color: #F0F3F5; - } - .active { - background-color: #59B1F4; - color: #fff; - } - } - - .shadows { - margin-top: 20px; - - & h1 { - font-size: 32px; - color: var(--yoroi-palette-gray-900); - margin-bottom: 20px; - } - - .shadowsContainer { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 40px; - - .shadow { - background-color: var(--yoroi-palette-gray-100); - width: 100%; - height: 200px; - border-radius: 15px; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - line-height: 32px; - font-family: monospace; - padding: 10px; - } - } - } - - .typographyWrapper { - margin-top: 60px; - - & h1 { - font-size: 32px; - color: var(--yoroi-palette-gray-900); - margin-bottom: 20px; - } - - .typographyList { - .row { - margin-bottom: 30px; - font-family: 'RobotoMono'; - .rowKey { - font-size: 19px; - line-height: 20px; - font-weight: 500; - text-transform: uppercase; - } - - .subRow { - background-color: var(--yoroi-palette-gray-50); - padding: 20px 40px; - margin-top: 10px; - border-radius: 9px; - - .subRowItem { - display: grid; - grid-template-columns: 1fr 4fr; - align-items: center; - justify-content: flex-start; - line-height: 30px; - - .key { - color: var(--yoroi-palette-gray-600); - margin-right: 20px; - font-family: 'RobotoMono'; - } - } - } - } - } - } - - .jsonWrapper { - margin-top: 60px; - - & h1 { - font-size: 32px; - color: var(--yoroi-palette-gray-900); - margin-bottom: 20px; - } - - .json { - background-color: var(--yoroi-palette-gray-100); - padding: 30px 40px; - border-radius: 8px; - line-height: 25px; - letter-spacing: 2px; - font-family: 'RobotoMono'; - font-weight: 500; - color: var(--yoroi-palette-gray-600); - box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12); - } - } - -} \ No newline at end of file diff --git a/packages/yoroi-extension/app/components/experimental/layout/Navbar.js b/packages/yoroi-extension/app/components/experimental/layout/Navbar.js deleted file mode 100644 index 849606717d..0000000000 --- a/packages/yoroi-extension/app/components/experimental/layout/Navbar.js +++ /dev/null @@ -1,45 +0,0 @@ -// @flow -import { Component } from 'react'; -import { observer } from 'mobx-react'; -import styles from './Navbar.scss' -import type { Node } from 'react'; -import { ROUTES } from '../../../routes-config'; -import classNames from 'classnames'; - -type Props = {| - goToRoute: string => void, -|} - -const PAGES = [ - { - label: 'Yoroi Palette', - route: ROUTES.EXPERIMENTAL.YOROI_PALETTE - }, - { - label: 'Themes', - route: ROUTES.EXPERIMENTAL.THEMES - } -] -@observer -export default class Navbar extends Component { - - render(): Node { - return ( -
    - { - PAGES.map(page => ( - - )) - } -
    - ) - } -} \ No newline at end of file diff --git a/packages/yoroi-extension/app/components/experimental/layout/Navbar.scss b/packages/yoroi-extension/app/components/experimental/layout/Navbar.scss deleted file mode 100644 index 2a8a12232b..0000000000 --- a/packages/yoroi-extension/app/components/experimental/layout/Navbar.scss +++ /dev/null @@ -1,24 +0,0 @@ -.component { - background-color: var(--yoroi-palette-gray-100); - box-shadow: 0 2px 5px 3px rgba(0, 0, 0, 0.06); - - .tab { - color: #38393D; - font-family: Rubik; - font-size: 20px; - font-weight: 500; - letter-spacing: 0; - line-height: 28px; - padding: 20px 40px; - color: var(--yoroi-palette-gray-600); - - &:hover { - background-color: var(--yoroi-palette-common-white); - } - } - - .active { - background-color: white; - color: var(--yoroi-palette-secondary-300); - } -} \ No newline at end of file diff --git a/packages/yoroi-extension/app/components/layout/TopBarLayout.js b/packages/yoroi-extension/app/components/layout/TopBarLayout.js index 01f536b7ed..fb27dc2b24 100644 --- a/packages/yoroi-extension/app/components/layout/TopBarLayout.js +++ b/packages/yoroi-extension/app/components/layout/TopBarLayout.js @@ -2,8 +2,6 @@ import { Box } from '@mui/system'; import { observer } from 'mobx-react'; import type { Node, ComponentType } from 'react'; -import { withLayout } from '../../styles/context/layout'; -import { THEMES } from '../../styles/themes'; import styles from './TopBarLayout.scss'; type Props = {| @@ -15,16 +13,11 @@ type Props = {| +notification?: ?Node, +languageSelectionBackground?: boolean, +showInContainer?: boolean, - +showAsCard?: boolean, - +asModern?: boolean, +withPadding?: boolean, // default: true +bgcolor?: string, +isErrorPage?: boolean, |}; -type InjectedProps = {| isRevampLayout: boolean, currentTheme: string |}; - -type AllProps = {| ...Props, ...InjectedProps |}; /** Adds a top bar above the wrapped node */ function TopBarLayout({ banner, @@ -35,17 +28,10 @@ function TopBarLayout({ notification, languageSelectionBackground, showInContainer, - showAsCard, - currentTheme, - isRevampLayout, - asModern, withPadding, bgcolor, isErrorPage, -}: AllProps) { - const isModern = currentTheme === THEMES.YOROI_MODERN; - const isRevamp = isRevampLayout && asModern !== true && !isModern; - +}: Props) { const getContentUnderBanner: void => Node = () => { const topbarComponent = {topbar}; const navbarComponent = {navbar}; @@ -63,8 +49,8 @@ function TopBarLayout({ height: '7px', display: 'block', }, - boxShadow: !isRevamp && showAsCard === true && '0 2px 12px 0 rgba(0, 0, 0, 0.06)', - borderRadius: !isRevamp && showAsCard === true && '8px', + boxShadow: false, + borderRadius: false, ...(showInContainer === true && { bgcolor: 'ds.bg_color_max', width: '100%', @@ -77,7 +63,7 @@ function TopBarLayout({ overflow: 'scroll', }} > - {isRevamp ? ( + {( - ) : ( - - {children} - )} ); if (showInContainer === true) { - const boxProperties = { - height: '100%', - minHeight: '200px', - backgroundColor: isRevamp ? 'ds.bg_color_max' : 'var(--yoroi-palette-gray-50)', - maxWidth: '1295px', - paddingLeft: '40px', - paddingRight: '40px', - width: '100%', - marginLeft: 'auto', - marginRight: 'auto', - display: 'flex', - flexDirection: 'column', - maxHeight: 'calc(100vh - 110px)', - overflow: isRevamp ? 'unset' : 'hidden', - pb: isRevamp ? '0px' : '100px', - }; - - return isRevamp ? ( + return ( {content} - ) : ( - {content} ); } return content; @@ -166,7 +124,7 @@ function TopBarLayout({ {banner} @@ -204,7 +162,7 @@ function TopBarLayout({ ); } -export default (withLayout(observer(TopBarLayout)): ComponentType); +export default (observer(TopBarLayout): ComponentType); TopBarLayout.defaultProps = { banner: undefined, @@ -215,8 +173,6 @@ TopBarLayout.defaultProps = { notification: undefined, languageSelectionBackground: false, showInContainer: false, - showAsCard: false, - asModern: false, withPadding: true, bgcolor: undefined, }; diff --git a/packages/yoroi-extension/app/components/loading/Loading.js b/packages/yoroi-extension/app/components/loading/Loading.js index 0aa25ae35e..f6f88d96d5 100644 --- a/packages/yoroi-extension/app/components/loading/Loading.js +++ b/packages/yoroi-extension/app/components/loading/Loading.js @@ -22,7 +22,6 @@ const messages = defineMessages({ type Props = {| +isLoadingDataForNextScreen: boolean, +hasLoadedCurrentLocale: boolean, - +hasLoadedCurrentTheme: boolean, +error: ?LocalizableError, +onExternalLinkClick: MouseEvent => void, +downloadLogs: void => void @@ -40,17 +39,13 @@ export default class Loading extends Component { const { isLoadingDataForNextScreen, hasLoadedCurrentLocale, - hasLoadedCurrentTheme, error } = this.props; const componentStyles = classNames([ styles.component, ]); - const yoroiLogoStyles = classNames([ - styles.yoroiLogo, - hasLoadedCurrentTheme ? null : styles.hide, - ]); + const yoroiLogoStyles = classNames([styles.yoroiLogo]); const renderError = error != null && hasLoadedCurrentLocale ? (

    diff --git a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js b/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js index ecfb8ecc50..e767594eb3 100644 --- a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js +++ b/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js @@ -1,6 +1,6 @@ // @flow import { Component } from 'react'; -import type { Node, ComponentType } from 'react'; +import type { Node } from 'react'; import { intlShape, defineMessages, FormattedHTMLMessage } from 'react-intl'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import { ReactComponent as BeginnerLevel } from '../../../assets/images/complexity-level/beginner-level.inline.svg'; @@ -8,7 +8,6 @@ import { ReactComponent as AdvancedLevel } from '../../../assets/images/complexi import LocalizableError from '../../../i18n/LocalizableError'; import { ComplexityLevels } from '../../../types/complexityLevelType'; import type { ComplexityLevelType } from '../../../types/complexityLevelType'; -import { withLayout } from '../../../styles/context/layout'; import { Box, Typography, styled } from '@mui/material'; import { settingsMenuMessages } from '../../settings/menu/SettingsMenu'; @@ -81,14 +80,11 @@ const GradientBox = styled(Box)(({ theme, isSelected }) => ({ type Props = {| +complexityLevel: ?ComplexityLevelType, +onSubmit: ComplexityLevelType => PossiblyAsync, - +isSubmitting: boolean, +error?: ?LocalizableError, +baseTheme?: string, |}; -type InjectedProps = {| +isRevampLayout: boolean |}; - -class ComplexityLevel extends Component { +export default class ComplexityLevel extends Component { static defaultProps: {| error: void |} = { error: undefined, }; @@ -99,7 +95,7 @@ class ComplexityLevel extends Component { render(): Node { const { intl } = this.context; - const { complexityLevel, isRevampLayout } = this.props; + const { complexityLevel } = this.props; const levels = [ { @@ -118,11 +114,16 @@ class ComplexityLevel extends Component { return ( - {isRevampLayout && ( - - {intl.formatMessage(settingsMenuMessages.levelOfComplexity)} - - )} + + {intl.formatMessage(settingsMenuMessages.levelOfComplexity)} + { ); } } - -export default (withLayout(ComplexityLevel): ComponentType); diff --git a/packages/yoroi-extension/app/components/profile/language-selection/IntroBanner.js b/packages/yoroi-extension/app/components/profile/language-selection/IntroBanner.js index 278c7c67bc..fe6b778459 100644 --- a/packages/yoroi-extension/app/components/profile/language-selection/IntroBanner.js +++ b/packages/yoroi-extension/app/components/profile/language-selection/IntroBanner.js @@ -1,16 +1,13 @@ // @flow +import type { Node } from 'react'; import { Component } from 'react'; -import type { Node, ComponentType } from 'react'; import { observer } from 'mobx-react'; -import styles from './IntroBanner.scss'; -import { intlShape } from 'react-intl'; -import { ReactComponent as NightlyLogo } from '../../../assets/images/yoroi-logo-nightly.inline.svg'; -import { ReactComponent as YoroiLogo } from '../../../assets/images/yoroi-logo-blue.inline.svg'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import { withLayout } from '../../../styles/context/layout'; -import type { InjectedLayoutProps } from '../../../styles/context/layout'; +import { intlShape } from 'react-intl'; import { ReactComponent as YoroiRevampLogo } from '../../../assets/images/yoroi-logo-revamp-blue.inline.svg'; -import { ReactComponent as YoroiRevampNightlyLogo } from '../../../assets/images/yoroi-logo-revamp-nightly-blue.inline.svg'; +import { + ReactComponent as YoroiRevampNightlyLogo +} from '../../../assets/images/yoroi-logo-revamp-nightly-blue.inline.svg'; import { Box, Typography } from '@mui/material'; import globalMessages from '../../../i18n/global-messages'; @@ -19,36 +16,20 @@ type Props = {| |}; @observer -class IntroBanner extends Component { +export default class IntroBanner extends Component { static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; - getLogo: void => string = () => { - if (this.props.isNightly) return NightlyLogo; - return YoroiLogo; - }; - getRevampLogo: void => string = () => { if (this.props.isNightly) return YoroiRevampNightlyLogo; return YoroiRevampLogo; }; render(): Node { - const { renderLayoutComponent } = this.props; const { intl } = this.context; - const Logo = this.getLogo(); const RevampLogo = this.getRevampLogo(); - - const classicLayout = ( -
    - - - -
    - ); - - const revampLayout = ( + return ( { }} > - + @@ -72,12 +53,5 @@ class IntroBanner extends Component { ); - - return renderLayoutComponent({ - CLASSIC: classicLayout, - REVAMP: revampLayout, - }); } } - -export default (withLayout(IntroBanner): ComponentType); diff --git a/packages/yoroi-extension/app/components/profile/language-selection/IntroBanner.scss b/packages/yoroi-extension/app/components/profile/language-selection/IntroBanner.scss deleted file mode 100644 index b8256f65cf..0000000000 --- a/packages/yoroi-extension/app/components/profile/language-selection/IntroBanner.scss +++ /dev/null @@ -1,19 +0,0 @@ -.component { - margin-top: 64px; - margin-left: auto; - margin-right: auto; - width: 50%; - text-align: center; - - font-weight: 400; - line-height: 1.38; - - .banner { - & > svg { - display: block; - margin: auto; - width: 220px; - height: 60px; - } - } -} diff --git a/packages/yoroi-extension/app/components/profile/language-selection/LanguageSelectionForm.js b/packages/yoroi-extension/app/components/profile/language-selection/LanguageSelectionForm.js index 83a0546d5e..cb101d1784 100644 --- a/packages/yoroi-extension/app/components/profile/language-selection/LanguageSelectionForm.js +++ b/packages/yoroi-extension/app/components/profile/language-selection/LanguageSelectionForm.js @@ -1,11 +1,12 @@ // @flow +import type { Node } from 'react'; import { Component } from 'react'; -import type { Node, ComponentType } from 'react'; import { observer } from 'mobx-react'; import { LoadingButton } from '@mui/lab'; -import { MenuItem, Checkbox, FormControlLabel, Typography, Box, Button } from '@mui/material'; +import { Box, Button, Checkbox, FormControlLabel, MenuItem, Typography } from '@mui/material'; import Select from '../../common/Select'; -import { intlShape, FormattedHTMLMessage } from 'react-intl'; +import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; +import { FormattedHTMLMessage, intlShape } from 'react-intl'; import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm'; import LocalizableError from '../../../i18n/LocalizableError'; import type { LanguageType } from '../../../i18n/translations'; @@ -13,11 +14,8 @@ import styles from './LanguageSelectionForm.scss'; import FlagLabel from '../../widgets/FlagLabel'; import { tier1Languages } from '../../../config/languagesConfig'; import globalMessages, { listOfTranslators } from '../../../i18n/global-messages'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import ReactMarkdown from 'react-markdown'; import tosStyles from '../terms-of-use/TermsOfUseText.scss'; -import { withLayout } from '../../../styles/context/layout'; -import type { InjectedLayoutProps } from '../../../styles/context/layout'; import { ReactComponent as BackIcon } from '../../../assets/images/assets-page/backarrow.inline.svg'; type Props = {| @@ -37,7 +35,7 @@ type State = {| |}; @observer -class LanguageSelectionForm extends Component { +export default class LanguageSelectionForm extends Component { static defaultProps: {| error: void |} = { error: undefined, }; @@ -100,7 +98,7 @@ class LanguageSelectionForm extends Component ({ @@ -109,88 +107,12 @@ class LanguageSelectionForm extends Component -
    - - - {error &&
    {intl.formatMessage(error, error.values)}
    } - - - - - } - control={ - { - tosAgreement.value = event.target.checked; - }} - /> - } - sx={{ - width: '600px', - marginLeft: '0px', - marginBottom: '20px', - }} - /> - - - {intl.formatMessage(globalMessages.continue)} - - - {!tier1Languages.includes(currentLocale) && ( -
    -

    {intl.formatMessage(globalMessages.languageSelectLabelInfo)}

    -
    - {intl.formatMessage(globalMessages.languageSelectInfo)}{' '} - {listOfTranslators( - intl.formatMessage(globalMessages.translationContributors), - intl.formatMessage(globalMessages.translationAcknowledgment) - )} -
    -
    - )} -
    -

    - ); - - const revampLayout = ( - + return ( +
    {this.context.intl.formatMessage(globalMessages.languageSelectLabelShort)} @@ -218,7 +140,7 @@ class LanguageSelectionForm extends Component {languageOptions.map(option => ( - + ))} @@ -294,37 +216,16 @@ class LanguageSelectionForm extends Component ); - - return renderLayoutComponent({ - CLASSIC: classicLayout, - REVAMP: revampLayout, - }); } renderMarkdown(markdown: string): Node { const { intl } = this.context; - const { renderLayoutComponent } = this.props; - const classicLayout = ( - <> -
    -
    -
    - -
    -
    -
    - - - ); - - const revampLayout = ( + return ( <>
    - +
    @@ -335,18 +236,13 @@ class LanguageSelectionForm extends Component} + startIcon={} onClick={this.onClickBack} > {intl.formatMessage(globalMessages.backButtonLabel)} ); - - return renderLayoutComponent({ - CLASSIC: classicLayout, - REVAMP: revampLayout, - }); } render(): Node { @@ -360,5 +256,3 @@ class LanguageSelectionForm extends Component); diff --git a/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.js b/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.js index 51d5e8eeaf..3196bdc709 100644 --- a/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.js +++ b/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.js @@ -1,17 +1,13 @@ // @flow +import type { Node } from 'react'; import { Component } from 'react'; -import type { ComponentType, Node } from 'react'; import { observer } from 'mobx-react'; import { Box, Button, Typography } from '@mui/material'; import CheckboxLabel from '../../common/CheckboxLabel'; -import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl'; -import styles from './NightlyForm.scss'; +import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; +import { defineMessages, FormattedHTMLMessage, intlShape } from 'react-intl'; import globalMessages from '../../../i18n/global-messages'; -import { ReactComponent as NightlyIcon } from '../../../assets/images/yoroi-nightly-icon.inline.svg'; import { ReactComponent as NightlyIconRevamp } from '../../../assets/images/yoroi-nightly-icon-dark.inline.svg'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import { withLayout } from '../../../styles/context/layout'; -import type { InjectedLayoutProps } from '../../../styles/context/layout'; const messages = defineMessages({ nightlySlogan: { @@ -63,7 +59,7 @@ type State = {| |}; @observer -class NightlyForm extends Component { +export default class NightlyForm extends Component { static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; @@ -78,50 +74,9 @@ class NightlyForm extends Component { render(): Node { const { intl } = this.context; - const { onSubmit, isRevampLayout, renderLayoutComponent } = this.props; - - const classicLayout = ( -
    -
    -
    - -
    -
    - -
    -
    -
    {intl.formatMessage(messages.warningHeader)}
    -
      -
    • {intl.formatMessage(messages.warning1)}
      • -
    • {intl.formatMessage(messages.warning2)}
      • -
    -
    -
    {intl.formatMessage(messages.recommendationHeader)}
    -
      -
    • {intl.formatMessage(messages.recommendation1)}
      • -
    • {intl.formatMessage(messages.recommendation2)}
      • -
    -
    -
    - -
    - -
    -
    - ); + const { onSubmit } = this.props; - const revampLayout = ( + return ( { mb: '24px', }} > - + {intl.formatMessage(globalMessages.yoroiNightly)} @@ -226,12 +181,5 @@ class NightlyForm extends Component { ); - - return renderLayoutComponent({ - CLASSIC: classicLayout, - REVAMP: revampLayout, - }); } } - -export default (withLayout(NightlyForm): ComponentType); diff --git a/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.scss b/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.scss deleted file mode 100644 index 3ce34db0bc..0000000000 --- a/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.scss +++ /dev/null @@ -1,44 +0,0 @@ -@import '../../../themes/mixins/unordered-list'; - -.component { - @include unordered-list; - display: flex; - height: 100%; - justify-content: center; - - .centeredBox { - width: 480px; - } - - .logo { - margin-top: 40px; - margin-bottom: 40px; - & > svg { - display: block; - margin: auto; - width: 145px; - height: 135px; - } - } - - .content { - color: var(--yoroi-palette-gray-800); - font-weight: 400; - font-size: 14px; - line-height: 24px; - - .header { - font-size: 16px; - line-height: 32px; - } - - ul { - margin-top: 4px; - } - } - - .checkbox { - margin-top: 40px; - margin-bottom: 40px; - } -} diff --git a/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseForm.js b/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseForm.js index 8c2c982df9..04a4600e82 100644 --- a/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseForm.js +++ b/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseForm.js @@ -1,18 +1,16 @@ // @flow +import type { Node } from 'react'; import { Component } from 'react'; -import type { Node, ComponentType } from 'react'; import { observer } from 'mobx-react'; import { LoadingButton } from '@mui/lab'; import { Box, Button, Checkbox, FormControlLabel, Typography } from '@mui/material'; -import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl'; +import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; +import { defineMessages, FormattedHTMLMessage, intlShape } from 'react-intl'; import LocalizableError from '../../../i18n/LocalizableError'; import styles from './TermsOfUseForm.scss'; import globalMessages from '../../../i18n/global-messages'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import ReactMarkdown from 'react-markdown'; import tosStyles from './TermsOfUseText.scss'; -import { withLayout } from '../../../styles/context/layout'; -import type { InjectedLayoutProps } from '../../../styles/context/layout'; import { ReactComponent as BackIcon } from '../../../assets/images/assets-page/backarrow.inline.svg'; const messages = defineMessages({ @@ -41,7 +39,7 @@ type State = {| |}; @observer -class TermsOfUseForm extends Component { +export default class TermsOfUseForm extends Component { static defaultProps: {| error: void |} = { error: undefined, }; @@ -78,51 +76,9 @@ class TermsOfUseForm extends Component { renderForm(): Node { const { intl } = this.context; - const { isSubmitting, error, renderLayoutComponent } = this.props; + const { isSubmitting, error } = this.props; const { areTermsOfUseAccepted } = this.state; - - const classicLayout = ( -
    -
    -
    {intl.formatMessage(messages.updateTitle)}
    -
    {intl.formatMessage(messages.updateText)}
    - -
    - - - - } - control={ - - } - sx={{ margin: '0px' }} - /> -
    - -
    - - {intl.formatMessage(globalMessages.continue)} - -
    - - {error &&
    {intl.formatMessage(error, error.values)}
    } -
    -
    - ); - - const revampLayout = ( + return ( { ); - - return renderLayoutComponent({ - CLASSIC: classicLayout, - REVAMP: revampLayout, - }); } renderMarkdown(markdown: string): Node { const { intl } = this.context; - const { renderLayoutComponent } = this.props; - - const classicLayout = ( - <> -
    -
    -
    - -
    -
    -
    -
    - -
    - - ); - const revampLayout = ( + return ( <>
    - +
    @@ -237,17 +170,13 @@ class TermsOfUseForm extends Component { top: '24px', left: '24px', }} - startIcon={} + startIcon={} onClick={this.onClickBack} > {intl.formatMessage(globalMessages.backButtonLabel)} ); - return renderLayoutComponent({ - CLASSIC: classicLayout, - REVAMP: revampLayout, - }); } render(): Node { @@ -261,5 +190,3 @@ class TermsOfUseForm extends Component { return this.renderMarkdown(this.props.localizedPrivacyNotice); } } - -export default (withLayout(TermsOfUseForm): ComponentType); diff --git a/packages/yoroi-extension/app/components/profile/uri-prompt/UriAccept.js b/packages/yoroi-extension/app/components/profile/uri-prompt/UriAccept.js index 22de337efa..ed4b361434 100644 --- a/packages/yoroi-extension/app/components/profile/uri-prompt/UriAccept.js +++ b/packages/yoroi-extension/app/components/profile/uri-prompt/UriAccept.js @@ -19,7 +19,6 @@ const messages = defineMessages({ type Props = {| +onConfirm: void => PossiblyAsync, +onBack: void => void, - +classicTheme: boolean |}; @observer diff --git a/packages/yoroi-extension/app/components/profile/uri-prompt/UriPromptForm.js b/packages/yoroi-extension/app/components/profile/uri-prompt/UriPromptForm.js index 48846143e3..298c9d5b4f 100644 --- a/packages/yoroi-extension/app/components/profile/uri-prompt/UriPromptForm.js +++ b/packages/yoroi-extension/app/components/profile/uri-prompt/UriPromptForm.js @@ -6,7 +6,6 @@ import { Button } from '@mui/material'; import { defineMessages, intlShape } from 'react-intl'; import styles from './UriPromptForm.scss'; import { ReactComponent as AboutUri } from '../../../assets/images/uri/about-url.inline.svg'; -import { ReactComponent as AboutUriClassic } from '../../../assets/images/uri/about-url-classic.inline.svg'; import globalMessages from '../../../i18n/global-messages'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; @@ -24,7 +23,6 @@ const messages = defineMessages({ type Props = {| +onAccept: void => void, +onSkip: void => void, - +classicTheme: boolean |}; @observer @@ -40,7 +38,7 @@ export default class UriPromptForm extends Component {
    - {this.props.classicTheme ? : } + {}
    diff --git a/packages/yoroi-extension/app/components/settings/SettingsLayout.js b/packages/yoroi-extension/app/components/settings/SettingsLayout.js deleted file mode 100644 index 53658f90ac..0000000000 --- a/packages/yoroi-extension/app/components/settings/SettingsLayout.js +++ /dev/null @@ -1,27 +0,0 @@ -// @flow -import { Component } from 'react'; -import type { Node } from 'react'; -import { observer } from 'mobx-react'; -import styles from './SettingsLayout.scss'; - -type Props = {| - +children: Node, - +menu: Node, -|}; - -@observer -export default class SettingsLayout extends Component { - render(): Node { - const { menu, children } = this.props; - return ( -
    - {menu} -
    -
    - {children} -
    -
    -
    - ); - } -} diff --git a/packages/yoroi-extension/app/components/settings/SettingsLayout.scss b/packages/yoroi-extension/app/components/settings/SettingsLayout.scss deleted file mode 100644 index 5afd88030a..0000000000 --- a/packages/yoroi-extension/app/components/settings/SettingsLayout.scss +++ /dev/null @@ -1,22 +0,0 @@ -@import './settingsConfig'; - -.component { - background-color: var(--yoroi-palette-common-white); - display: flex; - flex-direction: column; - height: 100%; - - .settingsPaneWrapper { - flex: 1; - overflow-x: hidden; - overflow-y: overlay; - } - - .settingsPane { - min-height: 100%; - padding: 32px 24px; - background-color: var(--yoroi-palette-common-white); - border: 1px solid #ffffff; - overflow: visible; - } -} diff --git a/packages/yoroi-extension/app/components/settings/_settingsConfig.scss b/packages/yoroi-extension/app/components/settings/_settingsConfig.scss deleted file mode 100644 index c327311fc3..0000000000 --- a/packages/yoroi-extension/app/components/settings/_settingsConfig.scss +++ /dev/null @@ -1,5 +0,0 @@ -@mixin borderAndBackground { - background-color: var(--yoroi-palette-common-white); - border-radius: 4px; - border: solid 1px var(--yoroi-palette-common-white); -} diff --git a/packages/yoroi-extension/app/components/settings/categories/ExternalStorageSettings.js b/packages/yoroi-extension/app/components/settings/categories/ExternalStorageSettings.js index d1d297df2c..3db902ee72 100644 --- a/packages/yoroi-extension/app/components/settings/categories/ExternalStorageSettings.js +++ b/packages/yoroi-extension/app/components/settings/categories/ExternalStorageSettings.js @@ -1,6 +1,6 @@ // @flow import { Component } from 'react'; -import type { Node, ComponentType } from 'react'; +import type { Node } from 'react'; import { observer } from 'mobx-react'; import { defineMessages, intlShape } from 'react-intl'; import { Button, Typography } from '@mui/material'; @@ -8,7 +8,6 @@ import type { SelectedExternalStorageProvider } from '../../../domain/ExternalSt import type { ProvidersType } from '../../../api/externalStorage/index'; import styles from './ExternalStorageSettings.scss'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import { withLayout } from '../../../styles/context/layout'; const messages = defineMessages({ sectionTitle: { @@ -36,10 +35,8 @@ type Props = {| selectedExternalStorage: ?SelectedExternalStorageProvider, |}; -type InjectedProps = {| +isRevampLayout: boolean |}; - @observer -class ExternalStorageSettings extends Component { +export default class ExternalStorageSettings extends Component { static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; @@ -47,7 +44,6 @@ class ExternalStorageSettings extends Component { render(): Node { const { onConnect, onDisconnect, externalStorageProviders, selectedExternalStorage } = this.props; const { intl } = this.context; - const { isRevampLayout } = this.props; const providersButtons = []; for (const provider of Object.keys(externalStorageProviders)) { @@ -57,7 +53,7 @@ class ExternalStorageSettings extends Component { providersButtons.push(
    ); - - return renderLayoutComponent({ - CLASSIC: classicLayout, - REVAMP: revampLayout, - }); } } @@ -330,5 +242,3 @@ function LabelWithValue({ LabelWithValue.defaultProps = { url: undefined, }; - -export default (withLayout(AboutYoroiSettingsBlock): ComponentType); diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/ExplorerSettings.js b/packages/yoroi-extension/app/components/settings/categories/general-setting/ExplorerSettings.js index c223e5d0e4..17c3243dfd 100644 --- a/packages/yoroi-extension/app/components/settings/categories/general-setting/ExplorerSettings.js +++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/ExplorerSettings.js @@ -1,6 +1,6 @@ // @flow import { Component } from 'react'; -import type { Node, ComponentType } from 'react'; +import type { Node } from 'react'; import { observer } from 'mobx-react'; import classNames from 'classnames'; import Select from '../../../common/Select'; @@ -13,8 +13,6 @@ import globalMessages from '../../../../i18n/global-messages'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import type { ExplorerRow } from '../../../../api/ada/lib/storage/database/explorers/tables'; import { SelectedExplorer } from '../../../../domain/SelectedExplorer'; -import { withLayout } from '../../../../styles/context/layout'; -import type { InjectedLayoutProps } from '../../../../styles/context/layout'; import { MenuItemStyled } from '../../../common/commonStyles/MenuItemStyled'; type Props = {| @@ -35,7 +33,7 @@ const messages = defineMessages({ }); @observer -class ExplorerSettings extends Component { +export default class ExplorerSettings extends Component { static defaultProps: {| error: void |} = { error: undefined, }; @@ -58,7 +56,7 @@ class ExplorerSettings extends Component { }); render(): Node { - const { isSubmitting, error, isRevampLayout } = this.props; + const { isSubmitting, error } = this.props; const { intl } = this.context; const { form } = this; const explorerId = form.$('explorerId'); @@ -73,12 +71,10 @@ class ExplorerSettings extends Component { return (
    - {isRevampLayout && ( - - {intl.formatMessage(messages.title)} - - )} - + + {intl.formatMessage(messages.title)} + + - {isRevampLayout && ( + {( <> @@ -230,5 +215,3 @@ class UnitOfAccountSettings extends Component { ); } } - -export default (withLayout(UnitOfAccountSettings): ComponentType); diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/UriSettingsBlock.js b/packages/yoroi-extension/app/components/settings/categories/general-setting/UriSettingsBlock.js index 6c39f13c29..d211c56382 100644 --- a/packages/yoroi-extension/app/components/settings/categories/general-setting/UriSettingsBlock.js +++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/UriSettingsBlock.js @@ -1,22 +1,20 @@ // @flow import { Component } from 'react'; -import type { Node, ComponentType } from 'react'; +import type { Node } from 'react'; import { observer } from 'mobx-react'; import { Box, Button, Typography } from '@mui/material'; import { intlShape } from 'react-intl'; import globalMessages from '../../../../i18n/global-messages'; import { observable, runInAction } from 'mobx'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import { withLayout } from '../../../../styles/context/layout'; type Props = {| +registerUriScheme: void => void, +isFirefox: boolean, |}; -type InjectedProps = {| +isRevampLayout: boolean |}; @observer -class UriSettingsBlock extends Component { +export default class UriSettingsBlock extends Component { @observable hasPressed: boolean = false; static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { @@ -25,7 +23,6 @@ class UriSettingsBlock extends Component { render(): Node { const { intl } = this.context; - const { isRevampLayout } = this.props; // On firefox since there is no prompt, // We need to give the user feedback that they pressed the button @@ -35,28 +32,22 @@ class UriSettingsBlock extends Component { - + {intl.formatMessage(globalMessages.uriSchemeLabel)} - - {intl.formatMessage(isRevampLayout ? globalMessages.uriExplanationRevamp : globalMessages.uriExplanation)} + + {intl.formatMessage(globalMessages.uriExplanationRevamp)} - ); - - const BuyAdaButtonRevamp = ( + return ( ); - - return this.props.renderLayoutComponent({ - CLASSIC: BuyAdaButtonClassic, - REVAMP: BuyAdaButtonRevamp, - }); } } - -export default (withLayout(BuySellAdaButton): ComponentType); diff --git a/packages/yoroi-extension/app/components/topbar/NavBarBack.js b/packages/yoroi-extension/app/components/topbar/NavBarBack.js deleted file mode 100644 index e2e1c83fe7..0000000000 --- a/packages/yoroi-extension/app/components/topbar/NavBarBack.js +++ /dev/null @@ -1,33 +0,0 @@ -// @flow -import { Component } from 'react'; -import type { Node } from 'react'; -import { observer } from 'mobx-react'; -import styles from './NavBarBack.scss'; -import { ReactComponent as BackIcon } from '../../assets/images/wallet-nav/back-arrow.inline.svg'; - -type Props = {| - +title: string, - +onBackClick: string => void, - +route: string, -|}; - -@observer -export default class NavBarBack extends Component { - - render(): Node { - const { title, onBackClick, route } = this.props; - - return ( - - ); - } -} diff --git a/packages/yoroi-extension/app/components/topbar/NavBarBack.scss b/packages/yoroi-extension/app/components/topbar/NavBarBack.scss deleted file mode 100644 index 01485c88a8..0000000000 --- a/packages/yoroi-extension/app/components/topbar/NavBarBack.scss +++ /dev/null @@ -1,19 +0,0 @@ -.backButton { - font-size: 14px; - line-height: 22px; - font-weight: 400; - background-color: transparent; - color: var(--yoroi-palette-gray-600); - height: 100%; - display: block; - - &:hover { - cursor: pointer; - } -} - -.backIcon { - width: 12px; - height: 12px; - margin-right: 16px; -} diff --git a/packages/yoroi-extension/app/components/topbar/NavBarTitle.js b/packages/yoroi-extension/app/components/topbar/NavBarTitle.js index 0cee2bd99c..2cea214c03 100644 --- a/packages/yoroi-extension/app/components/topbar/NavBarTitle.js +++ b/packages/yoroi-extension/app/components/topbar/NavBarTitle.js @@ -1,35 +1,22 @@ // @flow import { Box } from '@mui/material'; import { observer } from 'mobx-react'; -import type { Node, ComponentType } from 'react'; -import type { LayoutComponentMap } from '../../styles/context/layout'; +import type { Node } from 'react'; import { Component } from 'react'; -import { withLayout } from '../../styles/context/layout'; import styles from './NavBarTitle.scss'; type Props = {| +title: string, |}; -type InjectedProps = {| - +renderLayoutComponent: LayoutComponentMap => Node, -|}; @observer -class NavBarTitle extends Component { +export default class NavBarTitle extends Component { render(): Node { - const { renderLayoutComponent, title } = this.props; - - const navbarTitleClassic =
    {title}
    ; - const navbarTitleRevamp = ( + const { title } = this.props; + return ( {title} ); - - return renderLayoutComponent({ - CLASSIC: navbarTitleClassic, - REVAMP: navbarTitleRevamp, - }); } } -export default (withLayout(NavBarTitle): ComponentType); diff --git a/packages/yoroi-extension/app/components/topbar/SideBarCategory.js b/packages/yoroi-extension/app/components/topbar/SideBarCategory.js deleted file mode 100644 index aa729202bf..0000000000 --- a/packages/yoroi-extension/app/components/topbar/SideBarCategory.js +++ /dev/null @@ -1,62 +0,0 @@ -// @flow -import { Component } from 'react'; -import type { Node } from 'react'; -import type { MessageDescriptor, $npm$ReactIntl$IntlFormat } from 'react-intl'; -import { intlShape } from 'react-intl'; -import { observer } from 'mobx-react'; -import classNames from 'classnames'; -import styles from './SideBarCategory.scss'; - -type Props = {| - +icon: string, - +active: boolean, - +onClick: void => void, - +showLabel?: boolean, - +label: ?MessageDescriptor, -|}; - -@observer -export default class SideBarCategory extends Component { - static defaultProps: {|showLabel: boolean|} = { - showLabel: false, - }; - - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { - intl: intlShape.isRequired, - }; - - render(): Node { - - const { intl } = this.context; - - const { - icon, - active, - onClick, - label, - showLabel - } = this.props; - - const componentStyles = classNames([ - styles.component, - active ? styles.active : null, - ]); - - const SvgElem = icon; - - return ( - - ); - } - -} diff --git a/packages/yoroi-extension/app/components/topbar/SideBarCategory.scss b/packages/yoroi-extension/app/components/topbar/SideBarCategory.scss deleted file mode 100644 index 92297d9856..0000000000 --- a/packages/yoroi-extension/app/components/topbar/SideBarCategory.scss +++ /dev/null @@ -1,40 +0,0 @@ -.component { - padding: 20px 24px; - height: 67px; - width: 100%; - display: flex; - align-items: center; - & svg > path { - fill: var(--yoroi-sidebar-text); - } - &:hover { - & svg > path { - fill: var(--yoroi-palette-secondary-300); - } - } - &.active:hover { - cursor: default !important; - } - &.active { - background-color: var(--yoroi-sidebar-end); - & svg > path { - fill: var(--yoroi-palette-secondary-300); - } - } -} - -.icon { - & > svg { - max-width: 24px; - max-height: 24px; - } -} - -.label { - display: block; - color: var(--yoroi-sidebar-text); - font-weight: 400; - font-size: 0.875rem; - line-height: 22px; - margin-left: 16px; -} diff --git a/packages/yoroi-extension/app/components/topbar/Sidebar.js b/packages/yoroi-extension/app/components/topbar/Sidebar.js deleted file mode 100644 index ab1c81f959..0000000000 --- a/packages/yoroi-extension/app/components/topbar/Sidebar.js +++ /dev/null @@ -1,110 +0,0 @@ -// @flow -import { Component } from 'react'; -import type { Node } from 'react'; -import { observer } from 'mobx-react'; -import SideBarCategory from './SideBarCategory'; -import styles from './Sidebar.scss'; -import type { SidebarCategory } from '../../stores/stateless/sidebarCategories'; -import classnames from 'classnames'; -import { intlShape } from 'react-intl'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; - -import { ReactComponent as yoroiLogo } from '../../assets/images/sidebar/yoroi-logo.inline.svg'; -import { ReactComponent as yoroiLogoExpanded } from '../../assets/images/sidebar/yoroi-logo-expanded.inline.svg'; -import { ReactComponent as toggleIcon } from '../../assets/images/sidebar/open-sidebar.inline.svg'; -import globalMessages from '../../i18n/global-messages'; - -type Props = {| - +children?: ?Node, - +categories?: Array, - +isActiveCategory?: SidebarCategory => boolean, - +onCategoryClicked?: SidebarCategory => void, - +onToggleSidebar: void => Promise, - +isSidebarExpanded: boolean, -|}; - -@observer -export default class Sidebar extends Component { - static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { - intl: intlShape.isRequired, - }; - - static defaultProps: {| - categories: void, - children: void, - isActiveCategory: void, - onCategoryClicked: void, - |} = { - children: undefined, - categories: undefined, - isActiveCategory: undefined, - onCategoryClicked: undefined, - }; - - render(): Node { - const { intl } = this.context; - const { - categories, - isActiveCategory, - onCategoryClicked, - isSidebarExpanded, - onToggleSidebar, - } = this.props; - - const ToggleIcon = toggleIcon; - const YoroiLogo = yoroiLogo; - const YoroiLogoExpanded = yoroiLogoExpanded; - - return ( -
    - {this.props.children} -
    - {isSidebarExpanded ? : } -
    -
    - {categories - ? categories.map(category => { - return ( - { - if (onCategoryClicked) { - onCategoryClicked(category); - } - }} - /> - ); - }) - : null} -
    - - -
    - ); - } -} diff --git a/packages/yoroi-extension/app/components/topbar/Sidebar.scss b/packages/yoroi-extension/app/components/topbar/Sidebar.scss deleted file mode 100644 index 5b270053c9..0000000000 --- a/packages/yoroi-extension/app/components/topbar/Sidebar.scss +++ /dev/null @@ -1,72 +0,0 @@ -.wrapper { - min-height: 100%; - display: flex; - flex-direction: column; - background: var(--yoroi-sidebar-background); -} - -.header { - padding: 18px; - min-height: 74px; - & svg > path { - fill: var(--yoroi-sidebar-text); - } -} - -.categories { - display: flex; - flex-direction: column; - flex: 1; -} - -.footer { - display: flex; - align-items: center; - justify-content: space-between; - flex-wrap: wrap; -} - -.faq { - max-width: 47px; - text-transform: uppercase; - border-radius: 20px; - background: #1737A3; - text-decoration: none; - color: #FFFFFF; - font-weight: 400; - font-size: 12px; - padding: 14px 12px; - height: 24px; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - margin: 0px 12px; - - &:hover { - background-color: #122770; - } -} - -.toggleButton { - padding: 20px 24px; - align-self: flex-end; - display: flex; - justify-content: center; - & svg > path { - fill: var(--yoroi-sidebar-text); - } - &:hover { - cursor: pointer; - & svg > path { - fill: var(--yoroi-palette-secondary-300); - } - } - & .iconRotate { - transform: rotate(180deg); - } - - &.toggleActive { - justify-content: flex-end; - } -} diff --git a/packages/yoroi-extension/app/components/topbar/SubMenu.js b/packages/yoroi-extension/app/components/topbar/SubMenu.js index 90c5c0c721..f3f40ac26a 100644 --- a/packages/yoroi-extension/app/components/topbar/SubMenu.js +++ b/packages/yoroi-extension/app/components/topbar/SubMenu.js @@ -1,9 +1,8 @@ // @flow +import type { Node } from 'react'; import { Component } from 'react'; -import type { Node, ComponentType } from 'react'; import { observer } from 'mobx-react'; import styles from './SubMenu.scss'; -import { withLayout } from '../../styles/context/layout'; import SubMenuItem from './SubMenuItem'; export type SubMenuOption = {| @@ -19,19 +18,15 @@ type Props = {| +options: Array, locationId: string, |}; -type InjectedProps = {| - +isRevampLayout: boolean, -|}; -type AllProps = {| ...Props, ...InjectedProps |}; + @observer -class SubMenu extends Component { +export default class SubMenu extends Component { render(): Node { const { onItemClick, isActiveItem, options, locationId } = this.props; - const isRevamp = this.props.isRevampLayout; return (
    -
    +
    {options .filter(o => !o.hidden) .map(({ label, route, className }) => ( @@ -49,4 +44,3 @@ class SubMenu extends Component { ); } } -export default (withLayout(SubMenu): ComponentType); diff --git a/packages/yoroi-extension/app/components/topbar/SubMenuItem.js b/packages/yoroi-extension/app/components/topbar/SubMenuItem.js index 62ca3e09bc..86884a9185 100644 --- a/packages/yoroi-extension/app/components/topbar/SubMenuItem.js +++ b/packages/yoroi-extension/app/components/topbar/SubMenuItem.js @@ -1,11 +1,10 @@ // @flow import { Component } from 'react'; -import type { Node, ComponentType } from 'react'; +import type { Node } from 'react'; import { observer } from 'mobx-react'; import classNames from 'classnames'; import styles from './SubMenuItem.scss'; import { Box, Typography } from '@mui/material'; -import { withLayout } from '../../styles/context/layout'; type Props = {| +label: string, @@ -16,10 +15,8 @@ type Props = {| locationId: string, |}; -type InjectedProps = {| +isRevampLayout: boolean |}; - @observer -class SubMenuItem extends Component { +export default class SubMenuItem extends Component { static defaultProps: {| disabled: boolean |} = { disabled: false, }; @@ -89,5 +86,3 @@ function getStyles(active: boolean): Object { }, }; } - -export default (withLayout(SubMenuItem): ComponentType); diff --git a/packages/yoroi-extension/app/components/transfer/ErrorPage.js b/packages/yoroi-extension/app/components/transfer/ErrorPage.js index d2b876def8..15b94eb032 100644 --- a/packages/yoroi-extension/app/components/transfer/ErrorPage.js +++ b/packages/yoroi-extension/app/components/transfer/ErrorPage.js @@ -15,7 +15,6 @@ type Props = {| +onCancel: void => void, +title: string, +backButtonLabel: string, - +classicTheme: boolean, |}; @observer diff --git a/packages/yoroi-extension/app/components/transfer/SuccessPage.js b/packages/yoroi-extension/app/components/transfer/SuccessPage.js index 5b496c3078..bf82becf49 100644 --- a/packages/yoroi-extension/app/components/transfer/SuccessPage.js +++ b/packages/yoroi-extension/app/components/transfer/SuccessPage.js @@ -1,5 +1,5 @@ // @flow -import type { ComponentType, Node } from 'react'; +import type { Node } from 'react'; import { Component } from 'react'; import { observer } from 'mobx-react'; import { intlShape } from 'react-intl'; @@ -9,13 +9,10 @@ import DialogCloseButton from '../widgets/DialogCloseButton'; import LoadingSpinner from '../widgets/LoadingSpinner'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import { Typography } from '@mui/material'; -import { withLayout } from '../../styles/context/layout'; -import type { InjectedLayoutProps } from '../../styles/context/layout'; type Props = {| +title: string, +text: string, - +classicTheme: boolean, +closeInfo?: {| +onClose: void => PossiblyAsync, +closeLabel: string, @@ -23,7 +20,7 @@ type Props = {| |}; @observer -class SuccessPage extends Component { +export default class SuccessPage extends Component { static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { intl: intlShape.isRequired }; @@ -33,7 +30,7 @@ class SuccessPage extends Component { }; render(): Node { - const { title, text, isRevampLayout } = this.props; + const { title, text } = this.props; const actions = this.props.closeInfo == null ? undefined @@ -57,7 +54,7 @@ class SuccessPage extends Component {
    { ); } } - -export default (withLayout(SuccessPage): ComponentType); \ No newline at end of file diff --git a/packages/yoroi-extension/app/components/transfer/SuccessPageRevamp.js b/packages/yoroi-extension/app/components/transfer/SuccessPageRevamp.js index 987151569d..09afc64791 100644 --- a/packages/yoroi-extension/app/components/transfer/SuccessPageRevamp.js +++ b/packages/yoroi-extension/app/components/transfer/SuccessPageRevamp.js @@ -44,7 +44,7 @@ export class SuccessPageRevamp extends Component { closeOnOverlayClick={false} onClose={closeInfo ? closeInfo.onClose : undefined} closeButton={ - closeInfo ? : undefined + closeInfo ? : undefined } > diff --git a/packages/yoroi-extension/app/components/uri/URIGenerateDialog.js b/packages/yoroi-extension/app/components/uri/URIGenerateDialog.js index b88d8e636f..2396e7e673 100644 --- a/packages/yoroi-extension/app/components/uri/URIGenerateDialog.js +++ b/packages/yoroi-extension/app/components/uri/URIGenerateDialog.js @@ -43,7 +43,6 @@ const messages = defineMessages({ type Props = {| +onClose: void => void, +onGenerate: (address: string, amount: BigNumber) => void, - +classicTheme: boolean, +walletAddress: string, +amount: ?BigNumber, +validateAmount: (amountInNaturalUnits: BigNumber, tokenRow: $ReadOnly) => Promise<[boolean, void | string]>, diff --git a/packages/yoroi-extension/app/components/uri/URILandingDialog.js b/packages/yoroi-extension/app/components/uri/URILandingDialog.js index 6e17ab03b2..0adea82df4 100644 --- a/packages/yoroi-extension/app/components/uri/URILandingDialog.js +++ b/packages/yoroi-extension/app/components/uri/URILandingDialog.js @@ -36,7 +36,6 @@ const messages = defineMessages({ type Props = {| +onSubmit: void => void, +onClose: void => void, - +classicTheme: boolean, |}; @observer @@ -51,7 +50,7 @@ export default class URILandingDialog extends Component { }; render(): Node { - const { onClose, classicTheme } = this.props; + const { onClose } = this.props; const { intl } = this.context; const dialogClasses = classnames([ @@ -68,7 +67,7 @@ export default class URILandingDialog extends Component { onClose={onClose} >
    - {!classicTheme && } +
    {intl.formatMessage(messages.uriLandingDialogWarningLine1)}
      diff --git a/packages/yoroi-extension/app/components/wallet/WalletAdd.js b/packages/yoroi-extension/app/components/wallet/WalletAdd.js deleted file mode 100644 index ebb14d247a..0000000000 --- a/packages/yoroi-extension/app/components/wallet/WalletAdd.js +++ /dev/null @@ -1,84 +0,0 @@ -// @flow -import { Component } from 'react'; -import type { Node } from 'react'; -import { observer } from 'mobx-react'; -import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl'; - -import MainCards from './add/MainCards'; -import { ReactComponent as LogoYoroiIcon } from '../../assets/images/yoroi-logo-white.inline.svg'; -import { ReactComponent as SettingsIcon } from '../../assets/images/sidebar/wallet-settings-2-ic.inline.svg'; -import { ReactComponent as NightlyLogo } from '../../assets/images/yoroi-logo-nightly-white.inline.svg'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import styles from './WalletAdd.scss'; - -import environment from '../../environment'; - -const messages = defineMessages({ - title: { - id: 'wallet.add.page.title', - defaultMessage: '!!!Your gateway to the financial world', - }, - subTitle: { - id: 'wallet.add.page.subtitle.label', - defaultMessage: '!!!Yoroi light wallet for Cardano', - }, -}); - -type Props = {| - +onCreate: void => void, - +onRestore: void => void, - +onHardwareConnect: void => void, - +onSettings: void => void, -|}; - -@observer -export default class WalletAdd extends Component { - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { - intl: intlShape.isRequired, - }; - - getLogo: void => string = () => { - if (environment.isNightly()) { - return NightlyLogo; - } - return LogoYoroiIcon; - } - - render(): Node { - const { intl } = this.context; - const { onSettings } = this.props; - const LogoIcon = this.getLogo(); - - return ( -
      - {/* Setting button */} -
      -
      - -
      - -
      - {/* Left block */} -
      - -

      - -

      -

      {intl.formatMessage(messages.subTitle)}

      -
      - {/* Right block */} -
      - -
      -
      -
      -
      - ); - } -} diff --git a/packages/yoroi-extension/app/components/wallet/WalletAdd.scss b/packages/yoroi-extension/app/components/wallet/WalletAdd.scss deleted file mode 100644 index cdb50c4c67..0000000000 --- a/packages/yoroi-extension/app/components/wallet/WalletAdd.scss +++ /dev/null @@ -1,162 +0,0 @@ -@import '../mixins/card-mixin.scss'; - -$linebreakWidth: 1540px; - -.component { - height: 100%; - overflow: auto; - - .hero { - min-height: 100%; - max-width: 1366px; - margin: 0 auto; - padding: 20px 15px; - display: flex; - align-items: center; - - @media screen and (max-width: $linebreakWidth) { - max-width: 992px; - } - } - - .heroInner { - display: flex; - position: relative; - z-index: 1; - justify-content: space-between; - width: 100%; - - @media screen and (max-width: $linebreakWidth) { - flex-direction: column; - padding: 0 15px; - } - } - - .heroLogo { - margin-bottom: 48px; - width: 156px; - height: 50px; - display: block; - } - - .heroTitle { - color: var(--yoroi-palette-gray-900); - - font-size: 54px; - letter-spacing: 0.5px; - line-height: 62px; - margin-bottom: 15px; - margin-right: 42px; - width: 432px; - } - - .heroSubTitle { - font-weight: 400; - font-size: 22px; - line-height: 27px; - - @media screen and (max-width: 1530px) { - margin-bottom: 30px; - } - } - - .heroCardsItem { - @include card-mixin; - - &.heroCardsItemLink { - flex: auto; - flex-direction: row; - align-items: center; - text-decoration: none; - padding: 24px 32px; - - .heroCardsItemLinkIcon { - margin-right: 30px; - } - } - } - - .settingsBar { - position: absolute; - right: 35px; - top: 16px; - z-index: 99; - display: flex; - align-items: center; - } - - .settingsBarLink { - display: block; - cursor: pointer; - - + .settingsBarLink { - margin-left: 50px; - } - } -} - -:global(.YoroiClassic) { - .component { - background-image: linear-gradient(to right, #f3f3f5 65%, var(--yoroi-palette-common-white) 65%); - - .heroCardsItemLink { - width: calc(250px * 2 + 15px); - height: auto; - } - - .heroLogo, - .heroCardsItemLinkIcon, - .settingsBarLink { - path { - fill: var(--yoroi-palette-secondary-300); - } - } - - .heroTitle { - color: var(--yoroi-palette-background-walletAdd-title); - } - - .heroSubTitle { - color: var(--yoroi-palette-background-walletAdd-subtitle); - } - } -} - -:global(.YoroiModern), :global(.YoroiRevamp) { - .component { - background-image: url(../../assets/images/add-wallet/add-wallet-bg-modern.inline.svg); - background-size: cover; - background-repeat: no-repeat; - background-position: center -13vw; - - @media screen and (max-width: $linebreakWidth) { - background-position: 0 0; - } - - .heroTitle { - color: var(--yoroi-palette-background-walletAdd-title); - } - - .heroSubTitle { - color: var(--yoroi-palette-background-walletAdd-subtitle); - } - - .heroCardsItemLink { - width: calc(250px * 2 + 15px); - height: auto; - } - - .heroLogo, - .settingsBarLink { - path { - fill: var(--yoroi-palette-common-white); - } - } - - .heroCardsItemLinkIcon { - path { - fill: var(--yoroi-palette-primary-300); - } - } - } -} diff --git a/packages/yoroi-extension/app/components/wallet/WalletBackupDialog.js b/packages/yoroi-extension/app/components/wallet/WalletBackupDialog.js index 0e53b82786..0e2e669a6c 100644 --- a/packages/yoroi-extension/app/components/wallet/WalletBackupDialog.js +++ b/packages/yoroi-extension/app/components/wallet/WalletBackupDialog.js @@ -37,7 +37,6 @@ type Props = {| +onRestartBackup: void => void, +removeWord: void => void, +hasWord: boolean, - +classicTheme: boolean |}; @observer @@ -54,7 +53,7 @@ export default class WalletBackupDialog extends Component { isTermRecoveryAccepted, isValid, isSubmitting, onAcceptTermDevice, onAcceptTermRecovery, onAddWord, onClear, onFinishBackup, - onRestartBackup, recoveryPhraseSorted, classicTheme + onRestartBackup, recoveryPhraseSorted } = this.props; if (currentStep === 'privacyWarning') { @@ -66,7 +65,6 @@ export default class WalletBackupDialog extends Component { togglePrivacyNotice={togglePrivacyNotice} onCancelBackup={onCancelBackup} onContinue={onContinue} - classicTheme={classicTheme} /> ); } @@ -78,7 +76,6 @@ export default class WalletBackupDialog extends Component { onStartWalletBackup={onStartWalletBackup} onCancelBackup={onCancelBackup} onBack={onBack} - classicTheme={classicTheme} /> ); } @@ -101,7 +98,6 @@ export default class WalletBackupDialog extends Component { onFinishBackup={onFinishBackup} removeWord={removeWord} hasWord={hasWord} - classicTheme={classicTheme} /> ); } diff --git a/packages/yoroi-extension/app/components/wallet/WalletCreateDialog.js b/packages/yoroi-extension/app/components/wallet/WalletCreateDialog.js index 6e5b652d7d..98d9d89f6c 100644 --- a/packages/yoroi-extension/app/components/wallet/WalletCreateDialog.js +++ b/packages/yoroi-extension/app/components/wallet/WalletCreateDialog.js @@ -45,7 +45,6 @@ const messages = defineMessages({ type Props = {| +onSubmit: {| name: string, password: string |} => PossiblyAsync, +onCancel: void => void, - +classicTheme: boolean |}; type State = {| @@ -73,8 +72,7 @@ export default class WalletCreateDialog extends Component { fields: { walletName: { label: this.context.intl.formatMessage(messages.walletName), - placeholder: this.props.classicTheme ? - this.context.intl.formatMessage(messages.walletNameHint) : '', + placeholder: '', value: '', validators: [({ field }) => ( [ @@ -86,8 +84,7 @@ export default class WalletCreateDialog extends Component { walletPassword: { type: 'password', label: this.context.intl.formatMessage(globalMessages.walletPasswordLabel), - placeholder: this.props.classicTheme ? - this.context.intl.formatMessage(globalMessages.walletPasswordLabel) : '', + placeholder: '', value: '', validators: [({ field, form }) => { const repeatPasswordField = form.$('repeatPassword'); @@ -103,8 +100,7 @@ export default class WalletCreateDialog extends Component { repeatPassword: { type: 'password', label: this.context.intl.formatMessage(messages.repeatPasswordLabel), - placeholder: this.props.classicTheme ? - this.context.intl.formatMessage(messages.repeatPasswordFieldPlaceholder) : '', + placeholder: '', value: '', validators: [({ field, form }) => { const walletPassword = form.$('walletPassword').value; diff --git a/packages/yoroi-extension/app/components/wallet/WalletReceive.js b/packages/yoroi-extension/app/components/wallet/WalletReceive.js deleted file mode 100644 index c5989e4dc6..0000000000 --- a/packages/yoroi-extension/app/components/wallet/WalletReceive.js +++ /dev/null @@ -1,331 +0,0 @@ -// @flow -import { Component } from 'react'; -import type { Node } from 'react'; -import { observer } from 'mobx-react'; -import { defineMessages, intlShape, } from 'react-intl'; -import classnames from 'classnames'; -import { ReactComponent as VerifyIcon } from '../../assets/images/verify-icon.inline.svg'; -import { ReactComponent as GenerateURIIcon } from '../../assets/images/generate-uri.inline.svg'; -import styles from './WalletReceive.scss'; -import CopyableAddress from '../widgets/CopyableAddress'; -import RawHash from '../widgets/hashWrappers/RawHash'; -import ExplorableHashContainer from '../../containers/widgets/ExplorableHashContainer'; -import { SelectedExplorer } from '../../domain/SelectedExplorer'; -import type { AddressFilterKind, StandardAddress } from '../../types/AddressFilterTypes'; -import { addressFilter, AddressFilter, } from '../../types/AddressFilterTypes'; -import environment from '../../environment'; -import type { Notification } from '../../types/notification.types'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import { truncateAddressShort, splitAmount, truncateToken } from '../../utils/formatters'; -import type { UnitOfAccountSettingType } from '../../types/unitOfAccountType'; -import { ReactComponent as NoTransactionModernSvg } from '../../assets/images/transaction/no-transactions-yet.modern.inline.svg'; -import { ReactComponent as AddLabelIcon } from '../../assets/images/add-label.inline.svg'; -import { ReactComponent as EditLabelIcon } from '../../assets/images/edit.inline.svg'; -import { hiddenAmount } from '../../utils/strings'; -import type { - TokenEntry, TokenLookupKey, -} from '../../api/common/lib/MultiToken'; -import { getTokenName } from '../../stores/stateless/tokenHelpers'; -import type { TokenRow } from '../../api/ada/lib/storage/database/primitives/tables'; -import { CoreAddressTypes } from '../../api/ada/lib/storage/database/primitives/enums'; - -const messages = defineMessages({ - generatedAddressesSectionTitle: { - id: 'wallet.receive.page.generatedAddressesSectionTitle', - defaultMessage: '!!!Generated addresses', - }, - copyAddressLabel: { - id: 'wallet.receive.page.copyAddressLabel', - defaultMessage: '!!!Copy address', - }, - verifyAddressLabel: { - id: 'wallet.receive.page.verifyAddressLabel', - defaultMessage: '!!!Verify address', - }, - generateURLLabel: { - id: 'wallet.receive.page.generateURLLabel', - defaultMessage: '!!!Generate URL', - }, - outputAmountUTXO: { - id: 'wallet.receive.page.outputAmountUTXO', - defaultMessage: '!!!Balance (UTXO sum)', - }, - noResultsFoundLabel: { - id: 'wallet.receive.page.noResultsFoundLabel', - defaultMessage: '!!!No results found.', - }, - notFoundAnyAddresses: { - id: 'wallet.receive.page.notFoundAnyAddresses', - defaultMessage: '!!!No wallet addresses have been used yet.', - }, - label: { - id: 'wallet.receive.page.label', - defaultMessage: '!!!Label ', - }, -}); - -type Props = {| - +hierarchy: {| - path: Array, - filter: AddressFilterKind, - |}, - +header: Node, - +selectedExplorer: SelectedExplorer, - +walletAddresses: $ReadOnlyArray<$ReadOnly>, - +onCopyAddressTooltip: (string, string) => void, - +notification: ?Notification, - +onVerifyAddress: $ReadOnly => Promise, - +onGeneratePaymentURI: void | (string => void), - +shouldHideBalance: boolean, - +unitOfAccountSetting: UnitOfAccountSettingType, - +getTokenInfo: $ReadOnly> => $ReadOnly, - +addressBook: boolean, -|}; - -@observer -export default class WalletReceive extends Component { - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { - intl: intlShape.isRequired, - }; - - getAmount: TokenEntry => ?Node = tokenEntry => { - if (this.props.shouldHideBalance) { - return ({hiddenAmount}); - } - const tokenInfo = this.props.getTokenInfo(tokenEntry); - - const shiftedAmount = tokenEntry.amount - .shiftedBy(-tokenInfo.Metadata.numberOfDecimals); - - const [beforeDecimalRewards, afterDecimalRewards] = splitAmount( - shiftedAmount, - tokenInfo.Metadata.numberOfDecimals - ); - // recall: can't be negative in this situation - const adjustedBefore = '+' + beforeDecimalRewards; - - return ( - <> - {adjustedBefore} - {afterDecimalRewards} - {' '} - {truncateToken(getTokenName(tokenInfo))} - - ); - } - - getValueBlock: void => {| - header: ?Node, - body: $ReadOnly => ?Node, - |} = () => { - if (this.props.addressBook) { - return { header: undefined, body: () => undefined }; - } - const { intl } = this.context; - - const header = (

      {intl.formatMessage(messages.outputAmountUTXO)}

      ); - const body = address => ( -
      - {address.values != null - ? ( -
      - {this.getAmount(address.values.getDefaultEntry())} -
      - ) - : '-' - } -
      - ); - return { header, body }; - } - - getLabelBlock: void => {| - header: ?Node, - body: $ReadOnly => ?Node, - |} = () => { - if (environment.isProduction()) { - return { header: undefined, body: () => undefined }; - } - const { intl } = this.context; - - const header = (

      {intl.formatMessage(messages.label)}

      ); - const body = address => ( -
      - { - address.label != null ? -
      - - {address.label} -
      - : -
      - -
      - } -
      - ); - return { header, body }; - } - - getHierarchy: void => Node = () => { - const { intl } = this.context; - const hierarchy = this.props.hierarchy.path.join(' > '); - - const filter = this.props.hierarchy.filter === AddressFilter.None - ? null - : ( - - [{intl.formatMessage(addressFilter[this.props.hierarchy.filter])}] - - ); - return ( -
      - {hierarchy} {filter} -
      - ); - }; - - render(): Node { - const { - walletAddresses, - onVerifyAddress, onGeneratePaymentURI, - onCopyAddressTooltip, notification, - } = this.props; - const { intl } = this.context; - const valueBlock = this.getValueBlock(); - const labelBlock = this.getLabelBlock(); - const walletReceiveContent = ( -
      - {/* Header Addresses */} -
      -

      {intl.formatMessage(messages.generatedAddressesSectionTitle)}

      - {labelBlock.header} - {valueBlock.header} - {onGeneratePaymentURI != null && ( -

      {intl.formatMessage(messages.generateURLLabel)}

      - )} -

      {intl.formatMessage(messages.verifyAddressLabel)}

      -
      - - {/* Content Addresses */} - {walletAddresses.map((address, index) => { - const addressClasses = classnames([ - 'generatedAddress-' + (index + 1), - styles.walletAddress, - styles.generatedAddressesGrid, - address.isUsed === true ? styles.usedWalletAddress : null, - ]); - const notificationElementId = `address-${index}-copyNotification`; - return ( -
      - {/* Address Id */} - onCopyAddressTooltip(address.address, notificationElementId) - } - notification={notification} - placementTooltip="bottom-start" - > - - - - {truncateAddressShort(address.address)} - - - - - {/* Label for Address Book */} - {labelBlock.body(address)} - {/* Address balance block start */} - {valueBlock.body(address)} - {/* Generate payment URL for Address action */} - {onGeneratePaymentURI != null && ( -
      - -
      - )} - {/* Verify Address action */} -
      - -
      - {/* Action block end */} -
      - ); - })} -
      - ); - - if (walletAddresses === undefined || walletAddresses.length === 0) { - return ( -
      - {this.getHierarchy()} - {this.props.header} -
      - -

      {intl.formatMessage(messages.noResultsFoundLabel)}

      -
      {intl.formatMessage(messages.notFoundAnyAddresses)}
      -
      -
      - ); - } - - return ( -
      - {this.getHierarchy()} - {this.props.header} - {walletReceiveContent} -
      - ); - } -} diff --git a/packages/yoroi-extension/app/components/wallet/WalletReceive.scss b/packages/yoroi-extension/app/components/wallet/WalletReceive.scss deleted file mode 100644 index e0f574602a..0000000000 --- a/packages/yoroi-extension/app/components/wallet/WalletReceive.scss +++ /dev/null @@ -1,204 +0,0 @@ -.component { - flex: 1; - overflow-x: hidden; - overflow-y: overlay; - padding: 40px 24px; - - .hierarchy { - margin-bottom: 24px; - font-weight: 400; - font-size: 20px; - padding-bottom: 5px; - border-bottom: 1px solid var(--yoroi-palette-gray-200); - - .filter { - font-size: 14px; - margin-left: 14px; - } - } - - &::-webkit-scrollbar-button { - height: 7px; - display: block; - } - - .notFound { - padding-top: 2rem; - text-align: center; - color: var(--yoroi-palette-gray-600); - svg { - max-width: 140px; - max-height: 140px; - } - h1 { - margin-bottom: 20px; - font-size: 1.2rem; - font-weight: 500; - } - p { - margin: 1rem 0; - font-size: 0.9rem; - } - } - - .generatedAddresses { - color: var(--yoroi-palette-gray-900); - font-weight: 400; - font-size: 14px; - line-height: 22px; - - .generatedAddressesGrid { - display: flex; - text-align: right; - align-items: center; - - & > *:first-child { - text-align: left; - flex: 1.5; - } - & > * { - flex: 1; - margin-left: 10px; - } - } - h2 { - font-size: 14px; - font-weight: 400; - margin-bottom: 10px; - line-height: 22px; - font-weight: lighter; - color: var(--yoroi-palette-gray-600); - } - .labelHeader { - text-align: left; - } - .walletAddress { - display: flex; - padding: 8.5px 0; - word-break: break-all; - - & + .walletAddress { - border-top: 1px solid var(--yoroi-palette-gray-200); - } - - .addressActions { - .addressActionItemBlock { - cursor: pointer; - letter-spacing: 0.5px; - text-align: right; - line-height: 20px; - vertical-align: top; - white-space: nowrap; - - * { - vertical-align: middle; - } - - span { - color: var(--yoroi-palette-gray-800); - font-weight: 400; - font-size: 14px; - margin-left: 6px; - } - } - - .verifyActionBlock, - .generateURLActionBlock { - button { - cursor: pointer; - } - } - - .generateURLActionBlock { - margin-left: unset; - } - } - .labelAddress { - font-weight: 400; - text-align: left; - font-size: 12px; - display: flex; - align-items: center; - .labelText { - position: relative; - - background: var(--yoroi-palette-gray-200); - color: var(--yoroi-palette-gray-600); - padding: 2px 6px; - height: 27px; - &:after { - content: ' '; - display: block; - width: 0; - height: 0; - border-top: 13px solid transparent; - border-bottom: 14px solid transparent; - border-left: 14px solid var(--yoroi-palette-gray-200); - position: absolute; - top: 50%; - margin-top: -14px; - right: -14px; - z-index: 2; - } - } - button { - margin: 0; - margin-right: 8px; - } - } - } - } -} - -:global(.YoroiModern), :global(.YoroiRevamp) { - .component { - .generatedAddresses { - .walletAddress { - padding: 12px 0; - } - } - } -} - -.addressHash { - font-size: 14px; - line-height: 22px; - font-family: 'RobotoMono'; - font-weight: 400; - color: var(--yoroi-palette-gray-900); -} - -.addressHashUsed { - color: var(--yoroi-palette-gray-600); -} - -.verifyIcon, -.copyIcon, -.generateURIIcon, -.labelAddressIcon { - cursor: pointer; - object-fit: contain; - display: inline-flex; - margin-left: 5px; - width: 32px; - height: 32px; - border-radius: 50%; - transition: background-color 0.3s; - & > svg { - display: block; - margin: auto; - height: 20px; - width: 20px; - path { - fill: var(--yoroi-palette-gray-900); - } - } - &:hover { - background-color: var(--yoroi-palette-gray-50); - } -} -.generateURIIcon { - & > svg path:first-child { - fill: unset; - } -} diff --git a/packages/yoroi-extension/app/components/wallet/WalletRestoreDialog.js b/packages/yoroi-extension/app/components/wallet/WalletRestoreDialog.js index ce3c365ccc..37aa12272b 100644 --- a/packages/yoroi-extension/app/components/wallet/WalletRestoreDialog.js +++ b/packages/yoroi-extension/app/components/wallet/WalletRestoreDialog.js @@ -66,7 +66,6 @@ type Props = {| +error?: ?LocalizableError, +validWords: Array, +isVerificationMode?: boolean, - +classicTheme: boolean, +initValues?: ?WalletRestoreDialogValues, +introMessage?: string, |}; @@ -105,8 +104,7 @@ export default class WalletRestoreDialog extends Component { fields: { walletName: this.props.isVerificationMode === true ? undefined : { label: this.context.intl.formatMessage(messages.walletNameInputLabel), - placeholder: this.props.classicTheme ? - this.context.intl.formatMessage(messages.walletNameInputHint) : '', + placeholder: '', value: (this.props.initValues && this.props.initValues.walletName) || '', validators: [({ field }) => ( [ @@ -117,8 +115,7 @@ export default class WalletRestoreDialog extends Component { }, recoveryPhrase: { label: this.context.intl.formatMessage(globalMessages.recoveryPhraseInputLabel), - placeholder: this.props.classicTheme ? - this.context.intl.formatMessage(globalMessages.recoveryPhraseInputHint) : '', + placeholder: '', value: this.getInitRecoveryPhrase(), validators: [({ field }) => { const value = join(field.value, ' '); @@ -140,8 +137,7 @@ export default class WalletRestoreDialog extends Component { walletPassword: this.props.isVerificationMode === true ? undefined : { type: 'password', label: this.context.intl.formatMessage(globalMessages.newPasswordLabel), - placeholder: this.props.classicTheme ? - this.context.intl.formatMessage(globalMessages.newPasswordFieldPlaceholder) : '', + placeholder: '', value: (this.props.initValues && this.props.initValues.walletPassword) || '', validators: [({ field, form }) => { const repeatPasswordField = form.$('repeatPassword'); @@ -157,8 +153,7 @@ export default class WalletRestoreDialog extends Component { repeatPassword: this.props.isVerificationMode === true ? undefined : { type: 'password', label: this.context.intl.formatMessage(globalMessages.repeatPasswordLabel), - placeholder: this.props.classicTheme ? - this.context.intl.formatMessage(globalMessages.repeatPasswordFieldPlaceholder) : '', + placeholder: '', value: (this.props.initValues && this.props.initValues.walletPassword) || '', validators: [({ field, form }) => { const walletPassword = form.$('walletPassword').value; diff --git a/packages/yoroi-extension/app/components/wallet/add/AddAnotherWallet.js b/packages/yoroi-extension/app/components/wallet/add/AddAnotherWallet.js deleted file mode 100644 index eaf6bfddb3..0000000000 --- a/packages/yoroi-extension/app/components/wallet/add/AddAnotherWallet.js +++ /dev/null @@ -1,55 +0,0 @@ -// @flow -import { Component } from 'react'; -import type { Node } from 'react'; -import { observer } from 'mobx-react'; -import classnames from 'classnames'; - -import MainCards from './MainCards'; -import { ReactComponent as LogoYoroiIcon } from '../../../assets/images/yoroi-logo-white.inline.svg'; -import { ReactComponent as NightlyLogo } from '../../../assets/images/yoroi-logo-nightly.inline.svg'; - -import styles from './AddAnotherWallet.scss'; - -import environment from '../../../environment'; - -type Props = {| - +onCreate: void => void, - +onRestore: void => void, - +onHardwareConnect: void => void, -|}; - -@observer -export default class AddAnotherWallet extends Component { - - getLogo: void => string = () => { - if (environment.isNightly()) { - return NightlyLogo; - } - return LogoYoroiIcon; - } - - render(): Node { - const LogoIcon = this.getLogo(); - const iconClass = classnames( - styles.heroLogo, - ); - return ( -
      -
      -
      -
      - -
      -
      - -
      -
      -
      -
      - ); - } -} diff --git a/packages/yoroi-extension/app/components/wallet/add/AddAnotherWallet.scss b/packages/yoroi-extension/app/components/wallet/add/AddAnotherWallet.scss deleted file mode 100644 index d303064bca..0000000000 --- a/packages/yoroi-extension/app/components/wallet/add/AddAnotherWallet.scss +++ /dev/null @@ -1,32 +0,0 @@ -.component { - height: 100%; - overflow: auto; - - .hero { - min-height: 100%; - max-width: 1366px; - margin: 0 auto; - padding: 20px 15px; - display: flex; - align-items: center; - } - - .heroInner { - display: flex; - position: relative; - z-index: 1; - justify-content: space-between; - width: 100%; - - flex-direction: column; - align-items: center; - } - - .heroLogo { - display: block; - position: relative; - top: 50%; - margin: auto auto; - margin-bottom: 24px; - } -} diff --git a/packages/yoroi-extension/app/components/wallet/add/MainCards.js b/packages/yoroi-extension/app/components/wallet/add/MainCards.js deleted file mode 100644 index 9c753d22e9..0000000000 --- a/packages/yoroi-extension/app/components/wallet/add/MainCards.js +++ /dev/null @@ -1,125 +0,0 @@ -// @flow -import { Component } from 'react'; -import type { Node } from 'react'; -import { observer } from 'mobx-react'; -import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl'; -import classnames from 'classnames'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import globalMessages from '../../../i18n/global-messages'; - -import CustomTooltip from '../../widgets/CustomTooltip'; - -import styles from './MainCards.scss'; - -const messages = defineMessages({ - connectToHWTitle: { - id: 'wallet.add.page.hw.title', - defaultMessage: '!!!Connect to hardware wallet', - }, - connectToHWTooltip: { - id: 'wallet.add.page.hw.tooltip', - defaultMessage: '!!!Create or restore a Yoroi wallet
      using a Ledger or Trezor hardware wallet.', - }, - createTooltip: { - id: 'wallet.add.page.create.tooltip', - defaultMessage: '!!!Generate a new 15-word recovery phrase
      and create a Yoroi wallet.', - }, - restoreTitle: { - id: 'wallet.add.page.restore.title', - defaultMessage: '!!!Restore wallet', - }, - restoreTooltip: { - id: 'wallet.add.page.restore.tooltip', - defaultMessage: '!!!Enter a 15-word recovery phrase
      to restore an already-existing Yoroi wallet,
      or import an existing Yoroi paper wallet.', - }, - -}); - -type Props = {| - +onCreate: void => void, - +onRestore: void => void, - +onHardwareConnect: void => void, -|}; - -@observer -export default class MainCards extends Component { - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { - intl: intlShape.isRequired, - }; - - render(): Node { - const { intl } = this.context; - const { - onCreate, - onRestore, - onHardwareConnect, - } = this.props; - - return ( -
      - {/* Connect to hardware wallet */} - - {/* Create wallet */} - - {/* Restore wallet */} - -
      - ); - } -} diff --git a/packages/yoroi-extension/app/components/wallet/add/MainCards.scss b/packages/yoroi-extension/app/components/wallet/add/MainCards.scss deleted file mode 100644 index 9cdcf985f9..0000000000 --- a/packages/yoroi-extension/app/components/wallet/add/MainCards.scss +++ /dev/null @@ -1,64 +0,0 @@ -@import '../../mixins/card-mixin.scss'; - -.heroCardsList { - display: flex; -} - -.heroCardsItem { - @include card-mixin; - - .heroCardsItemBg { - flex: 1 0 auto; - background-repeat: no-repeat; - background-position: center center; - background-size: contain; - } -} - -:global(.YoroiClassic) { - .heroCardsItemBg { - &.bgConnectHW { - background-image: url(../../../assets/images/add-wallet/connect-hw-classic.inline.svg); - } - - &.bgCreateWallet { - background-image: url(../../../assets/images/add-wallet/create-wallet-classic.inline.svg); - } - - &.bgRestoreWallet { - background-image: url(../../../assets/images/add-wallet/restore-wallet-classic.inline.svg); - } - } -} - -:global(.YoroiRevamp) { - .heroCardsItemBg { - &.bgConnectHW { - background-image: url(../../../assets/images/add-wallet/connect-hw-modern.inline.svg); - } - - &.bgCreateWallet { - background-image: url(../../../assets/images/add-wallet/create-wallet-modern.inline.svg); - } - - &.bgRestoreWallet { - background-image: url(../../../assets/images/add-wallet/restore-wallet-modern.inline.svg); - } - } -} - -:global(.YoroiModern), :global(.YoroiRevamp) { - .heroCardsItemBg { - &.bgConnectHW { - background-image: url(../../../assets/images/add-wallet/connect-hw-modern.inline.svg); - } - - &.bgCreateWallet { - background-image: url(../../../assets/images/add-wallet/create-wallet-modern.inline.svg); - } - - &.bgRestoreWallet { - background-image: url(../../../assets/images/add-wallet/restore-wallet-modern.inline.svg); - } - } -} diff --git a/packages/yoroi-extension/app/components/wallet/backup-recovery/MnemonicWord.js b/packages/yoroi-extension/app/components/wallet/backup-recovery/MnemonicWord.js index 22958d060f..07ad75c01e 100644 --- a/packages/yoroi-extension/app/components/wallet/backup-recovery/MnemonicWord.js +++ b/packages/yoroi-extension/app/components/wallet/backup-recovery/MnemonicWord.js @@ -11,13 +11,12 @@ type Props = {| +index: number, +isActive: boolean, +onClick: {| index: number, word: string |} => void, - +classicTheme: boolean |}; @observer export default class MnemonicWord extends Component { render(): Node { - const { word, index, isActive, onClick, classicTheme } = this.props; + const { word, index, isActive, onClick } = this.props; const handleClick = onClick.bind(null, { word, index }); const componentClasses = classnames([ @@ -26,7 +25,7 @@ export default class MnemonicWord extends Component { return (
    ); break; case StepState.PROCESS: backButton = null; middleBlock = (
    - -
    - ); + +
    ); break; case StepState.ERROR: backButton = ; middleBlock = (
    - {classicTheme ? : } -
    - ); + { + } +
    ); break; default: Logger.error('ledger::ConnectDialog::render: something unexpected happened'); @@ -143,10 +133,12 @@ export default class ConnectDialog extends Component { backButton={backButton} closeButton={} > - + {introBlock} {middleBlock} - {error && } + {error && + + } ); diff --git a/packages/yoroi-extension/app/components/wallet/hwConnect/ledger/SaveDialog.js b/packages/yoroi-extension/app/components/wallet/hwConnect/ledger/SaveDialog.js index 122c734ba6..7756ce2dab 100644 --- a/packages/yoroi-extension/app/components/wallet/hwConnect/ledger/SaveDialog.js +++ b/packages/yoroi-extension/app/components/wallet/hwConnect/ledger/SaveDialog.js @@ -55,7 +55,6 @@ type Props = {| +onExternalLinkClick: MouseEvent => void, +submit: string => PossiblyAsync, +cancel: void => void, - +classicTheme: boolean, |}; @observer @@ -76,8 +75,7 @@ export default class SaveDialog extends Component { fields: { walletName: { label: intl.formatMessage(globalMessages.hwConnectDialogSaveWalletNameInputLabel), - placeholder: this.props.classicTheme ? - intl.formatMessage(globalMessages.hwConnectDialogSaveWalletNameInputPH) : '', + placeholder: '', value: defaultWalletName, validators: [({ field }) => ( [ @@ -109,7 +107,6 @@ export default class SaveDialog extends Component { error, onExternalLinkClick, cancel, - classicTheme } = this.props; const walletNameFieldClasses = classnames([ @@ -142,28 +139,19 @@ export default class SaveDialog extends Component { case StepState.LOAD: middleBlock = (
    - {classicTheme - ? - : - } +
    ); break; case StepState.PROCESS: middleBlock = (
    - {classicTheme - ? - : - } +
    ); break; case StepState.ERROR: middleBlock = (
    - {classicTheme - ? - : - } +
    ); break; default: @@ -193,11 +181,11 @@ export default class SaveDialog extends Component { onClose={cancel} closeButton={} > - + {walletNameBlock} {middleBlock} {error && - + } ); diff --git a/packages/yoroi-extension/app/components/wallet/hwConnect/trezor/CheckDialog.js b/packages/yoroi-extension/app/components/wallet/hwConnect/trezor/CheckDialog.js index 6235ba4141..ed63617507 100644 --- a/packages/yoroi-extension/app/components/wallet/hwConnect/trezor/CheckDialog.js +++ b/packages/yoroi-extension/app/components/wallet/hwConnect/trezor/CheckDialog.js @@ -18,7 +18,6 @@ import HWErrorBlock from '../common/HWErrorBlock'; import { ReactComponent as ExternalLinkSVG } from '../../../../assets/images/link-external.inline.svg'; import { ReactComponent as AboutPrerequisiteIconSVG } from '../../../../assets/images/hardware-wallet/check-prerequisite-header-icon.inline.svg'; -import { ReactComponent as AboutPrerequisiteTrezorSVG } from '../../../../assets/images/hardware-wallet/trezor/check.inline.svg'; import { ReactComponent as AboutTrezorSvg } from '../../../../assets/images/hardware-wallet/trezor/check-modern.inline.svg'; import { ProgressInfo } from '../../../../types/HWConnectStoreTypes'; @@ -61,7 +60,6 @@ type Props = {| +submit: void => void, +cancel: void => void, +onBack: void => void, - +classicTheme: boolean, |}; const IconWrapper = styled(Box)(({ theme }) => ({ @@ -80,11 +78,11 @@ export default class CheckDialog extends Component { render(): Node { const { intl } = this.context; - const { progressInfo, isActionProcessing, error, onExternalLinkClick, submit, cancel, classicTheme } = this.props; + const { progressInfo, isActionProcessing, error, onExternalLinkClick, submit, cancel } = this.props; const middleBlock = (
    - {!classicTheme && } +
    @@ -115,12 +113,6 @@ export default class CheckDialog extends Component { • {intl.formatMessage(messages.aboutPrerequisite5)}
    - - {classicTheme && ( -
    - -
    - )}
    ); @@ -143,9 +135,11 @@ export default class CheckDialog extends Component { backButton={} onClose={cancel} > - + {middleBlock} - {error && } + {error && + + } ); diff --git a/packages/yoroi-extension/app/components/wallet/hwConnect/trezor/ConnectDialog.js b/packages/yoroi-extension/app/components/wallet/hwConnect/trezor/ConnectDialog.js index 66da73effb..6e64000e66 100644 --- a/packages/yoroi-extension/app/components/wallet/hwConnect/trezor/ConnectDialog.js +++ b/packages/yoroi-extension/app/components/wallet/hwConnect/trezor/ConnectDialog.js @@ -19,9 +19,6 @@ import HWErrorBlock from '../common/HWErrorBlock'; import connectLoadImage from '../../../../assets/images/hardware-wallet/trezor/connect-load-modern.inline.gif'; import { ReactComponent as ConnectErrorImage } from '../../../../assets/images/hardware-wallet/trezor/connect-error-modern.inline.svg'; -import connectLoadGIF from '../../../../assets/images/hardware-wallet/trezor/connect-load.gif'; -import { ReactComponent as ConnectErrorSVG } from '../../../../assets/images/hardware-wallet/trezor/connect-error.inline.svg'; - import { ProgressInfo } from '../../../../types/HWConnectStoreTypes'; import { StepState } from '../../../widgets/ProgressSteps'; @@ -32,8 +29,6 @@ import headerMixin from '../../../mixins/HeaderBlock.scss'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import { Typography } from '@mui/material'; -const connectStartGIF = connectLoadGIF; - const messages = defineMessages({ connectIntroTextLine1: { id: 'wallet.connect.trezor.dialog.step.connect.introText.line.1', @@ -53,7 +48,6 @@ type Props = {| +goBack: void => void, +submit: void => PossiblyAsync, +cancel: void => void, - +classicTheme: boolean, |}; @observer @@ -64,18 +58,9 @@ export default class ConnectDialog extends Component { render(): Node { const { intl } = this.context; - const { progressInfo, isActionProcessing, error, onExternalLinkClick, goBack, submit, cancel, classicTheme } = this.props; + const { progressInfo, isActionProcessing, error, onExternalLinkClick, goBack, submit, cancel } = this.props; - const introBlock = classicTheme ? ( -
    - {intl.formatMessage(messages.connectIntroTextLine1)} -
    - {intl.formatMessage(messages.connectIntroTextLine2)} -
    - {intl.formatMessage(globalMessages.hwConnectDialogConnectIntroTextLine3)} -
    -
    - ) : ( + const introBlock = (
    {intl.formatMessage(messages.connectIntroTextLine1) + ' '} @@ -93,7 +78,7 @@ export default class ConnectDialog extends Component { backButton = ; middleBlock = (
    - +
    ); break; @@ -101,7 +86,7 @@ export default class ConnectDialog extends Component { backButton = null; middleBlock = (
    - +
    ); break; @@ -109,7 +94,7 @@ export default class ConnectDialog extends Component { backButton = ; middleBlock = (
    - {classicTheme ? : } +
    ); break; @@ -137,10 +122,12 @@ export default class ConnectDialog extends Component { backButton={backButton} closeButton={} > - + {introBlock} {middleBlock} - {error && } + {error && + + } ); diff --git a/packages/yoroi-extension/app/components/wallet/hwConnect/trezor/SaveDialog.js b/packages/yoroi-extension/app/components/wallet/hwConnect/trezor/SaveDialog.js index 8e41d365c0..1a3d78bbd5 100644 --- a/packages/yoroi-extension/app/components/wallet/hwConnect/trezor/SaveDialog.js +++ b/packages/yoroi-extension/app/components/wallet/hwConnect/trezor/SaveDialog.js @@ -21,9 +21,6 @@ import { ReactComponent as InfoIconSVG } from '../../../../assets/images/info-i import { ReactComponent as SaveLoadImage } from '../../../../assets/images/hardware-wallet/trezor/save-load-modern.inline.svg'; import { ReactComponent as SaveErrorImage } from '../../../../assets/images/hardware-wallet/trezor/save-error-modern.inline.svg'; -import { ReactComponent as SaveLoadSVG } from '../../../../assets/images/hardware-wallet/trezor/save-load.inline.svg'; -import { ReactComponent as SaveErrorSVG } from '../../../../assets/images/hardware-wallet/trezor/save-error.inline.svg'; - import ReactToolboxMobxForm from '../../../../utils/ReactToolboxMobxForm'; import vjf from 'mobx-react-form/lib/validators/VJF'; import { isValidWalletName } from '../../../../utils/validations'; @@ -38,8 +35,6 @@ import headerMixin from '../../../mixins/HeaderBlock.scss'; import config from '../../../../config'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -const SaveStartSVG = SaveLoadSVG; - const messages = defineMessages({ saveWalletNameInputBottomInfo: { id: 'wallet.connect.trezor.dialog.step.save.walletName.info', @@ -55,7 +50,6 @@ type Props = {| +onExternalLinkClick: MouseEvent => void, +submit: string => PossiblyAsync, +cancel: void => void, - +classicTheme: boolean |}; @observer @@ -75,8 +69,7 @@ export default class SaveDialog extends Component { fields: { walletName: { label: intl.formatMessage(globalMessages.hwConnectDialogSaveWalletNameInputLabel), - placeholder: this.props.classicTheme ? - intl.formatMessage(globalMessages.hwConnectDialogSaveWalletNameInputPH) : '', + placeholder: '', value: defaultWalletName, validators: [({ field }) => ( [ @@ -108,7 +101,6 @@ export default class SaveDialog extends Component { error, onExternalLinkClick, cancel, - classicTheme } = this.props; const walletNameFieldClasses = classnames([ @@ -141,28 +133,19 @@ export default class SaveDialog extends Component { case StepState.LOAD: middleBlock = (
    - {classicTheme - ? - : - } +
    ); break; case StepState.PROCESS: middleBlock = (
    - {classicTheme - ? - : - } +
    ); break; case StepState.ERROR: middleBlock = (
    - {classicTheme - ? - : - } +
    ); break; default: @@ -192,11 +175,11 @@ export default class SaveDialog extends Component { onClose={cancel} closeButton={} > - + {walletNameBlock} {middleBlock} {error && - + } ); diff --git a/packages/yoroi-extension/app/components/wallet/layouts/FullscreenMessage.js b/packages/yoroi-extension/app/components/wallet/layouts/FullscreenMessage.js index e52ff368d2..0aaa251e42 100644 --- a/packages/yoroi-extension/app/components/wallet/layouts/FullscreenMessage.js +++ b/packages/yoroi-extension/app/components/wallet/layouts/FullscreenMessage.js @@ -1,12 +1,9 @@ // @flow -import type { Node, ComponentType } from 'react'; +import type { Node } from 'react'; import { Component } from 'react'; -import styles from './FullscreenMessage.scss'; import VerticallyCenteredLayout from '../../layout/VerticallyCenteredLayout'; import FullscreenLayout from '../../layout/FullscreenLayout'; import { observer } from 'mobx-react'; -import { withLayout } from '../../../styles/context/layout'; -import type { InjectedLayoutProps } from '../../../styles/context/layout'; import { Box, Stack, Typography } from '@mui/material'; type Props = {| @@ -16,26 +13,14 @@ type Props = {| |}; @observer -class FullscreenMessage extends Component { +export default class FullscreenMessage extends Component { static defaultProps: {| image: void |} = { image: undefined, }; render(): Node { - const { title, subtitle, image, renderLayoutComponent } = this.props; - const classicLayout = ( - - -
    -
    {title}
    -
    -
    {subtitle}
    -
    -     -     - ); - - const revampLayout = ( + const { title, subtitle, image } = this.props; + return ( { ); - - return renderLayoutComponent({ - CLASSIC: classicLayout, - REVAMP: revampLayout, - }); } } - -export default (withLayout(FullscreenMessage): ComponentType); diff --git a/packages/yoroi-extension/app/components/wallet/layouts/FullscreenMessage.scss b/packages/yoroi-extension/app/components/wallet/layouts/FullscreenMessage.scss deleted file mode 100644 index d070260db8..0000000000 --- a/packages/yoroi-extension/app/components/wallet/layouts/FullscreenMessage.scss +++ /dev/null @@ -1,15 +0,0 @@ -.component { - text-align: center; - line-height: 22px; - color: var(--yoroi-palette-gray-900); - - .title { - font-weight: 500; - font-size: 18px; - } - - .subtitle { - font-weight: 400; - font-size: 14px; - } -} diff --git a/packages/yoroi-extension/app/components/wallet/layouts/ReceiveWithNavigation.js b/packages/yoroi-extension/app/components/wallet/layouts/ReceiveWithNavigation.js index 03e80220e9..bfd7b53213 100644 --- a/packages/yoroi-extension/app/components/wallet/layouts/ReceiveWithNavigation.js +++ b/packages/yoroi-extension/app/components/wallet/layouts/ReceiveWithNavigation.js @@ -1,11 +1,8 @@ // @flow -import type { Node, ComponentType } from 'react'; +import type { ComponentType, Node } from 'react'; import { observer } from 'mobx-react'; -import { useLayout } from '../../../styles/context/layout'; -import type { LayoutComponentMap } from '../../../styles/context/layout'; -import ReceiveNavigation from '../navigation/ReceiveNavigation'; import { Box } from '@mui/material'; -import type { AddressTypeName, AddressFilterKind } from '../../../types/AddressFilterTypes'; +import type { AddressFilterKind, AddressTypeName } from '../../../types/AddressFilterTypes'; import ReceiveNavigationRevamp from '../navigation/ReceiveNavigationRevamp'; export type Props = {| @@ -21,31 +18,8 @@ export type Props = {| ... }>, |}; -type InjectedProps = {| - +renderLayoutComponent: LayoutComponentMap => Node, -|}; -function ReceiveWithNavigation({ addressStores, setFilter, activeFilter, children }: Props & InjectedProps): Node { - const { renderLayoutComponent } = useLayout(); - - const classicReceiveNav = ( - - - - - - {children} - - - ); - - const revampReceiveNav = ( +function ReceiveWithNavigation({ addressStores, setFilter, activeFilter, children }: Props): Node { + return ( - - + + + + + {children} - {children} ); - return renderLayoutComponent({ CLASSIC: classicReceiveNav, REVAMP: revampReceiveNav }); } export default (observer(ReceiveWithNavigation): ComponentType); diff --git a/packages/yoroi-extension/app/components/wallet/layouts/WalletWithNavigation.js b/packages/yoroi-extension/app/components/wallet/layouts/WalletWithNavigation.js deleted file mode 100644 index 53dfb3676f..0000000000 --- a/packages/yoroi-extension/app/components/wallet/layouts/WalletWithNavigation.js +++ /dev/null @@ -1,35 +0,0 @@ -// @flow -import { Component } from 'react'; -import type { Node } from 'react'; -import { observer } from 'mobx-react'; -import WalletNavigation from '../navigation/WalletNavigation'; -import type { Category } from '../navigation/WalletNavigation'; -import styles from './WalletWithNavigation.scss'; - -type Props = {| - +children?: Node, - +categories: Array, -|}; - -@observer -export default class WalletWithNavigation extends Component { - static defaultProps: {|children: void|} = { - children: undefined - }; - - render(): Node { - const { children, } = this.props; - return ( -
    -
    - -
    -
    - {children} -
    -
    - ); - } -} diff --git a/packages/yoroi-extension/app/components/wallet/layouts/WalletWithNavigation.scss b/packages/yoroi-extension/app/components/wallet/layouts/WalletWithNavigation.scss deleted file mode 100644 index 4dd7f279f6..0000000000 --- a/packages/yoroi-extension/app/components/wallet/layouts/WalletWithNavigation.scss +++ /dev/null @@ -1,22 +0,0 @@ -.component { - height: 100%; - display: flex; - flex-direction: column; -} - -.navigation { - height: var(--yoroi-navigation-tab-height); - flex-shrink: 0; -} - -.page { - height: 100%; - min-height: 200px; - overflow: auto; -} - -:global(.YoroiModern) { - .navigation { - height: var(--yoroi-navigation-tab-height); - } -} diff --git a/packages/yoroi-extension/app/components/wallet/memos/AddMemoDialog.js b/packages/yoroi-extension/app/components/wallet/memos/AddMemoDialog.js index 42dd46a31d..7f9f96f3a2 100644 --- a/packages/yoroi-extension/app/components/wallet/memos/AddMemoDialog.js +++ b/packages/yoroi-extension/app/components/wallet/memos/AddMemoDialog.js @@ -35,7 +35,6 @@ type Props = {| error: ?LocalizableError, onCancel: void => void, onSubmit: TxMemoTablePreInsert => Promise, - classicTheme: boolean, |}; type State = {| @@ -60,8 +59,7 @@ export default class AddMemoDialog extends Component { fields: { memoContent: { label: this.context.intl.formatMessage(memoMessages.memoLabel), - placeholder: this.props.classicTheme ? - this.context.intl.formatMessage(memoMessages.optionalMemo) : '', + placeholder: '', value: '', validators: [({ field }) => ( [ diff --git a/packages/yoroi-extension/app/components/wallet/memos/EditMemoDialog.js b/packages/yoroi-extension/app/components/wallet/memos/EditMemoDialog.js index 43662c5487..519ac0e262 100644 --- a/packages/yoroi-extension/app/components/wallet/memos/EditMemoDialog.js +++ b/packages/yoroi-extension/app/components/wallet/memos/EditMemoDialog.js @@ -31,7 +31,6 @@ type Props = {| onCancel: void => void, onSubmit: TxMemoTableUpsert => Promise, onClickDelete: void => void, - classicTheme: boolean, |}; type State = {| @@ -57,9 +56,7 @@ export default class EditMemoDialog extends Component { memoContent: { type: 'memo', label: this.context.intl.formatMessage(memoMessages.memoLabel), - placeholder: this.props.classicTheme - ? this.context.intl.formatMessage(memoMessages.memoLabel) - : '', + placeholder: '', value: this.props.existingMemo.Content, validators: [({ field }) => ( [ diff --git a/packages/yoroi-extension/app/components/wallet/navigation/ReceiveNavButton.js b/packages/yoroi-extension/app/components/wallet/navigation/ReceiveNavButton.js deleted file mode 100644 index 271922bfae..0000000000 --- a/packages/yoroi-extension/app/components/wallet/navigation/ReceiveNavButton.js +++ /dev/null @@ -1,72 +0,0 @@ -// @flow -import { Component } from 'react'; -import type { Node } from 'react'; -import { observer } from 'mobx-react'; -import classnames from 'classnames'; -import styles from './ReceiveNavButton.scss'; - -type Props = {| - +label: string, - +isActive: boolean, - +onClick: void => void, - +className?: string, - +icon?: string, - +isToplevel?: boolean, - +tooltip?: Node, -|}; - -@observer -export default class ReceiveNavButton extends Component { - static defaultProps: {| className: void, icon: void, isToplevel:void, tooltip: void |} = { - className: undefined, - icon: undefined, - isToplevel: undefined, - tooltip: undefined, - }; - - renderButton: void => Node = () => { - const buttonClass = classnames([ - styles.button, - this.props.isToplevel === true - ? styles.topLevel - : styles.notTopLevel, - ]); - - if (this.props.tooltip == null) { - return ( - - ); - } - return ( - - ); - } - - render(): Node { - const componentClasses = classnames([ - this.props.className, - styles.wrapper, - this.props.isActive && styles.active, - ]); - - const IconComponent = this.props.icon; - - return ( -
    - {this.renderButton()} - {IconComponent != null && -
    - -
    - } -
    - ); - } -} diff --git a/packages/yoroi-extension/app/components/wallet/navigation/ReceiveNavButton.scss b/packages/yoroi-extension/app/components/wallet/navigation/ReceiveNavButton.scss deleted file mode 100644 index 8beefdfa11..0000000000 --- a/packages/yoroi-extension/app/components/wallet/navigation/ReceiveNavButton.scss +++ /dev/null @@ -1,62 +0,0 @@ -// ========= LAYOUT ========= - -.wrapper { - display: flex; - font-weight: 300; - color: var(--yoroi-palette-gray-600); - font-size: 1rem; - &:hover { - cursor: pointer; - background: var(--yoroi-palette-common-white); - } -} - -.button { - display: inline-block; - padding: 7px; - border-bottom: 3px solid transparent; - width: 100%; - text-align: left; - color: var(--yoroi-palette-gray-600); -} - -.active { - background: var(--yoroi-palette-common-white); - color: var(--yoroi-palette-gray-600); - .label { - font-weight: 500; - } - .notTopLevel { - color: var(--yoroi-palette-gray-600); - } - .topLevel { - color: var(--yoroi-palette-secondary-300); - } -} -.notTopLevel { - padding-left: 40px; -} -.topLevel { - padding-left: 24px; -} - -.icon { - position: relative; - right: 24px; - top: 7px; - - & > svg { - max-height: 24px; - max-width: 24px; - - & > g { - fill: var(--yoroi-palette-gray-600); - } - } -} - -.label { - font-size: 1rem; - line-height: 22px; - font-weight: 400; -} diff --git a/packages/yoroi-extension/app/components/wallet/navigation/ReceiveNavigation.js b/packages/yoroi-extension/app/components/wallet/navigation/ReceiveNavigation.js deleted file mode 100644 index de841e78fc..0000000000 --- a/packages/yoroi-extension/app/components/wallet/navigation/ReceiveNavigation.js +++ /dev/null @@ -1,170 +0,0 @@ -// @flow -import { Component } from 'react'; -import type { Node } from 'react'; -import { observer } from 'mobx-react'; -import { intlShape } from 'react-intl'; -import styles from './ReceiveNavigation.scss'; - -import { ReactComponent as AttentionIcon } from '../../../assets/images/attention-modern.inline.svg'; -import ReceiveNavButton from './ReceiveNavButton'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import { - addressGroupName, - addressSubgroupName, - addressGroupsTooltip, - addressFilter, - AddressGroupTypes, - AddressSubgroup, -} from '../../../types/AddressFilterTypes'; -import Accordion from '../../widgets/Accordion'; -import { ReactComponent as InfoIcon } from '../../../assets/images/attention-big-light.inline.svg'; - -import type { AddressTypeName, AddressFilterKind } from '../../../types/AddressFilterTypes'; -import classNames from 'classnames'; -import { Tooltip, Typography } from '@mui/material'; - -type AddressStoreSubset = { - +isActiveStore: boolean, - +setAsActiveStore: void => void, - +name: AddressTypeName, - +validFilters: $ReadOnlyArray, - +wasExecuted: boolean, - ... -}; -export type Props = {| - +setFilter: AddressFilterKind => void, - +activeFilter: AddressFilterKind, - +addressStores: $ReadOnlyArray, -|}; - -@observer -export default class ReceiveNavigation extends Component { - static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { - intl: intlShape.isRequired, - }; - - genTooltip: AddressStoreSubset => Node = store => { - const { intl } = this.context; - return ( - - {intl.formatMessage(addressGroupsTooltip[store.name.group])} -     - } - > - - - - - ); - }; - - createAccordionForGroup: ($PropertyType) => Node = stores => { - const { intl } = this.context; - - if (stores.length === 1 && stores[0].name.subgroup === AddressSubgroup.all) { - const store = stores[0]; - return ( -
    - -
    - ); - } - - return ( - !store.wasExecuted) != null} - header={ -
    - {intl.formatMessage(addressGroupName[stores[0].name.group])} - {this.genTooltip(stores[0])} -
    - } - activeHeader={stores.some(address => address.isActiveStore)} - > - {stores.map(type => ( - - ))} -     - ); - }; - - createAccordions: void => Node = () => { - // we use an array instead of a map to maintain the order of stores - const groups: Array> = []; - - for (const store of this.props.addressStores) { - const existingGroup = groups.find( - // if any existing group shares the group name - group => group[0].name.group === store.name.group - ); - if (existingGroup == null) { - groups.push([store]); - continue; - } - existingGroup.push(store); - } - - return groups.map(group => ( -
    - {this.createAccordionForGroup(group)} -
    - )); - }; - - generateFilterSection: void => ?Node = () => { - const { intl } = this.context; - - const { activeFilter } = this.props; - - const activeStore = this.props.addressStores.find(store => store.isActiveStore); - if (activeStore == null) return undefined; - - return ( -
    - {activeStore.validFilters.map(filter => ( - this.props.setFilter(filter)} - isToplevel - /> - ))} -
    - ); - }; - - render(): Node { - return ( -
    -
    -
    {this.createAccordions()}
    - {/* Section filtered button */} - {this.generateFilterSection()} -
    -
    - ); - } -} diff --git a/packages/yoroi-extension/app/components/wallet/navigation/ReceiveNavigation.scss b/packages/yoroi-extension/app/components/wallet/navigation/ReceiveNavigation.scss deleted file mode 100644 index befafc4f26..0000000000 --- a/packages/yoroi-extension/app/components/wallet/navigation/ReceiveNavigation.scss +++ /dev/null @@ -1,48 +0,0 @@ -.wrapper { - padding-top: 37px; - box-shadow: 0 2px 4px 0 rgba(56, 57, 61, 0.2); - height: 100%; - // background-color: var(--yoroi-palette-gray-50); -} - -.content { - display: flex; - flex-direction: column; - justify-content: space-between; - min-width: 225px; - height: inherit; -} -.accordion { - &:not(:nth-child(1)) { - margin-top: 24px; - } -} -.accordions { - display: flex; - flex-direction: column; - justify-content: start; - overflow-y: overlay; - min-height: 80px; // always show at least ~2 elements - flex: 1; - padding-bottom: 10px; - .Tooltip { - position: absolute; // added here due of specificity - } -} -.filterSection { - padding-top: 20px; - padding-bottom: 40px; - height: 240px; - box-shadow: inset 0 -1px 12px 0 rgba(255, 255, 255, 0.5), inset 0 2px 4px 0 rgba(56, 57, 61, 0.2); - overflow: auto; -} -.infoIcon { - margin-left: 8px; - svg { - max-width: 12px; - max-height: 12px; - path { - fill: #8a92a3; - } - } -} diff --git a/packages/yoroi-extension/app/components/wallet/navigation/WalletNavButton.js b/packages/yoroi-extension/app/components/wallet/navigation/WalletNavButton.js deleted file mode 100644 index 3b6877dc6e..0000000000 --- a/packages/yoroi-extension/app/components/wallet/navigation/WalletNavButton.js +++ /dev/null @@ -1,45 +0,0 @@ -// @flow -import { Component } from 'react'; -import type { Node } from 'react'; -import { observer } from 'mobx-react'; -import classnames from 'classnames'; -import styles from './WalletNavButton.scss'; - -type Props = {| - +label: string, - +icon?: string, - +isActive: boolean, - +onClick: void => void, - +className?: string, -|}; - -@observer -export default class WalletNavButton extends Component { - static defaultProps: {|className: void, icon: void|} = { - className: undefined, - icon: undefined - }; - - render(): Node { - const { isActive, onClick, className, label, icon } = this.props; - - const IconComponent = icon; - - const componentClasses = classnames([ - className, - styles.button, - isActive && styles.active - ]); - - return ( - - ); - } -} diff --git a/packages/yoroi-extension/app/components/wallet/navigation/WalletNavButton.scss b/packages/yoroi-extension/app/components/wallet/navigation/WalletNavButton.scss deleted file mode 100644 index c2c500db59..0000000000 --- a/packages/yoroi-extension/app/components/wallet/navigation/WalletNavButton.scss +++ /dev/null @@ -1,73 +0,0 @@ -// ========= LAYOUT ========= - -.button { - width: 100%; - display: flex; - align-items: center; - justify-content: center; - height: var(--yoroi-navigation-tab-height); - color: var(--yoroi-palette-gray-400); - - &:hover { - background-color: var(--yoroi-palette-common-white); - cursor: pointer; - } -} - -.active { - background-color: var(--yoroi-palette-common-white); - - .label { - color: var(--yoroi-palette-secondary-300); - } - - &:hover { - cursor: default; - background-color: var(--yoroi-palette-common-white); - } - - .icon { - & > svg { - color: var(--yoroi-palette-secondary-300); - } - & > svg > path { - fill: var(--yoroi-palette-secondary-300); - } - } -} - -.label { - font-size: 18px; - font-weight: 400; - font-weight: 500; - letter-spacing: 0.4px; - display: block; - text-align: center; - line-height: 22px; - color: var(--yoroi-palette-gray-600); -} - -.icon { - margin-right: 10px; - - & > svg { - max-height: 24px; - max-width: 24px; - - & > path { - fill: var(--yoroi-palette-gray-600); - } - } - - @media (max-width: 950px) { - display: none; - } -} - -:global(.YoroiModern) { - .active { - .label { - color: var(--yoroi-palette-secondary-300); - } - } -} diff --git a/packages/yoroi-extension/app/components/wallet/navigation/WalletNavigation.js b/packages/yoroi-extension/app/components/wallet/navigation/WalletNavigation.js deleted file mode 100644 index 6b672aa7f2..0000000000 --- a/packages/yoroi-extension/app/components/wallet/navigation/WalletNavigation.js +++ /dev/null @@ -1,56 +0,0 @@ -// @flow -import { Component } from 'react'; -import type { Node } from 'react'; -import { observer } from 'mobx-react'; -import { intlShape } from 'react-intl'; -import styles from './WalletNavigation.scss'; -import WalletNavButton from './WalletNavButton'; - -import type { MessageDescriptor, $npm$ReactIntl$IntlFormat } from 'react-intl'; - -export type Category = {| - +className: string, - +icon?: string, - +label?: MessageDescriptor, - +isActive: boolean, - +onClick: void => void, -|}; - -type Props = {| - categories: Array, -|}; - -@observer -export default class WalletNavigation extends Component { - - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { - intl: intlShape.isRequired, - }; - - renderCategory: Category => ?Node = (category) => { - const { intl } = this.context; - - return ( -
    - -
    - ); - } - - render(): Node { - return ( -
    - {this.props.categories.map(category => this.renderCategory(category))} -
    - ); - } -} diff --git a/packages/yoroi-extension/app/components/wallet/navigation/WalletNavigation.scss b/packages/yoroi-extension/app/components/wallet/navigation/WalletNavigation.scss deleted file mode 100644 index 444ffbd391..0000000000 --- a/packages/yoroi-extension/app/components/wallet/navigation/WalletNavigation.scss +++ /dev/null @@ -1,8 +0,0 @@ -.component { - display: flex; -} - -.navItem { - flex: 1; - background-color: var(--yoroi-palette-gray-50); -} diff --git a/packages/yoroi-extension/app/components/wallet/receive/StandardHeader.js b/packages/yoroi-extension/app/components/wallet/receive/StandardHeader.js deleted file mode 100644 index 4c7cbb70aa..0000000000 --- a/packages/yoroi-extension/app/components/wallet/receive/StandardHeader.js +++ /dev/null @@ -1,130 +0,0 @@ -// @flow -import { Component } from 'react'; -import type { Node } from 'react'; -import { observer } from 'mobx-react'; -import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl'; -import classnames from 'classnames'; -import { LoadingButton } from '@mui/lab'; -import LocalizableError from '../../../i18n/LocalizableError'; -import styles from './StandardHeader.scss'; -import CopyableAddress from '../../widgets/CopyableAddress'; -import QrCodeWrapper from '../../widgets/QrCodeWrapper'; -import RawHash from '../../widgets/hashWrappers/RawHash'; -import ExplorableHashContainer from '../../../containers/widgets/ExplorableHashContainer'; -import { SelectedExplorer } from '../../../domain/SelectedExplorer'; -import type { Notification } from '../../../types/notification.types'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import { truncateAddress } from '../../../utils/formatters'; - -const messages = defineMessages({ - walletAddressLabel: { - id: 'wallet.receive.page.walletAddressLabel', - defaultMessage: '!!!Your wallet address', - }, - walletReceiveInstructions: { - id: 'wallet.receive.page.walletReceiveInstructions', - defaultMessage: - '!!!Share this wallet address to receive payments. To protect your privacy, new addresses are generated automatically once you use them.', - }, - generateNewAddressButtonLabel: { - id: 'wallet.receive.page.generateNewAddressButtonLabel', - defaultMessage: '!!!Generate new address', - }, -}); - -type Props = {| - +walletAddress: string, - +selectedExplorer: SelectedExplorer, - +isWalletAddressUsed: boolean, - +onGenerateAddress: void => Promise, - +onCopyAddressTooltip: (string, string) => void, - +notification: ?Notification, - +isSubmitting: boolean, - +error?: ?LocalizableError, - +isFilterActive: boolean, -|}; - -@observer -export default class StandardHeader extends Component { - static defaultProps: {| error: void |} = { - error: undefined, - }; - - static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { - intl: intlShape.isRequired, - }; - - submit: void => Promise = async () => { - await this.props.onGenerateAddress(); - }; - - render(): Node { - const { - walletAddress, - isSubmitting, - error, - isWalletAddressUsed, - onCopyAddressTooltip, - notification, - } = this.props; - const { intl } = this.context; - const mainAddressNotificationId = 'mainAddress-copyNotification'; - - const generateAddressForm = ( - - {intl.formatMessage(messages.generateNewAddressButtonLabel)} - - ); - - const copyableHashClass = classnames([styles.copyableHash]); - - const walletHeader = ( -
    -
    -
    {intl.formatMessage(messages.walletAddressLabel)}
    - onCopyAddressTooltip(walletAddress, mainAddressNotificationId)} - notification={notification} - placementTooltip="bottom-start" - > - - - {truncateAddress(walletAddress)} - - - -
    -
    - -
    - {generateAddressForm} - {error ? ( -
    {intl.formatMessage(error)}
    - ) : ( -
     
    - )} -
    -
    - -
    -
    - ); - - return walletHeader; - } -} diff --git a/packages/yoroi-extension/app/components/wallet/receive/VerifyAddressDialog.js b/packages/yoroi-extension/app/components/wallet/receive/VerifyAddressDialog.js index 69508de8cc..d42203c06b 100644 --- a/packages/yoroi-extension/app/components/wallet/receive/VerifyAddressDialog.js +++ b/packages/yoroi-extension/app/components/wallet/receive/VerifyAddressDialog.js @@ -2,13 +2,12 @@ /* eslint react/jsx-one-expression-per-line: 0 */ // the   in the html breaks this -import type { Node, ComponentType } from 'react'; +import type { Node } from 'react'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import type { Notification } from '../../../types/notification.types'; import type { StandardAddress } from '../../../types/AddressFilterTypes'; import type { Addressing } from '../../../api/ada/lib/storage/models/PublicDeriver/interfaces'; import type { ComplexityLevelType } from '../../../types/complexityLevelType'; -import type { InjectedLayoutProps } from '../../../styles/context/layout'; import { Component } from 'react'; import { observer } from 'mobx-react'; import { defineMessages, intlShape } from 'react-intl'; @@ -23,7 +22,6 @@ import { normalizeToAddress, } from '../../../api/ada/lib/storage/bridge/utils'; import { ComplexityLevels } from '../../../types/complexityLevelType'; -import { withLayout } from '../../../styles/context/layout'; import classnames from 'classnames'; import QrCodeWrapper from '../../widgets/QrCodeWrapper'; import Dialog from '../../widgets/Dialog'; @@ -58,13 +56,12 @@ type Props = {| +onCopyAddressTooltip: string => void, +isHardware: boolean, +addressInfo: $ReadOnly, - +classicTheme: boolean, +complexityLevel: ?ComplexityLevelType, +isAddressBook: boolean, |}; @observer -class VerifyAddressDialog extends Component { +export default class VerifyAddressDialog extends Component { static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; @@ -288,5 +285,3 @@ class VerifyAddressDialog extends Component { ); }; } - -export default (withLayout(VerifyAddressDialog): ComponentType); diff --git a/packages/yoroi-extension/app/components/wallet/restore/LegacyExplanation.js b/packages/yoroi-extension/app/components/wallet/restore/LegacyExplanation.js index e16e5b3c55..1aa4629b5f 100644 --- a/packages/yoroi-extension/app/components/wallet/restore/LegacyExplanation.js +++ b/packages/yoroi-extension/app/components/wallet/restore/LegacyExplanation.js @@ -30,7 +30,6 @@ type Props = {| +onClose: void => void, +onSkip: void => PossiblyAsync, +onCheck: void => PossiblyAsync, - +classicTheme: boolean, +isSubmitting: boolean, |}; @@ -43,9 +42,6 @@ export default class LegacyExplanation extends Component { render(): Node { const { intl } = this.context; - const { - classicTheme - } = this.props; const dialogClasses = classnames([ styles.component, 'LegacyExplanation', @@ -77,7 +73,7 @@ export default class LegacyExplanation extends Component { closeButton={} backButton={} > - {!classicTheme && } + diff --git a/packages/yoroi-extension/app/components/wallet/send/TransactionSuccessDialog.js b/packages/yoroi-extension/app/components/wallet/send/TransactionSuccessDialog.js index 733ea19c4f..0796e5bff1 100644 --- a/packages/yoroi-extension/app/components/wallet/send/TransactionSuccessDialog.js +++ b/packages/yoroi-extension/app/components/wallet/send/TransactionSuccessDialog.js @@ -32,7 +32,6 @@ const messages = defineMessages({ type Props = {| +onClose: void => PossiblyAsync, - +classicTheme: boolean, +process: 'for-sell' | 'normal', |}; diff --git a/packages/yoroi-extension/app/components/wallet/send/WalletSendConfirmationDialog.js b/packages/yoroi-extension/app/components/wallet/send/WalletSendConfirmationDialog.js index 9a64582071..d2bdfd2ee4 100644 --- a/packages/yoroi-extension/app/components/wallet/send/WalletSendConfirmationDialog.js +++ b/packages/yoroi-extension/app/components/wallet/send/WalletSendConfirmationDialog.js @@ -48,7 +48,6 @@ type Props = {| +onCancel: void => void, +isSubmitting: boolean, +error: ?LocalizableError, - +classicTheme: boolean, +unitOfAccountSetting: UnitOfAccountSettingType, +getTokenInfo: $ReadOnly> => $ReadOnly, +getCurrentPrice: (from: string, to: string) => ?string, @@ -66,8 +65,7 @@ export default class WalletSendConfirmationDialog extends Component { walletPassword: { type: 'password', label: this.context.intl.formatMessage(globalMessages.walletPasswordLabel), - placeholder: this.props.classicTheme ? - this.context.intl.formatMessage(globalMessages.walletPasswordFieldPlaceholder) : '', + placeholder: '', value: '', validators: [({ field }) => { if (field.value === '') { diff --git a/packages/yoroi-extension/app/components/wallet/send/WalletSendForm.js b/packages/yoroi-extension/app/components/wallet/send/WalletSendForm.js deleted file mode 100644 index 8e4e62527c..0000000000 --- a/packages/yoroi-extension/app/components/wallet/send/WalletSendForm.js +++ /dev/null @@ -1,653 +0,0 @@ -// @flow -import { Component } from 'react'; -import type { Node } from 'react'; -import { observer } from 'mobx-react'; -import { reaction } from 'mobx'; -import { Button, MenuItem, Typography } from '@mui/material'; -import TextField from '../../common/TextField'; -import { defineMessages, intlShape } from 'react-intl'; -import { isValidMemoOptional, isValidMemo } from '../../../utils/validations'; -import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm'; -import vjf from 'mobx-react-form/lib/validators/VJF'; -import { AmountInput } from '../../common/NumericInputRP'; -import { ReactComponent as AddMemoSvg } from '../../../assets/images/add-memo.inline.svg'; -import BorderedBox from '../../widgets/BorderedBox'; -import styles from './WalletSendForm.scss'; -import globalMessages, { memoMessages } from '../../../i18n/global-messages'; -import type { UriParams } from '../../../utils/URIHandling'; -import { - getAddressPayload, - isValidReceiveAddress, -} from '../../../api/ada/lib/storage/bridge/utils'; -import { MAX_MEMO_SIZE } from '../../../config/externalStorageConfig'; -import type { TokenRow, NetworkRow } from '../../../api/ada/lib/storage/database/primitives/tables'; -import { - formattedAmountToBigNumber, - formattedAmountToNaturalUnits, - truncateToken, -} from '../../../utils/formatters'; -import config from '../../../config'; -import LocalizableError from '../../../i18n/LocalizableError'; -import WarningBox from '../../widgets/WarningBox'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import { - getTokenName, - genFormatTokenAmount, - getTokenStrictName, - getTokenIdentifierIfExists, -} from '../../../stores/stateless/tokenHelpers'; -import { MultiToken } from '../../../api/common/lib/MultiToken'; -import type { TokenEntry, TokenLookupKey } from '../../../api/common/lib/MultiToken'; -import Select from '../../common/Select'; -import { Box } from '@mui/system'; -import TokenOptionRow from '../../widgets/tokenOption/TokenOptionRow'; -import BigNumber from 'bignumber.js'; -import classnames from 'classnames'; - -const messages = defineMessages({ - receiverLabel: { - id: 'wallet.send.form.receiver.label', - defaultMessage: '!!!Receiver', - }, - receiverHint: { - id: 'wallet.send.form.receiver.hint', - defaultMessage: '!!!Wallet Address', - }, - dropdownAmountLabel: { - id: 'wallet.send.form.sendAll.dropdownAmountLabel', - defaultMessage: '!!!Send all {currency}', - }, - dropdownSendNFTLabel: { - id: 'wallet.send.form.sendAll.dropdownSendNFTLabel', - defaultMessage: '!!!Send {currency}', - }, - allTokens: { - id: 'wallet.send.form.sendAll.allTokens', - defaultMessage: '!!! + all tokens', - }, - selectedAmountLable: { - id: 'wallet.send.form.sendAll.selectedAmountLable', - defaultMessage: '!!!Amount Options', - }, - customAmount: { - id: 'wallet.send.form.sendAll.customAmount', - defaultMessage: '!!!Custom Amount', - }, - transactionFeeError: { - id: 'wallet.send.form.transactionFeeError', - defaultMessage: '!!!Not enough Ada for fees. Try sending a smaller amount.', - }, - calculatingFee: { - id: 'wallet.send.form.calculatingFee', - defaultMessage: '!!!Calculating the fee, please wait.', - }, - memoInvalidOptional: { - id: 'wallet.transaction.memo.optional.invalid', - defaultMessage: '!!!Memo cannot be more than {maxMemo} characters.', - }, - willSendAll: { - id: 'wallet.send.form.willSendAll', - defaultMessage: '!!!ATTENTION! You will send all of your tokens below:', - }, -}); - -type Props = {| - +selectedNetwork: $ReadOnly, - +hasAnyPending: boolean, - +validateAmount: ( - amountInNaturalUnits: BigNumber, - tokenRow: $ReadOnly - ) => Promise<[boolean, void | string]>, - +onSubmit: void => void, - +totalInput: ?MultiToken, - +classicTheme: boolean, - +updateReceiver: (void | string) => void, - +updateAmount: (?BigNumber) => void, - +updateMemo: (void | string) => void, - +shouldSendAll: boolean, - +updateSendAllStatus: (void | boolean) => void, - +fee: ?MultiToken, - +isCalculatingFee: boolean, - +reset: void => void, - +error: ?LocalizableError, - +uriParams: ?UriParams, - +resetUriParams: void => void, - +showMemo: boolean, - +onAddMemo: void => void, - +getTokenInfo: ($ReadOnly>) => $ReadOnly, - +defaultToken: $ReadOnly, // need since no guarantee input in non-null - +onAddToken: ({| - token: void | $ReadOnly, - shouldSendAll?: boolean, - shouldReset?: boolean, - |}) => void, - +spendableBalance: ?MultiToken, - +selectedToken: void | $ReadOnly, -|}; -const CUSTOM_AMOUNT = 'CUSTOM_AMOUNT'; - -@observer -export default class WalletSendForm extends Component { - static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { - intl: intlShape.isRequired, - }; - - amountFieldReactionDisposer: null | (() => mixed) = null; - - componentDidMount(): void { - this.props.reset(); - - const formatValue = genFormatTokenAmount(this.props.getTokenInfo); - if (this.props.uriParams) { - // assert not null - const uriParams = this.props.uriParams; - - // note: assume these are validated externally - this.props.updateAmount(uriParams.amount.getDefaultEntry().amount); - this.props.updateReceiver(getAddressPayload(uriParams.address, this.props.selectedNetwork)); - this.props.resetUriParams(); - } - - /** - * Mobx-react-form doesn't allow the value field to be updated based on a computed variable - * so instead we register a reaction to update it - */ - this.amountFieldReactionDisposer = reaction( - () => [this.props.shouldSendAll, this.props.totalInput], - () => { - if (!this.props.totalInput || !this.props.fee) { - return; - } - const totalInput = this.props.totalInput; - const fee = this.props.fee; - if (!this.props.shouldSendAll) { - return; - } - - // once sendAll is triggered, set the amount field to the total input - const adjustedInput = totalInput.joinSubtractCopy(fee); - const relatedEntry = this.getTokenEntry(adjustedInput); - this.form.$('amount').set('value', formatValue(relatedEntry)); - } - ); - } - - getTokenEntry: MultiToken => TokenEntry = tokens => { - return this.props.selectedToken == null - ? tokens.getDefaultEntry() - : tokens.values.find(entry => entry.identifier === this.props.selectedToken?.Identifier) ?? - tokens.getDefaultEntry(); - }; - - componentWillUnmount(): void { - this.props.reset(); - // dispose reaction - if (this.amountFieldReactionDisposer != null) { - this.amountFieldReactionDisposer(); - } - } - - // FORM VALIDATION - form: ReactToolboxMobxForm = new ReactToolboxMobxForm( - { - fields: { - receiver: { - label: this.context.intl.formatMessage(messages.receiverLabel), - placeholder: this.props.classicTheme - ? this.context.intl.formatMessage(messages.receiverHint) - : '', - value: this.props.uriParams ? this.props.uriParams.address : '', - validators: [ - ({ field }) => { - const receiverValue = field.value; - if (receiverValue === '') { - this.props.updateReceiver(); - return [false, this.context.intl.formatMessage(globalMessages.fieldIsRequired)]; - } - const updateReceiver = (isValid: boolean) => { - if (isValid) { - this.props.updateReceiver( - getAddressPayload(receiverValue, this.props.selectedNetwork) - ); - } else { - this.props.updateReceiver(); - } - }; - - const isValid = isValidReceiveAddress(receiverValue, this.props.selectedNetwork); - if (isValid === true) { - updateReceiver(true); - return [isValid]; - } - updateReceiver(isValid[0]); - return [isValid[0], this.context.intl.formatMessage(isValid[1])]; - }, - ], - }, - amount: { - label: this.context.intl.formatMessage(globalMessages.amountLabel), - placeholder: this.props.classicTheme ? `0.${'0'.repeat(this.getNumDecimals())}` : '', - value: (() => { - const formatValue = genFormatTokenAmount(this.props.getTokenInfo); - return this.props.uriParams - ? formatValue(this.props.uriParams.amount.getDefaultEntry()) - : null; - })(), - validators: [ - async ({ field }) => { - if (this.props.shouldSendAll) { - // sendall doesn't depend on the amount so always succeed - return true; - } - const amountValue: string = field.value; - if (amountValue === '') { - this.props.updateAmount(); - return [false, this.context.intl.formatMessage(globalMessages.fieldIsRequired)]; - } - const formattedAmount = new BigNumber( - formattedAmountToNaturalUnits(amountValue, this.getNumDecimals()) - ); - const isValidAmount = await this.props.validateAmount( - formattedAmount, - this.props.selectedToken ?? this.props.defaultToken - ); - if (isValidAmount[0]) { - this.props.updateAmount(formattedAmount); - } else { - this.props.updateAmount(); - } - return isValidAmount; - }, - ], - }, - selectedToken: { - label: this.context.intl.formatMessage(globalMessages.assetSelect), - value: - this.props.selectedToken?.TokenId ?? - this.props.getTokenInfo({ - identifier: this.props.defaultToken.Identifier, - networkId: this.props.defaultToken.NetworkId, - }).TokenId, - }, - selectedAmount: { - label: this.context.intl.formatMessage(messages.selectedAmountLable), - value: this.props.shouldSendAll - ? this.props.selectedToken?.TokenId ?? - this.props.getTokenInfo({ - identifier: this.props.defaultToken.Identifier, - networkId: this.props.defaultToken.NetworkId, - }).TokenId - : CUSTOM_AMOUNT, - }, - memo: { - label: this.context.intl.formatMessage(memoMessages.memoLabel), - placeholder: this.context.intl.formatMessage(memoMessages.optionalMemo), - value: '', - validators: [ - ({ field }) => { - const memoContent = field.value; - const isValid = isValidMemoOptional(memoContent); - if (isValid) { - this.props.updateMemo(memoContent); - } - return [ - isValid, - this.context.intl.formatMessage(messages.memoInvalidOptional, { - maxMemo: MAX_MEMO_SIZE, - }), - ]; - }, - ], - }, - }, - }, - { - options: { - // if fields are pre-populated by URI, validate them right away - showErrorsOnInit: this.props.uriParams, - validateOnBlur: false, - validateOnChange: true, - validationDebounceWait: config.forms.FORM_VALIDATION_DEBOUNCE_WAIT, - }, - plugins: { - vjf: vjf(), - }, - } - ); - - getNumDecimals(): number { - const info = - this.props.selectedToken ?? - this.props.getTokenInfo({ - identifier: this.props.defaultToken.Identifier, - networkId: this.props.defaultToken.NetworkId, - }); - return info.Metadata.numberOfDecimals; - } - - render(): Node { - const { form } = this; - const { intl } = this.context; - const { memo } = this.form.values(); - const { hasAnyPending, showMemo, onAddMemo } = this.props; - - const amountField = form.$('amount'); - const receiverField = form.$('receiver'); - const memoField = form.$('memo'); - const amountFieldProps = amountField.bind(); - - const transactionFee = - this.props.fee ?? - new MultiToken([], { - defaultIdentifier: this.props.defaultToken.Identifier, - defaultNetworkId: this.props.defaultToken.NetworkId, - }); - - const totalAmount = - this.props.totalInput ?? - new MultiToken( - [ - { - identifier: (this.props.selectedToken ?? this.props.defaultToken).Identifier, - networkId: (this.props.selectedToken ?? this.props.defaultToken).NetworkId, - amount: formattedAmountToBigNumber(amountFieldProps.value).shiftedBy( - (this.props.selectedToken ?? this.props.defaultToken).Metadata.numberOfDecimals - ), - }, - ], - { - defaultIdentifier: this.props.defaultToken.Identifier, - defaultNetworkId: this.props.defaultToken.NetworkId, - } - ); - - const pendingTxWarningComponent = ( -
    - {intl.formatMessage(globalMessages.sendingIsDisabled)} -
    - ); - - let transactionFeeError = null; - if (this.props.isCalculatingFee) { - transactionFeeError = this.context.intl.formatMessage(messages.calculatingFee); - } - if (this.props.error) { - transactionFeeError = this.context.intl.formatMessage( - this.props.error, - this.props.error.values - ); - } - - const formatValue = genFormatTokenAmount(this.props.getTokenInfo); - const tokenOptions = (() => { - if (this.props.spendableBalance == null) return []; - const { spendableBalance } = this.props; - return [ - // make sure default token is always first in the list - spendableBalance.getDefaultEntry(), - ...spendableBalance.nonDefaultEntries(), - ] - .map(entry => ({ - entry, - info: this.props.getTokenInfo(entry), - })) - .map(token => { - const amount = genFormatTokenAmount(this.props.getTokenInfo)(token.entry); - return { - value: token.info.TokenId, - info: token.info, - label: truncateToken( - getTokenStrictName(token.info).name ?? getTokenIdentifierIfExists(token.info) ?? '-' - ), - id: getTokenIdentifierIfExists(token.info) ?? '-', - amount, - }; - }); - })(); - - const tokenId = - this.props.selectedToken?.TokenId ?? - this.props.getTokenInfo({ - identifier: this.props.defaultToken.Identifier, - networkId: this.props.defaultToken.NetworkId, - }).TokenId; - - const sendAmountOptions = (() => { - return [ - { - id: 'custom-amount', - label: intl.formatMessage(messages.customAmount), - value: CUSTOM_AMOUNT, - }, - ...tokenOptions - .filter(t => t.value === tokenId) - .map(token => { - let label = intl.formatMessage( - token.info.IsNFT ? messages.dropdownSendNFTLabel : messages.dropdownAmountLabel, - { - currency: truncateToken(token.label), - } - ); - - const defaultTokenName = truncateToken(getTokenName(this.props.defaultToken)); - if (token.label === defaultTokenName) { - label += intl.formatMessage(messages.allTokens); - } - return { - label, - value: token.value, - id: 'send-all', - }; - }), - ]; - })(); - const tokenListClasses = classnames([ - styles.tokenList, - { - [styles.show]: this.props.shouldSendAll && this.form.$('selectedToken').value === tokenId, - }, - ]); - - return ( -
    - {hasAnyPending && pendingTxWarningComponent} - - - {tokenOptions.length > 1 && ( - - )} - -
    - -
    - -
    - -
    - - - -
    -

    {intl.formatMessage(messages.willSendAll)}

    - {tokenOptions.map(token => ( -
    - {token.amount} {token.label} -
    - ))} -
    - - {showMemo ? ( -
    - -
    - ) : ( -
    - -
    - )} - - {this._makeInvokeConfirmationButton()} -     -
    - ); - } - - _makeInvokeConfirmationButton(): Node { - const { intl } = this.context; - const { memo, amount } = this.form.values(); - - const { hasAnyPending } = this.props; - - const disabledCondition = - !this.props.fee || hasAnyPending || !isValidMemoOptional(memo) || !amount; - - return ( - - ); - } -} diff --git a/packages/yoroi-extension/app/components/wallet/send/WalletSendForm.scss b/packages/yoroi-extension/app/components/wallet/send/WalletSendForm.scss deleted file mode 100644 index 756c704403..0000000000 --- a/packages/yoroi-extension/app/components/wallet/send/WalletSendForm.scss +++ /dev/null @@ -1,105 +0,0 @@ -.component { - padding-top: 40px; - padding-right: 20px; - padding-bottom: 20px; - padding-left: 20px; - - .warningBox { - margin-bottom: 30px; - } - - .receiverInput { - position: relative; - - :global { - .SimpleInput_input { - font-family: 'RobotoMono'; - font-weight: 300; - letter-spacing: 0; - } - } - } - - .amountInput { - position: relative; - margin-bottom: 10px; - } - - .checkbox { - font-family: 'RobotoMono'; - font-weight: 300; - width: fit-content; - } - - .memoActionItemBlock { - letter-spacing: 0.5px; - margin: 15px 0; - line-height: 20px; - vertical-align: top; - white-space: nowrap; - - * { - vertical-align: middle; - } - - button { - cursor: pointer; - } - - .addMemoIcon { - cursor: pointer; - display: inline-flex; - object-fit: contain; - & > svg { - height: 30px; - width: 30px; - } - } - } - - - .actionLabel { - color: var(--yoroi-palette-gray-800); - font-weight: 300; - font-size: 16px; - padding-left: 17px; - } - - .tokenList { - max-height: 0px; - height: 0px; - overflow: hidden; - transition: all .5s cubic-bezier(0,1,0,1); - - h1 { - margin-bottom: 10px; - font-size: 13px; - font-weight: 500; - color: #cccdcf; - } - - p { - color: var(--yoroi-palette-secondary-200); - font-weight: 500; - } - } - - .show { - height: auto; - max-height: 9999px; - transition: all .5s cubic-bezier(0,1,0,1); - } - -} - -:global(.YoroiRevamp) .component { - border-radius: 8px; -} - -:global(.YoroiModern) .component { - padding: 30px; - - .receiverInput { - letter-spacing: 0; - } -} diff --git a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormRevamp.js b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormRevamp.js index a9845a0ebf..8923f5b06d 100644 --- a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormRevamp.js +++ b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormRevamp.js @@ -169,7 +169,6 @@ type Props = {| +hasAnyPending: boolean, +onSubmit: void => void, +totalInput: ?MultiToken, - +isClassicTheme: boolean, +updateReceiver: (void | string, void | {| handle: string, nameServer: string |}) => void, +updateAmount: (?BigNumber) => void, +updateMemo: (void | string) => void, @@ -401,7 +400,7 @@ export default class WalletSendFormRevamp extends Component { fields: { receiver: { label: this.context.intl.formatMessage(messages.receiverFieldLabelDefault), - placeholder: this.props.isClassicTheme ? this.context.intl.formatMessage(messages.receiverHint) : '', + placeholder: '', value: this.props.uriParams ? this.props.uriParams.address : '', validators: [ async ({ field }) => { @@ -461,7 +460,7 @@ export default class WalletSendFormRevamp extends Component { }, amount: { label: this.context.intl.formatMessage(globalMessages.amountLabel), - placeholder: this.props.isClassicTheme ? `0.${'0'.repeat(this.getNumDecimals())}` : '', + placeholder: '', value: (() => { const formatValue = genFormatTokenAmount(this.props.getTokenInfo); return this.props.uriParams ? formatValue(this.props.uriParams.amount.getDefaultEntry()) : null; @@ -959,7 +958,6 @@ export default class WalletSendFormRevamp extends Component { sendMoney={this.props.sendMoney} getTokenInfo={this.props.getTokenInfo} getCurrentPrice={this.props.getCurrentPrice} - isClassicTheme={this.props.isClassicTheme} ledgerSendError={this.props.ledgerSendError} trezorSendError={this.props.trezorSendError} ledgerSend={this.props.ledgerSend} diff --git a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddNFTDialog.js b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddNFTDialog.js index 8a5c775f0b..032a46d749 100644 --- a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddNFTDialog.js +++ b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddNFTDialog.js @@ -27,7 +27,6 @@ import MaxAssetsError from '../MaxAssetsError'; type Props = {| +onClose: void => void, +spendableBalance: ?MultiToken, - +classicTheme: boolean, +getTokenInfo: ($ReadOnly>) => $ReadOnly, +updateAmount: (?BigNumber) => void, +onAddToken: ({| diff --git a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/WalletSendPreviewStep.js b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/WalletSendPreviewStep.js index b244de3131..5803c9e088 100644 --- a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/WalletSendPreviewStep.js +++ b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/WalletSendPreviewStep.js @@ -50,7 +50,6 @@ type Props = {| +onSubmit: ({| password: string |}) => PossiblyAsync, +addressToDisplayString: string => string, +isSubmitting: boolean, - +classicTheme: boolean, +unitOfAccountSetting: UnitOfAccountSettingType, +getTokenInfo: ($ReadOnly>) => $ReadOnly, +getCurrentPrice: (from: string, to: string) => ?string, @@ -129,9 +128,7 @@ export default class WalletSendPreviewStep extends Component { walletPassword: { type: 'password', label: this.context.intl.formatMessage(globalMessages.walletPasswordLabel), - placeholder: this.props.classicTheme - ? this.context.intl.formatMessage(globalMessages.walletPasswordFieldPlaceholder) - : '', + placeholder: '', value: '', validators: [ ({ field }) => { diff --git a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/WalletSendPreviewStepContainer.js b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/WalletSendPreviewStepContainer.js index fe55e7b310..1d03643a81 100644 --- a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/WalletSendPreviewStepContainer.js +++ b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/WalletSendPreviewStepContainer.js @@ -36,7 +36,6 @@ type Props = {| +onUpdateStep: (step: number) => void, +getCurrentPrice: (from: string, to: string) => ?string, +getTokenInfo: ($ReadOnly>) => $ReadOnly, - +isClassicTheme: boolean, +openTransactionSuccessDialog: void => void, +sendMoneyRequest: SendMoneyRequest, +sendMoney: (params: {| @@ -106,7 +105,6 @@ export default class WalletSendPreviewStepContainer extends Component { selectedWallet, selectedExplorer, sendMoneyRequest, - isClassicTheme, getTokenInfo, getCurrentPrice, } = this.props; @@ -154,7 +152,6 @@ export default class WalletSendPreviewStepContainer extends Component { } onSubmit={this.onSubmit} isSubmitting={sendMoneyRequest.isExecuting} - classicTheme={isClassicTheme} unitOfAccountSetting={unitOfAccountSetting} addressToDisplayString={addr => addressToDisplayString(addr, network)} selectedNetwork={network} diff --git a/packages/yoroi-extension/app/components/wallet/settings/ChangeWalletPasswordDialog.js b/packages/yoroi-extension/app/components/wallet/settings/ChangeWalletPasswordDialog.js index 1e7c55eaf8..2289635af5 100644 --- a/packages/yoroi-extension/app/components/wallet/settings/ChangeWalletPasswordDialog.js +++ b/packages/yoroi-extension/app/components/wallet/settings/ChangeWalletPasswordDialog.js @@ -43,8 +43,6 @@ type Props = {| +onPasswordSwitchToggle: void => void, +isSubmitting: boolean, +error: ?LocalizableError, - +isClassicTheme: boolean, - +isRevampTheme: boolean, |}; @observer @@ -59,17 +57,13 @@ export default class ChangeWalletPasswordDialog extends Component { currentPassword: { type: 'password', label: this.context.intl.formatMessage(messages.currentPasswordLabel), - placeholder: this.props.isClassicTheme - ? this.context.intl.formatMessage(messages.currentPasswordFieldPlaceholder) - : '', + placeholder: '', value: this.props.dialogData.currentPasswordValue, }, walletPassword: { type: 'password', label: this.context.intl.formatMessage(globalMessages.newPasswordLabel), - placeholder: this.props.isClassicTheme - ? this.context.intl.formatMessage(globalMessages.newPasswordFieldPlaceholder) - : '', + placeholder: '', value: this.props.dialogData.newPasswordValue, validators: [ ({ field, form }) => { @@ -87,9 +81,7 @@ export default class ChangeWalletPasswordDialog extends Component { repeatPassword: { type: 'password', label: this.context.intl.formatMessage(globalMessages.repeatPasswordLabel), - placeholder: this.props.isClassicTheme - ? this.context.intl.formatMessage(globalMessages.repeatPasswordFieldPlaceholder) - : '', + placeholder: '', value: this.props.dialogData.repeatedPasswordValue, validators: [ ({ field, form }) => { @@ -140,7 +132,7 @@ export default class ChangeWalletPasswordDialog extends Component { render(): Node { const { form } = this; const { intl } = this.context; - const { onCancel, isSubmitting, dialogData, error, isClassicTheme } = this.props; + const { onCancel, isSubmitting, dialogData, error } = this.props; const dialogClasses = classnames(['changePasswordDialog', styles.dialog]); @@ -148,10 +140,7 @@ export default class ChangeWalletPasswordDialog extends Component { const confirmButtonClasses = classnames(['confirmButton']); - const newPasswordClasses = classnames([ - 'newPassword', - isClassicTheme ? styles.newPasswordClassic : '', - ]); + const newPasswordClasses = classnames(['newPassword']); const currentPasswordField = form.$('currentPassword'); const newPasswordField = form.$('walletPassword'); diff --git a/packages/yoroi-extension/app/components/wallet/settings/ExportWallet.js b/packages/yoroi-extension/app/components/wallet/settings/ExportWallet.js index e82fd3fa33..67cbe2323f 100644 --- a/packages/yoroi-extension/app/components/wallet/settings/ExportWallet.js +++ b/packages/yoroi-extension/app/components/wallet/settings/ExportWallet.js @@ -1,12 +1,11 @@ // @flow +import type { Node } from 'react'; import { Component } from 'react'; -import type { Node, ComponentType } from 'react'; +import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import { defineMessages, intlShape } from 'react-intl'; import globalMessages from '../../../i18n/global-messages'; import { observer } from 'mobx-react'; import { Box, Button, Typography } from '@mui/material'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import { withLayout } from '../../../styles/context/layout'; export const messages: * = defineMessages({ titleLabel: { @@ -23,33 +22,31 @@ type Props = {| +openDialog: void => void, |}; -type InjectedProps = {| +isRevampLayout: boolean |}; - @observer -class ExportWallet extends Component { +export default class ExportWallet extends Component { static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; render(): Node { const { intl } = this.context; - const { isRevampLayout, openDialog } = this.props; + const { openDialog } = this.props; return ( {intl.formatMessage(messages.titleLabel)} @@ -57,21 +54,21 @@ class ExportWallet extends Component { {intl.formatMessage(messages.exportExplanation)} ); - - return renderLayoutComponent({ - CLASSIC: classicLayout, - REVAMP: revampLayout, - }); } } - -export default (withLayout(SpendingPasswordSetting): ComponentType); diff --git a/packages/yoroi-extension/app/components/wallet/settings/WalletNameSetting.js b/packages/yoroi-extension/app/components/wallet/settings/WalletNameSetting.js index 4957b89424..094078363f 100644 --- a/packages/yoroi-extension/app/components/wallet/settings/WalletNameSetting.js +++ b/packages/yoroi-extension/app/components/wallet/settings/WalletNameSetting.js @@ -1,15 +1,13 @@ // @flow -import type { Node, ComponentType } from 'react'; +import type { Node } from 'react'; import { Component } from 'react'; import { observer } from 'mobx-react'; +import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import { defineMessages, intlShape } from 'react-intl'; import LocalizableError from '../../../i18n/LocalizableError'; import InlineEditingInput from '../../widgets/forms/InlineEditingInput'; import globalMessages from '../../../i18n/global-messages'; import styles from './WalletNameSetting.scss'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import { withLayout } from '../../../styles/context/layout'; -import type { InjectedLayoutProps } from '../../../styles/context/layout'; import { Box, Typography } from '@mui/material'; const messages = defineMessages({ @@ -35,11 +33,10 @@ type Props = {| +isSubmitting: boolean, +isInvalid: boolean, +lastUpdatedField: ?string, - +classicTheme: boolean, |}; @observer -class WalletNameSetting extends Component { +export default class WalletNameSetting extends Component { static defaultProps: {| error: void |} = { error: undefined, }; @@ -66,17 +63,13 @@ class WalletNameSetting extends Component { isSubmitting, isInvalid, lastUpdatedField, - classicTheme, - isRevampLayout, } = this.props; return ( <> - {isRevampLayout && ( - - {intl.formatMessage(messages.title)} - - )} - + + {intl.formatMessage(messages.title)} + + { isValid={nameValidator} validationErrorMessage={intl.formatMessage(globalMessages.invalidWalletName)} successfullyUpdated={!isSubmitting && lastUpdatedField === 'name' && !isInvalid} - classicTheme={classicTheme} id="settings:wallet:walletName" /> {error &&
    {intl.formatMessage(error, error.values)}
    } @@ -98,5 +90,3 @@ class WalletNameSetting extends Component { ); } } - -export default (withLayout(WalletNameSetting): ComponentType); diff --git a/packages/yoroi-extension/app/components/wallet/staking/DelegationSuccessDialog.js b/packages/yoroi-extension/app/components/wallet/staking/DelegationSuccessDialog.js index b1a085bb87..7be5481da7 100644 --- a/packages/yoroi-extension/app/components/wallet/staking/DelegationSuccessDialog.js +++ b/packages/yoroi-extension/app/components/wallet/staking/DelegationSuccessDialog.js @@ -1,13 +1,10 @@ // @flow -import type { Node, ComponentType } from 'react'; +import type { Node } from 'react'; import { Component } from 'react'; import { observer } from 'mobx-react'; -import { defineMessages, intlShape } from 'react-intl'; -import SuccessPage from '../../transfer/SuccessPage'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import { withLayout } from '../../../styles/context/layout'; -import type { InjectedLayoutProps } from '../../../styles/context/layout'; +import { defineMessages, intlShape } from 'react-intl'; import { SuccessPageRevamp } from '../../transfer/SuccessPageRevamp'; import globalMessages from '../../../i18n/global-messages'; @@ -38,31 +35,17 @@ const messages = defineMessages({ type Props = {| +onClose: void => PossiblyAsync, - +classicTheme: boolean, |}; @observer -class DelegationSuccessDialog extends Component { +export default class DelegationSuccessDialog extends Component { static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; render(): Node { const { intl } = this.context; - - const classicLayout = ( - - ); - - const revampLayout = ( + return ( { }} /> ); - - return this.props.renderLayoutComponent({ - CLASSIC: classicLayout, - REVAMP: revampLayout, - }); } } - -export default (withLayout(DelegationSuccessDialog): ComponentType); diff --git a/packages/yoroi-extension/app/components/wallet/staking/DelegationTxDialog.js b/packages/yoroi-extension/app/components/wallet/staking/DelegationTxDialog.js index 1825063f1c..5861b6d286 100644 --- a/packages/yoroi-extension/app/components/wallet/staking/DelegationTxDialog.js +++ b/packages/yoroi-extension/app/components/wallet/staking/DelegationTxDialog.js @@ -2,13 +2,12 @@ /* eslint react/jsx-one-expression-per-line: 0 */ // the   in the html breaks this -import type { ComponentType, Node } from 'react'; -import BigNumber from 'bignumber.js'; +import type { Node } from 'react'; import { Component } from 'react'; +import BigNumber from 'bignumber.js'; import { observer } from 'mobx-react'; import { action, observable } from 'mobx'; -import classnames from 'classnames'; -import { AmountInput } from '../../common/NumericInputRP'; +import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import { defineMessages, intlShape } from 'react-intl'; import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm'; import Dialog from '../../widgets/Dialog'; @@ -19,19 +18,15 @@ import styles from './DelegationTxDialog.scss'; import ExplorableHashContainer from '../../../containers/widgets/ExplorableHashContainer'; import RawHash from '../../widgets/hashWrappers/RawHash'; import { SelectedExplorer } from '../../../domain/SelectedExplorer'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import SpendingPasswordInput from '../../widgets/forms/SpendingPasswordInput'; -import { truncateToken } from '../../../utils/formatters'; -import { MultiToken } from '../../../api/common/lib/MultiToken'; import type { TokenLookupKey } from '../../../api/common/lib/MultiToken'; +import { MultiToken } from '../../../api/common/lib/MultiToken'; import type { TokenRow } from '../../../api/ada/lib/storage/database/primitives/tables'; -import { getTokenName, genFormatTokenAmount } from '../../../stores/stateless/tokenHelpers'; +import { genFormatTokenAmount, getTokenName } from '../../../stores/stateless/tokenHelpers'; import { ReactComponent as InfoIcon } from '../../../assets/images/info-icon-revamp.inline.svg'; import WarningBox from '../../widgets/WarningBox'; -import { Box, Tooltip, Typography, styled } from '@mui/material'; -import { withLayout } from '../../../styles/context/layout'; -import type { InjectedLayoutProps } from '../../../styles/context/layout'; +import { Box, styled, Tooltip, Typography } from '@mui/material'; import { toSvg } from 'jdenticon'; import { CopyAddress } from '../assets/TruncatedText'; @@ -102,12 +97,11 @@ type Props = {| +isSubmitting: boolean, +onCancel: void => void, +onSubmit: ({| password?: string |}) => PossiblyAsync, - +classicTheme: boolean, +error: ?LocalizableError, |}; @observer -class DelegationTxDialog extends Component { +export default class DelegationTxDialog extends Component { @observable spendingPasswordForm: void | ReactToolboxMobxForm; static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { @@ -135,12 +129,10 @@ class DelegationTxDialog extends Component { render(): Node { const { intl } = this.context; - const { isRevampLayout } = this.props; const spendingPasswordForm = this.props.isHardware ? undefined : ( this.setSpendingPasswordForm(form)} - classicTheme={this.props.classicTheme} isSubmitting={this.props.isSubmitting} /> ); @@ -155,105 +147,18 @@ class DelegationTxDialog extends Component {
    ); - const confirmButtonClasses = classnames(['confirmButton', this.props.isSubmitting ? styles.submitButtonSpinning : null]); - const formatValue = genFormatTokenAmount(this.props.getTokenInfo); const decimalPlaces = this.props.getTokenInfo(this.props.amountToDelegate.getDefaultEntry()).Metadata.numberOfDecimals; const delegatingValue = new BigNumber(this.props.amountToDelegate.getDefaultEntry().amount).shiftedBy(-decimalPlaces); - const classicLayout = ( - {} // noop - : this.props.onCancel, - }, - { - label: intl.formatMessage(globalMessages.delegateLabel), - onClick: this.submit.bind(this), - primary: true, - className: confirmButtonClasses, - isSubmitting: this.props.isSubmitting, - disabled: this.props.isSubmitting, - }, - ]} - closeOnOverlayClick={false} - onClose={!this.props.isSubmitting ? this.props.onCancel : null} - className={styles.dialog} - closeButton={} - > - {this.props.staleTx && staleTxWarning} -
      -
    • {intl.formatMessage(messages.explanationLine1)}
      • -
    • {intl.formatMessage(messages.explanationLine2)}
      • -
    • {intl.formatMessage(messages.explanationLine3)}
      • -
    -
    -
    {intl.formatMessage(messages.stakePoolName)}
    -
    {this.props.poolName ?? intl.formatMessage(globalMessages.unknownPoolLabel)}
    -
    -
    -
    {intl.formatMessage(globalMessages.stakePoolHash)}
    -
    - - {this.props.poolHash} - -
    -
    - -
    - -
    -
    {spendingPasswordForm}
    -
    -
    {intl.formatMessage(messages.approximateLabel)}
    -
    - {this.props.approximateReward.amount - .shiftedBy(-this.props.approximateReward.token.Metadata.numberOfDecimals) - .toFormat(this.props.approximateReward.token.Metadata.numberOfDecimals)} -   - {truncateToken(getTokenName(this.props.approximateReward.token))} -
    -
    - {this.props.error ? ( -
    {intl.formatMessage(this.props.error, this.props.error.values)}
    - ) : null} -     - ); - const avatarSource = toSvg(this.props.poolHash, 36, { padding: 0 }); const avatarGenerated = `data:image/svg+xml;utf8,${encodeURIComponent(avatarSource)}`; const tokenTicker = getTokenName(this.props.getTokenInfo(this.props.amountToDelegate.getDefaultEntry())); - const revampLayout = ( + return ( { ]} closeOnOverlayClick={false} onClose={!this.props.isSubmitting ? this.props.onCancel : null} - closeButton={} + closeButton={} > {this.props.staleTx && staleTxWarning} { borderRadius: '8px', }} > - + - + {intl.formatMessage(messages.delegationTips)} @@ -307,10 +217,19 @@ class DelegationTxDialog extends Component { {intl.formatMessage(globalMessages.stakePoolChecksumAndName)} - + @@ -328,7 +247,12 @@ class DelegationTxDialog extends Component { div > p': { p: '2px 3px' }, px: '2px', ml: '-3px', mt: '-2px' }} + sx={{ + '& > div > p': { p: '2px 3px' }, + px: '2px', + ml: '-3px', + mt: '-2px' + }} > { placement="top" > - + @@ -393,7 +317,7 @@ class DelegationTxDialog extends Component { } > - + @@ -432,12 +356,5 @@ class DelegationTxDialog extends Component { ) : null} ); - - return this.props.renderLayoutComponent({ - CLASSIC: classicLayout, - REVAMP: revampLayout, - }); } } - -export default (withLayout(DelegationTxDialog): ComponentType); diff --git a/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/StakePool/StakePool.js b/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/StakePool/StakePool.js index dc04bd2970..4870e63b93 100644 --- a/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/StakePool/StakePool.js +++ b/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/StakePool/StakePool.js @@ -1,29 +1,28 @@ // @flow -import type { ComponentType, Node } from 'react'; -import { ReactComponent as TwitterIcon } from '../../../../../assets/images/social/revamp/twitter.inline.svg'; -import { ReactComponent as TwitterIconRevamp } from '../../../../../assets/images/social/revamp/twitter-24x24.inline.svg'; -import { ReactComponent as TelegramIcon } from '../../../../../assets/images/social/revamp/telegram.inline.svg'; -import { ReactComponent as TelegramIconRevamp } from '../../../../../assets/images/social/revamp/telegram-24x24.inline.svg'; -import { ReactComponent as FbIcon } from '../../../../../assets/images/social/revamp/facebook.inline.svg'; +import type { Node } from 'react'; +import { + ReactComponent as TwitterIconRevamp +} from '../../../../../assets/images/social/revamp/twitter-24x24.inline.svg'; +import { + ReactComponent as TelegramIconRevamp +} from '../../../../../assets/images/social/revamp/telegram-24x24.inline.svg'; import { ReactComponent as FbIconRevamp } from '../../../../../assets/images/social/revamp/facebook-24x24.inline.svg'; -import { ReactComponent as YoutubeIcon } from '../../../../../assets/images/social/revamp/youtube.inline.svg'; -import { ReactComponent as YoutubeIconRevamp } from '../../../../../assets/images/social/revamp/youtube-24x24.inline.svg'; -import { ReactComponent as TwitchIcon } from '../../../../../assets/images/social/revamp/twitch.inline.svg'; +import { + ReactComponent as YoutubeIconRevamp +} from '../../../../../assets/images/social/revamp/youtube-24x24.inline.svg'; import { ReactComponent as TwitchIconRevamp } from '../../../../../assets/images/social/revamp/twitch-24x24.inline.svg'; -import { ReactComponent as DiscordIcon } from '../../../../../assets/images/social/revamp/discord.inline.svg'; -import { ReactComponent as DiscordIconRevamp } from '../../../../../assets/images/social/revamp/discord-24x24.inline.svg'; -import { ReactComponent as GithubIcon } from '../../../../../assets/images/social/revamp/github.inline.svg'; +import { + ReactComponent as DiscordIconRevamp +} from '../../../../../assets/images/social/revamp/discord-24x24.inline.svg'; import { ReactComponent as GithubIconRevamp } from '../../../../../assets/images/social/revamp/github-24x24.inline.svg'; -import { ReactComponent as PersonalIcon } from '../../../../../assets/images/social/revamp/personal.inline.svg'; -import { ReactComponent as PersonalIconRevamp } from '../../../../../assets/images/social/revamp/personal-site-24x24.inline.svg'; +import { + ReactComponent as PersonalIconRevamp +} from '../../../../../assets/images/social/revamp/personal-site-24x24.inline.svg'; import { List, StyledLink } from './StakePool.styles'; -import { Tooltip, Typography, styled } from '@mui/material'; +import { styled, Tooltip, Typography } from '@mui/material'; import { Box } from '@mui/system'; -import { ReactComponent as QuestionMarkIcon } from '../../../../../assets/images/question-mark.inline.svg'; import { ReactComponent as InfoIconRevamp } from '../../../../../assets/images/info-icon-revamp.inline.svg'; import type { SocialLinks } from '../../../../../containers/wallet/staking/SeizaFetcher'; -import { withLayout } from '../../../../../styles/context/layout'; -import type { InjectedLayoutProps } from '../../../../../styles/context/layout'; // eslint-disable-next-line react/require-default-props type Props = {| socialLinks?: SocialLinks, websiteUrl?: string, +color: string |}; @@ -43,7 +42,7 @@ const SocialExternalLink = ({ href, children }: {| href: string, children: Node ); -const StakingPoolSocialMedia = ({ socialLinks, websiteUrl, color, isRevampLayout }: Props & InjectedLayoutProps): Node => { +export const SocialMediaStakePool = ({ socialLinks, websiteUrl, color }: Props): Node => { const twitter = socialLinks?.tw; const telegram = socialLinks?.tg; const facebook = socialLinks?.fb; @@ -56,53 +55,52 @@ const StakingPoolSocialMedia = ({ socialLinks, websiteUrl, color, isRevampLayout {twitter != null ? ( - {isRevampLayout ? : } + ) : null} {telegram != null ? ( - {isRevampLayout ? : } + ) : null} {facebook != null ? ( - {isRevampLayout ? : } + ) : null} {youtube != null ? ( - {isRevampLayout ? : } + ) : null} {twitch != null ? ( - {isRevampLayout ? : } + ) : null} {discord != null ? ( - {isRevampLayout ? : } + ) : null} {github != null ? ( - {isRevampLayout ? : } + ) : null} {websiteUrl != null ? ( - {isRevampLayout ? : } + ) : null} ); }; -export const SocialMediaStakePool = (withLayout(StakingPoolSocialMedia): ComponentType); - type HelperTooltipProps = {| +message: string | Node, +placement?: string, |}; -const HelperTooltipComp = ({ message, isRevampLayout, placement }: HelperTooltipProps & InjectedLayoutProps): Node => { + +export const HelperTooltip = ({ message, placement }: HelperTooltipProps): Node => { return ( - {isRevampLayout ? : } + ); }; -HelperTooltipComp.defaultProps = { +HelperTooltip.defaultProps = { placement: 'right', }; -export const HelperTooltip = (withLayout(HelperTooltipComp): ComponentType); - const IconWrapper = styled(Box)(({ theme }) => ({ '& svg': { '& path': { diff --git a/packages/yoroi-extension/app/components/wallet/staking/dashboard/StakePool.js b/packages/yoroi-extension/app/components/wallet/staking/dashboard/StakePool.js index 296585e404..1770b20520 100644 --- a/packages/yoroi-extension/app/components/wallet/staking/dashboard/StakePool.js +++ b/packages/yoroi-extension/app/components/wallet/staking/dashboard/StakePool.js @@ -83,7 +83,6 @@ type Props = {| // rewards: string, // age: string, |}, - +classicTheme: boolean, +poolName: string, +hash: string, +moreInfo: void | MoreInfoProp, diff --git a/packages/yoroi-extension/app/components/wallet/summary/WalletSummary.js b/packages/yoroi-extension/app/components/wallet/summary/WalletSummary.js deleted file mode 100644 index 50e50be726..0000000000 --- a/packages/yoroi-extension/app/components/wallet/summary/WalletSummary.js +++ /dev/null @@ -1,251 +0,0 @@ -// @flow -import { Component } from 'react'; -import type { Node } from 'react'; -import { observer } from 'mobx-react'; -import classnames from 'classnames'; -import { defineMessages, intlShape } from 'react-intl'; -import { ReactComponent as ExportTxToFileSvg } from '../../../assets/images/transaction/export-tx-to-file.inline.svg'; -import BorderedBox from '../../widgets/BorderedBox'; -import type { UnconfirmedAmount } from '../../../types/unconfirmedAmount.types'; -import globalMessages from '../../../i18n/global-messages'; -import styles from './WalletSummary.scss'; -import type { UnitOfAccountSettingType } from '../../../types/unitOfAccountType'; -import { formatValue } from '../../../utils/unit-of-account'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import { splitAmount, truncateToken } from '../../../utils/formatters'; -import { MultiToken } from '../../../api/common/lib/MultiToken'; -import { hiddenAmount } from '../../../utils/strings'; -import type { TokenLookupKey } from '../../../api/common/lib/MultiToken'; -import { getTokenName } from '../../../stores/stateless/tokenHelpers'; -import type { TokenRow } from '../../../api/ada/lib/storage/database/primitives/tables'; -import BigNumber from 'bignumber.js'; - -const messages = defineMessages({ - pendingOutgoingConfirmationLabel: { - id: 'wallet.summary.page.pendingOutgoingConfirmationLabel', - defaultMessage: '!!!Outgoing pending confirmation', - }, - pendingIncomingConfirmationLabel: { - id: 'wallet.summary.page.pendingIncomingConfirmationLabel', - defaultMessage: '!!!Incoming pending confirmation', - }, - numOfTxsLabel: { - id: 'wallet.summary.page.transactionsLabel', - defaultMessage: '!!!Number of transactions', - }, - exportIconTooltip: { - id: 'wallet.transaction.export.exportIcon.tooltip', - defaultMessage: '!!!Export', - }, - dateSection: { - id: 'wallet.summary.page.dateTime', - defaultMessage: '!!!Date/time', - }, - typeSection: { - id: 'wallet.summary.page.type', - defaultMessage: '!!!Transaction type', - }, - statusSection: { - id: 'wallet.summary.page.status', - defaultMessage: '!!!Status', - }, -}); - -type Props = {| - +shouldHideBalance: boolean, - +pendingAmount: UnconfirmedAmount, - +isLoadingTransactions: boolean, - +openExportTxToFileDialog: void => void, - +unitOfAccountSetting: UnitOfAccountSettingType, - +getTokenInfo: ($ReadOnly>) => $ReadOnly, - +getHistoricalPrice: (from: string, to: string, timestamp: number) => ?string, -|}; - -@observer -export default class WalletSummary extends Component { - static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { - intl: intlShape.isRequired, - }; - - renderAmountDisplay: ({| - shouldHideBalance: boolean, - amount: MultiToken, - |}) => Node = request => { - const defaultEntry = request.amount.getDefaultEntry(); - const tokenInfo = this.props.getTokenInfo(defaultEntry); - - let balanceDisplay; - if (request.shouldHideBalance) { - balanceDisplay = {hiddenAmount}; - } else { - const shiftedAmount = defaultEntry.amount.shiftedBy(-tokenInfo.Metadata.numberOfDecimals); - const [beforeDecimalRewards, afterDecimalRewards] = splitAmount( - shiftedAmount, - tokenInfo.Metadata.numberOfDecimals - ); - - balanceDisplay = ( - <> - {beforeDecimalRewards} - {afterDecimalRewards} - - ); - } - - return ( - <> - {balanceDisplay} {truncateToken(getTokenName(tokenInfo))} - - ); - }; - - renderPendingAmount( - timestampedAmount: Array<{| amount: MultiToken, timestamp: number |}>, - label: string - ): Node { - if (!timestampedAmount.length) { - return null; - } - - const { - getHistoricalPrice, - unitOfAccountSetting, - shouldHideBalance, - getTokenInfo, - } = this.props; - - let pendingAmount = null; - if (false /* temporarily disabled */ && unitOfAccountSetting.enabled) { - const { currency } = unitOfAccountSetting; - if (!currency) { - throw new Error(`unexpected unit of account ${String(currency)}`); - } - if (shouldHideBalance) { - pendingAmount = ( - <> - {hiddenAmount} -   - {currency} - - ); - } else { - let totalFiatAmount = new BigNumber('0'); - for (const { amount, timestamp } of timestampedAmount) { - const tokenEntry = amount.getDefaultEntry(); - const tokenInfo = getTokenInfo(tokenEntry); - const ticker = tokenInfo.Metadata.ticker; - if (ticker == null) { - throw new Error('unexpected main token type'); - } - - const price = getHistoricalPrice(ticker, currency, timestamp); - if (price == null) { - totalFiatAmount = null; - break; - } - totalFiatAmount = totalFiatAmount.plus( - tokenEntry.amount - .shiftedBy(-tokenInfo.Metadata.numberOfDecimals) - .multipliedBy(String(price)) - ); - } - if (totalFiatAmount) { - const [beforeDecimal, afterDecimal] = formatValue(totalFiatAmount).split('.'); - - pendingAmount = ( - <> - {beforeDecimal} - {afterDecimal && .{afterDecimal}} -   - {currency} - - ); - } - } - } - - if (!pendingAmount) { - pendingAmount = this.renderAmountDisplay({ - shouldHideBalance, - amount: timestampedAmount - .map(({ amount }) => amount) - .reduce((accuAmount, curAmount) => accuAmount.joinAddCopy(curAmount)), - }); - } - - return ( -
    - {label}:  - {pendingAmount} -
    - ); - } - - render(): Node { - const { - pendingAmount, - isLoadingTransactions, - openExportTxToFileDialog, - } = this.props; - const { intl } = this.context; - - const content = ( -
    -
    -
    - - {!isLoadingTransactions && ( - <> - {(pendingAmount.incoming.length > 0 || pendingAmount.outgoing.length > 0) && ( -
    - {this.renderPendingAmount( - pendingAmount.incoming, - intl.formatMessage(messages.pendingIncomingConfirmationLabel) - )} - {this.renderPendingAmount( - pendingAmount.outgoing, - intl.formatMessage(messages.pendingOutgoingConfirmationLabel) - )} -
    - )} - - )} -     -
    -
    - {!isLoadingTransactions ? ( - - - - ) : null} -
    -
    -
    - {intl.formatMessage(messages.dateSection)} -
    -
    - {intl.formatMessage(messages.typeSection)} -
    -
    - {intl.formatMessage(messages.statusSection)} -
    -
    - {intl.formatMessage(globalMessages.feeLabel)} -
    -
    - {intl.formatMessage(globalMessages.amountLabel)} -
    -
    -
    - ); - - return
    {content}
    ; - } -} diff --git a/packages/yoroi-extension/app/components/wallet/syncingOverlay/WalletSyncingOverlay.js b/packages/yoroi-extension/app/components/wallet/syncingOverlay/WalletSyncingOverlay.js deleted file mode 100644 index 5dc13ccdca..0000000000 --- a/packages/yoroi-extension/app/components/wallet/syncingOverlay/WalletSyncingOverlay.js +++ /dev/null @@ -1,74 +0,0 @@ -// @flow -import type { Node } from 'react'; -import { Component } from 'react'; -import { observer } from 'mobx-react'; -import { intlShape, defineMessages } from 'react-intl'; -import styles from './WalletSyncingOverlay.scss'; -import Dialog from '../../widgets/Dialog'; -import DialogCloseButton from '../../widgets/DialogCloseButton'; -import LoadingSpinner from '../../widgets/LoadingSpinner'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; - -type Props = {| - +classicTheme: boolean, - +onClose: void => PossiblyAsync, -|}; - -const messages = defineMessages({ - title: { - id: 'wallet.syncingOverlay.title', - defaultMessage: '!!!Wallet Syncing', - }, - explanation: { - id: 'wallet.syncingOverlay.explanation', - defaultMessage: '!!!Please wait while we process wallet data. This may take some time.' - }, - returnBtnLabel: { - id: 'wallet.syncingOverlay.return', - defaultMessage: '!!!Return to my wallets' - } -}) -@observer -export default class WalletSyncingOverlay extends Component { - - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { - intl: intlShape.isRequired - }; - - render(): Node { - const { intl } = this.context; - const actions = this.props.onClose == null - ? undefined - : [{ - label: intl.formatMessage(messages.returnBtnLabel), - onClick: this.props.onClose, - primary: true - }]; - - return ( - ) : undefined} - > -
    -
    -
    -
    - {intl.formatMessage(messages.title)} -
    -
    - {intl.formatMessage(messages.explanation)} -
    -
    - -
    -
    -
    -
    - ); - } -} diff --git a/packages/yoroi-extension/app/components/wallet/syncingOverlay/WalletSyncingOverlay.scss b/packages/yoroi-extension/app/components/wallet/syncingOverlay/WalletSyncingOverlay.scss deleted file mode 100644 index 6624a2544f..0000000000 --- a/packages/yoroi-extension/app/components/wallet/syncingOverlay/WalletSyncingOverlay.scss +++ /dev/null @@ -1,30 +0,0 @@ -.component { - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - .title { - color: var(--theme-default-main-color); - text-transform: uppercase; - height: 19px; - font-family: var(--font-semibold); - font-size: 16px; - font-weight: 500; - line-height: 19px; - text-align: center; - } - - .text { - color: var(--card-text-color); - font-family: var(--font-regular); - font-size: 14px; - line-height: 22px; - text-align: center; - margin-top: 10px; - } - - .spinnerSection { - margin-top: 34px; - } -} - \ No newline at end of file diff --git a/packages/yoroi-extension/app/components/wallet/transactions/TransactionRevamp.js b/packages/yoroi-extension/app/components/wallet/transactions/TransactionRevamp.js index 1ca486c0f3..b969fc158d 100644 --- a/packages/yoroi-extension/app/components/wallet/transactions/TransactionRevamp.js +++ b/packages/yoroi-extension/app/components/wallet/transactions/TransactionRevamp.js @@ -66,7 +66,7 @@ type Props = {| +onCopyAddressTooltip: (string, string) => void, +notification: ?Notification, +addressToDisplayString: string => string, - +getTokenInfo: ($ReadOnly>) => $ReadOnly, + +getTokenInfo: ($ReadOnly>) => $ReadOnly | null, +complexityLevel: ?ComplexityLevelType, id: string, txIndex: number, @@ -208,8 +208,9 @@ export default class TransactionRevamp extends Component { if (this.props.unitOfAccountSetting.enabled) { const tokenInfo = this.props.getTokenInfo(request.entry); - const shiftedAmount = request.entry.amount.shiftedBy(-tokenInfo.Metadata.numberOfDecimals); - const ticker = tokenInfo.Metadata.ticker; + const numberOfDecimals = tokenInfo?.Metadata.numberOfDecimals ?? 0; + const shiftedAmount = request.entry.amount.shiftedBy(- numberOfDecimals); + const ticker = tokenInfo?.Metadata.ticker; if (ticker == null) { throw new Error('unexpected main token type'); } @@ -292,16 +293,16 @@ export default class TransactionRevamp extends Component { } const defaultEntry = request.amount.getDefaultEntry(); const tokenInfo = this.props.getTokenInfo(defaultEntry); - const shiftedAmount = defaultEntry.amount.shiftedBy(-tokenInfo.Metadata.numberOfDecimals).abs(); - - const [beforeDecimalRewards, afterDecimalRewards] = splitAmount(shiftedAmount, tokenInfo.Metadata.numberOfDecimals); + const decimalPlaces = tokenInfo?.Metadata.numberOfDecimals ?? 0; + const shiftedAmount = defaultEntry.amount.shiftedBy(-decimalPlaces).abs(); + const [beforeDecimalRewards, afterDecimalRewards] = splitAmount(shiftedAmount, decimalPlaces); if (this.props.unitOfAccountSetting.enabled) { const { currency } = this.props.unitOfAccountSetting; if (currency == null) { throw new Error(`unexpected unit of account ${String(currency)}`); } - const ticker = tokenInfo.Metadata.ticker; + const ticker = tokenInfo?.Metadata.ticker; if (ticker == null) { throw new Error('unexpected main token type'); } diff --git a/packages/yoroi-extension/app/components/wallet/transactions/WalletTransactionsList.js b/packages/yoroi-extension/app/components/wallet/transactions/WalletTransactionsList.js deleted file mode 100644 index 91ecb53d75..0000000000 --- a/packages/yoroi-extension/app/components/wallet/transactions/WalletTransactionsList.js +++ /dev/null @@ -1,204 +0,0 @@ -// @flow -import { Component } from 'react'; -import type { Node } from 'react'; -import { observer } from 'mobx-react'; -import { defineMessages, intlShape } from 'react-intl'; -import { Button } from '@mui/material'; -import moment from 'moment'; -import styles from './WalletTransactionsList.scss'; -import Transaction from './Transaction'; -import WalletTransaction from '../../../domain/WalletTransaction'; -import LoadingSpinner from '../../widgets/LoadingSpinner'; -import type { AssuranceMode } from '../../../types/transactionAssurance.types'; -import { Logger } from '../../../utils/logging'; -import { SelectedExplorer } from '../../../domain/SelectedExplorer'; -import type { UnitOfAccountSettingType } from '../../../types/unitOfAccountType'; -import OneSideBarDecoration from '../../widgets/OneSideBarDecoration'; -import globalMessages from '../../../i18n/global-messages'; -import type { TxMemoTableRow } from '../../../api/ada/lib/storage/database/memos/tables'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import type { Notification } from '../../../types/notification.types'; -import { genAddressLookup } from '../../../stores/stateless/addressStores'; -import type { TokenLookupKey } from '../../../api/common/lib/MultiToken'; -import type { TokenRow } from '../../../api/ada/lib/storage/database/primitives/tables'; -import type { ComplexityLevelType } from '../../../types/complexityLevelType'; - -const messages = defineMessages({ - showMoreTransactionsButtonLabel: { - id: 'wallet.summary.page.showMoreTransactionsButtonLabel', - defaultMessage: '!!!Show more transactions', - }, -}); - -const dateFormat = 'YYYY-MM-DD'; - -type Props = {| - +transactions: Array, - +lastSyncBlock: number, - +memoMap: Map>, - +isLoadingTransactions: boolean, - +hasMoreToLoad: boolean, - +selectedExplorer: SelectedExplorer, - +assuranceMode: AssuranceMode, - +onLoadMore: void => PossiblyAsync, - +shouldHideBalance: boolean, - +onAddMemo: WalletTransaction => void, - +onEditMemo: WalletTransaction => void, - +unitOfAccountSetting: UnitOfAccountSettingType, - +getHistoricalPrice: (from: string, to: string, timestamp: number) => ?string, - +addressLookup: ReturnType, - +onCopyAddressTooltip: (string, string) => void, - +notification: ?Notification, - +addressToDisplayString: string => string, - +getTokenInfo: ($ReadOnly>) => ?$ReadOnly, - +complexityLevel: ?ComplexityLevelType, -|}; - -@observer -export default class WalletTransactionsList extends Component { - static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { - intl: intlShape.isRequired, - }; - - // eslint-disable-next-line camelcase - UNSAFE_componentWillMount(): void { - this.localizedDateFormat = moment.localeData().longDateFormat('L'); - // Localized dateFormat: - // English - MM/DD/YYYY - // Japanese - YYYY/MM/DD - } - - list: HTMLElement; - loadingSpinner: ?LoadingSpinner; - localizedDateFormat: 'MM/DD/YYYY'; - - groupTransactionsByDay( - transactions: Array - ): Array<{| - date: string, - transactions: Array, - |}> { - const groups: Array<{| - date: string, - transactions: Array, - |}> = []; - for (const transaction of transactions) { - const date: string = moment(transaction.date).format(dateFormat); - // find the group this transaction belongs in - let group = groups.find(g => g.date === date); - // if first transaction in this group, create the group - if (!group) { - group = { date, transactions: [] }; - groups.push(group); - } - group.transactions.push(transaction); - } - return groups.sort( - (a, b) => b.transactions[0].date.getTime() - a.transactions[0].date.getTime() - ); - } - - localizedDate(date: string): string { - const { intl } = this.context; - const today = moment().format(dateFormat); - if (date === today) return intl.formatMessage(globalMessages.dateToday); - const yesterday = moment().subtract(1, 'days').format(dateFormat); - if (date === yesterday) return intl.formatMessage(globalMessages.dateYesterday); - return moment(date).format(this.localizedDateFormat); - } - - getTransactionKey(transactions: Array): string { - if (transactions.length) { - const firstTransaction = transactions[0]; - return firstTransaction.uniqueKey; - } - // this branch should not happen - Logger.error( - '[WalletTransactionsList::getTransactionKey] tried to render empty transaction group' - ); - return ''; - } - - render(): Node { - const { intl } = this.context; - const { - transactions, - isLoadingTransactions, - hasMoreToLoad, - assuranceMode, - onLoadMore, - onAddMemo, - onEditMemo, - notification, - onCopyAddressTooltip, - } = this.props; - const transactionsGroups = this.groupTransactionsByDay(transactions); - - const loadingSpinner = isLoadingTransactions ? ( -
    - { - this.loadingSpinner = component; - }} - /> -
    - ) : null; - - return ( -
    - {transactionsGroups.map(group => ( -
    -
    - -
    {this.localizedDate(group.date)}
    -     -
    -
    - {group.transactions.map((transaction, transactionIndex) => ( - - ))} -
    -
    - ))} - {loadingSpinner} - {!isLoadingTransactions && hasMoreToLoad && ( - - )} -
    - ); - } -} diff --git a/packages/yoroi-extension/app/components/wallet/transactions/WalletTransactionsList.scss b/packages/yoroi-extension/app/components/wallet/transactions/WalletTransactionsList.scss deleted file mode 100644 index b4cefc0aa6..0000000000 --- a/packages/yoroi-extension/app/components/wallet/transactions/WalletTransactionsList.scss +++ /dev/null @@ -1,34 +0,0 @@ -.component { - margin-top: 22px; - // min-width: fit-content; - overflow-y: overlay; - - .group { - &:last-child { - margin-bottom: 17px; - } - } - - .bar { - padding-right: 24px; - - .groupDate { - padding-left: 24px; - font-size: 14px; - line-height: 1.38; - color: var(--yoroi-palette-gray-600); - } - } - - .list { - margin-bottom: 20px; - - &:last-child { - margin: 0; - } - } -} - -.loading { - margin: 20px 0; -} diff --git a/packages/yoroi-extension/app/components/wallet/transactions/WalletTransactionsListRevamp.js b/packages/yoroi-extension/app/components/wallet/transactions/WalletTransactionsListRevamp.js index 8542a65f2e..4ff55e673e 100644 --- a/packages/yoroi-extension/app/components/wallet/transactions/WalletTransactionsListRevamp.js +++ b/packages/yoroi-extension/app/components/wallet/transactions/WalletTransactionsListRevamp.js @@ -5,7 +5,7 @@ import { observer } from 'mobx-react'; import { defineMessages, intlShape } from 'react-intl'; import { Button, Typography } from '@mui/material'; import moment from 'moment'; -import styles from './WalletTransactionsList.scss'; +import styles from './WalletTransactionsListRevamp.scss'; import WalletTransaction from '../../../domain/WalletTransaction'; import LoadingSpinner from '../../widgets/LoadingSpinner'; import type { AssuranceMode } from '../../../types/transactionAssurance.types'; @@ -50,7 +50,7 @@ type Props = {| +onCopyAddressTooltip: (string, string) => void, +notification: ?Notification, +addressToDisplayString: string => string, - +getTokenInfo: ($ReadOnly>) => $ReadOnly, + +getTokenInfo: ($ReadOnly>) => $ReadOnly | null, +complexityLevel: ?ComplexityLevelType, id: string, |}; diff --git a/packages/yoroi-extension/app/components/wallet/transactions/WalletTransactionsListRevamp.scss b/packages/yoroi-extension/app/components/wallet/transactions/WalletTransactionsListRevamp.scss new file mode 100644 index 0000000000..193f8ccafb --- /dev/null +++ b/packages/yoroi-extension/app/components/wallet/transactions/WalletTransactionsListRevamp.scss @@ -0,0 +1,3 @@ +.loading { + margin: 20px 0; +} diff --git a/packages/yoroi-extension/app/components/wallet/voting/ConfirmPinDialog.js b/packages/yoroi-extension/app/components/wallet/voting/ConfirmPinDialog.js index 8e6410e6a5..c68c658c63 100644 --- a/packages/yoroi-extension/app/components/wallet/voting/ConfirmPinDialog.js +++ b/packages/yoroi-extension/app/components/wallet/voting/ConfirmPinDialog.js @@ -12,7 +12,6 @@ import globalMessages from '../../../i18n/global-messages'; import Dialog from '../../widgets/Dialog'; import DialogCloseButton from '../../widgets/DialogCloseButton'; import DialogBackButton from '../../widgets/DialogBackButton'; -import ProgressStepBlock from './ProgressStepBlock'; import { ProgressInfo } from '../../../stores/ada/VotingStore'; import PinInput from '../../widgets/forms/PinInput'; @@ -36,10 +35,8 @@ type Props = {| +submit: void => PossiblyAsync, +error: void => PossiblyAsync, +cancel: void => void, - +classicTheme: boolean, +pinValidation: string => boolean, +isProcessing: boolean, - +isRevamp: boolean, |}; @observer @@ -61,7 +58,6 @@ export default class ConfirmPinDialog extends Component { progressInfo, goBack, cancel, - classicTheme, pinValidation, isProcessing, } = this.props; @@ -86,14 +82,18 @@ export default class ConfirmPinDialog extends Component { backButton={} onClose={cancel} > - {this.props.isRevamp ? ( + {( <> ({ message: step.message, stepId: String(step.step) }))} + steps={stepsList.map(step => ({ + message: step.message, + stepId: String(step.step) + }))} setCurrentStep={() => goBack()} /> - { - ) : ( - <> - -
    - -
    - )}
    this.setPinForm(form)} disabled={false} - classicTheme={classicTheme} pinMatches={pinValidation} fieldName="pin" validCheck={_pin => true} diff --git a/packages/yoroi-extension/app/components/wallet/voting/GeneratePinDialog.js b/packages/yoroi-extension/app/components/wallet/voting/GeneratePinDialog.js index 2c87d868d6..ee19dcee33 100644 --- a/packages/yoroi-extension/app/components/wallet/voting/GeneratePinDialog.js +++ b/packages/yoroi-extension/app/components/wallet/voting/GeneratePinDialog.js @@ -13,7 +13,6 @@ import Stepper from '../../common/stepper/Stepper'; import DialogCloseButton from '../../widgets/DialogCloseButton'; import DialogBackButton from '../../widgets/DialogBackButton'; import classnames from 'classnames'; -import ProgressStepBlock from './ProgressStepBlock'; import styles from './GeneratePinDialog.scss'; const messages = defineMessages({ @@ -34,9 +33,7 @@ type Props = {| +next: void => void, +cancel: void => void, +onBack: void => void, - +classicTheme: boolean, +pin: Array, - +isRevamp: boolean, |}; @observer @@ -47,7 +44,7 @@ export default class GeneratePinDialog extends Component { render(): Node { const { intl } = this.context; - const { stepsList, progressInfo, next, cancel, classicTheme, pin, isRevamp } = this.props; + const { stepsList, progressInfo, next, cancel, pin } = this.props; const dialogActions = [ { @@ -61,7 +58,7 @@ export default class GeneratePinDialog extends Component {
    {pin.map((value, index) => { // eslint-disable-next-line react/no-array-index-key - return isRevamp ? ( + return ( { {value} - ) : ( -
    - {value} -
    ); })}
    @@ -98,25 +91,28 @@ export default class GeneratePinDialog extends Component { backButton={} onClose={cancel} > - {this.props.isRevamp ? ( + {( <> ({ message: step.message, stepId: String(step.step) }))} - setCurrentStep={() => {}} + steps={stepsList.map(step => ({ + message: step.message, + stepId: String(step.step) + }))} + setCurrentStep={() => { + }} /> - + - ) : ( - <> - - -
    - -
    - )} {pinCards} diff --git a/packages/yoroi-extension/app/components/wallet/voting/ProgressStepBlock.js b/packages/yoroi-extension/app/components/wallet/voting/ProgressStepBlock.js index e7cebf83af..f2f780221d 100644 --- a/packages/yoroi-extension/app/components/wallet/voting/ProgressStepBlock.js +++ b/packages/yoroi-extension/app/components/wallet/voting/ProgressStepBlock.js @@ -12,7 +12,6 @@ import type { StepsList } from './types'; type Props = {| +stepsList: StepsList, +progressInfo: ProgressInfo, - +classicTheme: boolean |}; @observer @@ -24,7 +23,7 @@ export default class ProgressStepBlock extends Component { render(): Node { const { intl } = this.context; - const { stepsList, progressInfo, classicTheme } = this.props; + const { stepsList, progressInfo } = this.props; const currentStep = stepsList.findIndex(({ step }) => step === progressInfo.currentStep); @@ -33,7 +32,6 @@ export default class ProgressStepBlock extends Component { stepsList={stepsList.map(({ message }) => intl.formatMessage(message))} currentStep={currentStep} stepState={progressInfo.stepState} - classicTheme={classicTheme} />); } } diff --git a/packages/yoroi-extension/app/components/wallet/voting/QrCodeDialog.js b/packages/yoroi-extension/app/components/wallet/voting/QrCodeDialog.js index ccc3714353..997b757aca 100644 --- a/packages/yoroi-extension/app/components/wallet/voting/QrCodeDialog.js +++ b/packages/yoroi-extension/app/components/wallet/voting/QrCodeDialog.js @@ -47,7 +47,6 @@ type Props = {| +onExternalLinkClick: MouseEvent => void, +submit: void => PossiblyAsync, +cancel: void => void, - +classicTheme: boolean, +votingKey: string | null, |}; @@ -60,7 +59,7 @@ export default class QrCodeDialog extends Component { render(): Node { const { intl } = this.context; - const { stepsList, progressInfo, submit, cancel, classicTheme, votingKey } = this.props; + const { stepsList, progressInfo, submit, cancel, votingKey } = this.props; const dialogActions = [ { @@ -84,7 +83,7 @@ export default class QrCodeDialog extends Component { closeButton={} onClose={cancel} > - + {intl.formatMessage(messages.lineTitle)} diff --git a/packages/yoroi-extension/app/components/wallet/voting/RegisterDialog.js b/packages/yoroi-extension/app/components/wallet/voting/RegisterDialog.js index 65227db66a..c8a64bd1e3 100644 --- a/packages/yoroi-extension/app/components/wallet/voting/RegisterDialog.js +++ b/packages/yoroi-extension/app/components/wallet/voting/RegisterDialog.js @@ -13,7 +13,6 @@ import globalMessages from '../../../i18n/global-messages'; import Dialog from '../../widgets/Dialog'; import DialogCloseButton from '../../widgets/DialogCloseButton'; import SpendingPasswordInput from '../../widgets/forms/SpendingPasswordInput'; -import ProgressStepBlock from './ProgressStepBlock'; import styles from './RegisterDialog.scss'; import { Typography } from '@mui/material'; import Stepper from '../../common/stepper/Stepper'; @@ -31,9 +30,7 @@ type Props = {| +progressInfo: ProgressInfo, +submit: string => PossiblyAsync, +cancel: void => void, - +classicTheme: boolean, +isProcessing: boolean, - +isRevamp: boolean, |}; @observer @@ -49,7 +46,7 @@ export default class RegisterDialog extends Component { } render(): Node { const { intl } = this.context; - const { stepsList, progressInfo, cancel, classicTheme, isProcessing } = this.props; + const { stepsList, progressInfo, cancel, isProcessing } = this.props; const dailogActions = [ { @@ -70,14 +67,19 @@ export default class RegisterDialog extends Component { closeButton={} onClose={cancel} > - {this.props.isRevamp ? ( + {( <> ({ message: step.message, stepId: String(step.step) }))} - setCurrentStep={() => {}} + steps={stepsList.map(step => ({ + message: step.message, + stepId: String(step.step) + }))} + setCurrentStep={() => { + }} /> - { {intl.formatMessage(messages.line1)} - ) : ( - <> - -
    - {intl.formatMessage(messages.line1)} -
    - )}
    this.setSpendingPasswordForm(form)} - classicTheme={this.props.classicTheme} isSubmitting={isProcessing} />
    diff --git a/packages/yoroi-extension/app/components/wallet/voting/Voting.js b/packages/yoroi-extension/app/components/wallet/voting/Voting.js index f945a7a9ab..39eb62a075 100644 --- a/packages/yoroi-extension/app/components/wallet/voting/Voting.js +++ b/packages/yoroi-extension/app/components/wallet/voting/Voting.js @@ -1,5 +1,5 @@ // @flow -import type { ComponentType, Node } from 'react'; +import type { Node } from 'react'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import type { WalletType } from './types'; import { Component } from 'react'; @@ -10,7 +10,6 @@ import { ReactComponent as AppStoreBadge } from '../../../assets/images/app-stor import { ReactComponent as PlayStoreBadge } from '../../../assets/images/google-play-badge.inline.svg'; import { ReactComponent as ExclamationIcon } from '../../../assets/images/revamp/icons/exclamation-circle.inline.svg'; import { ReactComponent as CrossIcon } from '../../../assets/images/revamp/icons/cross.inline.svg'; -import { withLayout } from '../../../styles/context/layout'; import Step1Image from '../../../assets/images/revamp/catalyst-step1.inline.svg'; import Step2Image from '../../../assets/images/revamp/catalyst-step2.inline.svg'; import TrezorStepImage from '../../../assets/images/pic-catalyst-step3-trezor.inline.svg'; @@ -69,10 +68,6 @@ type Props = {| +walletType: WalletType, |}; -type InjectedProps = {| - +isRevampLayout: boolean, -|}; - type State = {| +showDisclamer: boolean, |}; @@ -91,12 +86,12 @@ const WarningWrapper = styled(Box)(({ theme }) => ({ })); @observer -class Voting extends Component { +export default class Voting extends Component { static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; - state = { + state: State = { showDisclamer: true, }; @@ -133,7 +128,7 @@ class Voting extends Component { throw new Error(`${nameof(Voting)} impossible wallet type`); } - renderRevampLayout() { + render(): Node { const { intl } = this.context; const { walletType } = this.props; const { showDisclamer } = this.state; @@ -231,80 +226,4 @@ class Voting extends Component { ); } - - renderLayout() { - const { intl } = this.context; - const fundName = this.props.name; - const pendingTxWarningComponent = this.props.hasAnyPending ? ( -
    - {this.context.intl.formatMessage(globalMessages.sendingIsDisabled)} -
    - ) : null; - return ( - <> - {pendingTxWarningComponent} - -
    -
    - {this.props.isDelegated ? ( -
    {intl.formatMessage(messages.keepDelegated)}
    - ) : ( -
    - {intl.formatMessage(messages.notDelegated)} -
    - )} -
    - -
    - {intl.formatMessage(messages.lineTitle, { fundName })} -
    - -
    {intl.formatMessage(messages.line2)}
    - -
    - -
    -
    - 2 -
    -
    {intl.formatMessage(messages.line4)}
    -
    - {this.renderStep3()} -
    -
    - -
    -
    - - ); - } - - render(): Node { - return this.props.isRevampLayout ? this.renderRevampLayout() : this.renderLayout(); - } } - -export default (withLayout(Voting): ComponentType); diff --git a/packages/yoroi-extension/app/components/wallet/voting/VotingRegTxDialog.js b/packages/yoroi-extension/app/components/wallet/voting/VotingRegTxDialog.js index 001730f0ee..86c812af76 100644 --- a/packages/yoroi-extension/app/components/wallet/voting/VotingRegTxDialog.js +++ b/packages/yoroi-extension/app/components/wallet/voting/VotingRegTxDialog.js @@ -21,7 +21,6 @@ import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import SpendingPasswordInput from '../../widgets/forms/SpendingPasswordInput'; import { AmountInput } from '../../common/NumericInputRP'; import { ProgressInfo } from '../../../stores/ada/VotingStore'; -import ProgressStepBlock from './ProgressStepBlock'; import WarningBox from '../../widgets/WarningBox'; import { getTokenName, genFormatTokenAmount } from '../../../stores/stateless/tokenHelpers'; import type { TokenLookupKey } from '../../../api/common/lib/MultiToken'; @@ -57,11 +56,9 @@ type Props = {| +onCancel: void => void, +goBack: void => void, +onSubmit: ({| password?: string |}) => PossiblyAsync, - +classicTheme: boolean, +error: ?LocalizableError, +getTokenInfo: ($ReadOnly>) => $ReadOnly, +walletType: WalletType, - +isRevamp: boolean, |}; @observer @@ -138,7 +135,6 @@ export default class VotingRegTxDialog extends Component { this.props.walletType === 'mnemonic' ? ( this.setSpendingPasswordForm(form)} - classicTheme={this.props.classicTheme} isSubmitting={this.props.isSubmitting} /> ) : undefined; // hardware wallet @@ -181,7 +177,7 @@ export default class VotingRegTxDialog extends Component { closeButton={} backButton={} > - {this.props.isRevamp ? ( + {( ({ @@ -190,12 +186,6 @@ export default class VotingRegTxDialog extends Component { }))} setCurrentStep={() => {}} /> - ) : ( - )} {this.props.staleTx && staleTxWarning} diff --git a/packages/yoroi-extension/app/components/widgets/Accordion.js b/packages/yoroi-extension/app/components/widgets/Accordion.js index bc8bd3283e..ae8cd27ff9 100644 --- a/packages/yoroi-extension/app/components/widgets/Accordion.js +++ b/packages/yoroi-extension/app/components/widgets/Accordion.js @@ -1,13 +1,11 @@ // @flow +import type { Node } from 'react'; import { Component } from 'react'; -import type { ComponentType, Node } from 'react'; import { observer } from 'mobx-react'; import classnames from 'classnames'; import { ReactComponent as ArrowDownSVG } from '../../assets/images/expand-arrow-grey.inline.svg'; import styles from './Accordion.scss'; -import { withLayout } from '../../styles/context/layout'; -import type { InjectedLayoutProps } from '../../styles/context/layout'; type Props = {| +header: Node, @@ -23,7 +21,7 @@ type State = {| |}; @observer -class Accordion extends Component { +export default class Accordion extends Component { state: State = { isToggle: true, }; @@ -33,13 +31,13 @@ class Accordion extends Component { }; render(): Node { - const { header, children, style, isRevampLayout } = this.props; + const { header, children, style } = this.props; const { isToggle } = this.state; const activeButtonClasses = classnames([ styles.accordionTitle, isToggle && styles.activeArrow, - isRevampLayout && styles.revamp, + styles.revamp, this.props.activeHeader && styles.activeHead, ]); @@ -69,5 +67,3 @@ class Accordion extends Component { ); } } - -export default (withLayout(Accordion): ComponentType); diff --git a/packages/yoroi-extension/app/components/widgets/DangerousActionDialog.js b/packages/yoroi-extension/app/components/widgets/DangerousActionDialog.js index 425de41da6..3ce8135b85 100644 --- a/packages/yoroi-extension/app/components/widgets/DangerousActionDialog.js +++ b/packages/yoroi-extension/app/components/widgets/DangerousActionDialog.js @@ -1,18 +1,15 @@ // @flow -import type { Node, ComponentType } from 'react'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import type { InjectedLayoutProps } from '../../styles/context/layout'; +import type { Node } from 'react'; import { Component } from 'react'; -import { observer } from 'mobx-react'; +import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import { intlShape } from 'react-intl'; -import { withLayout } from '../../styles/context/layout'; -import { Box, FormControlLabel, Checkbox as MuiCheckbox } from '@mui/material'; +import { observer } from 'mobx-react'; +import { Box, Checkbox as MuiCheckbox, FormControlLabel } from '@mui/material'; import classnames from 'classnames'; import DialogCloseButton from './DialogCloseButton'; import Dialog from './Dialog'; import globalMessages from '../../i18n/global-messages'; import LocalizableError from '../../i18n/LocalizableError'; -import CheckboxLabel from '../common/CheckboxLabel'; import styles from './DangerousActionDialog.scss'; type Props = {| @@ -38,14 +35,14 @@ type Props = {| |}; @observer -class DangerousActionDialog extends Component { +export default class DangerousActionDialog extends Component { static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; render(): Node { const { intl } = this.context; - const { isSubmitting, error, renderLayoutComponent, id } = this.props; + const { isSubmitting, error, id } = this.props; const dialogClasses = classnames(['removeWalletDialog', styles.dialog]); @@ -68,48 +65,6 @@ class DangerousActionDialog extends Component { }, ]; - const classicLayout = ( -
    - {this.props.children} -
    - -
    - - {error ?

    {intl.formatMessage(error, error.values)}

    : null} -
    - ); - - const revampLayout = ( - - {this.props.children} - - - } - id={id + '-acknowledgeAction-checkbox'} - sx={{ marginLeft: '-0px', color: 'ds.text_gray_medium' }} - /> - - {error ?

    {intl.formatMessage(error, error.values)}

    : null} -     - ); - - const content = renderLayoutComponent({ - CLASSIC: classicLayout, - REVAMP: revampLayout, - }); - return ( { closeButton={} id={id} > - {content} + {( + + {this.props.children} + + + } + id={id + '-acknowledgeAction-checkbox'} + sx={{ marginLeft: '-0px', color: 'ds.text_gray_medium' }} + /> + + {error ?

    {intl.formatMessage(error, error.values)}

    : null} +     + )}     ); } } - -export default (withLayout(DangerousActionDialog): ComponentType); diff --git a/packages/yoroi-extension/app/components/widgets/Dialog.js b/packages/yoroi-extension/app/components/widgets/Dialog.js index ecd05db5aa..ac0c7614ac 100644 --- a/packages/yoroi-extension/app/components/widgets/Dialog.js +++ b/packages/yoroi-extension/app/components/widgets/Dialog.js @@ -1,12 +1,11 @@ /* eslint-disable no-nested-ternary */ // @flow -import type { Node, Element, ComponentType } from 'react'; +import type { ComponentType, Element, Node } from 'react'; import React, { forwardRef, useEffect, useState } from 'react'; import { map } from 'lodash'; import { Modal, Typography, IconButton } from '@mui/material'; import { Box, styled } from '@mui/system'; import { LoadingButton } from '@mui/lab'; -import { withLayout } from '../../styles/context/layout'; import { observer } from 'mobx-react'; import { ReactComponent as CrossIcon } from '../../assets/images/revamp/icons/cross.inline.svg'; @@ -39,16 +38,13 @@ export type Props = {| +styleContentOverride?: { ... }, +onClose?: ?(void) => PossiblyAsync, +closeOnOverlayClick?: boolean, - +isRevampLayout?: boolean, id?: string, +styleFlags?: StyleFlag, +forceBottomDivider?: boolean, +contentHeader?: Node, |}; -type InjectedProps = {| isRevampLayout: boolean |}; - -function Dialog(props: Props & InjectedProps): Node { +function Dialog(props: Props): Node { const { title, children, @@ -60,7 +56,6 @@ function Dialog(props: Props & InjectedProps): Node { withCloseButton, backButton, scrollableContentClass, - isRevampLayout, id, styleFlags, forceBottomDivider, @@ -108,7 +103,7 @@ function Dialog(props: Props & InjectedProps): Node { } } sx={{ - bgcolor: isRevampLayout ? 'ds.special_web_overlay' : 'var(--yoroi-comp-dialog-overlay-background-color)', + bgcolor: 'ds.special_web_overlay', display: 'flex', justifyContent: 'center', alignItems: 'center', @@ -172,7 +167,7 @@ function Dialog(props: Props & InjectedProps): Node { // $FlowIgnore id={action.id ?? id + '-' + buttonLabel + '-button'} key={i} - {...getBtnVariant(action.danger, action.primary, isRevampLayout)} + {...getBtnVariant(action.danger, action.primary)} loading={action.isSubmitting} onClick={action.onClick} disabled={action.disabled === true || action.isSubmitting === true} @@ -317,24 +312,22 @@ const ModalFooter = styled(StyledBox)(({ theme, hasDivider }) => ({ function getBtnVariant( danger?: boolean, primary?: boolean, - isRevampLayout?: boolean ): {| variant: 'contained' | 'outlined' | 'danger' | 'primary' | 'secondary', color?: 'primary' | 'secondary' | 'error', |} { - if (danger && isRevampLayout) return { variant: 'contained', color: 'error' }; - - if (isRevampLayout && primary) { + if (danger) { + return { variant: 'contained', color: 'error' }; + } + if (primary) { return { variant: 'primary' }; } - - if (isRevampLayout && !primary) { + if (!primary) { return { variant: 'secondary' }; } - if (danger === true) return { variant: 'danger' }; if (primary === true) return { variant: 'primary' }; return { variant: 'secondary' }; } -export default (withLayout(observer(Dialog)): ComponentType); +export default (observer(Dialog): ComponentType); diff --git a/packages/yoroi-extension/app/components/widgets/DialogCloseButton.js b/packages/yoroi-extension/app/components/widgets/DialogCloseButton.js index e86c0a4d7f..de59811ca9 100644 --- a/packages/yoroi-extension/app/components/widgets/DialogCloseButton.js +++ b/packages/yoroi-extension/app/components/widgets/DialogCloseButton.js @@ -1,31 +1,25 @@ // @flow +import type { Node } from 'react'; import { Component } from 'react'; -import type { ComponentType, Node } from 'react'; import { observer } from 'mobx-react'; - -import { ReactComponent as CloseCross } from '../../assets/images/cross-dark.inline.svg'; import { ReactComponent as CloseCrossRevamp } from '../../assets/images/cross-dark-revamp.inline.svg'; import { IconButton, styled } from '@mui/material'; -import { withLayout } from '../../styles/context/layout'; -import type { InjectedLayoutProps } from '../../styles/context/layout'; type Props = {| +onClose?: void => PossiblyAsync, +icon?: ?string, - +isRevampLayout?: boolean, |}; @observer -class DialogCloseButton extends Component { +export default class DialogCloseButton extends Component { static defaultProps: {| icon: null, onClose: void |} = { onClose: undefined, icon: null, }; render(): Node { - const { onClose, icon, isRevampLayout } = this.props; - const defaultIcon = isRevampLayout ? CloseCrossRevamp : CloseCross; - const Svg = icon != null && icon !== '' ? icon : defaultIcon; + const { onClose, icon } = this.props; + const Svg = icon != null && icon !== '' ? icon : CloseCrossRevamp; return ( @@ -43,5 +37,3 @@ const SIconBtn = styled(IconButton)(({ theme, active }) => ({ }, }, })); - -export default (withLayout(DialogCloseButton): ComponentType); diff --git a/packages/yoroi-extension/app/components/widgets/NotificationMessage.js b/packages/yoroi-extension/app/components/widgets/NotificationMessage.js deleted file mode 100644 index db7b71529c..0000000000 --- a/packages/yoroi-extension/app/components/widgets/NotificationMessage.js +++ /dev/null @@ -1,42 +0,0 @@ -// @flow -import { Component } from 'react'; -import type { Node } from 'react'; -import { observer } from 'mobx-react'; -import classNames from 'classnames'; -import styles from './NotificationMessage.scss'; - -type Props = {| - +icon: string, - +show: boolean, - +children?: Node, -|}; - -@observer -export default class NotificationMessage extends Component { - static defaultProps: {|children: null|} = { - children: null - }; - - render(): Node { - const { icon, show, children } = this.props; - - const notificationMessageStyles = classNames([ - styles.component, - show ? styles.show : null, - ]); - - const SvgElem = icon; - return ( -
    - - {icon && } - -
    - {children} -
    - -
    - ); - } - -} diff --git a/packages/yoroi-extension/app/components/widgets/NotificationMessage.scss b/packages/yoroi-extension/app/components/widgets/NotificationMessage.scss deleted file mode 100644 index 04a861581e..0000000000 --- a/packages/yoroi-extension/app/components/widgets/NotificationMessage.scss +++ /dev/null @@ -1,33 +0,0 @@ -.component { - background-color: var(--yoroi-notification-message-background); - height: 0; - overflow: hidden; - position: absolute; - text-align: center; - transition: all 200ms linear; - width: 100%; -} - -.show { - height: 40px; - padding: 0; -} - -.icon { - display: inline-block; - vertical-align: top; - & > svg { - height: 40px; - width: 40px; - } -} - -.message { - color: var(--yoroi-palette-gray-50); - display: inline-block; - font-weight: 400; - font-size: 14px; - font-weight: 500; - letter-spacing: normal; - line-height: 40px; -} diff --git a/packages/yoroi-extension/app/components/widgets/OneSideBarDecoration.js b/packages/yoroi-extension/app/components/widgets/OneSideBarDecoration.js deleted file mode 100644 index cc36f3d054..0000000000 --- a/packages/yoroi-extension/app/components/widgets/OneSideBarDecoration.js +++ /dev/null @@ -1,23 +0,0 @@ -// @flow -import { Component } from 'react'; -import type { Node } from 'react'; -import { observer } from 'mobx-react'; -import styles from './OneSideBarDecoration.scss'; - -type Props = {| - +children?: Node, -|}; - -@observer -export default class OneSideBarDecoration extends Component { - static defaultProps: {|children: void|} = { - children: undefined - }; - - render(): Node { - const { children } = this.props; - return ( -
    {children}
    - ); - } -} diff --git a/packages/yoroi-extension/app/components/widgets/OneSideBarDecoration.scss b/packages/yoroi-extension/app/components/widgets/OneSideBarDecoration.scss deleted file mode 100644 index 00afb57caa..0000000000 --- a/packages/yoroi-extension/app/components/widgets/OneSideBarDecoration.scss +++ /dev/null @@ -1,14 +0,0 @@ -.separator { - display: flex; - align-items: center; - text-align: center; -} -.separator::after { - content: ''; - flex: 1; - border-bottom: 2px solid var(--yoroi-palette-gray-200); -} - -.separator::after { - margin-left: 8px; -} diff --git a/packages/yoroi-extension/app/components/widgets/ProgressSteps.js b/packages/yoroi-extension/app/components/widgets/ProgressSteps.js index 1924a2276e..8b75b08d7b 100644 --- a/packages/yoroi-extension/app/components/widgets/ProgressSteps.js +++ b/packages/yoroi-extension/app/components/widgets/ProgressSteps.js @@ -4,9 +4,7 @@ import type { Element, Node } from 'react'; import { observer } from 'mobx-react'; import classNames from 'classnames'; -import { ReactComponent as IconTickSVG } from '../../assets/images/widget/tick.inline.svg'; import { ReactComponent as IconTickGreenSVG } from '../../assets/images/widget/tick-green.inline.svg'; -import { ReactComponent as IconCrossSVG } from '../../assets/images/widget/cross.inline.svg'; import { ReactComponent as IconCrossGreenSVG } from '../../assets/images/widget/cross-green.inline.svg'; import styles from './ProgressSteps.scss'; @@ -22,7 +20,6 @@ type Props = {| +stepsList: Array, +currentStep : number, // example, 0 = pointing to stepsList[0] +stepState: StepStateEnum, - +classicTheme: boolean |}; @observer export default class ProgressSteps extends Component { @@ -36,7 +33,6 @@ export default class ProgressSteps extends Component { currentStep, stepState, ) => { - const { classicTheme } = this.props; const steps = []; for (let idx = 0; idx < stepsList.length; idx++) { @@ -69,12 +65,8 @@ export default class ProgressSteps extends Component { ]); } - const DoneIcon = classicTheme - ? IconTickSVG - : IconTickGreenSVG; - const ErrorIcon = classicTheme - ? IconCrossSVG - : IconCrossGreenSVG; + const DoneIcon = IconTickGreenSVG; + const ErrorIcon = IconCrossGreenSVG; steps.push(
    diff --git a/packages/yoroi-extension/app/components/widgets/WalletType.js b/packages/yoroi-extension/app/components/widgets/WalletType.js deleted file mode 100644 index 1a00afab90..0000000000 --- a/packages/yoroi-extension/app/components/widgets/WalletType.js +++ /dev/null @@ -1,33 +0,0 @@ -// @flow - -import { Component } from 'react'; -import type { Node } from 'react' -import globalMessages from '../../i18n/global-messages'; -import { intlShape } from 'react-intl'; -import type { $npm$ReactIntl$MessageDescriptor, $npm$ReactIntl$IntlFormat } from 'react-intl'; -import type { WalletType as WalletT } from '../../../chrome/extension/background/types'; - -type Props = {| - walletType: WalletT, -|} -export default class WalletType extends Component { - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { - intl: intlShape.isRequired, - }; - - getType: WalletT => $Exact<$npm$ReactIntl$MessageDescriptor> = (walletType) => { - if (walletType === 'ledger') { - return globalMessages.ledgerWallet; - } - if (walletType === 'trezor') { - return globalMessages.trezorWallet; - } - return globalMessages.standardWallet; - } - - render(): Node { - const { intl } = this.context; - const typeText = intl.formatMessage(this.getType(this.props.walletType)); - return {typeText} - } -} diff --git a/packages/yoroi-extension/app/components/widgets/forms/InlineEditingInput.js b/packages/yoroi-extension/app/components/widgets/forms/InlineEditingInput.js index 227c9ddfd5..65c86c8145 100644 --- a/packages/yoroi-extension/app/components/widgets/forms/InlineEditingInput.js +++ b/packages/yoroi-extension/app/components/widgets/forms/InlineEditingInput.js @@ -1,6 +1,6 @@ // @flow import { Component } from 'react'; -import type { Node, ComponentType } from 'react'; +import type { Node } from 'react'; import { observer } from 'mobx-react'; import { defineMessages, intlShape } from 'react-intl'; import classnames from 'classnames'; @@ -10,8 +10,6 @@ import vjf from 'mobx-react-form/lib/validators/VJF'; import styles from './InlineEditingInput.scss'; import config from '../../../config'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import { withLayout } from '../../../styles/context/layout'; -import type { InjectedLayoutProps } from '../../../styles/context/layout'; const messages = defineMessages({ change: { @@ -40,7 +38,6 @@ type Props = {| +isValid: string => boolean, +validationErrorMessage: string, +successfullyUpdated: boolean, - +classicTheme: boolean, id: string, |}; @@ -49,7 +46,7 @@ type State = {| |}; @observer -class InlineEditingInput extends Component { +export default class InlineEditingInput extends Component { static defaultProps: {| className: void |} = { className: undefined, }; @@ -190,5 +187,3 @@ class InlineEditingInput extends Component { ); } } - -export default (withLayout(InlineEditingInput): ComponentType); diff --git a/packages/yoroi-extension/app/components/widgets/forms/MnemonicInput.js b/packages/yoroi-extension/app/components/widgets/forms/MnemonicInput.js index b669d07cbb..de850d45a4 100644 --- a/packages/yoroi-extension/app/components/widgets/forms/MnemonicInput.js +++ b/packages/yoroi-extension/app/components/widgets/forms/MnemonicInput.js @@ -16,7 +16,6 @@ type Props = {| +mnemonicValidator: string => boolean, +validWords: Array, +mnemonicLength: void | number, - +classicTheme: boolean, |}; @observer @@ -30,8 +29,7 @@ export default class MnemonicInput extends Component { fields: { recoveryPhrase: { label: this.context.intl.formatMessage(globalMessages.recoveryPhraseInputLabel), - placeholder: this.props.classicTheme ? - this.context.intl.formatMessage(globalMessages.recoveryPhraseInputHint) : '', + placeholder: '', value: [], validators: [({ field }) => { const value = join(field.value, ' '); diff --git a/packages/yoroi-extension/app/components/widgets/forms/PaperPasswordInput.js b/packages/yoroi-extension/app/components/widgets/forms/PaperPasswordInput.js index d0d7a09ad3..d3aac959de 100644 --- a/packages/yoroi-extension/app/components/widgets/forms/PaperPasswordInput.js +++ b/packages/yoroi-extension/app/components/widgets/forms/PaperPasswordInput.js @@ -11,7 +11,6 @@ import PasswordInput from './PasswordInput'; type Props = {| +setForm: ReactToolboxMobxForm => void, - +classicTheme: boolean, +passwordMatches: string => boolean, +includeLengthCheck: boolean, +initValues?: string, @@ -33,7 +32,6 @@ export default class PaperPasswordInput extends Component { return ( !this.props.includeLengthCheck || isValidPaperPassword(password)} diff --git a/packages/yoroi-extension/app/components/widgets/forms/PasswordInput.js b/packages/yoroi-extension/app/components/widgets/forms/PasswordInput.js index b4d5a520b2..70fe007c9d 100644 --- a/packages/yoroi-extension/app/components/widgets/forms/PasswordInput.js +++ b/packages/yoroi-extension/app/components/widgets/forms/PasswordInput.js @@ -13,7 +13,6 @@ import { Box, Typography } from '@mui/material'; type Props = {| +setForm: ReactToolboxMobxForm => void, - +classicTheme: boolean, +disabled: boolean, +passwordMatches: string => boolean, +fieldName: string, @@ -53,9 +52,7 @@ export default class PasswordInput extends Component { type: 'password', onChange: this.props.onChange, label: this.props.placeholder, - placeholder: this.props.classicTheme - ? this.props.placeholder - : '', + placeholder: '', value: (this.props.initValues) || '', validators: [({ field }) => { return [ diff --git a/packages/yoroi-extension/app/components/widgets/forms/PinInput.js b/packages/yoroi-extension/app/components/widgets/forms/PinInput.js index e62b840a62..cf836163c0 100644 --- a/packages/yoroi-extension/app/components/widgets/forms/PinInput.js +++ b/packages/yoroi-extension/app/components/widgets/forms/PinInput.js @@ -13,7 +13,6 @@ import { Box } from '@mui/material'; type Props = {| +setForm: ReactToolboxMobxForm => void, - +classicTheme: boolean, +disabled: boolean, +pinMatches: string => boolean, +fieldName: string, @@ -50,9 +49,7 @@ export default class PinInput extends Component { [this.props.fieldName]: { onChange: this.props.onChange, label: this.props.placeholder, - placeholder: this.props.classicTheme - ? this.props.placeholder - : '', + placeholder: '', value: (this.props.initValues) || '', validators: [({ field }) => { return [ diff --git a/packages/yoroi-extension/app/components/widgets/forms/ReadOnlyInput.js b/packages/yoroi-extension/app/components/widgets/forms/ReadOnlyInput.js deleted file mode 100644 index 07053b2c88..0000000000 --- a/packages/yoroi-extension/app/components/widgets/forms/ReadOnlyInput.js +++ /dev/null @@ -1,66 +0,0 @@ -// @flow -import { Component } from 'react'; -import type { Node } from 'react'; -import { observer } from 'mobx-react'; -import classnames from 'classnames'; -import { intlShape } from 'react-intl'; -import TextField from '../../common/TextField'; -import globalMessages from '../../../i18n/global-messages'; -import { ReactComponent as EditSvg } from '../../../assets/images/edit.inline.svg'; -import styles from './ReadOnlyInput.scss'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; - -type Props = {| - +label: string, - +value: string, - +isSet: boolean, - +onClick: void => void, - +classicTheme: boolean, -|}; - -@observer -export default class ReadOnlyInput extends Component { - - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { - intl: intlShape.isRequired, - }; - - render(): Node { - const { - label, - value, - isSet, - onClick, - classicTheme, - } = this.props; - const { intl } = this.context; - const buttonLabel = intl.formatMessage(isSet ? globalMessages.change : globalMessages.create); - - const mainClasses = classnames([ - styles.component, - isSet ? 'changeLabel' : 'createLabel', - ]); - - return ( -
    - - - - - -
    - ); - } - -} diff --git a/packages/yoroi-extension/app/components/widgets/forms/ReadOnlyInput.scss b/packages/yoroi-extension/app/components/widgets/forms/ReadOnlyInput.scss deleted file mode 100644 index 9c28f95b49..0000000000 --- a/packages/yoroi-extension/app/components/widgets/forms/ReadOnlyInput.scss +++ /dev/null @@ -1,38 +0,0 @@ -.component { - margin-bottom: 32px; - position: relative; - - .button { - bottom: 44px; - color: var(--yoroi-palette-gray-800); - cursor: pointer; - font-weight: 300; - font-size: 16px; - line-height: 1.38; - opacity: 0.5; - position: absolute; - right: 22px; - text-transform: lowercase; - &:hover { - opacity: 1; - } - } -} - -:global(.YoroiModern), :global(.YoroiRevamp) { - .component { - .disabled { - background-color: transparent; - } - - .button { - bottom: 37px; - } - } -} - -:global(.YoroiClassic) .component { - .button { - bottom: 44px; - } -} diff --git a/packages/yoroi-extension/app/components/widgets/forms/SpendingPasswordInput.js b/packages/yoroi-extension/app/components/widgets/forms/SpendingPasswordInput.js index 22078d7781..a80005d444 100644 --- a/packages/yoroi-extension/app/components/widgets/forms/SpendingPasswordInput.js +++ b/packages/yoroi-extension/app/components/widgets/forms/SpendingPasswordInput.js @@ -1,5 +1,5 @@ // @flow -import type { Node, ComponentType } from 'react'; +import type { Node } from 'react'; import { Component } from 'react'; import { observer } from 'mobx-react'; import { intlShape } from 'react-intl'; @@ -7,18 +7,15 @@ import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm'; import globalMessages from '../../../i18n/global-messages'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import PasswordInput from './PasswordInput'; -import { withLayout } from '../../../styles/context/layout'; -import type { InjectedLayoutProps } from '../../../styles/context/layout'; type Props = {| +setForm: ReactToolboxMobxForm => void, - +classicTheme: boolean, +initValues?: string, +isSubmitting: boolean, |}; @observer -class SpendingPasswordInput extends Component { +export default class SpendingPasswordInput extends Component { static defaultProps: {| initValues: void |} = { initValues: undefined, }; @@ -29,24 +26,18 @@ class SpendingPasswordInput extends Component { render(): Node { const { intl } = this.context; - const { isRevampLayout } = this.props; return ( true} fieldName="walletPassword" validCheck={_password => true} - placeholder={intl.formatMessage( - isRevampLayout ? globalMessages.passwordLabel : globalMessages.walletPasswordLabel - )} + placeholder={intl.formatMessage(globalMessages.passwordLabel)} allowEmptyInput={false} initValues={this.props.initValues} /> ); } } - -export default (withLayout(SpendingPasswordInput): ComponentType); diff --git a/packages/yoroi-extension/app/components/widgets/tokenOption/TokenOptionRow.js b/packages/yoroi-extension/app/components/widgets/tokenOption/TokenOptionRow.js deleted file mode 100644 index ab01a904cb..0000000000 --- a/packages/yoroi-extension/app/components/widgets/tokenOption/TokenOptionRow.js +++ /dev/null @@ -1,54 +0,0 @@ -// @flow -import { Component } from 'react'; -import type { Node } from 'react'; -import { observer } from 'mobx-react'; -import { Typography } from '@mui/material'; -import { Box } from '@mui/system'; - -type Props = {| - +displayName: string, - +id?: string, - +amount?: string, - nameOnly?: boolean | null, -|}; - -@observer -export default class TokenOptionRow extends Component { - static defaultProps: {| - id: void, - amount: void, - nameOnly: void, - |} = { - id: undefined, - amount: undefined, - nameOnly: undefined, - }; - render(): Node { - const notOnlyName = !this.props.nameOnly; - return ( - - - {this.props.displayName} - {notOnlyName && {this.props.amount}} - - - {notOnlyName && ( - - {this.props.id} - - )} - - - ); - } -} diff --git a/packages/yoroi-extension/app/connector/App.js b/packages/yoroi-extension/app/connector/App.js index 45a11ff962..013e96eb99 100644 --- a/packages/yoroi-extension/app/connector/App.js +++ b/packages/yoroi-extension/app/connector/App.js @@ -31,7 +31,6 @@ import { Logger } from '../utils/logging'; import { ThemeProvider } from '@mui/material/styles'; import { globalStyles } from '../styles/globalStyles'; import { CssBaseline } from '@mui/material'; -import { LayoutProvider } from '../styles/context/layout'; import { changeToplevelTheme, MuiThemes } from '../styles/themes'; // https://github.com/yahoo/react-intl/wiki#loading-locale-data @@ -106,21 +105,18 @@ class App extends Component { const currentTheme = stores.profile.currentTheme; const muiTheme = MuiThemes[currentTheme]; - changeToplevelTheme(currentTheme); return (
    - - - - {globalStyles(muiTheme)} - - - {this.getContent()} - - - + + + {globalStyles(muiTheme)} + + + {this.getContent()} + +
    ); } diff --git a/packages/yoroi-extension/app/connector/components/connect/ConnectPage.js b/packages/yoroi-extension/app/connector/components/connect/ConnectPage.js index 6f2c922b45..090dd697e0 100644 --- a/packages/yoroi-extension/app/connector/components/connect/ConnectPage.js +++ b/packages/yoroi-extension/app/connector/components/connect/ConnectPage.js @@ -1,13 +1,13 @@ // @flow +import type { Node } from 'react'; /* eslint-disable no-nested-ternary */ import { Component } from 'react'; -import type { Node, ComponentType } from 'react'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; +import { defineMessages, intlShape } from 'react-intl'; import type { TokenLookupKey } from '../../../api/common/lib/MultiToken'; import type { TokenRow } from '../../../api/ada/lib/storage/database/primitives/tables'; import type { WalletChecksum } from '@emurgo/cip4-js'; import type { UnitOfAccountSettingType } from '../../../types/unitOfAccountType'; -import { intlShape, defineMessages } from 'react-intl'; import classNames from 'classnames'; import styles from './ConnectPage.scss'; import { Button, Stack, styled, Typography } from '@mui/material'; @@ -29,7 +29,6 @@ import { ReactComponent as NoWalletImage } from '../../assets/images/no-websites import { ReactComponent as NoDappIcon } from '../../../assets/images/dapp-connector/no-dapp.inline.svg'; import { ReactComponent as IconEyeOpen } from '../../../assets/images/my-wallets/icon_eye_open.inline.svg'; import { ReactComponent as IconEyeClosed } from '../../../assets/images/my-wallets/icon_eye_closed.inline.svg'; -import { withLayout } from '../../../styles/context/layout'; import AmountDisplay from '../../../components/common/AmountDisplay'; import type { WalletState } from '../../../../chrome/extension/background/types'; @@ -99,10 +98,8 @@ type Props = {| +onUpdateHideBalance: void => Promise, |}; -type InjectedProps = {| +isRevampLayout: boolean |}; - @observer -class ConnectPage extends Component { +export default class ConnectPage extends Component { static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; @@ -186,9 +183,9 @@ class ConnectPage extends Component { shouldHideBalance, isAppAuth, onUpdateHideBalance, - isRevampLayout, selectedWallet, } = this.props; + const isNightly = environment.isNightly(); const componentClasses = classNames([styles.component, isNightly && styles.isNightly]); @@ -231,7 +228,7 @@ class ConnectPage extends Component { {!isSelectWalletHardware && (