Skip to content

Commit

Permalink
[DDW-861] Token list redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
@renanvalentin @lucas-barros
renanvalentin authored and lucas-barros committed Jan 10, 2022
1 parent e524733 commit dcc05fb
Show file tree
Hide file tree
Showing 4 changed files with 153 additions and 266 deletions.
3 changes: 3 additions & 0 deletions source/renderer/app/assets/images/remove.inline.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 0 additions & 30 deletions source/renderer/app/components/wallet/WalletSendForm.js
View file
Expand Up @@ -81,7 +81,6 @@ type State = {
feeCalculationRequestQue: number,
transactionFee: BigNumber,
transactionFeeError: ?string | ?Node,
showRemoveAssetButton: { [uniqueId: string]: boolean },
selectedAssetUniqueIds: Array<string>,
isResetButtonDisabled: boolean,
isReceiverAddressValid: boolean,
Expand All @@ -100,7 +99,6 @@ export default class WalletSendForm extends Component<Props, State> {
feeCalculationRequestQue: 0,
transactionFee: new BigNumber(0),
transactionFeeError: null,
showRemoveAssetButton: {},
selectedAssetUniqueIds: [],
isResetButtonDisabled: true,
isReceiverAddressValid: false,
Expand Down Expand Up @@ -226,7 +224,6 @@ export default class WalletSendForm extends Component<Props, State> {

this.setState({
minimumAda: new BigNumber(0),
showRemoveAssetButton: {},
isResetButtonDisabled: true,
});
};
Expand Down Expand Up @@ -535,22 +532,6 @@ export default class WalletSendForm extends Component<Props, State> {
}
}

showRemoveAssetButton = (uniqueId: string) => {
const { showRemoveAssetButton } = this.state;
showRemoveAssetButton[uniqueId] = true;
this.setState({
showRemoveAssetButton,
});
};

hideRemoveAssetButton = (uniqueId: string) => {
const { showRemoveAssetButton } = this.state;
showRemoveAssetButton[uniqueId] = false;
this.setState({
showRemoveAssetButton,
});
};

addAssetRow = (uniqueId: string) => {
this.addAssetFields(uniqueId);
this.updateFormFields(false, uniqueId);
Expand Down Expand Up @@ -686,7 +667,6 @@ export default class WalletSendForm extends Component<Props, State> {
adaAmount: adaAmountField,
receiver: receiverField,
assetFields,
assetsDropdown,
} = formFields.receiver;

const assetsSeparatorBasicHeight = 140;
Expand Down Expand Up @@ -836,22 +816,12 @@ export default class WalletSendForm extends Component<Props, State> {
uniqueId={uniqueId}
index={index}
getAssetByUniqueId={this.getAssetByUniqueId}
availableAssets={this.availableAssets}
assetFields={assetFields}
assetsDropdown={assetsDropdown}
addFocusableField={this.addFocusableField}
removeAssetButtonVisible={
this.state.showRemoveAssetButton
}
showRemoveAssetButton={this.showRemoveAssetButton}
hideRemoveAssetButton={this.hideRemoveAssetButton}
currentNumberFormat={this.getCurrentNumberFormat()}
removeAssetRow={this.removeAssetRow}
handleSubmitOnEnter={this.handleSubmitOnEnter}
clearAssetFieldValue={this.clearAssetFieldValue}
onChangeAsset={(newUniqueId) =>
this.onChangeAsset(uniqueId, newUniqueId)
}
autoFocus={this._isAutoFocusEnabled}
/>
)
Expand Down
213 changes: 89 additions & 124 deletions source/renderer/app/components/wallet/send-form/AssetInput.js
View file
Expand Up @@ -3,40 +3,31 @@ import React, { Component } from 'react';
import { observer } from 'mobx-react';
import type { Field } from 'mobx-react-form';
import { intlShape } from 'react-intl';
import { get, orderBy } from 'lodash';
import { get } from 'lodash';
import classNames from 'classnames';
import SVGInline from 'react-svg-inline';
import { NumericInput } from 'react-polymorph/lib/components/NumericInput';
import { PopOver } from 'react-polymorph/lib/components/PopOver';
import AmountInputSkin from '../skins/AmountInputSkin';
import AssetsDropdown from '../../widgets/forms/AssetsDropdown';
import closeIcon from '../../../assets/images/close-cross.inline.svg';
import removeIcon from '../../../assets/images/remove.inline.svg';
import type { NumberFormat } from '../../../../../common/types/number.types';
import type { AssetToken } from '../../../api/assets/types';
import { DiscreetTokenWalletAmount } from '../../../features/discreet-mode';
import Asset from '../../assets/Asset';
import styles from './AssetInput.scss';
import messages from './messages';

type Props = {
uniqueId: string,
index: number,
getAssetByUniqueId: Function,
availableAssets: Array<AssetToken>,
assetFields: {
[uniqueId: string]: Field,
},
assetsDropdown: {
[uniqueId: string]: Field,
},
addFocusableField: Function,
removeAssetButtonVisible: { [uniqueId: string]: boolean },
showRemoveAssetButton: Function,
hideRemoveAssetButton: Function,
currentNumberFormat: NumberFormat,
removeAssetRow: Function,
handleSubmitOnEnter: Function,
clearAssetFieldValue: Function,
onChangeAsset: Function,
autoFocus: boolean,
};

Expand Down Expand Up @@ -78,20 +69,13 @@ export default class AssetInput extends Component<Props> {
const { intl } = this.context;
const {
uniqueId,
index,
getAssetByUniqueId,
availableAssets,
assetFields,
assetsDropdown,
addFocusableField,
removeAssetButtonVisible,
showRemoveAssetButton,
hideRemoveAssetButton,
currentNumberFormat,
removeAssetRow,
handleSubmitOnEnter,
clearAssetFieldValue,
onChangeAsset,
autoFocus,
} = this.props;
const asset = getAssetByUniqueId(uniqueId);
Expand All @@ -101,119 +85,100 @@ export default class AssetInput extends Component<Props> {

const { quantity, metadata, decimals } = asset;
const ticker = get(metadata, 'ticker', null);
const sortedAssets = orderBy(
[asset, ...availableAssets],
'uniqueId',
'asc'
);
const assetField = assetFields[uniqueId];
const assetsDropdownField = assetsDropdown[uniqueId];
const inputFieldStyle = this.generateInputFieldStyle();

return (
<div
key={`receiver_asset_${uniqueId}`}
onMouseOver={() => showRemoveAssetButton(uniqueId)}
onMouseLeave={() => hideRemoveAssetButton(uniqueId)}
onMouseEnter={() => showRemoveAssetButton(uniqueId)}
onFocus={() => {
// jsx-a11y/mouse-events-have-key-events
}}
className={styles.component}
>
{quantity.isPositive() && (
<div className={styles.amountTokenTotal}>
{intl.formatMessage(messages.ofLabel)}
{` `}
<DiscreetTokenWalletAmount
amount={quantity}
metadata={metadata}
decimals={decimals}
/>
</div>
)}
<NumericInput
{...assetField.bind()}
ref={(field) => addFocusableField(field)}
placeholder={
decimals
? `0${currentNumberFormat.decimalSeparator}${'0'.repeat(
decimals
)}`
: '0'
}
className={styles.assetItem}
label={
<>
{`${intl.formatMessage(messages.assetLabel)} #${index + 1}`}
{removeAssetButtonVisible[uniqueId] && (
<span
className={classNames([styles.removeAssetButton, 'flat'])}
onClick={() => removeAssetRow(uniqueId)}
>
{intl.formatMessage(messages.removeLabel)}
</span>
)}
</>
}
bigNumberFormat={decimals ? currentNumberFormat : null}
decimalPlaces={decimals}
numberLocaleOptions={{
minimumFractionDigits: decimals,
}}
onChange={(value) => {
assetField.onChange(value);
}}
currency={ticker}
value={assetField.value}
error={assetField.error}
skin={AmountInputSkin}
style={inputFieldStyle}
onKeyPress={(evt: SyntheticKeyboardEvent<EventTarget>) => {
if (decimals === 0) {
const { charCode } = evt;
if (charCode === 190 || charCode === 110 || charCode === 46) {
evt.persist();
evt.preventDefault();
evt.stopPropagation();
}
}
handleSubmitOnEnter(evt);
}}
allowSigns={false}
autoFocus={autoFocus}
/>
<div className={styles.rightContent} ref={this.rightContentRef}>
{this.hasAssetValue(assetField) && (
<div className={styles.clearAssetContainer}>
<PopOver
content={intl.formatMessage(messages.clearLabel)}
placement="top"
>
<button
onClick={() => clearAssetFieldValue(assetField)}
className={styles.clearAssetButton}
>
<SVGInline
svg={closeIcon}
className={styles.clearReceiverIcon}
/>
</button>
</PopOver>
<div className={styles.separator} />
<div key={`receiver_asset_${uniqueId}`} className={styles.component}>
<div className={styles.inputBlock}>
{quantity.isPositive() && (
<div className={styles.amountTokenTotal}>
{intl.formatMessage(messages.ofLabel)}
{` `}
<DiscreetTokenWalletAmount
amount={quantity}
metadata={metadata}
decimals={decimals}
/>
</div>
)}
<div className={styles.assetsDropdownWrapper}>
<AssetsDropdown
className={styles.assetsDropdown}
{...assetsDropdownField.bind()}
assets={sortedAssets}
onChange={onChangeAsset}
value={uniqueId}
hasSearch
/>
<NumericInput
{...assetField.bind()}
ref={(field) => addFocusableField(field)}
placeholder={
decimals
? `0${currentNumberFormat.decimalSeparator}${'0'.repeat(
decimals
)}`
: '0'
}
className={styles.assetItem}
label={
<Asset
asset={asset}
className={styles.assetToken}
hidePopOver
small
/>
}
bigNumberFormat={decimals ? currentNumberFormat : null}
decimalPlaces={decimals}
numberLocaleOptions={{
minimumFractionDigits: decimals,
}}
onChange={(value) => {
assetField.onChange(value);
}}
currency={ticker}
value={assetField.value}
error={assetField.error}
skin={AmountInputSkin}
style={inputFieldStyle}
onKeyPress={(evt: SyntheticKeyboardEvent<EventTarget>) => {
if (decimals === 0) {
const { charCode } = evt;
if (charCode === 190 || charCode === 110 || charCode === 46) {
evt.persist();
evt.preventDefault();
evt.stopPropagation();
}
}
handleSubmitOnEnter(evt);
}}
allowSigns={false}
autoFocus={autoFocus}
/>
<div className={styles.rightContent} ref={this.rightContentRef}>
{this.hasAssetValue(assetField) && (
<div className={styles.clearAssetContainer}>
<PopOver
content={intl.formatMessage(messages.clearLabel)}
placement="top"
>
<button
onClick={() => clearAssetFieldValue(assetField)}
className={styles.clearAssetButton}
>
<SVGInline
svg={closeIcon}
className={styles.clearReceiverIcon}
/>
</button>
</PopOver>
<div className={styles.separator} />
</div>
)}
{ticker ? <span className={styles.ticker}>{ticker}</span> : null}
</div>
</div>
<div className={styles.removeAssetBlock}>
<span
className={classNames([styles.removeAssetButton, 'flat'])}
onClick={() => removeAssetRow(uniqueId)}
>
<SVGInline svg={removeIcon} className={styles.removeIcon} />
</span>
</div>
</div>
);
}
Expand Down

0 comments on commit dcc05fb

Please sign in to comment.