aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r--packages/instant/src/components/amount_input.tsx12
-rw-r--r--packages/instant/src/components/asset_amount_input.tsx52
-rw-r--r--packages/instant/src/components/buy_button.tsx58
-rw-r--r--packages/instant/src/components/instant_heading.tsx36
-rw-r--r--packages/instant/src/components/order_details.tsx110
-rw-r--r--packages/instant/src/components/zero_ex_instant.tsx3
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx13
7 files changed, 214 insertions, 70 deletions
diff --git a/packages/instant/src/components/amount_input.tsx b/packages/instant/src/components/amount_input.tsx
index 38810063d..7644f5f67 100644
--- a/packages/instant/src/components/amount_input.tsx
+++ b/packages/instant/src/components/amount_input.tsx
@@ -3,6 +3,7 @@ import * as _ from 'lodash';
import * as React from 'react';
import { ColorOption } from '../style/theme';
+import { util } from '../util/util';
import { Container, Input } from './ui';
@@ -10,10 +11,13 @@ export interface AmountInputProps {
fontColor?: ColorOption;
fontSize?: string;
value?: BigNumber;
- onChange?: (value?: BigNumber) => void;
+ onChange: (value?: BigNumber) => void;
}
export class AmountInput extends React.Component<AmountInputProps> {
+ public static defaultProps = {
+ onChange: util.boundNoop,
+ };
public render(): React.ReactNode {
const { fontColor, fontSize, value } = this.props;
return (
@@ -24,7 +28,7 @@ export class AmountInput extends React.Component<AmountInputProps> {
onChange={this._handleChange}
value={!_.isUndefined(value) ? value.toString() : ''}
placeholder="0.00"
- width="2em"
+ width="2.2em"
/>
</Container>
);
@@ -40,8 +44,6 @@ export class AmountInput extends React.Component<AmountInputProps> {
return;
}
}
- if (!_.isUndefined(this.props.onChange)) {
- this.props.onChange(bigNumberValue);
- }
+ this.props.onChange(bigNumberValue);
};
}
diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
new file mode 100644
index 000000000..7c6b03ee9
--- /dev/null
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -0,0 +1,52 @@
+import { AssetProxyId } from '@0xproject/types';
+import { BigNumber } from '@0xproject/utils';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { assetMetaData } from '../data/asset_meta_data';
+import { ColorOption } from '../style/theme';
+import { util } from '../util/util';
+
+import { AmountInput, AmountInputProps } from './amount_input';
+import { Container, Text } from './ui';
+
+export interface AssetAmountInputProps extends AmountInputProps {
+ assetData?: string;
+ onChange: (value?: BigNumber, assetData?: string) => void;
+}
+
+export class AssetAmountInput extends React.Component<AssetAmountInputProps> {
+ public static defaultProps = {
+ onChange: util.boundNoop,
+ };
+ public render(): React.ReactNode {
+ const { assetData, onChange, ...rest } = this.props;
+ return (
+ <Container>
+ <AmountInput {...rest} onChange={this._handleChange} />
+ <Container display="inline-block" marginLeft="10px">
+ <Text fontSize={rest.fontSize} fontColor={ColorOption.white} textTransform="uppercase">
+ {this._getAssetSymbolLabel()}
+ </Text>
+ </Container>
+ </Container>
+ );
+ }
+ private readonly _getAssetSymbolLabel = (): string => {
+ const unknownLabel = '???';
+ if (_.isUndefined(this.props.assetData)) {
+ return unknownLabel;
+ }
+ const metaData = assetMetaData[this.props.assetData];
+ if (_.isUndefined(metaData)) {
+ return unknownLabel;
+ }
+ if (metaData.assetProxyId === AssetProxyId.ERC20) {
+ return metaData.symbol;
+ }
+ return unknownLabel;
+ };
+ private readonly _handleChange = (value?: BigNumber): void => {
+ this.props.onChange(value, this.props.assetData);
+ };
+}
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 5a32b9575..0706817c9 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -1,19 +1,53 @@
+import { BuyQuote } from '@0xproject/asset-buyer';
+import * as _ from 'lodash';
import * as React from 'react';
import { ColorOption } from '../style/theme';
+import { assetBuyer } from '../util/asset_buyer';
+import { util } from '../util/util';
+import { web3Wrapper } from '../util/web3_wrapper';
import { Button, Container, Text } from './ui';
-export interface BuyButtonProps {}
+export interface BuyButtonProps {
+ buyQuote?: BuyQuote;
+ onClick: (buyQuote: BuyQuote) => void;
+ onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void;
+ onBuyFailure: (buyQuote: BuyQuote, tnxHash?: string) => void;
+ text: string;
+}
-export const BuyButton: React.StatelessComponent<BuyButtonProps> = props => (
- <Container padding="20px" width="100%">
- <Button width="100%">
- <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
- Buy
- </Text>
- </Button>
- </Container>
-);
-
-BuyButton.displayName = 'BuyButton';
+export class BuyButton extends React.Component<BuyButtonProps> {
+ public static defaultProps = {
+ onClick: util.boundNoop,
+ onBuySuccess: util.boundNoop,
+ onBuyFailure: util.boundNoop,
+ };
+ public render(): React.ReactNode {
+ const shouldDisableButton = _.isUndefined(this.props.buyQuote);
+ return (
+ <Container padding="20px" width="100%">
+ <Button width="100%" onClick={this._handleClick} isDisabled={shouldDisableButton}>
+ <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
+ {this.props.text}
+ </Text>
+ </Button>
+ </Container>
+ );
+ }
+ private readonly _handleClick = async () => {
+ // The button is disabled when there is no buy quote anyway.
+ if (_.isUndefined(this.props.buyQuote)) {
+ return;
+ }
+ this.props.onClick(this.props.buyQuote);
+ let txnHash;
+ try {
+ txnHash = await assetBuyer.executeBuyQuoteAsync(this.props.buyQuote);
+ await web3Wrapper.awaitTransactionSuccessAsync(txnHash);
+ this.props.onBuySuccess(this.props.buyQuote, txnHash);
+ } catch {
+ this.props.onBuyFailure(this.props.buyQuote, txnHash);
+ }
+ };
+}
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index be0414b8d..492c1b2c0 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -1,11 +1,32 @@
+import { BigNumber } from '@0xproject/utils';
+import * as _ from 'lodash';
import * as React from 'react';
import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input';
import { ColorOption } from '../style/theme';
+import { format } from '../util/format';
import { Container, Flex, Text } from './ui';
-export interface InstantHeadingProps {}
+export interface InstantHeadingProps {
+ selectedAssetAmount?: BigNumber;
+ totalEthBaseAmount?: BigNumber;
+ ethUsdPrice?: BigNumber;
+}
+
+const displaytotalEthBaseAmount = ({ selectedAssetAmount, totalEthBaseAmount }: InstantHeadingProps): string => {
+ if (_.isUndefined(selectedAssetAmount)) {
+ return '0 ETH';
+ }
+ return format.ethBaseAmount(totalEthBaseAmount, 4, '...loading');
+};
+
+const displayUsdAmount = ({ totalEthBaseAmount, selectedAssetAmount, ethUsdPrice }: InstantHeadingProps): string => {
+ if (_.isUndefined(selectedAssetAmount)) {
+ return '$0.00';
+ }
+ return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, '...loading');
+};
export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = props => (
<Container backgroundColor={ColorOption.primaryColor} padding="20px" width="100%" borderRadius="3px 3px 0px 0px">
@@ -22,22 +43,15 @@ export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = pro
</Text>
</Container>
<Flex direction="row" justify="space-between">
- <Container>
- <SelectedAssetAmountInput fontSize="45px" />
- <Container display="inline-block" marginLeft="10px">
- <Text fontSize="45px" fontColor={ColorOption.white} textTransform="uppercase">
- rep
- </Text>
- </Container>
- </Container>
+ <SelectedAssetAmountInput fontSize="45px" />
<Flex direction="column" justify="space-between">
<Container marginBottom="5px">
<Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
- 0 ETH
+ {displaytotalEthBaseAmount(props)}
</Text>
</Container>
<Text fontSize="16px" fontColor={ColorOption.white} opacity={0.7}>
- $0.00
+ {displayUsdAmount(props)}
</Text>
</Flex>
</Flex>
diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
index dbf2c1f0b..a15ff411b 100644
--- a/packages/instant/src/components/order_details.tsx
+++ b/packages/instant/src/components/order_details.tsx
@@ -1,53 +1,90 @@
+import { BuyQuoteInfo } from '@0xproject/asset-buyer';
+import { BigNumber } from '@0xproject/utils';
+import * as _ from 'lodash';
import * as React from 'react';
+import { oc } from 'ts-optchain';
import { ColorOption } from '../style/theme';
+import { format } from '../util/format';
import { Container, Flex, Text } from './ui';
-export interface OrderDetailsProps {}
-
-export const OrderDetails: React.StatelessComponent<OrderDetailsProps> = props => (
- <Container padding="20px" width="100%">
- <Container marginBottom="10px">
- <Text
- letterSpacing="1px"
- fontColor={ColorOption.primaryColor}
- fontWeight={600}
- textTransform="uppercase"
- fontSize="14px"
- >
- Order Details
- </Text>
- </Container>
- <OrderDetailsRow name="Token Price" primaryValue=".013 ETH" secondaryValue="$24.32" />
- <OrderDetailsRow name="Fee" primaryValue=".005 ETH" secondaryValue="$1.04" />
- <OrderDetailsRow name="Total Cost" primaryValue="1.66 ETH" secondaryValue="$589.56" shouldEmphasize={true} />
- </Container>
-);
-
-OrderDetails.displayName = 'OrderDetails';
-
-export interface OrderDetailsRowProps {
- name: string;
- primaryValue: string;
- secondaryValue: string;
+export interface OrderDetailsProps {
+ buyQuoteInfo?: BuyQuoteInfo;
+ ethUsdPrice?: BigNumber;
+}
+
+export class OrderDetails extends React.Component<OrderDetailsProps> {
+ public render(): React.ReactNode {
+ const { buyQuoteInfo, ethUsdPrice } = this.props;
+ const buyQuoteAccessor = oc(buyQuoteInfo);
+ const ethAssetPrice = buyQuoteAccessor.ethPerAssetPrice();
+ const ethTokenFee = buyQuoteAccessor.feeEthAmount();
+ const totalEthAmount = buyQuoteAccessor.totalEthAmount();
+ return (
+ <Container padding="20px" width="100%">
+ <Container marginBottom="10px">
+ <Text
+ letterSpacing="1px"
+ fontColor={ColorOption.primaryColor}
+ fontWeight={600}
+ textTransform="uppercase"
+ fontSize="14px"
+ >
+ Order Details
+ </Text>
+ </Container>
+ <EthAmountRow
+ rowLabel="Token Price"
+ ethAmount={ethAssetPrice}
+ ethUsdPrice={ethUsdPrice}
+ isEthAmountInBaseUnits={false}
+ />
+ <EthAmountRow rowLabel="Fee" ethAmount={ethTokenFee} ethUsdPrice={ethUsdPrice} />
+ <EthAmountRow
+ rowLabel="Total Cost"
+ ethAmount={totalEthAmount}
+ ethUsdPrice={ethUsdPrice}
+ shouldEmphasize={true}
+ />
+ </Container>
+ );
+ }
+}
+
+export interface EthAmountRowProps {
+ rowLabel: string;
+ ethAmount?: BigNumber;
+ isEthAmountInBaseUnits?: boolean;
+ ethUsdPrice?: BigNumber;
shouldEmphasize?: boolean;
}
-export const OrderDetailsRow: React.StatelessComponent<OrderDetailsRowProps> = props => {
- const fontWeight = props.shouldEmphasize ? 700 : 400;
+export const EthAmountRow: React.StatelessComponent<EthAmountRowProps> = ({
+ rowLabel,
+ ethAmount,
+ isEthAmountInBaseUnits,
+ ethUsdPrice,
+ shouldEmphasize,
+}) => {
+ const fontWeight = shouldEmphasize ? 700 : 400;
+ const usdFormatter = isEthAmountInBaseUnits ? format.ethBaseAmountInUsd : format.ethUnitAmountInUsd;
+ const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseAmount : format.ethUnitAmount;
+ const usdPriceSection = _.isUndefined(ethUsdPrice) ? null : (
+ <Container marginRight="3px" display="inline-block">
+ <Text fontColor={ColorOption.lightGrey}>({usdFormatter(ethAmount, ethUsdPrice)})</Text>
+ </Container>
+ );
return (
<Container padding="10px 0px" borderTop="1px dashed" borderColor={ColorOption.feintGrey}>
<Flex justify="space-between">
<Text fontWeight={fontWeight} fontColor={ColorOption.grey}>
- {props.name}
+ {rowLabel}
</Text>
<Container>
- <Container marginRight="3px" display="inline-block">
- <Text fontColor={ColorOption.lightGrey}>({props.secondaryValue}) </Text>
- </Container>
+ {usdPriceSection}
<Text fontWeight={fontWeight} fontColor={ColorOption.grey}>
- {props.primaryValue}
+ {ethFormatter(ethAmount)}
</Text>
</Container>
</Flex>
@@ -55,8 +92,9 @@ export const OrderDetailsRow: React.StatelessComponent<OrderDetailsRowProps> = p
);
};
-OrderDetailsRow.defaultProps = {
+EthAmountRow.defaultProps = {
shouldEmphasize: false,
+ isEthAmountInBaseUnits: true,
};
-OrderDetailsRow.displayName = 'OrderDetailsRow';
+EthAmountRow.displayName = 'EthAmountRow';
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 0e6230d1b..f6472e811 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import { Provider } from 'react-redux';
+import { asyncData } from '../redux/async_data';
import { store } from '../redux/store';
import { fonts } from '../style/fonts';
import { theme, ThemeProvider } from '../style/theme';
@@ -8,6 +9,8 @@ import { theme, ThemeProvider } from '../style/theme';
import { ZeroExInstantContainer } from './zero_ex_instant_container';
fonts.include();
+// tslint:disable-next-line:no-floating-promises
+asyncData.fetchAndDispatchToStore();
export interface ZeroExInstantProps {}
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index a384c5f1b..51f9dc63e 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -1,10 +1,11 @@
import * as React from 'react';
+import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details';
+import { SelectedAssetBuyButton } from '../containers/selected_asset_buy_button';
+import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
+
import { ColorOption } from '../style/theme';
-import { BuyButton } from './buy_button';
-import { InstantHeading } from './instant_heading';
-import { OrderDetails } from './order_details';
import { Container, Flex } from './ui';
export interface ZeroExInstantContainerProps {}
@@ -19,9 +20,9 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta
hasBoxShadow={true}
>
<Flex direction="column" justify="flex-start">
- <InstantHeading />
- <OrderDetails />
- <BuyButton />
+ <SelectedAssetInstantHeading />
+ <LatestBuyQuoteOrderDetails />
+ <SelectedAssetBuyButton />
</Flex>
</Container>
</Container>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-03 09:03:45 +0800