aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-10-30 09:37:23 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-10-30 09:38:23 +0800
commitd0a0af51306bf5e5b46fd8982c70b271212af42f (patch)
tree5e1c9bd7e3068605eca7a859a704c97d280a435b /packages/instant
parent4cba70f32e4300cea7396f08687f2e53a7728e68 (diff)
downloaddexon-sol-tools-d0a0af51306bf5e5b46fd8982c70b271212af42f.tar
dexon-sol-tools-d0a0af51306bf5e5b46fd8982c70b271212af42f.tar.gz
dexon-sol-tools-d0a0af51306bf5e5b46fd8982c70b271212af42f.tar.bz2
dexon-sol-tools-d0a0af51306bf5e5b46fd8982c70b271212af42f.tar.lz
dexon-sol-tools-d0a0af51306bf5e5b46fd8982c70b271212af42f.tar.xz
dexon-sol-tools-d0a0af51306bf5e5b46fd8982c70b271212af42f.tar.zst
dexon-sol-tools-d0a0af51306bf5e5b46fd8982c70b271212af42f.zip
feat: add 'Select Token' UI to asset amount input
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/src/components/erc20_asset_amount_input.tsx69
-rw-r--r--packages/instant/src/components/instant_heading.tsx3
-rw-r--r--packages/instant/src/components/ui/container.tsx2
-rw-r--r--packages/instant/src/components/ui/flex.tsx4
4 files changed, 61 insertions, 17 deletions
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index 5abb34c2f..4108fd0e8 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -8,13 +8,14 @@ import { BigNumberInput } from '../util/big_number_input';
import { util } from '../util/util';
import { ScalingAmountInput } from './scaling_amount_input';
-import { Container, Text } from './ui';
+import { Container, Flex, Icon, Text } from './ui';
// Asset amounts only apply to ERC20 assets
export interface ERC20AssetAmountInputProps {
asset?: ERC20Asset;
value?: BigNumberInput;
onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
+ onSymbolClick: (asset?: ERC20Asset) => void;
startingFontSizePx: number;
fontColor?: ColorOption;
isDisabled: boolean;
@@ -27,6 +28,7 @@ export interface ERC20AssetAmountInputState {
export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInputProps, ERC20AssetAmountInputState> {
public static defaultProps = {
onChange: util.boundNoop,
+ onSymbolClick: util.boundNoop,
isDisabled: false,
};
constructor(props: ERC20AssetAmountInputProps) {
@@ -36,10 +38,18 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
};
}
public render(): React.ReactNode {
- const { asset, onChange, ...rest } = this.props;
- const amountBorderBottom = this.props.isDisabled ? '' : `1px solid ${transparentWhite}`;
+ const { asset } = this.props;
return (
<Container whiteSpace="nowrap">
+ {!_.isUndefined(asset) ? this._renderContentForAsset(asset) : this._renderBackupContent()}
+ </Container>
+ );
+ }
+ private readonly _renderContentForAsset = (asset: ERC20Asset): React.ReactNode => {
+ const { onChange, ...rest } = this.props;
+ const amountBorderBottom = this.props.isDisabled ? '' : `1px solid ${transparentWhite}`;
+ return (
+ <React.Fragment>
<Container borderBottom={amountBorderBottom} display="inline-block">
<ScalingAmountInput
{...rest}
@@ -49,18 +59,50 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
onFontSizeChange={this._handleFontSizeChange}
/>
</Container>
- <Container display="inline-flex" marginLeft="10px" title={assetUtils.bestNameForAsset(asset)}>
- <Text
- fontSize={`${this.state.currentFontSizePx}px`}
- fontColor={ColorOption.white}
- textTransform="uppercase"
- >
- {assetUtils.formattedSymbolForAsset(asset)}
- </Text>
+ <Container
+ cursor="pointer"
+ display="inline-block"
+ marginLeft="8px"
+ title={assetUtils.bestNameForAsset(asset, undefined)}
+ >
+ <Flex inline={true}>
+ <Text
+ fontSize={`${this.state.currentFontSizePx}px`}
+ fontColor={ColorOption.white}
+ textTransform="uppercase"
+ onClick={this._handleSymbolClick}
+ >
+ {assetUtils.formattedSymbolForAsset(asset)}
+ </Text>
+ {this._renderChevronIcon()}
+ </Flex>
</Container>
+ </React.Fragment>
+ );
+ };
+ private readonly _renderBackupContent = (): React.ReactNode => {
+ return (
+ <Flex>
+ <Text
+ fontSize="30px"
+ fontColor={ColorOption.white}
+ opacity={0.7}
+ fontWeight="500"
+ onClick={this._handleSymbolClick}
+ >
+ Select Token
+ </Text>
+ {this._renderChevronIcon()}
+ </Flex>
+ );
+ };
+ private readonly _renderChevronIcon = (): React.ReactNode => {
+ return (
+ <Container marginLeft="5px" onClick={this._handleSymbolClick}>
+ <Icon icon="chevron" width={12} />
</Container>
);
- }
+ };
private readonly _handleChange = (value?: BigNumberInput): void => {
this.props.onChange(value, this.props.asset);
};
@@ -69,6 +111,9 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
currentFontSizePx: fontSizePx,
});
};
+ private readonly _handleSymbolClick = () => {
+ this.props.onSymbolClick(this.props.asset);
+ };
// For assets with symbols of different length,
// start scaling the input at different character lengths
private readonly _textLengthThresholdForAsset = (asset?: ERC20Asset): number => {
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 00c45ba3a..0b41d44d7 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -48,9 +48,6 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
<Flex direction="row" justify="space-between">
<Flex height="60px">
<SelectedERC20AssetAmountInput startingFontSizePx={38} />
- <Container marginLeft="5px">
- <Icon icon="chevron" width={12} />
- </Container>
</Flex>
<Flex direction="column" justify="space-between">
{iconOrAmounts}
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 76b570de7..b6842b294 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -28,6 +28,7 @@ export interface ContainerProps {
zIndex?: number;
whiteSpace?: string;
opacity?: number;
+ cursor?: string;
}
export const Container =
@@ -57,6 +58,7 @@ export const Container =
${props => cssRuleIfExists(props, 'z-index')}
${props => cssRuleIfExists(props, 'white-space')}
${props => cssRuleIfExists(props, 'opacity')}
+ ${props => cssRuleIfExists(props, 'cursor')}
${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index 5fa3fc95b..29c6511bb 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -9,14 +9,14 @@ export interface FlexProps {
width?: string;
height?: string;
backgroundColor?: ColorOption;
- className?: string;
+ inline?: boolean;
}
export const Flex =
styled.div <
FlexProps >
`
- display: flex;
+ display: ${props => (props.inline ? 'inline-flex' : 'flex')};
flex-direction: ${props => props.direction};
flex-wrap: ${props => props.flexWrap};
justify-content: ${props => props.justify};