diff --git a/packages/new-polymath-issuer/src/pages/DividendsWizard/Step-3/index.tsx b/packages/new-polymath-issuer/src/pages/DividendsWizard/Step-3/index.tsx index e717a4428..6c0507abf 100644 --- a/packages/new-polymath-issuer/src/pages/DividendsWizard/Step-3/index.tsx +++ b/packages/new-polymath-issuer/src/pages/DividendsWizard/Step-3/index.tsx @@ -127,6 +127,12 @@ const Step3Base: FC = ({ const [erc20TokenSymbol, setErc20TokenSymbol] = useState(''); + const isTestNet = [ + constants.NetworkIds.Kovan, + constants.NetworkIds.Local, + constants.NetworkIds.LocalVm, + ].includes(networkId); + useEffect( () => { const { isSubmitting, submitEvent } = formSubmissionStatus; @@ -218,12 +224,6 @@ const Step3Base: FC = ({ }); const difference = dividendAmount.minus(balance); - - const isTestNet = [ - constants.NetworkIds.Kovan, - constants.NetworkIds.Local, - constants.NetworkIds.LocalVm, - ].includes(networkId); const willUseFaucet = isTestNet && currency === types.Tokens.Poly; if (!willUseFaucet && difference.gte(0)) { @@ -330,9 +330,9 @@ const Step3Base: FC = ({ Dividend Distribution Name @@ -343,14 +343,34 @@ const Step3Base: FC = ({ component={CurrencySelect} inputProps={{ options: [ - types.Tokens.Erc20, - types.Tokens.Dai, - types.Tokens.Gusd, - types.Tokens.Pax, - types.Tokens.Poly, - types.Tokens.Usdc, - types.Tokens.Usdt, + { + value: types.Tokens.Erc20, + }, + { + value: types.Tokens.Dai, + }, + { + value: types.Tokens.Gusd, + isDisabled: isTestNet, + }, + { + value: types.Tokens.Pax, + isDisabled: isTestNet, + }, + { + value: types.Tokens.Poly, + }, + { + value: types.Tokens.Usdc, + isDisabled: isTestNet, + }, + { + value: types.Tokens.Usdt, + isDisabled: isTestNet, + }, ], + placeholder: 'Choose currency', + disabledOptionText: 'Not available on test network', }} onChange={(selectedCurrency: string) => updateCurrencySymbol( @@ -359,7 +379,6 @@ const Step3Base: FC = ({ : selectedCurrency ) } - placeholder="Choose currency" /> @@ -409,7 +428,9 @@ const Step3Base: FC = ({ // do nothing } }} - placeholder={'Enter ERC20 token contract address'} + inputProps={{ + placeholder: 'Enter ERC20 token contract address', + }} /> @@ -419,16 +440,16 @@ const Step3Base: FC = ({ Dividend Amount diff --git a/packages/new-polymath-issuer/src/pages/SecurityTokensDividends/Presenter.tsx b/packages/new-polymath-issuer/src/pages/SecurityTokensDividends/Presenter.tsx index 0ac63b4e8..73acb3b96 100644 --- a/packages/new-polymath-issuer/src/pages/SecurityTokensDividends/Presenter.tsx +++ b/packages/new-polymath-issuer/src/pages/SecurityTokensDividends/Presenter.tsx @@ -234,7 +234,9 @@ export const Presenter: FC = ({ Wallet Address diff --git a/packages/new-polymath-ui/src/components/FormItem/Input/index.tsx b/packages/new-polymath-ui/src/components/FormItem/Input/index.tsx index 8445d8012..7db4c86c5 100644 --- a/packages/new-polymath-ui/src/components/FormItem/Input/index.tsx +++ b/packages/new-polymath-ui/src/components/FormItem/Input/index.tsx @@ -6,7 +6,6 @@ import { Context } from '../Context'; export interface Props extends typeHelpers.Omit { FormikComponent: React.ComponentType; - placeholder?: string; component: React.ComponentType; inputProps?: { [key: string]: any }; onChange?: (value: any) => void; diff --git a/packages/new-polymath-ui/src/components/Tooltip/Tooltip.tsx b/packages/new-polymath-ui/src/components/Tooltip/Tooltip.tsx index e7ac08f03..5b2f72cb4 100644 --- a/packages/new-polymath-ui/src/components/Tooltip/Tooltip.tsx +++ b/packages/new-polymath-ui/src/components/Tooltip/Tooltip.tsx @@ -5,9 +5,10 @@ import TooltipJS, { Options } from 'tooltip.js'; import { styled } from '~/styles'; import * as sc from './styles'; -export interface TooltipProps { +export interface TooltipProps extends Options { role?: string; placement?: PopperJS.Placement; + className?: string; } export class TooltipComponent extends React.Component { @@ -19,7 +20,7 @@ export class TooltipComponent extends React.Component { private popper?: TooltipJS; public getOptions = (): Options => { - const { placement } = this.props; + const { placement, role, children, ...otherProps } = this.props; const popover = this.getPopover() as HTMLElement; return { @@ -36,6 +37,7 @@ export class TooltipComponent extends React.Component { }, }, }, + ...otherProps, }; }; @@ -78,10 +80,13 @@ export class TooltipComponent extends React.Component { } public render() { + const { role, children, className } = this.props; return ( - {
} +
+ {children} +
); } diff --git a/packages/new-polymath-ui/src/components/Tooltip/styles.ts b/packages/new-polymath-ui/src/components/Tooltip/styles.ts index a9bdfd483..9e68133ed 100644 --- a/packages/new-polymath-ui/src/components/Tooltip/styles.ts +++ b/packages/new-polymath-ui/src/components/Tooltip/styles.ts @@ -9,6 +9,7 @@ export const GlobalStyles = createGlobalStyle` position: absolute; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1); text-align: center; + z-index: ${({ theme }) => theme.zIndexes.tooltips}; } .popper .popper__arrow, diff --git a/packages/new-polymath-ui/src/components/inputs/BaseInput/index.tsx b/packages/new-polymath-ui/src/components/inputs/BaseInput/index.tsx index e844c6139..a9b98ad06 100644 --- a/packages/new-polymath-ui/src/components/inputs/BaseInput/index.tsx +++ b/packages/new-polymath-ui/src/components/inputs/BaseInput/index.tsx @@ -20,7 +20,7 @@ const Input = styled.input>` height: 2.5rem; padding: 0 1rem; font-size: ${({ theme }) => theme.fontSizes.baseText}; - color: ${({ theme }) => theme.colors.baseText}; + color: ${({ theme }) => theme.colors.highlightText}; font-family: ${({ theme }) => theme.fontFamilies.baseText}; background-color: ${({ theme }) => theme.colors.gray[1]}; border: none; @@ -33,6 +33,11 @@ const Input = styled.input>` background-color: ${({ theme }) => theme.colors.gray[0]}; } + ::placeholder { + opacity: 1; + color: ${({ theme }) => theme.colors.baseText}; + } + /* Remove ugly handles on Chrome/Mozilla for number inputs (until mouse hover) */ /* Only on desktop */ diff --git a/packages/new-polymath-ui/src/components/inputs/CurrencySelect/CurrencySelect.mdx b/packages/new-polymath-ui/src/components/inputs/CurrencySelect/CurrencySelect.mdx index d4d1381cf..b828a4333 100644 --- a/packages/new-polymath-ui/src/components/inputs/CurrencySelect/CurrencySelect.mdx +++ b/packages/new-polymath-ui/src/components/inputs/CurrencySelect/CurrencySelect.mdx @@ -23,6 +23,7 @@ import { FormItem } from '../../FormItem'; return ( { console.log(values); }} /> diff --git a/packages/new-polymath-ui/src/components/inputs/CurrencySelect/CurrencySelect.tsx b/packages/new-polymath-ui/src/components/inputs/CurrencySelect/CurrencySelect.tsx index 60d07676b..90a9aa8e9 100644 --- a/packages/new-polymath-ui/src/components/inputs/CurrencySelect/CurrencySelect.tsx +++ b/packages/new-polymath-ui/src/components/inputs/CurrencySelect/CurrencySelect.tsx @@ -1,8 +1,8 @@ import React, { FC, Fragment, ReactNode } from 'react'; import Select, { components } from 'react-select'; import { IndicatorProps } from 'react-select/lib/components/indicators'; +import { OptionProps } from 'react-select/lib/components/Option'; import { Styles } from 'react-select/lib/styles'; -import { intersectionWith, filter, includes } from 'lodash'; import { types } from '@polymathnetwork/new-shared'; import { FormikProxy, @@ -21,6 +21,7 @@ import { SvgPax } from '~/images/icons/pax'; import { withTheme, ThemeInterface, styled } from '~/styles'; import { Box } from '~/components/Box'; import { Icon } from '~/components/Icon'; +import { TooltipPrimary } from '~/components/TooltipPrimary'; import { InputProps } from '~/components/inputs/types'; import { Label } from './Label'; import * as sc from './styles'; @@ -28,13 +29,14 @@ import * as sc from './styles'; interface OptionType { value: types.Tokens; label: ReactNode; + isDisabled?: boolean; } type Value = types.Tokens | types.Tokens[]; interface ExternalProps extends EnhancedComponentProps { theme: ThemeInterface; - options: types.Tokens[]; + options: OptionType[]; placeholder?: string; } @@ -88,11 +90,12 @@ export const CURRENCY_OPTIONS: OptionType[] = [ interface SelectProps extends Pick { theme: ThemeInterface; - options: types.Tokens[]; + options: OptionType[]; value: types.Tokens | types.Tokens[]; // Override because ReactSelect does not provide the event onBlur: () => void; placeholder?: string; + disabledOptionText?: string; } const getStyles = (theme: ThemeInterface): Styles => ({ @@ -186,6 +189,19 @@ const ClearIndicator: FC = props => { ); }; +const Option: FC> = ({ children, ...props }) => { + return ( + + {children} + {props.isDisabled && props.selectProps.disabledOptionText && ( + + {props.selectProps.disabledOptionText} + + )} + + ); +}; + interface SelectValueProps { label: ReactNode; value: types.Tokens; @@ -253,13 +269,12 @@ class CurrencySelectPrimitiveBase extends React.Component { public render() { const { value, options, onChange, onBlur, theme, ...rest } = this.props; - const filteredOptions = intersectionWith( - CURRENCY_OPTIONS, - options, - (currency, symbol) => { - return currency.value === symbol; - } - ); + const mergedOptions = options.map(option => { + return { + ...CURRENCY_OPTIONS.find(currency => option.value === currency.value), + ...option, + }; + }); const valueIsArray = Array.isArray(value); let arrayValue: types.Tokens[]; @@ -270,8 +285,8 @@ class CurrencySelectPrimitiveBase extends React.Component { arrayValue = value; } - const selectedValues = filter(filteredOptions, ({ value: currencyType }) => - includes(arrayValue, currencyType) + const selectedValues = mergedOptions.filter(({ value: currencyType }) => + arrayValue.includes(currencyType) ); return ( @@ -287,8 +302,9 @@ class CurrencySelectPrimitiveBase extends React.Component { DropdownIndicator, ClearIndicator, IndicatorSeparator: null, + Option, }} - options={filteredOptions} + options={mergedOptions} value={selectedValues} onChange={this.handleChange} onMenuClose={onBlur} @@ -296,7 +312,7 @@ class CurrencySelectPrimitiveBase extends React.Component { /> {arrayValue.map(val => { - const option = filteredOptions.find( + const option = mergedOptions.find( ({ value: currencyType }) => currencyType === val ); return option ? ( diff --git a/packages/new-polymath-ui/src/styles/GlobalStyles.ts b/packages/new-polymath-ui/src/styles/GlobalStyles.ts index 75d8e3a73..954beb3dd 100644 --- a/packages/new-polymath-ui/src/styles/GlobalStyles.ts +++ b/packages/new-polymath-ui/src/styles/GlobalStyles.ts @@ -51,4 +51,8 @@ export const GlobalStyles = createGlobalStyle` opacity: 0.5; } } + + input { + font-weight: ${({ theme }) => theme.fontWeights.normal}; + } `; diff --git a/packages/new-polymath-ui/src/styles/theme.ts b/packages/new-polymath-ui/src/styles/theme.ts index 60510160a..bf7752e90 100644 --- a/packages/new-polymath-ui/src/styles/theme.ts +++ b/packages/new-polymath-ui/src/styles/theme.ts @@ -69,6 +69,7 @@ const zIndexes = { sidebar: 100, modals: 120, selects: 140, + tooltips: 160, }; const colors = {