aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-10-24 11:02:50 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-10-24 11:05:43 +0800
commit47737d4d0fce56454c9ee2b43782b824b88cb942 (patch)
tree808d167f371963ad858002a7bb631c7a8906d029 /packages/instant/src/components
parent2e184f081e546acbc8ed3e5e05de5a9e5b56a3d8 (diff)
downloaddexon-sol-tools-47737d4d0fce56454c9ee2b43782b824b88cb942.tar
dexon-sol-tools-47737d4d0fce56454c9ee2b43782b824b88cb942.tar.gz
dexon-sol-tools-47737d4d0fce56454c9ee2b43782b824b88cb942.tar.bz2
dexon-sol-tools-47737d4d0fce56454c9ee2b43782b824b88cb942.tar.lz
dexon-sol-tools-47737d4d0fce56454c9ee2b43782b824b88cb942.tar.xz
dexon-sol-tools-47737d4d0fce56454c9ee2b43782b824b88cb942.tar.zst
dexon-sol-tools-47737d4d0fce56454c9ee2b43782b824b88cb942.zip
feat: cover more token symbol edge cases
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r--packages/instant/src/components/asset_amount_input.tsx21
-rw-r--r--packages/instant/src/components/instant_heading.tsx4
-rw-r--r--packages/instant/src/components/scaling_input.tsx2
-rw-r--r--packages/instant/src/components/ui/container.tsx2
4 files changed, 22 insertions, 7 deletions
diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
index 368ef10c2..960b8bc95 100644
--- a/packages/instant/src/components/asset_amount_input.tsx
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -8,7 +8,7 @@ import { assetUtils } from '../util/asset';
import { util } from '../util/util';
import { ScalingAmountInput } from './scaling_amount_input';
-import { Container, Text } from './ui';
+import { Container, Flex, Text } from './ui';
// Asset amounts only apply to ERC20 assets
export interface AssetAmountInputProps {
@@ -35,17 +35,17 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps, Ass
public render(): React.ReactNode {
const { asset, onChange, ...rest } = this.props;
return (
- <Container>
+ <Container whiteSpace="nowrap">
<Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block">
<ScalingAmountInput
{...rest}
- textLengthThreshold={4}
+ textLengthThreshold={this._textLengthThresholdForAsset(asset)}
maxFontSizePx={this.props.startingFontSizePx}
onChange={this._handleChange}
onFontSizeChange={this._handleFontSizeChange}
/>
</Container>
- <Container display="inline-block" marginLeft="10px" title={assetUtils.bestNameForAsset(asset)}>
+ <Container display="inline-flex" marginLeft="10px" title={assetUtils.bestNameForAsset(asset)}>
<Text
fontSize={`${this.state.currentFontSizePx}px`}
fontColor={ColorOption.white}
@@ -65,4 +65,17 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps, Ass
currentFontSizePx: fontSizePx,
});
};
+ private readonly _textLengthThresholdForAsset = (asset?: ERC20Asset): number => {
+ if (_.isUndefined(asset)) {
+ return 3;
+ }
+ const symbol = asset.metaData.symbol;
+ if (symbol.length <= 3) {
+ return 5;
+ }
+ if (symbol.length === 5) {
+ return 3;
+ }
+ return 4;
+ };
}
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 7664d31ae..c9f0ea95a 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -70,10 +70,10 @@ export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = pro
</Container>
<Flex direction="row" justify="space-between">
<Flex height="65px">
- <SelectedAssetAmountInput startingFontSizePx={45} />
+ <SelectedAssetAmountInput startingFontSizePx={38} />
</Flex>
<Flex direction="column" justify="space-between">
- <Container marginBottom="5px">
+ <Container marginBottom="5px" whiteSpace="nowrap">
<Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
{loadingOrAmount(props.quoteState, displaytotalEthBaseAmount(props))}
</Text>
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 7f8e505de..fadb3466b 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -47,7 +47,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
public static defaultProps = {
onChange: util.boundNoop,
onFontSizeChange: util.boundNoop,
- maxLength: 8,
+ maxLength: 7,
scalingSettings: defaultScalingSettings,
};
public state = {
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 293042120..e44cfff1e 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -26,6 +26,7 @@ export interface ContainerProps {
backgroundColor?: ColorOption;
hasBoxShadow?: boolean;
zIndex?: number;
+ whiteSpace?: string;
}
export const Container = styled<ContainerProps, 'div'>('div')`
@@ -50,6 +51,7 @@ export const Container = styled<ContainerProps, 'div'>('div')`
${props => cssRuleIfExists(props, 'border-top')}
${props => cssRuleIfExists(props, 'border-bottom')}
${props => cssRuleIfExists(props, 'z-index')}
+ ${props => cssRuleIfExists(props, 'white-space')}
${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')};