Skip to content

Commit 896f40f

Browse files
RafaelVidaurreRafaelVidaurre
authored
Merge pull request #559 from PolymathNetwork/feature/currency-select-disabled-tooltip
Feature/currency select disabled tooltip
2 parents 754f7a5 + 2184980 commit 896f40f

10 files changed

Lines changed: 93 additions & 38 deletions

File tree

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

Lines changed: 39 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,12 @@ const Step3Base: FC<Props> = ({
127127

128128
const [erc20TokenSymbol, setErc20TokenSymbol] = useState('');
129129

130+
const isTestNet = [
131+
constants.NetworkIds.Kovan,
132+
constants.NetworkIds.Local,
133+
constants.NetworkIds.LocalVm,
134+
].includes(networkId);
135+
130136
useEffect(
131137
() => {
132138
const { isSubmitting, submitEvent } = formSubmissionStatus;
@@ -218,12 +224,6 @@ const Step3Base: FC<Props> = ({
218224
});
219225

220226
const difference = dividendAmount.minus(balance);
221-
222-
const isTestNet = [
223-
constants.NetworkIds.Kovan,
224-
constants.NetworkIds.Local,
225-
constants.NetworkIds.LocalVm,
226-
].includes(networkId);
227227
const willUseFaucet = isTestNet && currency === types.Tokens.Poly;
228228

229229
if (!willUseFaucet && difference.gte(0)) {
@@ -330,9 +330,9 @@ const Step3Base: FC<Props> = ({
330330
<FormItem.Label>Dividend Distribution Name</FormItem.Label>
331331
<FormItem.Input
332332
component={TextInput}
333-
placeholder="Enter the name"
334333
inputProps={{
335334
maxLength: dividendsTitleLength,
335+
placeholder: 'Enter the name',
336336
}}
337337
/>
338338
<FormItem.Error />
@@ -343,14 +343,34 @@ const Step3Base: FC<Props> = ({
343343
component={CurrencySelect}
344344
inputProps={{
345345
options: [
346-
types.Tokens.Erc20,
347-
types.Tokens.Dai,
348-
types.Tokens.Gusd,
349-
types.Tokens.Pax,
350-
types.Tokens.Poly,
351-
types.Tokens.Usdc,
352-
types.Tokens.Usdt,
346+
{
347+
value: types.Tokens.Erc20,
348+
},
349+
{
350+
value: types.Tokens.Dai,
351+
},
352+
{
353+
value: types.Tokens.Gusd,
354+
isDisabled: isTestNet,
355+
},
356+
{
357+
value: types.Tokens.Pax,
358+
isDisabled: isTestNet,
359+
},
360+
{
361+
value: types.Tokens.Poly,
362+
},
363+
{
364+
value: types.Tokens.Usdc,
365+
isDisabled: isTestNet,
366+
},
367+
{
368+
value: types.Tokens.Usdt,
369+
isDisabled: isTestNet,
370+
},
353371
],
372+
placeholder: 'Choose currency',
373+
disabledOptionText: 'Not available on test network',
354374
}}
355375
onChange={(selectedCurrency: string) =>
356376
updateCurrencySymbol(
@@ -359,7 +379,6 @@ const Step3Base: FC<Props> = ({
359379
: selectedCurrency
360380
)
361381
}
362-
placeholder="Choose currency"
363382
/>
364383
<FormItem.Error />
365384
</FormItem>
@@ -409,7 +428,9 @@ const Step3Base: FC<Props> = ({
409428
// do nothing
410429
}
411430
}}
412-
placeholder={'Enter ERC20 token contract address'}
431+
inputProps={{
432+
placeholder: 'Enter ERC20 token contract address',
433+
}}
413434
/>
414435
<FormItem.Error />
415436
</FormItem>
@@ -419,16 +440,16 @@ const Step3Base: FC<Props> = ({
419440
<FormItem.Label>Dividend Amount</FormItem.Label>
420441
<FormItem.Input
421442
component={NumberInput}
422-
placeholder="Enter the value"
423443
inputProps={{
424444
min: new BigNumber(0),
425445
max: new BigNumber('1000000000000000000'),
426-
maxDecimals:2,
446+
maxDecimals: 2,
427447
unit:
428448
currency === types.Tokens.Erc20
429449
? erc20TokenSymbol
430450
: currency,
431451
useBigNumbers: true,
452+
placeholder: 'Enter the value',
432453
}}
433454
onChange={updateDividendAmount}
434455
/>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,9 @@ export const Presenter: FC<Props> = ({
237237
<FormItem.Label>Wallet Address</FormItem.Label>
238238
<FormItem.Input
239239
component={TextInput}
240-
placeholder="Wallet address"
240+
inputProps={{
241+
placeholder: 'Wallet address',
242+
}}
241243
/>
242244
<FormItem.Error />
243245
</FormItem>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { Context } from '../Context';
66
export interface Props
77
extends typeHelpers.Omit<FieldConfig, 'name' | 'component'> {
88
FormikComponent: React.ComponentType<FieldConfig>;
9-
placeholder?: string;
109
component: React.ComponentType<any>;
1110
inputProps?: { [key: string]: any };
1211
onChange?: (value: any) => void;

‎packages/new-polymath-ui/src/components/Tooltip/Tooltip.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ import TooltipJS, { Options } from 'tooltip.js';
55
import { styled } from '~/styles';
66
import * as sc from './styles';
77

8-
export interface TooltipProps {
8+
export interface TooltipProps extends Options {
99
role?: string;
1010
placement?: PopperJS.Placement;
11+
className?: string;
1112
}
1213

1314
export class TooltipComponent extends React.Component<TooltipProps> {
@@ -19,7 +20,7 @@ export class TooltipComponent extends React.Component<TooltipProps> {
1920
private popper?: TooltipJS;
2021

2122
public getOptions = (): Options => {
22-
const { placement } = this.props;
23+
const { placement, role, children, ...otherProps } = this.props;
2324
const popover = this.getPopover() as HTMLElement;
2425

2526
return {
@@ -36,6 +37,7 @@ export class TooltipComponent extends React.Component<TooltipProps> {
3637
},
3738
},
3839
},
40+
...otherProps,
3941
};
4042
};
4143

@@ -78,10 +80,13 @@ export class TooltipComponent extends React.Component<TooltipProps> {
7880
}
7981

8082
public render() {
83+
const { role, children, className } = this.props;
8184
return (
8285
<Fragment>
8386
<sc.GlobalStyles />
84-
{<div {...this.props} />}
87+
<div className={className} role={role}>
88+
{children}
89+
</div>
8590
</Fragment>
8691
);
8792
}

‎packages/new-polymath-ui/src/components/Tooltip/styles.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export const GlobalStyles = createGlobalStyle`
99
position: absolute;
1010
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
1111
text-align: center;
12+
z-index: ${({ theme }) => theme.zIndexes.tooltips};
1213
}
1314
1415
.popper .popper__arrow,

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const Input = styled.input<BaseInputProps & StyledProps<any>>`
2020
height: 2.5rem;
2121
padding: 0 1rem;
2222
font-size: ${({ theme }) => theme.fontSizes.baseText};
23-
color: ${({ theme }) => theme.colors.baseText};
23+
color: ${({ theme }) => theme.colors.highlightText};
2424
font-family: ${({ theme }) => theme.fontFamilies.baseText};
2525
background-color: ${({ theme }) => theme.colors.gray[1]};
2626
border: none;
@@ -33,6 +33,11 @@ const Input = styled.input<BaseInputProps & StyledProps<any>>`
3333
background-color: ${({ theme }) => theme.colors.gray[0]};
3434
}
3535
36+
::placeholder {
37+
opacity: 1;
38+
color: ${({ theme }) => theme.colors.baseText};
39+
}
40+
3641
/* Remove ugly handles on Chrome/Mozilla for number inputs (until mouse hover) */
3742
/* Only on desktop */
3843

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { FormItem } from '../../FormItem';
2323
return (
2424
<CurrencySelectPrimitive
2525
placeholder="Raise in"
26+
disabledOptionText="Not available on test network"
2627
value={values}
2728
onChange={(values) => { console.log(values); }}
2829
/>

‎packages/new-polymath-ui/src/components/inputs/CurrencySelect/CurrencySelect.tsx‎

Lines changed: 30 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, { FC, Fragment, ReactNode } from 'react';
22
import Select, { components } from 'react-select';
33
import { IndicatorProps } from 'react-select/lib/components/indicators';
4+
import { OptionProps } from 'react-select/lib/components/Option';
45
import { Styles } from 'react-select/lib/styles';
5-
import { intersectionWith, filter, includes } from 'lodash';
66
import { types } from '@polymathnetwork/new-shared';
77
import {
88
FormikProxy,
@@ -21,20 +21,22 @@ import { SvgPax } from '~/images/icons/pax';
2121
import { withTheme, ThemeInterface, styled } from '~/styles';
2222
import { Box } from '~/components/Box';
2323
import { Icon } from '~/components/Icon';
24+
import { TooltipPrimary } from '~/components/TooltipPrimary';
2425
import { InputProps } from '~/components/inputs/types';
2526
import { Label } from './Label';
2627
import * as sc from './styles';
2728

2829
interface OptionType {
2930
value: types.Tokens;
3031
label: ReactNode;
32+
isDisabled?: boolean;
3133
}
3234

3335
type Value = types.Tokens | types.Tokens[];
3436

3537
interface ExternalProps extends EnhancedComponentProps<Value> {
3638
theme: ThemeInterface;
37-
options: types.Tokens[];
39+
options: OptionType[];
3840
placeholder?: string;
3941
}
4042

@@ -88,11 +90,12 @@ export const CURRENCY_OPTIONS: OptionType[] = [
8890
interface SelectProps
8991
extends Pick<InputProps, 'onChange' | 'error' | 'name' | 'autoComplete'> {
9092
theme: ThemeInterface;
91-
options: types.Tokens[];
93+
options: OptionType[];
9294
value: types.Tokens | types.Tokens[];
9395
// Override because ReactSelect does not provide the event
9496
onBlur: () => void;
9597
placeholder?: string;
98+
disabledOptionText?: string;
9699
}
97100

98101
const getStyles = (theme: ThemeInterface): Styles => ({
@@ -186,6 +189,19 @@ const ClearIndicator: FC<CustomIndicatorProps> = props => {
186189
);
187190
};
188191

192+
const Option: FC<OptionProps<OptionType>> = ({ children, ...props }) => {
193+
return (
194+
<components.Option {...props}>
195+
{children}
196+
{props.isDisabled && props.selectProps.disabledOptionText && (
197+
<TooltipPrimary boundariesElement="viewport">
198+
{props.selectProps.disabledOptionText}
199+
</TooltipPrimary>
200+
)}
201+
</components.Option>
202+
);
203+
};
204+
189205
interface SelectValueProps {
190206
label: ReactNode;
191207
value: types.Tokens;
@@ -253,13 +269,12 @@ class CurrencySelectPrimitiveBase extends React.Component<SelectProps> {
253269
public render() {
254270
const { value, options, onChange, onBlur, theme, ...rest } = this.props;
255271

256-
const filteredOptions = intersectionWith(
257-
CURRENCY_OPTIONS,
258-
options,
259-
(currency, symbol) => {
260-
return currency.value === symbol;
261-
}
262-
);
272+
const mergedOptions = options.map(option => {
273+
return {
274+
...CURRENCY_OPTIONS.find(currency => option.value === currency.value),
275+
...option,
276+
};
277+
});
263278

264279
const valueIsArray = Array.isArray(value);
265280
let arrayValue: types.Tokens[];
@@ -270,8 +285,8 @@ class CurrencySelectPrimitiveBase extends React.Component<SelectProps> {
270285
arrayValue = value;
271286
}
272287

273-
const selectedValues = filter(filteredOptions, ({ value: currencyType }) =>
274-
includes(arrayValue, currencyType)
288+
const selectedValues = mergedOptions.filter(({ value: currencyType }) =>
289+
arrayValue.includes(currencyType)
275290
);
276291

277292
return (
@@ -287,16 +302,17 @@ class CurrencySelectPrimitiveBase extends React.Component<SelectProps> {
287302
DropdownIndicator,
288303
ClearIndicator,
289304
IndicatorSeparator: null,
305+
Option,
290306
}}
291-
options={filteredOptions}
307+
options={mergedOptions}
292308
value={selectedValues}
293309
onChange={this.handleChange}
294310
onMenuClose={onBlur}
295311
{...rest}
296312
/>
297313
</SelectWrapper>
298314
{arrayValue.map(val => {
299-
const option = filteredOptions.find(
315+
const option = mergedOptions.find(
300316
({ value: currencyType }) => currencyType === val
301317
);
302318
return option ? (

‎packages/new-polymath-ui/src/styles/GlobalStyles.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,8 @@ export const GlobalStyles = createGlobalStyle`
5151
opacity: 0.5;
5252
}
5353
}
54+
55+
input {
56+
font-weight: ${({ theme }) => theme.fontWeights.normal};
57+
}
5458
`;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ const zIndexes = {
6969
sidebar: 100,
7070
modals: 120,
7171
selects: 140,
72+
tooltips: 160,
7273
};
7374

7475
const colors = {

0 commit comments

Comments
 (0)