From c04b17059f4a6bbff5551345acc9ae1d859c93ec Mon Sep 17 00:00:00 2001 From: Patriciu Nista Date: Thu, 16 Nov 2023 01:09:01 +0100 Subject: [PATCH 1/6] fixed all modals, borders wip --- .../app/components/topbar/WalletListDialog.js | 18 +++++---------- .../components/topbar/WalletListDialog.scss | 8 ++----- .../components/transfer/SuccessPageRevamp.js | 6 ++--- .../app/components/uri/URIGenerateDialog.js | 7 +++--- .../app/components/uri/URIGenerateDialog.scss | 3 --- .../wallet/export/ExportTransactionDialog.js | 5 +--- .../wallet/receive/VerifyAddressDialog.scss | 2 +- .../send/WalletSendFormSteps/AddNFTDialog.js | 14 +++++++---- .../WalletSendFormSteps/AddNFTDialog.scss | 5 ++-- .../WalletSendFormSteps/AddTokenDialog.js | 8 ++++--- .../WalletSendFormSteps/AddTokenDialog.scss | 2 +- .../settings/ChangeWalletPasswordDialog.js | 5 +--- .../wallet/staking/DelegationTxDialog.js | 5 ++-- .../widgets/DangerousActionDialog.scss | 4 ---- .../app/components/widgets/Dialog.js | 16 +++++++++---- .../components/widgets/DialogCloseButton.js | 10 +------- .../app/components/widgets/ThemedDialog.js | 2 +- .../wallet/staking/WithdrawRewardsDialog.js | 23 ++++++++++++------- 18 files changed, 67 insertions(+), 76 deletions(-) diff --git a/packages/yoroi-extension/app/components/topbar/WalletListDialog.js b/packages/yoroi-extension/app/components/topbar/WalletListDialog.js index 997bb302bb..c8acd274d8 100644 --- a/packages/yoroi-extension/app/components/topbar/WalletListDialog.js +++ b/packages/yoroi-extension/app/components/topbar/WalletListDialog.js @@ -4,7 +4,7 @@ import type { Node } from 'react'; import { Component } from 'react'; import { observer } from 'mobx-react'; import { defineMessages, intlShape } from 'react-intl'; -import DialogRevamp from '../widgets/DialogRevamp'; +import Dialog from '../widgets/Dialog'; import DialogCloseButton from '../widgets/DialogCloseButton'; import styles from './WalletListDialog.scss'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; @@ -185,7 +185,7 @@ export default class WalletListDialog extends Component { const walletsTotal = this.renderWalletsTotal(); return ( - { - + {cardanoWalletsIdx.length > 0 && (

{intl.formatMessage(messages.cardano)}

@@ -280,19 +280,13 @@ export default class WalletListDialog extends Component { - + ); } diff --git a/packages/yoroi-extension/app/components/topbar/WalletListDialog.scss b/packages/yoroi-extension/app/components/topbar/WalletListDialog.scss index 7208cf4288..ad15b6bf0b 100644 --- a/packages/yoroi-extension/app/components/topbar/WalletListDialog.scss +++ b/packages/yoroi-extension/app/components/topbar/WalletListDialog.scss @@ -1,7 +1,5 @@ .component { font-size: 16px; - min-width: 675px !important; - height: 700px; max-height: unset !important; padding-right: 0 !important; padding-bottom: 0px !important; @@ -16,10 +14,8 @@ top: 0px; background: var(--yoroi-comp-dialog-background); padding-bottom: 14px; - - padding-top: 14px; - padding-left: 40px; - + padding-top: 24px; + padding-left: 24px; } .totalInfo { diff --git a/packages/yoroi-extension/app/components/transfer/SuccessPageRevamp.js b/packages/yoroi-extension/app/components/transfer/SuccessPageRevamp.js index a7e292ddbc..4655925a54 100644 --- a/packages/yoroi-extension/app/components/transfer/SuccessPageRevamp.js +++ b/packages/yoroi-extension/app/components/transfer/SuccessPageRevamp.js @@ -7,7 +7,7 @@ import DialogCloseButton from '../widgets/DialogCloseButton'; import LoadingSpinner from '../widgets/LoadingSpinner'; import { Box, Typography } from '@mui/material'; import { ReactComponent as SuccessImg } from '../../assets/images/transfer-success.inline.svg'; -import DialogRevamp from '../widgets/DialogRevamp'; +import Dialog from '../widgets/Dialog'; type Props = {| +title: string, @@ -38,7 +38,7 @@ export class SuccessPageRevamp extends Component { ]; return ( - { {this.props.closeInfo == null && } - + ); } } diff --git a/packages/yoroi-extension/app/components/uri/URIGenerateDialog.js b/packages/yoroi-extension/app/components/uri/URIGenerateDialog.js index 768e3f6aaf..a6791ed803 100644 --- a/packages/yoroi-extension/app/components/uri/URIGenerateDialog.js +++ b/packages/yoroi-extension/app/components/uri/URIGenerateDialog.js @@ -22,7 +22,8 @@ import { getTokenName } from '../../stores/stateless/tokenHelpers'; import BigNumber from 'bignumber.js'; import styles from './URIGenerateDialog.scss'; -import ThemedDialog from '../widgets/ThemedDialog'; +// import ThemedDialog from '../widgets/ThemedDialog'; +import Dialog from '../widgets/Dialog'; const messages = defineMessages({ uriGenerateDialogTitle: { @@ -140,7 +141,7 @@ export default class URIGenerateDialog extends Component { ]; return ( - { />
- + ); } } diff --git a/packages/yoroi-extension/app/components/uri/URIGenerateDialog.scss b/packages/yoroi-extension/app/components/uri/URIGenerateDialog.scss index 39c08504b6..19e693410f 100644 --- a/packages/yoroi-extension/app/components/uri/URIGenerateDialog.scss +++ b/packages/yoroi-extension/app/components/uri/URIGenerateDialog.scss @@ -1,7 +1,4 @@ .component { - min-width: var(--yoroi-comp-dialog-min-width-lg) !important; - max-width: var(--yoroi-comp-dialog-min-width-lg) !important; - :global { .Dialog_title { margin-bottom: 30px; diff --git a/packages/yoroi-extension/app/components/wallet/export/ExportTransactionDialog.js b/packages/yoroi-extension/app/components/wallet/export/ExportTransactionDialog.js index 5168af2a05..39587180cd 100644 --- a/packages/yoroi-extension/app/components/wallet/export/ExportTransactionDialog.js +++ b/packages/yoroi-extension/app/components/wallet/export/ExportTransactionDialog.js @@ -6,8 +6,7 @@ import { defineMessages, intlShape } from 'react-intl'; import LocalizableError from '../../../i18n/LocalizableError'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import type { TransactionRowsToExportRequest } from '../../../actions/common/transactions-actions'; -import ClassicDialog from '../../widgets/Dialog'; -import DialogRevamp from '../../widgets/DialogRevamp'; +import Dialog from '../../widgets/Dialog'; import DialogCloseButton from '../../widgets/DialogCloseButton'; import ErrorBlock from '../../widgets/ErrorBlock'; import globalMessages from '../../../i18n/global-messages'; @@ -110,8 +109,6 @@ class ExportTransactionDialog extends Component { changed = true; } } else if (included) { - tokens.push({ tokenId: token.TokenId }); - changed = true; + tokens.push({ tokenId: token.TokenId }); + changed = true; } if (!included) { toRemove.push(token); @@ -188,6 +188,8 @@ export default class AddNFTDialog extends Component { const { onClose, calculateMinAda, shouldAddMoreTokens } = this.props; const { currentNftsList, fullNftsList, selectedTokens } = this.state; const shouldAddMore = shouldAddMoreTokens(selectedTokens); + const hasSelectedTokensIncluded = selectedTokens.filter(t => t.included); + return ( { )} - + ); const receivers = tentativeTx.receivers(true); const receiverAddress = addressToDisplayString(receivers[0], network); @@ -258,7 +265,7 @@ export default class WithdrawRewardsDialog extends Component { if (!selectedExplorer) throw new Error('No explorer for wallet network'); return ( - { onClose={this.props.onClose} closeButton={} > - + {shouldDeregister && ( @@ -413,7 +420,7 @@ export default class WithdrawRewardsDialog extends Component { ) : null} - + ); } From 887c69ea37e544040b195bbfbb9e35ab41fdb22f Mon Sep 17 00:00:00 2001 From: Patriciu Nista Date: Thu, 16 Nov 2023 02:38:07 +0100 Subject: [PATCH 2/6] add borders for modals with scrollable content fixed token and nft dialog styles --- .../send/WalletSendFormSteps/AddNFTDialog.js | 26 +++++----- .../WalletSendFormSteps/AddNFTDialog.scss | 17 ------ .../WalletSendFormSteps/AddTokenDialog.js | 35 ++++++------- .../WalletSendFormSteps/AddTokenDialog.scss | 10 ---- .../app/components/widgets/Dialog.js | 52 ++++++++++++++++--- .../wallet/staking/WithdrawRewardsDialog.js | 4 +- 6 files changed, 76 insertions(+), 68 deletions(-) diff --git a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddNFTDialog.js b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddNFTDialog.js index 58214fdcce..b3bfed95ba 100644 --- a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddNFTDialog.js +++ b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddNFTDialog.js @@ -197,6 +197,18 @@ export default class AddNFTDialog extends Component { className={styles.dialog} onClose={onClose} withCloseButton + scrollableContentClass={styles.nftsGrid} + actions={[ + { + disabled: + hasSelectedTokensIncluded.length === 0 || + !shouldAddMore || + currentNftsList.length === 0, + onClick: this.onAddAll, + primary: true, + label: intl.formatMessage(globalMessages.confirm), + }, + ]} >
@@ -290,20 +302,6 @@ export default class AddNFTDialog extends Component { )}
- - - ); } diff --git a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddNFTDialog.scss b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddNFTDialog.scss index 08798007de..b591a09a42 100644 --- a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddNFTDialog.scss +++ b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddNFTDialog.scss @@ -3,7 +3,6 @@ width: 100%; display: flex; flex-direction: column; - padding: 0px 24px; max-width: 648px; .search { @@ -11,7 +10,6 @@ background-color: #f0f3f5; display: flex; align-items: center; - padding: 0px 20px; margin-bottom: 20px; .searchInput { @@ -73,7 +71,6 @@ grid-template-columns: repeat(3, 1fr); grid-gap: 24px; padding-bottom: 20px; - margin-right: -24px; height: 100%; max-height: 360px; overflow-y: scroll; @@ -101,17 +98,3 @@ } } } - -.dialog { - padding: 0px !important; - - & > div { - padding-left: 0px !important; - padding-right: 0px; - max-height: unset; - } - - h1 { - padding: 0px; - } -} diff --git a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddTokenDialog.js b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddTokenDialog.js index 5cff109246..8d998d03b6 100644 --- a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddTokenDialog.js +++ b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddTokenDialog.js @@ -341,14 +341,27 @@ export default class AddTokenDialog extends Component { ? intl.formatMessage(globalMessages.tokens) : intl.formatMessage(messages.nTokens, { number: fullTokensList.length }) } + actions={[ + { + disabled: + fullTokensList.length === 0 || + hasSelectedTokensIncluded.length === 0 || + !this.isValidAmounts() || + !shouldAddMore, + onClick: this.onAddAll, + primary: true, + label: intl.formatMessage(globalMessages.confirm), + }, + ]} closeOnOverlayClick={false} className={styles.dialog} onClose={onClose} withCloseButton + scrollableContentClass="CurrentTokensList" > - + { )} {!shouldAddMore && ( - + )} @@ -403,7 +416,6 @@ export default class AddTokenDialog extends Component { borderBottom="1px solid" borderBottomColor="grayscale.200" className={styles.columns} - px="24px" >
  • - ); } diff --git a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddTokenDialog.scss b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddTokenDialog.scss index fddc1b88f4..47e718adb4 100644 --- a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddTokenDialog.scss +++ b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddTokenDialog.scss @@ -97,13 +97,3 @@ } } } - -.dialog { - padding: 0 !important; - - & > div { - padding-left: 0px !important; - max-height: unset; - padding-right: 0px !important; - } -} diff --git a/packages/yoroi-extension/app/components/widgets/Dialog.js b/packages/yoroi-extension/app/components/widgets/Dialog.js index 4710d751b1..3c6c190f26 100644 --- a/packages/yoroi-extension/app/components/widgets/Dialog.js +++ b/packages/yoroi-extension/app/components/widgets/Dialog.js @@ -1,7 +1,7 @@ /* eslint-disable no-nested-ternary */ // @flow import type { Node, Element, ComponentType } from 'react'; -import React from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import classnames from 'classnames'; import { map } from 'lodash'; import { IconButton, Modal, Typography } from '@mui/material'; @@ -29,6 +29,7 @@ export type Props = {| +withCloseButton?: boolean, +backButton?: Node, +className?: string, + +scrollableContentClass?: string, +styleOverride?: { ... }, +onClose?: ?(void) => PossiblyAsync, +closeOnOverlayClick?: boolean, @@ -48,9 +49,33 @@ function DialogFn(props: Props & InjectedProps): Node { closeButton, withCloseButton, backButton, + scrollableContentClass, isRevampLayout, } = props; + const hasScroll = useRef(null); + const [contentHasScroll, setContentHasScroll] = useState(false); + + useEffect(() => { + console.log('🚀 > hasScroll:', hasScroll); + if (hasScroll.current === true) return; + + setTimeout(() => { + const el = document.querySelector( + scrollableContentClass ? `.${scrollableContentClass}` : '.ModalContent' + ); + + if (el.clientHeight < el.scrollHeight) { + hasScroll.current = true; + el.style.marginRight = '-24px'; + } else { + hasScroll.current = false; + } + + setContentHasScroll(hasScroll.current); + }, 50); + }, [children]); + const hasCloseButton = withCloseButton || closeButton; const hasSubmitting = @@ -81,15 +106,16 @@ function DialogFn(props: Props & InjectedProps): Node { className={className} style={props.styleOverride} boxShadow="0px 13px 20px -1px #00000026" + contentHasScroll={contentHasScroll} > {title != null && title !== '' ? ( {title} ) : null} - {children != null ? {children} : null} + {children != null ? {children} : null} {actions && actions.length > 0 && ( - + {map(actions, (action, i: number) => { const buttonClasses = classnames([ // Keep classnames for testing @@ -131,6 +157,7 @@ DialogFn.defaultProps = { closeButton: undefined, backButton: undefined, className: undefined, + scrollableContentClass: undefined, styleOverride: undefined, onClose: undefined, closeOnOverlayClick: false, @@ -155,7 +182,7 @@ const CloseButton = ({ onClose, closeButton }) => ( ); -const ModalContainer = styled(Box)(({ theme }) => ({ +const ModalContainer = styled(Box)(({ theme, contentHasScroll }) => ({ position: 'relative', minWidth: theme.name === 'classic' || theme.name === 'modern' @@ -178,7 +205,12 @@ const ModalContainer = styled(Box)(({ theme }) => ({ textTransform: 'uppercase', letterSpacing: 0, display: 'block', - borderBottom: theme.name === 'classic' || theme.name === 'modern' ? '' : '1px solid', + borderBottom: + theme.name === 'classic' || theme.name === 'modern' + ? '' + : contentHasScroll + ? '1px solid' + : '', borderBottomColor: theme.name === 'classic' || theme.name === 'modern' ? theme.palette.gray['200'] @@ -189,20 +221,26 @@ const ModalContainer = styled(Box)(({ theme }) => ({ const ModalContent = styled(Box)(({ theme }) => ({ overflowX: 'hidden', overflowY: 'overlay', - maxHeight: '60vh', + maxHeight: '70vh', paddingLeft: theme.name === 'classic' ? '30px' : '24px', paddingRight: theme.name === 'classic' ? '30px' : '24px', paddingTop: theme.name === 'classic' ? '0px' : '24px', paddingBottom: theme.name === 'classic' || theme.name === 'modern' ? '0px' : '24px', })); -const ModalFooter = styled(Box)(({ theme }) => ({ +const ModalFooter = styled(Box)(({ theme, contentHasScroll }) => ({ display: 'flex', paddingLeft: theme.name === 'classic' ? '30px' : '24px', paddingRight: theme.name === 'classic' ? '30px' : '24px', paddingTop: theme.name === 'classic' || theme.name === 'modern' ? '0' : '24px', paddingBottom: theme.name === 'classic' || theme.name === 'modern' ? '0' : '24px', marginTop: theme.name === 'classic' ? '20px' : '0px', + borderTop: + theme.name === 'classic' || theme.name === 'modern' ? '' : contentHasScroll ? '1px solid' : '', + borderTopColor: + theme.name === 'classic' || theme.name === 'modern' + ? theme.palette.gray['200'] + : theme.palette.grayscale['200'], '& button': { width: '50%', '&:only-child': { diff --git a/packages/yoroi-extension/app/containers/wallet/staking/WithdrawRewardsDialog.js b/packages/yoroi-extension/app/containers/wallet/staking/WithdrawRewardsDialog.js index ee0e65dd60..1eb1b6210d 100644 --- a/packages/yoroi-extension/app/containers/wallet/staking/WithdrawRewardsDialog.js +++ b/packages/yoroi-extension/app/containers/wallet/staking/WithdrawRewardsDialog.js @@ -284,8 +284,10 @@ export default class WithdrawRewardsDialog extends Component { closeOnOverlayClick={false} onClose={this.props.onClose} closeButton={} + scrollableContentClass="WithdrawRewards" + styleOverride={{ width: '648px' }} > - + {shouldDeregister && ( From 64b71215be28617c56dbdc9799824b6e3136dcd6 Mon Sep 17 00:00:00 2001 From: Patriciu Nista Date: Thu, 16 Nov 2023 11:30:12 +0100 Subject: [PATCH 3/6] fixed modals width and other specific modal issues --- .../app/components/transfer/ErrorPage.js | 1 - .../app/components/transfer/ErrorPage.scss | 1 + .../components/transfer/SuccessPageRevamp.js | 2 +- .../WalletSendFormSteps/AddTokenDialog.scss | 2 +- .../app/components/widgets/Dialog.js | 26 +++++++++++-------- .../dialogs/RevampAnnouncementDialog.js | 6 ++--- 6 files changed, 21 insertions(+), 17 deletions(-) diff --git a/packages/yoroi-extension/app/components/transfer/ErrorPage.js b/packages/yoroi-extension/app/components/transfer/ErrorPage.js index bc61d0d791..daaaa04b28 100644 --- a/packages/yoroi-extension/app/components/transfer/ErrorPage.js +++ b/packages/yoroi-extension/app/components/transfer/ErrorPage.js @@ -46,7 +46,6 @@ export default class ErrorPage extends Component { closeOnOverlayClick={false} closeButton={} onClose={onCancel} - className={styles.dialog} >
    diff --git a/packages/yoroi-extension/app/components/transfer/ErrorPage.scss b/packages/yoroi-extension/app/components/transfer/ErrorPage.scss index c0ac735a62..af65710ca6 100644 --- a/packages/yoroi-extension/app/components/transfer/ErrorPage.scss +++ b/packages/yoroi-extension/app/components/transfer/ErrorPage.scss @@ -5,6 +5,7 @@ height: 100%; align-items: center; justify-content: center; + max-width: 600px; } .body { diff --git a/packages/yoroi-extension/app/components/transfer/SuccessPageRevamp.js b/packages/yoroi-extension/app/components/transfer/SuccessPageRevamp.js index 4655925a54..e89d2387a8 100644 --- a/packages/yoroi-extension/app/components/transfer/SuccessPageRevamp.js +++ b/packages/yoroi-extension/app/components/transfer/SuccessPageRevamp.js @@ -58,7 +58,7 @@ export class SuccessPageRevamp extends Component { > - + {text} {this.props.closeInfo == null && } diff --git a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddTokenDialog.scss b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddTokenDialog.scss index 47e718adb4..5144dc91b2 100644 --- a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddTokenDialog.scss +++ b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddTokenDialog.scss @@ -3,7 +3,7 @@ height: 100%; display: flex; flex-direction: column; - max-width: 648px; + max-width: 600px; .search { border-radius: 8px; diff --git a/packages/yoroi-extension/app/components/widgets/Dialog.js b/packages/yoroi-extension/app/components/widgets/Dialog.js index 3c6c190f26..8cbef684e5 100644 --- a/packages/yoroi-extension/app/components/widgets/Dialog.js +++ b/packages/yoroi-extension/app/components/widgets/Dialog.js @@ -4,7 +4,7 @@ import type { Node, Element, ComponentType } from 'react'; import React, { useEffect, useRef, useState } from 'react'; import classnames from 'classnames'; import { map } from 'lodash'; -import { IconButton, Modal, Typography } from '@mui/material'; +import { IconButton, Modal, Typography, alpha } from '@mui/material'; import { Box, styled } from '@mui/system'; import { LoadingButton } from '@mui/lab'; import { withLayout } from '../../styles/context/layout'; @@ -57,23 +57,25 @@ function DialogFn(props: Props & InjectedProps): Node { const [contentHasScroll, setContentHasScroll] = useState(false); useEffect(() => { - console.log('🚀 > hasScroll:', hasScroll); - if (hasScroll.current === true) return; - - setTimeout(() => { + const timeout = setTimeout(() => { const el = document.querySelector( scrollableContentClass ? `.${scrollableContentClass}` : '.ModalContent' ); + if (!el) return; + if (el.clientHeight < el.scrollHeight) { - hasScroll.current = true; + setContentHasScroll(true); el.style.marginRight = '-24px'; } else { - hasScroll.current = false; + setContentHasScroll(false); + el.style.marginRight = '0'; } + }, 30); - setContentHasScroll(hasScroll.current); - }, 50); + return () => { + clearTimeout(timeout); + }; }, [children]); const hasCloseButton = withCloseButton || closeButton; @@ -94,7 +96,9 @@ function DialogFn(props: Props & InjectedProps): Node { } } sx={{ - background: 'var(--yoroi-comp-dialog-overlay-background-color)', + bgcolor: isRevampLayout + ? alpha('#121F4D', 0.7) // primary.900 70% + : 'var(--yoroi-comp-dialog-overlay-background-color)', display: 'flex', justifyContent: 'center', alignItems: 'center', @@ -187,7 +191,7 @@ const ModalContainer = styled(Box)(({ theme, contentHasScroll }) => ({ minWidth: theme.name === 'classic' || theme.name === 'modern' ? 'var(--yoroi-comp-dialog-min-width-md)' - : '612px', + : '648px', borderRadius: theme.name === 'classic' ? 0 : 8, paddingTop: theme.name === 'classic' ? '25px' : '0px', paddingBottom: theme.name === 'classic' ? '30px' : '0px', diff --git a/packages/yoroi-extension/app/containers/wallet/dialogs/RevampAnnouncementDialog.js b/packages/yoroi-extension/app/containers/wallet/dialogs/RevampAnnouncementDialog.js index 01cf434405..ba81bbc46d 100644 --- a/packages/yoroi-extension/app/containers/wallet/dialogs/RevampAnnouncementDialog.js +++ b/packages/yoroi-extension/app/containers/wallet/dialogs/RevampAnnouncementDialog.js @@ -2,7 +2,7 @@ import { Component } from 'react'; import type { Node } from 'react'; -import DialogRevamp from '../../../components/widgets/DialogRevamp'; +import Dialog from '../../../components/widgets/Dialog'; import { defineMessages, intlShape } from 'react-intl'; import { observer } from 'mobx-react'; import { ReactComponent as NewThemeIllustration } from '../../../assets/images/new-theme-illustration.inline.svg'; @@ -76,7 +76,7 @@ export class RevampAnnouncementDialog extends Component { }, ]; return ( - { - + ); } } From c87db0b1833dafab7cc82e8c8ff95a76ddb21b9c Mon Sep 17 00:00:00 2001 From: vantuz-subhuman Date: Thu, 16 Nov 2023 22:42:31 +0300 Subject: [PATCH 4/6] Version bump: 4.23.102 (nightly) --- packages/yoroi-extension/package-lock.json | 2 +- packages/yoroi-extension/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/yoroi-extension/package-lock.json b/packages/yoroi-extension/package-lock.json index d3f5aca9d8..bf76a683c3 100644 --- a/packages/yoroi-extension/package-lock.json +++ b/packages/yoroi-extension/package-lock.json @@ -1,6 +1,6 @@ { "name": "yoroi", - "version": "4.23.101", + "version": "4.23.102", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/yoroi-extension/package.json b/packages/yoroi-extension/package.json index 39df562866..342a156be9 100644 --- a/packages/yoroi-extension/package.json +++ b/packages/yoroi-extension/package.json @@ -1,6 +1,6 @@ { "name": "yoroi", - "version": "4.23.101", + "version": "4.23.102", "description": "Cardano ADA wallet", "scripts": { "dev-mv2": "rimraf dev/ && babel-node scripts-mv2/build --type=debug --env 'mainnet'", From 5d3e1040b6cc7731090fd2da1913a9b5aa52d129 Mon Sep 17 00:00:00 2001 From: Patriciu Nista Date: Fri, 17 Nov 2023 01:56:33 +0100 Subject: [PATCH 5/6] Fixed more modal issues found and wrong styles --- .../images/revamp/icons/info.inline.svg | 5 + .../app/components/buySell/BuySellDialog.js | 87 ++++++++--------- .../app/components/buySell/BuySellDialog.scss | 19 +--- .../app/components/topbar/WalletListDialog.js | 49 ++++------ .../components/topbar/WalletListDialog.scss | 15 +-- .../app/components/uri/URIDisplayDialog.js | 94 +++++++++++-------- .../app/components/uri/URIDisplayDialog.scss | 17 +--- .../wallet/receive/VerifyAddressDialog.js | 2 +- .../dashboard-revamp/RewardHistoryDialog.js | 77 ++++++++------- .../dashboard-revamp/RewardHistoryDialog.scss | 5 - .../widgets/DangerousActionDialog.js | 35 +++---- .../app/components/widgets/Dialog.js | 27 ++++-- .../categories/ResyncWalletDialogContainer.js | 42 ++++----- .../dialogs/RevampAnnouncementDialog.js | 10 +- .../dialogs/RevampAnnouncementDialog.scss | 18 +--- .../app/i18n/global-messages.js | 4 + .../app/i18n/locales/en-US.json | 3 +- 17 files changed, 229 insertions(+), 280 deletions(-) create mode 100644 packages/yoroi-extension/app/assets/images/revamp/icons/info.inline.svg delete mode 100644 packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/RewardHistoryDialog.scss diff --git a/packages/yoroi-extension/app/assets/images/revamp/icons/info.inline.svg b/packages/yoroi-extension/app/assets/images/revamp/icons/info.inline.svg new file mode 100644 index 0000000000..dc2f19dbf1 --- /dev/null +++ b/packages/yoroi-extension/app/assets/images/revamp/icons/info.inline.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/yoroi-extension/app/components/buySell/BuySellDialog.js b/packages/yoroi-extension/app/components/buySell/BuySellDialog.js index fe8a5749ff..e368431362 100644 --- a/packages/yoroi-extension/app/components/buySell/BuySellDialog.js +++ b/packages/yoroi-extension/app/components/buySell/BuySellDialog.js @@ -8,13 +8,14 @@ import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import { truncateAddress } from '../../utils/formatters'; import Dialog from '../widgets/Dialog'; import DialogCloseButton from '../widgets/DialogCloseButton'; -import ChangellyFetcher from './ChangellyFetcher' +import ChangellyFetcher from './ChangellyFetcher'; import styles from './BuySellDialog.scss'; -import { ReactComponent as VerifyIcon } from '../../assets/images/verify-icon.inline.svg' -import VerticalFlexContainer from '../layout/VerticalFlexContainer' -import LoadingSpinner from '../widgets/LoadingSpinner' +import { ReactComponent as VerifyIcon } from '../../assets/images/verify-icon.inline.svg'; +import VerticalFlexContainer from '../layout/VerticalFlexContainer'; +import LoadingSpinner from '../widgets/LoadingSpinner'; import globalMessages from '../../i18n/global-messages'; +import { Box } from '@mui/material'; const messages = defineMessages({ dialogTitle: { @@ -23,11 +24,13 @@ const messages = defineMessages({ }, dialogSelectAddress: { id: 'buysell.dialog.selectAddress', - defaultMessage: '!!!Please select the receiving address. This will be shared with the third party provider called Changelly for the buy / sell of ADA. ', + defaultMessage: + '!!!Please select the receiving address. This will be shared with the third party provider called Changelly for the buy / sell of ADA. ', }, dialogDescription: { id: 'buysell.dialog.instructions', - defaultMessage: '!!!Please select your preferences. On the next screen, confirm your selection by pressing the green arrow on the top right', + defaultMessage: + '!!!Please select your preferences. On the next screen, confirm your selection by pressing the green arrow on the top right', }, dialogManual: { id: 'buysell.dialog.manual', @@ -39,14 +42,15 @@ export type WalletInfo = {| walletName: string, currencyName: string, anAddressFormatted: string, -|} +|}; type Props = {| +onCancel: void => void, - +genWalletList: () => Promise> + +genWalletList: () => Promise>, |}; -const WIDGET_URL = 'https://widget.changelly.com?from=*&to=*&amount=200&fromDefault=usd&toDefault=ada&theme=default&merchant_id=g9qheu8vschp16jj&payment_id=&v=3' +const WIDGET_URL = + 'https://widget.changelly.com?from=*&to=*&amount=200&fromDefault=usd&toDefault=ada&theme=default&merchant_id=g9qheu8vschp16jj&payment_id=&v=3'; type State = {| addressSelected: ?string, @@ -55,7 +59,7 @@ type State = {| @observer export default class BuySellDialog extends Component { - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { + static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; @@ -64,41 +68,38 @@ export default class BuySellDialog extends Component { walletList: null, }; - async componentDidMount () { + async componentDidMount() { const { intl } = this.context; - const resp = await this.props.genWalletList() + const resp = await this.props.genWalletList(); const wallets = [ ...resp, { walletName: intl.formatMessage(messages.dialogManual), currencyName: '', anAddressFormatted: '', - } - ] - this.setState({ walletList: wallets }) + }, + ]; + this.setState({ walletList: wallets }); } - createRows: ($npm$ReactIntl$IntlFormat, Array) => Node = (intl, wallets) => ( + createRows: ($npm$ReactIntl$IntlFormat, Array) => Node = (intl, wallets) => wallets.map((wallet, i) => { return ( // eslint-disable-next-line react/no-array-index-key
    - { wallet.currencyName ? `(${wallet.currencyName}) ` : ''}{wallet.walletName} -
    -
    - {truncateAddress(wallet.anAddressFormatted)} + {wallet.currencyName ? `(${wallet.currencyName}) ` : ''} + {wallet.walletName}
    +
    {truncateAddress(wallet.anAddressFormatted)}
    {/* Verify Address action */}
    - ) - }) - ) + ); + }); render(): Node { const { intl } = this.context; @@ -137,32 +137,27 @@ export default class BuySellDialog extends Component { closeOnOverlayClick={false} onClose={this.props.onCancel} closeButton={} - className="" >
    - {intl.formatMessage(messages.dialogSelectAddress)} + {intl.formatMessage(messages.dialogSelectAddress)} {addressNodes}
    - ) - } - - return ( - } - className="" - > -
    -
    - {intl.formatMessage(messages.dialogDescription)} -
    - -
    -     ); + } + return ( + } + > +
    +
    {intl.formatMessage(messages.dialogDescription)}
    + +
    +     + ); } } diff --git a/packages/yoroi-extension/app/components/buySell/BuySellDialog.scss b/packages/yoroi-extension/app/components/buySell/BuySellDialog.scss index 9c50988475..cf70c7a277 100644 --- a/packages/yoroi-extension/app/components/buySell/BuySellDialog.scss +++ b/packages/yoroi-extension/app/components/buySell/BuySellDialog.scss @@ -4,6 +4,7 @@ padding-left: 40px; padding-right: 40px; max-height: 600px; + max-width: 600px; .description { color: var(--yoroi-palette-gray-900); @@ -20,17 +21,16 @@ flex-direction: column; letter-spacing: 0; line-height: 22px; + max-width: 600px; } .row { display: flex; - flex-direction: row; - height: 60px; - align-items: flex-start; + flex-flow: row nowrap; + align-items: center; + justify-content: space-between; .left { - flex: 7; - .nameAndCurrency { color: var(--yoroi-palette-gray-900); font-size: 16px; @@ -44,15 +44,6 @@ line-height: 22px; } } - .right { - flex: 1; - width: 40px; - height: 40px; - } -} - -.row:first-child { - margin-top: 40px; } .verifyIcon { diff --git a/packages/yoroi-extension/app/components/topbar/WalletListDialog.js b/packages/yoroi-extension/app/components/topbar/WalletListDialog.js index c8acd274d8..3fc0d8dd72 100644 --- a/packages/yoroi-extension/app/components/topbar/WalletListDialog.js +++ b/packages/yoroi-extension/app/components/topbar/WalletListDialog.js @@ -191,6 +191,25 @@ export default class WalletListDialog extends Component { closeOnOverlayClick closeButton={} onClose={this.props.close} + actions={[ + { + id: 'addWalletButton', + onClick: onAddWallet, + size: 'large', + label: intl.formatMessage(messages.addWallet), + }, + { + id: 'applyWalletButton', + onClick: this.onSelect, + size: 'large', + disabled: + this.state.selectedWallet === null || + this.isCurrentWallet(this.state.selectedWallet, 'global'), + primary: true, + label: intl.formatMessage(messages.applyWallet), + }, + ]} + scrollableContentClass="WalletList" >
    @@ -206,7 +225,7 @@ export default class WalletListDialog extends Component {
    - + {cardanoWalletsIdx.length > 0 && (

    {intl.formatMessage(messages.cardano)}

    @@ -277,34 +296,6 @@ export default class WalletListDialog extends Component { - - - - ); diff --git a/packages/yoroi-extension/app/components/topbar/WalletListDialog.scss b/packages/yoroi-extension/app/components/topbar/WalletListDialog.scss index ad15b6bf0b..0e65e3615b 100644 --- a/packages/yoroi-extension/app/components/topbar/WalletListDialog.scss +++ b/packages/yoroi-extension/app/components/topbar/WalletListDialog.scss @@ -1,21 +1,9 @@ .component { - font-size: 16px; - max-height: unset !important; - padding-right: 0 !important; - padding-bottom: 0px !important; - - & > div { - padding: 0px; - max-height: unset !important; - } - .header { position: sticky; top: 0px; background: var(--yoroi-comp-dialog-background); padding-bottom: 14px; - padding-top: 24px; - padding-left: 24px; } .totalInfo { @@ -44,7 +32,7 @@ } .sectionHeader { - color: #A7AFC0; + color: #a7afc0; font-size: 14px; margin-top: 26px; } @@ -56,4 +44,3 @@ overflow-y: auto; } } - diff --git a/packages/yoroi-extension/app/components/uri/URIDisplayDialog.js b/packages/yoroi-extension/app/components/uri/URIDisplayDialog.js index cf992d525a..c03914b132 100644 --- a/packages/yoroi-extension/app/components/uri/URIDisplayDialog.js +++ b/packages/yoroi-extension/app/components/uri/URIDisplayDialog.js @@ -1,21 +1,24 @@ // @flow import type { Node } from 'react'; -import { Component } from 'react'; +import type { Notification } from '../../types/notificationType'; +import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import classnames from 'classnames'; +import { Component } from 'react'; import { observer } from 'mobx-react'; import { intlShape, defineMessages } from 'react-intl'; import { buildURI } from '../../utils/URIHandling'; +import { ReactComponent as InfoIcon } from '../../assets/images/revamp/icons/info.inline.svg'; import Dialog from '../widgets/Dialog'; import DialogBackButton from '../widgets/DialogBackButton'; import DialogCloseButton from '../widgets/DialogCloseButton'; import QrCodeWrapper from '../widgets/QrCodeWrapper'; import WarningBox from '../widgets/WarningBox'; import CopyableAddress from '../widgets/CopyableAddress'; -import type { Notification } from '../../types/notificationType'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import BigNumber from 'bignumber.js'; import styles from './URIDisplayDialog.scss'; +import { Box, Typography } from '@mui/material'; +import globalMessages from '../../i18n/global-messages'; const messages = defineMessages({ uriDisplayDialogTitle: { @@ -28,8 +31,9 @@ const messages = defineMessages({ }, usabilityWarning: { id: 'uri.display.dialog.usabilityWarning', - defaultMessage: '!!!This link can only be opened by users with Yoroi installed on their browser', - } + defaultMessage: + '!!!This link can only be opened by users with Yoroi installed on their browser', + }, }); type Props = {| @@ -43,32 +47,18 @@ type Props = {| @observer export default class URIDisplayDialog extends Component { - - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { + static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; render(): Node { - const { - onClose, - onBack, - notification, - onCopyAddressTooltip, - address, - amount, - } = this.props; + const { onClose, onBack, notification, onCopyAddressTooltip, address, amount } = this.props; const { intl } = this.context; const uri = buildURI(address, amount); const uriNotificationId = 'uri-copyNotification'; - const uriUsabilityWarning = ( - - {intl.formatMessage(messages.usabilityWarning)} - - ); - return ( { onClose={onClose} backButton={} > - {uriUsabilityWarning} -
    - -
    -
    - onCopyAddressTooltip(uriNotificationId)} - notification={notification} - placementTooltip="bottom-start" + + - {uri} - -
    + + + + + + {intl.formatMessage(globalMessages.important)} + + + + {intl.formatMessage(messages.usabilityWarning)} + + +
    + +
    +
    + onCopyAddressTooltip(uriNotificationId)} + notification={notification} + placementTooltip="bottom-start" + sx={{ + alignItems: 'flex-start', + '& > .CopyableAddress_copyIconBig': { + p: '6px', + width: 'auto', + height: 'auto', + }, + }} + > + {uri} + +
    +     - ); } - } diff --git a/packages/yoroi-extension/app/components/uri/URIDisplayDialog.scss b/packages/yoroi-extension/app/components/uri/URIDisplayDialog.scss index 8b7083b8cc..053c5fd381 100644 --- a/packages/yoroi-extension/app/components/uri/URIDisplayDialog.scss +++ b/packages/yoroi-extension/app/components/uri/URIDisplayDialog.scss @@ -1,38 +1,27 @@ .component { - min-width: var(--yoroi-comp-dialog-min-width-lg) !important; - max-width: var(--yoroi-comp-dialog-min-width-lg) !important; - :global { .Dialog_title { margin-bottom: 24px; } - - .CopyableAddress_copyIconBig { - & > svg { - margin-top: -7px; - } - } } .uriDisplay { - width: 90%; margin-left: auto; margin-right: auto; - margin-bottom: 24px; display: flex; - align-items: center; + align-items: flex-start; .uri { font-weight: 400; word-break: break-all; font-size: 16px; line-height: 24px; - text-align: center; + text-align: left; } } .qrCode { - margin: 34px auto 20px auto; + margin: 24px auto; text-align: center; } } diff --git a/packages/yoroi-extension/app/components/wallet/receive/VerifyAddressDialog.js b/packages/yoroi-extension/app/components/wallet/receive/VerifyAddressDialog.js index f771c01bf2..0084df3a23 100644 --- a/packages/yoroi-extension/app/components/wallet/receive/VerifyAddressDialog.js +++ b/packages/yoroi-extension/app/components/wallet/receive/VerifyAddressDialog.js @@ -154,7 +154,7 @@ class VerifyAddressDialog extends Component { return ( <>
    - +


    diff --git a/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/RewardHistoryDialog.js b/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/RewardHistoryDialog.js index a232cf47d0..011dcf6bd5 100644 --- a/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/RewardHistoryDialog.js +++ b/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/RewardHistoryDialog.js @@ -17,7 +17,6 @@ import LoadingSpinner from '../../../widgets/LoadingSpinner'; import VerticallyCenteredLayout from '../../../layout/VerticallyCenteredLayout'; import LocalizableError from '../../../../i18n/LocalizableError'; import { groupByPoolName } from '../utils'; -import styles from './RewardHistoryDialog.scss'; const messages = defineMessages({ epoch: { @@ -53,49 +52,49 @@ function RewardHistoryDialog({ graphData, onClose, intl }: Props & Intl): Node { return ( } onClose={onClose} - className={styles.dialog} > - - {intl.formatMessage(globalMessages.rewardsListLabel)} ({rewardList.length}) - - - {graphData.rewardsGraphData.error && ( -
    -
    - -
    - -
    - )} - {rewardList == null ? ( - - - - ) : ( - Object.entries(rewardsByPoolName ?? {}).map(([poolName, data]) => ( - ({ - // TODO: Make sure it's "received" in all use cases - type: intl.formatMessage(messages.epoch, { number: item.name }), - date: item.date, - balance: item.primary, - currency: item.currency, - }))} - /> - )) - )} + + + {intl.formatMessage(globalMessages.rewardsListLabel)} ({rewardList.length}) + + + {graphData.rewardsGraphData.error && ( +
    +
    + +
    + +
    + )} + {rewardList == null ? ( + + + + ) : ( + Object.entries(rewardsByPoolName ?? {}).map(([poolName, data]) => ( + ({ + // TODO: Make sure it's "received" in all use cases + type: intl.formatMessage(messages.epoch, { number: item.name }), + date: item.date, + balance: item.primary, + currency: item.currency, + }))} + /> + )) + )} +     ); diff --git a/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/RewardHistoryDialog.scss b/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/RewardHistoryDialog.scss deleted file mode 100644 index f24bb23d7b..0000000000 --- a/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/RewardHistoryDialog.scss +++ /dev/null @@ -1,5 +0,0 @@ -.dialog { - & > h1.dialog__title { - margin-bottom: 26px; - } -} \ No newline at end of file diff --git a/packages/yoroi-extension/app/components/widgets/DangerousActionDialog.js b/packages/yoroi-extension/app/components/widgets/DangerousActionDialog.js index 65dbe7e26b..fd52157579 100644 --- a/packages/yoroi-extension/app/components/widgets/DangerousActionDialog.js +++ b/packages/yoroi-extension/app/components/widgets/DangerousActionDialog.js @@ -1,19 +1,19 @@ // @flow -import { Component } from 'react'; import type { Node, ComponentType } from 'react'; +import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; +import type { InjectedLayoutProps } from '../../styles/context/layout'; +import { Component } from 'react'; import { observer } from 'mobx-react'; -import classnames from 'classnames'; import { intlShape } from 'react-intl'; +import { withLayout } from '../../styles/context/layout'; +import { Box, FormControlLabel, Checkbox as MuiCheckbox } from '@mui/material'; +import classnames from 'classnames'; import DialogCloseButton from './DialogCloseButton'; -import ThemedDialog from './ThemedDialog'; +import Dialog from './Dialog'; import globalMessages from '../../i18n/global-messages'; import LocalizableError from '../../i18n/LocalizableError'; import CheckboxLabel from '../common/CheckboxLabel'; import styles from './DangerousActionDialog.scss'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import { withLayout } from '../../styles/context/layout'; -import type { InjectedLayoutProps } from '../../styles/context/layout'; -import { Box, FormControlLabel, Checkbox as MuiCheckbox } from '@mui/material'; type Props = {| +title: string, @@ -27,6 +27,7 @@ type Props = {| +primaryButton: {| +label: string, +onClick: void => PossiblyAsync, + +danger?: boolean, |}, +secondaryButton: {| label?: string, @@ -64,7 +65,7 @@ class DangerousActionDialog extends Component { primary: true, className: confirmButtonClasses, disabled: !this.props.isChecked ? true : undefined, - danger: true, + danger: this.props.primaryButton.danger ?? true, isSubmitting: this.props.isSubmitting, ...(this.props.primaryButton ?? Object.freeze({})), }, @@ -86,25 +87,19 @@ class DangerousActionDialog extends Component { ); const revampLayout = ( - + {this.props.children} - + } - sx={{ - marginLeft: '-0px', - }} + sx={{ marginLeft: '-0px' }} /> {error ?

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

    : null} @@ -117,7 +112,7 @@ class DangerousActionDialog extends Component { }); return ( - { closeButton={} > {content} - + ); } } diff --git a/packages/yoroi-extension/app/components/widgets/Dialog.js b/packages/yoroi-extension/app/components/widgets/Dialog.js index 8cbef684e5..14257a5026 100644 --- a/packages/yoroi-extension/app/components/widgets/Dialog.js +++ b/packages/yoroi-extension/app/components/widgets/Dialog.js @@ -19,6 +19,8 @@ export type ActionType = {| +isSubmitting?: boolean, +disabled?: boolean, +className?: ?string, + +id?: ?string, + +size?: ?string, |}; export type Props = {| @@ -78,6 +80,8 @@ function DialogFn(props: Props & InjectedProps): Node { }; }, [children]); + const hasActions = actions && actions.length > 0; + const hasCloseButton = withCloseButton || closeButton; const hasSubmitting = @@ -117,8 +121,15 @@ function DialogFn(props: Props & InjectedProps): Node { {title} ) : null} - {children != null ? {children} : null} - {actions && actions.length > 0 && ( + {children != null ? ( + + {children} + + ) : null} + {hasActions && ( {map(actions, (action, i: number) => { const buttonClasses = classnames([ @@ -128,13 +139,14 @@ function DialogFn(props: Props & InjectedProps): Node { ]); return ( {action.label} @@ -234,6 +246,7 @@ const ModalContent = styled(Box)(({ theme }) => ({ const ModalFooter = styled(Box)(({ theme, contentHasScroll }) => ({ display: 'flex', + gap: '24px', paddingLeft: theme.name === 'classic' ? '30px' : '24px', paddingRight: theme.name === 'classic' ? '30px' : '24px', paddingTop: theme.name === 'classic' || theme.name === 'modern' ? '0' : '24px', @@ -247,13 +260,7 @@ const ModalFooter = styled(Box)(({ theme, contentHasScroll }) => ({ : theme.palette.grayscale['200'], '& button': { width: '50%', - '&:only-child': { - margin: 'auto', - width: '100%', - }, - '& + button': { - marginLeft: '20px', - }, + '&:only-child': { width: '100%' }, }, })); diff --git a/packages/yoroi-extension/app/containers/settings/categories/ResyncWalletDialogContainer.js b/packages/yoroi-extension/app/containers/settings/categories/ResyncWalletDialogContainer.js index e41c482456..e16b9ba2c4 100644 --- a/packages/yoroi-extension/app/containers/settings/categories/ResyncWalletDialogContainer.js +++ b/packages/yoroi-extension/app/containers/settings/categories/ResyncWalletDialogContainer.js @@ -1,16 +1,14 @@ // @flow import type { Node } from 'react'; +import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; +import type { InjectedOrGenerated } from '../../../types/injectedPropsType'; import { Component } from 'react'; import { computed, action, observable } from 'mobx'; import { observer } from 'mobx-react'; import { defineMessages, intlShape } from 'react-intl'; -import globalMessages from '../../../i18n/global-messages'; import { messages } from '../../../components/wallet/settings/ResyncBlock'; import { PublicDeriver } from '../../../api/ada/lib/storage/models/PublicDeriver/index'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; - -import type { InjectedOrGenerated } from '../../../types/injectedPropsType'; - +import globalMessages from '../../../i18n/global-messages'; import DangerousActionDialog from '../../../components/widgets/DangerousActionDialog'; import LocalizableError from '../../../i18n/LocalizableError'; @@ -24,13 +22,14 @@ type Props = {| const dialogMessages = defineMessages({ warning: { id: 'wallet.settings.resync.warning', - defaultMessage: '!!!This will also cause failed transactions to disappear as they are not stored on the blockchain.', + defaultMessage: + '!!!This will also cause failed transactions to disappear as they are not stored on the blockchain.', }, }); @observer export default class ResyncWalletDialogContainer extends Component { - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { + static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; @@ -44,7 +43,7 @@ export default class ResyncWalletDialogContainer extends Component { toggleCheck: void => void = () => { if (this.generated.stores.walletSettings.clearHistory.isExecuting) return; this.isChecked = !this.isChecked; - } + }; render(): Node { const { intl } = this.context; @@ -60,16 +59,17 @@ export default class ResyncWalletDialogContainer extends Component { error={settingsStore.clearHistory.error} primaryButton={{ label: intl.formatMessage(globalMessages.resyncButtonLabel), + danger: false, onClick: async () => { await this.generated.actions.walletSettings.resyncHistory.trigger({ publicDeriver: this.props.publicDeriver, }); this.generated.actions.dialogs.closeActiveDialog.trigger(); - } + }, }} onCancel={this.generated.actions.dialogs.closeActiveDialog.trigger} secondaryButton={{ - onClick: this.generated.actions.dialogs.closeActiveDialog.trigger + onClick: this.generated.actions.dialogs.closeActiveDialog.trigger, }} >

    {intl.formatMessage(messages.resyncExplanation)}

    @@ -82,27 +82,27 @@ export default class ResyncWalletDialogContainer extends Component { actions: {| dialogs: {| closeActiveDialog: {| - trigger: (params: void) => void - |} + trigger: (params: void) => void, + |}, |}, walletSettings: {| resyncHistory: {| trigger: (params: {| - publicDeriver: PublicDeriver<> - |}) => Promise - |} - |} + publicDeriver: PublicDeriver<>, + |}) => Promise, + |}, + |}, |}, stores: {| walletSettings: {| clearHistory: {| error: ?LocalizableError, isExecuting: boolean, - reset: () => void - |} - |} - |} - |} { + reset: () => void, + |}, + |}, + |}, + |} { if (this.props.generated !== undefined) { return this.props.generated; } diff --git a/packages/yoroi-extension/app/containers/wallet/dialogs/RevampAnnouncementDialog.js b/packages/yoroi-extension/app/containers/wallet/dialogs/RevampAnnouncementDialog.js index 60dbdca202..898c136379 100644 --- a/packages/yoroi-extension/app/containers/wallet/dialogs/RevampAnnouncementDialog.js +++ b/packages/yoroi-extension/app/containers/wallet/dialogs/RevampAnnouncementDialog.js @@ -83,15 +83,7 @@ export class RevampAnnouncementDialog extends Component { closeButton={} actions={actions} > - + h1 { - margin-bottom: 25px !important; - } - - & > div { - padding: 0px 24px !important; - } - - & > div:nth-child(3) { - margin-top: 27px !important; - padding-left: 24px !important; - padding-right: 24px !important; - } + max-width: 648px !important; } diff --git a/packages/yoroi-extension/app/i18n/global-messages.js b/packages/yoroi-extension/app/i18n/global-messages.js index 2c5132610a..a1d723bbdb 100644 --- a/packages/yoroi-extension/app/i18n/global-messages.js +++ b/packages/yoroi-extension/app/i18n/global-messages.js @@ -84,6 +84,10 @@ const globalMessages: * = defineMessages({ id: 'wallet.nav.type.ledger', defaultMessage: '!!!Ledger wallet', }, + important: { + id: 'global.dialogs.important', + defaultMessage: '!!!Important', + }, fieldIsRequired: { id: 'global.errors.fieldIsRequired', defaultMessage: '!!!This field is required.', diff --git a/packages/yoroi-extension/app/i18n/locales/en-US.json b/packages/yoroi-extension/app/i18n/locales/en-US.json index c80cd1607a..ff4e808fa2 100644 --- a/packages/yoroi-extension/app/i18n/locales/en-US.json +++ b/packages/yoroi-extension/app/i18n/locales/en-US.json @@ -191,6 +191,7 @@ "global.language.spanish": "Español", "global.language.turkish": "Turkish", "global.language.vietnamese": "Vietnamese", + "global.dialogs.important": "Important", "global.ok": "Ok", "global.passwordInstructionsPaperWallet": "Note: Paper Wallet password needs to be at least 10 characters long.", "global.publicKey.explanation": "Public keys allow seeing the wallet history for the wallet, but does not allow to spend or move the funds in any way (private key is not included)", @@ -1074,4 +1075,4 @@ "yoroiTransfer.waiting.progressInfo.checkingAddresses": "Checking addresses funds", "yoroiTransfer.waiting.progressInfo.restoringAddresses": "Fetching addresses", "yoroiTransfer.waiting.title.label": "Wallet is being restored" -} \ No newline at end of file +} From 893cd5bb51d7fd03fca6a2598b014113a194e0f1 Mon Sep 17 00:00:00 2001 From: Patriciu Nista Date: Fri, 17 Nov 2023 14:37:14 +0100 Subject: [PATCH 6/6] fix eslint errors and old modals crashes --- .../app/components/topbar/WalletListDialog.js | 25 ++++++------ .../app/components/uri/URIDisplayDialog.js | 6 +-- .../wallet/receive/VerifyAddressDialog.js | 40 ++++++++----------- .../send/WalletSendFormSteps/AddNFTDialog.js | 26 ++++++------ .../WalletSendFormSteps/AddTokenDialog.js | 8 ++-- .../settings/ChangeWalletPasswordDialog.js | 2 +- .../app/components/widgets/Dialog.js | 5 +-- .../app/components/widgets/ThemedDialog.js | 6 +-- 8 files changed, 53 insertions(+), 65 deletions(-) diff --git a/packages/yoroi-extension/app/components/topbar/WalletListDialog.js b/packages/yoroi-extension/app/components/topbar/WalletListDialog.js index 3fc0d8dd72..de71fcc31d 100644 --- a/packages/yoroi-extension/app/components/topbar/WalletListDialog.js +++ b/packages/yoroi-extension/app/components/topbar/WalletListDialog.js @@ -1,27 +1,26 @@ // @flow -import { BigNumber } from 'bignumber.js'; import type { Node } from 'react'; +import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; +import type { TokenLookupKey } from '../../api/common/lib/MultiToken'; +import type { TokenRow } from '../../api/ada/lib/storage/database/primitives/tables'; +import type { UnitOfAccountSettingType } from '../../types/unitOfAccountType'; +import type { WalletsNavigation } from '../../api/localStorage'; +import { BigNumber } from 'bignumber.js'; import { Component } from 'react'; import { observer } from 'mobx-react'; import { defineMessages, intlShape } from 'react-intl'; -import Dialog from '../widgets/Dialog'; -import DialogCloseButton from '../widgets/DialogCloseButton'; -import styles from './WalletListDialog.scss'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import { ReactComponent as IconEyeOpen } from '../../assets/images/my-wallets/icon_eye_open.inline.svg'; import { ReactComponent as IconEyeClosed } from '../../assets/images/my-wallets/icon_eye_closed.inline.svg'; -import type { TokenLookupKey } from '../../api/common/lib/MultiToken'; -import type { TokenRow } from '../../api/ada/lib/storage/database/primitives/tables'; import { MultiToken } from '../../api/common/lib/MultiToken'; -import WalletCard from './WalletCard'; import { DragDropContext, Droppable } from 'react-beautiful-dnd'; -import globalMessages from '../../i18n/global-messages'; -import type { UnitOfAccountSettingType } from '../../types/unitOfAccountType'; -import AmountDisplay, { FiatDisplay } from '../common/AmountDisplay'; -import type { WalletsNavigation } from '../../api/localStorage'; -import { Button, Stack } from '@mui/material'; import { Box } from '@mui/system'; import { PublicDeriver } from '../../api/ada/lib/storage/models/PublicDeriver'; +import Dialog from '../widgets/Dialog'; +import DialogCloseButton from '../widgets/DialogCloseButton'; +import styles from './WalletListDialog.scss'; +import WalletCard from './WalletCard'; +import globalMessages from '../../i18n/global-messages'; +import AmountDisplay, { FiatDisplay } from '../common/AmountDisplay'; const messages = defineMessages({ addWallet: { diff --git a/packages/yoroi-extension/app/components/uri/URIDisplayDialog.js b/packages/yoroi-extension/app/components/uri/URIDisplayDialog.js index c03914b132..afd571598a 100644 --- a/packages/yoroi-extension/app/components/uri/URIDisplayDialog.js +++ b/packages/yoroi-extension/app/components/uri/URIDisplayDialog.js @@ -2,22 +2,20 @@ import type { Node } from 'react'; import type { Notification } from '../../types/notificationType'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import classnames from 'classnames'; import { Component } from 'react'; import { observer } from 'mobx-react'; import { intlShape, defineMessages } from 'react-intl'; import { buildURI } from '../../utils/URIHandling'; import { ReactComponent as InfoIcon } from '../../assets/images/revamp/icons/info.inline.svg'; +import { Box, Typography } from '@mui/material'; +import classnames from 'classnames'; import Dialog from '../widgets/Dialog'; import DialogBackButton from '../widgets/DialogBackButton'; import DialogCloseButton from '../widgets/DialogCloseButton'; import QrCodeWrapper from '../widgets/QrCodeWrapper'; -import WarningBox from '../widgets/WarningBox'; import CopyableAddress from '../widgets/CopyableAddress'; import BigNumber from 'bignumber.js'; - import styles from './URIDisplayDialog.scss'; -import { Box, Typography } from '@mui/material'; import globalMessages from '../../i18n/global-messages'; const messages = defineMessages({ diff --git a/packages/yoroi-extension/app/components/wallet/receive/VerifyAddressDialog.js b/packages/yoroi-extension/app/components/wallet/receive/VerifyAddressDialog.js index 0084df3a23..3f61fcb899 100644 --- a/packages/yoroi-extension/app/components/wallet/receive/VerifyAddressDialog.js +++ b/packages/yoroi-extension/app/components/wallet/receive/VerifyAddressDialog.js @@ -3,30 +3,18 @@ /* eslint react/jsx-one-expression-per-line: 0 */ // the   in the html breaks this import type { Node, ComponentType } from 'react'; +import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; +import type { Notification } from '../../../types/notificationType'; +import type { StandardAddress } from '../../../types/AddressFilterTypes'; +import type { Addressing } from '../../../api/ada/lib/storage/models/PublicDeriver/interfaces'; +import type { ComplexityLevelType } from '../../../types/complexityLevelType'; +import type { InjectedLayoutProps } from '../../../styles/context/layout'; import { Component } from 'react'; import { observer } from 'mobx-react'; -import classnames from 'classnames'; import { defineMessages, intlShape } from 'react-intl'; import { toDerivationPathString } from '../../../api/common/lib/crypto/keys/path'; - -import QrCodeWrapper from '../../widgets/QrCodeWrapper'; -import DialogClassic from '../../widgets/Dialog'; -import DialogRevamp from '../../widgets/DialogRevamp'; -import DialogCloseButton from '../../widgets/DialogCloseButton'; -import ErrorBlock from '../../widgets/ErrorBlock'; -import RawHash from '../../widgets/hashWrappers/RawHash'; -import ExplorableHashContainer from '../../../containers/widgets/ExplorableHashContainer'; import { SelectedExplorer } from '../../../domain/SelectedExplorer'; - -import LocalizableError from '../../../i18n/LocalizableError'; -import globalMessages from '../../../i18n/global-messages'; -import styles from './VerifyAddressDialog.scss'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import { truncateAddress } from '../../../utils/formatters'; -import CopyableAddress from '../../widgets/CopyableAddress'; -import type { Notification } from '../../../types/notificationType'; -import type { StandardAddress } from '../../../types/AddressFilterTypes'; -import type { Addressing } from '../../../api/ada/lib/storage/models/PublicDeriver/interfaces'; import { CoreAddressTypes } from '../../../api/ada/lib/storage/database/primitives/enums'; import { RustModule } from '../../../api/ada/lib/cardanoCrypto/rustLoader'; import { @@ -34,10 +22,19 @@ import { getCardanoSpendingKeyHash, normalizeToAddress, } from '../../../api/ada/lib/storage/bridge/utils'; -import type { ComplexityLevelType } from '../../../types/complexityLevelType'; import { ComplexityLevels } from '../../../types/complexityLevelType'; import { withLayout } from '../../../styles/context/layout'; -import type { InjectedLayoutProps } from '../../../styles/context/layout'; +import classnames from 'classnames'; +import QrCodeWrapper from '../../widgets/QrCodeWrapper'; +import Dialog from '../../widgets/Dialog'; +import DialogCloseButton from '../../widgets/DialogCloseButton'; +import ErrorBlock from '../../widgets/ErrorBlock'; +import RawHash from '../../widgets/hashWrappers/RawHash'; +import ExplorableHashContainer from '../../../containers/widgets/ExplorableHashContainer'; +import LocalizableError from '../../../i18n/LocalizableError'; +import globalMessages from '../../../i18n/global-messages'; +import styles from './VerifyAddressDialog.scss'; +import CopyableAddress from '../../widgets/CopyableAddress'; const messages = defineMessages({ addressDetailsTitleLabel: { @@ -78,7 +75,6 @@ class VerifyAddressDialog extends Component { render(): Node { const { intl } = this.context; - const { isRevampLayout } = this.props; const dialogActions = !this.props.isHardware ? [] @@ -91,8 +87,6 @@ class VerifyAddressDialog extends Component { }, ]; - const Dialog = isRevampLayout ? DialogClassic : DialogRevamp; - return ( void, diff --git a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddTokenDialog.js b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddTokenDialog.js index 8d998d03b6..4aa1235546 100644 --- a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddTokenDialog.js +++ b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AddTokenDialog.js @@ -14,27 +14,27 @@ import { Component } from 'react'; import { observer } from 'mobx-react'; import { defineMessages, intlShape } from 'react-intl'; import { MultiToken } from '../../../../api/common/lib/MultiToken'; -import { Button, Typography } from '@mui/material'; +import { Typography } from '@mui/material'; import { isCardanoHaskell } from '../../../../api/ada/lib/storage/database/prepackaged/networks'; import { compareNumbers, compareStrings } from '../../assets/AssetsList'; import { getTokens } from '../../../../utils/wallet'; import { Box } from '@mui/system'; import { formattedAmountToNaturalUnits } from '../../../../utils/formatters'; -import Dialog from '../../../widgets/Dialog'; -import styles from './AddTokenDialog.scss'; import { ReactComponent as SearchIcon } from '../../../../assets/images/assets-page/search.inline.svg'; import { ReactComponent as ArrowsListFromBottom } from '../../../../assets/images/assets-page/arrows-list-from-bottom.inline.svg'; import { ReactComponent as ArrowsListFromTop } from '../../../../assets/images/assets-page/arrows-list-from-top.inline.svg'; import { ReactComponent as InfoIcon } from '../../../../assets/images/revamp/fingerprint-info.inline.svg'; import { ReactComponent as ArrowsList } from '../../../../assets/images/assets-page/arrows-list.inline.svg'; import { ReactComponent as NoItemsFoundImg } from '../../../../assets/images/assets-page/no-tokens.inline.svg'; +import { ampli } from '../../../../../ampli/index'; +import Dialog from '../../../widgets/Dialog'; +import styles from './AddTokenDialog.scss'; import SingleTokenRow from './SingleTokenRow'; import BigNumber from 'bignumber.js'; import MinAda from './MinAda'; import globalMessages from '../../../../i18n/global-messages'; import MaxAssetsError from '../MaxAssetsError'; import OutlinedInput from '@mui/material/OutlinedInput'; -import { ampli } from '../../../../../ampli/index'; type Props = {| +onClose: void => void, diff --git a/packages/yoroi-extension/app/components/wallet/settings/ChangeWalletPasswordDialog.js b/packages/yoroi-extension/app/components/wallet/settings/ChangeWalletPasswordDialog.js index 0edc9b8df2..97d7e229f9 100644 --- a/packages/yoroi-extension/app/components/wallet/settings/ChangeWalletPasswordDialog.js +++ b/packages/yoroi-extension/app/components/wallet/settings/ChangeWalletPasswordDialog.js @@ -140,7 +140,7 @@ export default class ChangeWalletPasswordDialog extends Component { render(): Node { const { form } = this; const { intl } = this.context; - const { onCancel, isSubmitting, dialogData, error, isClassicTheme, isRevampTheme } = this.props; + const { onCancel, isSubmitting, dialogData, error, isClassicTheme } = this.props; const dialogClasses = classnames(['changePasswordDialog', styles.dialog]); diff --git a/packages/yoroi-extension/app/components/widgets/Dialog.js b/packages/yoroi-extension/app/components/widgets/Dialog.js index 14257a5026..a6b36532eb 100644 --- a/packages/yoroi-extension/app/components/widgets/Dialog.js +++ b/packages/yoroi-extension/app/components/widgets/Dialog.js @@ -1,7 +1,7 @@ /* eslint-disable no-nested-ternary */ // @flow import type { Node, Element, ComponentType } from 'react'; -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import classnames from 'classnames'; import { map } from 'lodash'; import { IconButton, Modal, Typography, alpha } from '@mui/material'; @@ -55,7 +55,6 @@ function DialogFn(props: Props & InjectedProps): Node { isRevampLayout, } = props; - const hasScroll = useRef(null); const [contentHasScroll, setContentHasScroll] = useState(false); useEffect(() => { @@ -206,7 +205,7 @@ const ModalContainer = styled(Box)(({ theme, contentHasScroll }) => ({ : '648px', borderRadius: theme.name === 'classic' ? 0 : 8, paddingTop: theme.name === 'classic' ? '25px' : '0px', - paddingBottom: theme.name === 'classic' ? '30px' : '0px', + paddingBottom: theme.name === 'classic' || theme.name === 'modern' ? '30px' : '0px', maxWidth: theme.name === 'classic' ? '785px' : '824px', backgroundColor: 'var(--yoroi-comp-dialog-background)', color: 'var(--yoroi-comp-dialog-text)', diff --git a/packages/yoroi-extension/app/components/widgets/ThemedDialog.js b/packages/yoroi-extension/app/components/widgets/ThemedDialog.js index a64f478204..d2d024c667 100644 --- a/packages/yoroi-extension/app/components/widgets/ThemedDialog.js +++ b/packages/yoroi-extension/app/components/widgets/ThemedDialog.js @@ -4,13 +4,11 @@ import type { Node, ComponentType } from 'react'; import type { Props } from './Dialog'; import { withLayout } from '../../styles/context/layout'; import type { InjectedLayoutProps } from '../../styles/context/layout'; -import DialogClassic from './Dialog'; -import DialogRevamp from './DialogRevamp'; +import Dialog from './Dialog'; class ThemedDialog extends Component { render(): Node { const { - isRevampLayout, children, title, actions, @@ -20,7 +18,6 @@ class ThemedDialog extends Component { closeButton, backButton, } = this.props; - const Dialog = DialogClassic; const dialogProps = { title, @@ -31,6 +28,7 @@ class ThemedDialog extends Component { className, backButton, }; + return {children}; } }