feat: added exchange connection page

.vscode/settings.json

@@ -2,5 +2,5 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
-  "cSpell.words": ["endregion", "linebreak", "Topbar"]
+  "cSpell.words": ["endregion", "linebreak", "Topbar", "vanta"]
 }

src/app/(protected)/crypto/exchange/_components/Form.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Col, Row } from 'react-bootstrap';
+import { Card } from '@/shared/components/Card';
+import {
+  WizardFormWrap,
+  WizardStepMini,
+  WizardSteps,
+  WizardWrap,
+} from '@/shared/components/form/WizardFormElements';
+import StepOne from './StepOne';
+import StepTwo from './StepTwo';
+import StepThree from './StepThree';
+
+interface WizardFormProps {
+  onSubmit: (data: any) => void;
+}
+
+const WizardForm: React.FC<WizardFormProps> = ({ onSubmit }) => {
+  const [page, setPage] = useState(1);
+  const [data, setData] = useState({});
+
+  const nextPage = (newData: any) => {
+    setData(newData);
+    setPage(page + 1);
+  };
+
+  const previousPage = () => {
+    setPage(page - 1);
+  };
+
+  const submitHandler = (newData: any) => {
+    setData(newData);
+    onSubmit(newData);
+  };
+
+  return (
+    <Row>
+      <Col md={12} lg={12}>
+        <Card>
+          <WizardWrap>
+            <WizardSteps>
+              <WizardStepMini active={page === 1} />
+              <WizardStepMini active={page === 2} />
+              <WizardStepMini active={page === 3} />
+            </WizardSteps>
+            <WizardFormWrap>
+              {page === 1 && <StepOne onSubmit={nextPage} defaultValues={data} />}
+              {page === 2 && (
+                <StepTwo
+                  previousPage={previousPage}
+                  onSubmit={submitHandler}
+                  defaultValues={data}
+                />
+              )}
+              {page === 3 && <StepThree />}
+            </WizardFormWrap>
+          </WizardWrap>
+        </Card>
+      </Col>
+    </Row>
+  );
+};
+
+WizardForm.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+};
+
+export default WizardForm;

src/app/(protected)/crypto/exchange/_components/StepOne.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { FormGroup, FormGroupField } from '@/shared/components/form/FormElements';
+import { Button } from '@/shared/components/Button';
+import {
+  WizardButtonToolbar,
+  WizardFormContainer,
+  WizardTitle,
+} from '@/shared/components/form/WizardFormElements';
+import FormField from '@/shared/components/form/FormField';
+import renderRadioButtonField from '@/shared/components/form/RadioButton';
+import { exchangePlatformsGroup } from '../exchangePlatforms';
+
+interface StepOneProps {
+  onSubmit: (data: any) => void;
+  defaultValues: Record<string, any>;
+}
+
+const StepOne: React.FC<StepOneProps> = ({ onSubmit, defaultValues }) => {
+  const { handleSubmit } = useForm({ defaultValues });
+  return (
+    <WizardFormContainer $horizontal onSubmit={handleSubmit(onSubmit)}>
+      <WizardTitle>Select your exchange</WizardTitle>
+      <FormGroup>
+        <div>
+          {exchangePlatformsGroup.map((item) => (
+            <FormGroupField key={`index_${item.label}`}>
+              <FormField
+                component={renderRadioButtonField}
+                label={item.label}
+                radioValue={item.radioValue}
+                initialValue={item.initialValue}
+                disabled={item.disabled}
+              />
+            </FormGroupField>
+          ))}
+        </div>
+      </FormGroup>
+      <WizardButtonToolbar>
+        <Button variant="primary" type="submit" className="next">
+          Next
+        </Button>
+      </WizardButtonToolbar>
+    </WizardFormContainer>
+  );
+};
+
+export default StepOne;

src/app/(protected)/crypto/exchange/_components/StepThree.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import Link from 'next/link';
+import styled from 'styled-components';
+import { Button } from '@/shared/components/Button';
+import { borderLeft, paddingLeft } from '@/styles/directions';
+import { colorBlue } from '@/styles/palette';
+
+const StepThree = () => (
+  <StepThreeContainer>
+    <StepThreeContent>
+      <StepThreeImage src="/img/success.png" alt="success" />
+      <StepThreeTitleHead>
+        <StepThreeTitleAccent> Cool!</StepThreeTitleAccent>
+        <h3>Your exchange key is added successfully</h3>
+      </StepThreeTitleHead>
+      <Button as={Link} className="w-100" variant="outline-primary" href="/crypto/exchange/details">
+        Back to Exchange Management
+      </Button>
+    </StepThreeContent>
+  </StepThreeContainer>
+);
+
+export default StepThree;
+
+const StepThreeContainer = styled.div`
+  text-align: center;
+  height: 100%;
+  overflow: auto;
+  display: flex;
+
+  button {
+    margin: 0;
+  }
+`;
+
+const StepThreeContent = styled.div`
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const StepThreeImage = styled.img`
+  max-width: 500px;
+  width: 100%;
+`;
+
+const StepThreeTitleHead = styled.div`
+  margin-bottom: 30px;
+  ${paddingLeft}: 20px;
+  ${borderLeft}: 4px solid ${colorBlue};
+`;
+
+const StepThreeTitleAccent = styled.span`
+  color: ${colorBlue};
+  font-size: 24px;
+  align-self: flex-start;
+`;
+
+// endregion

src/app/(protected)/crypto/exchange/_components/StepTwo.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import React from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import PasswordField from '@/shared/components/form/Password';
+import { FormGroup, FormGroupField, FormGroupLabel } from '@/shared/components/form/FormElements';
+import { Button } from '@/shared/components/Button';
+import {
+  WizardButtonToolbar,
+  WizardFormContainer,
+  WizardTitle,
+} from '@/shared/components/form/WizardFormElements';
+import FormField from '@/shared/components/form/FormField';
+
+interface StepTwoProps {
+  onSubmit: (data: any) => void;
+  defaultValues: Record<string, any>;
+  previousPage: () => void;
+}
+
+const StepTwo: React.FC<StepTwoProps> = ({ onSubmit, previousPage, defaultValues }) => {
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm({ defaultValues });
+  return (
+    <WizardFormContainer $horizontal onSubmit={handleSubmit(onSubmit)}>
+      <WizardTitle>Fill your API keys</WizardTitle>
+      <FormGroup>
+        <FormGroupLabel className="col-md-3">Display name</FormGroupLabel>
+        <FormField
+          name="Display name"
+          as="input"
+          errors={errors}
+          placeholder="Display name"
+          control={control}
+          defaultValue=""
+        />
+      </FormGroup>
+      <FormGroup>
+        <FormGroupLabel className="col-md-3">API key</FormGroupLabel>
+        <FormField
+          name="API key"
+          as="input"
+          errors={errors}
+          placeholder="API key"
+          control={control}
+          defaultValue=""
+        />
+      </FormGroup>
+      <FormGroup>
+        <FormGroupLabel className="col-md-3">API secret</FormGroupLabel>
+        <FormGroupField className="w-100">
+          <Controller
+            name="API secret"
+            control={control}
+            defaultValue=""
+            render={({ field }) => <PasswordField input={field} placeholder="Password" />}
+          />
+        </FormGroupField>
+      </FormGroup>
+      <WizardButtonToolbar>
+        <Button variant="primary" className="previous" onClick={previousPage}>
+          Back
+        </Button>
+        <Button variant="primary" type="submit" className="next">
+          Submit
+        </Button>
+      </WizardButtonToolbar>
+    </WizardFormContainer>
+  );
+};
+
+export default StepTwo;

src/app/(protected)/crypto/exchange/exchangePlatforms.ts

@@ -0,0 +1,26 @@
+export const exchangePlatformsGroup = [
+  {
+    name: 'Radio button 1',
+    label: 'Binance',
+    radioValue: '1',
+    initialValue: '1',
+  },
+  {
+    name: 'Radio button 2',
+    label: 'TradeSanta',
+    radioValue: '2',
+  },
+  {
+    name: 'radio_disabled_button',
+    label: 'CoinRule',
+    radioValue: '1',
+    disabled: true,
+  },
+  {
+    name: 'radio_disabled_button',
+    label: 'JoinQuant',
+    radioValue: '2',
+    initialValue: '2',
+    disabled: true,
+  },
+];

src/app/(protected)/crypto/exchange/page.tsx

@@ -2,6 +2,7 @@
 
 import { Col, Container, Row } from 'react-bootstrap';
 import { useTitle } from '@/hooks/useTitle';
+import Form from './_components/Form';
 
 const CryptoExchanges = () => {
   useTitle('Exchanges - BeeQuant');
@@ -10,9 +11,10 @@ const CryptoExchanges = () => {
     <Container>
       <Row>
         <Col md={12}>
-          <h3 className="page-title">Crypto Exchanges</h3>
+          <h3 className="page-title">Connect New Exchange</h3>
         </Col>
       </Row>
+      <Form onSubmit={() => {}} />
     </Container>
   );
 };

src/shared/components/form/FormField.tsx

@@ -13,7 +13,7 @@ type FormFieldProps = {
 
 const FormField: React.FC<FormFieldProps> = ({
   input = null,
-  meta: { touched = false, error = '' },
+  meta: { touched = false, error = '' } = {},
   component: Component = 'input',
   isAboveError = false,
   wrapperClassName = '',