crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use flexbox for wrapped ether item

Browse Source
This commit is contained in:
Brandon Millman 2018-05-21 21:15:41 -07:00
parent ed8acdb11c
commit 130e83d9b2
1 changed files with 29 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
packages/website/ts/components/wallet/wrap_ether_item.tsx
View File

@ -37,7 +37,10 @@ interface WrapEtherItemState {
} }
const styles: Styles = { const styles: Styles = {
topLabel: { color: colors.black, fontSize: 11 }, topLabel: {
color: colors.black,
fontSize: 11,
},
inputContainer: { inputContainer: {
backgroundColor: colors.white, backgroundColor: colors.white,
borderBottomRightRadius: 3, borderBottomRightRadius: 3,
@ -45,9 +48,10 @@ const styles: Styles = {
borderTopRightRadius: 3, borderTopRightRadius: 3,
borderTopLeftRadius: 3, borderTopLeftRadius: 3,
padding: 4, padding: 4,
width: 125,
}, },
amountInput: { height: 34 }, amountInput: {
height: 34,
},
amountInputLabel: { amountInputLabel: {
paddingTop: 10, paddingTop: 10,
paddingRight: 10, paddingRight: 10,
@ -58,8 +62,6 @@ const styles: Styles = {
amountInputHint: { amountInputHint: {
bottom: 18, bottom: 18,
}, },
innerDiv: { paddingLeft: 60, paddingTop: 0, paddingBottom: 10 },
wrapEtherConfirmationButtonContainer: { width: 128, top: 19 },
wrapEtherConfirmationButtonLabel: { wrapEtherConfirmationButtonLabel: {
fontSize: 12, fontSize: 12,
color: colors.white, color: colors.white,
@ -70,6 +72,12 @@ const styles: Styles = {
color: colors.red, color: colors.red,
minHeight: 20, minHeight: 20,
}, },
conversionSpinner: {
paddingTop: 26,
},
conversionSpinnerPlaceholder: {
width: 61,
},
}; };
export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEtherItemState> { export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEtherItemState> {
@ -85,11 +93,13 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
const etherBalanceInEth = ZeroEx.toUnitAmount(this.props.userEtherBalanceInWei, constants.DECIMAL_PLACES_ETH); const etherBalanceInEth = ZeroEx.toUnitAmount(this.props.userEtherBalanceInWei, constants.DECIMAL_PLACES_ETH);
const isWrappingEth = this.props.direction === Side.Deposit; const isWrappingEth = this.props.direction === Side.Deposit;
const topLabelText = isWrappingEth ? 'Convert ETH into WETH 1:1' : 'Convert WETH into ETH 1:1'; const topLabelText = isWrappingEth ? 'Convert ETH into WETH 1:1' : 'Convert WETH into ETH 1:1';
return ( return (
<ListItem <div className="flex" style={walletItemStyles.focusedItem}>
primaryText={ <div>{this._renderIsEthConversionHappeningSpinner()} </div>
<div> <div className="flex flex-column">
<div style={styles.topLabel}>{topLabelText}</div> <div style={styles.topLabel}>{topLabelText}</div>
<div className="flex items-center">
<div style={styles.inputContainer}> <div style={styles.inputContainer}>
{isWrappingEth ? ( {isWrappingEth ? (
<EthAmountInput <EthAmountInput
@ -128,16 +138,12 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
/> />
)} )}
</div> </div>
{this._renderErrorMsg()} <div>{this._renderWrapEtherConfirmationButton()}</div>
</div> </div>
}
secondaryTextLines={2} {this._renderErrorMsg()}
disableTouchRipple={true} </div>
style={walletItemStyles.focusedItem} </div>
innerDivStyle={styles.innerDiv}
leftIcon={this._renderIsEthConversionHappeningSpinner()}
rightAvatar={this._renderWrapEtherConfirmationButton()}
/>
); );
} }
private _onValueChange(isValid: boolean, amount?: BigNumber): void { private _onValueChange(isValid: boolean, amount?: BigNumber): void {
@ -152,16 +158,18 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
} }
private _renderIsEthConversionHappeningSpinner(): React.ReactElement<{}> { private _renderIsEthConversionHappeningSpinner(): React.ReactElement<{}> {
return this.state.isEthConversionHappening ? ( return this.state.isEthConversionHappening ? (
<div className="pl1" style={{ paddingTop: 10 }}> <div className="pl3 pr2" style={styles.conversionSpinner}>
<i className="zmdi zmdi-spinner zmdi-hc-spin" /> <i className="zmdi zmdi-spinner zmdi-hc-spin" />
</div> </div>
) : null; ) : (
<div style={styles.conversionSpinnerPlaceholder} />
);
} }
private _renderWrapEtherConfirmationButton(): React.ReactElement<{}> { private _renderWrapEtherConfirmationButton(): React.ReactElement<{}> {
const isWrappingEth = this.props.direction === Side.Deposit; const isWrappingEth = this.props.direction === Side.Deposit;
const labelText = isWrappingEth ? 'wrap' : 'unwrap'; const labelText = isWrappingEth ? 'wrap' : 'unwrap';
return ( return (
<div style={styles.wrapEtherConfirmationButtonContainer}> <div className="pl1 pr3">
<FlatButton <FlatButton
backgroundColor={colors.wrapEtherConfirmationButton} backgroundColor={colors.wrapEtherConfirmationButton}
label={labelText} label={labelText}