DEC-629: Loan page

package.json

@@ -45,7 +45,7 @@
     "clamp-js": "^0.7.0",
     "crypto-js": "^4.1.1",
     "d3": "~7.3.0",
-    "decentr-js": "^5.2.4",
+    "decentr-js": "^5.2.5",
     "highcharts": "^10.0.0",
     "highcharts-angular": "^3.0.0",
     "html2canvas": "~1.4.1",

projects/charon/src/app/portal/components/portal-navigation/portal-navigation.component.ts

@@ -51,6 +51,11 @@ export class PortalNavigationComponent implements OnInit {
           i18nKey: 'portal.portal_navigation.staking',
           link: ['/', AppRoute.Portal, PortalRoute.Staking],
         },
+        {
+          colorClass: 'color-primary',
+          i18nKey: 'portal.portal_navigation.loan',
+          link: ['/', AppRoute.Portal, PortalRoute.Loan],
+        },
         ...networkId === NetworkId.Mainnet
           ? [{
             colorClass: 'color-primary',

projects/charon/src/app/portal/modules/index.ts

@@ -3,3 +3,4 @@ export * from './assets';
 export * from './pdv-rate';
 export * from './staking';
 export * from './vpn';
+export * from './loan';

projects/charon/src/app/portal/modules/loan/components/index.ts

@@ -0,0 +1,7 @@
+import { RequestLoanFormComponent } from './request-loan-form';
+
+export * from './request-loan-form';
+
+export const LOAN_COMPONENTS = [
+  RequestLoanFormComponent,
+];

projects/charon/src/app/portal/modules/loan/components/request-loan-form/index.ts

@@ -0,0 +1 @@
+export * from './request-loan-form.component';

projects/charon/src/app/portal/modules/loan/components/request-loan-form/request-loan-form-model.ts

@@ -0,0 +1,85 @@
+import { Injectable } from '@angular/core';
+import { Validators } from '@angular/forms';
+import { FormControl, FormGroup } from '@ngneat/reactive-forms';
+import {
+  FormGroupType,
+  LoanPersonalInfoForm,
+  RequestLoanFormControlName, RequestLoanFormControlValue,
+} from './request-loan-form.definitions';
+
+@Injectable()
+export class RequestLoanFormModel {
+  public createForm(): FormGroupType {
+    const form = new FormGroup({}) as FormGroupType;
+
+    const firstNameControl = this.createFirstNameControl();
+    if (firstNameControl) {
+      form.addControl(RequestLoanFormControlName.FirstName, firstNameControl);
+    }
+
+    const lastNameControl = this.createLastNameControl();
+    if (lastNameControl) {
+      form.addControl(RequestLoanFormControlName.LastName, lastNameControl);
+    }
+
+    const walletAddressControl = this.createWalletAddressControl();
+    if (walletAddressControl) {
+      form.addControl(RequestLoanFormControlName.WalletAddress, walletAddressControl);
+    }
+
+    const pdvRateControl = this.createPDVControl();
+    if (pdvRateControl) {
+      form.addControl(RequestLoanFormControlName.PdvRate, pdvRateControl);
+    }
+
+    return form;
+  }
+
+  public patchForm(
+    form: FormGroupType,
+    value: RequestLoanFormControlValue,
+    options?: { emitEvent: boolean },
+  ): void {
+    const patch: LoanPersonalInfoForm = {
+      ...value,
+    };
+
+    form.patchValue(patch, options);
+  }
+
+  public getOuterValue(form: FormGroupType): RequestLoanFormControlValue {
+    const formValue = form.getRawValue();
+    return { ...formValue };
+  }
+
+  protected createFirstNameControl(): FormControl<LoanPersonalInfoForm['firstName']> {
+    return new FormControl(
+      '',
+      [
+        Validators.required,
+      ],
+    );
+  }
+
+  protected createLastNameControl(): FormControl<LoanPersonalInfoForm['lastName']> {
+    return new FormControl(
+      '',
+      [],
+    );
+  }
+
+  protected createWalletAddressControl(): FormControl<LoanPersonalInfoForm['walletAddress']> {
+    return new FormControl(
+      { value: '', disabled: true },
+      [],
+    );
+  }
+
+  protected createPDVControl(): FormControl<LoanPersonalInfoForm['pdvRate']> {
+    return new FormControl(
+      { value: null, disabled: true },
+      [],
+    );
+  }
+
+}

projects/charon/src/app/portal/modules/loan/components/request-loan-form/request-loan-form.component.html

@@ -0,0 +1,54 @@
+<form
+  autocomplete="off"
+  [formGroup]="form"
+  *transloco="let translate; read: translationsConfig.read; scope: translationsConfig.scope"
+>
+
+  <section class="personal-info-form__section">
+
+    <div class="personal-info-form__inputs-container">
+      <app-input-container class="personal-info-form__input-container">
+        <app-input
+          [maxlength]="20"
+          [formControlName]="controlName.FirstName"
+        >
+          <ng-container ngProjectAs="[label]">{{ translate('first_name.label') }}*</ng-container>
+        </app-input>
+
+        <app-form-error [controlName]="controlName.FirstName" i18nControlKey="first_name"></app-form-error>
+      </app-input-container>
+
+      <app-input-container class="personal-info-form__input-container">
+        <app-input
+          [maxlength]="20"
+          [formControlName]="controlName.LastName"
+        >
+          <ng-container ngProjectAs="[label]">{{ translate('last_name.label') }}</ng-container>
+        </app-input>
+
+        <app-form-error [controlName]="controlName.LastName" i18nControlKey="last_name"></app-form-error>
+      </app-input-container>
+    </div>
+
+    <div class="personal-info-form__inputs-container">
+      <app-input-container class="personal-info-form__input-container">
+        <app-input
+          [formControlName]="controlName.PdvRate"
+        >
+          <ng-container ngProjectAs="[label]">{{ translate('pdv.label') }}</ng-container>
+        </app-input>
+
+      </app-input-container>
+
+      <app-input-container class="personal-info-form__input-container">
+        <app-input
+          [formControlName]="controlName.WalletAddress"
+        >
+          <ng-container ngProjectAs="[label]">{{ translate('wallet_address.label') }}</ng-container>
+        </app-input>
+      </app-input-container>
+    </div>
+
+  </section>
+
+</form>

projects/charon/src/app/portal/modules/loan/components/request-loan-form/request-loan-form.component.scss

@@ -0,0 +1,22 @@
+@import "variables";
+
+:host {
+  display: block;
+}
+
+.personal-info-form__section {
+  & + & {
+    margin-top: $grid-step * 5;
+  }
+}
+
+.personal-info-form__inputs-container {
+  column-gap: $grid-step * 2;
+  display: flex;
+  margin-top: $grid-step * 2;
+  width: 100%;
+}
+
+.personal-info-form__input-container {
+  width: 100%;
+}

projects/charon/src/app/portal/modules/loan/components/request-loan-form/request-loan-form.component.ts

@@ -0,0 +1,78 @@
+import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
+import {
+  FormGroupType,
+  RequestLoanFormControlName,
+  RequestLoanFormControlValue,
+} from './request-loan-form.definitions';
+import { TranslationsConfig } from '@shared/components/profile-form/profile-form.definitions';
+import { RequestLoanFormModel } from './request-loan-form-model';
+import { ControlValueAccessor } from '@ngneat/reactive-forms';
+import { NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator } from '@angular/forms';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+
+@UntilDestroy()
+@Component({
+  selector: 'app-request-loan-form',
+  templateUrl: './request-loan-form.component.html',
+  styleUrls: ['./request-loan-form.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: RequestLoanFormComponent,
+      multi: true,
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: RequestLoanFormComponent,
+      multi: true,
+    },
+    {
+      provide: RequestLoanFormModel,
+      useClass: RequestLoanFormModel,
+    },
+  ],
+})
+
+export class RequestLoanFormComponent extends ControlValueAccessor<RequestLoanFormControlValue> implements OnInit, Validator {
+
+  @Input() public translationsConfig: TranslationsConfig;
+
+  public readonly form: FormGroupType;
+
+  public readonly controlName: typeof RequestLoanFormControlName = RequestLoanFormControlName;
+
+  constructor(
+    private formModel: RequestLoanFormModel,
+  ) {
+    super();
+    this.form = formModel.createForm();
+  }
+
+  ngOnInit(): void {
+    this.form.valueChanges
+      .pipe(
+        untilDestroyed(this),
+      )
+      .subscribe(() => this.onChange(this.getOuterValue()));
+  }
+
+  public writeValue(value: RequestLoanFormControlValue): void {
+    this.formModel.patchForm(this.form, value, { emitEvent: true });
+  }
+
+  public validate(): ValidationErrors | null {
+    if (this.form.invalid) {
+      return {
+        invalid: true,
+      };
+    }
+
+    return null;
+  }
+
+  private getOuterValue(): RequestLoanFormControlValue {
+    return this.formModel.getOuterValue(this.form);
+  }
+
+}

projects/charon/src/app/portal/modules/loan/components/request-loan-form/request-loan-form.definitions.ts

@@ -0,0 +1,19 @@
+import { ControlsOf, FormGroup } from '@ngneat/reactive-forms';
+
+export enum RequestLoanFormControlName {
+  FirstName = 'firstName',
+  LastName = 'lastName',
+  PdvRate = 'pdvRate',
+  WalletAddress = 'walletAddress',
+}
+
+export interface LoanPersonalInfoForm {
+  firstName: string,
+  lastName: string,
+  pdvRate: number,
+  walletAddress: string,
+}
+
+export type RequestLoanFormControlValue = Pick<LoanPersonalInfoForm, 'firstName' | 'lastName' | 'walletAddress' | 'pdvRate'>;
+
+export type FormGroupType = FormGroup<ControlsOf<LoanPersonalInfoForm>>;

projects/charon/src/app/portal/modules/loan/index.ts

@@ -0,0 +1 @@
+export * from './loan.module';

projects/charon/src/app/portal/modules/loan/loan-routing.module,.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { LoanPageComponent } from './pages';
+
+const ROUTES: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    component: LoanPageComponent,
+  },
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(ROUTES),
+  ],
+  exports: [
+    RouterModule,
+  ],
+  providers: [],
+})
+export class LoanRoutingModule {
+}

projects/charon/src/app/portal/modules/loan/loan.module.ts

@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TRANSLOCO_SCOPE, TranslocoModule } from '@ngneat/transloco';
+import { LOAN_PAGES } from './pages';
+import { LoanRoutingModule } from './loan-routing.module,';
+import { ProfileFormModule } from '@shared/components/profile-form';
+import { FormErrorModule } from '@shared/components/form-error';
+import { ReactiveFormsModule } from '@angular/forms';
+import { SubmitSourceModule } from '@shared/directives/submit-source';
+import { TypefaceModule } from '@shared/directives/typeface';
+import { ButtonModule } from '@shared/components/button';
+import { LOAN_COMPONENTS } from './components';
+import { InputContainerModule } from '@shared/components/input-container';
+import { InputModule } from '@shared/components/controls';
+
+@NgModule({
+  declarations: [
+    LOAN_COMPONENTS,
+    LOAN_PAGES,
+  ],
+  imports: [
+    CommonModule,
+    FormErrorModule,
+    LoanRoutingModule,
+    ProfileFormModule,
+    TranslocoModule,
+    ReactiveFormsModule,
+    SubmitSourceModule,
+    TypefaceModule,
+    ButtonModule,
+    InputContainerModule,
+    InputModule,
+    TranslocoModule,
+  ],
+  providers: [
+    {
+      provide: TRANSLOCO_SCOPE,
+      useValue: 'loan',
+    },
+  ],
+})
+export class LoanModule {
+}

projects/charon/src/app/portal/modules/loan/pages/index.ts

@@ -0,0 +1,7 @@
+import { LoanPageComponent } from './loan-page';
+
+export * from './loan-page';
+
+export const LOAN_PAGES = [
+  LoanPageComponent,
+];

projects/charon/src/app/portal/modules/loan/pages/loan-page/index.ts

@@ -0,0 +1 @@
+export * from './loan-page.component';