diff --git a/packages/yoroi-extension/app/Routes.js b/packages/yoroi-extension/app/Routes.js index ed7da0d740..c9e62d4691 100644 --- a/packages/yoroi-extension/app/Routes.js +++ b/packages/yoroi-extension/app/Routes.js @@ -83,6 +83,8 @@ const SupportSettingsPagePromise = () => import('./containers/settings/categorie const SupportSettingsPage = React.lazy(SupportSettingsPagePromise); const AnalyticsSettingsPagePromise = () => import('./containers/settings/categories/AnalyticsSettingsPage'); const AnalyticsSettingsPage = React.lazy(AnalyticsSettingsPagePromise); +const PaperWalletSettingsPagePromise = () => import('./containers/settings/categories/PaperWalletSettingsPage'); +const PaperWalletSettingsPage = React.lazy(PaperWalletSettingsPagePromise); const NightlyPagePromise = () => import('./containers/profile/NightlyPage'); const NightlyPage = React.lazy(NightlyPagePromise); @@ -428,6 +430,11 @@ const SettingsSubpages = (stores, actions) => ( path={ROUTES.SETTINGS.ANALYTICS} component={props => } /> + } + /> ); diff --git a/packages/yoroi-extension/app/components/settings/categories/PaperWalletSettings.js b/packages/yoroi-extension/app/components/settings/categories/PaperWalletSettings.js new file mode 100644 index 0000000000..f1aa5ed13b --- /dev/null +++ b/packages/yoroi-extension/app/components/settings/categories/PaperWalletSettings.js @@ -0,0 +1,31 @@ +// @flow +import type { Node, ComponentType } from 'react'; +import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; +import { Component } from 'react'; +import { observer } from 'mobx-react'; +import { defineMessages, intlShape } from 'react-intl'; +import { Button } from '@mui/material'; + +type Props = {| + onRedirect(): void, +|}; + +@observer +class PaperWalletSettings extends Component { + static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { + intl: intlShape.isRequired, + }; + + render(): Node { + const { onRedirect } = this.props; + return ( +
+ +
+ ); + } +} + +export default PaperWalletSettings; diff --git a/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js b/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js index 6d69743fdb..d02cc092ed 100644 --- a/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js +++ b/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js @@ -33,6 +33,10 @@ export const settingsMenuMessages: Object = defineMessages({ id: 'settings.menu.analytics.link.label', defaultMessage: '!!!Analytics', }, + paperWallet: { + id: 'settings.menu.paperWallet.link.label', + defaultMessage: '!!!Paper Wallet', + }, }); type Props = {| @@ -47,7 +51,7 @@ class SettingsMenu extends Component { render(): Node { const { intl } = this.context; - const { onItemClick, isActiveItem, isRevampLayout } = this.props; + const { onItemClick, isActiveItem } = this.props; const isProduction = environmnent.isProduction(); const settingOptions: Array = [ { @@ -72,9 +76,7 @@ class SettingsMenu extends Component { hidden: isProduction, }, { - label: intl.formatMessage( - isRevampLayout ? globalMessages.termsOfService : globalMessages.termsOfUse - ), + label: intl.formatMessage(globalMessages.termsOfService), route: ROUTES.SETTINGS.TERMS_OF_USE, className: 'termsOfUse', }, @@ -92,18 +94,15 @@ class SettingsMenu extends Component { label: intl.formatMessage(settingsMenuMessages.analytics), route: ROUTES.SETTINGS.ANALYTICS, className: 'analytics', - hidden: !isRevampLayout, + }, + { + label: intl.formatMessage(settingsMenuMessages.paperWallet), + route: ROUTES.SETTINGS.PAPER_WALLET, + className: 'paperWallet', }, ]; - return ( - - ); + return ; } } diff --git a/packages/yoroi-extension/app/components/transfer/cards/TransferCards.scss b/packages/yoroi-extension/app/components/transfer/cards/TransferCards.scss index 86fb38fe15..737783f665 100644 --- a/packages/yoroi-extension/app/components/transfer/cards/TransferCards.scss +++ b/packages/yoroi-extension/app/components/transfer/cards/TransferCards.scss @@ -22,7 +22,7 @@ } .tooltipSize { - width: 500px; + max-width: 500px; overflow-wrap: break-word; white-space: normal; } diff --git a/packages/yoroi-extension/app/containers/settings/categories/PaperWalletSettingsPage.js b/packages/yoroi-extension/app/containers/settings/categories/PaperWalletSettingsPage.js new file mode 100644 index 0000000000..073e970d8e --- /dev/null +++ b/packages/yoroi-extension/app/containers/settings/categories/PaperWalletSettingsPage.js @@ -0,0 +1,15 @@ +// @flow +import type { Node } from 'react'; +import type { StoresAndActionsProps } from '../../../types/injectedProps.types'; +import { Component } from 'react'; +import { observer } from 'mobx-react'; +import { ROUTES } from '../../../routes-config'; +import PaperWalletSettings from '../../../components/settings/categories/PaperWalletSettings'; + +@observer +export default class PaperWalletSettingsPage extends Component { + render(): Node { + const { actions } = this.props; + return actions.router.redirect.trigger({ route: ROUTES.TRANSFER.ROOT })} />; + } +} diff --git a/packages/yoroi-extension/app/containers/transfer/Transfer.js b/packages/yoroi-extension/app/containers/transfer/Transfer.js index ef2293064b..47995a805e 100644 --- a/packages/yoroi-extension/app/containers/transfer/Transfer.js +++ b/packages/yoroi-extension/app/containers/transfer/Transfer.js @@ -1,22 +1,17 @@ // @flow -import type { ComponentType, Node } from 'react'; +import type { Node } from 'react'; +import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; +import type { StoresAndActionsProps } from '../../types/injectedProps.types'; import { Component, lazy, Suspense } from 'react'; import { observer } from 'mobx-react'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import { intlShape } from 'react-intl'; -import type { StoresAndActionsProps } from '../../types/injectedProps.types'; import TopBarLayout from '../../components/layout/TopBarLayout'; import BannerContainer from '../banners/BannerContainer'; import SidebarContainer from '../SidebarContainer'; -import BackgroundColoredLayout from '../../components/layout/BackgroundColoredLayout'; import NoWalletMessage from '../wallet/NoWalletMessage'; -import UnsupportedWallet from '../wallet/UnsupportedWallet'; import NavBarTitle from '../../components/topbar/NavBarTitle'; -import NavBarContainer from '../NavBarContainer'; import globalMessages from '../../i18n/global-messages'; -import HorizontalLine from '../../components/widgets/HorizontalLine'; -import type { LayoutComponentMap } from '../../styles/context/layout'; -import { withLayout } from '../../styles/context/layout'; +import NavBarContainerRevamp from '../NavBarContainerRevamp'; export const WalletTransferPagePromise: void => Promise = () => import('./WalletTransferPage'); const WalletTransferPage = lazy(WalletTransferPagePromise); @@ -26,11 +21,8 @@ type Props = {| +children?: Node, |}; -type InjectedLayoutProps = {| +renderLayoutComponent: LayoutComponentMap => Node |}; -type AllProps = {| ...Props, ...InjectedLayoutProps |}; - @observer -class Transfer extends Component { +class Transfer extends Component { static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; @@ -41,26 +33,17 @@ class Transfer extends Component { render(): Node { const { actions, stores } = this.props; - if (this.props.stores.profile.isRevampTheme) { - return null; - } const sidebarContainer = ; const navbar = ( - - } + title={} /> ); + return ( - } - navbar={navbar} - sidebar={sidebarContainer} - showInContainer - > + } navbar={navbar} sidebar={sidebarContainer}> {this.getContent()} ); @@ -72,24 +55,12 @@ class Transfer extends Component { if (wallet == null) { return ; } - // temporary solution: will need to handle more cases later for different currencies - if (wallet.isCardanoHaskell) { - return ; - } + return ( - <> - - - - - - - + + + ); }; } -export default (withLayout(Transfer): ComponentType); +export default Transfer; diff --git a/packages/yoroi-extension/app/containers/transfer/WalletTransferPage.js b/packages/yoroi-extension/app/containers/transfer/WalletTransferPage.js index 8189738564..7e50f5c9b8 100644 --- a/packages/yoroi-extension/app/containers/transfer/WalletTransferPage.js +++ b/packages/yoroi-extension/app/containers/transfer/WalletTransferPage.js @@ -10,7 +10,7 @@ import type { StoresAndActionsProps } from '../../types/injectedProps.types'; import TransferTypeSelect from '../../components/transfer/cards/TransferTypeSelect'; import { PublicDeriver } from '../../api/ada/lib/storage/models/PublicDeriver'; import YoroiTransferPage from './YoroiTransferPage'; -import { genLookupOrFail, getTokenName, } from '../../stores/stateless/tokenHelpers'; +import { genLookupOrFail, getTokenName } from '../../stores/stateless/tokenHelpers'; import { truncateToken } from '../../utils/formatters'; type Props = {| @@ -20,7 +20,7 @@ type Props = {| @observer export default class WalletTransferPage extends Component { - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { + static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; @@ -31,21 +31,15 @@ export default class WalletTransferPage extends Component { // paper startTransferYoroiPaperFunds: void => void = () => { this.props.actions.yoroiTransfer.startTransferFunds.trigger(); - } + }; render(): Node { - const { actions, stores } = this.props; - const defaultToken = this.props.publicDeriver.getParent().getDefaultToken(); - const defaultTokenInfo = genLookupOrFail(this.props.stores.tokenInfoStore.tokenInfo)({ - identifier: defaultToken.defaultIdentifier, - networkId: defaultToken.defaultNetworkId, - }); + const { actions, stores, publicDeriver } = this.props; + const defaultTokenInfo = stores.tokenInfoStore.getDefaultTokenInfo(publicDeriver.networkId); + return ( <> - + ); diff --git a/packages/yoroi-extension/app/i18n/locales/en-US.json b/packages/yoroi-extension/app/i18n/locales/en-US.json index 6d6485a998..c46ceca4af 100644 --- a/packages/yoroi-extension/app/i18n/locales/en-US.json +++ b/packages/yoroi-extension/app/i18n/locales/en-US.json @@ -295,6 +295,7 @@ "settings.general.translation.contributors": "_", "settings.general.theme.light": "Light Theme", "settings.general.theme.dark": "Dark Theme", + "settings.menu.paperWallet.link.label": "Paper Wallet", "settings.menu.analytics.link.label": "Analytics", "settings.menu.assetDeposit.link.label": "Locked assets deposit", "settings.menu.blockchain.link.label": "Blockchain", diff --git a/packages/yoroi-extension/app/routes-config.js b/packages/yoroi-extension/app/routes-config.js index 8f35cd6939..b03d5abeca 100644 --- a/packages/yoroi-extension/app/routes-config.js +++ b/packages/yoroi-extension/app/routes-config.js @@ -42,6 +42,7 @@ export const ROUTES = { SUPPORT: '/settings/support', LEVEL_OF_COMPLEXITY: '/settings/level-of-complexity', ANALYTICS: '/settings/analytics', + PAPER_WALLET: '/settings/paper-wallet', }, TRANSFER: { ROOT: '/transfer',