aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2019-01-02 23:55:29 +0800
committerfragosti <francesco.agosti93@gmail.com>2019-01-02 23:55:29 +0800
commit4252a760f072da907d1b542e3bb9917db3f22b07 (patch)
treea4bf0d4eb4bb9ca68a7c842667aa8789140d57d3 /packages/instant/src
parent5721b25c3ace6e0dc336e2bfc7a0e45fd575a5a8 (diff)
downloaddexon-sol-tools-4252a760f072da907d1b542e3bb9917db3f22b07.tar
dexon-sol-tools-4252a760f072da907d1b542e3bb9917db3f22b07.tar.gz
dexon-sol-tools-4252a760f072da907d1b542e3bb9917db3f22b07.tar.bz2
dexon-sol-tools-4252a760f072da907d1b542e3bb9917db3f22b07.tar.lz
dexon-sol-tools-4252a760f072da907d1b542e3bb9917db3f22b07.tar.xz
dexon-sol-tools-4252a760f072da907d1b542e3bb9917db3f22b07.tar.zst
dexon-sol-tools-4252a760f072da907d1b542e3bb9917db3f22b07.zip
feat: dont re-render the token selector on every input change
Diffstat (limited to 'packages/instant/src')
-rw-r--r--packages/instant/src/components/erc20_token_selector.tsx39
1 files changed, 31 insertions, 8 deletions
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index fc7c21d47..b5f01e349 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -26,7 +26,7 @@ export class ERC20TokenSelector extends React.PureComponent<ERC20TokenSelectorPr
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.PureComponent<ERC20TokenSelectorPr
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.PureComponent<ERC20TokenSelectorPr
});
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;