aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-20 01:32:37 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-20 01:32:37 +0800
commit2f4e498a099ebbd8078139f90a054941e427de15 (patch)
tree2e82f5fd483bfb5dc48805f09641b89e6f51ea87 /packages/instant/src
parent66465816ca049118d58ca34bada241fd146f2656 (diff)
downloaddexon-sol-tools-2f4e498a099ebbd8078139f90a054941e427de15.tar
dexon-sol-tools-2f4e498a099ebbd8078139f90a054941e427de15.tar.gz
dexon-sol-tools-2f4e498a099ebbd8078139f90a054941e427de15.tar.bz2
dexon-sol-tools-2f4e498a099ebbd8078139f90a054941e427de15.tar.lz
dexon-sol-tools-2f4e498a099ebbd8078139f90a054941e427de15.tar.xz
dexon-sol-tools-2f4e498a099ebbd8078139f90a054941e427de15.tar.zst
dexon-sol-tools-2f4e498a099ebbd8078139f90a054941e427de15.zip
Refactor to make placeholder logic more straightforward
Diffstat (limited to 'packages/instant/src')
-rw-r--r--packages/instant/src/components/instant_heading.tsx11
1 files changed, 6 insertions, 5 deletions
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 48cda7f88..265c3e0a5 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -20,7 +20,6 @@ export interface InstantHeadingProps {
const placeholderColor = ColorOption.white;
export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
public render(): React.ReactNode {
- const placeholderAmountToAlwaysShow = this._placeholderAmountToAlwaysShow();
return (
<Container
backgroundColor={ColorOption.primaryColor}
@@ -43,22 +42,24 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
<Flex direction="row" justify="space-between">
<SelectedAssetAmountInput fontSize="45px" />
<Flex direction="column" justify="space-between">
- <Container marginBottom="5px">{placeholderAmountToAlwaysShow || this._ethAmount()}</Container>
- <Container opacity={0.7}>{placeholderAmountToAlwaysShow || this._dollarAmount()}</Container>
+ <Container marginBottom="5px">
+ {this._placeholderOrAmount(this._ethAmount.bind(this))}
+ </Container>
+ <Container opacity={0.7}>{this._placeholderOrAmount(this._dollarAmount.bind(this))}</Container>
</Flex>
</Flex>
</Container>
);
}
- private _placeholderAmountToAlwaysShow(): React.ReactNode | null {
+ private _placeholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode {
if (this.props.quoteRequestState === AsyncProcessState.PENDING) {
return <AmountPlaceholder isPulsating={true} color={placeholderColor} />;
}
if (_.isUndefined(this.props.selectedAssetAmount)) {
return <AmountPlaceholder isPulsating={false} color={placeholderColor} />;
}
- return null;
+ return amountFunction();
}
private _ethAmount(): React.ReactNode {