crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1480 from 0xProject/feature/instant/performance-boost

Browse Source 
[instant] No more laggy input
This commit is contained in:
Francesco Agosti 2019-01-03 13:36:18 +01:00 committed by GitHub
commit c1150824dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 153 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/instant/src/components/amount_placeholder.tsx
View File

@ -30,3 +30,5 @@ export const AmountPlaceholder: React.StatelessComponent<AmountPlaceholderProps>
return <PlainPlaceholder color={props.color} />;
}
};
AmountPlaceholder.displayName = 'AmountPlaceholder';

10
packages/instant/src/components/animations/slide_animation.tsx
View File

@ -11,6 +11,7 @@ export interface SlideAnimationProps {
slideOutSettings: OptionallyScreenSpecific<PositionAnimationSettings>;
zIndex?: OptionallyScreenSpecific<number>;
height?: string;
onAnimationEnd?: () => void;
}
export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
@ -19,8 +20,15 @@ export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = pro
}
const positionSettings = props.animationState === 'slidIn' ? props.slideInSettings : props.slideOutSettings;
return (
<PositionAnimation height={props.height} positionSettings={positionSettings} zIndex={props.zIndex}>
<PositionAnimation
onAnimationEnd={props.onAnimationEnd}
height={props.height}
positionSettings={positionSettings}
zIndex={props.zIndex}
>
{props.children}
</PositionAnimation>
);
};
SlideAnimation.displayName = 'SlideAnimation';

2
packages/instant/src/components/buy_button.tsx
View File

@ -32,7 +32,7 @@ export interface BuyButtonProps {
onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
}
export class BuyButton extends React.Component<BuyButtonProps> {
export class BuyButton extends React.PureComponent<BuyButtonProps> {
public static defaultProps = {
onClick: util.boundNoop,
onBuySuccess: util.boundNoop,

2
packages/instant/src/components/buy_order_progress.tsx
View File

@ -31,3 +31,5 @@ export const BuyOrderProgress: React.StatelessComponent<BuyOrderProgressProps> =
}
return null;
};
BuyOrderProgress.displayName = 'BuyOrderProgress';

2
packages/instant/src/components/buy_order_state_buttons.tsx
View File

@ -71,3 +71,5 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP
/>
);
};
BuyOrderStateButtons.displayName = 'BuyOrderStateButtons';

2
packages/instant/src/components/erc20_asset_amount_input.tsx
View File

@ -31,7 +31,7 @@ export interface ERC20AssetAmountInputState {
currentFontSizePx: number;
}
export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInputProps, ERC20AssetAmountInputState> {
export class ERC20AssetAmountInput extends React.PureComponent<ERC20AssetAmountInputProps, ERC20AssetAmountInputState> {
public static defaultProps = {
onChange: util.boundNoop,
isDisabled: false,

77
packages/instant/src/components/erc20_token_selector.tsx
View File

@ -21,12 +21,12 @@ export interface ERC20TokenSelectorState {
searchQuery: string;
}
export class ERC20TokenSelector extends React.Component<ERC20TokenSelectorProps> {
export class ERC20TokenSelector extends React.PureComponent<ERC20TokenSelectorProps> {
public state: ERC20TokenSelectorState = {
searchQuery: '',
};
public render(): React.ReactNode {
const { tokens, onTokenSelect } = this.props;
const { tokens } = this.props;
return (
<Container height="100%">
<Container marginBottom="10px">
@ -42,12 +42,11 @@ export class ERC20TokenSelector extends React.Component<ERC20TokenSelectorProps>
tabIndex={-1}
/>
<Container overflow="scroll" height="calc(100% - 90px)" marginTop="10px">
{_.map(tokens, token => {
if (!this._isTokenQueryMatch(token)) {
return null;
}
return <TokenSelectorRow key={token.assetData} token={token} onClick={onTokenSelect} />;
})}
<TokenRowFilter
tokens={tokens}
onClick={this._handleTokenClick}
searchQuery={this.state.searchQuery}
/>
</Container>
</Container>
);
@ -59,8 +58,32 @@ export class ERC20TokenSelector extends React.Component<ERC20TokenSelectorProps>
});
analytics.trackTokenSelectorSearched(searchQuery);
};
private readonly _handleTokenClick = (token: ERC20Asset): void => {
this.props.onTokenSelect(token);
};
}
interface TokenRowFilterProps {
tokens: ERC20Asset[];
onClick: (token: ERC20Asset) => void;
searchQuery: string;
}
class TokenRowFilter extends React.Component<TokenRowFilterProps> {
public render(): React.ReactNode {
return _.map(this.props.tokens, token => {
if (!this._isTokenQueryMatch(token)) {
return null;
}
return <TokenSelectorRow key={token.assetData} token={token} onClick={this.props.onClick} />;
});
}
public shouldComponentUpdate(nextProps: TokenRowFilterProps): boolean {
const arePropsDeeplyEqual = _.isEqual(nextProps, this.props);
return !arePropsDeeplyEqual;
}
private readonly _isTokenQueryMatch = (token: ERC20Asset): boolean => {
const { searchQuery } = this.state;
const { searchQuery } = this.props;
const searchQueryLowerCase = searchQuery.toLowerCase().trim();
if (searchQueryLowerCase === '') {
return true;
@ -76,7 +99,7 @@ interface TokenSelectorRowProps {
onClick: (token: ERC20Asset) => void;
}
class TokenSelectorRow extends React.Component<TokenSelectorRowProps> {
class TokenSelectorRow extends React.PureComponent<TokenSelectorRowProps> {
public render(): React.ReactNode {
const { token } = this.props;
const circleColor = token.metaData.primaryColor || 'black';
@ -131,21 +154,23 @@ const getTokenIcon = (symbol: string): React.StatelessComponent | undefined => {
}
};
const TokenSelectorRowIcon: React.StatelessComponent<TokenSelectorRowIconProps> = props => {
const { token } = props;
const iconUrlIfExists = token.metaData.iconUrl;
class TokenSelectorRowIcon extends React.PureComponent<TokenSelectorRowIconProps> {
public render(): React.ReactNode {
const { token } = this.props;
const iconUrlIfExists = token.metaData.iconUrl;
const TokenIcon = getTokenIcon(token.metaData.symbol);
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>
);
const TokenIcon = getTokenIcon(token.metaData.symbol);
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>
);
}
}
};
}

2
packages/instant/src/components/install_wallet_panel_content.tsx
View File

@ -18,7 +18,7 @@ import { Button } from './ui/button';
export interface InstallWalletPanelContentProps {}
export class InstallWalletPanelContent extends React.Component<InstallWalletPanelContentProps> {
export class InstallWalletPanelContent extends React.PureComponent<InstallWalletPanelContentProps> {
public render(): React.ReactNode {
const panelProps = this._getStandardPanelContentProps();
return <StandardPanelContent {...panelProps} />;

2
packages/instant/src/components/instant_heading.tsx
View File

@ -28,7 +28,7 @@ const ICON_WIDTH = 34;
const ICON_HEIGHT = 34;
const ICON_COLOR = ColorOption.white;
export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
export class InstantHeading extends React.PureComponent<InstantHeadingProps, {}> {
public render(): React.ReactNode {
const iconOrAmounts = this._renderIcon() || this._renderAmountsSection();
return (

4
packages/instant/src/components/order_details.tsx
View File

@ -26,7 +26,7 @@ export interface OrderDetailsProps {
onBaseCurrencySwitchEth: () => void;
onBaseCurrencySwitchUsd: () => void;
}
export class OrderDetails extends React.Component<OrderDetailsProps> {
export class OrderDetails extends React.PureComponent<OrderDetailsProps> {
public render(): React.ReactNode {
const shouldShowUsdError = this.props.baseCurrency === BaseCurrency.USD && this._hadErrorFetchingUsdPrice();
return (
@ -200,7 +200,7 @@ export interface OrderDetailsRowProps {
primaryValue: React.ReactNode;
secondaryValue?: React.ReactNode;
}
export class OrderDetailsRow extends React.Component<OrderDetailsRowProps, {}> {
export class OrderDetailsRow extends React.PureComponent<OrderDetailsRowProps, {}> {
public render(): React.ReactNode {
return (
<Container padding="10px 0px" borderTop="1px dashed" borderColor={ColorOption.feintGrey}>

2
packages/instant/src/components/payment_method.tsx
View File

@ -24,7 +24,7 @@ export interface PaymentMethodProps {
onUnlockWalletClick: () => void;
}
export class PaymentMethod extends React.Component<PaymentMethodProps> {
export class PaymentMethod extends React.PureComponent<PaymentMethodProps> {
public render(): React.ReactNode {
return (
<Container width="100%" height="120px" padding="20px 20px 0px 20px">

2
packages/instant/src/components/payment_method_dropdown.tsx
View File

@ -16,7 +16,7 @@ export interface PaymentMethodDropdownProps {
network: Network;
}
export class PaymentMethodDropdown extends React.Component<PaymentMethodDropdownProps> {
export class PaymentMethodDropdown extends React.PureComponent<PaymentMethodDropdownProps> {
public render(): React.ReactNode {
const { accountAddress, accountEthBalanceInWei } = this.props;
const value = format.ethAddress(accountAddress);

2
packages/instant/src/components/placing_order_button.tsx
View File

@ -14,3 +14,5 @@ export const PlacingOrderButton: React.StatelessComponent<{}> = props => (
Placing Order&hellip;
</Button>
);
PlacingOrderButton.displayName = 'PlacingOrderButton';

2
packages/instant/src/components/scaling_amount_input.tsx
View File

@ -26,7 +26,7 @@ interface ScalingAmountInputState {
}
const { stringToMaybeBigNumber, areMaybeBigNumbersEqual } = maybeBigNumberUtil;
export class ScalingAmountInput extends React.Component<ScalingAmountInputProps, ScalingAmountInputState> {
export class ScalingAmountInput extends React.PureComponent<ScalingAmountInputProps, ScalingAmountInputState> {
public static defaultProps = {
onAmountChange: util.boundNoop,
onFontSizeChange: util.boundNoop,

2
packages/instant/src/components/scaling_input.tsx
View File

@ -51,7 +51,7 @@ const defaultScalingSettings: ScalingSettings = {
additionalInputSpaceInCh: 0.4,
};
export class ScalingInput extends React.Component<ScalingInputProps> {
export class ScalingInput extends React.PureComponent<ScalingInputProps> {
public static defaultProps = {
onChange: util.boundNoop,
onFontSizeChange: util.boundNoop,

1
packages/instant/src/components/secondary_button.tsx
View File

@ -24,3 +24,4 @@ export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = p
SecondaryButton.defaultProps = {
width: '100%',
};
SecondaryButton.displayName = 'SecondaryButton';

1
packages/instant/src/components/section_header.tsx
View File

@ -18,3 +18,4 @@ export const SectionHeader: React.StatelessComponent<SectionHeaderProps> = props
</Text>
);
};
SectionHeader.displayName = 'SectionHeader';

4
packages/instant/src/components/sliding_error.tsx
View File

@ -38,6 +38,8 @@ export const Error: React.StatelessComponent<ErrorProps> = props => (
</Container>
);
Error.displayName = 'Error';
export interface SlidingErrorProps extends ErrorProps {
animationState: SlideAnimationState;
}
@ -94,3 +96,5 @@ export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props =
</SlideAnimation>
);
};
SlidingError.displayName = 'SlidingError';

74
packages/instant/src/components/sliding_panel.tsx
View File

@ -26,42 +26,48 @@ export const Panel: React.StatelessComponent<PanelProps> = ({ children, onClose
</Container>
);
Panel.displayName = 'Panel';
export interface SlidingPanelProps extends PanelProps {
animationState: SlideAnimationState;
onAnimationEnd?: () => void;
}
export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = props => {
if (props.animationState === 'none') {
return null;
export class SlidingPanel extends React.PureComponent<SlidingPanelProps> {
public render(): React.ReactNode {
if (this.props.animationState === 'none') {
return null;
}
const { animationState, onAnimationEnd, ...rest } = this.props;
const slideAmount = '100%';
const slideUpSettings: PositionAnimationSettings = {
duration: '0.3s',
timingFunction: 'ease-in-out',
top: {
from: slideAmount,
to: '0px',
},
position: 'absolute',
};
const slideDownSettings: PositionAnimationSettings = {
duration: '0.3s',
timingFunction: 'ease-out',
top: {
from: '0px',
to: slideAmount,
},
position: 'absolute',
};
return (
<SlideAnimation
slideInSettings={slideUpSettings}
slideOutSettings={slideDownSettings}
animationState={animationState}
height="100%"
onAnimationEnd={onAnimationEnd}
>
<Panel {...rest} />
</SlideAnimation>
);
}
const { animationState, ...rest } = props;
const slideAmount = '100%';
const slideUpSettings: PositionAnimationSettings = {
duration: '0.3s',
timingFunction: 'ease-in-out',
top: {
from: slideAmount,
to: '0px',
},
position: 'absolute',
};
const slideDownSettings: PositionAnimationSettings = {
duration: '0.3s',
timingFunction: 'ease-out',
top: {
from: '0px',
to: slideAmount,
},
position: 'absolute',
};
return (
<SlideAnimation
slideInSettings={slideUpSettings}
slideOutSettings={slideDownSettings}
animationState={animationState}
height="100%"
>
<Panel {...rest} />
</SlideAnimation>
);
};
}

2
packages/instant/src/components/standard_panel_content.tsx
View File

@ -71,3 +71,5 @@ export const StandardPanelContent: React.StatelessComponent<StandardPanelContent
<Container>{action}</Container>
</Container>
);
StandardPanelContent.displayName = 'StandardPanelContent';

2
packages/instant/src/components/standard_sliding_panel.tsx
View File

@ -9,7 +9,7 @@ export interface StandardSlidingPanelProps extends StandardSlidingPanelSettings
onClose: () => void;
}
export class StandardSlidingPanel extends React.Component<StandardSlidingPanelProps> {
export class StandardSlidingPanel extends React.PureComponent<StandardSlidingPanelProps> {
public render(): React.ReactNode {
const { animationState, content, onClose } = this.props;
return (

2
packages/instant/src/components/time_counter.tsx
View File

@ -16,7 +16,7 @@ interface TimeCounterState {
elapsedSeconds: number;
}
export class TimeCounter extends React.Component<TimeCounterProps, TimeCounterState> {
export class TimeCounter extends React.PureComponent<TimeCounterProps, TimeCounterState> {
public state = {
elapsedSeconds: 0,
};

2
packages/instant/src/components/timed_progress_bar.tsx
View File

@ -17,7 +17,7 @@ export interface TimedProgressBarProps {
* Goes from 0% -> PROGRESS_STALL_AT_WIDTH over time of expectedTimeMs
* When hasEnded set to true, goes to 100% through animation of PROGRESS_FINISH_ANIMATION_TIME_MS length of time
*/
export class TimedProgressBar extends React.Component<TimedProgressBarProps, {}> {
export class TimedProgressBar extends React.PureComponent<TimedProgressBarProps, {}> {
private readonly _barRef = React.createRef<HTMLDivElement>();
public render(): React.ReactNode {

4
packages/instant/src/components/ui/dropdown.tsx
View File

@ -26,7 +26,7 @@ export interface DropdownState {
isOpen: boolean;
}
export class Dropdown extends React.Component<DropdownProps, DropdownState> {
export class Dropdown extends React.PureComponent<DropdownProps, DropdownState> {
public static defaultProps = {
items: [],
};
@ -138,3 +138,5 @@ export const DropdownItem: React.StatelessComponent<DropdownItemProps> = ({ text
</Text>
</Container>
);
DropdownItem.displayName = 'DropdownItem';

2
packages/instant/src/components/wallet_prompt.tsx
View File

@ -45,3 +45,5 @@ WalletPrompt.defaultProps = {
primaryColor: ColorOption.darkOrange,
secondaryColor: ColorOption.lightOrange,
};
WalletPrompt.displayName = 'WalletPrompt';

2
packages/instant/src/components/zero_ex_instant.tsx
View File

@ -17,3 +17,5 @@ export const ZeroExInstant: React.StatelessComponent<ZeroExInstantProps> = props
</div>
);
};
ZeroExInstant.displayName = 'ZeroExInstant';

13
packages/instant/src/components/zero_ex_instant_container.tsx
View File

@ -24,7 +24,10 @@ export interface ZeroExInstantContainerState {
tokenSelectionPanelAnimationState: SlideAnimationState;
}
export class ZeroExInstantContainer extends React.Component<ZeroExInstantContainerProps, ZeroExInstantContainerState> {
export class ZeroExInstantContainer extends React.PureComponent<
ZeroExInstantContainerProps,
ZeroExInstantContainerState
> {
public state = {
tokenSelectionPanelAnimationState: 'none' as SlideAnimationState,
};
@ -60,6 +63,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
<SlidingPanel
animationState={this.state.tokenSelectionPanelAnimationState}
onClose={this._handlePanelCloseClickedX}
onAnimationEnd={this._handleSlidingPanelAnimationEnd}
>
<AvailableERC20TokenSelector onTokenSelect={this._handlePanelCloseAfterChose} />
</SlidingPanel>
@ -98,4 +102,11 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
tokenSelectionPanelAnimationState: 'slidOut',
});
};
private readonly _handleSlidingPanelAnimationEnd = (): void => {
if (this.state.tokenSelectionPanelAnimationState === 'slidOut') {
// When the slidOut animation completes, don't keep the panel mounted.
// Performance optimization
this.setState({ tokenSelectionPanelAnimationState: 'none' });
}
};
}

2
packages/instant/src/components/zero_ex_instant_overlay.tsx
View File

@ -49,3 +49,5 @@ export const ZeroExInstantOverlay: React.StatelessComponent<ZeroExInstantOverlay
</ZeroExInstantProvider>
);
};
ZeroExInstantOverlay.displayName = 'ZeroExInstantOverlay';

2
packages/instant/src/components/zero_ex_instant_provider.tsx
View File

@ -21,7 +21,7 @@ import { providerStateFactory } from '../util/provider_state_factory';
export type ZeroExInstantProviderProps = ZeroExInstantBaseConfig;
export class ZeroExInstantProvider extends React.Component<ZeroExInstantProviderProps> {
export class ZeroExInstantProvider extends React.PureComponent<ZeroExInstantProviderProps> {
private readonly _store: Store;
private _accountUpdateHeartbeat?: Heartbeater;
private _buyQuoteHeartbeat?: Heartbeater;

4
packages/instant/src/containers/latest_error.tsx
View File

@ -14,7 +14,7 @@ import { zIndex } from '../style/z_index';
import { Asset, DisplayStatus, Omit, SlideAnimationState } from '../types';
import { errorFlasher } from '../util/error_flasher';
export interface LatestErrorComponentProps {
interface LatestErrorComponentProps {
asset?: Asset;
latestErrorMessage?: string;
animationState: SlideAnimationState;
@ -22,7 +22,7 @@ export interface LatestErrorComponentProps {
onOverlayClick: () => void;
}
export const LatestErrorComponent: React.StatelessComponent<LatestErrorComponentProps> = props => {
const LatestErrorComponent: React.StatelessComponent<LatestErrorComponentProps> = props => {
if (!props.latestErrorMessage) {
// Render a hidden SlidingError such that instant does not move when a real error is rendered.
return (