Skip to content

Commit 83ccbbe

Browse files
JedayJeday
committed
chore: imports
1 parent 56b1c92 commit 83ccbbe

30 files changed

Lines changed: 287 additions & 220 deletions

‎features/create-vault/consts.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,20 +30,19 @@ export const MAIN_SETTINGS: MainSettingsEntryType[] = [
3030
name: 'confirmExpiry',
3131
title: 'Confirmation Lifetime',
3232
label: 'Confirmation Lifetime, hours',
33-
afterText: 'hours',
3433
dataType: 'time',
3534
type: 'number',
3635
},
3736
{
3837
name: 'vaultManager',
3938
title: 'Vault Manager',
40-
label: 'Vault Manager address or ENS',
39+
label: 'Vault Manager address',
4140
dataType: 'addressArray',
4241
},
4342
{
4443
name: 'nodeOperatorManager',
4544
title: 'Node Operator Manager',
46-
label: 'Node Operator Manager address or ENS',
45+
label: 'Node Operator Manager address',
4746
dataType: 'address',
4847
},
4948
];

‎features/create-vault/create-vault-form/create-vault-form.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
11
import { FC, PropsWithChildren, useCallback } from 'react';
22
import { useForm, FormProvider } from 'react-hook-form';
33
import { zodResolver } from '@hookform/resolvers/zod';
4-
import { useCreateVault } from 'features/create-vault/create-vault-form/use-create-vault';
54

65
import { FormController } from 'shared/hook-form/form-controller';
76

87
import { CreateVaultSchema } from 'features/create-vault/types';
9-
import { createVaultSchema } from './validation';
108
import {
119
CREATE_VAULT_FORM_STEPS,
1210
CREATE_VAULT_STEPS,
1311
getSectionNameByStep,
1412
} from 'features/create-vault/consts';
1513

16-
import { FormTitle, FormBlock } from './styles';
14+
import { createVaultSchema } from './validation';
15+
import { useCreateVault } from './use-create-vault';
16+
1717
import { MainSettings } from './stages/main-settings';
1818
import { Confirmation } from './stages/confirmation';
19+
import { ResultOverview } from './stages/result-overview';
20+
21+
import { FormTitle, FormBlock, FormSubtitle } from './styles';
1922

2023
import type { Address } from 'viem';
21-
import { ResultOverview } from './stages/result-overview';
2224

2325
const defaultValues: CreateVaultSchema = {
2426
nodeOperator: '' as Address,
@@ -53,22 +55,24 @@ export const CreateVaultForm: FC<PropsWithChildren> = () => {
5355

5456
return (
5557
<FormProvider {...formObject}>
56-
<FormBlock>
57-
<FormController onSubmit={onSubmit} retryEvent={retryEvent}>
58+
<FormController onSubmit={onSubmit} retryEvent={retryEvent}>
59+
<FormBlock>
5860
{mutation.isSuccess ? (
5961
<ResultOverview transactionResult={mutation.data} />
6062
) : (
6163
<>
62-
Step {step} of {CREATE_VAULT_STEPS}
64+
<FormSubtitle>
65+
Step {step} of {CREATE_VAULT_STEPS}
66+
</FormSubtitle>
6367
<FormTitle>{getSectionNameByStep(step)}</FormTitle>
6468
<MainSettings isShown={step === CREATE_VAULT_FORM_STEPS.main} />
6569
<Confirmation
6670
isShown={step === CREATE_VAULT_FORM_STEPS.confirm}
6771
/>
6872
</>
6973
)}
70-
</FormController>
71-
</FormBlock>
74+
</FormBlock>
75+
</FormController>
7276
</FormProvider>
7377
);
7478
};

‎features/create-vault/create-vault-form/form-controllers/address-array-input.tsx‎

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,21 @@
11
import { useFieldArray, useFormContext } from 'react-hook-form';
2-
import {
3-
AddressInputGroup,
4-
AddressList,
5-
AppendButton,
6-
InputTitle,
7-
} from './styles';
8-
import { Address } from 'viem';
9-
102
import { Plus } from '@lidofinance/lido-ui';
3+
114
import { ButtonClose } from 'shared/components';
5+
import { AddressInputGroup, AddressList, AppendButton } from './styles';
126
import { AddressInputBase } from './address-input-base';
137

14-
export type AddressArrayProps = {
15-
name: string;
16-
label?: string;
17-
title: string;
18-
notes?: string;
19-
dataType?: 'addressArray';
20-
afterText?: string; // TODO: add option for text like 'hours' (confirmExpiry field)
21-
};
8+
import type { MainSettingsEntryType } from 'features/create-vault/types';
9+
import type { FC } from 'react';
10+
import type { Address } from 'viem';
11+
12+
export type AddressArrayProps = MainSettingsEntryType;
2213

2314
type PlaceholderForm = {
2415
addresses: { value: Address }[];
2516
};
2617

27-
export const AddressArrayInput = ({
28-
name,
29-
title,
30-
label,
31-
}: AddressArrayProps) => {
18+
export const AddressArrayInput: FC<AddressArrayProps> = ({ name, label }) => {
3219
const { register } = useFormContext();
3320
const { fields, append, remove } = useFieldArray<
3421
PlaceholderForm,
@@ -37,7 +24,6 @@ export const AddressArrayInput = ({
3724
const allowDelete = fields.length > 1;
3825
return (
3926
<AddressList>
40-
<InputTitle>{title}</InputTitle>
4127
{fields.map((field, index) => {
4228
return (
4329
<AddressInputGroup key={field.id}>

‎features/create-vault/create-vault-form/form-controllers/address-input-base.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
import { Input, Loader, Identicon } from '@lidofinance/lido-ui';
21
import { forwardRef, useState } from 'react';
2+
import { Address, isAddress } from 'viem';
33
import {
44
UseFormRegisterReturn,
55
useFormContext,
66
useWatch,
77
} from 'react-hook-form';
8+
import { Input, Loader, Identicon } from '@lidofinance/lido-ui';
9+
810
import { AddressLinkEtherscan } from 'shared/components';
9-
import { Address, isAddress } from 'viem';
10-
import { ReactComponent as ErrorTriangle } from 'assets/icons/error-triangle.svg';
1111
import { AddressInputWrapper, EtherScanLink } from './styles';
1212

13+
import { ReactComponent as ErrorTriangle } from 'assets/icons/error-triangle.svg';
14+
1315
type AddressInputProps = Omit<UseFormRegisterReturn, 'ref'> &
1416
React.ComponentProps<typeof Input>;
1517

‎features/create-vault/create-vault-form/form-controllers/address-input.tsx‎

Lines changed: 7 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,16 @@
1-
import { FC } from 'react';
21
import { useFormContext } from 'react-hook-form';
32

4-
import { InputNotes, InputTitle } from './styles';
3+
import { AddressInputBase } from './address-input-base';
54

6-
import {
5+
import type { FC } from 'react';
6+
import type {
77
CreateVaultSchema,
8-
MainSettingsKeys,
8+
MainSettingsEntryType,
99
} from 'features/create-vault/types';
10-
import { AddressInputBase } from './address-input-base';
1110

12-
export type AddressInputProps = {
13-
name: MainSettingsKeys;
14-
label?: string;
15-
title: string;
16-
notes?: string;
17-
dataType: 'address';
18-
afterText?: string;
19-
};
11+
export type AddressInputProps = MainSettingsEntryType;
2012

21-
export const AddressInput: FC<AddressInputProps> = ({
22-
name,
23-
label,
24-
title,
25-
notes,
26-
}) => {
13+
export const AddressInput: FC<AddressInputProps> = ({ name, label }) => {
2714
const { register } = useFormContext<CreateVaultSchema>();
28-
return (
29-
<div>
30-
<InputTitle>{title}</InputTitle>
31-
<AddressInputBase {...register(name)} label={label} />
32-
{!!notes && (
33-
<InputNotes>
34-
<b>Note: </b>
35-
{notes}
36-
</InputNotes>
37-
)}
38-
</div>
39-
);
15+
return <AddressInputBase {...register(name)} label={label} />;
4016
};

‎features/create-vault/create-vault-form/form-controllers/general-input.tsx‎

Lines changed: 20 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,15 @@
11
import { FC, useState } from 'react';
2-
2+
import { useFormContext } from 'react-hook-form';
33
import { Input } from '@lidofinance/lido-ui';
4-
import { InputTitle } from './styles';
54

6-
import {
5+
import type {
76
CreateVaultSchema,
8-
InputDataType,
9-
MainSettingsKeys,
7+
MainSettingsEntryType,
108
} from 'features/create-vault/types';
11-
import { useFormContext } from 'react-hook-form';
129

13-
export type GeneralInputProps = {
14-
name: MainSettingsKeys;
15-
label?: string;
16-
type?: string;
17-
title: string;
18-
notes?: string;
19-
dataType?: InputDataType;
20-
afterText?: string; // TODO: add option for text like 'hours' (confirmExpiry field)
21-
};
10+
export type GeneralInputProps = MainSettingsEntryType;
2211

23-
export const GeneralInput: FC<GeneralInputProps> = ({
24-
name,
25-
label,
26-
title,
27-
type,
28-
}) => {
12+
export const GeneralInput: FC<GeneralInputProps> = ({ name, label, type }) => {
2913
const [inFocus, setInFocus] = useState(false);
3014

3115
const {
@@ -35,23 +19,20 @@ export const GeneralInput: FC<GeneralInputProps> = ({
3519

3620
const error = errors[name];
3721
return (
38-
<div>
39-
<InputTitle>{title}</InputTitle>
40-
<Input
41-
label={label}
42-
type="text"
43-
error={inFocus ? error?.message : Boolean(error?.message)}
44-
fullwidth
45-
onFocus={() => {
46-
setInFocus(true);
47-
}}
48-
{...register(name, {
49-
onBlur: () => {
50-
setInFocus(false);
51-
},
52-
valueAsNumber: type === 'number',
53-
})}
54-
/>
55-
</div>
22+
<Input
23+
label={label}
24+
type="text"
25+
error={inFocus ? error?.message : Boolean(error?.message)}
26+
fullwidth
27+
onFocus={() => {
28+
setInFocus(true);
29+
}}
30+
{...register(name, {
31+
onBlur: () => {
32+
setInFocus(false);
33+
},
34+
valueAsNumber: type === 'number',
35+
})}
36+
/>
5637
);
5738
};

‎features/create-vault/create-vault-form/form-controllers/input-resolver.tsx‎

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,42 @@
1-
import { FC } from 'react';
1+
import { Hint } from 'features/create-vault/shared/hint';
2+
23
import { GeneralInput, GeneralInputProps } from './general-input';
34
import { AddressInput } from './address-input';
45
import { AddressArrayInput } from './address-array-input';
56

6-
export const InputResolver: FC<GeneralInputProps> = (props) => {
7-
const { dataType } = props;
7+
import { InputContainer, InputNotes, InputTitle } from './styles';
88

9+
import type { FC } from 'react';
10+
11+
const getInput = (dataType: GeneralInputProps['dataType']) => {
912
switch (dataType) {
1013
case 'addressArray':
11-
return <AddressArrayInput {...props} dataType={dataType} />;
14+
return AddressArrayInput;
1215
case 'address':
13-
return <AddressInput {...props} dataType={dataType} />;
16+
return AddressInput;
1417
default:
15-
return <GeneralInput {...props} />;
18+
return GeneralInput;
1619
}
1720
};
21+
22+
export const InputResolver: FC<GeneralInputProps> = (props) => {
23+
const { dataType, title, notes, hint } = props;
24+
25+
const Input = getInput(dataType);
26+
27+
return (
28+
<InputContainer>
29+
<InputTitle>
30+
{title}
31+
<Hint hint={hint} />
32+
</InputTitle>
33+
<Input {...props} />
34+
{!!notes && (
35+
<InputNotes>
36+
<b>Note: </b>
37+
{notes}
38+
</InputNotes>
39+
)}
40+
</InputContainer>
41+
);
42+
};

‎features/create-vault/create-vault-form/form-controllers/styles.ts‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,43 @@
1-
import { ButtonIcon } from '@lidofinance/lido-ui';
21
import styled from 'styled-components';
2+
import { ButtonIcon, Question } from '@lidofinance/lido-ui';
3+
4+
/// InputResolver
5+
6+
export const InputContainer = styled.div`
7+
display: flex;
8+
flex-direction: column;
9+
align-self: stretch;
10+
gap: ${({ theme }) => theme.spaceMap.sm}px;
11+
`;
312

413
export const InputTitle = styled.p`
514
font-size: ${({ theme }) => theme.fontSizesMap.xs}px;
615
font-weight: 700;
716
line-height: 24px;
817
color: ${({ theme }) => theme.colors.text};
18+
display: inline-flex;
19+
`;
20+
21+
export const QuestionIcon = styled(Question)`
22+
width: 20px;
23+
height: 20px;
24+
fill: ${({ theme }) => theme.colors.textSecondary};
25+
align-self: center;
926
`;
1027

1128
export const InputNotes = styled.p`
12-
margin-top: 8px;
1329
font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;
1430
font-weight: 400;
1531
line-height: 20px;
16-
color: ${({ theme }) => theme.colors.text};
32+
color: ${({ theme }) => theme.colors.textSecondary};
33+
34+
& > b {
35+
color: ${({ theme }) => theme.colors.text};
36+
}
1737
`;
1838

39+
// AddressInput
40+
1941
export const AddressInputWrapper = styled.div`
2042
position: relative;
2143
flex-grow: 1;
@@ -42,6 +64,9 @@ export const AddressList = styled.div`
4264
export const AppendButton = styled(ButtonIcon)`
4365
width: fit-content;
4466
padding: 0;
67+
padding-inline: 4px;
68+
display: inline-flex;
69+
align-items: center;
4570
4671
&:hover,
4772
&:active {

0 commit comments

Comments
 (0)