Skip to content

Commit

Permalink
Merge pull request #3349 from Emurgo/fix/YOEXT-836/revamp-modal-dialo…
Browse files Browse the repository at this point in the history 
…g-fixes

fix(ds): revamp modal dialog fixes
  • Loading branch information
@vsubhuman
vsubhuman authored Nov 17, 2023
2 parents abeff81 + 893cd5b commit 34bd4d2
Show file tree
Hide file tree
Showing 36 changed files with 415 additions and 475 deletions.
5 changes: 5 additions & 0 deletions packages/yoroi-extension/app/assets/images/revamp/icons/info.inline.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
87 changes: 41 additions & 46 deletions packages/yoroi-extension/app/components/buySell/BuySellDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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',
Expand All @@ -39,14 +42,15 @@ export type WalletInfo = {|
walletName: string,
currencyName: string,
anAddressFormatted: string,
|}
|};

type Props = {|
+onCancel: void => void,
+genWalletList: () => Promise<Array<WalletInfo>>
+genWalletList: () => Promise<Array<WalletInfo>>,
|};

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,
Expand All @@ -55,7 +59,7 @@ type State = {|

@observer
export default class BuySellDialog extends Component<Props, State> {
static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
intl: intlShape.isRequired,
};

Expand All @@ -64,41 +68,38 @@ export default class BuySellDialog extends Component<Props, State> {
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<WalletInfo>) => Node = (intl, wallets) => (
createRows: ($npm$ReactIntl$IntlFormat, Array<WalletInfo>) => Node = (intl, wallets) =>
wallets.map((wallet, i) => {
return (
// eslint-disable-next-line react/no-array-index-key
<div key={i} className={styles.row}>
<div className={styles.left}>
<div className={styles.nameAndCurrency}>
{ wallet.currencyName ? `(${wallet.currencyName}) ` : ''}{wallet.walletName}
</div>
<div className={styles.address}>
{truncateAddress(wallet.anAddressFormatted)}
{wallet.currencyName ? `(${wallet.currencyName}) ` : ''}
{wallet.walletName}
</div>
<div className={styles.address}>{truncateAddress(wallet.anAddressFormatted)}</div>
</div>
<div className={styles.right}>
{/* Verify Address action */}
<button
type="button"
onClick={() =>
this.setState({ addressSelected: wallet.anAddressFormatted })
}
onClick={() => this.setState({ addressSelected: wallet.anAddressFormatted })}
>
<div>
<span className={styles.verifyIcon}>
Expand All @@ -109,9 +110,8 @@ export default class BuySellDialog extends Component<Props, State> {
{/* Action block end */}
</div>
</div>
)
})
)
);
});

render(): Node {
const { intl } = this.context;
Expand All @@ -137,32 +137,27 @@ export default class BuySellDialog extends Component<Props, State> {
closeOnOverlayClick={false}
onClose={this.props.onCancel}
closeButton={<DialogCloseButton />}
className=""
>
<div className={styles.content}>
{intl.formatMessage(messages.dialogSelectAddress)}
<Box mb="24px">{intl.formatMessage(messages.dialogSelectAddress)}</Box>
{addressNodes}
</div>
</Dialog>
)
}

return (
<Dialog
title={intl.formatMessage(messages.dialogTitle)}
closeOnOverlayClick={false}
onClose={this.props.onCancel}
closeButton={<DialogCloseButton />}
className=""
>
<div className={styles.component}>
<div className={styles.description}>
{intl.formatMessage(messages.dialogDescription)}
</div>
<ChangellyFetcher widgetURL={WIDGET_URL} address={this.state.addressSelected} />
</div>
</Dialog>
);
}

return (
<Dialog
title={intl.formatMessage(messages.dialogTitle)}
closeOnOverlayClick={false}
onClose={this.props.onCancel}
closeButton={<DialogCloseButton />}
>
<div className={styles.component}>
<div className={styles.description}>{intl.formatMessage(messages.dialogDescription)}</div>
<ChangellyFetcher widgetURL={WIDGET_URL} address={this.state.addressSelected} />
</div>
</Dialog>
);
}
}
19 changes: 5 additions & 14 deletions packages/yoroi-extension/app/components/buySell/BuySellDialog.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
padding-left: 40px;
padding-right: 40px;
max-height: 600px;
max-width: 600px;

.description {
color: var(--yoroi-palette-gray-900);
Expand All @@ -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;
Expand All @@ -44,15 +44,6 @@
line-height: 22px;
}
}
.right {
flex: 1;
width: 40px;
height: 40px;
}
}

.row:first-child {
margin-top: 40px;
}

.verifyIcon {
Expand Down
84 changes: 34 additions & 50 deletions packages/yoroi-extension/app/components/topbar/WalletListDialog.js
View file
Original file line number Diff line number Diff line change
@@ -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 DialogRevamp from '../widgets/DialogRevamp';
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: {
Expand Down Expand Up @@ -185,12 +184,31 @@ export default class WalletListDialog extends Component<Props, State> {
const walletsTotal = this.renderWalletsTotal();

return (
<DialogRevamp
<Dialog
className={styles.component}
title={intl.formatMessage(globalMessages.changeWallet)}
closeOnOverlayClick
closeButton={<DialogCloseButton />}
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"
>
<Box>
<div className={styles.header}>
Expand All @@ -206,7 +224,7 @@ export default class WalletListDialog extends Component<Props, State> {
</button>
</div>
</div>
<Box sx={{ overflow: 'auto', overflowY: 'auto', paddingX: '40px', height: '400px' }}>
<Box className="WalletList" sx={{ overflow: 'auto', overflowY: 'auto', height: '400px' }}>
{cardanoWalletsIdx.length > 0 && (
<div className={styles.sectionHeader}>
<h1>{intl.formatMessage(messages.cardano)}</h1>
Expand Down Expand Up @@ -277,42 +295,8 @@ export default class WalletListDialog extends Component<Props, State> {
</Droppable>
</DragDropContext>
</Box>
<Stack
spacing={1}
direction="row"
sx={{
alignItems: 'center',
justifyContent: 'center',
padding: '40px',
borderTop: '1px solid var(--yoroi-palette-gray-100)',
}}
>
<Button
id="addWalletButton"
onClick={onAddWallet}
size="large"
variant="outlined"
color="primary"
fullWidth
>
{intl.formatMessage(messages.addWallet)}
</Button>
<Button
id="applyWalletButton"
onClick={this.onSelect}
size="large"
disabled={
this.state.selectedWallet === null ||
this.isCurrentWallet(this.state.selectedWallet, 'global')
}
fullWidth
variant="primary"
>
{intl.formatMessage(messages.applyWallet)}
</Button>
</Stack>
</Box>
</DialogRevamp>
</Dialog>
);
}

Expand Down
19 changes: 1 addition & 18 deletions packages/yoroi-extension/app/components/topbar/WalletListDialog.scss
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,9 @@
.component {
font-size: 16px;
min-width: 675px !important;
height: 700px;
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: 14px;
padding-left: 40px;

}

.totalInfo {
Expand Down Expand Up @@ -48,7 +32,7 @@
}

.sectionHeader {
color: #A7AFC0;
color: #a7afc0;
font-size: 14px;
margin-top: 26px;
}
Expand All @@ -60,4 +44,3 @@
overflow-y: auto;
}
}

Loading

0 comments on commit 34bd4d2

Please sign in to comment.