aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFrancesco Agosti <francesco.agosti93@gmail.com>2018-12-01 04:19:54 +0800
committerGitHub <noreply@github.com>2018-12-01 04:19:54 +0800
commitca22d87290fc176488fae7da3f179486340e5c79 (patch)
treecdfc9ad01c2a4e56c560809cb7e01895987ef442
parenta1d4aa66bc6b3de041ec6e4eb4fe40383945510b (diff)
parentea11e8c62dac9ff6352bc983efc707d855b8e881 (diff)
downloaddexon-sol-tools-ca22d87290fc176488fae7da3f179486340e5c79.tar
dexon-sol-tools-ca22d87290fc176488fae7da3f179486340e5c79.tar.gz
dexon-sol-tools-ca22d87290fc176488fae7da3f179486340e5c79.tar.bz2
dexon-sol-tools-ca22d87290fc176488fae7da3f179486340e5c79.tar.lz
dexon-sol-tools-ca22d87290fc176488fae7da3f179486340e5c79.tar.xz
dexon-sol-tools-ca22d87290fc176488fae7da3f179486340e5c79.tar.zst
dexon-sol-tools-ca22d87290fc176488fae7da3f179486340e5c79.zip
Merge pull request #1351 from 0xProject/fix/instant/instant-bounces-on-error
[instant] Fix instant bouncing around / height changes, don't allow labels to wrap
-rw-r--r--packages/instant/src/components/instant_heading.tsx11
-rw-r--r--packages/instant/src/components/payment_method.tsx5
-rw-r--r--packages/instant/src/components/ui/container.tsx2
-rw-r--r--packages/instant/src/containers/latest_error.tsx8
4 files changed, 20 insertions, 6 deletions
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index ace577824..808c6dc7f 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -107,7 +107,14 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
private readonly _renderEthAmount = (): React.ReactNode => {
return (
- <Text fontSize="16px" textAlign="right" width="100%" fontColor={ColorOption.white} fontWeight={500}>
+ <Text
+ fontSize="16px"
+ textAlign="right"
+ width="100%"
+ fontColor={ColorOption.white}
+ fontWeight={500}
+ noWrap={true}
+ >
{format.ethBaseUnitAmount(
this.props.totalEthBaseUnitAmount,
4,
@@ -119,7 +126,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
private readonly _renderDollarAmount = (): React.ReactNode => {
return (
- <Text fontSize="16px" textAlign="right" width="100%" fontColor={ColorOption.white}>
+ <Text fontSize="16px" textAlign="right" width="100%" fontColor={ColorOption.white} noWrap={true}>
{format.ethBaseUnitAmountInUsd(
this.props.totalEthBaseUnitAmount,
this.props.ethUsdPrice,
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index ebcd62f35..c23b43267 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -26,7 +26,7 @@ export interface PaymentMethodProps {
export class PaymentMethod extends React.Component<PaymentMethodProps> {
public render(): React.ReactNode {
return (
- <Container padding="20px" width="100%">
+ <Container padding="20px" width="100%" height="133px">
<Container marginBottom="12px">
<Flex justify="space-between">
<Text
@@ -83,8 +83,7 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
const colors = { primaryColor, secondaryColor };
switch (account.state) {
case AccountState.Loading:
- // Just take up the same amount of space as the other states.
- return <Container height="52px" />;
+ return null;
case AccountState.Locked:
return (
<WalletPrompt
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index a015ab5bc..e7d909d92 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -29,6 +29,7 @@ export interface ContainerProps {
backgroundColor?: ColorOption;
rawBackgroundColor?: string;
hasBoxShadow?: boolean;
+ isHidden?: boolean;
zIndex?: number;
whiteSpace?: string;
opacity?: number;
@@ -81,6 +82,7 @@ export const Container =
${props => props.width && stylesForMedia<string>('width', props.width)}
${props => props.height && stylesForMedia<string>('height', props.height)}
${props => props.borderRadius && stylesForMedia<string>('border-radius', props.borderRadius)}
+ ${props => (props.isHidden ? 'visibility: hidden;' : '')}
background-color: ${props => getBackgroundColor(props.theme, props.backgroundColor, props.rawBackgroundColor)};
border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
&:hover {
diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx
index b7cfdb504..0d4349124 100644
--- a/packages/instant/src/containers/latest_error.tsx
+++ b/packages/instant/src/containers/latest_error.tsx
@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import { SlidingError } from '../components/sliding_error';
+import { Container } from '../components/ui/container';
import { Overlay } from '../components/ui/overlay';
import { Action } from '../redux/actions';
import { State } from '../redux/reducer';
@@ -23,7 +24,12 @@ export interface LatestErrorComponentProps {
export const LatestErrorComponent: React.StatelessComponent<LatestErrorComponentProps> = props => {
if (!props.latestErrorMessage) {
- return <div />;
+ // Render a hidden SlidingError such that instant does not move when a real error is rendered.
+ return (
+ <Container isHidden={true}>
+ <SlidingError animationState="slidIn" icon="😢" message="" />
+ </Container>
+ );
}
return (
<React.Fragment>