aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/pages/instant
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/@next/pages/instant')
-rw-r--r--packages/website/ts/@next/pages/instant/config_generator.tsx32
-rw-r--r--packages/website/ts/@next/pages/instant/configurator.tsx13
-rw-r--r--packages/website/ts/@next/pages/instant/select.tsx30
3 files changed, 47 insertions, 28 deletions
diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/@next/pages/instant/config_generator.tsx
index 4f837d7fa..a1263da58 100644
--- a/packages/website/ts/@next/pages/instant/config_generator.tsx
+++ b/packages/website/ts/@next/pages/instant/config_generator.tsx
@@ -64,7 +64,13 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
return (
<Container minWidth="350px">
<ConfigGeneratorSection title="Liquidity Source">
- <Select id="" value={value.orderSource} items={this._generateItems()} onChange={this._handleSRASelection.bind(this)} />
+ <Select
+ includeEmpty={false}
+ id=""
+ value={value.orderSource}
+ items={this._generateItems()}
+ onChange={this._handleSRASelection.bind(this)}
+ />
</ConfigGeneratorSection>
<ConfigGeneratorSection {...this._getTokenSelectorProps()}>
{this._renderTokenMultiSelectOrSpinner()}
@@ -257,7 +263,9 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
<Container marginRight="10px">
<CheckMark isChecked={isSelected} color={colors.brandLight} />
</Container>
- <CheckboxText isSelected={isSelected}>{metaData.symbol.toUpperCase()} — {metaData.name}</CheckboxText>
+ <CheckboxText isSelected={isSelected}>
+ {metaData.symbol.toUpperCase()} — {metaData.name}
+ </CheckboxText>
</Container>
),
onClick: this._handleTokenClick.bind(this, assetData),
@@ -287,18 +295,9 @@ export const ConfigGeneratorSection: React.StatelessComponent<ConfigGeneratorSec
<Container marginBottom="10px" className="flex justify-between items-center">
<Heading size="small" marginBottom="0" isFlex={true}>
<span>{title}</span>
- {isOptional && (
- <OptionalText>
- {' '}
- Optional
- </OptionalText>
- )}
+ {isOptional && <OptionalText> Optional</OptionalText>}
</Heading>
- {actionText && (
- <OptionalAction onClick={onActionTextClick}>
- {actionText}
- </OptionalAction>
- )}
+ {actionText && <OptionalAction onClick={onActionTextClick}>{actionText}</OptionalAction>}
</Container>
{children}
</Container>
@@ -319,10 +318,13 @@ interface CheckboxTextProps {
isSelected?: boolean;
}
-const CheckboxText = styled.span<CheckboxTextProps>`
+const CheckboxText =
+ styled.span <
+ CheckboxTextProps >
+ `
font-size: 14px;
line-height: 18px;
- color: ${props => props.isSelected ? colors.brandDark : '#666666'}
+ color: ${props => (props.isSelected ? colors.brandDark : '#666666')}
`;
const OptionalAction = styled(OptionalText)`
diff --git a/packages/website/ts/@next/pages/instant/configurator.tsx b/packages/website/ts/@next/pages/instant/configurator.tsx
index 007526396..7c67e6333 100644
--- a/packages/website/ts/@next/pages/instant/configurator.tsx
+++ b/packages/website/ts/@next/pages/instant/configurator.tsx
@@ -30,19 +30,16 @@ export class Configurator extends React.Component {
public render(): React.ReactNode {
const codeToDisplay = this._generateCodeDemoCode();
return (
- <FlexWrap
- isFlex={true}
- >
+ <FlexWrap isFlex={true}>
<Column width="442px" padding="0 70px 0 0">
<ConfigGenerator value={this.state.instantConfig} onConfigChange={this._handleConfigChange} />
</Column>
<Column width="100%">
<HeadingWrapper>
- <Heading size="small" marginBottom="15px">Code Snippet</Heading>
- <Link
- href={`${WebsitePaths.Wiki}#Get-Started-With-Instant`}
- isBlock={true}
- >
+ <Heading size="small" marginBottom="15px">
+ Code Snippet
+ </Heading>
+ <Link href={`${WebsitePaths.Wiki}#Get-Started-With-Instant`} isBlock={true} target="_blank">
Explore the Docs
</Link>
</HeadingWrapper>
diff --git a/packages/website/ts/@next/pages/instant/select.tsx b/packages/website/ts/@next/pages/instant/select.tsx
index 422818f9f..f5b5e60c8 100644
--- a/packages/website/ts/@next/pages/instant/select.tsx
+++ b/packages/website/ts/@next/pages/instant/select.tsx
@@ -12,23 +12,43 @@ interface SelectProps {
id: string;
items: SelectItemConfig[];
emptyText?: string;
- onChange?: () => void;
+ onChange?: (ev: React.ChangeEvent<HTMLSelectElement>) => void;
+ includeEmpty: boolean;
}
-export const Select: React.FunctionComponent<SelectProps> = ({ value, id, items, emptyText, onChange }) => {
+export const Select: React.FunctionComponent<SelectProps> = ({
+ value,
+ id,
+ items,
+ includeEmpty,
+ emptyText,
+ onChange,
+}) => {
return (
<Container>
<StyledSelect id={id} onChange={onChange}>
- <option value="">{emptyText}</option>
- {items.map((item, index) => <option key={`${id}-item-${index}`} value={item.value} selected={item.value === value} onClick={item.onClick}>{item.label}</option>)}
+ {includeEmpty && <option value="">{emptyText}</option>}
+ {items.map((item, index) => (
+ <option
+ key={`${id}-item-${index}`}
+ value={item.value}
+ selected={item.value === value}
+ onClick={item.onClick}
+ >
+ {item.label}
+ </option>
+ ))}
</StyledSelect>
- <Caret width="12" height="7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 1L6 6 1 1" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></Caret>
+ <Caret width="12" height="7" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M11 1L6 6 1 1" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+ </Caret>
</Container>
);
};
Select.defaultProps = {
emptyText: 'Select...',
+ includeEmpty: true,
};
const Container = styled.div`