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

Allow user to select other token on success

Browse Source
This commit is contained in:
Steve Klebanoff 2018-11-20 09:51:14 -08:00
parent 3169b72406
commit 7ad5dbc59d
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,6 +23,7 @@ export interface ERC20AssetAmountInputProps {
startingFontSizePx: number; startingFontSizePx: number;
fontColor?: ColorOption; fontColor?: ColorOption;
isDisabled: boolean; isDisabled: boolean;
canSelectOtherAsset: boolean;
numberOfAssetsAvailable?: number; numberOfAssetsAvailable?: number;
} }
@ -53,7 +54,6 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
const { onChange, ...rest } = this.props; const { onChange, ...rest } = this.props;
const amountBorderBottom = this.props.isDisabled ? '' : `1px solid ${transparentWhite}`; const amountBorderBottom = this.props.isDisabled ? '' : `1px solid ${transparentWhite}`;
const onSymbolClick = this._generateSelectAssetClickHandler(); const onSymbolClick = this._generateSelectAssetClickHandler();
const isEnabled = !this.props.isDisabled;
return ( return (
<React.Fragment> <React.Fragment>
<Container borderBottom={amountBorderBottom} display="inline-block"> <Container borderBottom={amountBorderBottom} display="inline-block">
@ -75,11 +75,11 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
fontSize={`${this.state.currentFontSizePx}px`} fontSize={`${this.state.currentFontSizePx}px`}
fontColor={ColorOption.white} fontColor={ColorOption.white}
textTransform="uppercase" textTransform="uppercase"
onClick={isEnabled ? onSymbolClick : undefined} onClick={this.props.canSelectOtherAsset ? onSymbolClick : undefined}
> >
{assetUtils.formattedSymbolForAsset(asset)} {assetUtils.formattedSymbolForAsset(asset)}
</Text> </Text>
{isEnabled && this._renderChevronIcon()} {this.props.canSelectOtherAsset && this._renderChevronIcon()}
</Flex> </Flex>
</Container> </Container>
</React.Fragment> </React.Fragment>

8
packages/instant/src/containers/selected_erc20_asset_amount_input.ts
View File

@ -26,6 +26,7 @@ interface ConnectedState {
isDisabled: boolean; isDisabled: boolean;
numberOfAssetsAvailable?: number; numberOfAssetsAvailable?: number;
affiliateInfo?: AffiliateInfo; affiliateInfo?: AffiliateInfo;
canSelectOtherAsset: boolean;
} }
interface ConnectedDispatch { interface ConnectedDispatch {
@ -50,6 +51,11 @@ const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputP
? (state.selectedAsset as ERC20Asset) ? (state.selectedAsset as ERC20Asset)
: undefined; : undefined;
const numberOfAssetsAvailable = _.isUndefined(state.availableAssets) ? undefined : state.availableAssets.length; const numberOfAssetsAvailable = _.isUndefined(state.availableAssets) ? undefined : state.availableAssets.length;
const canSelectOtherAsset =
numberOfAssetsAvailable && numberOfAssetsAvailable > 1
? isEnabled || processState === OrderProcessState.Success
: false;
const assetBuyer = state.providerState.assetBuyer; const assetBuyer = state.providerState.assetBuyer;
return { return {
assetBuyer, assetBuyer,
@ -58,6 +64,7 @@ const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputP
isDisabled, isDisabled,
numberOfAssetsAvailable, numberOfAssetsAvailable,
affiliateInfo: state.affiliateInfo, affiliateInfo: state.affiliateInfo,
canSelectOtherAsset,
}; };
}; };
@ -104,6 +111,7 @@ const mergeProps = (
}, },
isDisabled: connectedState.isDisabled, isDisabled: connectedState.isDisabled,
numberOfAssetsAvailable: connectedState.numberOfAssetsAvailable, numberOfAssetsAvailable: connectedState.numberOfAssetsAvailable,
canSelectOtherAsset: connectedState.canSelectOtherAsset,
}; };
}; };