aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components
diff options
context:
space:
mode:
authorBrandon Millman <brandon@0xproject.com>2018-12-04 04:48:42 +0800
committerGitHub <noreply@github.com>2018-12-04 04:48:42 +0800
commitf076cdb8329693e9d7351ec88d2ac01ad42a2a3a (patch)
tree87677e557b2897422089b4a3e35fbcb6f00b89c2 /packages/instant/src/components
parent3662ab25246a53128d85e8427ebe07518245b611 (diff)
parentc52d48d4db693a71b6eecf93dde5d7cbb64c51b6 (diff)
downloaddexon-sol-tools-f076cdb8329693e9d7351ec88d2ac01ad42a2a3a.tar
dexon-sol-tools-f076cdb8329693e9d7351ec88d2ac01ad42a2a3a.tar.gz
dexon-sol-tools-f076cdb8329693e9d7351ec88d2ac01ad42a2a3a.tar.bz2
dexon-sol-tools-f076cdb8329693e9d7351ec88d2ac01ad42a2a3a.tar.lz
dexon-sol-tools-f076cdb8329693e9d7351ec88d2ac01ad42a2a3a.tar.xz
dexon-sol-tools-f076cdb8329693e9d7351ec88d2ac01ad42a2a3a.tar.zst
dexon-sol-tools-f076cdb8329693e9d7351ec88d2ac01ad42a2a3a.zip
Merge pull request #1365 from 0xProject/fix/instant/token-selector
[instant] various polish items
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r--packages/instant/src/components/buy_button.tsx12
-rw-r--r--packages/instant/src/components/buy_order_state_buttons.tsx4
-rw-r--r--packages/instant/src/components/search_input.tsx8
-rw-r--r--packages/instant/src/components/ui/container.tsx1
-rw-r--r--packages/instant/src/components/ui/input.tsx1
-rw-r--r--packages/instant/src/components/ui/overlay.tsx2
6 files changed, 19 insertions, 9 deletions
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index eeb42d6fc..1489b94d4 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -1,4 +1,5 @@
import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
+import { AssetProxyId } from '@0x/types';
import { BigNumber } from '@0x/utils';
import { Web3Wrapper } from '@0x/web3-wrapper';
import * as _ from 'lodash';
@@ -7,7 +8,7 @@ import { oc } from 'ts-optchain';
import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants';
import { ColorOption } from '../style/theme';
-import { AffiliateInfo, ZeroExInstantError } from '../types';
+import { AffiliateInfo, Asset, ZeroExInstantError } from '../types';
import { analytics } from '../util/analytics';
import { gasPriceEstimator } from '../util/gas_price_estimator';
import { util } from '../util/util';
@@ -21,6 +22,7 @@ export interface BuyButtonProps {
assetBuyer: AssetBuyer;
web3Wrapper: Web3Wrapper;
affiliateInfo?: AffiliateInfo;
+ selectedAsset?: Asset;
onValidationPending: (buyQuote: BuyQuote) => void;
onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
onSignatureDenied: (buyQuote: BuyQuote) => void;
@@ -36,8 +38,12 @@ export class BuyButton extends React.Component<BuyButtonProps> {
onBuyFailure: util.boundNoop,
};
public render(): React.ReactNode {
- const { buyQuote, accountAddress } = this.props;
+ const { buyQuote, accountAddress, selectedAsset } = this.props;
const shouldDisableButton = _.isUndefined(buyQuote) || _.isUndefined(accountAddress);
+ const buttonText =
+ !_.isUndefined(selectedAsset) && selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20
+ ? `Buy ${selectedAsset.metaData.symbol.toUpperCase()}`
+ : 'Buy Now';
return (
<Button
width="100%"
@@ -45,7 +51,7 @@ export class BuyButton extends React.Component<BuyButtonProps> {
isDisabled={shouldDisableButton}
fontColor={ColorOption.white}
>
- Buy
+ {buttonText}
</Button>
);
}
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index e563bec73..833818900 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -4,7 +4,7 @@ import { Web3Wrapper } from '@0x/web3-wrapper';
import * as React from 'react';
import { ColorOption } from '../style/theme';
-import { AffiliateInfo, OrderProcessState, ZeroExInstantError } from '../types';
+import { AffiliateInfo, Asset, OrderProcessState, ZeroExInstantError } from '../types';
import { BuyButton } from './buy_button';
import { PlacingOrderButton } from './placing_order_button';
@@ -21,6 +21,7 @@ export interface BuyOrderStateButtonProps {
assetBuyer: AssetBuyer;
web3Wrapper: Web3Wrapper;
affiliateInfo?: AffiliateInfo;
+ selectedAsset?: Asset;
onViewTransaction: () => void;
onValidationPending: (buyQuote: BuyQuote) => void;
onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
@@ -60,6 +61,7 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP
assetBuyer={props.assetBuyer}
web3Wrapper={props.web3Wrapper}
affiliateInfo={props.affiliateInfo}
+ selectedAsset={props.selectedAsset}
onValidationPending={props.onValidationPending}
onValidationFail={props.onValidationFail}
onSignatureDenied={props.onSignatureDenied}
diff --git a/packages/instant/src/components/search_input.tsx b/packages/instant/src/components/search_input.tsx
index 3a693b9f8..71bc18915 100644
--- a/packages/instant/src/components/search_input.tsx
+++ b/packages/instant/src/components/search_input.tsx
@@ -13,10 +13,10 @@ export interface SearchInputProps extends InputProps {
}
export const SearchInput: React.StatelessComponent<SearchInputProps> = props => (
- <Container backgroundColor={props.backgroundColor} borderRadius="3px" padding=".5em .3em">
- <Flex justify="flex-start" align="flex-end">
- <Icon width={14} height={14} icon="search" color={ColorOption.lightGrey} padding="0px 12px" />
- <Input {...props} fontSize="14px" fontColor={props.fontColor} />
+ <Container backgroundColor={props.backgroundColor} borderRadius="3px" padding=".5em .5em">
+ <Flex justify="flex-start" align="center">
+ <Icon width={14} height={14} icon="search" color={ColorOption.lightGrey} padding="2px 12px" />
+ <Input {...props} type="search" fontSize="16px" fontColor={props.fontColor} />
</Flex>
</Container>
);
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index e7d909d92..636eb8fc9 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -77,6 +77,7 @@ export const Container =
${props => cssRuleIfExists(props, 'opacity')}
${props => cssRuleIfExists(props, 'cursor')}
${props => cssRuleIfExists(props, 'overflow')}
+ ${props => (props.overflow === 'scroll' ? `-webkit-overflow-scrolling: touch` : '')};
${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
${props => props.display && stylesForMedia<string>('display', props.display)}
${props => props.width && stylesForMedia<string>('width', props.width)}
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index 1ea5d8fe1..863c970ef 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -10,6 +10,7 @@ export interface InputProps {
fontSize?: string;
fontColor?: ColorOption;
placeholder?: string;
+ type?: string;
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index f67d6fb2f..7d311dc2f 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -33,7 +33,7 @@ export const Overlay =
Overlay.defaultProps = {
zIndex: zIndex.overlayDefault,
- backgroundColor: generateOverlayBlack(0.6),
+ backgroundColor: generateOverlayBlack(0.9),
};
Overlay.displayName = 'Overlay';