fix: show correct shapeshift currency amount

This commit is contained in:
Sean Yesmunt 2018-04-05 21:56:05 -04:00
parent ae5858d656
commit efc81d8c14
7 changed files with 40 additions and 20 deletions

View file

@ -23,7 +23,7 @@ export default class Address extends React.PureComponent<Props> {
const { address, doShowSnackBar } = this.props; const { address, doShowSnackBar } = this.props;
return ( return (
<FormRow verticallyCentered padded> <FormRow verticallyCentered padded stretch>
<input <input
className="input-copyable form-field__input" className="input-copyable form-field__input"
readOnly readOnly

View file

@ -8,6 +8,7 @@ type Props = {
children: React.Node, children: React.Node,
padded?: boolean, padded?: boolean,
verticallyCentered?: boolean, verticallyCentered?: boolean,
stretch?: boolean,
}; };
export class FormRow extends React.PureComponent<Props> { export class FormRow extends React.PureComponent<Props> {
@ -16,13 +17,14 @@ export class FormRow extends React.PureComponent<Props> {
}; };
render() { render() {
const { centered, children, padded, verticallyCentered } = this.props; const { centered, children, padded, verticallyCentered, stretch } = this.props;
return ( return (
<div <div
className={classnames('form-row', { className={classnames('form-row', {
'form-row--centered': centered, 'form-row--centered': centered,
'form-row--padded': padded, 'form-row--padded': padded,
'form-row--vertically-centered': verticallyCentered, 'form-row--vertically-centered': verticallyCentered,
'form-row--stretch': stretch,
})} })}
> >
{children} {children}

View file

@ -1,18 +1,30 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import QRCodeElement from 'qrcode.react'; import QRCodeElement from 'qrcode.react';
import classnames from 'classnames';
type Props = { type Props = {
value: string, value: string,
paddingRight?: boolean,
}; };
const QRCode = (props: Props) => { class QRCode extends React.Component<Props> {
const { value } = props; static defaultProps = {
return ( paddingRight: false,
<div className="qr-code"> };
<QRCodeElement value={value} />
</div> render() {
); const { value, paddingRight } = this.props;
}; return (
<div
className={classnames('qr-code', {
'qr-code--right-padding': paddingRight,
})}
>
<QRCodeElement value={value} />
</div>
);
}
}
export default QRCode; export default QRCode;

View file

@ -16,7 +16,6 @@ type Props = {
shiftOrderId: ?string, shiftOrderId: ?string,
originCoinDepositMax: ?number, originCoinDepositMax: ?number,
clearShapeShift: Dispatch, clearShapeShift: Dispatch,
doShowSnackBar: Dispatch,
getActiveShift: Dispatch, getActiveShift: Dispatch,
shapeShiftRate: ?number, shapeShiftRate: ?number,
originCoinDepositMax: ?number, originCoinDepositMax: ?number,
@ -25,8 +24,6 @@ type Props = {
}; };
class ActiveShapeShift extends React.PureComponent<Props> { class ActiveShapeShift extends React.PureComponent<Props> {
continousFetch: ?number;
constructor() { constructor() {
super(); super();
this.continousFetch = undefined; this.continousFetch = undefined;
@ -59,6 +56,8 @@ class ActiveShapeShift extends React.PureComponent<Props> {
} }
} }
continousFetch: ?number;
render() { render() {
const { const {
shiftCoinType, shiftCoinType,
@ -68,7 +67,6 @@ class ActiveShapeShift extends React.PureComponent<Props> {
shiftState, shiftState,
originCoinDepositMax, originCoinDepositMax,
clearShapeShift, clearShapeShift,
doShowSnackBar,
shapeShiftRate, shapeShiftRate,
originCoinDepositFee, originCoinDepositFee,
originCoinDepositMin, originCoinDepositMin,
@ -95,8 +93,8 @@ class ActiveShapeShift extends React.PureComponent<Props> {
{shiftDepositAddress && ( {shiftDepositAddress && (
<FormRow verticallyCentered padded> <FormRow verticallyCentered padded>
<Address address={shiftDepositAddress} showCopyButton /> <QRCode value={shiftDepositAddress} paddingRight />
<QRCode value={shiftDepositAddress} /> <Address address={shiftDepositAddress} showCopyButton padded />
</FormRow> </FormRow>
)} )}
</div> </div>

View file

@ -19,7 +19,6 @@ type Props = {
isSubmitting: boolean, isSubmitting: boolean,
shiftSupportedCoins: Array<string>, shiftSupportedCoins: Array<string>,
originCoin: string, originCoin: string,
updating: boolean,
getCoinStats: Dispatch, getCoinStats: Dispatch,
originCoinDepositFee: number, originCoinDepositFee: number,
originCoinDepositMin: string, originCoinDepositMin: string,
@ -38,7 +37,6 @@ export default (props: Props) => {
isSubmitting, isSubmitting,
shiftSupportedCoins, shiftSupportedCoins,
originCoin, originCoin,
updating,
getCoinStats, getCoinStats,
originCoinDepositMax, originCoinDepositMax,
originCoinDepositMin, originCoinDepositMin,
@ -51,7 +49,7 @@ export default (props: Props) => {
prefix={__('Exchange')} prefix={__('Exchange')}
postfix={__('for LBC')} postfix={__('for LBC')}
type="select" type="select"
name="origin_coin" name="originCoin"
onChange={e => { onChange={e => {
getCoinStats(e.target.value); getCoinStats(e.target.value);
handleChange(e); handleChange(e);
@ -76,7 +74,7 @@ export default (props: Props) => {
label={__('Return address')} label={__('Return address')}
error={touched.returnAddress && !!errors.returnAddress && errors.returnAddress} error={touched.returnAddress && !!errors.returnAddress && errors.returnAddress}
type="text" type="text"
name="return_address" name="returnAddress"
className="input--address" className="input--address"
placeholder={getExampleAddress(originCoin)} placeholder={getExampleAddress(originCoin)}
onChange={handleChange} onChange={handleChange}

View file

@ -338,3 +338,9 @@ p {
color: var(--color-meta-light); color: var(--color-meta-light);
font-style: italic; font-style: italic;
} }
.qr-code {
&.qr-code--right-padding {
padding-right: $spacing-vertical * 2/3;
}
}

View file

@ -19,6 +19,10 @@
align-items: center; align-items: center;
} }
&.form-row--stretch {
flex: 1;
}
.form-field.form-field--stretch { .form-field.form-field--stretch {
width: 100%; width: 100%;