Merge branch 'development' into feature/website/asset-buyer-docs
* development: (31 commits) Update CODEOWNERS Update CODEOWNERS Update CODEOWNERS Add leo to CODEOWNERS on some packages fix(monorepo-scripts): Format date as UTC not local time. Bump max bundle size for instant fix: dont use enum string as type as typedoc gets confused feat: export AssetData from order-utils feat: export AssetData from utils chore: temporarily increase the bundle size for instant Remove order-utils from dependencies Run tests on circle CI Add tests for format and use toFixed instead of round for usd Remove expiry buffer seconds option from AssetBuyer init Add ts-optchain and use it instead of lodash get Hide USD price when ETH-USD price is not available Rename OrderDetailsRow to EthAmountRow fix: add Steve's github account to about page, and capitalize AppFolio correctly Put boundNoop in a util file Add tnxHash to buy button callbacks ...
This commit is contained in:
commit
84057934c6
@ -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:
|
||||
|
18
CODEOWNERS
18
CODEOWNERS
@ -8,3 +8,21 @@
|
||||
packages/asset-buyer/ @BMillman19 @fragosti @steveklebanoff
|
||||
packages/instant/ @BMillman19 @fragosti @steveklebanoff
|
||||
packages/website/ @BMillman19 @fragosti @fabioberger @steveklebanoff
|
||||
|
||||
# Dev tools & setup
|
||||
packages/abi-gen/ @LogvinovLeon
|
||||
packages/base-contract/ @LogvinovLeon
|
||||
packages/contract_templates/ @LogvinovLeon
|
||||
packages/dev-utils/ @LogvinovLeon @fabioberger
|
||||
|
||||
packages/ethereum-types/ @LogvinovLeon
|
||||
packages/metacoin/ @LogvinovLeon
|
||||
packages/sol-compiler/ @LogvinovLeon
|
||||
packages/sol-cov/ @LogvinovLeon
|
||||
packages/sol-resolver/ @LogvinovLeon
|
||||
packages/web3-wrapper/ @LogvinovLeon @fabioberger
|
||||
.circleci/ @LogvinovLeon
|
||||
packages/subproviders/ @fabioberger @dekz
|
||||
packages/connect/ @fragosti
|
||||
packages/monorepo-scripts/ @fabioberger
|
||||
packages/order-utils/ @fabioberger @LogvinovLeon
|
||||
|
@ -50,7 +50,7 @@
|
||||
},
|
||||
{
|
||||
"path": "packages/instant/public/main.bundle.js",
|
||||
"maxSize": "350kB"
|
||||
"maxSize": "500kB"
|
||||
}
|
||||
],
|
||||
"ci": {
|
||||
@ -65,7 +65,7 @@
|
||||
"coveralls": "^3.0.0",
|
||||
"ganache-cli": "6.1.8",
|
||||
"lcov-result-merger": "^3.0.0",
|
||||
"npm-cli-login": "^0.0.10",
|
||||
"@0xproject/npm-cli-login": "^0.0.11",
|
||||
"npm-run-all": "^4.1.2",
|
||||
"prettier": "^1.11.1",
|
||||
"source-map-support": "^0.5.6",
|
||||
|
@ -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
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -79,6 +79,7 @@ export {
|
||||
OrderStateInvalid,
|
||||
OrderState,
|
||||
AssetProxyId,
|
||||
AssetData,
|
||||
ERC20AssetData,
|
||||
ERC721AssetData,
|
||||
SignatureType,
|
||||
|
@ -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",
|
||||
|
@ -15,6 +15,7 @@ export {
|
||||
AssetBuyerError,
|
||||
AssetBuyerOpts,
|
||||
BuyQuote,
|
||||
BuyQuoteInfo,
|
||||
BuyQuoteExecutionOpts,
|
||||
BuyQuoteInfo,
|
||||
BuyQuoteRequestOpts,
|
||||
|
@ -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",
|
||||
|
@ -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);
|
||||
};
|
||||
}
|
||||
|
52
packages/instant/src/components/asset_amount_input.tsx
Normal file
52
packages/instant/src/components/asset_amount_input.tsx
Normal file
@ -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);
|
||||
};
|
||||
}
|
@ -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);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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 interface OrderDetailsProps {
|
||||
buyQuoteInfo?: BuyQuoteInfo;
|
||||
ethUsdPrice?: BigNumber;
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
OrderDetails.displayName = 'OrderDetails';
|
||||
|
||||
export interface OrderDetailsRowProps {
|
||||
name: string;
|
||||
primaryValue: string;
|
||||
secondaryValue: string;
|
||||
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';
|
||||
|
@ -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 {}
|
||||
|
||||
|
@ -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>
|
||||
|
6
packages/instant/src/constants.ts
Normal file
6
packages/instant/src/constants.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { BigNumber } from '@0xproject/utils';
|
||||
export const BIG_NUMBER_ZERO = new BigNumber(0);
|
||||
export const sraApiUrl = 'https://api.radarrelay.com/0x/v2/';
|
||||
export const zrxAssetData = '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498';
|
||||
export const zrxDecimals = 18;
|
||||
export const ethDecimals = 18;
|
@ -0,0 +1,27 @@
|
||||
import { BuyQuoteInfo } from '@0xproject/asset-buyer';
|
||||
import { BigNumber } from '@0xproject/utils';
|
||||
import * as _ from 'lodash';
|
||||
import * as React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { oc } from 'ts-optchain';
|
||||
|
||||
import { State } from '../redux/reducer';
|
||||
|
||||
import { OrderDetails } from '../components/order_details';
|
||||
|
||||
export interface LatestBuyQuoteOrderDetailsProps {}
|
||||
|
||||
interface ConnectedState {
|
||||
buyQuoteInfo?: BuyQuoteInfo;
|
||||
ethUsdPrice?: BigNumber;
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: State, _ownProps: LatestBuyQuoteOrderDetailsProps): ConnectedState => ({
|
||||
// use the worst case quote info
|
||||
buyQuoteInfo: oc(state).latestBuyQuote.worstCaseQuoteInfo(),
|
||||
ethUsdPrice: state.ethUsdPrice,
|
||||
});
|
||||
|
||||
export const LatestBuyQuoteOrderDetails: React.ComponentClass<LatestBuyQuoteOrderDetailsProps> = connect(
|
||||
mapStateToProps,
|
||||
)(OrderDetails);
|
@ -0,0 +1,72 @@
|
||||
import { BigNumber } from '@0xproject/utils';
|
||||
import { Web3Wrapper } from '@0xproject/web3-wrapper';
|
||||
import * as _ from 'lodash';
|
||||
import * as React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { Dispatch } from 'redux';
|
||||
|
||||
import { zrxDecimals } from '../constants';
|
||||
import { Action, actions } from '../redux/actions';
|
||||
import { State } from '../redux/reducer';
|
||||
import { ColorOption } from '../style/theme';
|
||||
import { AsyncProcessState } from '../types';
|
||||
import { assetBuyer } from '../util/asset_buyer';
|
||||
|
||||
import { AssetAmountInput } from '../components/asset_amount_input';
|
||||
|
||||
export interface SelectedAssetAmountInputProps {
|
||||
fontColor?: ColorOption;
|
||||
fontSize?: string;
|
||||
}
|
||||
|
||||
interface ConnectedState {
|
||||
value?: BigNumber;
|
||||
assetData?: string;
|
||||
}
|
||||
|
||||
interface ConnectedDispatch {
|
||||
onChange: (value?: BigNumber, assetData?: string) => void;
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: State, _ownProps: SelectedAssetAmountInputProps): ConnectedState => ({
|
||||
value: state.selectedAssetAmount,
|
||||
assetData: state.selectedAssetData,
|
||||
});
|
||||
|
||||
const updateBuyQuoteAsync = async (
|
||||
dispatch: Dispatch<Action>,
|
||||
assetData?: string,
|
||||
assetAmount?: BigNumber,
|
||||
): Promise<void> => {
|
||||
if (_.isUndefined(assetAmount) || _.isUndefined(assetData)) {
|
||||
return;
|
||||
}
|
||||
// get a new buy quote.
|
||||
const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, zrxDecimals);
|
||||
const newBuyQuote = await assetBuyer.getBuyQuoteAsync(assetData, baseUnitValue);
|
||||
// invalidate the last buy quote.
|
||||
dispatch(actions.updateLatestBuyQuote(newBuyQuote));
|
||||
};
|
||||
|
||||
const debouncedUpdateBuyQuoteAsync = _.debounce(updateBuyQuoteAsync, 200, { trailing: true });
|
||||
|
||||
const mapDispatchToProps = (
|
||||
dispatch: Dispatch<Action>,
|
||||
_ownProps: SelectedAssetAmountInputProps,
|
||||
): ConnectedDispatch => ({
|
||||
onChange: (value, assetData) => {
|
||||
// Update the input
|
||||
dispatch(actions.updateSelectedAssetAmount(value));
|
||||
// invalidate the last buy quote.
|
||||
dispatch(actions.updateLatestBuyQuote(undefined));
|
||||
// reset our buy state
|
||||
dispatch(actions.updateSelectedAssetBuyState(AsyncProcessState.NONE));
|
||||
// tslint:disable-next-line:no-floating-promises
|
||||
debouncedUpdateBuyQuoteAsync(dispatch, assetData, value);
|
||||
},
|
||||
});
|
||||
|
||||
export const SelectedAssetAmountInput: React.ComponentClass<SelectedAssetAmountInputProps> = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
)(AssetAmountInput);
|
@ -1,36 +0,0 @@
|
||||
import { BigNumber } from '@0xproject/utils';
|
||||
import * as React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { Dispatch } from 'redux';
|
||||
|
||||
import { State } from '../redux/reducer';
|
||||
import { ColorOption } from '../style/theme';
|
||||
import { Action, ActionTypes } from '../types';
|
||||
|
||||
import { AmountInput } from '../components/amount_input';
|
||||
|
||||
export interface SelectedAssetAmountInputProps {
|
||||
fontColor?: ColorOption;
|
||||
fontSize?: string;
|
||||
}
|
||||
|
||||
interface ConnectedState {
|
||||
value?: BigNumber;
|
||||
}
|
||||
|
||||
interface ConnectedDispatch {
|
||||
onChange?: (value?: BigNumber) => void;
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: State, _ownProps: SelectedAssetAmountInputProps): ConnectedState => ({
|
||||
value: state.selectedAssetAmount,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch: Dispatch<Action>): ConnectedDispatch => ({
|
||||
onChange: value => dispatch({ type: ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, data: value }),
|
||||
});
|
||||
|
||||
export const SelectedAssetAmountInput: React.ComponentClass<SelectedAssetAmountInputProps> = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
)(AmountInput);
|
55
packages/instant/src/containers/selected_asset_buy_button.ts
Normal file
55
packages/instant/src/containers/selected_asset_buy_button.ts
Normal file
@ -0,0 +1,55 @@
|
||||
import { BuyQuote } from '@0xproject/asset-buyer';
|
||||
import * as _ from 'lodash';
|
||||
import * as React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { Dispatch } from 'redux';
|
||||
|
||||
import { Action, actions } from '../redux/actions';
|
||||
import { State } from '../redux/reducer';
|
||||
import { AsyncProcessState } from '../types';
|
||||
|
||||
import { BuyButton } from '../components/buy_button';
|
||||
|
||||
export interface SelectedAssetBuyButtonProps {}
|
||||
|
||||
interface ConnectedState {
|
||||
text: string;
|
||||
buyQuote?: BuyQuote;
|
||||
}
|
||||
|
||||
interface ConnectedDispatch {
|
||||
onClick: (buyQuote: BuyQuote) => void;
|
||||
onBuySuccess: (buyQuote: BuyQuote) => void;
|
||||
onBuyFailure: (buyQuote: BuyQuote) => void;
|
||||
}
|
||||
|
||||
const textForState = (state: AsyncProcessState): string => {
|
||||
switch (state) {
|
||||
case AsyncProcessState.NONE:
|
||||
return 'Buy';
|
||||
case AsyncProcessState.PENDING:
|
||||
return '...Loading';
|
||||
case AsyncProcessState.SUCCESS:
|
||||
return 'Success!';
|
||||
case AsyncProcessState.FAILURE:
|
||||
return 'Failed';
|
||||
default:
|
||||
return 'Buy';
|
||||
}
|
||||
};
|
||||
|
||||
const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): ConnectedState => ({
|
||||
text: textForState(state.selectedAssetBuyState),
|
||||
buyQuote: state.latestBuyQuote,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({
|
||||
onClick: buyQuote => dispatch(actions.updateSelectedAssetBuyState(AsyncProcessState.PENDING)),
|
||||
onBuySuccess: buyQuote => dispatch(actions.updateSelectedAssetBuyState(AsyncProcessState.SUCCESS)),
|
||||
onBuyFailure: buyQuote => dispatch(actions.updateSelectedAssetBuyState(AsyncProcessState.FAILURE)),
|
||||
});
|
||||
|
||||
export const SelectedAssetBuyButton: React.ComponentClass<SelectedAssetBuyButtonProps> = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
)(BuyButton);
|
@ -0,0 +1,27 @@
|
||||
import { BigNumber } from '@0xproject/utils';
|
||||
import * as _ from 'lodash';
|
||||
import * as React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { oc } from 'ts-optchain';
|
||||
|
||||
import { State } from '../redux/reducer';
|
||||
|
||||
import { InstantHeading } from '../components/instant_heading';
|
||||
|
||||
export interface InstantHeadingProps {}
|
||||
|
||||
interface ConnectedState {
|
||||
selectedAssetAmount?: BigNumber;
|
||||
totalEthBaseAmount?: BigNumber;
|
||||
ethUsdPrice?: BigNumber;
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): ConnectedState => ({
|
||||
selectedAssetAmount: state.selectedAssetAmount,
|
||||
totalEthBaseAmount: oc(state).latestBuyQuote.worstCaseQuoteInfo.totalEthAmount(),
|
||||
ethUsdPrice: state.ethUsdPrice,
|
||||
});
|
||||
|
||||
export const SelectedAssetInstantHeading: React.ComponentClass<InstantHeadingProps> = connect(mapStateToProps)(
|
||||
InstantHeading,
|
||||
);
|
15
packages/instant/src/data/asset_meta_data.ts
Normal file
15
packages/instant/src/data/asset_meta_data.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { AssetProxyId, ObjectMap } from '@0xproject/types';
|
||||
|
||||
import { zrxAssetData } from '../constants';
|
||||
import { AssetMetaData } from '../types';
|
||||
|
||||
// Map from assetData string to AssetMetaData object
|
||||
// TODO: import this from somewhere else.
|
||||
export const assetMetaData: ObjectMap<AssetMetaData> = {
|
||||
[zrxAssetData]: {
|
||||
assetProxyId: AssetProxyId.ERC20,
|
||||
decimals: 18,
|
||||
primaryColor: 'rgb(54, 50, 60)',
|
||||
symbol: 'zrx',
|
||||
},
|
||||
};
|
36
packages/instant/src/redux/actions.ts
Normal file
36
packages/instant/src/redux/actions.ts
Normal file
@ -0,0 +1,36 @@
|
||||
import { BuyQuote } from '@0xproject/asset-buyer';
|
||||
import { BigNumber } from '@0xproject/utils';
|
||||
import * as _ from 'lodash';
|
||||
|
||||
import { ActionsUnion, AsyncProcessState } from '../types';
|
||||
|
||||
export interface PlainAction<T extends string> {
|
||||
type: T;
|
||||
}
|
||||
|
||||
export interface ActionWithPayload<T extends string, P> extends PlainAction<T> {
|
||||
data: P;
|
||||
}
|
||||
|
||||
export type Action = ActionsUnion<typeof actions>;
|
||||
|
||||
function createAction<T extends string>(type: T): PlainAction<T>;
|
||||
function createAction<T extends string, P>(type: T, data: P): ActionWithPayload<T, P>;
|
||||
function createAction<T extends string, P>(type: T, data?: P): PlainAction<T> | ActionWithPayload<T, P> {
|
||||
return _.isUndefined(data) ? { type } : { type, data };
|
||||
}
|
||||
|
||||
export enum ActionTypes {
|
||||
UPDATE_ETH_USD_PRICE = 'UPDATE_ETH_USD_PRICE',
|
||||
UPDATE_SELECTED_ASSET_AMOUNT = 'UPDATE_SELECTED_ASSET_AMOUNT',
|
||||
UPDATE_SELECTED_ASSET_BUY_STATE = 'UPDATE_SELECTED_ASSET_BUY_STATE',
|
||||
UPDATE_LATEST_BUY_QUOTE = 'UPDATE_LATEST_BUY_QUOTE',
|
||||
}
|
||||
|
||||
export const actions = {
|
||||
updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price),
|
||||
updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount),
|
||||
updateSelectedAssetBuyState: (buyState: AsyncProcessState) =>
|
||||
createAction(ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE, buyState),
|
||||
updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote),
|
||||
};
|
22
packages/instant/src/redux/async_data.ts
Normal file
22
packages/instant/src/redux/async_data.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import { BIG_NUMBER_ZERO } from '../constants';
|
||||
import { coinbaseApi } from '../util/coinbase_api';
|
||||
|
||||
import { ActionTypes } from './actions';
|
||||
|
||||
import { store } from './store';
|
||||
|
||||
export const asyncData = {
|
||||
fetchAndDispatchToStore: async () => {
|
||||
let ethUsdPrice = BIG_NUMBER_ZERO;
|
||||
try {
|
||||
ethUsdPrice = await coinbaseApi.getEthUsdPrice();
|
||||
} catch (e) {
|
||||
// ignore
|
||||
} finally {
|
||||
store.dispatch({
|
||||
type: ActionTypes.UPDATE_ETH_USD_PRICE,
|
||||
data: ethUsdPrice,
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
@ -1,16 +1,27 @@
|
||||
import { BuyQuote } from '@0xproject/asset-buyer';
|
||||
import { BigNumber } from '@0xproject/utils';
|
||||
import * as _ from 'lodash';
|
||||
|
||||
import { Action, ActionTypes } from '../types';
|
||||
import { zrxAssetData } from '../constants';
|
||||
import { AsyncProcessState } from '../types';
|
||||
|
||||
import { Action, ActionTypes } from './actions';
|
||||
|
||||
export interface State {
|
||||
ethUsdPrice?: string;
|
||||
selectedAssetData?: string;
|
||||
selectedAssetAmount?: BigNumber;
|
||||
selectedAssetBuyState: AsyncProcessState;
|
||||
ethUsdPrice?: BigNumber;
|
||||
latestBuyQuote?: BuyQuote;
|
||||
}
|
||||
|
||||
export const INITIAL_STATE: State = {
|
||||
ethUsdPrice: undefined,
|
||||
// TODO: Remove hardcoded zrxAssetData
|
||||
selectedAssetData: zrxAssetData,
|
||||
selectedAssetAmount: undefined,
|
||||
selectedAssetBuyState: AsyncProcessState.NONE,
|
||||
ethUsdPrice: undefined,
|
||||
latestBuyQuote: undefined,
|
||||
};
|
||||
|
||||
export const reducer = (state: State = INITIAL_STATE, action: Action): State => {
|
||||
@ -25,6 +36,16 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
|
||||
...state,
|
||||
selectedAssetAmount: action.data,
|
||||
};
|
||||
case ActionTypes.UPDATE_LATEST_BUY_QUOTE:
|
||||
return {
|
||||
...state,
|
||||
latestBuyQuote: action.data,
|
||||
};
|
||||
case ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE:
|
||||
return {
|
||||
...state,
|
||||
selectedAssetBuyState: action.data,
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
@ -1,9 +1,33 @@
|
||||
export enum ActionTypes {
|
||||
UPDATE_ETH_USD_PRICE,
|
||||
UPDATE_SELECTED_ASSET_AMOUNT,
|
||||
import { AssetProxyId, ObjectMap } from '@0xproject/types';
|
||||
|
||||
// Reusable
|
||||
export enum AsyncProcessState {
|
||||
NONE,
|
||||
PENDING,
|
||||
SUCCESS,
|
||||
FAILURE,
|
||||
}
|
||||
|
||||
export interface Action {
|
||||
type: ActionTypes;
|
||||
data?: any;
|
||||
export type FunctionType = (...args: any[]) => any;
|
||||
export type ActionCreatorsMapObject = ObjectMap<FunctionType>;
|
||||
export type ActionsUnion<A extends ActionCreatorsMapObject> = ReturnType<A[keyof A]>;
|
||||
|
||||
export interface ERC20AssetMetaData {
|
||||
assetProxyId: AssetProxyId.ERC20;
|
||||
decimals: number;
|
||||
primaryColor?: string;
|
||||
symbol: string;
|
||||
}
|
||||
|
||||
export interface ERC721AssetMetaData {
|
||||
assetProxyId: AssetProxyId.ERC721;
|
||||
name: string;
|
||||
primaryColor?: string;
|
||||
}
|
||||
|
||||
export type AssetMetaData = ERC20AssetMetaData | ERC721AssetMetaData;
|
||||
|
||||
export enum Network {
|
||||
Kovan = 42,
|
||||
Mainnet = 1,
|
||||
}
|
||||
|
9
packages/instant/src/util/asset_buyer.ts
Normal file
9
packages/instant/src/util/asset_buyer.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { AssetBuyer } from '@0xproject/asset-buyer';
|
||||
|
||||
import { sraApiUrl } from '../constants';
|
||||
|
||||
import { getProvider } from './provider';
|
||||
|
||||
const provider = getProvider();
|
||||
|
||||
export const assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(provider, sraApiUrl);
|
10
packages/instant/src/util/coinbase_api.ts
Normal file
10
packages/instant/src/util/coinbase_api.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { BigNumber } from '@0xproject/utils';
|
||||
|
||||
const baseEndpoint = 'https://api.coinbase.com/v2';
|
||||
export const coinbaseApi = {
|
||||
getEthUsdPrice: async (): Promise<BigNumber> => {
|
||||
const res = await fetch(`${baseEndpoint}/prices/ETH-USD/buy`);
|
||||
const resJson = await res.json();
|
||||
return new BigNumber(resJson.data.amount);
|
||||
},
|
||||
};
|
45
packages/instant/src/util/format.ts
Normal file
45
packages/instant/src/util/format.ts
Normal file
@ -0,0 +1,45 @@
|
||||
import { BigNumber } from '@0xproject/utils';
|
||||
import { Web3Wrapper } from '@0xproject/web3-wrapper';
|
||||
import * as _ from 'lodash';
|
||||
|
||||
import { ethDecimals } from '../constants';
|
||||
|
||||
export const format = {
|
||||
ethBaseAmount: (ethBaseAmount?: BigNumber, decimalPlaces: number = 4, defaultText: string = '0 ETH'): string => {
|
||||
if (_.isUndefined(ethBaseAmount)) {
|
||||
return defaultText;
|
||||
}
|
||||
const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseAmount, ethDecimals);
|
||||
return format.ethUnitAmount(ethUnitAmount, decimalPlaces);
|
||||
},
|
||||
ethUnitAmount: (ethUnitAmount?: BigNumber, decimalPlaces: number = 4, defaultText: string = '0 ETH'): string => {
|
||||
if (_.isUndefined(ethUnitAmount)) {
|
||||
return defaultText;
|
||||
}
|
||||
const roundedAmount = ethUnitAmount.round(decimalPlaces);
|
||||
return `${roundedAmount} ETH`;
|
||||
},
|
||||
ethBaseAmountInUsd: (
|
||||
ethBaseAmount?: BigNumber,
|
||||
ethUsdPrice?: BigNumber,
|
||||
decimalPlaces: number = 2,
|
||||
defaultText: string = '$0.00',
|
||||
): string => {
|
||||
if (_.isUndefined(ethBaseAmount) || _.isUndefined(ethUsdPrice)) {
|
||||
return defaultText;
|
||||
}
|
||||
const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseAmount, ethDecimals);
|
||||
return format.ethUnitAmountInUsd(ethUnitAmount, ethUsdPrice, decimalPlaces);
|
||||
},
|
||||
ethUnitAmountInUsd: (
|
||||
ethUnitAmount?: BigNumber,
|
||||
ethUsdPrice?: BigNumber,
|
||||
decimalPlaces: number = 2,
|
||||
defaultText: string = '$0.00',
|
||||
): string => {
|
||||
if (_.isUndefined(ethUnitAmount) || _.isUndefined(ethUsdPrice)) {
|
||||
return defaultText;
|
||||
}
|
||||
return `$${ethUnitAmount.mul(ethUsdPrice).toFixed(decimalPlaces)}`;
|
||||
},
|
||||
};
|
12
packages/instant/src/util/provider.ts
Normal file
12
packages/instant/src/util/provider.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { Provider } from 'ethereum-types';
|
||||
|
||||
export const getProvider = (): Provider => {
|
||||
const injectedWeb3 = (window as any).web3 || undefined;
|
||||
try {
|
||||
// Use MetaMask/Mist provider
|
||||
return injectedWeb3.currentProvider;
|
||||
} catch (err) {
|
||||
// Throws when user doesn't have MetaMask/Mist running
|
||||
throw new Error(`No injected web3 found: ${err}`);
|
||||
}
|
||||
};
|
5
packages/instant/src/util/util.ts
Normal file
5
packages/instant/src/util/util.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import * as _ from 'lodash';
|
||||
|
||||
export const util = {
|
||||
boundNoop: _.noop.bind(_),
|
||||
};
|
5
packages/instant/src/util/web3_wrapper.ts
Normal file
5
packages/instant/src/util/web3_wrapper.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import { Web3Wrapper } from '@0xproject/web3-wrapper';
|
||||
|
||||
import { getProvider } from './provider';
|
||||
|
||||
export const web3Wrapper = new Web3Wrapper(getProvider());
|
@ -4,10 +4,12 @@ import * as React from 'react';
|
||||
|
||||
configure({ adapter: new Adapter() });
|
||||
|
||||
import { ZeroExInstant } from '../../src';
|
||||
|
||||
describe('<ZeroExInstant />', () => {
|
||||
it('shallow renders without crashing', () => {
|
||||
shallow(<ZeroExInstant />);
|
||||
// TODO: Write non-trivial tests.
|
||||
// At time of writing we cannot render ZeroExInstant
|
||||
// because we are looking for a provider on window.
|
||||
// But in the future it will be dependency injected.
|
||||
describe('<Test />', () => {
|
||||
it('runs a test', () => {
|
||||
shallow(<div />);
|
||||
});
|
||||
});
|
||||
|
97
packages/instant/test/util/format.test.ts
Normal file
97
packages/instant/test/util/format.test.ts
Normal file
@ -0,0 +1,97 @@
|
||||
import { BigNumber } from '@0xproject/utils';
|
||||
import { Web3Wrapper } from '@0xproject/web3-wrapper';
|
||||
|
||||
import { ethDecimals } from '../../src/constants';
|
||||
import { format } from '../../src/util/format';
|
||||
|
||||
const BIG_NUMBER_ONE = new BigNumber(1);
|
||||
const BIG_NUMBER_DECIMAL = new BigNumber(0.432414);
|
||||
const BIG_NUMBER_IRRATIONAL = new BigNumber(5.3014059295032);
|
||||
const ONE_ETH_IN_BASE_UNITS = Web3Wrapper.toBaseUnitAmount(BIG_NUMBER_ONE, ethDecimals);
|
||||
const DECIMAL_ETH_IN_BASE_UNITS = Web3Wrapper.toBaseUnitAmount(BIG_NUMBER_DECIMAL, ethDecimals);
|
||||
const IRRATIONAL_ETH_IN_BASE_UNITS = Web3Wrapper.toBaseUnitAmount(BIG_NUMBER_IRRATIONAL, ethDecimals);
|
||||
const BIG_NUMBER_FAKE_ETH_USD_PRICE = new BigNumber(2.534);
|
||||
|
||||
describe('format', () => {
|
||||
describe('ethBaseAmount', () => {
|
||||
it('converts 1 ETH in base units to the string `1 ETH`', () => {
|
||||
expect(format.ethBaseAmount(ONE_ETH_IN_BASE_UNITS)).toBe('1 ETH');
|
||||
});
|
||||
it('converts .432414 ETH in base units to the string `.4324 ETH`', () => {
|
||||
expect(format.ethBaseAmount(DECIMAL_ETH_IN_BASE_UNITS)).toBe('0.4324 ETH');
|
||||
});
|
||||
it('converts 5.3014059295032 ETH in base units to the string `5.3014 ETH`', () => {
|
||||
expect(format.ethBaseAmount(IRRATIONAL_ETH_IN_BASE_UNITS)).toBe('5.3014 ETH');
|
||||
});
|
||||
it('returns defaultText param when ethBaseAmount is not defined', () => {
|
||||
const defaultText = 'defaultText';
|
||||
expect(format.ethBaseAmount(undefined, 4, defaultText)).toBe(defaultText);
|
||||
});
|
||||
it('it allows for configurable decimal places', () => {
|
||||
expect(format.ethBaseAmount(DECIMAL_ETH_IN_BASE_UNITS, 2)).toBe('0.43 ETH');
|
||||
});
|
||||
});
|
||||
describe('ethUnitAmount', () => {
|
||||
it('converts BigNumber(1) to the string `1 ETH`', () => {
|
||||
expect(format.ethUnitAmount(BIG_NUMBER_ONE)).toBe('1 ETH');
|
||||
});
|
||||
it('converts BigNumer(.432414) to the string `.4324 ETH`', () => {
|
||||
expect(format.ethUnitAmount(BIG_NUMBER_DECIMAL)).toBe('0.4324 ETH');
|
||||
});
|
||||
it('converts BigNumber(5.3014059295032) to the string `5.3014 ETH`', () => {
|
||||
expect(format.ethUnitAmount(BIG_NUMBER_IRRATIONAL)).toBe('5.3014 ETH');
|
||||
});
|
||||
it('returns defaultText param when ethUnitAmount is not defined', () => {
|
||||
const defaultText = 'defaultText';
|
||||
expect(format.ethUnitAmount(undefined, 4, defaultText)).toBe(defaultText);
|
||||
expect(format.ethUnitAmount(BIG_NUMBER_ONE, 4, defaultText)).toBe('1 ETH');
|
||||
});
|
||||
it('it allows for configurable decimal places', () => {
|
||||
expect(format.ethUnitAmount(BIG_NUMBER_DECIMAL, 2)).toBe('0.43 ETH');
|
||||
});
|
||||
});
|
||||
describe('ethBaseAmountInUsd', () => {
|
||||
it('correctly formats 1 ETH to usd according to some price', () => {
|
||||
expect(format.ethBaseAmountInUsd(ONE_ETH_IN_BASE_UNITS, BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe('$2.53');
|
||||
});
|
||||
it('correctly formats .432414 ETH to usd according to some price', () => {
|
||||
expect(format.ethBaseAmountInUsd(DECIMAL_ETH_IN_BASE_UNITS, BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe('$1.10');
|
||||
});
|
||||
it('correctly formats 5.3014059295032 ETH to usd according to some price', () => {
|
||||
expect(format.ethBaseAmountInUsd(IRRATIONAL_ETH_IN_BASE_UNITS, BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe(
|
||||
'$13.43',
|
||||
);
|
||||
});
|
||||
it('returns defaultText param when ethBaseAmountInUsd or ethUsdPrice is not defined', () => {
|
||||
const defaultText = 'defaultText';
|
||||
expect(format.ethBaseAmountInUsd(undefined, undefined, 2, defaultText)).toBe(defaultText);
|
||||
expect(format.ethBaseAmountInUsd(BIG_NUMBER_ONE, undefined, 2, defaultText)).toBe(defaultText);
|
||||
expect(format.ethBaseAmountInUsd(undefined, BIG_NUMBER_ONE, 2, defaultText)).toBe(defaultText);
|
||||
});
|
||||
it('it allows for configurable decimal places', () => {
|
||||
expect(format.ethBaseAmountInUsd(DECIMAL_ETH_IN_BASE_UNITS, BIG_NUMBER_FAKE_ETH_USD_PRICE, 4)).toBe(
|
||||
'$1.0957',
|
||||
);
|
||||
});
|
||||
});
|
||||
describe('ethUnitAmountInUsd', () => {
|
||||
it('correctly formats 1 ETH to usd according to some price', () => {
|
||||
expect(format.ethUnitAmountInUsd(BIG_NUMBER_ONE, BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe('$2.53');
|
||||
});
|
||||
it('correctly formats .432414 ETH to usd according to some price', () => {
|
||||
expect(format.ethUnitAmountInUsd(BIG_NUMBER_DECIMAL, BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe('$1.10');
|
||||
});
|
||||
it('correctly formats 5.3014059295032 ETH to usd according to some price', () => {
|
||||
expect(format.ethUnitAmountInUsd(BIG_NUMBER_IRRATIONAL, BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe('$13.43');
|
||||
});
|
||||
it('returns defaultText param when ethUnitAmountInUsd or ethUsdPrice is not defined', () => {
|
||||
const defaultText = 'defaultText';
|
||||
expect(format.ethUnitAmountInUsd(undefined, undefined, 2, defaultText)).toBe(defaultText);
|
||||
expect(format.ethUnitAmountInUsd(BIG_NUMBER_ONE, undefined, 2, defaultText)).toBe(defaultText);
|
||||
expect(format.ethUnitAmountInUsd(undefined, BIG_NUMBER_ONE, 2, defaultText)).toBe(defaultText);
|
||||
});
|
||||
it('it allows for configurable decimal places', () => {
|
||||
expect(format.ethUnitAmountInUsd(BIG_NUMBER_DECIMAL, BIG_NUMBER_FAKE_ETH_USD_PRICE, 4)).toBe('$1.0957');
|
||||
});
|
||||
});
|
||||
});
|
@ -3,7 +3,12 @@
|
||||
"version": "1.0.6",
|
||||
"changes": [
|
||||
{
|
||||
"note": "Add AssetBuyerError to the IGNORED_EXCESSIVE_TYPES array"
|
||||
"note": "Render date formats in UTC to prevent conflicts when publishing in different timezones.",
|
||||
"pr": 1143
|
||||
},
|
||||
{
|
||||
"note": "Add AssetBuyerError to the IGNORED_EXCESSIVE_TYPES array",
|
||||
"pr": 1139
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -19,7 +19,8 @@ CHANGELOG
|
||||
|
||||
export const changelogUtils = {
|
||||
getChangelogMdTitle(versionChangelog: VersionChangelog): string {
|
||||
const date = moment(`${versionChangelog.timestamp}`, 'X').format('MMMM D, YYYY');
|
||||
// Use UTC rather than the local machines time (formatted date time is +0:00)
|
||||
const date = moment.utc(`${versionChangelog.timestamp}`, 'X').format('MMMM D, YYYY');
|
||||
const title = `\n## v${versionChangelog.version} - _${date}_\n\n`;
|
||||
return title;
|
||||
},
|
||||
|
@ -14,6 +14,10 @@
|
||||
{
|
||||
"note": "Rename `ecSignOrderHashAsync` to `ecSignHashAsync` removing `SignerType` parameter.",
|
||||
"pr": 1102
|
||||
},
|
||||
{
|
||||
"note": "Use `AssetData` union type for function return values.",
|
||||
"pr": 1131
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { AssetProxyId, ERC20AssetData, ERC721AssetData } from '@0xproject/types';
|
||||
import { AssetData, AssetProxyId, ERC20AssetData, ERC721AssetData } from '@0xproject/types';
|
||||
import { BigNumber } from '@0xproject/utils';
|
||||
import ethAbi = require('ethereumjs-abi');
|
||||
import ethUtil = require('ethereumjs-util');
|
||||
@ -112,7 +112,7 @@ export const assetDataUtils = {
|
||||
* @param assetData Hex encoded assetData string to decode
|
||||
* @return Either a ERC20 or ERC721 assetData object
|
||||
*/
|
||||
decodeAssetDataOrThrow(assetData: string): ERC20AssetData | ERC721AssetData {
|
||||
decodeAssetDataOrThrow(assetData: string): AssetData {
|
||||
const assetProxyId = assetDataUtils.decodeAssetProxyId(assetData);
|
||||
switch (assetProxyId) {
|
||||
case AssetProxyId.ERC20:
|
||||
|
@ -35,6 +35,7 @@ export {
|
||||
OrderRelevantState,
|
||||
OrderState,
|
||||
ECSignature,
|
||||
AssetData,
|
||||
ERC20AssetData,
|
||||
ERC721AssetData,
|
||||
AssetProxyId,
|
||||
|
@ -9,6 +9,10 @@
|
||||
{
|
||||
"note": "Added `ZeroExTransaction` type for Exchange executeTransaction",
|
||||
"pr": 1102
|
||||
},
|
||||
{
|
||||
"note": "Add `AssetData` union type (`type AssetData = ERC20AssetData | ERC721AssetData`)",
|
||||
"pr": 1131
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -168,6 +168,8 @@ export interface ERC721AssetData {
|
||||
tokenId: BigNumber;
|
||||
}
|
||||
|
||||
export type AssetData = ERC20AssetData | ERC721AssetData;
|
||||
|
||||
// TODO: DRY. These should be extracted from contract code.
|
||||
export enum RevertReason {
|
||||
OrderUnfillable = 'ORDER_UNFILLABLE',
|
||||
|
@ -244,9 +244,10 @@ const teamRow9: ProfileInfo[] = [
|
||||
{
|
||||
name: 'Steve Klebanoff',
|
||||
title: 'Senior Engineer',
|
||||
description: ` Full-stack engineer. Previously Staff Software Engineer at Appfolio. Computer Science & Cognitive Psychology at Northeastern University.`,
|
||||
description: ` Full-stack engineer. Previously Staff Software Engineer at AppFolio. Computer Science & Cognitive Psychology at Northeastern University.`,
|
||||
image: 'images/team/steve.png',
|
||||
linkedIn: 'https://www.linkedin.com/in/steveklebanoff/',
|
||||
github: 'https://github.com/steveklebanoff',
|
||||
},
|
||||
];
|
||||
|
||||
|
61
yarn.lock
61
yarn.lock
@ -571,6 +571,12 @@
|
||||
jsonschema "1.2.2"
|
||||
lodash.values "4.3.0"
|
||||
|
||||
"@0xproject/npm-cli-login@^0.0.11":
|
||||
version "0.0.11"
|
||||
resolved "https://registry.yarnpkg.com/@0xproject/npm-cli-login/-/npm-cli-login-0.0.11.tgz#3f1ec06112ce62aad300ff0575358f68aeecde2e"
|
||||
dependencies:
|
||||
npm-registry-client "7.0.9"
|
||||
|
||||
"@0xproject/order-utils@^0.0.9":
|
||||
version "0.0.9"
|
||||
resolved "https://registry.yarnpkg.com/@0xproject/order-utils/-/order-utils-0.0.9.tgz#75225dfbd87335d18810abf995d8e077b9a84868"
|
||||
@ -1022,6 +1028,10 @@
|
||||
version "0.4.30"
|
||||
resolved "https://registry.yarnpkg.com/@types/istanbul/-/istanbul-0.4.30.tgz#073159320ab3296b2cfeb481f756a1f8f4c9c8e4"
|
||||
|
||||
"@types/jest@^23.3.5":
|
||||
version "23.3.5"
|
||||
resolved "https://registry.npmjs.org/@types/jest/-/jest-23.3.5.tgz#870a1434208b60603745bfd214fc3fc675142364"
|
||||
|
||||
"@types/js-combinatorics@^0.5.29":
|
||||
version "0.5.29"
|
||||
resolved "https://registry.yarnpkg.com/@types/js-combinatorics/-/js-combinatorics-0.5.29.tgz#47a7819a0b6925b6dc4bd2c2278a7e6329b29387"
|
||||
@ -1592,6 +1602,10 @@ aes-js@^0.2.3:
|
||||
version "0.2.4"
|
||||
resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-0.2.4.tgz#94b881ab717286d015fa219e08fb66709dda5a3d"
|
||||
|
||||
aes-js@^3.1.1:
|
||||
version "3.1.1"
|
||||
resolved "https://registry.npmjs.org/aes-js/-/aes-js-3.1.1.tgz#89fd1f94ae51b4c72d62466adc1a7323ff52f072"
|
||||
|
||||
ajv-errors@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.0.tgz#ecf021fa108fd17dfb5e6b383f2dd233e31ffc59"
|
||||
@ -2992,7 +3006,7 @@ bs-logger@0.x:
|
||||
dependencies:
|
||||
fast-json-stable-stringify "^2.0.0"
|
||||
|
||||
bs58@=4.0.1:
|
||||
bs58@=4.0.1, bs58@^4.0.0:
|
||||
version "4.0.1"
|
||||
resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a"
|
||||
dependencies:
|
||||
@ -3015,6 +3029,14 @@ bs58check@^1.0.8:
|
||||
bs58 "^3.1.0"
|
||||
create-hash "^1.1.0"
|
||||
|
||||
bs58check@^2.1.2:
|
||||
version "2.1.2"
|
||||
resolved "https://registry.npmjs.org/bs58check/-/bs58check-2.1.2.tgz#53b018291228d82a5aa08e7d796fdafda54aebfc"
|
||||
dependencies:
|
||||
bs58 "^4.0.0"
|
||||
create-hash "^1.1.0"
|
||||
safe-buffer "^5.1.2"
|
||||
|
||||
bser@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.npmjs.org/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719"
|
||||
@ -5568,6 +5590,19 @@ ethereumjs-wallet@0.6.0:
|
||||
utf8 "^2.1.1"
|
||||
uuid "^2.0.1"
|
||||
|
||||
ethereumjs-wallet@~0.6.0:
|
||||
version "0.6.2"
|
||||
resolved "https://registry.npmjs.org/ethereumjs-wallet/-/ethereumjs-wallet-0.6.2.tgz#67244b6af3e8113b53d709124b25477b64aeccda"
|
||||
dependencies:
|
||||
aes-js "^3.1.1"
|
||||
bs58check "^2.1.2"
|
||||
ethereumjs-util "^5.2.0"
|
||||
hdkey "^1.0.0"
|
||||
safe-buffer "^5.1.2"
|
||||
scrypt.js "^0.2.0"
|
||||
utf8 "^3.0.0"
|
||||
uuid "^3.3.2"
|
||||
|
||||
ethers@3.0.22:
|
||||
version "3.0.22"
|
||||
resolved "https://registry.yarnpkg.com/ethers/-/ethers-3.0.22.tgz#7fab1ea16521705837aa43c15831877b2716b436"
|
||||
@ -6375,7 +6410,7 @@ ganache-core@0xProject/ganache-core#monorepo-dep:
|
||||
ethereumjs-tx "0xProject/ethereumjs-tx#fake-tx-include-signature-by-default"
|
||||
ethereumjs-util "^5.2.0"
|
||||
ethereumjs-vm "2.3.5"
|
||||
ethereumjs-wallet "0.6.0"
|
||||
ethereumjs-wallet "~0.6.0"
|
||||
fake-merkle-patricia-tree "~1.0.1"
|
||||
heap "~0.2.6"
|
||||
js-scrypt "^0.2.0"
|
||||
@ -7062,6 +7097,14 @@ hdkey@^0.7.0, hdkey@^0.7.1:
|
||||
coinstring "^2.0.0"
|
||||
secp256k1 "^3.0.1"
|
||||
|
||||
hdkey@^1.0.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.npmjs.org/hdkey/-/hdkey-1.1.0.tgz#e74e7b01d2c47f797fa65d1d839adb7a44639f29"
|
||||
dependencies:
|
||||
coinstring "^2.0.0"
|
||||
safe-buffer "^5.1.1"
|
||||
secp256k1 "^3.0.1"
|
||||
|
||||
he@1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
|
||||
@ -10337,12 +10380,6 @@ npm-bundled@^1.0.1:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.3.tgz#7e71703d973af3370a9591bafe3a63aca0be2308"
|
||||
|
||||
npm-cli-login@^0.0.10:
|
||||
version "0.0.10"
|
||||
resolved "https://registry.yarnpkg.com/npm-cli-login/-/npm-cli-login-0.0.10.tgz#b1e8b5b7405008e0a26ccc170443434a59c5364c"
|
||||
dependencies:
|
||||
npm-registry-client "7.0.9"
|
||||
|
||||
npm-lifecycle@^2.0.0:
|
||||
version "2.0.3"
|
||||
resolved "http://registry.yarnpkg.com/npm-lifecycle/-/npm-lifecycle-2.0.3.tgz#696bedf1143371163e9cc16fe872357e25d8d90e"
|
||||
@ -14693,6 +14730,10 @@ ts-node@^7.0.0:
|
||||
source-map-support "^0.5.6"
|
||||
yn "^2.0.0"
|
||||
|
||||
ts-optchain@^0.1.1:
|
||||
version "0.1.1"
|
||||
resolved "https://registry.npmjs.org/ts-optchain/-/ts-optchain-0.1.1.tgz#9d45e2c3fc6201c2f9be82edad4c76fefb2a36d9"
|
||||
|
||||
tslib@1.9.0, tslib@^1.8.0, tslib@^1.8.1:
|
||||
version "1.9.0"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.0.tgz#e37a86fda8cbbaf23a057f473c9f4dc64e5fc2e8"
|
||||
@ -15201,6 +15242,10 @@ utf8@^2.1.1:
|
||||
version "2.1.2"
|
||||
resolved "https://registry.yarnpkg.com/utf8/-/utf8-2.1.2.tgz#1fa0d9270e9be850d9b05027f63519bf46457d96"
|
||||
|
||||
utf8@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.npmjs.org/utf8/-/utf8-3.0.0.tgz#f052eed1364d696e769ef058b183df88c87f69d1"
|
||||
|
||||
util-deprecate@~1.0.1:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
|
||||
|
Loading…
x
Reference in New Issue
Block a user