diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-10-26 09:35:06 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-10-26 09:35:06 +0800 |
commit | d5d99b9d2e3c793a95c68c1035246644b3ae80c6 (patch) | |
tree | 880f13fd7dba96285c23986e505f3166de099a4c /packages | |
parent | ab2759f43105c0f2d441790e138840706c6759f8 (diff) | |
download | dexon-0x-contracts-d5d99b9d2e3c793a95c68c1035246644b3ae80c6.tar dexon-0x-contracts-d5d99b9d2e3c793a95c68c1035246644b3ae80c6.tar.gz dexon-0x-contracts-d5d99b9d2e3c793a95c68c1035246644b3ae80c6.tar.bz2 dexon-0x-contracts-d5d99b9d2e3c793a95c68c1035246644b3ae80c6.tar.lz dexon-0x-contracts-d5d99b9d2e3c793a95c68c1035246644b3ae80c6.tar.xz dexon-0x-contracts-d5d99b9d2e3c793a95c68c1035246644b3ae80c6.tar.zst dexon-0x-contracts-d5d99b9d2e3c793a95c68c1035246644b3ae80c6.zip |
chore: dont override toString of BigNumber and other PR feedback
Diffstat (limited to 'packages')
-rw-r--r-- | packages/instant/src/components/animations/slide_animations.tsx | 5 | ||||
-rw-r--r-- | packages/instant/src/components/erc20_asset_amount_input.tsx (renamed from packages/instant/src/components/asset_amount_input.tsx) | 21 | ||||
-rw-r--r-- | packages/instant/src/components/instant_heading.tsx | 4 | ||||
-rw-r--r-- | packages/instant/src/components/scaling_amount_input.tsx | 11 | ||||
-rw-r--r-- | packages/instant/src/containers/selected_erc20_asset_amount_input.ts (renamed from packages/instant/src/containers/selected_asset_amount_input.ts) | 25 | ||||
-rw-r--r-- | packages/instant/src/redux/actions.ts | 5 | ||||
-rw-r--r-- | packages/instant/src/redux/reducer.ts | 3 | ||||
-rw-r--r-- | packages/instant/src/style/theme.ts | 2 | ||||
-rw-r--r-- | packages/instant/src/util/asset.ts | 2 | ||||
-rw-r--r-- | packages/instant/src/util/big_number_input.ts (renamed from packages/instant/src/util/big_number.ts) | 16 |
10 files changed, 53 insertions, 41 deletions
diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx index 7c8666861..84280372b 100644 --- a/packages/instant/src/components/animations/slide_animations.tsx +++ b/packages/instant/src/components/animations/slide_animations.tsx @@ -21,7 +21,10 @@ export interface SlideAnimationProps { animationDirection?: string; } -export const SlideAnimation = styled<SlideAnimationProps, 'div'>('div')` +export const SlideAnimation = + styled.div < + SlideAnimationProps > + ` animation-name: ${props => css` ${props.keyframes}; diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx index 4d2dc0bd8..583fad28b 100644 --- a/packages/instant/src/components/asset_amount_input.tsx +++ b/packages/instant/src/components/erc20_asset_amount_input.tsx @@ -1,32 +1,33 @@ -import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; -import { ColorOption } from '../style/theme'; +import { ColorOption, transparentWhite } from '../style/theme'; import { ERC20Asset } from '../types'; import { assetUtils } from '../util/asset'; +import { BigNumberInput } from '../util/big_number_input'; import { util } from '../util/util'; import { ScalingAmountInput } from './scaling_amount_input'; import { Container, Text } from './ui'; // Asset amounts only apply to ERC20 assets -export interface AssetAmountInputProps { +export interface ERC20AssetAmountInputProps { asset?: ERC20Asset; - onChange: (value?: BigNumber, asset?: ERC20Asset) => void; + value?: BigNumberInput; + onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void; startingFontSizePx: number; fontColor?: ColorOption; } -export interface AssetAmountInputState { +export interface ERC20AssetAmountInputState { currentFontSizePx: number; } -export class AssetAmountInput extends React.Component<AssetAmountInputProps, AssetAmountInputState> { +export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInputProps, ERC20AssetAmountInputState> { public static defaultProps = { onChange: util.boundNoop, }; - constructor(props: AssetAmountInputProps) { + constructor(props: ERC20AssetAmountInputProps) { super(props); this.state = { currentFontSizePx: props.startingFontSizePx, @@ -36,7 +37,7 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps, Ass const { asset, onChange, ...rest } = this.props; return ( <Container whiteSpace="nowrap"> - <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block"> + <Container borderBottom={`1px solid ${transparentWhite}`} display="inline-block"> <ScalingAmountInput {...rest} textLengthThreshold={this._textLengthThresholdForAsset(asset)} @@ -57,7 +58,7 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps, Ass </Container> ); } - private readonly _handleChange = (value?: BigNumber): void => { + private readonly _handleChange = (value?: BigNumberInput): void => { this.props.onChange(value, this.props.asset); }; private readonly _handleFontSizeChange = (fontSizePx: number): void => { @@ -65,6 +66,8 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps, Ass currentFontSizePx: fontSizePx, }); }; + // For assets with symbols of different length, + // start scaling the input at different character lengths private readonly _textLengthThresholdForAsset = (asset?: ERC20Asset): number => { if (_.isUndefined(asset)) { return 3; diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index f0a22bccb..df9856277 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -2,7 +2,7 @@ import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; -import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input'; +import { SelectedERC20AssetAmountInput } from '../containers/selected_erc20_asset_amount_input'; import { ColorOption } from '../style/theme'; import { AsyncProcessState, OrderState } from '../types'; import { format } from '../util/format'; @@ -48,7 +48,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { </Container> <Flex direction="row" justify="space-between"> <Flex height="60px"> - <SelectedAssetAmountInput startingFontSizePx={38} /> + <SelectedERC20AssetAmountInput startingFontSizePx={38} /> </Flex> <Flex direction="column" justify="space-between"> {iconOrAmounts} diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx index 23a15305a..655ae2b74 100644 --- a/packages/instant/src/components/scaling_amount_input.tsx +++ b/packages/instant/src/components/scaling_amount_input.tsx @@ -1,9 +1,8 @@ -import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; import { ColorOption } from '../style/theme'; -import { BigNumberInput } from '../util/big_number'; +import { BigNumberInput } from '../util/big_number_input'; import { util } from '../util/util'; import { ScalingInput } from './scaling_input'; @@ -12,8 +11,8 @@ export interface ScalingAmountInputProps { maxFontSizePx: number; textLengthThreshold: number; fontColor?: ColorOption; - value?: BigNumber; - onChange: (value?: BigNumber) => void; + value?: BigNumberInput; + onChange: (value?: BigNumberInput) => void; onFontSizeChange: (fontSizePx: number) => void; } @@ -31,7 +30,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps> onFontSizeChange={onFontSizeChange} fontColor={fontColor} onChange={this._handleChange} - value={!_.isUndefined(value) ? value.toString() : ''} + value={!_.isUndefined(value) ? value.toDisplayString() : ''} placeholder="0.00" emptyInputWidthCh={3.5} /> @@ -42,7 +41,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps> let bigNumberValue; if (!_.isEmpty(value)) { try { - bigNumberValue = new BigNumberInput(event.target.value); + bigNumberValue = new BigNumberInput(value); } catch { // We don't want to allow values that can't be a BigNumber, so don't even call onChange. return; diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts index f836c6967..078f96cd4 100644 --- a/packages/instant/src/containers/selected_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts @@ -11,34 +11,35 @@ import { Action, actions } from '../redux/actions'; import { State } from '../redux/reducer'; import { ColorOption } from '../style/theme'; import { AsyncProcessState, ERC20Asset } from '../types'; +import { BigNumberInput } from '../util/big_number_input'; import { errorUtil } from '../util/error'; -import { AssetAmountInput } from '../components/asset_amount_input'; +import { ERC20AssetAmountInput } from '../components/erc20_asset_amount_input'; -export interface SelectedAssetAmountInputProps { +export interface SelectedERC20AssetAmountInputProps { fontColor?: ColorOption; startingFontSizePx: number; } interface ConnectedState { assetBuyer?: AssetBuyer; - value?: BigNumber; + value?: BigNumberInput; asset?: ERC20Asset; } interface ConnectedDispatch { - updateBuyQuote: (assetBuyer?: AssetBuyer, value?: BigNumber, asset?: ERC20Asset) => void; + updateBuyQuote: (assetBuyer?: AssetBuyer, value?: BigNumberInput, asset?: ERC20Asset) => void; } interface ConnectedProps { - value?: BigNumber; + value?: BigNumberInput; asset?: ERC20Asset; - onChange: (value?: BigNumber, asset?: ERC20Asset) => void; + onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void; } -type FinalProps = ConnectedProps & SelectedAssetAmountInputProps; +type FinalProps = ConnectedProps & SelectedERC20AssetAmountInputProps; -const mapStateToProps = (state: State, _ownProps: SelectedAssetAmountInputProps): ConnectedState => { +const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputProps): ConnectedState => { const selectedAsset = state.selectedAsset; if (_.isUndefined(selectedAsset) || selectedAsset.metaData.assetProxyId !== AssetProxyId.ERC20) { return { @@ -82,7 +83,7 @@ const debouncedUpdateBuyQuoteAsync = _.debounce(updateBuyQuoteAsync, 200, { trai const mapDispatchToProps = ( dispatch: Dispatch<Action>, - _ownProps: SelectedAssetAmountInputProps, + _ownProps: SelectedERC20AssetAmountInputProps, ): ConnectedDispatch => ({ updateBuyQuote: (assetBuyer, value, asset) => { // Update the input @@ -104,7 +105,7 @@ const mapDispatchToProps = ( const mergeProps = ( connectedState: ConnectedState, connectedDispatch: ConnectedDispatch, - ownProps: SelectedAssetAmountInputProps, + ownProps: SelectedERC20AssetAmountInputProps, ): FinalProps => { return { ...ownProps, @@ -116,8 +117,8 @@ const mergeProps = ( }; }; -export const SelectedAssetAmountInput: React.ComponentClass<SelectedAssetAmountInputProps> = connect( +export const SelectedERC20AssetAmountInput: React.ComponentClass<SelectedERC20AssetAmountInputProps> = connect( mapStateToProps, mapDispatchToProps, mergeProps, -)(AssetAmountInput); +)(ERC20AssetAmountInput); diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts index 5a4099f15..46045024b 100644 --- a/packages/instant/src/redux/actions.ts +++ b/packages/instant/src/redux/actions.ts @@ -2,6 +2,8 @@ import { BuyQuote } from '@0x/asset-buyer'; import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; +import { BigNumberInput } from '../util/big_number_input'; + import { ActionsUnion, OrderState } from '../types'; export interface PlainAction<T extends string> { @@ -36,7 +38,8 @@ export enum ActionTypes { export const actions = { updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price), - updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount), + updateSelectedAssetAmount: (amount?: BigNumberInput) => + createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount), updateBuyOrderState: (orderState: OrderState) => createAction(ActionTypes.UPDATE_BUY_ORDER_STATE, orderState), updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote), updateSelectedAsset: (assetData?: string) => createAction(ActionTypes.UPDATE_SELECTED_ASSET, assetData), diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index c6a05ac52..665cba257 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -6,6 +6,7 @@ import * as _ from 'lodash'; import { assetMetaDataMap } from '../data/asset_meta_data_map'; import { Asset, AssetMetaData, AsyncProcessState, DisplayStatus, Network, OrderState } from '../types'; import { assetUtils } from '../util/asset'; +import { BigNumberInput } from '../util/big_number_input'; import { Action, ActionTypes } from './actions'; @@ -14,7 +15,7 @@ export interface State { assetBuyer?: AssetBuyer; assetMetaDataMap: ObjectMap<AssetMetaData>; selectedAsset?: Asset; - selectedAssetAmount?: BigNumber; + selectedAssetAmount?: BigNumberInput; buyOrderState: OrderState; ethUsdPrice?: BigNumber; latestBuyQuote?: BuyQuote; diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts index be527a12c..6575ff9f4 100644 --- a/packages/instant/src/style/theme.ts +++ b/packages/instant/src/style/theme.ts @@ -28,4 +28,6 @@ export const theme: Theme = { darkOrange: '#F2994C', }; +export const transparentWhite = 'rgba(255,255,255,0.3)'; + export { styled, css, keyframes, ThemeProvider }; diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts index e42727d84..2c5b6325d 100644 --- a/packages/instant/src/util/asset.ts +++ b/packages/instant/src/util/asset.ts @@ -51,7 +51,7 @@ export const assetUtils = { if (symbol.length <= 5) { return symbol; } - return `${symbol.slice(0, 3)}...`; + return `${symbol.slice(0, 3)}…`; }, getAssociatedAssetDataIfExists: (assetData: string, network: Network): string | undefined => { const assetDataGroupIfExists = _.find(assetDataNetworkMapping, value => value[network] === assetData); diff --git a/packages/instant/src/util/big_number.ts b/packages/instant/src/util/big_number_input.ts index a34d22d76..d2a9a8dc5 100644 --- a/packages/instant/src/util/big_number.ts +++ b/packages/instant/src/util/big_number_input.ts @@ -4,24 +4,24 @@ import * as _ from 'lodash'; /** * A BigNumber extension that is more flexible about decimal strings. * Such as allowing: - * new BigNumberInput(0.) => 0 - * new BigNumberInput(1.) => 1 - * new BigNumberInput(1..) => still throws + * new BigNumberInput('0.') => 0 + * new BigNumberInput('1.') => 1 + * new BigNumberInput('1..') => still throws */ export class BigNumberInput extends BigNumber { - private readonly _hasDecimalPeriod: boolean; + private readonly _isEndingWithDecimal: boolean; constructor(bigNumberString: string) { const hasDecimalPeriod = _.endsWith(bigNumberString, '.'); let internalString = bigNumberString; if (hasDecimalPeriod) { - internalString = bigNumberString.slice(0, bigNumberString.length - 1); + internalString = bigNumberString.slice(0, -1); } super(internalString); - this._hasDecimalPeriod = hasDecimalPeriod; + this._isEndingWithDecimal = hasDecimalPeriod; } - public toString(): string { + public toDisplayString(): string { const internalString = super.toString(); - if (this._hasDecimalPeriod) { + if (this._isEndingWithDecimal) { return `${internalString}.`; } return internalString; |