From 3da46dc789cc589267eb81d7215e6c0056ebb427 Mon Sep 17 00:00:00 2001 From: Ahmed Ibrahim Date: Wed, 16 Aug 2023 05:58:20 +0300 Subject: [PATCH 01/20] feat(settings/general): revamp the language selection section --- .../general-setting/GeneralSettings.js | 105 +++++++++++------- .../components/settings/menu/SettingsMenu.js | 10 +- .../categories/GeneralSettingsPage.js | 60 +++++----- .../app/i18n/locales/en-US.json | 4 +- 4 files changed, 106 insertions(+), 73 deletions(-) diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/GeneralSettings.js b/packages/yoroi-extension/app/components/settings/categories/general-setting/GeneralSettings.js index fcb70228f8..24330ce5ae 100644 --- a/packages/yoroi-extension/app/components/settings/categories/general-setting/GeneralSettings.js +++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/GeneralSettings.js @@ -1,11 +1,11 @@ // @flow import { Component } from 'react'; -import type { Node } from 'react'; +import type { Node, ComponentType } from 'react'; import { observer } from 'mobx-react'; import classNames from 'classnames'; import Select from '../../../common/Select'; -import { MenuItem, Typography } from '@mui/material'; -import { intlShape } from 'react-intl'; +import { Box, MenuItem, Typography } from '@mui/material'; +import { defineMessages, intlShape } from 'react-intl'; import ReactToolboxMobxForm from '../../../../utils/ReactToolboxMobxForm'; import LocalizableError from '../../../../i18n/LocalizableError'; import styles from './GeneralSettings.scss'; @@ -14,84 +14,113 @@ 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 { withLayout, InjectedLayoutProps } from '../../../../styles/context/layout'; type Props = {| +languages: Array, +currentLocale: string, - +onSelectLanguage: {| locale: string |} => PossiblyAsync, + +onSelectLanguage: ({| locale: string |}) => PossiblyAsync, +isSubmitting: boolean, +error?: ?LocalizableError, |}; +const messages = defineMessages({ + languageLabel: { + id: 'wallet.settings.general.language', + defaultMessage: '!!!Language', + }, + languageSelectLabel: { + id: 'wallet.settings.general.revamp.languageSelectLabel', + defaultMessage: '!!!Select your language', + }, +}); + @observer -export default class GeneralSettings extends Component { - static defaultProps: {|error: void|} = { - error: undefined +class GeneralSettings extends Component { + static defaultProps: {| error: void |} = { + error: undefined, }; - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { + static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; - selectLanguage: string => Promise = async (locale) => { + selectLanguage: string => Promise = async locale => { await this.props.onSelectLanguage({ locale }); }; form: ReactToolboxMobxForm = new ReactToolboxMobxForm({ fields: { languageId: { - label: this.context.intl.formatMessage(globalMessages.languageSelectLabel), + label: this.context.intl.formatMessage( + this.props.isRevampLayout + ? messages.languageSelectLabel + : globalMessages.languageSelectLabel + ), value: this.props.currentLocale, - } - } + }, + }, }); render(): Node { - const { languages, isSubmitting, error } = this.props; + const { languages, isSubmitting, error, isRevampLayout } = this.props; const { intl } = this.context; const { form } = this; const languageId = form.$('languageId'); const languageOptions = languages.map(language => ({ value: language.value, label: intl.formatMessage(language.label), - svg: language.svg + svg: language.svg, })); const componentClassNames = classNames([styles.component, 'general']); return (
- - {error &&

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

} + + {error &&

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

} + - {!tier1Languages.includes(languageId.value) && + {!tier1Languages.includes(languageId.value) && (

{intl.formatMessage(globalMessages.languageSelectLabelInfo)}

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

- } - + )}
); } } + +export default (withLayout(GeneralSettings): ComponentType); diff --git a/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js b/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js index 5a406cd655..c29213ce1f 100644 --- a/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js +++ b/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js @@ -9,7 +9,7 @@ import globalMessages from '../../../i18n/global-messages'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import SubMenu from '../../topbar/SubMenu'; -const messages = defineMessages({ +export const settingsMenuMessages = defineMessages({ general: { id: 'settings.menu.general.link.label', defaultMessage: '!!!General', @@ -44,12 +44,12 @@ export default class SettingsMenu extends Component { const settingOptions: Array = [ { - label: intl.formatMessage(messages.general), + label: intl.formatMessage(settingsMenuMessages.general), route: ROUTES.SETTINGS.GENERAL, className: 'general', }, { - label: intl.formatMessage(messages.blockchain), + label: intl.formatMessage(settingsMenuMessages.blockchain), route: ROUTES.SETTINGS.BLOCKCHAIN, className: 'blockchain', }, @@ -59,7 +59,7 @@ export default class SettingsMenu extends Component { className: 'wallet', }, !environmnent.isProduction() && { - label: intl.formatMessage(messages.externalStorage), + label: intl.formatMessage(settingsMenuMessages.externalStorage), route: ROUTES.SETTINGS.EXTERNAL_STORAGE, className: 'externalStorage', }, @@ -74,7 +74,7 @@ export default class SettingsMenu extends Component { className: 'support', }, { - label: intl.formatMessage(messages.levelOfComplexity), + label: intl.formatMessage(settingsMenuMessages.levelOfComplexity), route: ROUTES.SETTINGS.LEVEL_OF_COMPLEXITY, className: 'levelOfComplexity', }, diff --git a/packages/yoroi-extension/app/containers/settings/categories/GeneralSettingsPage.js b/packages/yoroi-extension/app/containers/settings/categories/GeneralSettingsPage.js index 53bdd3c9d0..9443f68099 100644 --- a/packages/yoroi-extension/app/containers/settings/categories/GeneralSettingsPage.js +++ b/packages/yoroi-extension/app/containers/settings/categories/GeneralSettingsPage.js @@ -3,7 +3,7 @@ import type { Node } from 'react'; import { Component } from 'react'; import { observer } from 'mobx-react'; import { computed } from 'mobx'; -import { defineMessages, intlShape } from 'react-intl'; +import { defineMessages, intlShape } from 'react-intl'; import { handleExternalLinkClick } from '../../../utils/routing'; import GeneralSettings from '../../../components/settings/categories/general-setting/GeneralSettings'; import type { InjectedOrGenerated } from '../../../types/injectedPropsType'; @@ -15,11 +15,13 @@ import type { LanguageType } from '../../../i18n/translations'; import { THEMES } from '../../../styles/utils'; import type { Theme } from '../../../styles/utils'; import { PublicDeriver } from '../../../api/ada/lib/storage/models/PublicDeriver'; -import { ReactComponent as AdaCurrency } from '../../../assets/images/currencies/ADA.inline.svg'; +import { ReactComponent as AdaCurrency } from '../../../assets/images/currencies/ADA.inline.svg'; import { unitOfAccountDisabledValue } from '../../../types/unitOfAccountType'; import type { UnitOfAccountSettingType } from '../../../types/unitOfAccountType'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import { trackSetUnitOfAccount, trackSetLocale } from '../../../api/analytics'; +import { Typography } from '@mui/material'; +import { settingsMenuMessages } from '../../../components/settings/menu/SettingsMenu'; const currencyLabels = defineMessages({ USD: { @@ -60,41 +62,41 @@ type GeneratedData = typeof GeneralSettingsPage.prototype.generated; @observer export default class GeneralSettingsPage extends Component> { - - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { + static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; - onSelectUnitOfAccount: string => Promise = async (value) => { - const unitOfAccount = (value === 'ADA') - ? unitOfAccountDisabledValue - : { enabled: true, currency: value }; + onSelectUnitOfAccount: string => Promise = async value => { + const unitOfAccount = + value === 'ADA' ? unitOfAccountDisabledValue : { enabled: true, currency: value }; await this.generated.actions.profile.updateUnitOfAccount.trigger(unitOfAccount); trackSetUnitOfAccount(value); }; - onSelectLanguage: {| locale: string |} => PossiblyAsync = ({ locale }) => { + onSelectLanguage: ({| locale: string |}) => PossiblyAsync = ({ locale }) => { this.generated.actions.profile.updateLocale.trigger({ locale }); trackSetLocale(locale); }; render(): Node { + const { intl } = this.context; const profileStore = this.generated.stores.profile; const coinPriceStore = this.generated.stores.coinPriceStore; const isSubmittingLocale = profileStore.setProfileLocaleRequest.isExecuting; - const isSubmittingUnitOfAccount = profileStore.setUnitOfAccountRequest.isExecuting - || coinPriceStore.refreshCurrentUnit.isExecuting; + const isSubmittingUnitOfAccount = + profileStore.setUnitOfAccountRequest.isExecuting || + coinPriceStore.refreshCurrentUnit.isExecuting; const { currentTheme } = profileStore; const currencies = profileStore.UNIT_OF_ACCOUNT_OPTIONS.map(c => { - const name = this.context.intl.formatMessage(currencyLabels[c.symbol]); + const name = intl.formatMessage(currencyLabels[c.symbol]); return { value: c.symbol, label: `${c.symbol} - ${name}`, name, price: coinPriceStore.getCurrentPrice('ADA', c.symbol), - svg: c.svg + svg: c.svg, }; }); currencies.unshift({ @@ -111,6 +113,11 @@ export default class GeneralSettingsPage extends Component + {profileStore.isRevampTheme && ( + + {intl.formatMessage(settingsMenuMessages.general)} + + )} - + ); } @@ -166,10 +171,8 @@ export default class GeneralSettingsPage extends Component Promise, |}, updateUnitOfAccount: {| - trigger: ( - params: UnitOfAccountSettingType - ) => Promise - |} + trigger: (params: UnitOfAccountSettingType) => Promise, + |}, |}, router: {| goToRoute: {| @@ -194,19 +197,20 @@ export default class GeneralSettingsPage extends Component, currentLocale: string, currentTheme: Theme, + isRevampTheme: boolean, setProfileLocaleRequest: {| error: ?LocalizableError, isExecuting: boolean, |}, UNIT_OF_ACCOUNT_OPTIONS: Array<{| svg: string, - symbol: string + symbol: string, |}>, setUnitOfAccountRequest: {| error: ?LocalizableError, - isExecuting: boolean + isExecuting: boolean, |}, - unitOfAccount: UnitOfAccountSettingType + unitOfAccount: UnitOfAccountSettingType, |}, wallets: {| selected: null | PublicDeriver<>, @@ -214,12 +218,9 @@ export default class GeneralSettingsPage extends Component ?PublicDeriver<>, |}, coinPriceStore: {| - getCurrentPrice: ( - from: string, - to: string - ) => ?string, + getCurrentPrice: (from: string, to: string) => ?string, lastUpdateTimestamp: null | number, - refreshCurrentUnit: {| isExecuting: boolean |} + refreshCurrentUnit: {| isExecuting: boolean |}, |}, |}, |} { @@ -244,6 +245,7 @@ export default class GeneralSettingsPage extends Component Date: Wed, 16 Aug 2023 06:07:53 +0300 Subject: [PATCH 02/20] feat(settings/general): revamp fiat pairing section --- .../general-setting/UnitOfAccountSettings.js | 112 ++++++++++-------- .../categories/GeneralSettingsPage.js | 6 +- .../app/i18n/locales/en-US.json | 1 + 3 files changed, 67 insertions(+), 52 deletions(-) diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js b/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js index 4ccd2781a1..c299d078d5 100644 --- a/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js +++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js @@ -1,6 +1,6 @@ // @flow import { Component } from 'react'; -import type { Node } from 'react'; +import type { Node, ComponentType } from 'react'; import { observer } from 'mobx-react'; import classNames from 'classnames'; import Select from '../../../common/Select'; @@ -15,6 +15,7 @@ import VerticalFlexContainer from '../../../layout/VerticalFlexContainer'; import LoadingSpinner from '../../../widgets/LoadingSpinner'; import globalMessages from '../../../../i18n/global-messages'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; +import { withLayout, InjectedLayoutProps } from '../../../../styles/context/layout'; const messages = defineMessages({ unitOfAccountTitle: { @@ -34,6 +35,10 @@ const messages = defineMessages({ id: 'settings.unitOfAccount.label', defaultMessage: '!!!Currency', }, + revampInputLabel: { + id: 'settings.unitOfAccount.revamp.label', + defaultMessage: '!!!Select currency', + }, }); type Props = {| @@ -51,25 +56,27 @@ type Props = {| |}; @observer -export default class UnitOfAccountSettings extends Component { - static defaultProps: {|error: void|} = { - error: undefined +class UnitOfAccountSettings extends Component { + static defaultProps: {| error: void |} = { + error: undefined, }; - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { + static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; form: ReactToolboxMobxForm = new ReactToolboxMobxForm({ fields: { coinPriceCurrencyId: { - label: this.context.intl.formatMessage(messages.label), - } - } + label: this.context.intl.formatMessage( + this.props.isRevampLayout ? messages.revampInputLabel : messages.label + ), + }, + }, }); render(): Node { - const { currencies, error, currentValue, lastUpdatedTimestamp } = this.props; + const { currencies, error, currentValue, lastUpdatedTimestamp, isRevampLayout } = this.props; const { intl } = this.context; const { form } = this; const coinPriceCurrencyId = form.$('coinPriceCurrencyId'); @@ -106,57 +113,64 @@ export default class UnitOfAccountSettings extends Component { ); }; - const lastUpdated = lastUpdatedTimestamp != null - ? new Date(lastUpdatedTimestamp).toLocaleString() - : '-'; + const lastUpdated = + lastUpdatedTimestamp != null ? new Date(lastUpdatedTimestamp).toLocaleString() : '-'; - const dialog = this.props.isSubmitting - ? ( - - - - - - ) - : null; + const dialog = this.props.isSubmitting ? ( + + + + + + ) : null; return (
{dialog} -

- {intl.formatMessage(messages.unitOfAccountTitle)} -

+

{intl.formatMessage(messages.unitOfAccountTitle)}

-

+

+ +

-

+

+ +

- - {error &&

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

} + + {error &&

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

} +
); } } + +export default (withLayout(UnitOfAccountSettings): ComponentType); diff --git a/packages/yoroi-extension/app/containers/settings/categories/GeneralSettingsPage.js b/packages/yoroi-extension/app/containers/settings/categories/GeneralSettingsPage.js index 9443f68099..0a5eb6cac0 100644 --- a/packages/yoroi-extension/app/containers/settings/categories/GeneralSettingsPage.js +++ b/packages/yoroi-extension/app/containers/settings/categories/GeneralSettingsPage.js @@ -20,7 +20,7 @@ import { unitOfAccountDisabledValue } from '../../../types/unitOfAccountType'; import type { UnitOfAccountSettingType } from '../../../types/unitOfAccountType'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import { trackSetUnitOfAccount, trackSetLocale } from '../../../api/analytics'; -import { Typography } from '@mui/material'; +import { Box, Typography } from '@mui/material'; import { settingsMenuMessages } from '../../../components/settings/menu/SettingsMenu'; const currencyLabels = defineMessages({ @@ -112,7 +112,7 @@ export default class GeneralSettingsPage extends Component + {profileStore.isRevampTheme && ( {intl.formatMessage(settingsMenuMessages.general)} @@ -153,7 +153,7 @@ export default class GeneralSettingsPage extends Component - + ); } diff --git a/packages/yoroi-extension/app/i18n/locales/en-US.json b/packages/yoroi-extension/app/i18n/locales/en-US.json index 7dfc759cb1..67d1d1eed7 100644 --- a/packages/yoroi-extension/app/i18n/locales/en-US.json +++ b/packages/yoroi-extension/app/i18n/locales/en-US.json @@ -380,6 +380,7 @@ "settings.unitOfAccount.currency.krw": "South Korean won", "settings.unitOfAccount.currency.usd": "US dollar", "settings.unitOfAccount.label": "Currency", + "settings.unitOfAccount.revamp.label": "Select currency", "settings.unitOfAccount.lastUpdated": "Last updated: {lastUpdated}", "settings.unitOfAccount.note": "Note: coin price is approximate and may not match the price of any given trading platform. Any transactions based on these price approximates are done at your own risk.", "settings.unitOfAccount.title": "Fiat pairing", From aa3622152bd9a2fb431609e834e0e9ef7bea2098 Mon Sep 17 00:00:00 2001 From: Ahmed Ibrahim Date: Wed, 16 Aug 2023 06:43:10 +0300 Subject: [PATCH 03/20] feat(settings/uri): revamp uri section --- .../general-setting/ExplorerSettings.js | 73 ++++++++++------- .../general-setting/UriSettingsBlock.js | 32 ++++++-- .../general-setting/UriSettingsBlock.scss | 30 ------- .../categories/BlockchainSettingsPage.js | 78 ++++++++++--------- .../app/i18n/global-messages.js | 4 + .../app/i18n/locales/en-US.json | 2 + 6 files changed, 118 insertions(+), 101 deletions(-) delete mode 100644 packages/yoroi-extension/app/components/settings/categories/general-setting/UriSettingsBlock.scss 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 c56574b25d..5a0517f67d 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,11 +1,11 @@ // @flow import { Component } from 'react'; -import type { Node } from 'react'; +import type { Node, ComponentType } from 'react'; import { observer } from 'mobx-react'; import classNames from 'classnames'; import Select from '../../../common/Select'; -import { MenuItem } from '@mui/material'; -import { intlShape } from 'react-intl'; +import { Box, MenuItem, Typography } from '@mui/material'; +import { defineMessages, intlShape } from 'react-intl'; import ReactToolboxMobxForm from '../../../../utils/ReactToolboxMobxForm'; import LocalizableError from '../../../../i18n/LocalizableError'; import styles from './ExplorerSettings.scss'; @@ -13,28 +13,36 @@ 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, InjectedLayoutProps } from '../../../../styles/context/layout'; type Props = {| +explorers: $ReadOnlyArray<$ReadOnly>, +selectedExplorer: SelectedExplorer, - +onSelectExplorer: {| + +onSelectExplorer: ({| explorer: $ReadOnly, - |} => PossiblyAsync, + |}) => PossiblyAsync, +isSubmitting: boolean, +error?: ?LocalizableError, |}; +const messages = defineMessages({ + title: { + id: 'wallet.settings.blockchain.explorer.title', + defaultMessage: '!!!Explorer settings', + }, +}); + @observer -export default class ExplorerSettings extends Component { - static defaultProps: {|error: void|} = { - error: undefined +class ExplorerSettings extends Component { + static defaultProps: {| error: void |} = { + error: undefined, }; - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { + static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; - selectExplorer: $ReadOnly => Promise = async (explorer) => { + selectExplorer: ($ReadOnly) => Promise = async explorer => { await this.props.onSelectExplorer({ explorer }); }; @@ -43,12 +51,12 @@ export default class ExplorerSettings extends Component { explorerId: { label: this.context.intl.formatMessage(globalMessages.blockchainExplorer), value: this.props.selectedExplorer.selected, - } - } + }, + }, }); render(): Node { - const { isSubmitting, error } = this.props; + const { isSubmitting, error, isRevampLayout } = this.props; const { intl } = this.context; const { form } = this; const explorerId = form.$('explorerId'); @@ -63,22 +71,31 @@ export default class ExplorerSettings extends Component { return (
- - {error &&

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

} + {isRevampLayout && ( + + {intl.formatMessage(messages.title)} + + )} + + + {error &&

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

} +
); } } + +export default (withLayout(ExplorerSettings): 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 9eb2abcf3c..970e598ea7 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 @@ -2,9 +2,8 @@ import { Component } from 'react'; import type { Node, ComponentType } from 'react'; import { observer } from 'mobx-react'; -import { Button } from '@mui/material'; +import { Box, Button, Typography } from '@mui/material'; import { intlShape } from 'react-intl'; -import styles from './UriSettingsBlock.scss'; import globalMessages from '../../../../i18n/global-messages'; import { observable, runInAction } from 'mobx'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; @@ -33,9 +32,23 @@ class UriSettingsBlock extends Component { const isDisabled = this.props.isFirefox && this.hasPressed; return ( -
-

{intl.formatMessage(globalMessages.uriSchemeLabel)}

-

{intl.formatMessage(globalMessages.uriExplanation)}

+ + + {intl.formatMessage(globalMessages.uriSchemeLabel)} + + + + {intl.formatMessage( + isRevampLayout ? globalMessages.uriExplanationRevamp : globalMessages.uriExplanation + )} + -
+ ); } } diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/UriSettingsBlock.scss b/packages/yoroi-extension/app/components/settings/categories/general-setting/UriSettingsBlock.scss deleted file mode 100644 index e26ef668cd..0000000000 --- a/packages/yoroi-extension/app/components/settings/categories/general-setting/UriSettingsBlock.scss +++ /dev/null @@ -1,30 +0,0 @@ -@import '../../../../themes/mixins/underline'; - -.component { - border-top: 1px solid var(--yoroi-palette-gray-200); - padding-top: 24px; - padding-bottom: 24px; - - .title { - color: var(--yoroi-support-settings-text); - font-weight: 500; - font-size: 18px; - line-height: 22px; - margin-bottom: 12px; - } - - p { - color: var(--yoroi-support-settings-text); - font-size: 14px; - line-height: 22px; - } - - p button { - @include underline(var(--yoroi-support-settings-text)); - } - - p { - margin-bottom: 2px; - font-weight: 400; - } -} diff --git a/packages/yoroi-extension/app/containers/settings/categories/BlockchainSettingsPage.js b/packages/yoroi-extension/app/containers/settings/categories/BlockchainSettingsPage.js index fc2cdeae2b..e32c56fb9f 100644 --- a/packages/yoroi-extension/app/containers/settings/categories/BlockchainSettingsPage.js +++ b/packages/yoroi-extension/app/containers/settings/categories/BlockchainSettingsPage.js @@ -11,67 +11,69 @@ import registerProtocols from '../../../uri-protocols'; import environment from '../../../environment'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import LocalizableError from '../../../i18n/LocalizableError'; -import { - PublicDeriver, -} from '../../../api/ada/lib/storage/models/PublicDeriver/index'; +import { PublicDeriver } from '../../../api/ada/lib/storage/models/PublicDeriver/index'; import NoWalletMessage from '../../wallet/NoWalletMessage'; import { isCardanoHaskell } from '../../../api/ada/lib/storage/database/prepackaged/networks'; -import type { - ExplorerRow, -} from '../../../api/ada/lib/storage/database/explorers/tables'; +import type { ExplorerRow } from '../../../api/ada/lib/storage/database/explorers/tables'; import { SelectedExplorer } from '../../../domain/SelectedExplorer'; -import type { - GetAllExplorersResponse, -} from '../../../api/ada/lib/storage/bridge/explorers'; +import type { GetAllExplorersResponse } from '../../../api/ada/lib/storage/bridge/explorers'; import { trackUriPrompt } from '../../../api/analytics'; +import { Typography } from '@mui/material'; +import { settingsMenuMessages } from '../../../components/settings/menu/SettingsMenu'; type GeneratedData = typeof BlockchainSettingsPage.prototype.generated; @observer export default class BlockchainSettingsPage extends Component> { - - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { + static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; render(): Node { const walletsStore = this.generated.stores.wallets; + const profileStore = this.generated.stores.profile; if (walletsStore.selected == null) { - return (); + return ; } const networkInfo = walletsStore.selected.getParent().getNetworkInfo(); const { stores } = this.generated; + const { intl } = this.context; const isSubmittingExplorer = stores.explorers.setSelectedExplorerRequest.isExecuting; - const uriSettings = ( - isCardanoHaskell(networkInfo) && - this.generated.canRegisterProtocol() - ) - ? ( + const uriSettings = + isCardanoHaskell(networkInfo) && this.generated.canRegisterProtocol() ? ( { - registerProtocols(); - trackUriPrompt('allow'); - } - } + registerUriScheme={() => { + registerProtocols(); + trackUriPrompt('allow'); + }} isFirefox={environment.userAgentInfo.isFirefox()} /> - ) - : null; + ) : null; return ( <> + {profileStore.isRevampTheme && ( + + {intl.formatMessage(settingsMenuMessages.blockchain)} + + )} { throw new Error('No explorer for wallet network'); })() + explorers={ + this.generated.stores.explorers.allExplorers.get(networkInfo.NetworkId) ?? + (() => { + throw new Error('No explorer for wallet network'); + })() } - selectedExplorer={stores.explorers.selectedExplorer - .get(networkInfo.NetworkId) ?? (() => { throw new Error('No explorer for wallet network'); })() + selectedExplorer={ + stores.explorers.selectedExplorer.get(networkInfo.NetworkId) ?? + (() => { + throw new Error('No explorer for wallet network'); + })() } error={stores.explorers.setSelectedExplorerRequest.error} /> @@ -86,7 +88,7 @@ export default class BlockchainSettingsPage extends Component, - |}) => Promise + |}) => Promise, |}, |}, |}, @@ -96,15 +98,18 @@ export default class BlockchainSettingsPage extends Component, setSelectedExplorerRequest: {| error: ?LocalizableError, - isExecuting: boolean + isExecuting: boolean, |}, allExplorers: GetAllExplorersResponse, |}, wallets: {| - selected: null | PublicDeriver<> - |} - |} - |} { + selected: null | PublicDeriver<>, + |}, + profile: {| + isRevampTheme: boolean, + |}, + |}, + |} { if (this.props.generated !== undefined) { return this.props.generated; } @@ -125,6 +130,9 @@ export default class BlockchainSettingsPage extends Component Date: Wed, 16 Aug 2023 06:56:22 +0300 Subject: [PATCH 04/20] feat(settings/wallet): revamp update wallet name section --- .../wallet/settings/WalletNameSetting.js | 71 ++++++---- .../settings/categories/WalletSettingsPage.js | 130 ++++++++++-------- .../app/i18n/locales/en-US.json | 1 + 3 files changed, 117 insertions(+), 85 deletions(-) diff --git a/packages/yoroi-extension/app/components/wallet/settings/WalletNameSetting.js b/packages/yoroi-extension/app/components/wallet/settings/WalletNameSetting.js index 10a0ead912..085fa92284 100644 --- a/packages/yoroi-extension/app/components/wallet/settings/WalletNameSetting.js +++ b/packages/yoroi-extension/app/components/wallet/settings/WalletNameSetting.js @@ -1,5 +1,5 @@ // @flow -import type { Node } from 'react'; +import type { Node, ComponentType } from 'react'; import { Component } from 'react'; import { observer } from 'mobx-react'; import { defineMessages, intlShape } from 'react-intl'; @@ -8,12 +8,18 @@ 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, InjectedLayoutProps } from '../../../styles/context/layout'; +import { Box, Typography } from '@mui/material'; const messages = defineMessages({ name: { id: 'wallet.settings.name.label', defaultMessage: '!!!Wallet name', }, + title: { + id: 'wallet.settings.wallet.basics', + defaultMessage: '!!!Basics', + }, }); type Props = {| @@ -32,11 +38,12 @@ type Props = {| |}; @observer -export default class WalletNameSetting extends Component { - static defaultProps: {|error: void|} = { - error: undefined +class WalletNameSetting extends Component { + static defaultProps: {| error: void |} = { + error: undefined, }; - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { + + static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; @@ -50,35 +57,45 @@ export default class WalletNameSetting extends Component { const { walletName, error, - onFieldValueChange, onStartEditing, - onStopEditing, onCancelEditing, - nameValidator, activeField, - isSubmitting, isInvalid, + onFieldValueChange, + onStartEditing, + onStopEditing, + onCancelEditing, + nameValidator, + activeField, + isSubmitting, + isInvalid, lastUpdatedField, classicTheme, + isRevampLayout, } = this.props; return ( <> - onStartEditing('name')} - onStopEditing={onStopEditing} - onCancelEditing={onCancelEditing} - onSubmit={async (value) => onFieldValueChange('name', value)} - isValid={nameValidator} - validationErrorMessage={intl.formatMessage(globalMessages.invalidWalletName)} - successfullyUpdated={!isSubmitting && lastUpdatedField === 'name' && !isInvalid} - classicTheme={classicTheme} - /> - {error && ( -

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

+ {isRevampLayout && ( + + {intl.formatMessage(messages.title)} + )} + + onStartEditing('name')} + onStopEditing={onStopEditing} + onCancelEditing={onCancelEditing} + onSubmit={async value => onFieldValueChange('name', value)} + isValid={nameValidator} + validationErrorMessage={intl.formatMessage(globalMessages.invalidWalletName)} + successfullyUpdated={!isSubmitting && lastUpdatedField === 'name' && !isInvalid} + classicTheme={classicTheme} + /> + {error &&

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

} + ); } } + +export default (withLayout(WalletNameSetting): ComponentType); diff --git a/packages/yoroi-extension/app/containers/settings/categories/WalletSettingsPage.js b/packages/yoroi-extension/app/containers/settings/categories/WalletSettingsPage.js index 49f4d087e2..df4c22026a 100644 --- a/packages/yoroi-extension/app/containers/settings/categories/WalletSettingsPage.js +++ b/packages/yoroi-extension/app/containers/settings/categories/WalletSettingsPage.js @@ -28,20 +28,24 @@ import LocalizableError from '../../../i18n/LocalizableError'; import type { RenameModelFunc } from '../../../api/common/index'; import type { IGetSigningKey } from '../../../api/ada/lib/storage/models/PublicDeriver/interfaces'; import { trackExportWallet } from '../../../api/analytics'; +import { Typography } from '@mui/material'; +import { intlShape } from 'react-intl'; +import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; +import globalMessages from '../../../i18n/global-messages'; type GeneratedData = typeof WalletSettingsPage.prototype.generated; @observer export default class WalletSettingsPage extends Component> { + static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { + intl: intlShape.isRequired, + }; render(): Node { const { profile, walletSettings } = this.generated.stores; - const { actions, } = this.generated; - const { - renameModelRequest, - lastUpdatedWalletField, - walletFieldBeingEdited, - } = walletSettings; + const { intl } = this.context; + const { actions } = this.generated; + const { renameModelRequest, lastUpdatedWalletField, walletFieldBeingEdited } = walletSettings; const { startEditingWalletField, stopEditingWalletField, @@ -61,21 +65,23 @@ export default class WalletSettingsPage extends Component {this.getDialog(selectedWallet)} + {profile.isRevampTheme && ( + + {intl.formatMessage(globalMessages.walletLabel)} + + )} { if (field === 'name') { @@ -94,9 +100,11 @@ export default class WalletSettingsPage extends Component {withSigning != null && ( actions.dialogs.open.trigger({ - dialog: ChangeWalletPasswordDialogContainer, - })} + openDialog={() => + actions.dialogs.open.trigger({ + dialog: ChangeWalletPasswordDialogContainer, + }) + } walletPasswordUpdateDate={ this.generated.stores.wallets.getSigningKeyCache(withSigning).signingKeyUpdateDate } @@ -104,9 +112,11 @@ export default class WalletSettingsPage extends Component )} actions.dialogs.open.trigger({ - dialog: ResyncWalletDialogContainer, - })} + openDialog={() => + actions.dialogs.open.trigger({ + dialog: ResyncWalletDialogContainer, + }) + } /> { @@ -118,17 +128,17 @@ export default class WalletSettingsPage extends Component actions.dialogs.open.trigger({ - dialog: RemoveWalletDialogContainer, - })} + openDialog={() => + actions.dialogs.open.trigger({ + dialog: RemoveWalletDialogContainer, + }) + } /> ); } - getDialog: (void | PublicDeriver<>) => Node = ( - publicDeriver - ) => { + getDialog: (void | PublicDeriver<>) => Node = publicDeriver => { const { isOpen } = this.generated.stores.uiDialogs; if (publicDeriver != null && isOpen(ChangeWalletPasswordDialogContainer)) { return ( @@ -164,11 +174,10 @@ export default class WalletSettingsPage extends Component, + ChangeWalletPasswordDialogContainerProps: InjectedOrGenerated, ExportWalletDialogContainerProps: InjectedOrGenerated, RemoveWalletDialogContainerProps: InjectedOrGenerated, ResyncWalletDialogContainerProps: InjectedOrGenerated, @@ -177,30 +186,30 @@ export default class WalletSettingsPage extends Component void - |} + params?: any, + |}) => void, + |}, |}, walletSettings: {| cancelEditingWalletField: {| - trigger: (params: void) => void + trigger: (params: void) => void, |}, renameConceptualWallet: {| trigger: (params: {| newName: string, - publicDeriver: PublicDeriver<> - |}) => Promise + publicDeriver: PublicDeriver<>, + |}) => Promise, |}, startEditingWalletField: {| - trigger: (params: {| field: string |}) => void + trigger: (params: {| field: string |}) => void, |}, stopEditingWalletField: {| - trigger: (params: void) => void - |} - |} + trigger: (params: void) => void, + |}, + |}, |}, stores: {| - profile: {| isClassicTheme: boolean |}, + profile: {| isClassicTheme: boolean, isRevampTheme: boolean |}, uiDialogs: {| isOpen: any => boolean |}, walletSettings: {| getConceptualWalletSettingsCache: ConceptualWallet => ConceptualWalletSettingsCache, @@ -209,29 +218,30 @@ export default class WalletSettingsPage extends Component, - wasExecuted: boolean + wasExecuted: boolean, |}, - walletFieldBeingEdited: null | string + walletFieldBeingEdited: null | string, |}, wallets: {| getSigningKeyCache: IGetSigningKey => SigningKeyCache, - selected: null | PublicDeriver<> - |} - |} - |} { + selected: null | PublicDeriver<>, + |}, + |}, + |} { if (this.props.generated !== undefined) { return this.props.generated; } if (this.props.stores == null || this.props.actions == null) { throw new Error(`${nameof(WalletSettingsPage)} no way to generated props`); } - const { actions, stores, } = this.props; + const { actions, stores } = this.props; const settingActions = actions.walletSettings; const settingStore = this.props.stores.walletSettings; return Object.freeze({ stores: { profile: { isClassicTheme: stores.profile.isClassicTheme, + isRevampTheme: stores.profile.isRevampTheme, }, walletSettings: { getConceptualWalletSettingsCache: settingStore.getConceptualWalletSettingsCache, @@ -263,18 +273,22 @@ export default class WalletSettingsPage extends Component - ), - ExportWalletDialogContainerProps: ( - { actions, stores, }: InjectedOrGenerated - ), - RemoveWalletDialogContainerProps: ( - { actions, stores, }: InjectedOrGenerated - ), - ResyncWalletDialogContainerProps: ( - { actions, stores, }: InjectedOrGenerated - ), + ChangeWalletPasswordDialogContainerProps: ({ + actions, + stores, + }: InjectedOrGenerated), + ExportWalletDialogContainerProps: ({ + actions, + stores, + }: InjectedOrGenerated), + RemoveWalletDialogContainerProps: ({ + actions, + stores, + }: InjectedOrGenerated), + ResyncWalletDialogContainerProps: ({ + actions, + stores, + }: InjectedOrGenerated), }); } } diff --git a/packages/yoroi-extension/app/i18n/locales/en-US.json b/packages/yoroi-extension/app/i18n/locales/en-US.json index 8fea94282f..38fa314a01 100644 --- a/packages/yoroi-extension/app/i18n/locales/en-US.json +++ b/packages/yoroi-extension/app/i18n/locales/en-US.json @@ -894,6 +894,7 @@ "wallet.settings.general.language": "Language", "wallet.settings.blockchain.explorer.title": "Explorer settings", "wallet.settings.general.revamp.languageSelectLabel": "Select your language", + "wallet.settings.wallet.basics": "Basics", "wallet.staking.FAQPage": "FAQ page", "wallet.staking.availableTotalRewards": "Available Total Rewards", "wallet.staking.availableTotalRewardsHelper": "If the Reward amount is different than expected, see possible reasons of that on our {faqLink}.", From 3f099831b97d90033bfbbe84e68f200b710f813b Mon Sep 17 00:00:00 2001 From: Ahmed Ibrahim Date: Wed, 16 Aug 2023 07:08:38 +0300 Subject: [PATCH 05/20] feat(settings/wallet): revamp change password section --- .../settings/SpendingPasswordSetting.js | 76 ++++++++++++++----- .../app/i18n/locales/en-US.json | 3 + 2 files changed, 62 insertions(+), 17 deletions(-) diff --git a/packages/yoroi-extension/app/components/wallet/settings/SpendingPasswordSetting.js b/packages/yoroi-extension/app/components/wallet/settings/SpendingPasswordSetting.js index 0fd0a740bc..de3a1cdd7f 100644 --- a/packages/yoroi-extension/app/components/wallet/settings/SpendingPasswordSetting.js +++ b/packages/yoroi-extension/app/components/wallet/settings/SpendingPasswordSetting.js @@ -1,5 +1,5 @@ // @flow -import type { Node } from 'react'; +import type { Node, ComponentType } from 'react'; import { Component } from 'react'; import { observer } from 'mobx-react'; import { defineMessages, intlShape } from 'react-intl'; @@ -8,6 +8,8 @@ import ReadOnlyInput from '../../widgets/forms/ReadOnlyInput'; import globalMessages from '../../../i18n/global-messages'; // import styles from './SpendingPasswordSetting.scss'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; +import { withLayout, InjectedLayoutProps } from '../../../styles/context/layout'; +import { Box, Button, Typography } from '@mui/material'; const messages = defineMessages({ passwordLastUpdated: { @@ -18,6 +20,19 @@ const messages = defineMessages({ id: 'wallet.settings.unchangedPassword', defaultMessage: '!!!Password unchanged since wallet creation', }, + title: { + id: 'wallet.settings.password.title', + defaultMessage: '!!!Wallet password', + }, + passwordDescription: { + id: 'wallet.settings.password.description', + defaultMessage: + '!!!Password is an additional security layer used to confirm transactions from this device. Password is stored locally, so you are only person who can change or restore it.', + }, + changePassword: { + id: 'wallet.settings.password.change', + defaultMessage: '!!!Change password', + }, }); type Props = {| @@ -27,26 +42,22 @@ type Props = {| |}; @observer -export default class SpendingPasswordSetting extends Component { - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { +class SpendingPasswordSetting extends Component { + static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; render(): Node { const { intl } = this.context; - const { - walletPasswordUpdateDate, - classicTheme, - } = this.props; - const passwordMessage = walletPasswordUpdateDate == null - ? intl.formatMessage(messages.unchangedPassword) - : ( - intl.formatMessage(messages.passwordLastUpdated, { - lastUpdated: moment(walletPasswordUpdateDate).fromNow(), - }) - ); - - return ( + const { walletPasswordUpdateDate, classicTheme, renderLayoutComponent } = this.props; + const passwordMessage = + walletPasswordUpdateDate == null + ? intl.formatMessage(messages.unchangedPassword) + : intl.formatMessage(messages.passwordLastUpdated, { + lastUpdated: moment(walletPasswordUpdateDate).fromNow(), + }); + + const classicLayout = ( { classicTheme={classicTheme} /> ); - } + const revampLayout = ( + + + {intl.formatMessage(messages.title)} + + + + {intl.formatMessage(messages.passwordDescription)} + + + + + ); + + return renderLayoutComponent({ + CLASSIC: classicLayout, + REVAMP: revampLayout, + }); + } } + +export default (withLayout(SpendingPasswordSetting): ComponentType); diff --git a/packages/yoroi-extension/app/i18n/locales/en-US.json b/packages/yoroi-extension/app/i18n/locales/en-US.json index 38fa314a01..d8a306e061 100644 --- a/packages/yoroi-extension/app/i18n/locales/en-US.json +++ b/packages/yoroi-extension/app/i18n/locales/en-US.json @@ -894,6 +894,9 @@ "wallet.settings.general.language": "Language", "wallet.settings.blockchain.explorer.title": "Explorer settings", "wallet.settings.general.revamp.languageSelectLabel": "Select your language", + "wallet.settings.password.title": "Wallet password", + "wallet.settings.password.description": "Password is an additional security layer used to confirm transactions from this device. Password is stored locally, so you are only person who can change or restore it.", + "wallet.settings.password.change": "Change password", "wallet.settings.wallet.basics": "Basics", "wallet.staking.FAQPage": "FAQ page", "wallet.staking.availableTotalRewards": "Available Total Rewards", From 0abf4f514f46d02d285a56d31efcb16b36c850bd Mon Sep 17 00:00:00 2001 From: Ahmed Ibrahim Date: Wed, 16 Aug 2023 07:28:10 +0300 Subject: [PATCH 06/20] feat(settings/wallet): revamp the resync wallet section --- .../general-setting/UriSettingsBlock.js | 2 +- .../components/wallet/settings/ResyncBlock.js | 38 +++++++++++++++---- .../wallet/settings/ResyncBlock.scss | 16 -------- .../settings/SpendingPasswordSetting.js | 11 +----- .../app/styles/overrides/revamp/Button.js | 1 + 5 files changed, 34 insertions(+), 34 deletions(-) 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 970e598ea7..5720c6af86 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 @@ -37,7 +37,7 @@ class UriSettingsBlock extends Component { pb: '24px', pt: !isRevampLayout && '24px', borderTop: !isRevampLayout && '1px solid', - borderColor: !isRevampLayout && 'grayscale.200', + borderColor: !isRevampLayout && 'var(--yoroi-palette-gray-200)', }} > diff --git a/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.js b/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.js index 49fe9f447d..6d19db4acb 100644 --- a/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.js +++ b/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.js @@ -2,9 +2,8 @@ import { Component } from 'react'; import type { Node, ComponentType } from 'react'; import { defineMessages, intlShape } from 'react-intl'; -import styles from './ResyncBlock.scss'; import { observer } from 'mobx-react'; -import { Button } from '@mui/material'; +import { Box, Button, Typography } from '@mui/material'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import globalMessages from '../../../i18n/global-messages'; import { withLayout } from '../../../styles/context/layout'; @@ -38,19 +37,44 @@ class ResyncBlock extends Component { const { isRevampLayout, openDialog } = this.props; return ( -
-

{intl.formatMessage(messages.titleLabel)}

-

{intl.formatMessage(messages.resyncExplanation)}

+ + + {intl.formatMessage(messages.titleLabel)} + + + {intl.formatMessage(messages.resyncExplanation)} + -
+ ); } } diff --git a/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.scss b/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.scss index a9d68e0ec7..1a6f8c5d19 100644 --- a/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.scss +++ b/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.scss @@ -7,20 +7,4 @@ font-weight: 400; color: var(--yoroi-support-settings-text); - - h2 { - color: var(--yoroi-support-settings-text); - font-weight: 500; - font-size: 18px; - line-height: 22px; - margin-bottom: 12px; - } - - p { - color: var(--yoroi-support-settings-text); - font-weight: 400; - font-size: 14px; - line-height: 19px; - margin-bottom: 10px; - } } diff --git a/packages/yoroi-extension/app/components/wallet/settings/SpendingPasswordSetting.js b/packages/yoroi-extension/app/components/wallet/settings/SpendingPasswordSetting.js index de3a1cdd7f..afa09dc68c 100644 --- a/packages/yoroi-extension/app/components/wallet/settings/SpendingPasswordSetting.js +++ b/packages/yoroi-extension/app/components/wallet/settings/SpendingPasswordSetting.js @@ -77,16 +77,7 @@ class SpendingPasswordSetting extends Component { {intl.formatMessage(messages.passwordDescription)} - diff --git a/packages/yoroi-extension/app/styles/overrides/revamp/Button.js b/packages/yoroi-extension/app/styles/overrides/revamp/Button.js index d5233a7418..e42ae2b999 100644 --- a/packages/yoroi-extension/app/styles/overrides/revamp/Button.js +++ b/packages/yoroi-extension/app/styles/overrides/revamp/Button.js @@ -17,6 +17,7 @@ const RevampButtonCommonProps: Object = { '&.MuiButton-sizeLarge': { height: '56px' }, '&.MuiButton-sizeMedium': { padding: '10px', height: '48px' }, '&.MuiButton-sizeSmall': { padding: '7px', height: '32px' }, + '&.MuiButton-sizeFlat': { padding: '13px 24px', hight: 'unset' }, '&:hover': { boxShadow: 'none' }, }, }, From 322d213be9834db4f13fd4f05a8b5dfd0e1e8f93 Mon Sep 17 00:00:00 2001 From: Ahmed Ibrahim Date: Wed, 16 Aug 2023 07:31:46 +0300 Subject: [PATCH 07/20] feat(settings/wallet): revamp the export wallet section --- .../wallet/settings/ExportWallet.js | 39 +++++++++++++++---- .../wallet/settings/ExportWallet.scss | 24 ------------ .../wallet/settings/ResyncBlock.scss | 10 ----- 3 files changed, 32 insertions(+), 41 deletions(-) delete mode 100644 packages/yoroi-extension/app/components/wallet/settings/ExportWallet.scss delete mode 100644 packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.scss diff --git a/packages/yoroi-extension/app/components/wallet/settings/ExportWallet.js b/packages/yoroi-extension/app/components/wallet/settings/ExportWallet.js index b9750fa518..7a32a2ec94 100644 --- a/packages/yoroi-extension/app/components/wallet/settings/ExportWallet.js +++ b/packages/yoroi-extension/app/components/wallet/settings/ExportWallet.js @@ -3,9 +3,8 @@ import { Component } from 'react'; import type { Node, ComponentType } from 'react'; import { defineMessages, intlShape } from 'react-intl'; import globalMessages from '../../../i18n/global-messages'; -import styles from './ExportWallet.scss'; import { observer } from 'mobx-react'; -import { Button } from '@mui/material'; +import { Box, Button, Typography } from '@mui/material'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import { withLayout } from '../../../styles/context/layout'; @@ -37,19 +36,45 @@ class ExportWallet extends Component { const { isRevampLayout, openDialog } = this.props; return ( -
-

{intl.formatMessage(messages.titleLabel)}

-

{intl.formatMessage(messages.exportExplanation)}

+ + + {intl.formatMessage(messages.titleLabel)} + + + + {intl.formatMessage(messages.exportExplanation)} + -
+ ); } } diff --git a/packages/yoroi-extension/app/components/wallet/settings/ExportWallet.scss b/packages/yoroi-extension/app/components/wallet/settings/ExportWallet.scss deleted file mode 100644 index b252e2ac74..0000000000 --- a/packages/yoroi-extension/app/components/wallet/settings/ExportWallet.scss +++ /dev/null @@ -1,24 +0,0 @@ -.component { - border-top: 1px solid var(--yoroi-palette-gray-200); - padding-top: 30px; - margin-top: 32px; - - font-weight: 400; - color: var(--yoroi-support-settings-text); - - h2 { - color: var(--yoroi-support-settings-text); - font-weight: 500; - font-size: 18px; - line-height: 22px; - margin-bottom: 12px; - } - - p { - color: var(--yoroi-support-settings-text); - font-weight: 400; - font-size: 14px; - line-height: 19px; - margin-bottom: 10px; - } -} diff --git a/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.scss b/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.scss deleted file mode 100644 index 1a6f8c5d19..0000000000 --- a/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import '../../../themes/mixins/loading-spinner'; - -.component { - border-top: 1px solid var(--yoroi-palette-gray-200); - padding-top: 30px; - margin-top: 32px; - - font-weight: 400; - color: var(--yoroi-support-settings-text); -} From 23cd407b9151b98e8fb630dddc20cf146418451f Mon Sep 17 00:00:00 2001 From: Ahmed Ibrahim Date: Wed, 16 Aug 2023 07:34:31 +0300 Subject: [PATCH 08/20] feat(settings/wallet): revamp remove wallet section --- .../wallet/settings/RemoveWallet.js | 38 ++++++++++++++++--- .../wallet/settings/RemoveWallet.scss | 24 ------------ 2 files changed, 32 insertions(+), 30 deletions(-) delete mode 100644 packages/yoroi-extension/app/components/wallet/settings/RemoveWallet.scss diff --git a/packages/yoroi-extension/app/components/wallet/settings/RemoveWallet.js b/packages/yoroi-extension/app/components/wallet/settings/RemoveWallet.js index 4f9cbcbeea..9ae13bdde3 100644 --- a/packages/yoroi-extension/app/components/wallet/settings/RemoveWallet.js +++ b/packages/yoroi-extension/app/components/wallet/settings/RemoveWallet.js @@ -5,7 +5,7 @@ import { defineMessages, intlShape } from 'react-intl'; import globalMessages from '../../../i18n/global-messages'; import styles from './RemoveWallet.scss'; import { observer } from 'mobx-react'; -import { Button } from '@mui/material'; +import { Box, Button, Typography } from '@mui/material'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import { withLayout } from '../../../styles/context/layout'; @@ -39,20 +39,46 @@ class RemoveWallet extends Component { const { openDialog, isRevampLayout } = this.props; return ( -
-

{intl.formatMessage(messages.titleLabel)}

-

{intl.formatMessage(messages.removeExplanation)}

+ + + {intl.formatMessage(messages.titleLabel)} + + + + {intl.formatMessage(messages.removeExplanation)} + -
+ ); } } diff --git a/packages/yoroi-extension/app/components/wallet/settings/RemoveWallet.scss b/packages/yoroi-extension/app/components/wallet/settings/RemoveWallet.scss deleted file mode 100644 index b252e2ac74..0000000000 --- a/packages/yoroi-extension/app/components/wallet/settings/RemoveWallet.scss +++ /dev/null @@ -1,24 +0,0 @@ -.component { - border-top: 1px solid var(--yoroi-palette-gray-200); - padding-top: 30px; - margin-top: 32px; - - font-weight: 400; - color: var(--yoroi-support-settings-text); - - h2 { - color: var(--yoroi-support-settings-text); - font-weight: 500; - font-size: 18px; - line-height: 22px; - margin-bottom: 12px; - } - - p { - color: var(--yoroi-support-settings-text); - font-weight: 400; - font-size: 14px; - line-height: 19px; - margin-bottom: 10px; - } -} From d4b7507e8f58f3228cd87386e084805b647640ad Mon Sep 17 00:00:00 2001 From: Ahmed Ibrahim Date: Wed, 16 Aug 2023 08:13:47 +0300 Subject: [PATCH 09/20] feat(settings/general): update all components layouts --- .../AboutYoroiSettingsBlock.js | 155 ++++++++++-------- .../AboutYoroiSettingsBlock.scss | 13 +- .../general-setting/ThemeSettingsBlock.js | 18 +- .../general-setting/UnitOfAccountSettings.js | 32 +++- .../UnitOfAccountSettings.scss | 4 - .../wallet/settings/RemoveWallet.js | 1 - .../components/wallet/settings/ResyncBlock.js | 3 +- .../app/i18n/locales/en-US.json | 4 +- 8 files changed, 130 insertions(+), 100 deletions(-) diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/AboutYoroiSettingsBlock.js b/packages/yoroi-extension/app/components/settings/categories/general-setting/AboutYoroiSettingsBlock.js index 3b80940629..b3d40e62f1 100644 --- a/packages/yoroi-extension/app/components/settings/categories/general-setting/AboutYoroiSettingsBlock.js +++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/AboutYoroiSettingsBlock.js @@ -1,18 +1,18 @@ // @flow import { Component } from 'react'; -import type { Node } from 'react'; +import type { Node, ComponentType } from 'react'; import { defineMessages, intlShape } from 'react-intl'; import styles from './AboutYoroiSettingsBlock.scss'; import { observer } from 'mobx-react'; import GridFlexContainer from '../../../layout/GridFlexContainer'; -import { ReactComponent as githubSvg } from '../../../../assets/images/social/github.inline.svg'; -import { ReactComponent as youtubeSvg } from '../../../../assets/images/social/youtube.inline.svg'; -import { ReactComponent as telegramSvg } from '../../../../assets/images/social/telegram.inline.svg'; -import { ReactComponent as twitterSvg } from '../../../../assets/images/social/twitter.inline.svg'; -import { ReactComponent as yoroiSvg } from '../../../../assets/images/yoroi-logo-shape-white.inline.svg'; -import { ReactComponent as facebookSvg } from '../../../../assets/images/social/facebook.inline.svg'; -import { ReactComponent as mediumSvg } from '../../../../assets/images/social/medium.inline.svg'; +import { ReactComponent as githubSvg } from '../../../../assets/images/social/github.inline.svg'; +import { ReactComponent as youtubeSvg } from '../../../../assets/images/social/youtube.inline.svg'; +import { ReactComponent as telegramSvg } from '../../../../assets/images/social/telegram.inline.svg'; +import { ReactComponent as twitterSvg } from '../../../../assets/images/social/twitter.inline.svg'; +import { ReactComponent as yoroiSvg } from '../../../../assets/images/yoroi-logo-shape-white.inline.svg'; +import { ReactComponent as facebookSvg } from '../../../../assets/images/social/facebook.inline.svg'; +import { ReactComponent as mediumSvg } from '../../../../assets/images/social/medium.inline.svg'; import environment from '../../../../environment'; import LinkButton from '../../../widgets/LinkButton'; @@ -22,6 +22,8 @@ import ExplorableHash from '../../../widgets/hashWrappers/ExplorableHash'; import { handleExternalLinkClick } from '../../../../utils/routing'; import { PublicDeriver } from '../../../../api/ada/lib/storage/models/PublicDeriver'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; +import { Box, Typography } from '@mui/material'; +import { withLayout, InjectedLayoutProps } from '../../../../styles/context/layout'; const messages = defineMessages({ aboutYoroiLabel: { @@ -66,11 +68,11 @@ const messages = defineMessages({ }, mainnet: { id: 'settings.general.aboutYoroi.network.mainnet', - defaultMessage: '!!!mainnet', + defaultMessage: '!!!Mainnet Network', }, testnet: { id: 'settings.general.aboutYoroi.network.testnet', - defaultMessage: '!!!testnet', + defaultMessage: '!!!Testnet Network', }, commitLabel: { id: 'settings.general.aboutYoroi.commitLabel', @@ -82,68 +84,93 @@ const messages = defineMessages({ }, }); -const socialMediaLinks = [{ - url: 'https://twitter.com/YoroiWallet', - svg: twitterSvg, - message: messages.aboutYoroiTwitter -}, { - svgClass: styles.yoroiLogo, - url: 'https://yoroi-wallet.com', - svg: yoroiSvg, - message: messages.aboutYoroiWebsite -}, { - url: 'https://www.facebook.com/Yoroi-wallet-399386000586822/', - svg: facebookSvg, - message: messages.aboutYoroiFacebook -}, { - url: 'https://www.youtube.com/channel/UCgFQ0hHuPO1QDcyP6t9KZTQ', - svg: youtubeSvg, - message: messages.aboutYoroiYoutube -}, { - url: 'https://t.me/emurgo', - svg: telegramSvg, - message: messages.aboutEmurgoTelegram -}, { - url: 'https://medium.com/@emurgo_io', - svg: mediumSvg, - message: messages.aboutYoroiMedium -}, { - url: 'https://github.com/Emurgo/yoroi-frontend', - svg: githubSvg, - message: messages.aboutYoroiGithub -}]; +const socialMediaLinks = [ + { + url: 'https://twitter.com/YoroiWallet', + svg: twitterSvg, + message: messages.aboutYoroiTwitter, + }, + { + svgClass: styles.yoroiLogo, + url: 'https://yoroi-wallet.com', + svg: yoroiSvg, + message: messages.aboutYoroiWebsite, + }, + { + url: 'https://www.facebook.com/Yoroi-wallet-399386000586822/', + svg: facebookSvg, + message: messages.aboutYoroiFacebook, + }, + { + url: 'https://www.youtube.com/channel/UCgFQ0hHuPO1QDcyP6t9KZTQ', + svg: youtubeSvg, + message: messages.aboutYoroiYoutube, + }, + { + url: 'https://t.me/emurgo', + svg: telegramSvg, + message: messages.aboutEmurgoTelegram, + }, + { + url: 'https://medium.com/@emurgo_io', + svg: mediumSvg, + message: messages.aboutYoroiMedium, + }, + { + url: 'https://github.com/Emurgo/yoroi-frontend', + svg: githubSvg, + message: messages.aboutYoroiGithub, + }, +]; const baseGithubUrl = 'https://github.com/Emurgo/yoroi-frontend/'; type Props = {| - wallet: null | PublicDeriver<> -|} + wallet: null | PublicDeriver<>, +|}; @observer -export default class AboutYoroiSettingsBlock extends Component { - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { +class AboutYoroiSettingsBlock extends Component { + static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; render(): Node { const { intl } = this.context; - const { wallet } = this.props; + const { wallet, isRevampLayout } = this.props; let network; if (wallet) { - const result = isTestnet(wallet.getParent().getNetworkInfo()) - network = result === true ? 'testnet' : 'mainnet' + const result = isTestnet(wallet.getParent().getNetworkInfo()); + network = result === true ? 'testnet' : 'mainnet'; } return ( -
-

{intl.formatMessage(messages.aboutYoroiLabel)}

+ + + {intl.formatMessage(messages.aboutYoroiLabel)} + {network && ( -

- {intl.formatMessage(messages.networkLabel)}  - {intl.formatMessage(messages[network])} -

)} +

+ {intl.formatMessage(messages.networkLabel)}  + {intl.formatMessage(messages[network])} +

+ )}
{intl.formatMessage(messages.versionLabel)}  { placementTooltip="bottom" onExternalLinkClick={handleExternalLinkClick} > - - {environment.getVersion()} - + {environment.getVersion()}
@@ -167,12 +192,10 @@ export default class AboutYoroiSettingsBlock extends Component { placementTooltip="bottom-start" onExternalLinkClick={handleExternalLinkClick} > - - {environment.commit} - + {environment.commit}
- {!environment.isProduction() && + {!environment.isProduction() && (
{intl.formatMessage(messages.branchLabel)}  { placementTooltip="bottom-start" onExternalLinkClick={handleExternalLinkClick} > - - {environment.branch} - + {environment.branch}
- } + )}
{socialMediaLinks.map(link => ( @@ -200,9 +221,9 @@ export default class AboutYoroiSettingsBlock extends Component { ))}
-
+ ); } - - } + +export default (withLayout(AboutYoroiSettingsBlock): ComponentType); diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/AboutYoroiSettingsBlock.scss b/packages/yoroi-extension/app/components/settings/categories/general-setting/AboutYoroiSettingsBlock.scss index 13b3ed28ac..4a379506a4 100644 --- a/packages/yoroi-extension/app/components/settings/categories/general-setting/AboutYoroiSettingsBlock.scss +++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/AboutYoroiSettingsBlock.scss @@ -2,13 +2,6 @@ font-weight: 400; color: var(--yoroi-support-settings-text); - h2 { - color: var(--yoroi-support-settings-text); - font-weight: 500; - font-size: 18px; - line-height: 22px; - margin-bottom: 12px; - } .aboutLine { font-size: 14px; line-height: 22px; @@ -29,9 +22,7 @@ } } -.component, .aboutSocial { - border-top: 1px solid var(--yoroi-palette-gray-200); - padding-top: 30px; - margin-top: 32px; + margin-top: 40px; + margin-left: -13px; } diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/ThemeSettingsBlock.js b/packages/yoroi-extension/app/components/settings/categories/general-setting/ThemeSettingsBlock.js index 34b628e295..2f3a8def16 100644 --- a/packages/yoroi-extension/app/components/settings/categories/general-setting/ThemeSettingsBlock.js +++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/ThemeSettingsBlock.js @@ -90,6 +90,7 @@ export default class ThemeSettingsBlock extends Component { render(): Node { const { currentTheme, onSubmit, onExternalLinkClick } = this.props; const { intl } = this.context; + const isRevampLayout = currentTheme === THEMES.YOROI_REVAMP; const blogLink = ( { ); return ( - + {intl.formatMessage(messages.version)} diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js b/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js index c299d078d5..6a9d684dd3 100644 --- a/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js +++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js @@ -128,17 +128,33 @@ class UnitOfAccountSettings extends Component { ) : null; return ( -
+ {dialog} -

{intl.formatMessage(messages.unitOfAccountTitle)}

+ + {intl.formatMessage(messages.unitOfAccountTitle)} + -

+ -

+ -

+ -

+ { }} > {error &&

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

} -
+ ); } } diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.scss b/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.scss index bf0cca9978..437fb46406 100644 --- a/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.scss +++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.scss @@ -1,10 +1,6 @@ @import '../../../../themes/mixins/error-message'; .component { - border-top: 1px solid var(--yoroi-palette-gray-200); - padding-top: 30px; - margin-bottom: 20px; - .title { color: var(--yoroi-support-settings-text); font-weight: 500; diff --git a/packages/yoroi-extension/app/components/wallet/settings/RemoveWallet.js b/packages/yoroi-extension/app/components/wallet/settings/RemoveWallet.js index 9ae13bdde3..9b9ff0c81a 100644 --- a/packages/yoroi-extension/app/components/wallet/settings/RemoveWallet.js +++ b/packages/yoroi-extension/app/components/wallet/settings/RemoveWallet.js @@ -3,7 +3,6 @@ import { Component } from 'react'; import type { Node, ComponentType } from 'react'; import { defineMessages, intlShape } from 'react-intl'; import globalMessages from '../../../i18n/global-messages'; -import styles from './RemoveWallet.scss'; import { observer } from 'mobx-react'; import { Box, Button, Typography } from '@mui/material'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; diff --git a/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.js b/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.js index 6d19db4acb..04407caf25 100644 --- a/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.js +++ b/packages/yoroi-extension/app/components/wallet/settings/ResyncBlock.js @@ -42,8 +42,7 @@ class ResyncBlock extends Component { pb: '20px', mt: isRevampLayout ? '40px' : '32px', pt: !isRevampLayout && '30px', - borderTop: !isRevampLayout && '1px solid', - borderColor: !isRevampLayout && 'var(--yoroi-palette-gray-200)', + borderTop: !isRevampLayout && '1px solid var(--yoroi-palette-gray-200)', }} > Date: Thu, 17 Aug 2023 06:25:25 +0300 Subject: [PATCH 10/20] feat(settings/terms): revamp terms of service agreement page --- .../profile/terms-of-use/TermsOfUseText.scss | 41 ++++- .../settings/categories/TermsOfUseSettings.js | 21 ++- .../categories/TermsOfUseSettings.scss | 5 - .../components/settings/menu/SettingsMenu.js | 11 +- .../app/components/widgets/LinkButton.scss | 11 +- .../app/containers/profile/TermsOfUsePage.js | 49 +++-- .../categories/TermsOfUseSettingsPage.js | 9 +- .../app/i18n/global-messages.js | 4 + .../app/i18n/locales/en-US.json | 1 + .../app/styles/globalStyles.js | 168 ++++++++++-------- 10 files changed, 185 insertions(+), 135 deletions(-) delete mode 100644 packages/yoroi-extension/app/components/settings/categories/TermsOfUseSettings.scss diff --git a/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseText.scss b/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseText.scss index 20b4c4ee10..c57b6418da 100644 --- a/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseText.scss +++ b/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseText.scss @@ -7,7 +7,8 @@ overflow: auto; } - h1, h2 { + h1, + h2 { font-weight: 500; font-size: 17px; margin-bottom: 11px; @@ -27,13 +28,13 @@ margin-left: 20px; } - p, li { + p, + li { font-weight: 400; font-size: 14px; letter-spacing: 0.5px; line-height: 1.38; margin-bottom: 11px; - } } @@ -41,24 +42,46 @@ color: var(--yoroi-terms-of-use-text-color); } -:global(.YoroiModern), :global(.YoroiRevamp) { +:global(.YoroiModern), +:global(.YoroiRevamp) { .terms { - h1, h2 { + h1, + h2 { font-size: 16px; } - + h1 { margin-top: 26px; } - + h2 { margin-top: 46px; } - - p, li { + + p, + li { color: var(--yoroi-terms-of-use-text-color); font-size: 13px; line-height: 1.54; } } } + +:global(.YoroiRevamp) .terms { + &:not(.fixedHight) { + padding-bottom: 20px; + + h2 { + color: var(--yoroi-terms-of-use-text-color); + } + + h1 { + text-align: center; + margin-top: 0px; + margin-bottom: 16px; + color: #000; + font-size: 18px; + font-weight: 500; + } + } +} diff --git a/packages/yoroi-extension/app/components/settings/categories/TermsOfUseSettings.js b/packages/yoroi-extension/app/components/settings/categories/TermsOfUseSettings.js index 12238416d5..062c60aed0 100644 --- a/packages/yoroi-extension/app/components/settings/categories/TermsOfUseSettings.js +++ b/packages/yoroi-extension/app/components/settings/categories/TermsOfUseSettings.js @@ -3,21 +3,30 @@ import { Component } from 'react'; import type { Node } from 'react'; import { observer } from 'mobx-react'; import TermsOfUseText from '../../profile/terms-of-use/TermsOfUseText'; -import styles from './TermsOfUseSettings.scss'; +import { Box } from '@mui/material'; +import { withLayout, InjectedLayoutProps } from '../../../styles/context/layout'; type Props = {| +localizedTermsOfUse: string, |}; @observer -export default class TermsOfUseSettings extends Component { +class TermsOfUseSettings extends Component { render(): Node { - const { localizedTermsOfUse } = this.props; + const { localizedTermsOfUse, isRevampLayout } = this.props; return ( -
+ -
+ ); } - } + +export default (withLayout(TermsOfUseSettings): ComponentType); diff --git a/packages/yoroi-extension/app/components/settings/categories/TermsOfUseSettings.scss b/packages/yoroi-extension/app/components/settings/categories/TermsOfUseSettings.scss deleted file mode 100644 index 381f62ca58..0000000000 --- a/packages/yoroi-extension/app/components/settings/categories/TermsOfUseSettings.scss +++ /dev/null @@ -1,5 +0,0 @@ -.component { - h1 { - margin-top: 0; - } -} diff --git a/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js b/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js index c29213ce1f..7e03f0b1f1 100644 --- a/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js +++ b/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js @@ -8,6 +8,7 @@ import { ROUTES } from '../../../routes-config'; import globalMessages from '../../../i18n/global-messages'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import SubMenu from '../../topbar/SubMenu'; +import { withLayout, InjectedLayoutProps } from '../../../styles/context/layout'; export const settingsMenuMessages = defineMessages({ general: { @@ -33,14 +34,14 @@ type Props = {| +onItemClick: string => void, |}; @observer -export default class SettingsMenu extends Component { +class SettingsMenu extends Component { static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; render(): Node { const { intl } = this.context; - const { onItemClick, isActiveItem } = this.props; + const { onItemClick, isActiveItem, isRevampLayout } = this.props; const settingOptions: Array = [ { @@ -64,7 +65,9 @@ export default class SettingsMenu extends Component { className: 'externalStorage', }, { - label: intl.formatMessage(globalMessages.termsOfUse), + label: intl.formatMessage( + isRevampLayout ? globalMessages.termsOfService : globalMessages.termsOfUse + ), route: ROUTES.SETTINGS.TERMS_OF_USE, className: 'termsOfUse', }, @@ -85,3 +88,5 @@ export default class SettingsMenu extends Component { ); } } + +export default (withLayout(SettingsMenu): ComponentType); diff --git a/packages/yoroi-extension/app/components/widgets/LinkButton.scss b/packages/yoroi-extension/app/components/widgets/LinkButton.scss index 49c18b78ba..c281e10026 100644 --- a/packages/yoroi-extension/app/components/widgets/LinkButton.scss +++ b/packages/yoroi-extension/app/components/widgets/LinkButton.scss @@ -22,8 +22,17 @@ $blockHeight: 27px; .icon { margin-right: 8px; - display: inline-block; + display: flex; + align-items: center; + justify-content: center; vertical-align: middle; + + & span { + display: flex; + align-items: center; + justify-content: center; + } + svg { width: 20px; height: 20px; diff --git a/packages/yoroi-extension/app/containers/profile/TermsOfUsePage.js b/packages/yoroi-extension/app/containers/profile/TermsOfUsePage.js index 01e6fdbcbd..7981b45174 100644 --- a/packages/yoroi-extension/app/containers/profile/TermsOfUsePage.js +++ b/packages/yoroi-extension/app/containers/profile/TermsOfUsePage.js @@ -29,36 +29,29 @@ type GeneratedData = typeof TermsOfUsePage.prototype.generated; @observer export default class TermsOfUsePage extends Component> { - - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { + static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; render(): Node { const { checkAdaServerStatus } = this.generated.stores.serverConnectionStore; const { selected } = this.generated.stores.wallets; - const isWalletTestnet = selected == null - ? false - : isTestnet(selected.getParent().getNetworkInfo()); - const isWalletErgo = selected == null - ? false - : isErgo(selected.getParent().getNetworkInfo()); + const isWalletTestnet = + selected == null ? false : isTestnet(selected.getParent().getNetworkInfo()); + const isWalletErgo = selected == null ? false : isErgo(selected.getParent().getNetworkInfo()); - const displayedBanner = checkAdaServerStatus === ServerStatusErrors.Healthy - ? - : ; + const displayedBanner = + checkAdaServerStatus === ServerStatusErrors.Healthy ? ( + + ) : ( + + ); const topbarTitle = ( ); - const topbarElement = ( - ); + const topbarElement = ; return ( - + Promise - |} - |} + trigger: (params: void) => Promise, + |}, + |}, |}, stores: {| wallets: {| selected: null | PublicDeriver<> |}, profile: {| setTermsOfUseAcceptanceRequest: {| error: ?LocalizableError, - isExecuting: boolean + isExecuting: boolean, |}, - termsOfUse: string + termsOfUse: string, |}, serverConnectionStore: {| - checkAdaServerStatus: ServerStatusErrorType - |} - |} - |} { + checkAdaServerStatus: ServerStatusErrorType, + |}, + |}, + |} { if (this.props.generated !== undefined) { return this.props.generated; } diff --git a/packages/yoroi-extension/app/containers/settings/categories/TermsOfUseSettingsPage.js b/packages/yoroi-extension/app/containers/settings/categories/TermsOfUseSettingsPage.js index fe766c7255..487781f7ee 100644 --- a/packages/yoroi-extension/app/containers/settings/categories/TermsOfUseSettingsPage.js +++ b/packages/yoroi-extension/app/containers/settings/categories/TermsOfUseSettingsPage.js @@ -10,8 +10,7 @@ type GeneratedData = typeof TermsOfUseSettingsPage.prototype.generated; @observer export default class TermsOfUseSettingsPage extends Component> { - - @computed get generated(): {|stores: {|profile: {|termsOfUse: string|}|}|} { + @computed get generated(): {| stores: {| profile: {| termsOfUse: string |} |} |} { if (this.props.generated !== undefined) { return this.props.generated; } @@ -29,10 +28,6 @@ export default class TermsOfUseSettingsPage extends Component - ); + return ; } } diff --git a/packages/yoroi-extension/app/i18n/global-messages.js b/packages/yoroi-extension/app/i18n/global-messages.js index e9e12ee768..4d236ef45d 100644 --- a/packages/yoroi-extension/app/i18n/global-messages.js +++ b/packages/yoroi-extension/app/i18n/global-messages.js @@ -897,6 +897,10 @@ const globalMessages: * = defineMessages({ id: 'settings.menu.termsOfUse.link.label', defaultMessage: '!!!Terms of use', }, + termsOfService: { + id: 'settings.menu.termsOfService.link.label', + defaultMessage: '!!!Terms of Service Agreement', + }, fromAddresses: { id: 'wallet.transaction.addresses.from', defaultMessage: '!!!From addresses', diff --git a/packages/yoroi-extension/app/i18n/locales/en-US.json b/packages/yoroi-extension/app/i18n/locales/en-US.json index aeb3615921..36676ded10 100644 --- a/packages/yoroi-extension/app/i18n/locales/en-US.json +++ b/packages/yoroi-extension/app/i18n/locales/en-US.json @@ -321,6 +321,7 @@ "settings.menu.levelOfComplexity.link.label": "Level of Complexity", "settings.menu.support.link.label": "Support / Logs", "settings.menu.termsOfUse.link.label": "Terms of use", + "settings.menu.termsOfService.link.label": "Terms of Service Agreement", "settings.menu.wallet.link.label": "Wallet", "settings.noexternal.dialog.content": "Your memos are stored locally. They will not automatically sync with other Yoroi instances and will be lost if you delete Yoroi", "settings.noexternal.dialog.title": "No external storage", diff --git a/packages/yoroi-extension/app/styles/globalStyles.js b/packages/yoroi-extension/app/styles/globalStyles.js index cb3f7289c1..da23a6550a 100644 --- a/packages/yoroi-extension/app/styles/globalStyles.js +++ b/packages/yoroi-extension/app/styles/globalStyles.js @@ -3,76 +3,71 @@ import type { Node } from 'react'; import { GlobalStyles } from '@mui/material'; -const getColorPath = ( - themePalette: any, - color: string, - ) => { - - const path = [] - for (const entery of Object.entries(themePalette)) { - const [key, value] = entery - if (typeof value === 'object') { - // $FlowFixMe[incompatible-call] - for (const valueEntery of Object.entries(value)) { - if (valueEntery[1] === color) { - path.push(key, valueEntery[0]) - break - } +const getColorPath = (themePalette: any, color: string) => { + const path = []; + for (const entery of Object.entries(themePalette)) { + const [key, value] = entery; + if (typeof value === 'object') { + // $FlowFixMe[incompatible-call] + for (const valueEntery of Object.entries(value)) { + if (valueEntery[1] === color) { + path.push(key, valueEntery[0]); + break; } } - - if (path.length !== 0) break } - return path -} + + if (path.length !== 0) break; + } + return path; +}; export type DesignToken = {| parent: string, child: string, hex: string, path: string[], -|} +|}; type NameToHex = {| name: string, hex: string, -|} +|}; type FormatedPalette = {| designTokens: DesignToken[], nameToHex: NameToHex[], -|} +|}; export const formatPalette = (palette: any, theme: any): FormatedPalette => { const formatedPalette: FormatedPalette = { nameToHex: [], - designTokens: [] - } - + designTokens: [], + }; for (const name of Object.keys(palette)) { - - if(typeof palette[name] === 'string' && palette[name].startsWith('var')) { - const secondColorName = palette[name].slice(4, -1) - const secondColorHex = palette[secondColorName] - const path = getColorPath(theme.palette, secondColorHex) + if (typeof palette[name] === 'string' && palette[name].startsWith('var')) { + const secondColorName = palette[name].slice(4, -1); + const secondColorHex = palette[secondColorName]; + const path = getColorPath(theme.palette, secondColorHex); formatedPalette.designTokens.push({ parent: name, child: secondColorName, hex: secondColorHex, - path - }) + path, + }); } else { formatedPalette.nameToHex.push({ - name, hex: palette[name] - }) + name, + hex: palette[name], + }); } } - return formatedPalette -} + return formatedPalette; +}; -export function getMainYoroiPalette(theme: Object): { [string]: string|number } { +export function getMainYoroiPalette(theme: Object): { [string]: string | number } { return { /* CSS variables follow the same name as mui using kebab case syntax @@ -107,16 +102,36 @@ export function getMainYoroiPalette(theme: Object): { [string]: string|number } '--yoroi-palette-cyan-50': theme.palette.cyan['50'], '--yoroi-palette-cyan-100': theme.palette.cyan['100'], - '--yoroi-palette-gray-50': (theme.palette.grey ? theme.palette.grey : theme.palette.grayscale)['50'], - '--yoroi-palette-gray-100': (theme.palette.grey ? theme.palette.grey : theme.palette.grayscale)['100'], - '--yoroi-palette-gray-200': (theme.palette.grey ? theme.palette.grey : theme.palette.grayscale)['200'], - '--yoroi-palette-gray-300': (theme.palette.grey ? theme.palette.grey : theme.palette.grayscale)['300'], - '--yoroi-palette-gray-400': (theme.palette.grey ? theme.palette.grey : theme.palette.grayscale)['400'], - '--yoroi-palette-gray-500': (theme.palette.grey ? theme.palette.grey : theme.palette.grayscale)['500'], - '--yoroi-palette-gray-600': (theme.palette.grey ? theme.palette.grey : theme.palette.grayscale)['600'], - '--yoroi-palette-gray-700': (theme.palette.grey ? theme.palette.grey : theme.palette.grayscale)['700'], - '--yoroi-palette-gray-800': (theme.palette.grey ? theme.palette.grey : theme.palette.grayscale)['800'], - '--yoroi-palette-gray-900': (theme.palette.grey ? theme.palette.grey : theme.palette.grayscale)['900'], + '--yoroi-palette-gray-50': (theme.palette.grey ? theme.palette.grey : theme.palette.grayscale)[ + '50' + ], + '--yoroi-palette-gray-100': (theme.palette.grey ? theme.palette.grey : theme.palette.grayscale)[ + '100' + ], + '--yoroi-palette-gray-200': (theme.palette.grey ? theme.palette.grey : theme.palette.grayscale)[ + '200' + ], + '--yoroi-palette-gray-300': (theme.palette.grey ? theme.palette.grey : theme.palette.grayscale)[ + '300' + ], + '--yoroi-palette-gray-400': (theme.palette.grey ? theme.palette.grey : theme.palette.grayscale)[ + '400' + ], + '--yoroi-palette-gray-500': (theme.palette.grey ? theme.palette.grey : theme.palette.grayscale)[ + '500' + ], + '--yoroi-palette-gray-600': (theme.palette.grey ? theme.palette.grey : theme.palette.grayscale)[ + '600' + ], + '--yoroi-palette-gray-700': (theme.palette.grey ? theme.palette.grey : theme.palette.grayscale)[ + '700' + ], + '--yoroi-palette-gray-800': (theme.palette.grey ? theme.palette.grey : theme.palette.grayscale)[ + '800' + ], + '--yoroi-palette-gray-900': (theme.palette.grey ? theme.palette.grey : theme.palette.grayscale)[ + '900' + ], '--yoroi-palette-background-overlay': theme.palette.background.overlay, '--yoroi-palette-tx-status-pending-background': theme.palette.txStatus?.pending.background, @@ -219,7 +234,8 @@ export function getMainYoroiPalette(theme: Object): { [string]: string|number } /* === TODO: FIX AND UNIFY ALL CSS VARIABLES === */ '--yoroi-wallet-add-option-dialog-item-title-color': 'var(--yoroi-palette-gray-900)', - '--yoroi-wallet-add-option-dialog-item-learn-more-button-bg-color': 'var(--yoroi-palette-gray-50)', + '--yoroi-wallet-add-option-dialog-item-learn-more-button-bg-color': + 'var(--yoroi-palette-gray-50)', '--yoroi-transactions-icon-type-expend-background-color': '#15d1aa', '--yoroi-transactions-icon-type-income-background-color': '#9ab2d9', '--yoroi-transactions-icon-type-exchange-background-color': '#10aca4', @@ -238,7 +254,8 @@ export function getMainYoroiPalette(theme: Object): { [string]: string|number } '--yoroi-hw-connect-dialog-middle-block-common-error-background-color': theme.name === 'classic' ? '#fdf1f0' : '#ffffff', - '--yoroi-terms-of-use-text-color': theme.name === 'classic' ? '#121327' : '#38293d', + '--yoroi-terms-of-use-text-color': + theme.name === 'classic' ? '#121327' : theme.name === 'revamp-light' ? '#242838' : '#38293d', '--yoroi-loading-background-color': '#fafbfc', '--yoroi-support-settings-text': theme.name === 'classic' ? '#121327' : '#2b2c32', @@ -251,31 +268,31 @@ export function getMainYoroiPalette(theme: Object): { [string]: string|number } ...(theme.name === 'modern' ? { - // Dashboard - '--yoroi-dashboard-label-underline-color': 'rgba(135, 145, 173, 0.8)', - '--yoroi-dashboard-card-shadow-color': 'rgba(24, 26, 30, 0.08)', - '--yoroi-dashboard-card-border-color': 'rgba(77, 32, 192, 0.08)', - '--yoroi-dashboard-card-vertical-separator-color': '#E6E6E6', - '--yoroi-dashboard-card-nodelegation-background-color': '#F9FBFF', - '--yoroi-dashboard-tooltip-background-color': 'rgba(56, 57, 61, 0.75)', - '--yoroi-dashboard-stakepool-head-background-color': '#F4F6FC', - '--yoroi-dashboard-epoch-time-background': '#F0F3F5', - '--yoroi-dashboard-percentage-epoch-base': '#B7C3ED', - '--yoroi-dashboard-percentage-epoch-circle': '#3154CB', - '--yoroi-dashboard-percentage-stake-base': '#FFEDF2', - '--yoroi-dashboard-percentage-stake-circle': '#FF1755', - '--yoroi-dashboard-graph-tab-color': '#ADAEB6', - '--yoroi-dashboard-graph-active-tab-color': '#3D60CD', - '--yoroi-dashboard-graph-radio-color': '#93979C', - '--yoroi-dashboard-graph-axis-tick-color': '#ADAEB6', - '--yoroi-dashboard-graph-axis-text-color': '#38393D', - '--yoroi-dashboard-graph-bar-hover-background-color': '#D9DDE0', - '--yoroi-dashboard-graph-bar-primary-color': '#6D80FF', - '--yoroi-dashboard-graph-bar-secondary-color': '#1A44B7', - '--yoroi-dashboard-graph-bar-width': 16, - '--yoroi-dashboard-graph-tooltip-text-color': '#FFFFFF', - '--yoroi-dashboard-graph-tooltip-background': 'rgba(56, 57, 61, 0.7)', - } + // Dashboard + '--yoroi-dashboard-label-underline-color': 'rgba(135, 145, 173, 0.8)', + '--yoroi-dashboard-card-shadow-color': 'rgba(24, 26, 30, 0.08)', + '--yoroi-dashboard-card-border-color': 'rgba(77, 32, 192, 0.08)', + '--yoroi-dashboard-card-vertical-separator-color': '#E6E6E6', + '--yoroi-dashboard-card-nodelegation-background-color': '#F9FBFF', + '--yoroi-dashboard-tooltip-background-color': 'rgba(56, 57, 61, 0.75)', + '--yoroi-dashboard-stakepool-head-background-color': '#F4F6FC', + '--yoroi-dashboard-epoch-time-background': '#F0F3F5', + '--yoroi-dashboard-percentage-epoch-base': '#B7C3ED', + '--yoroi-dashboard-percentage-epoch-circle': '#3154CB', + '--yoroi-dashboard-percentage-stake-base': '#FFEDF2', + '--yoroi-dashboard-percentage-stake-circle': '#FF1755', + '--yoroi-dashboard-graph-tab-color': '#ADAEB6', + '--yoroi-dashboard-graph-active-tab-color': '#3D60CD', + '--yoroi-dashboard-graph-radio-color': '#93979C', + '--yoroi-dashboard-graph-axis-tick-color': '#ADAEB6', + '--yoroi-dashboard-graph-axis-text-color': '#38393D', + '--yoroi-dashboard-graph-bar-hover-background-color': '#D9DDE0', + '--yoroi-dashboard-graph-bar-primary-color': '#6D80FF', + '--yoroi-dashboard-graph-bar-secondary-color': '#1A44B7', + '--yoroi-dashboard-graph-bar-width': 16, + '--yoroi-dashboard-graph-tooltip-text-color': '#FFFFFF', + '--yoroi-dashboard-graph-tooltip-background': 'rgba(56, 57, 61, 0.7)', + } : null), }; } @@ -284,7 +301,6 @@ const globalStyles = (theme: Object): Node => { return ( { }, }, html: { - overflow: 'hidden' + overflow: 'hidden', }, body: { /* To remove background color for Chrome Inputs */ From c2eea043f589116937837da6e3055827a2226211 Mon Sep 17 00:00:00 2001 From: Ahmed Ibrahim Date: Thu, 17 Aug 2023 07:10:36 +0300 Subject: [PATCH 11/20] feat(settings/logs): revamp logs settings page --- .../settings/categories/SupportSettings.js | 93 ++++++++----- .../settings/categories/SupportSettings.scss | 55 -------- .../categories/SupportSettingsPage.js | 130 +++++++++--------- 3 files changed, 126 insertions(+), 152 deletions(-) delete mode 100644 packages/yoroi-extension/app/components/settings/categories/SupportSettings.scss diff --git a/packages/yoroi-extension/app/components/settings/categories/SupportSettings.js b/packages/yoroi-extension/app/components/settings/categories/SupportSettings.js index 8445754f04..79247be96f 100644 --- a/packages/yoroi-extension/app/components/settings/categories/SupportSettings.js +++ b/packages/yoroi-extension/app/components/settings/categories/SupportSettings.js @@ -3,9 +3,8 @@ import { Component } from 'react'; import type { Node, ComponentType } from 'react'; import { observer } from 'mobx-react'; import { defineMessages, intlShape, FormattedMessage } from 'react-intl'; -import { Button } from '@mui/material'; +import { Box, Button, Typography } from '@mui/material'; import globalMessages from '../../../i18n/global-messages'; -import styles from './SupportSettings.scss'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import { withLayout } from '../../../styles/context/layout'; @@ -61,7 +60,6 @@ class SupportSettings extends Component { const faqLink = ( onExternalLinkClick(event)} > @@ -71,7 +69,6 @@ class SupportSettings extends Component { const supportRequestLink = ( onExternalLinkClick(event)} > @@ -80,45 +77,79 @@ class SupportSettings extends Component { ); const downloadLogsLink = ( - null} - className={styles.link} - onClick={onDownloadLogs} - > + null} onClick={onDownloadLogs}> {intl.formatMessage(globalMessages.downloadLogsLink)} ); - return ( -
-

{intl.formatMessage(messages.faqTitle)}

- -

- -

- -

{intl.formatMessage(messages.reportProblemTitle)}

- -

+ const sections = [ + { + title: messages.faqTitle, + text: , + }, + { + title: messages.reportProblemTitle, + text: ( -

- -

{intl.formatMessage(messages.logsTitle)}

- -

- -

+ ), + }, + { + title: messages.logsTitle, + text: , + }, + ]; + return ( + + {isRevampLayout && ( + + {intl.formatMessage(globalMessages.support)} + + )} + + + {sections.map(({ title, text }) => { + return ( + + + {intl.formatMessage(title)} + + + {text} + + + ); + })} + -
+ ); } } diff --git a/packages/yoroi-extension/app/components/settings/categories/SupportSettings.scss b/packages/yoroi-extension/app/components/settings/categories/SupportSettings.scss deleted file mode 100644 index 7dbbbafa46..0000000000 --- a/packages/yoroi-extension/app/components/settings/categories/SupportSettings.scss +++ /dev/null @@ -1,55 +0,0 @@ -@import '../../../themes/mixins/error-message'; -@import '../../../themes/mixins/underline'; - -.component { - padding-bottom: 10px; - - h1 { - color: var(--yoroi-support-settings-text); - font-weight: 500; - line-height: 1.38; - margin-bottom: 10px; - } - - h1:not(:first-child) { - padding-top: 10px; - } - - a, - p { - color: var(--yoroi-support-settings-text); - font-weight: 400; - font-size: 14px; - line-height: 19px; - } - - a { - color: var(--yoroi-support-settings-text); - } - - p { - margin-bottom: 10px; - } - - .link { - @include underline(var(--yoroi-palette-gray-800)); - } - - .link:focus { - outline: none; - } -} - -:global(.YoroiClassic) .component { - h1 { - font-size: 16px; - } -} - -:global(.YoroiModern) , :global(.YoroiRevamp) { - .component { - h1 { - font-size: 18px; - } - } -} diff --git a/packages/yoroi-extension/app/containers/settings/categories/SupportSettingsPage.js b/packages/yoroi-extension/app/containers/settings/categories/SupportSettingsPage.js index 14fb5a5c9c..3ad8005275 100644 --- a/packages/yoroi-extension/app/containers/settings/categories/SupportSettingsPage.js +++ b/packages/yoroi-extension/app/containers/settings/categories/SupportSettingsPage.js @@ -10,9 +10,7 @@ import type { InjectedOrGenerated } from '../../../types/injectedPropsType'; import { PublicDeriver } from '../../../api/ada/lib/storage/models/PublicDeriver'; import type { IGetPublic } from '../../../api/ada/lib/storage/models/PublicDeriver/interfaces'; import type { PublicKeyCache } from '../../../stores/toplevel/WalletStore'; -import { - asGetPublicKey, -} from '../../../api/ada/lib/storage/models/PublicDeriver/traits'; +import { asGetPublicKey } from '../../../api/ada/lib/storage/models/PublicDeriver/traits'; import IncludePublicKeyDialog from './IncludePublicKeyDialog'; import type { GeneratedData as IncludePublicKeyDialogData } from './IncludePublicKeyDialog'; import type { ComplexityLevelType } from '../../../types/complexityLevelType'; @@ -22,66 +20,7 @@ type GeneratedData = typeof SupportSettingsPage.prototype.generated; @observer export default class SupportSettingsPage extends Component> { - - @computed get generated(): {| - actions: {| - dialogs: {| - open: {| - trigger: (params: {| - dialog: any, - params?: any - |}) => void - |}, - |}, - |}, - stores: {| - uiDialogs: {| - isOpen: any => boolean - |}, - profile: {| - selectedComplexityLevel: ?ComplexityLevelType, - |}, - wallets: {| - getPublicKeyCache: IGetPublic => PublicKeyCache, - selected: null | PublicDeriver<>, - |}, - |}, - IncludePublicKeyDialogProps: InjectedOrGenerated, - |} { - if (this.props.generated !== undefined) { - return this.props.generated; - } - if (this.props.stores == null || this.props.actions == null) { - throw new Error(`${nameof(SupportSettingsPage)} no way to generated props`); - } - const { actions, stores } = this.props; - return Object.freeze({ - actions: { - dialogs: { - open: { - trigger: actions.dialogs.open.trigger, - }, - }, - }, - stores: { - profile: { - selectedComplexityLevel: stores.profile.selectedComplexityLevel - }, - uiDialogs: { - isOpen: stores.uiDialogs.isOpen, - }, - wallets: { - selected: stores.wallets.selected, - getPublicKeyCache: stores.wallets.getPublicKeyCache, - }, - }, - IncludePublicKeyDialogProps: ( - { actions, stores, }: InjectedOrGenerated - ), - }); - } - - getPublicKey: void => (void | string) = () => { + getPublicKey: void => void | string = () => { const { selected } = this.generated.stores.wallets; if (selected == null) { return undefined; @@ -92,9 +31,9 @@ export default class SupportSettingsPage extends Component void) = () => { + handleDownloadLogs: () => void = () => { if (this.generated.stores.profile.selectedComplexityLevel !== ComplexityLevels.Advanced) { // if user is a basic user, they probably don't know what is a public and private key // or the implications of exporting them @@ -124,7 +63,7 @@ export default class SupportSettingsPage extends Component ); } + + @computed get generated(): {| + actions: {| + dialogs: {| + open: {| + trigger: (params: {| + dialog: any, + params?: any, + |}) => void, + |}, + |}, + |}, + stores: {| + uiDialogs: {| + isOpen: any => boolean, + |}, + profile: {| + selectedComplexityLevel: ?ComplexityLevelType, + |}, + wallets: {| + getPublicKeyCache: IGetPublic => PublicKeyCache, + selected: null | PublicDeriver<>, + |}, + |}, + IncludePublicKeyDialogProps: InjectedOrGenerated, + |} { + if (this.props.generated !== undefined) { + return this.props.generated; + } + if (this.props.stores == null || this.props.actions == null) { + throw new Error(`${nameof(SupportSettingsPage)} no way to generated props`); + } + const { actions, stores } = this.props; + return Object.freeze({ + actions: { + dialogs: { + open: { + trigger: actions.dialogs.open.trigger, + }, + }, + }, + stores: { + profile: { + selectedComplexityLevel: stores.profile.selectedComplexityLevel, + }, + uiDialogs: { + isOpen: stores.uiDialogs.isOpen, + }, + wallets: { + selected: stores.wallets.selected, + getPublicKeyCache: stores.wallets.getPublicKeyCache, + }, + }, + IncludePublicKeyDialogProps: ({ + actions, + stores, + }: InjectedOrGenerated), + }); + } } From 86e326ae5dd258b17df91ae58d7644d91a3aeb3a Mon Sep 17 00:00:00 2001 From: Ahmed Ibrahim Date: Thu, 17 Aug 2023 08:08:01 +0300 Subject: [PATCH 12/20] feat(settings/comp-level): revamp level of complexity page --- .../complexity-level/ComplexityLevelForm.js | 137 ++++++++++++++++-- .../complexity-level/ComplexityLevelForm.scss | 18 +-- .../categories/ComplexityLevelSettingsPage.js | 48 +++--- .../app/i18n/locales/en-US.json | 1 + 4 files changed, 152 insertions(+), 52 deletions(-) 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 37a68879f0..7f2ea99c5e 100644 --- a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js +++ b/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js @@ -1,7 +1,7 @@ // @flow import { Component } from 'react'; import type { Node, ComponentType } from 'react'; -import { intlShape, defineMessages } from 'react-intl'; +import { intlShape, defineMessages, FormattedHTMLMessage } from 'react-intl'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import styles from './ComplexityLevelForm.scss'; import classnames from 'classnames'; @@ -12,7 +12,8 @@ import { LoadingButton } from '@mui/lab'; import { ComplexityLevels } from '../../../types/complexityLevelType'; import type { ComplexityLevelType } from '../../../types/complexityLevelType'; import { withLayout } from '../../../styles/context/layout'; -import { Box } from '@mui/material'; +import { Box, Typography } from '@mui/material'; +import { settingsMenuMessages } from '../../settings/menu/SettingsMenu'; const messages = defineMessages({ subtitle: { @@ -42,6 +43,10 @@ const messages = defineMessages({ id: 'profile.complexityLevel.selected.label', defaultMessage: '!!!Your current level of Complexity is', }, + selectedLevelLabel: { + id: 'profile.complexityLevel.selected.labelWithLevel', + defaultMessage: '!!!Your current level of Complexity is : {level}', + }, labelChoose: { id: 'global.label.choose', defaultMessage: '!!!Choose', @@ -85,19 +90,119 @@ class ComplexityLevel extends Component { ]; return ( - <> -
-
{intl.formatMessage(messages.subtitle)}
-
- {complexityLevel && ( - <> - {intl.formatMessage(messages.labelSelectedLevel)} :{' '} - - {complexityLevel} + + {isRevampLayout && ( + + {intl.formatMessage(settingsMenuMessages.levelOfComplexity)} + + )} + + + {intl.formatMessage(messages.subtitle)} + + + {complexityLevel && ( + + + + )} + + {isRevampLayout ? ( + + {levels.map(level => { + const isSelected = level.key === complexityLevel; + + return ( + + isSelected + ? theme.palette.gradients.green + : theme.palette.gradients['blue-green-bg'], + borderRadius: '8px', + alignSelf: 'stretch', + cursor: isSelected ? 'not-allowed' : 'pointer', + position: 'relative', + zIndex: 1, + '&::before': { + position: 'absolute', + content: '""', + top: '0px', + right: '0px', + left: '0px', + bottom: '0px', + background: theme => theme.palette.gradients.green, + borderRadius: '8px', + zIndex: -1, + opacity: 0, + transition: 'opacity 300ms linear', + }, + '&:hover::before': { + opacity: 1, + }, + }} + onClick={() => this.props.onSubmit(level.key)} + > + {level.image} + + + {level.name} + + {level.description} + - - )} -
+ ); + })} + + ) : (
{levels.map(level => (
@@ -121,8 +226,8 @@ class ComplexityLevel extends Component {
))}
-
- + )} + ); } } diff --git a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss b/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss index ee10101ecc..04adb5d38d 100644 --- a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss +++ b/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss @@ -15,23 +15,14 @@ letter-spacing: 0; line-height: 1.375rem; } + .description { color: var(--yoroi-palette-gray-600); font-size: 1rem; line-height: 1.375rem; text-align: center; } - .selected { - font-size: 1rem; - text-align: center; - margin: 1rem 0; - span { - color: var(--yoroi-comp-button-secondary-text); - font-weight: bold; - text-transform: uppercase; - } - } .cardsWrapper { margin: 30px auto; display: flex; @@ -39,15 +30,17 @@ flex: 1; } } + .card { margin-right: 30px; border-radius: 8px; background-color: var(--yoroi-palette-common-white); - border: 1px solid #DCE0E9; + border: 1px solid #dce0e9; overflow: hidden; &:last-child { margin-right: 0; } + .cardImage { background-color: var(--yoroi-palette-gray-100); height: 184px; @@ -55,12 +48,15 @@ align-items: center; justify-content: center; } + .simple { background: #f1fdfa; } + .advanced { background: #f3f5fd; } + .cardContent { padding: 24px; color: var(--yoroi-palette-gray-900); diff --git a/packages/yoroi-extension/app/containers/settings/categories/ComplexityLevelSettingsPage.js b/packages/yoroi-extension/app/containers/settings/categories/ComplexityLevelSettingsPage.js index 0b17fd691c..9b3de48cd7 100644 --- a/packages/yoroi-extension/app/containers/settings/categories/ComplexityLevelSettingsPage.js +++ b/packages/yoroi-extension/app/containers/settings/categories/ComplexityLevelSettingsPage.js @@ -12,32 +12,41 @@ import type { ServerStatusErrorType } from '../../../types/serverStatusErrorType type GeneratedData = typeof ComplexityLevelSettingsPage.prototype.generated; @observer -export default class ComplexityLevelSettingsPage - extends Component> { +export default class ComplexityLevelSettingsPage extends Component< + InjectedOrGenerated +> { + render(): Node { + return ( + + ); + } @computed get generated(): {| actions: {| profile: {| selectComplexityLevel: {| - trigger: ( - params: ComplexityLevelType - ) => Promise - |} - |} + trigger: (params: ComplexityLevelType) => Promise, + |}, + |}, |}, stores: {| profile: {| selectedComplexityLevel: ?ComplexityLevelType, setComplexityLevelRequest: {| error: ?LocalizableError, - isExecuting: boolean - |} + isExecuting: boolean, + |}, |}, serverConnectionStore: {| - checkAdaServerStatus: ServerStatusErrorType - |} - |} - |} { + checkAdaServerStatus: ServerStatusErrorType, + |}, + |}, + |} { if (this.props.generated !== undefined) { return this.props.generated; } @@ -57,7 +66,7 @@ export default class ComplexityLevelSettingsPage error: profileStore.setComplexityLevelRequest.error, isExecuting: profileStore.setComplexityLevelRequest.isExecuting, }, - selectedComplexityLevel: profileStore.selectedComplexityLevel + selectedComplexityLevel: profileStore.selectedComplexityLevel, }, }, actions: { @@ -67,15 +76,4 @@ export default class ComplexityLevelSettingsPage }, }); } - - render(): Node { - return ( - - ); - } } diff --git a/packages/yoroi-extension/app/i18n/locales/en-US.json b/packages/yoroi-extension/app/i18n/locales/en-US.json index 36676ded10..df5f0a00eb 100644 --- a/packages/yoroi-extension/app/i18n/locales/en-US.json +++ b/packages/yoroi-extension/app/i18n/locales/en-US.json @@ -255,6 +255,7 @@ "profile.complexityLevel.advanced": "Advanced", "profile.complexityLevel.advanced.description": "I have some understanding of blockchain and how cryptography is used to power both the blockchain itself and the wallet software. I am okay with seeing options and functionality that critically depend on my understanding of these concepts.", "profile.complexityLevel.selected.label": "Your current level of Complexity is", + "profile.complexityLevel.selected.labelWithLevel": "Your current level of Complexity is : {level}", "profile.complexityLevel.simple": "Simple", "profile.complexityLevel.simple.description": "Simplest experience possible. No previous knowledge of blockchain required. Highly friendly to on-board beginners, and for users who prefer simplicity.", "profile.complexityLevel.subtitle": "We understand blockchain can be difficult, which is why we try and keep the interface as simple as possible for you", From 0cb378d5452de884793b2167b3b2044ae761ba9b Mon Sep 17 00:00:00 2001 From: Ahmed Ibrahim Date: Thu, 17 Aug 2023 09:39:06 +0300 Subject: [PATCH 13/20] feat(settings/fiat-pairing): revamp fiat pairing seciton --- .../general-setting/UnitOfAccountSettings.js | 48 +++++++++++++++---- .../UnitOfAccountSettings.scss | 16 +------ .../app/i18n/locales/en-US.json | 1 + 3 files changed, 42 insertions(+), 23 deletions(-) diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js b/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js index 6a9d684dd3..2fb6067dcd 100644 --- a/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js +++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js @@ -27,6 +27,11 @@ const messages = defineMessages({ defaultMessage: '!!!Note: coin price is approximate and may not match the price of any given trading platform. Any transactions based on these price approximates are done at your own risk.', }, + noteRevamp: { + id: 'settings.revamp.unitOfAccount.note', + defaultMessage: + '!!!Please note, that the coin price is approximate and may not match the price of any given trading platform. Any transactions based on this price approximates are done at your own risk', + }, lastUpdated: { id: 'settings.unitOfAccount.lastUpdated', defaultMessage: '!!!Last updated: {lastUpdated}', @@ -148,21 +153,28 @@ class UnitOfAccountSettings extends Component { {intl.formatMessage(messages.unitOfAccountTitle)} - - - + {!isRevampLayout && ( + <> + + + - - - + + + + + )} - {error &&

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

} + + {isRevampLayout && ( + <> + + + + + + + + )} ); diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.scss b/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.scss index 437fb46406..fb9edb851c 100644 --- a/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.scss +++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.scss @@ -1,26 +1,14 @@ @import '../../../../themes/mixins/error-message'; .component { - .title { - color: var(--yoroi-support-settings-text); - font-weight: 500; - font-size: 18px; - line-height: 22px; - margin-bottom: 12px; - } - a, - p { + .text { color: var(--yoroi-support-settings-text); font-weight: 400; font-size: 14px; line-height: 22px; } - a { - color: var(--yoroi-support-settings-text); - } - - p { + .text { margin-bottom: 2px; } diff --git a/packages/yoroi-extension/app/i18n/locales/en-US.json b/packages/yoroi-extension/app/i18n/locales/en-US.json index df5f0a00eb..33acbdb432 100644 --- a/packages/yoroi-extension/app/i18n/locales/en-US.json +++ b/packages/yoroi-extension/app/i18n/locales/en-US.json @@ -386,6 +386,7 @@ "settings.unitOfAccount.revamp.label": "Select currency", "settings.unitOfAccount.lastUpdated": "Last updated: {lastUpdated}", "settings.unitOfAccount.note": "Note: coin price is approximate and may not match the price of any given trading platform. Any transactions based on these price approximates are done at your own risk.", + "settings.revamp.unitOfAccount.note": "Please note, that the coin price is approximate and may not match the price of any given trading platform. Any transactions based on this price approximates are done at your own risk", "settings.unitOfAccount.title": "Fiat pairing", "sidebar.assets": "Assets", "sidebar.experimental": "Experimental", From 8aac2025cce12b14ab322e6b640cdfb0fd3a6d47 Mon Sep 17 00:00:00 2001 From: Ahmed Ibrahim Date: Thu, 17 Aug 2023 13:49:31 +0300 Subject: [PATCH 14/20] feat(settings/compl-level): revamp complexity level cards --- .../complexity-level/ComplexityLevelForm.js | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) 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 7f2ea99c5e..c898f2d945 100644 --- a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js +++ b/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js @@ -162,11 +162,14 @@ class ComplexityLevel extends Component { alignItems: 'center', justifyContent: 'flex-start', textAlign: 'center', - p: '16px', + p: '1px', + border: 'solid 1px transparent', background: theme => isSelected ? theme.palette.gradients.green - : theme.palette.gradients['blue-green-bg'], + : 'linear-gradient( 0deg, var(--yoroi-palette-common-white), var(--yoroi-palette-common-white)), linear-gradient(180deg, #e4e8f7 0%, #c6f7f7 100%)', + backgroundClip: 'content-box, border-box', + backgroundOrigin: 'border-box', borderRadius: '8px', alignSelf: 'stretch', cursor: isSelected ? 'not-allowed' : 'pointer', @@ -179,7 +182,7 @@ class ComplexityLevel extends Component { right: '0px', left: '0px', bottom: '0px', - background: theme => theme.palette.gradients.green, + background: theme => theme.palette.gradients['blue-green-bg'], borderRadius: '8px', zIndex: -1, opacity: 0, @@ -191,12 +194,14 @@ class ComplexityLevel extends Component { }} onClick={() => this.props.onSubmit(level.key)} > - {level.image} - - - {level.name} - - {level.description} + + {level.image} + + + {level.name} + + {level.description} + ); From 85b008e323ce7d80f84ed8424381261c216ba6de Mon Sep 17 00:00:00 2001 From: Ahmed Ibrahim Date: Thu, 17 Aug 2023 15:28:08 +0300 Subject: [PATCH 15/20] fix(settings): fix all flow typing errors --- .../app/components/layout/TopBarLayout.js | 25 +- .../settings/categories/TermsOfUseSettings.js | 5 +- .../AboutYoroiSettingsBlock.js | 3 +- .../general-setting/ExplorerSettings.js | 3 +- .../general-setting/GeneralSettings.js | 3 +- .../general-setting/UnitOfAccountSettings.js | 4 +- .../components/settings/menu/SettingsMenu.js | 7 +- .../settings/SpendingPasswordSetting.js | 3 +- .../wallet/settings/WalletNameSetting.js | 3 +- .../wallet/transactions/TransactionRevamp.js | 2 +- .../BlockchainSettingsPage.stories.js | 27 +- .../categories/WalletSettingsPage.stories.js | 98 +++---- .../app/containers/wallet/Receive.js | 61 ++-- .../containers/wallet/WalletReceivePage.js | 274 +++++++++--------- 14 files changed, 256 insertions(+), 262 deletions(-) diff --git a/packages/yoroi-extension/app/components/layout/TopBarLayout.js b/packages/yoroi-extension/app/components/layout/TopBarLayout.js index 2d5bfc9ebc..694c216e1b 100644 --- a/packages/yoroi-extension/app/components/layout/TopBarLayout.js +++ b/packages/yoroi-extension/app/components/layout/TopBarLayout.js @@ -58,20 +58,17 @@ function TopBarLayout({ }, boxShadow: !isRevampLayout && showAsCard === true && '0 2px 12px 0 rgba(0, 0, 0, 0.06)', borderRadius: !isRevampLayout && showAsCard === true && '8px', - ...(showInContainer === true && { - bgcolor: 'common.white', - width: '100%', - overflow: 'hidden', - display: 'flex', - flexDirection: 'column', - flex: '0 1 auto', - height: '100%', - }), - ...(isRevampLayout && - asModern !== true && - !isModern && { - overflow: 'auto', - }), + ...(isRevampLayout && asModern !== true && !isModern + ? { overflow: 'auto' } + : showInContainer === true && { + bgcolor: 'common.white', + width: '100%', + overflow: 'hidden', + display: 'flex', + flexDirection: 'column', + flex: '0 1 auto', + height: '100%', + }), }} > {isRevampLayout && asModern !== true && !isModern ? ( diff --git a/packages/yoroi-extension/app/components/settings/categories/TermsOfUseSettings.js b/packages/yoroi-extension/app/components/settings/categories/TermsOfUseSettings.js index 062c60aed0..711f74a36c 100644 --- a/packages/yoroi-extension/app/components/settings/categories/TermsOfUseSettings.js +++ b/packages/yoroi-extension/app/components/settings/categories/TermsOfUseSettings.js @@ -1,10 +1,11 @@ // @flow import { Component } from 'react'; -import type { Node } from 'react'; +import type { Node, ComponentType } from 'react'; import { observer } from 'mobx-react'; import TermsOfUseText from '../../profile/terms-of-use/TermsOfUseText'; import { Box } from '@mui/material'; -import { withLayout, InjectedLayoutProps } from '../../../styles/context/layout'; +import { withLayout } from '../../../styles/context/layout'; +import type { InjectedLayoutProps } from '../../../styles/context/layout'; type Props = {| +localizedTermsOfUse: string, diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/AboutYoroiSettingsBlock.js b/packages/yoroi-extension/app/components/settings/categories/general-setting/AboutYoroiSettingsBlock.js index b3d40e62f1..53bc61eae1 100644 --- a/packages/yoroi-extension/app/components/settings/categories/general-setting/AboutYoroiSettingsBlock.js +++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/AboutYoroiSettingsBlock.js @@ -23,7 +23,8 @@ import { handleExternalLinkClick } from '../../../../utils/routing'; import { PublicDeriver } from '../../../../api/ada/lib/storage/models/PublicDeriver'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import { Box, Typography } from '@mui/material'; -import { withLayout, InjectedLayoutProps } from '../../../../styles/context/layout'; +import { withLayout } from '../../../../styles/context/layout'; +import type { InjectedLayoutProps } from '../../../../styles/context/layout'; const messages = defineMessages({ aboutYoroiLabel: { 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 5a0517f67d..da6de42cbf 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 @@ -13,7 +13,8 @@ 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, InjectedLayoutProps } from '../../../../styles/context/layout'; +import { withLayout } from '../../../../styles/context/layout'; +import type { InjectedLayoutProps } from '../../../../styles/context/layout'; type Props = {| +explorers: $ReadOnlyArray<$ReadOnly>, diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/GeneralSettings.js b/packages/yoroi-extension/app/components/settings/categories/general-setting/GeneralSettings.js index 24330ce5ae..a23bef120d 100644 --- a/packages/yoroi-extension/app/components/settings/categories/general-setting/GeneralSettings.js +++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/GeneralSettings.js @@ -14,7 +14,8 @@ 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 { withLayout, InjectedLayoutProps } from '../../../../styles/context/layout'; +import { withLayout } from '../../../../styles/context/layout'; +import type { InjectedLayoutProps } from '../../../../styles/context/layout'; type Props = {| +languages: Array, diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js b/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js index 2fb6067dcd..9530f5dcd6 100644 --- a/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js +++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js @@ -15,7 +15,8 @@ import VerticalFlexContainer from '../../../layout/VerticalFlexContainer'; import LoadingSpinner from '../../../widgets/LoadingSpinner'; import globalMessages from '../../../../i18n/global-messages'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import { withLayout, InjectedLayoutProps } from '../../../../styles/context/layout'; +import { withLayout } from '../../../../styles/context/layout'; +import type { InjectedLayoutProps } from '../../../../styles/context/layout'; const messages = defineMessages({ unitOfAccountTitle: { @@ -53,6 +54,7 @@ type Props = {| value: string, label: string, svg: string, + name: string, ... }>, +currentValue: string, diff --git a/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js b/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js index 7e03f0b1f1..2d196b7bf0 100644 --- a/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js +++ b/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js @@ -1,6 +1,6 @@ // @flow import { Component } from 'react'; -import type { Node } from 'react'; +import type { Node, ComponentType } from 'react'; import { observer } from 'mobx-react'; import { defineMessages, intlShape } from 'react-intl'; import environmnent from '../../../environment'; @@ -8,9 +8,10 @@ import { ROUTES } from '../../../routes-config'; import globalMessages from '../../../i18n/global-messages'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import SubMenu from '../../topbar/SubMenu'; -import { withLayout, InjectedLayoutProps } from '../../../styles/context/layout'; +import { withLayout } from '../../../styles/context/layout'; +import type { InjectedLayoutProps } from '../../../styles/context/layout'; -export const settingsMenuMessages = defineMessages({ +export const settingsMenuMessages: Object = defineMessages({ general: { id: 'settings.menu.general.link.label', defaultMessage: '!!!General', diff --git a/packages/yoroi-extension/app/components/wallet/settings/SpendingPasswordSetting.js b/packages/yoroi-extension/app/components/wallet/settings/SpendingPasswordSetting.js index afa09dc68c..013153449a 100644 --- a/packages/yoroi-extension/app/components/wallet/settings/SpendingPasswordSetting.js +++ b/packages/yoroi-extension/app/components/wallet/settings/SpendingPasswordSetting.js @@ -8,7 +8,8 @@ import ReadOnlyInput from '../../widgets/forms/ReadOnlyInput'; import globalMessages from '../../../i18n/global-messages'; // import styles from './SpendingPasswordSetting.scss'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import { withLayout, InjectedLayoutProps } from '../../../styles/context/layout'; +import { withLayout } from '../../../styles/context/layout'; +import type { InjectedLayoutProps } from '../../../styles/context/layout'; import { Box, Button, Typography } from '@mui/material'; const messages = defineMessages({ diff --git a/packages/yoroi-extension/app/components/wallet/settings/WalletNameSetting.js b/packages/yoroi-extension/app/components/wallet/settings/WalletNameSetting.js index 085fa92284..becd73810a 100644 --- a/packages/yoroi-extension/app/components/wallet/settings/WalletNameSetting.js +++ b/packages/yoroi-extension/app/components/wallet/settings/WalletNameSetting.js @@ -8,7 +8,8 @@ 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, InjectedLayoutProps } from '../../../styles/context/layout'; +import { withLayout } from '../../../styles/context/layout'; +import type { InjectedLayoutProps } from '../../../styles/context/layout'; import { Box, Typography } from '@mui/material'; const messages = defineMessages({ diff --git a/packages/yoroi-extension/app/components/wallet/transactions/TransactionRevamp.js b/packages/yoroi-extension/app/components/wallet/transactions/TransactionRevamp.js index ea352ce10e..d6829c8639 100644 --- a/packages/yoroi-extension/app/components/wallet/transactions/TransactionRevamp.js +++ b/packages/yoroi-extension/app/components/wallet/transactions/TransactionRevamp.js @@ -195,7 +195,7 @@ export default class TransactionRevamp extends Component { renderAmountDisplay: ({| entry: TokenEntry, - getRawNumber: boolean, + getRawNumber?: boolean, |}) => Node | string = request => { if (this.props.shouldHideBalance) { return {hiddenAmount}; diff --git a/packages/yoroi-extension/app/containers/settings/categories/BlockchainSettingsPage.stories.js b/packages/yoroi-extension/app/containers/settings/categories/BlockchainSettingsPage.stories.js index e1594588f0..6abb47fbdd 100644 --- a/packages/yoroi-extension/app/containers/settings/categories/BlockchainSettingsPage.stories.js +++ b/packages/yoroi-extension/app/containers/settings/categories/BlockchainSettingsPage.stories.js @@ -2,10 +2,10 @@ import type { Node } from 'react'; -import { boolean, select, } from '@storybook/addon-knobs'; +import { boolean, select } from '@storybook/addon-knobs'; import { action } from '@storybook/addon-actions'; import { withScreenshot } from 'storycap'; -import { walletLookup, } from '../../../../stories/helpers/WalletCache'; +import { walletLookup } from '../../../../stories/helpers/WalletCache'; import { genShelleyCip1852DummyWithCache } from '../../../../stories/helpers/cardano/ShelleyCip1852Mocks'; import { wrapSettings } from '../../../Routes'; import { mockSettingsProps } from '../Settings.mock'; @@ -21,10 +21,10 @@ export default { decorators: [withScreenshot], }; -const defaultSettingsPageProps: {| +const defaultSettingsPageProps: ({| selected: null | PublicDeriver<>, lastUpdatedTimestamp: null | number, -|} => * = (request) => ({ +|}) => * = request => ({ stores: { explorers: { setSelectedExplorerRequest: { @@ -37,10 +37,13 @@ const defaultSettingsPageProps: {| wallets: { selected: request.selected, }, + profile: { + isRevampTheme: false, + }, }, actions: { explorers: { - updateSelectedExplorer: { trigger: async (req) => action('updateSelectedExplorer')(req) }, + updateSelectedExplorer: { trigger: async req => action('updateSelectedExplorer')(req) }, }, }, canRegisterProtocol: () => boolean('canRegisterProtocol', true), @@ -65,18 +68,16 @@ export const Generic = (): Node => { selected: wallet.publicDeriver, ...lookup, }), - () + /> ); }; - export const NoWallet = (): Node => { const selected = null; const lookup = walletLookup([]); @@ -86,11 +87,11 @@ export const NoWallet = (): Node => { selected, ...lookup, }), - () + /> ); }; diff --git a/packages/yoroi-extension/app/containers/settings/categories/WalletSettingsPage.stories.js b/packages/yoroi-extension/app/containers/settings/categories/WalletSettingsPage.stories.js index 24f785837d..e6780a6b17 100644 --- a/packages/yoroi-extension/app/containers/settings/categories/WalletSettingsPage.stories.js +++ b/packages/yoroi-extension/app/containers/settings/categories/WalletSettingsPage.stories.js @@ -1,20 +1,17 @@ // @flow import type { Node } from 'react'; -import { select, boolean, } from '@storybook/addon-knobs'; +import { select, boolean } from '@storybook/addon-knobs'; import { action } from '@storybook/addon-actions'; import WalletSettingsPage from './WalletSettingsPage'; import { withScreenshot } from 'storycap'; import { THEMES } from '../../../styles/utils'; +import { globalKnobs } from '../../../../stories/helpers/StoryWrapper'; import { - globalKnobs, -} from '../../../../stories/helpers/StoryWrapper'; -import { - genShelleyCip1852DummyWithCache, genShelleyCIP1852SigningWalletWithCache, + genShelleyCip1852DummyWithCache, + genShelleyCIP1852SigningWalletWithCache, } from '../../../../stories/helpers/cardano/ShelleyCip1852Mocks'; -import { - walletLookup, -} from '../../../../stories/helpers/WalletCache'; +import { walletLookup } from '../../../../stories/helpers/WalletCache'; import { IncorrectWalletPasswordError } from '../../../api/common/errors'; import ChangeWalletPasswordDialogContainer from '../../wallet/dialogs/ChangeWalletPasswordDialogContainer'; import RemoveWalletDialogContainer from './RemoveWalletDialogContainer'; @@ -35,16 +32,15 @@ export default { /* ===== Notable variations ===== */ -const defaultSettingsPageProps: {| +const defaultSettingsPageProps: ({| selected: null | PublicDeriver<>, - getConceptualWalletSettingsCache: - typeof WalletSettingsStore.prototype.getConceptualWalletSettingsCache, - getSigningKeyCache: - typeof WalletStore.prototype.getSigningKeyCache, -|} => * = (request) => ({ + getConceptualWalletSettingsCache: typeof WalletSettingsStore.prototype.getConceptualWalletSettingsCache, + getSigningKeyCache: typeof WalletStore.prototype.getSigningKeyCache, +|}) => * = request => ({ stores: { profile: { isClassicTheme: globalKnobs.currentTheme() === THEMES.YOROI_CLASSIC, + isRevampTheme: false, }, walletSettings: { getConceptualWalletSettingsCache: request.getConceptualWalletSettingsCache, @@ -70,7 +66,7 @@ const defaultSettingsPageProps: {| startEditingWalletField: { trigger: action('startEditingWalletField') }, stopEditingWalletField: { trigger: action('stopEditingWalletField') }, cancelEditingWalletField: { trigger: action('cancelEditingWalletField') }, - renameConceptualWallet: { trigger: async (req) => action('renameConceptualWallet')(req) }, + renameConceptualWallet: { trigger: async req => action('renameConceptualWallet')(req) }, }, dialogs: { open: { trigger: action('open') }, @@ -129,11 +125,7 @@ export const EditName = (): Node => { Editing: 1, Done: 2, }; - const nameValue = () => select( - 'nameCases', - nameCases, - nameCases.Untouched, - ); + const nameValue = () => select('nameCases', nameCases, nameCases.Untouched); return ( { Never: 0, Previously: 1, }; - const lastUpdateValue = () => select( - 'lastUpdateCases', - lastUpdateCases, - lastUpdateCases.Never, - ); + const lastUpdateValue = () => select('lastUpdateCases', lastUpdateCases, lastUpdateCases.Never); const wallet = genShelleyCIP1852SigningWalletWithCache(); - wallet.getSigningKeyCache = (publicDeriver) => ({ + wallet.getSigningKeyCache = publicDeriver => ({ publicDeriver, - signingKeyUpdateDate: lastUpdateValue() === lastUpdateCases.Never - ? null - : new Date(0), + signingKeyUpdateDate: lastUpdateValue() === lastUpdateCases.Never ? null : new Date(0), }); const lookup = walletLookup([wallet]); return wrapSettings( @@ -236,7 +222,7 @@ export const ResyncWallet = (): Node => { ...settingPageProps.stores, uiDialogs: { ...settingPageProps.stores.uiDialogs, - isOpen: (clazz) => clazz === ResyncWalletDialogContainer, + isOpen: clazz => clazz === ResyncWalletDialogContainer, }, }, // dialog is close so no need to give props @@ -252,11 +238,11 @@ export const ResyncWallet = (): Node => { isExecuting: boolean('isExecuting', false), error: undefined, }, - } + }, }, actions: { walletSettings: { - resyncHistory: { trigger: async (req) => action('resyncHistory')(req) }, + resyncHistory: { trigger: async req => action('resyncHistory')(req) }, }, dialogs: { closeActiveDialog: { trigger: action('closeActiveDialog') }, @@ -271,7 +257,7 @@ export const ResyncWallet = (): Node => { ); }; -const defaultChangeWalletPasswordDialogContainerProps: void => * = (_request) => ({ +const defaultChangeWalletPasswordDialogContainerProps: void => * = _request => ({ stores: { walletSettings: { changeSigningKeyRequest: { @@ -284,16 +270,17 @@ const defaultChangeWalletPasswordDialogContainerProps: void => * = (_request) => isClassicTheme: globalKnobs.currentTheme() === THEMES.YOROI_CLASSIC, }, uiDialogs: { - getActiveData: (key) => ({ - currentPasswordValue: '', - newPasswordValue: '', - repeatedPasswordValue: '', - }[key]), + getActiveData: key => + ({ + currentPasswordValue: '', + newPasswordValue: '', + repeatedPasswordValue: '', + }[key]), }, }, actions: { walletSettings: { - updateSigningPassword: { trigger: async (req) => action('updateSigningPassword')(req) }, + updateSigningPassword: { trigger: async req => action('updateSigningPassword')(req) }, }, dialogs: { updateDataForActiveDialog: { trigger: action('updateDataForActiveDialog') }, @@ -322,11 +309,7 @@ export const EditPassword = (): Node => { None: undefined, WrongPassword: new IncorrectWalletPasswordError(), }; - const errorValue = () => select( - 'errorCases', - errorCases, - errorCases.None, - ); + const errorValue = () => select('errorCases', errorCases, errorCases.None); const passwordCases = { Untouched: 0, TooShort: 1, @@ -334,11 +317,7 @@ export const EditPassword = (): Node => { Correct: 3, All: 4, }; - const passwordValue = () => select( - 'passwordCases', - passwordCases, - passwordCases.Untouched, - ); + const passwordValue = () => select('passwordCases', passwordCases, passwordCases.Untouched); const getCurrentPassword = () => { const val = passwordValue(); return val === passwordCases.All ? 'asdfasdfasdf' : ''; @@ -368,7 +347,7 @@ export const EditPassword = (): Node => { ...settingPageProps.stores, uiDialogs: { ...settingPageProps.stores.uiDialogs, - isOpen: (clazz) => clazz === ChangeWalletPasswordDialogContainer, + isOpen: clazz => clazz === ChangeWalletPasswordDialogContainer, }, wallets: { ...settingPageProps.stores.wallets, @@ -390,12 +369,13 @@ export const EditPassword = (): Node => { }, uiDialogs: { ...defaultProps.stores.uiDialogs, - getActiveData: (key) => ({ - ...defaultProps.stores.uiDialogs.getActiveData(key), - currentPasswordValue: getCurrentPassword(), - newPasswordValue: getNewPassword(), - repeatedPasswordValue: getRepeatPassword(), - }[key]), + getActiveData: key => + ({ + ...defaultProps.stores.uiDialogs.getActiveData(key), + currentPasswordValue: getCurrentPassword(), + newPasswordValue: getNewPassword(), + repeatedPasswordValue: getRepeatPassword(), + }[key]), }, }, }, @@ -433,7 +413,7 @@ export const RemoveWallet = (): Node => { ...settingPageProps.stores, uiDialogs: { ...settingPageProps.stores.uiDialogs, - isOpen: (clazz) => clazz === RemoveWalletDialogContainer, + isOpen: clazz => clazz === RemoveWalletDialogContainer, }, }, ChangeWalletPasswordDialogContainerProps: (null: any), @@ -452,7 +432,7 @@ export const RemoveWallet = (): Node => { }, actions: { walletSettings: { - removeWallet: { trigger: async (req) => action('removeWallet')(req) }, + removeWallet: { trigger: async req => action('removeWallet')(req) }, }, dialogs: { closeActiveDialog: { trigger: action('closeActiveDialog') }, @@ -491,7 +471,7 @@ export const ExportWallet = (): Node => { ...settingPageProps.stores, uiDialogs: { ...settingPageProps.stores.uiDialogs, - isOpen: (clazz) => clazz === ExportWalletDialogContainer, + isOpen: clazz => clazz === ExportWalletDialogContainer, }, }, ChangeWalletPasswordDialogContainerProps: (null: any), diff --git a/packages/yoroi-extension/app/containers/wallet/Receive.js b/packages/yoroi-extension/app/containers/wallet/Receive.js index 6bff9628ff..a68d97e0e3 100644 --- a/packages/yoroi-extension/app/containers/wallet/Receive.js +++ b/packages/yoroi-extension/app/containers/wallet/Receive.js @@ -4,9 +4,7 @@ import type { Node } from 'react'; import { computed } from 'mobx'; import { observer } from 'mobx-react'; import { intlShape } from 'react-intl'; -import type { - $npm$ReactIntl$IntlFormat, -} from 'react-intl'; +import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import type { InjectedOrGenerated } from '../../types/injectedPropsType'; import ReceiveWithNavigation from '../../components/wallet/layouts/ReceiveWithNavigation'; import { PublicDeriver } from '../../api/ada/lib/storage/models/PublicDeriver/index'; @@ -14,36 +12,35 @@ import type { AddressFilterKind } from '../../types/AddressFilterTypes'; import { ROUTES } from '../../routes-config'; import { buildRoute } from '../../utils/routing'; import type { IAddressTypeStore, IAddressTypeUiSubset } from '../../stores/stateless/addressStores'; -import { routeForStore, allAddressSubgroups, } from '../../stores/stateless/addressStores'; +import { routeForStore, allAddressSubgroups } from '../../stores/stateless/addressStores'; import FullscreenLayout from '../../components/layout/FullscreenLayout'; export type GeneratedData = typeof Receive.prototype.generated; type Props = {| ...InjectedOrGenerated, - +children?: Node + +children?: Node, |}; @observer export default class Receive extends Component { - - static defaultProps: {|children: void|} = { + static defaultProps: {| children: void |} = { children: undefined, }; - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { + static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; componentDidMount() { const publicDeriver = this.generated.stores.wallets.selected; if (publicDeriver == null) throw new Error(`${nameof(Receive)} no public deriver`); - const rootRoute = buildRoute( - ROUTES.WALLETS.RECEIVE.ROOT - ); + const rootRoute = buildRoute(ROUTES.WALLETS.RECEIVE.ROOT); - const storesForWallet = allAddressSubgroups.filter(store => store.isRelated({ - selected: publicDeriver, - })); + const storesForWallet = allAddressSubgroups.filter(store => + store.isRelated({ + selected: publicDeriver, + }) + ); if (this.generated.stores.app.currentRoute === rootRoute) { // if no store is specified, we just send the user to the first store in the list const firstRoute = routeForStore(storesForWallet[0].name); @@ -57,7 +54,7 @@ export default class Receive extends Component { if (currentSelectedStore == null) { // just send user to the first store supported by this wallet this.generated.actions.router.redirect.trigger({ - route: routeForStore(storesForWallet[0].name) + route: routeForStore(storesForWallet[0].name), }); } } @@ -70,9 +67,8 @@ export default class Receive extends Component { const publicDeriver = this.generated.stores.wallets.selected; if (publicDeriver == null) throw new Error(`${nameof(Receive)} no public deriver`); - const storesForWallet = allAddressSubgroups - .filter(store => store.isRelated({ selected: publicDeriver, })) + .filter(store => store.isRelated({ selected: publicDeriver })) .map(store => { const request = this.generated.stores.addresses.addressSubgroupMap.get(store.class); if (request == null) throw new Error('Should never happen'); @@ -86,9 +82,10 @@ export default class Receive extends Component { isActiveStore: this.generated.stores.app.currentRoute.startsWith( routeForStore(storeInfo.meta.name) ), - setAsActiveStore: () => this.generated.actions.router.goToRoute.trigger({ - route: routeForStore(storeInfo.meta.name), - }), + setAsActiveStore: () => + this.generated.actions.router.goToRoute.trigger({ + route: routeForStore(storeInfo.meta.name), + }), name: storeInfo.meta.name, validFilters: storeInfo.meta.validFilters, wasExecuted: storeInfo.request.wasExecuted, @@ -114,7 +111,7 @@ export default class Receive extends Component { addressFilter: AddressFilterKind, addressSubgroupMap: $ReadOnlyMap, IAddressTypeUiSubset>, |}, - wallets: {|selected: null | PublicDeriver<>|}, + wallets: {| selected: null | PublicDeriver<> |}, |}, actions: {| addresses: {| @@ -125,19 +122,19 @@ export default class Receive extends Component { redirect: {| trigger: (params: {| params?: ?any, - route: string - |}) => void + route: string, + |}) => void, |}, goToRoute: {| trigger: (params: {| publicDeriver?: null | PublicDeriver<>, params?: ?any, - route: string - |}) => void - |} - |} - |} - |} { + route: string, + |}) => void, + |}, + |}, + |}, + |} { if (this.props.generated !== undefined) { return this.props.generated; } @@ -160,14 +157,14 @@ export default class Receive extends Component { }, actions: { addresses: { - setFilter: { trigger: actions.addresses.setFilter.trigger, }, - resetFilter: { trigger: actions.addresses.resetFilter.trigger, }, + setFilter: { trigger: actions.addresses.setFilter.trigger }, + resetFilter: { trigger: actions.addresses.resetFilter.trigger }, }, router: { goToRoute: { trigger: actions.router.goToRoute.trigger }, redirect: { trigger: actions.router.redirect.trigger }, }, - } + }, }); } } diff --git a/packages/yoroi-extension/app/containers/wallet/WalletReceivePage.js b/packages/yoroi-extension/app/containers/wallet/WalletReceivePage.js index fea4c460a3..a18ba822cf 100644 --- a/packages/yoroi-extension/app/containers/wallet/WalletReceivePage.js +++ b/packages/yoroi-extension/app/containers/wallet/WalletReceivePage.js @@ -22,26 +22,38 @@ import { PublicDeriver } from '../../api/ada/lib/storage/models/PublicDeriver/in import Dialog from '../../components/widgets/Dialog'; import globalMessages from '../../i18n/global-messages'; import { WalletTypeOption } from '../../api/ada/lib/storage/models/ConceptualWallet/interfaces'; -import type { AddressFilterKind, StandardAddress, } from '../../types/AddressFilterTypes'; +import type { AddressFilterKind, StandardAddress } from '../../types/AddressFilterTypes'; import UnmangleTxDialogContainer from '../transfer/UnmangleTxDialogContainer'; import type { GeneratedData as UnmangleTxDialogContainerData } from '../transfer/UnmangleTxDialogContainer'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import { addressGroupName, addressSubgroupName, AddressFilter, AddressSubgroup, AddressGroupTypes } from '../../types/AddressFilterTypes'; +import { + addressGroupName, + addressSubgroupName, + AddressFilter, + AddressSubgroup, + AddressGroupTypes, +} from '../../types/AddressFilterTypes'; import LocalizableError from '../../i18n/LocalizableError'; import { SelectedExplorer } from '../../domain/SelectedExplorer'; import type { Notification } from '../../types/notificationType'; import type { UnitOfAccountSettingType } from '../../types/unitOfAccountType'; import { validateAmount } from '../../utils/validations'; -import { Logger, } from '../../utils/logging'; -import type { AddressSubgroupMeta, IAddressTypeUiSubset, IAddressTypeStore } from '../../stores/stateless/addressStores'; -import { routeForStore, allAddressSubgroups, applyAddressFilter, } from '../../stores/stateless/addressStores'; +import { Logger } from '../../utils/logging'; +import type { + AddressSubgroupMeta, + IAddressTypeUiSubset, + IAddressTypeStore, +} from '../../stores/stateless/addressStores'; import { - isCardanoHaskell, -} from '../../api/ada/lib/storage/database/prepackaged/networks'; + routeForStore, + allAddressSubgroups, + applyAddressFilter, +} from '../../stores/stateless/addressStores'; +import { isCardanoHaskell } from '../../api/ada/lib/storage/database/prepackaged/networks'; import type { ComplexityLevelType } from '../../types/complexityLevelType'; import { handleExternalLinkClick } from '../../utils/routing'; import type { TokenInfoMap } from '../../stores/toplevel/TokenInfoStore'; -import { genLookupOrFail, getTokenName, } from '../../stores/stateless/tokenHelpers'; +import { genLookupOrFail, getTokenName } from '../../stores/stateless/tokenHelpers'; import { truncateToken } from '../../utils/formatters'; export type GeneratedData = typeof WalletReceivePage.prototype.generated; @@ -52,8 +64,7 @@ type Props = {| @observer export default class WalletReceivePage extends Component { - - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { intl: intlShape.isRequired }; + static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired }; @observable notificationElementId: string = ''; @@ -90,20 +101,15 @@ export default class WalletReceivePage extends Component { const { intl } = this.context; const actions = this.generated.actions; const { uiNotifications, uiDialogs, profile } = this.generated.stores; - const { - hwVerifyAddress, - } = this.generated.stores.substores.ada; + const { hwVerifyAddress } = this.generated.stores.substores.ada; const publicDeriver = this.generated.stores.wallets.selected; if (!publicDeriver) throw new Error(`Active wallet required for ${nameof(WalletReceivePage)}.`); - this.generated.stores.tokenInfoStore.tokenInfo.get + this.generated.stores.tokenInfoStore.tokenInfo.get; const addressTypeStore = this.getTypeStore(publicDeriver); - if ( - addressTypeStore == null || - !addressTypeStore.request.wasExecuted - ) { + if (addressTypeStore == null || !addressTypeStore.request.wasExecuted) { return ( @@ -137,13 +143,15 @@ export default class WalletReceivePage extends Component { } }; - const notification = uiNotifications.getTooltipActiveNotification( - this.notificationElementId - ); + const notification = uiNotifications.getTooltipActiveNotification(this.notificationElementId); - const selectedExplorerForNetwork = this.generated.stores.explorers.selectedExplorer - .get(publicDeriver.getParent().getNetworkInfo().NetworkId) - ?? (() => { throw new Error('No explorer for wallet network'); })(); + const selectedExplorerForNetwork = + this.generated.stores.explorers.selectedExplorer.get( + publicDeriver.getParent().getNetworkInfo().NetworkId + ) ?? + (() => { + throw new Error('No explorer for wallet network'); + })(); const defaultToken = publicDeriver.getParent().getDefaultToken(); const defaultTokenInfo = genLookupOrFail(this.generated.stores.tokenInfoStore.tokenInfo)({ @@ -153,33 +161,35 @@ export default class WalletReceivePage extends Component { const header = (() => { if (addressTypeStore.meta.name.subgroup === AddressSubgroup.external) { - return (); + return ( + + ); } if (addressTypeStore.meta.name.subgroup === AddressSubgroup.internal) { - return (); + return ; } if (addressTypeStore.meta.name.group === AddressGroupTypes.reward) { - return (); + return ; } if (addressTypeStore.meta.name.subgroup === AddressSubgroup.mangled) { return ( this.generated.actions.dialogs.open.trigger({ - dialog: UnmangleTxDialogContainer, - })} + onClick={() => + this.generated.actions.dialogs.open.trigger({ + dialog: UnmangleTxDialogContainer, + }) + } ticker={truncateToken(getTokenName(defaultTokenInfo))} /> ); @@ -188,31 +198,31 @@ export default class WalletReceivePage extends Component { return null; } if (addressTypeStore.meta.name.subgroup === AddressSubgroup.all) { - return (); + return ( + + ); } throw new Error(`${nameof(WalletReceivePage)} unexpected address tab`); })(); const getSelectedHierarchyPath = () => { if (addressTypeStore.meta.name.subgroup === AddressSubgroup.all) { - return [ - intl.formatMessage(addressGroupName[addressTypeStore.meta.name.group]), - ]; + return [intl.formatMessage(addressGroupName[addressTypeStore.meta.name.group])]; } return [ intl.formatMessage(addressGroupName[addressTypeStore.meta.name.group]), - intl.formatMessage(addressSubgroupName[addressTypeStore.meta.name.subgroup]) + intl.formatMessage(addressSubgroupName[addressTypeStore.meta.name.subgroup]), ]; }; @@ -229,7 +239,9 @@ export default class WalletReceivePage extends Component { walletAddresses={applyAddressFilter({ addressFilter: this.generated.stores.addresses.addressFilter, addresses: addressTypeStore.request.all, - }).slice().reverse()} + }) + .slice() + .reverse()} onCopyAddressTooltip={onCopyAddressTooltip} notification={notification} onVerifyAddress={async (request: $ReadOnly) => { @@ -239,15 +251,13 @@ export default class WalletReceivePage extends Component { onGeneratePaymentURI={ !isCardanoHaskell(publicDeriver.getParent().getNetworkInfo()) || addressTypeStore.meta.name.group === AddressGroupTypes.reward || - ( - addressTypeStore.meta.name.subgroup !== AddressSubgroup.external && - addressTypeStore.meta.name.subgroup !== AddressSubgroup.all - ) + (addressTypeStore.meta.name.subgroup !== AddressSubgroup.external && + addressTypeStore.meta.name.subgroup !== AddressSubgroup.all) ? undefined - : (address) => { - this.openURIGenerateDialog(address); - } - } + : address => { + this.openURIGenerateDialog(address); + } + } shouldHideBalance={profile.shouldHideBalance} unitOfAccountSetting={profile.unitOfAccount} addressBook={addressTypeStore.meta.name.group === AddressGroupTypes.addressBook} @@ -272,17 +282,21 @@ export default class WalletReceivePage extends Component { return new BigNumber(val); })()} onClose={() => actions.dialogs.closeActiveDialog.trigger()} - onGenerate={(address, amount) => { this.generateURI(address, amount); }} + onGenerate={(address, amount) => { + this.generateURI(address, amount); + }} classicTheme={profile.isClassicTheme} tokenInfo={defaultTokenInfo} - validateAmount={(amount, tokenRow) => validateAmount( - amount, - tokenRow, - // we don't impose a minimum value for the creation of the QR codes - // since validation happens when the QR code is scanned anyway - new BigNumber(0), - this.context.intl, - )} + validateAmount={(amount, tokenRow) => + validateAmount( + amount, + tokenRow, + // we don't impose a minimum value for the creation of the QR codes + // since validation happens when the QR code is scanned anyway + new BigNumber(0), + this.context.intl + ) + } /> ) : null} @@ -291,11 +305,13 @@ export default class WalletReceivePage extends Component { address={uiDialogs.getParam('address')} amount={new BigNumber(uiDialogs.getParam('amount') ?? '0')} onClose={actions.dialogs.closeActiveDialog.trigger} - onBack={() => this.openURIGenerateDialog( - uiDialogs.getParam('address'), - uiDialogs.getParam('amount') ?? '0', - )} - onCopyAddressTooltip={(elementId) => { + onBack={() => + this.openURIGenerateDialog( + uiDialogs.getParam('address'), + uiDialogs.getParam('amount') ?? '0' + ) + } + onCopyAddressTooltip={elementId => { if (!uiNotifications.isOpen(elementId)) { runInAction(() => { this.notificationElementId = elementId; @@ -307,9 +323,7 @@ export default class WalletReceivePage extends Component { }); } }} - notification={uiNotifications.getTooltipActiveNotification( - this.notificationElementId - )} + notification={uiNotifications.getTooltipActiveNotification(this.notificationElementId)} /> ) : null} @@ -326,7 +340,7 @@ export default class WalletReceivePage extends Component { selectedExplorer={selectedExplorerForNetwork} error={hwVerifyAddress.error} addressInfo={hwVerifyAddress.selectedAddress} - onCopyAddressTooltip={(elementId) => { + onCopyAddressTooltip={elementId => { if (!uiNotifications.isOpen(elementId)) { runInAction(() => { this.notificationElementId = elementId; @@ -338,9 +352,7 @@ export default class WalletReceivePage extends Component { }); } }} - notification={uiNotifications.getTooltipActiveNotification( - this.notificationElementId - )} + notification={uiNotifications.getTooltipActiveNotification(this.notificationElementId)} isHardware={isHwWallet} verify={() => actions.ada.hwVerifyAddress.verifyAddress.trigger(publicDeriver)} cancel={actions.ada.hwVerifyAddress.closeAddressDetailDialog.trigger} @@ -348,22 +360,21 @@ export default class WalletReceivePage extends Component { complexityLevel={profile.selectedComplexityLevel} /> ) : null} - ); } - getTypeStore: PublicDeriver<> => void | {| + getTypeStore: ( + PublicDeriver<> + ) => void | {| +request: IAddressTypeUiSubset, +meta: AddressSubgroupMeta, - |} = (publicDeriver) => { + |} = publicDeriver => { for (const addressStore of allAddressSubgroups) { if (!addressStore.isRelated({ selected: publicDeriver })) { continue; } - if (this.generated.stores.app.currentRoute.startsWith( - routeForStore(addressStore.name) - )) { + if (this.generated.stores.app.currentRoute.startsWith(routeForStore(addressStore.name))) { const request = this.generated.stores.addresses.addressSubgroupMap.get(addressStore.class); if (request == null) throw new Error('Should never happen'); return { @@ -373,28 +384,28 @@ export default class WalletReceivePage extends Component { } } Logger.error(`${nameof(WalletReceivePage)} unexpected address tab`); - } + }; openVerifyAddressDialog: void => void = (): void => { const { actions } = this.generated; actions.dialogs.open.trigger({ dialog: VerifyAddressDialog }); - } + }; - openURIGenerateDialog: ((address: string, amount?: string) => void) = (address, amount) => { + openURIGenerateDialog: (address: string, amount?: string) => void = (address, amount) => { const { actions } = this.generated; actions.dialogs.open.trigger({ dialog: URIGenerateDialog, - params: { address, amount } + params: { address, amount }, }); - } + }; generateURI: (string, BigNumber) => void = (address, amount) => { const { actions } = this.generated; actions.dialogs.open.trigger({ dialog: URIDisplayDialog, - params: { address, amount: amount.toString() } + params: { address, amount: amount.toString() }, }); - } + }; @computed get generated(): {| UnmangleTxDialogContainerProps: InjectedOrGenerated, @@ -402,45 +413,43 @@ export default class WalletReceivePage extends Component { ada: {| hwVerifyAddress: {| closeAddressDetailDialog: {| - trigger: (params: void) => void + trigger: (params: void) => void, |}, selectAddress: {| trigger: (params: $ReadOnly) => Promise, |}, verifyAddress: {| - trigger: ( - params: PublicDeriver<> - ) => Promise - |} - |} + trigger: (params: PublicDeriver<>) => Promise, + |}, + |}, |}, addresses: {| createAddress: {| - trigger: (params: PublicDeriver<>) => Promise + trigger: (params: PublicDeriver<>) => Promise, |}, resetErrors: {| trigger: (params: void) => void |}, resetFilter: {| trigger: (params: void) => void |}, setFilter: {| - trigger: (params: AddressFilterKind) => void - |} + trigger: (params: AddressFilterKind) => void, + |}, |}, dialogs: {| closeActiveDialog: {| - trigger: (params: void) => void + trigger: (params: void) => void, |}, open: {| trigger: (params: {| dialog: any, - params?: any - |}) => void - |} + params?: any, + |}) => void, + |}, |}, notifications: {| closeActiveNotification: {| - trigger: (params: {| id: string |}) => void + trigger: (params: {| id: string |}) => void, |}, - open: {| trigger: (params: Notification) => void |} - |} + open: {| trigger: (params: Notification) => void |}, + |}, |}, canUnmangle: boolean, stores: {| @@ -469,20 +478,20 @@ export default class WalletReceivePage extends Component { error: ?LocalizableError, isActionProcessing: boolean, selectedAddress: ?$ReadOnly, - |} - |} + |}, + |}, |}, uiDialogs: {| getParam: (number | string) => T, - isOpen: any => boolean + isOpen: any => boolean, |}, uiNotifications: {| getTooltipActiveNotification: string => ?Notification, - isOpen: string => boolean + isOpen: string => boolean, |}, - wallets: {| selected: null | PublicDeriver<> |} - |} - |} { + wallets: {| selected: null | PublicDeriver<> |}, + |}, + |} { if (this.props.generated !== undefined) { return this.props.generated; } @@ -551,8 +560,8 @@ export default class WalletReceivePage extends Component { }, actions: { dialogs: { - open: { trigger: actions.dialogs.open.trigger, }, - closeActiveDialog: { trigger: actions.dialogs.closeActiveDialog.trigger, }, + open: { trigger: actions.dialogs.open.trigger }, + closeActiveDialog: { trigger: actions.dialogs.closeActiveDialog.trigger }, }, notifications: { closeActiveNotification: { @@ -563,8 +572,8 @@ export default class WalletReceivePage extends Component { }, }, addresses: { - setFilter: { trigger: actions.addresses.setFilter.trigger, }, - resetFilter: { trigger: actions.addresses.resetFilter.trigger, }, + setFilter: { trigger: actions.addresses.setFilter.trigger }, + resetFilter: { trigger: actions.addresses.resetFilter.trigger }, resetErrors: { trigger: actions.addresses.resetErrors.trigger, }, @@ -574,17 +583,18 @@ export default class WalletReceivePage extends Component { }, ada: { hwVerifyAddress: { - selectAddress: { trigger: actions.ada.hwVerifyAddress.selectAddress.trigger, }, - verifyAddress: { trigger: actions.ada.hwVerifyAddress.verifyAddress.trigger, }, + selectAddress: { trigger: actions.ada.hwVerifyAddress.selectAddress.trigger }, + verifyAddress: { trigger: actions.ada.hwVerifyAddress.verifyAddress.trigger }, closeAddressDetailDialog: { trigger: actions.ada.hwVerifyAddress.closeAddressDetailDialog.trigger, }, }, }, }, - UnmangleTxDialogContainerProps: ( - { stores, actions }: InjectedOrGenerated - ), + UnmangleTxDialogContainerProps: ({ + stores, + actions, + }: InjectedOrGenerated), }); } } From 5e9f71d0339454ddd4a4ca5535e9745993dafeb0 Mon Sep 17 00:00:00 2001 From: Ahmed Ibrahim Date: Tue, 19 Sep 2023 11:15:25 +0300 Subject: [PATCH 16/20] fix(comp): use grayscale.900 for the input label comp. --- .../general-setting/UnitOfAccountSettings.js | 2 +- .../app/styles/overrides/revamp/FormControl.js | 11 ++++++----- .../app/styles/overrides/revamp/InputLabel.js | 12 ++++++------ 3 files changed, 13 insertions(+), 12 deletions(-) diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js b/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js index 9530f5dcd6..7a63d6a1cc 100644 --- a/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js +++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js @@ -199,7 +199,7 @@ class UnitOfAccountSettings extends Component { {isRevampLayout && ( <> - + ({ paddingBottom: '20px', marginBottom: '10px', marginTop: '7px', '&:hover': { '& .MuiInputLabel-root': { - color: 'grayscale.900', - '&.Mui-disabled': { color: 'grayscale.200' }, - '&.Mui-error': { color: 'magenta.500' }, + // color: theme.palette.grayscale[900], + color: 'green', + '&.Mui-disabled': { color: theme.palette.grayscale[200] }, + '&.Mui-error': { color: theme.palette.magenta[500] }, }, }, - }, + }), }, defaultProps: { variant: 'outlined', diff --git a/packages/yoroi-extension/app/styles/overrides/revamp/InputLabel.js b/packages/yoroi-extension/app/styles/overrides/revamp/InputLabel.js index 2d1c933b47..694a375ada 100644 --- a/packages/yoroi-extension/app/styles/overrides/revamp/InputLabel.js +++ b/packages/yoroi-extension/app/styles/overrides/revamp/InputLabel.js @@ -2,13 +2,13 @@ const RevampInputLabel = { styleOverrides: { - root: { - color: 'grayscale.400', + root: ({ theme }) => ({ + color: theme.palette.grayscale[900], '&::first-letter': { textTransform: 'uppercase' }, - '&.Mui-focused': { color: 'grayscale.900' }, - '&.Mui-disabled': { color: 'grayscale.200' }, - '&.Mui-error': { color: 'magenta.500' }, - }, + '&.Mui-focused': { color: theme.palette.grayscale[900] }, + '&.Mui-disabled': { color: theme.palette.grayscale[200] }, + '&.Mui-error': { color: theme.palette.magenta[500] }, + }), }, defaultProps: { variant: 'outlined' }, }; From c96976cb806bf9f58323eb138d932886ec8b38a5 Mon Sep 17 00:00:00 2001 From: Ahmed Ibrahim Date: Tue, 19 Sep 2023 11:33:32 +0300 Subject: [PATCH 17/20] fix(settings): use correct colors in the 'Version' section --- .../general-setting/ThemeSettingsBlock.js | 15 +++++++++++---- .../general-setting/UnitOfAccountSettings.js | 7 +++++-- .../yoroi-extension/app/i18n/locales/en-US.json | 2 +- .../app/styles/overrides/revamp/Checkbox.js | 13 ++++++++----- 4 files changed, 25 insertions(+), 12 deletions(-) diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/ThemeSettingsBlock.js b/packages/yoroi-extension/app/components/settings/categories/general-setting/ThemeSettingsBlock.js index 2f3a8def16..d9ecd9d578 100644 --- a/packages/yoroi-extension/app/components/settings/categories/general-setting/ThemeSettingsBlock.js +++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/ThemeSettingsBlock.js @@ -65,7 +65,7 @@ const messages = defineMessages({ }, newVersion: { id: 'settings.theme.newVersion', - defaultMessage: '!!!Yoroi new version (beta)', + defaultMessage: '!!!Yoroi new version', }, selectColorTheme: { id: 'settings.theme.selectColorTheme', @@ -120,7 +120,7 @@ export default class ThemeSettingsBlock extends Component { {intl.formatMessage(messages.version)} @@ -140,7 +140,7 @@ export default class ThemeSettingsBlock extends Component { > } + control={} label={intl.formatMessage(messages.currentVersion)} id="switchToOldVersionButton" sx={{ @@ -149,7 +149,14 @@ export default class ThemeSettingsBlock extends Component { /> } + control={ + + } label={intl.formatMessage(messages.newVersion)} id="switchToNewVersionButton" /> diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js b/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js index 7a63d6a1cc..bc81d3527c 100644 --- a/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js +++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js @@ -188,7 +188,10 @@ class UnitOfAccountSettings extends Component { }, }} renderValue={value => ( - + {/* $FlowFixMe[prop-missing] */} {value} - {currencies.filter(item => item.value === value)[0].name} @@ -208,7 +211,7 @@ class UnitOfAccountSettings extends Component { sx={{ '& span': { fontWeight: 400 }, }} - mt="6px" + mt="16px" mb="35px" > diff --git a/packages/yoroi-extension/app/i18n/locales/en-US.json b/packages/yoroi-extension/app/i18n/locales/en-US.json index 33acbdb432..54a33d89b6 100644 --- a/packages/yoroi-extension/app/i18n/locales/en-US.json +++ b/packages/yoroi-extension/app/i18n/locales/en-US.json @@ -370,7 +370,7 @@ "settings.support.reportProblem.link": "Support request", "settings.support.reportProblem.title": "Reporting a problem", "settings.theme.currentVersion": "Yoroi current version", - "settings.theme.newVersion": "Yoroi new version (beta)", + "settings.theme.newVersion": "Yoroi new version", "settings.theme.selectColorTheme": "Select color theme for old version", "settings.theme.version": "Version", "settings.tryYoroiRevamp": "Try new Yoroi Revamp", diff --git a/packages/yoroi-extension/app/styles/overrides/revamp/Checkbox.js b/packages/yoroi-extension/app/styles/overrides/revamp/Checkbox.js index 2b826006ef..5e64e7ab30 100644 --- a/packages/yoroi-extension/app/styles/overrides/revamp/Checkbox.js +++ b/packages/yoroi-extension/app/styles/overrides/revamp/Checkbox.js @@ -2,14 +2,17 @@ const RevampCheckbox: any = { styleOverrides: { - root: { + root: ({ theme }) => ({ padding: 0, marginRight: '18px', borderRadius: '2px', - color: 'primary.500', - '&.Mui-checked': { color: 'primary.500' }, - '&.Mui-disabled': { color: 'grayscale.400', backgroundColor: 'grayscale.400' }, - }, + color: theme.palette.primary[500], + '&.Mui-checked': { color: theme.palette.primary[500] }, + '&.Mui-disabled': { + color: theme.palette.grayscale[400], + backgroundColor: theme.palette.grayscale[400], + }, + }), }, }; From a3f9231c7cb7f090c3d855514ee3ccb977e73409 Mon Sep 17 00:00:00 2001 From: Ahmed Ibrahim Date: Tue, 19 Sep 2023 11:54:02 +0300 Subject: [PATCH 18/20] feat(settings): revamp yoroi about section --- .../AboutYoroiSettingsBlock.js | 100 +++++++++++++++++- 1 file changed, 97 insertions(+), 3 deletions(-) diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/AboutYoroiSettingsBlock.js b/packages/yoroi-extension/app/components/settings/categories/general-setting/AboutYoroiSettingsBlock.js index 53bc61eae1..4532edb93f 100644 --- a/packages/yoroi-extension/app/components/settings/categories/general-setting/AboutYoroiSettingsBlock.js +++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/AboutYoroiSettingsBlock.js @@ -22,7 +22,7 @@ import ExplorableHash from '../../../widgets/hashWrappers/ExplorableHash'; import { handleExternalLinkClick } from '../../../../utils/routing'; import { PublicDeriver } from '../../../../api/ada/lib/storage/models/PublicDeriver'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import { Box, Typography } from '@mui/material'; +import { Box, Link, Typography } from '@mui/material'; import { withLayout } from '../../../../styles/context/layout'; import type { InjectedLayoutProps } from '../../../../styles/context/layout'; @@ -138,7 +138,7 @@ class AboutYoroiSettingsBlock extends Component { render(): Node { const { intl } = this.context; - const { wallet, isRevampLayout } = this.props; + const { wallet, isRevampLayout, renderLayoutComponent } = this.props; let network; if (wallet) { @@ -146,7 +146,7 @@ class AboutYoroiSettingsBlock extends Component { network = result === true ? 'testnet' : 'mainnet'; } - return ( + const classicLayout = ( { ); + + const revampLayout = ( + + + {intl.formatMessage(messages.aboutYoroiLabel)} + + + {network && ( + + )} + + + + + + {!environment.isProduction() && ( + + )} + +
+ + {socialMediaLinks.map(link => ( + + ))} + +
+ + ); + + return renderLayoutComponent({ + CLASSIC: classicLayout, + REVAMP: revampLayout, + }); } } +function LabelWithValue({ + label, + value, + url, +}: {| + label: string, + value: string, + url?: string, +|}): Node { + return ( + + + {label} + + + {value} + + + ); +} + +LabelWithValue.defaultProps = { + url: undefined, +}; + export default (withLayout(AboutYoroiSettingsBlock): ComponentType); From 17da73e7bd33fe89a3c3b37ab44513a88abcea48 Mon Sep 17 00:00:00 2001 From: Ahmed Ibrahim Date: Tue, 19 Sep 2023 12:09:44 +0300 Subject: [PATCH 19/20] fix(settings): add correct card with for the complexity level form --- .../complexity-level/ComplexityLevelForm.js | 1 + .../complexity-level/ComplexityLevelForm.scss | 9 ++++++ .../profile/terms-of-use/TermsOfUseText.scss | 31 +++++++++++++------ 3 files changed, 31 insertions(+), 10 deletions(-) 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 c898f2d945..1b888e54a4 100644 --- a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js +++ b/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js @@ -147,6 +147,7 @@ class ComplexityLevel extends Component { justifyContent: 'center', gap: '24px', mt: '32px', + maxWidth: '700px', }} > {levels.map(level => { diff --git a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss b/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss index 04adb5d38d..3b563162fe 100644 --- a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss +++ b/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss @@ -86,3 +86,12 @@ } } } + +:global(.YoroiRevamp) .component { + min-width: 650px; + max-width: unset; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} diff --git a/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseText.scss b/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseText.scss index c57b6418da..6a59abb3f7 100644 --- a/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseText.scss +++ b/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseText.scss @@ -42,8 +42,7 @@ color: var(--yoroi-terms-of-use-text-color); } -:global(.YoroiModern), -:global(.YoroiRevamp) { +:global(.YoroiModern) { .terms { h1, h2 { @@ -67,21 +66,33 @@ } } -:global(.YoroiRevamp) .terms { - &:not(.fixedHight) { - padding-bottom: 20px; - - h2 { - color: var(--yoroi-terms-of-use-text-color); +:global(.YoroiRevamp) { + .terms { + &.fixedHeight h1 { + margin-top: 26px; } h1 { text-align: center; + font-size: 18px; + font-weight: 500; margin-top: 0px; margin-bottom: 16px; - color: #000; - font-size: 18px; + color: var(--yoroi-palette-common-black); + } + + h2 { + font-size: 16px; font-weight: 500; + margin-top: 46px; + color: var(--yoroi-terms-of-use-text-color); + } + + p, + li { + color: var(--yoroi-terms-of-use-text-color); + font-size: 16px; + line-height: 24px; } } } From e730b5d04ee8ea199c67b262bdfbd32d8afe2a99 Mon Sep 17 00:00:00 2001 From: vantuz-subhuman Date: Sat, 7 Oct 2023 10:22:45 +0300 Subject: [PATCH 20/20] flow fixes --- .../app/components/settings/menu/SettingsMenu.js | 2 +- .../yoroi-extension/app/styles/overrides/revamp/FormControl.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js b/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js index a5875ef9b3..197e782d39 100644 --- a/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js +++ b/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js @@ -87,7 +87,7 @@ class SettingsMenu extends Component { className: 'levelOfComplexity', }, { - label: intl.formatMessage(messages.analytics), + label: intl.formatMessage(settingsMenuMessages.analytics), route: ROUTES.SETTINGS.ANALYTICS, className: 'analytics', }, diff --git a/packages/yoroi-extension/app/styles/overrides/revamp/FormControl.js b/packages/yoroi-extension/app/styles/overrides/revamp/FormControl.js index ab084b6faa..9f52f830eb 100644 --- a/packages/yoroi-extension/app/styles/overrides/revamp/FormControl.js +++ b/packages/yoroi-extension/app/styles/overrides/revamp/FormControl.js @@ -2,7 +2,7 @@ const RevampFormControl = { styleOverrides: { - root: ({ theme }) => ({ + root: ({ theme }: any): any => ({ paddingBottom: '20px', marginBottom: '10px', marginTop: '7px',