mirror of
https://github.com/LBRYFoundation/lbry-desktop.git
synced 2025-09-01 09:45:10 +00:00
fix: show correct shapeshift currency amount
This commit is contained in:
parent
ae5858d656
commit
efc81d8c14
7 changed files with 40 additions and 20 deletions
|
@ -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
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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%;
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue