diff options
Diffstat (limited to 'packages/instant/src/components')
4 files changed, 60 insertions, 10 deletions
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx index 520ac33d5..b825255c4 100644 --- a/packages/instant/src/components/erc20_asset_amount_input.tsx +++ b/packages/instant/src/components/erc20_asset_amount_input.tsx @@ -22,7 +22,8 @@ export interface ERC20AssetAmountInputProps { onSelectAssetClick?: (asset?: ERC20Asset) => void; startingFontSizePx: number; fontColor?: ColorOption; - isDisabled: boolean; + isInputDisabled: boolean; + canSelectOtherAsset: boolean; numberOfAssetsAvailable?: number; } @@ -50,14 +51,15 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput ); } private readonly _renderContentForAsset = (asset: ERC20Asset): React.ReactNode => { - const { onChange, ...rest } = this.props; - const amountBorderBottom = this.props.isDisabled ? '' : `1px solid ${transparentWhite}`; + const { onChange, isInputDisabled, ...rest } = this.props; + const amountBorderBottom = isInputDisabled ? '' : `1px solid ${transparentWhite}`; const onSymbolClick = this._generateSelectAssetClickHandler(); return ( <React.Fragment> <Container borderBottom={amountBorderBottom} display="inline-block"> <ScalingAmountInput {...rest} + isDisabled={isInputDisabled} textLengthThreshold={this._textLengthThresholdForAsset(asset)} maxFontSizePx={this.props.startingFontSizePx} onAmountChange={this._handleChange} @@ -74,11 +76,11 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput fontSize={`${this.state.currentFontSizePx}px`} fontColor={ColorOption.white} textTransform="uppercase" - onClick={onSymbolClick} + onClick={this.props.canSelectOtherAsset ? onSymbolClick : undefined} > {assetUtils.formattedSymbolForAsset(asset)} </Text> - {this._renderChevronIcon()} + {this.props.canSelectOtherAsset && this._renderChevronIcon()} </Flex> </Container> </React.Fragment> diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx index e4d8749a9..1b1921acb 100644 --- a/packages/instant/src/components/erc20_token_selector.tsx +++ b/packages/instant/src/components/erc20_token_selector.tsx @@ -78,6 +78,7 @@ interface TokenSelectorRowProps { class TokenSelectorRow extends React.Component<TokenSelectorRowProps> { public render(): React.ReactNode { const { token } = this.props; + const circleColor = token.metaData.primaryColor || 'black'; const displaySymbol = assetUtils.bestNameForAsset(token); return ( <Container @@ -93,11 +94,9 @@ class TokenSelectorRow extends React.Component<TokenSelectorRowProps> { <Container marginLeft="5px"> <Flex justify="flex-start"> <Container marginRight="10px"> - <Circle diameter={30} rawColor={token.metaData.primaryColor}> - <Flex height="100%"> - <Text fontColor={ColorOption.white} fontSize="8px"> - {displaySymbol} - </Text> + <Circle diameter={26} rawColor={circleColor}> + <Flex height="100%" width="100%"> + <TokenSelectorRowIcon token={token} /> </Flex> </Circle> </Container> @@ -117,3 +116,25 @@ class TokenSelectorRow extends React.Component<TokenSelectorRowProps> { this.props.onClick(this.props.token); }; } + +interface TokenSelectorRowIconProps { + token: ERC20Asset; +} + +const TokenSelectorRowIcon: React.StatelessComponent<TokenSelectorRowIconProps> = props => { + const { token } = props; + const iconUrlIfExists = token.metaData.iconUrl; + const TokenIcon = require(`../assets/icons/${token.metaData.symbol}.svg`); + const displaySymbol = assetUtils.bestNameForAsset(token); + if (!_.isUndefined(iconUrlIfExists)) { + return <img src={iconUrlIfExists} />; + } else if (!_.isUndefined(TokenIcon)) { + return <TokenIcon />; + } else { + return ( + <Text fontColor={ColorOption.white} fontSize="8px"> + {displaySymbol} + </Text> + ); + } +}; diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index 698bfef17..47c938472 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -1,5 +1,7 @@ import * as React from 'react'; +import PoweredByLogo from '../assets/powered_by_0x.svg'; +import { ZERO_EX_SITE_URL } from '../constants'; import { AvailableERC20TokenSelector } from '../containers/available_erc20_token_selector'; import { ConnectedBuyOrderProgressOrPaymentMethod } from '../containers/connected_buy_order_progress_or_payment_method'; import { CurrentStandardSlidingPanel } from '../containers/current_standard_sliding_panel'; @@ -64,6 +66,17 @@ export class ZeroExInstantContainer extends React.Component<{}, ZeroExInstantCon </SlidingPanel> <CurrentStandardSlidingPanel /> </Container> + <Container + display={{ sm: 'none', default: 'block' }} + marginTop="10px" + marginLeft="auto" + marginRight="auto" + width="140px" + > + <a href={ZERO_EX_SITE_URL} target="_blank"> + <PoweredByLogo /> + </a> + </Container> </Container> </React.Fragment> ); diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx index 8be53ee20..9435d8c7c 100644 --- a/packages/instant/src/components/zero_ex_instant_provider.tsx +++ b/packages/instant/src/components/zero_ex_instant_provider.tsx @@ -12,6 +12,7 @@ import { DEFAULT_STATE, DefaultState, State } from '../redux/reducer'; import { store, Store } from '../redux/store'; import { fonts } from '../style/fonts'; import { AccountState, AffiliateInfo, AssetMetaData, Network, OrderSource } from '../types'; +import { analytics, disableAnalytics } from '../util/analytics'; import { assetUtils } from '../util/asset'; import { errorFlasher } from '../util/error_flasher'; import { gasPriceEstimator } from '../util/gas_price_estimator'; @@ -36,6 +37,7 @@ export interface ZeroExInstantProviderOptionalProps { additionalAssetMetaDataMap: ObjectMap<AssetMetaData>; networkId: Network; affiliateInfo: AffiliateInfo; + shouldDisableAnalyticsTracking: boolean; } export class ZeroExInstantProvider extends React.Component<ZeroExInstantProviderProps> { @@ -121,6 +123,18 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider gasPriceEstimator.getGasInfoAsync(); // tslint:disable-next-line:no-floating-promises this._flashErrorIfWrongNetwork(); + + // Analytics + disableAnalytics(this.props.shouldDisableAnalyticsTracking || false); + analytics.addEventProperties({ + embeddedHost: window.location.host, + embeddedUrl: window.location.href, + networkId: state.network, + providerName: state.providerState.name, + gitSha: process.env.GIT_SHA, + npmVersion: process.env.NPM_PACKAGE_VERSION, + }); + analytics.trackInstantOpened(); } public componentWillUnmount(): void { if (this._accountUpdateHeartbeat) { |