Skip to content
This repository has been archived by the owner on Jul 9, 2021. It is now read-only.

Commit

Permalink
Merge pull request #1131 from 0xProject/feature/instant/move-features…
Browse files Browse the repository at this point in the history
…-over-from-zrx-buyer

[instant][types][order-utils][asset-buyer] Move over and clean up features from zrx-buyer
  • Loading branch information
fragosti authored Oct 17, 2018
2 parents 35b001b + 32beeae commit 336e456
Show file tree
Hide file tree
Showing 39 changed files with 793 additions and 126 deletions.
1 change: 1 addition & 0 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ jobs:
- run: yarn wsrun test:circleci @0xproject/subproviders
- run: yarn wsrun test:circleci @0xproject/web3-wrapper
- run: yarn wsrun test:circleci @0xproject/utils
- run: yarn wsrun test:circleci @0xproject/instant
- save_cache:
key: coverage-abi-gen-{{ .Environment.CIRCLE_SHA1 }}
paths:
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
},
{
"path": "packages/instant/public/main.bundle.js",
"maxSize": "350kB"
"maxSize": "500kB"
}
],
"ci": {
Expand Down
4 changes: 4 additions & 0 deletions packages/0x.js/CHANGELOG.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@
{
"note": "Make web3-provider-engine types a 'dependency' so it's available to users of the library",
"pr": 1105
},
{
"note": "Export new `AssetData` type from types",
"pr": 1131
}
]
},
Expand Down
1 change: 1 addition & 0 deletions packages/0x.js/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ export {
OrderStateInvalid,
OrderState,
AssetProxyId,
AssetData,
ERC20AssetData,
ERC721AssetData,
SignatureType,
Expand Down
4 changes: 4 additions & 0 deletions packages/asset-buyer/CHANGELOG.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@
{
"note": "Add `gasLimit` and `gasPrice` as optional properties on `BuyQuoteExecutionOpts`"
},
{
"note": "Export `BuyQuoteInfo` type",
"pr": 1131
},
{
"note":
"Updated to use new modularized artifacts and the latest version of @0xproject/contract-wrappers",
Expand Down
1 change: 1 addition & 0 deletions packages/asset-buyer/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export {
AssetBuyerError,
AssetBuyerOpts,
BuyQuote,
BuyQuoteInfo,
BuyQuoteExecutionOpts,
BuyQuoteRequestOpts,
OrderProvider,
Expand Down
4 changes: 3 additions & 1 deletion packages/instant/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,14 @@
"react-dom": "^16.5.2",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"styled-components": "^3.4.9"
"styled-components": "^3.4.9",
"ts-optchain": "^0.1.1"
},
"devDependencies": {
"@0xproject/tslint-config": "^1.0.8",
"@types/enzyme": "^3.1.14",
"@types/enzyme-adapter-react-16": "^1.0.3",
"@types/jest": "^23.3.5",
"@types/lodash": "^4.14.116",
"@types/node": "*",
"@types/react": "^16.4.16",
Expand Down
12 changes: 7 additions & 5 deletions packages/instant/src/components/amount_input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,21 @@ import * as _ from 'lodash';
import * as React from 'react';

import { ColorOption } from '../style/theme';
import { util } from '../util/util';

import { Container, Input } from './ui';

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 (
Expand All @@ -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>
);
Expand All @@ -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);
};
}
52 changes: 52 additions & 0 deletions packages/instant/src/components/asset_amount_input.tsx
Original file line number Diff line number Diff line change
@@ -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);
};
}
58 changes: 46 additions & 12 deletions packages/instant/src/components/buy_button.tsx
Original file line number Diff line number Diff line change
@@ -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);
}
};
}
36 changes: 25 additions & 11 deletions packages/instant/src/components/instant_heading.tsx
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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>
Expand Down
Loading

0 comments on commit 336e456

Please sign in to comment.