Skip to content

Commit ecc3f94

Browse files
likhith-derivlikhith-deriv
authored
[account-v2]/lkhith/[FEQ-1112]/Incorporated IDV Form for V2 account package (deriv-com#12910)
* feat: added base components * feat: incorporated IDV form * feat: display the form values * feat: display the form values * fix: missing type * fix: removed testcases for dummy component * fix: disabled stylelint for dummy CSS * feat: incorporated deriv-com/ui * feat: added validation * fix: resolve sonar clod issue * fix: resolved type issue * fix: updated package version * fix: idv types * fix: idv types * fix: disable CSS lint rules * fix: disable CSS lint rules * feat: added testcases * feat: incorporated review comments * Merge branch 'master' into likhith/FEQ-1112/idv-form-for-account-v2
1 parent 0a7ed3d commit ecc3f94

24 files changed

+1304
-9
lines changed

‎jest.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ module.exports = {
1010
coverageReporters: ['lcov'],
1111
coverageDirectory: './coverage/',
1212
clearMocks: true,
13-
projects: ['<rootDir>/packages/*/jest.config.js'],
13+
projects: ['<rootDir>/packages/*/jest.config.js', '<rootDir>/packages/*/jest.config.ts'],
1414
transform: {
1515
'^.+\\.jsx?$': 'babel-jest',
1616
'^.+/es/^.+$': 'babel-jest',

‎package-lock.json

+11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/account-v2/.eslintrc.js

+17-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,23 @@ module.exports = {
3838
'@typescript-eslint/no-explicit-any': 'error',
3939
'@typescript-eslint/no-unused-vars': 'error',
4040
'@typescript-eslint/sort-type-constituents': 'error',
41-
camelcase: 'error',
41+
'@typescript-eslint/naming-convention': [
42+
'error',
43+
{
44+
selector: 'variable',
45+
modifiers: ['destructured'],
46+
format: ['camelCase', 'snake_case'],
47+
},
48+
{
49+
selector: 'variable',
50+
format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
51+
leadingUnderscore: 'allow',
52+
},
53+
{
54+
selector: 'function',
55+
format: ['camelCase', 'PascalCase'],
56+
},
57+
],
4258
'import/first': 'error',
4359
'import/newline-after-import': 'error',
4460
'import/no-duplicates': 'error',

‎packages/account-v2/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"start": "rimraf dist && npm run test && npm run serve"
1212
},
1313
"dependencies": {
14+
"@deriv-com/ui": "0.0.1-beta.4",
1415
"@deriv/api": "^1.0.0",
1516
"@deriv/library": "^1.0.0",
1617
"@deriv/quill-design": "^1.3.2",

‎packages/account-v2/src/App.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
1+
// TODO - Remove this once the IDV form is moved out
2+
/* eslint-disable @typescript-eslint/no-empty-function */
13
import React from 'react';
4+
import { Formik } from 'formik';
25
import { APIProvider } from '@deriv/api';
36
import { BreakpointProvider } from '@deriv/quill-design';
47
import { FormProgress } from './components/form-progress';
58
import SignupWizard from './components/SignupWizard';
69
import { SignupWizardProvider, useSignupWizardContext } from './context/SignupWizardContext';
710
import { stepProgress } from './mocks/form-progress.mock';
11+
import { DOCUMENT_LIST, INITIAL_VALUES, SELECTED_COUNTRY } from './mocks/idv-form.mock';
12+
import { IDVForm } from './modules/IDVForm';
13+
import { getIDVFormValidationSchema } from './modules/IDVForm/utils';
814
import RouteLinks from './router/components/route-links/route-links';
915
import './index.scss';
1016

@@ -15,6 +21,9 @@ const TriggerSignupWizardModal: React.FC = () => {
1521
};
1622

1723
const App: React.FC = () => {
24+
// TODO - Remove this once the IDV form is moved out
25+
const getValidationSchema = getIDVFormValidationSchema(DOCUMENT_LIST);
26+
1827
return (
1928
<APIProvider standalone>
2029
<BreakpointProvider>
@@ -25,6 +34,10 @@ const App: React.FC = () => {
2534
{/* [TODO]:Mock - Remove hardcoded initial value once isActive comes from Modal */}
2635
<FormProgress activeStep={1} steps={stepProgress} />
2736
</SignupWizardProvider>
37+
{/* [TODO]:Mock - Remove Mock values */}
38+
<Formik initialValues={INITIAL_VALUES} onSubmit={() => {}} validationSchema={getValidationSchema}>
39+
<IDVForm selectedCountry={SELECTED_COUNTRY} />
40+
</Formik>
2841
<RouteLinks />
2942
</BreakpointProvider>
3043
</APIProvider>

‎packages/account-v2/src/components/base/WalletDropdown/WalletDropdown.scss

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
/* stylelint-disable color-no-hex */
2+
3+
.wallets-dropdown {
4+
width: 100%;
5+
position: relative;
6+
cursor: pointer;
7+
8+
&--disabled {
9+
pointer-events: none;
10+
11+
& label {
12+
color: var(--system-light-5-active-background, #999);
13+
}
14+
}
15+
16+
&__button {
17+
all: unset;
18+
right: 1.6rem;
19+
transform: rotate(0);
20+
transform-origin: 50% 45%;
21+
transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
22+
23+
&--active {
24+
transform: rotate(180deg);
25+
}
26+
}
27+
28+
&__content {
29+
width: 100%;
30+
background: var(--system-light-8-primary-background, #fff);
31+
display: flex;
32+
align-items: center;
33+
34+
.wallets-textfield__field {
35+
cursor: pointer;
36+
}
37+
}
38+
39+
&__field {
40+
position: absolute;
41+
inset: 0;
42+
min-width: 0; /* this is required to reset input's default width */
43+
padding-left: 2rem;
44+
display: flex;
45+
flex-grow: 1;
46+
font-family: inherit;
47+
outline: 0;
48+
font-size: 1.4rem;
49+
background-color: transparent;
50+
color: var(--system-light-2-general-text, #333);
51+
transition: border-color 0.2s;
52+
cursor: unset;
53+
user-select: none;
54+
&::selection {
55+
background-color: transparent;
56+
}
57+
58+
&::placeholder {
59+
color: transparent;
60+
}
61+
}
62+
63+
&__field:placeholder-shown ~ &__label {
64+
font-size: 1.4rem;
65+
cursor: text;
66+
top: 30%;
67+
padding: 0;
68+
}
69+
70+
&__field:placeholder-shown ~ &__label--with-icon {
71+
left: 4.4rem;
72+
}
73+
74+
label,
75+
&__field:focus ~ &__label {
76+
position: absolute;
77+
top: -0.5rem;
78+
display: block;
79+
transition: 0.2s;
80+
font-size: 1rem;
81+
color: var(--system-light-3-less-prominent-text, #999);
82+
background: var(--system-light-8-primary-background, #fff);
83+
padding-inline: 0.4rem;
84+
left: 1.6rem;
85+
}
86+
87+
&__field:focus ~ &__label {
88+
color: var(--brand-blue, #85acb0);
89+
}
90+
91+
&__items {
92+
position: absolute;
93+
top: 4.8rem;
94+
width: 100%;
95+
display: flex;
96+
flex-direction: column;
97+
align-items: flex-start;
98+
z-index: 2;
99+
border-radius: 0.4rem;
100+
background: var(--system-light-8-primary-background, #fff);
101+
box-shadow: 0 3.2rem 6.4rem 0 rgba(14, 14, 14, 0.14);
102+
overflow-y: auto;
103+
104+
& > :first-child {
105+
border-radius: 0.4rem 0.4rem 0 0;
106+
}
107+
108+
& > :last-child {
109+
border-radius: 0 0 0.4rem 0.4rem;
110+
}
111+
112+
&--sm {
113+
max-height: 22rem;
114+
}
115+
116+
&--md {
117+
max-height: 42rem;
118+
}
119+
120+
&--lg {
121+
max-height: 66rem;
122+
}
123+
}
124+
125+
&__icon {
126+
position: absolute;
127+
left: 1.6rem;
128+
width: 1.6rem;
129+
height: 1.6rem;
130+
}
131+
132+
&__item {
133+
padding: 10px 16px;
134+
width: 100%;
135+
z-index: 2;
136+
137+
&:hover:not(&--active) {
138+
cursor: pointer;
139+
background: var(--system-light-6-hover-background, #e6e9e9);
140+
}
141+
142+
&--active {
143+
background: var(--system-light-5-active-background, #d6dadb);
144+
}
145+
}
146+
}

0 commit comments

Comments
 (0)