Feature/currency select disabled tooltip

packages/new-polymath-issuer/src/pages/DividendsWizard/Step-3/index.tsx

@@ -127,6 +127,12 @@ const Step3Base: FC<Props> = ({
 
   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<Props> = ({
           });
 
           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<Props> = ({
                   <FormItem.Label>Dividend Distribution Name</FormItem.Label>
                   <FormItem.Input
                     component={TextInput}
-                    placeholder="Enter the name"
                     inputProps={{
                       maxLength: dividendsTitleLength,
+                      placeholder: 'Enter the name',
                     }}
                   />
                   <FormItem.Error />
@@ -343,14 +343,34 @@ const Step3Base: FC<Props> = ({
                     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<Props> = ({
                           : selectedCurrency
                       )
                     }
-                    placeholder="Choose currency"
                   />
                   <FormItem.Error />
                 </FormItem>
@@ -409,7 +428,9 @@ const Step3Base: FC<Props> = ({
                           // do nothing
                         }
                       }}
-                      placeholder={'Enter ERC20 token contract address'}
+                      inputProps={{
+                        placeholder: 'Enter ERC20 token contract address',
+                      }}
                     />
                     <FormItem.Error />
                   </FormItem>
@@ -419,16 +440,16 @@ const Step3Base: FC<Props> = ({
                     <FormItem.Label>Dividend Amount</FormItem.Label>
                     <FormItem.Input
                       component={NumberInput}
-                      placeholder="Enter the value"
                       inputProps={{
                         min: new BigNumber(0),
                         max: new BigNumber('1000000000000000000'),
-                        maxDecimals:2,
+                        maxDecimals: 2,
                         unit:
                           currency === types.Tokens.Erc20
                             ? erc20TokenSymbol
                             : currency,
                         useBigNumbers: true,
+                        placeholder: 'Enter the value',
                       }}
                       onChange={updateDividendAmount}
                     />

packages/new-polymath-issuer/src/pages/SecurityTokensDividends/Presenter.tsx

@@ -234,7 +234,9 @@ export const Presenter: FC<Props> = ({
                 <FormItem.Label>Wallet Address</FormItem.Label>
                 <FormItem.Input
                   component={TextInput}
-                  placeholder="Wallet address"
+                  inputProps={{
+                    placeholder: 'Wallet address',
+                  }}
                 />
                 <FormItem.Error />
               </FormItem>

packages/new-polymath-ui/src/components/FormItem/Input/index.tsx

@@ -6,7 +6,6 @@ import { Context } from '../Context';
 export interface Props
   extends typeHelpers.Omit<FieldConfig, 'name' | 'component'> {
   FormikComponent: React.ComponentType<FieldConfig>;
-  placeholder?: string;
   component: React.ComponentType<any>;
   inputProps?: { [key: string]: any };
   onChange?: (value: any) => void;

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<TooltipProps> {
@@ -19,7 +20,7 @@ export class TooltipComponent extends React.Component<TooltipProps> {
   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<TooltipProps> {
           },
         },
       },
+      ...otherProps,
     };
   };
 
@@ -78,10 +80,13 @@ export class TooltipComponent extends React.Component<TooltipProps> {
   }
 
   public render() {
+    const { role, children, className } = this.props;
     return (
       <Fragment>
         <sc.GlobalStyles />
-        {<div {...this.props} />}
+        <div className={className} role={role}>
+          {children}
+        </div>
       </Fragment>
     );
   }

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,

packages/new-polymath-ui/src/components/inputs/BaseInput/index.tsx

@@ -20,7 +20,7 @@ const Input = styled.input<BaseInputProps & StyledProps<any>>`
   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<BaseInputProps & StyledProps<any>>`
     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 */
 

packages/new-polymath-ui/src/components/inputs/CurrencySelect/CurrencySelect.mdx

@@ -23,6 +23,7 @@ import { FormItem } from '../../FormItem';
     return (
       <CurrencySelectPrimitive
         placeholder="Raise in"
+        disabledOptionText="Not available on test network"
         value={values}
         onChange={(values) => { console.log(values); }}
       />

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,20 +21,22 @@ 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';
 
 interface OptionType {
   value: types.Tokens;
   label: ReactNode;
+  isDisabled?: boolean;
 }
 
 type Value = types.Tokens | types.Tokens[];
 
 interface ExternalProps extends EnhancedComponentProps<Value> {
   theme: ThemeInterface;
-  options: types.Tokens[];
+  options: OptionType[];
   placeholder?: string;
 }
 
@@ -88,11 +90,12 @@ export const CURRENCY_OPTIONS: OptionType[] = [
 interface SelectProps
   extends Pick<InputProps, 'onChange' | 'error' | 'name' | 'autoComplete'> {
   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<CustomIndicatorProps> = props => {
   );
 };
 
+const Option: FC<OptionProps<OptionType>> = ({ children, ...props }) => {
+  return (
+    <components.Option {...props}>
+      {children}
+      {props.isDisabled && props.selectProps.disabledOptionText && (
+        <TooltipPrimary boundariesElement="viewport">
+          {props.selectProps.disabledOptionText}
+        </TooltipPrimary>
+      )}
+    </components.Option>
+  );
+};
+
 interface SelectValueProps {
   label: ReactNode;
   value: types.Tokens;
@@ -253,13 +269,12 @@ class CurrencySelectPrimitiveBase extends React.Component<SelectProps> {
   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<SelectProps> {
       arrayValue = value;
     }
 
-    const selectedValues = filter(filteredOptions, ({ value: currencyType }) =>
-      includes(arrayValue, currencyType)
+    const selectedValues = mergedOptions.filter(({ value: currencyType }) =>
+      arrayValue.includes(currencyType)
     );
 
     return (
@@ -287,16 +302,17 @@ class CurrencySelectPrimitiveBase extends React.Component<SelectProps> {
               DropdownIndicator,
               ClearIndicator,
               IndicatorSeparator: null,
+              Option,
             }}
-            options={filteredOptions}
+            options={mergedOptions}
             value={selectedValues}
             onChange={this.handleChange}
             onMenuClose={onBlur}
             {...rest}
           />
         </SelectWrapper>
         {arrayValue.map(val => {
-          const option = filteredOptions.find(
+          const option = mergedOptions.find(
             ({ value: currencyType }) => currencyType === val
           );
           return option ? (

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};
+  }
 `;

packages/new-polymath-ui/src/styles/theme.ts

@@ -69,6 +69,7 @@ const zIndexes = {
   sidebar: 100,
   modals: 120,
   selects: 140,
+  tooltips: 160,
 };
 
 const colors = {