initializing repo

frontend/src/app/pages/form/form.component.ts

+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {FormService} from '../../services/form.service';
+import {action, computed} from 'mobx-angular';
+import {UtilsService} from '../../core/services/services/utils.service';
+
+@Component({
+    selector: 'app-form',
+    templateUrl: './form.component.html',
+    styleUrls: ['./form.component.scss'],
+})
+export class FormComponent implements OnInit, OnDestroy {
+
+    public selectedCase = 'STAKE';
+    constructor(private featuresService: FormService, public utilsService: UtilsService) {}
+
+    @action ngOnInit() {
+        this.featuresService.init();
+    }
+
+
+    @computed get slpBalanceDivider() {
+        return this.utilsService.parseAmountDivider(this.featuresService.slpBalance);
+    }
+
+    @computed get stakedDivider() {
+        return this.utilsService.parseAmountDivider(this.featuresService.staked);
+    }
+
+    @computed get slpBalance() {
+        return this.featuresService.slpBalance;
+    }
+    @computed get slpAllowance() {
+        return this.featuresService.slpAllowance;
+    }
+    @computed get staked() {
+        return this.featuresService.staked;
+    }
+
+    @computed get formStake() {
+        return this.featuresService.formStake;
+    }
+    @computed get apySushi() {
+        return this.featuresService.apySushi;
+    }
+    @computed get apyXFT() {
+        return this.featuresService.apyXFT;
+    }
+
+    @computed get formUnstake() {
+        return this.featuresService.formUnstake;
+    }
+    @computed get isSubmittingApprove() {
+        return this.featuresService.isSubmittingApprove;
+    }
+    @computed get isSubmittingStake() {
+        return this.featuresService.isSubmittingStake;
+    }
+    @computed get isSubmittingUnstake() {
+        return this.featuresService.isSubmittingUnstake;
+    }
+    @computed get isSubmittingClaimRewards() {
+        return this.featuresService.isSubmittingClaimRewards;
+    }
+
+    @computed get rewardsXFT() {
+        return this.featuresService.rewardsXFT;
+    }
+    @computed get rewardsSushi() {
+        return this.featuresService.rewardsSushi;
+    }
+    @computed get stakeAmount() {
+        return this.featuresService.stakeAmount;
+    }
+   @computed get unstakeAmount() {
+        return this.featuresService.unstakeAmount;
+    }
+
+    @action submitFormStake() {
+        this.featuresService.submitFormStake();
+    }
+
+    @action submitFormUnstake() {
+        this.featuresService.submitFormUnstake();
+    }
+    @action submitClaimRewards() {
+        this.featuresService.submitClaimRewards();
+    }
+
+    public lessOrEqual(value1: string, value2: string): boolean {
+        return this.utilsService.lessOrEqual(value1, value2);
+}
+    public greaterThen(value1: string, value2: string): boolean {
+        return this.utilsService.greaterThen(value1, value2);
+    }
+
+    public ngOnDestroy(): void {
+    this.featuresService.unsubscribe();
+    }
+
+
+}

frontend/src/app/pages/login/login.component.html

+<app-header></app-header>
+<ng-container *mobxAutorun>
+    <div class="login-page">
+        <button class="login-page__btn" type="button" (click)="connectToMetaMask()">{{'LOGIN__PAGE.CONNECT_WALLET' | translate}}</button>
+    </div>
+</ng-container>

frontend/src/app/pages/login/login.component.scss

+@import "./src/themes/variables";
+
+.login-page{
+  padding: 0 50px;
+
+
+
+  &__btn {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: 48px;
+    background: $btn-color;
+    color: $text-color;
+    border-radius: 8px;
+    width: 100%;
+    max-width: 300px;
+    border: none;
+    text-transform: capitalize;
+    font-size: 20px;
+    cursor: pointer;
+  }
+}
+
+
+

frontend/src/app/pages/login/login.component.ts

+import {Component} from '@angular/core';
+import {action} from 'mobx-angular';
+import {AuthService} from '../../core/services/auth/auth.service';
+
+@Component({
+    selector: 'app-login',
+    templateUrl: './login.component.html',
+    styleUrls: ['./login.component.scss'],
+})
+export class LoginComponent  {
+    constructor(private authService: AuthService) {
+    }
+    @action connectToMetaMask() {
+        this.authService.connectToMetaMask();
+    }
+}

frontend/src/app/services/form.service.ts

+import {Injectable} from '@angular/core';
+import {Subject} from 'rxjs';
+import {AbstractControl, FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {observable, action} from 'mobx-angular';
+import {StakeSlpService} from '../core/services/services/stake-slp.service';
+import {UtilsService} from '../core/services/services/utils.service';
+import {AuthService} from '../core/services/auth/auth.service';
+import {takeUntil} from 'rxjs/operators';
+import {StatusModalService} from '../shared/services/status-modal.service';
+
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FormService {
+
+
+  public formStake: FormGroup;
+  public formUnstake: FormGroup;
+  private unsubscribe$ = new Subject();
+
+  @observable serverErrorMessage: string;
+  @observable isSubmittingApprove = false;
+  @observable isSubmittingClaimRewards = false;
+  @observable isSubmittingStake = false;
+  @observable isSubmittingUnstake = false;
+  @observable slpBalance: string;
+  @observable staked: string;
+  @observable slpAllowance: string;
+  @observable rewardsXFT: number;
+  @observable rewardsSushi: number;
+  @observable apySushi: number;
+  @observable apyXFT: number;
+
+
+  constructor(
+    private fb: FormBuilder,
+    private stakeSlpService: StakeSlpService,
+    private utilsService: UtilsService,
+    private authService: AuthService,
+    private statusModalService: StatusModalService,
+  ) { }
+
+  @action init() {
+    this.createFormStake();
+    this.createFormUnstake();
+    this.getDataFromContract();
+  }
+  private getDataFromContract() {
+    this.stakeSlpService.slpBalanceChange.pipe(takeUntil(this.unsubscribe$)).subscribe((res: string) => {
+      this.slpBalance = res;
+    });
+    this.stakeSlpService.getSLPBalance(this.authService.user.address);
+
+    this.stakeSlpService.stakedChange.pipe(takeUntil(this.unsubscribe$)).subscribe((res: string) => {
+      this.staked = res;
+
+    });
+    this.stakeSlpService.getStaked(this.authService.user.address);
+
+    this.stakeSlpService.slpAllowanceChange.pipe(takeUntil(this.unsubscribe$)).subscribe((res: string) => {
+      this.slpAllowance = res;
+    });
+    this.stakeSlpService.getSLPAllowance(this.authService.user.address);
+
+    this.stakeSlpService.rewardsXFTChange.pipe(takeUntil(this.unsubscribe$)).subscribe((res: number) => {
+      this.rewardsXFT = res;
+    });
+    this.stakeSlpService.getRewardsXFT(this.authService.user.address);
+
+    this.stakeSlpService.rewardsSushiChange.pipe(takeUntil(this.unsubscribe$)).subscribe((res: number) => {
+      this.rewardsSushi = res;
+    });
+    this.stakeSlpService.getRewardsSushi(this.authService.user.address);
+
+    this.stakeSlpService.apySushiChange.pipe(takeUntil(this.unsubscribe$)).subscribe((res: number) => {
+      this.apySushi = res;
+    });
+    this.stakeSlpService.getAPYSushi(this.authService.user.address);
+
+    this.stakeSlpService.apyXFTChange.pipe(takeUntil(this.unsubscribe$)).subscribe((res: number) => {
+      this.apyXFT = res;
+    });
+    this.stakeSlpService.getAPYXft(this.authService.user.address);
+
+
+  }
+
+  @action createFormStake() {
+    this.formStake = this.fb.group({
+      amount: this.fb.control(null, Validators.required),
+    });
+  }
+  @action createFormUnstake() {
+    this.formUnstake = this.fb.group({
+      amount: this.fb.control(null, Validators.required),
+    });
+  }
+
+  @action   submitFormStake() {
+
+
+
+    if (this.isBlockedFormStake ) {
+      return;
+    }
+    if (this.utilsService.greaterThen(this.stakeAmount.value , this.slpAllowance)) {
+      this.isSubmittingApprove = true;
+      this.stakeSlpService.approveNewAllowance(
+          this.utilsService.convertAmount(this.stakeAmount.value),
+          this.authService.user.address
+      ).then(() => {
+        this.isSubmittingApprove = false;
+      }, () => {
+        this.isSubmittingApprove = false;
+      });
+    } else {
+      this.isSubmittingStake = true;
+      this.stakeSlpService.stake(this.utilsService.convertAmount(this.stakeAmount.value), this.authService.user.address).then((res) => {
+        this.isSubmittingStake = false;
+        this.formStake.reset();
+        this.statusModalService.openStatusModal({hash: res});
+      }, () => {
+        this.isSubmittingStake = false;
+      });
+    }
+  }
+  @action submitFormUnstake() {
+    if (this.isBlockedFormUnstake ) {
+      return;
+    }
+    if (this.utilsService.lessOrEqual(this.unstakeAmount.value , this.staked)) {
+      this.isSubmittingUnstake = true;
+      this.stakeSlpService.unStake(this.utilsService.convertAmount(this.unstakeAmount.value), this.authService.user.address).then((res) => {
+        this.isSubmittingUnstake = false;
+        this.formUnstake.reset();
+        this.statusModalService.openStatusModal({hash: res});
+      }, () => {
+        this.isSubmittingUnstake = false;
+      });
+    } else {
+      this.isSubmittingUnstake = false;
+    }
+  }
+  @action submitClaimRewards() {
+      this.isSubmittingClaimRewards = true;
+      this.stakeSlpService.claimReward(this.authService.user.address).then((res) => {
+        this.isSubmittingClaimRewards = false;
+        this.statusModalService.openStatusModal({hash: res});
+      }, () => {
+      this.isSubmittingClaimRewards = false;
+    });
+  }
+
+
+  get stakeAmount(): AbstractControl {
+    return this.formStake.get('amount');
+  }
+  get unstakeAmount(): AbstractControl {
+    return this.formUnstake.get('amount');
+  }
+
+  get isBlockedFormStake() {
+    return this.formStake.invalid;
+  }
+  get isBlockedFormUnstake() {
+    return this.formUnstake.invalid;
+  }
+
+
+  @action unsubscribe() {
+    this.unsubscribe$.next();
+    this.unsubscribe$.complete();
+  }
+}

frontend/src/app/shared/directives/number-only/number-only.directive.ts

+import {Directive, ElementRef, HostListener} from '@angular/core';
+
+@Directive({
+  selector: '[appNumberOnly]'
+})
+export class NumberOnlyDirective {
+
+  private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g);
+  private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', 'ArrowRight', 'ArrowLeft'];
+
+  constructor(
+    private el: ElementRef
+  ) {
+  }
+
+  @HostListener('keydown', ['$event'])
+  onKeyDown(event: KeyboardEvent) {
+
+    if (this.specialKeys.indexOf(event.key) !== -1) {
+      return;
+    }
+
+    const current: string = this.el.nativeElement.value;
+    const next: string = current.concat(event.key);
+
+    if (next && !String(next).match(this.regex)) {
+      event.preventDefault();
+    }
+  }
+}

frontend/src/app/shared/modals/status/status-modal.component.html

+<div mat-dialog-title>
+  <button mat-icon-button  [mat-dialog-close]>
+    <mat-icon>close</mat-icon>
+  </button>
+</div>
+<div mat-dialog-content class="modal-container">
+  <div class="modal-container__icon">
+    <span class="material-icons">arrow_circle_up</span>
+  </div>
+  <p class="modal-container__title">Transaction Submitted</p>
+  <a class="modal-container__link" [href]="etherScanLink" target="_blank">View on Etherscan</a>
+  <button mat-button class="modal-container__btn" [mat-dialog-close]>
+    Close
+  </button>
+</div>
+

frontend/src/app/shared/modals/status/status-modal.component.scss

+@import "./src/themes/variables";
+
+
+.modal-container{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  &__icon {
+    color: $btn-color;
+    span{
+      font-size: 100px;
+    }
+
+  }
+  &__title {
+    font-size: 22px;
+    font-weight: bold;
+  }
+  &__link {
+    font-size: 14px;
+    color: $btn-color;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  &__btn {
+    height: 48px;
+    background: $btn-color;
+    color: $white-color;
+    border-radius: 8px;
+    width: 100%;
+    border: none;
+    text-transform: capitalize;
+    font-size: 20px;
+    margin-top: 35px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+  }
+}
+
+
+

frontend/src/app/shared/modals/status/status-modal.component.ts

+import {Component, Inject} from '@angular/core';
+import {ETHERSCAN_LINK} from '../../../integrations/dictionaries/meta-mask.dictionary';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-status-modal',
+  templateUrl: './status-modal.component.html',
+  styleUrls: ['./status-modal.component.scss'],
+})
+
+export class StatusModalComponent {
+ constructor(@Inject(MAT_DIALOG_DATA) public data: { hash: string }) {}
+
+ public get etherScanLink() {
+   return ETHERSCAN_LINK + this.data.hash;
+ }
+}

frontend/src/app/shared/services/status-modal.service.ts

+import {Injectable} from '@angular/core';
+import {action} from 'mobx-angular';
+
+import {StatusModalComponent} from '../modals/status/status-modal.component';
+import {MatDialog} from '@angular/material/dialog';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class StatusModalService {
+
+  constructor(
+    public dialog: MatDialog,
+  ) { }
+
+
+  @action openStatusModal(data: { hash: string }) {
+      setTimeout(() => {
+          window.document.body.classList.add('modal-opened');
+          return this.dialog
+              .open(StatusModalComponent, {
+                  width: '350px',
+                  panelClass: 'off-shift-modal',
+                  backdropClass: 'backdrop-modal',
+                  autoFocus: false,
+                  data
+              }).afterClosed().subscribe((res) => {
+                  this.deleteModalClass();
+              });
+      }, 500 );
+
+  }
+
+  deleteModalClass() {
+    window.document.body.classList.remove('modal-opened');
+  }
+}

frontend/src/app/shared/shared.module.ts

+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+import {MobxAngularModule} from 'mobx-angular';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatListModule} from '@angular/material/list';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {MatGridListModule} from '@angular/material/grid-list';
+import {MatCardModule} from '@angular/material/card';
+import {MatSelectModule} from '@angular/material/select';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatNativeDateModule} from '@angular/material/core';
+import {MatTableModule} from '@angular/material/table';
+import {MatInputModule} from '@angular/material/input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatSortModule} from '@angular/material/sort';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatExpansionModule} from '@angular/material/expansion';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatRadioModule} from '@angular/material/radio';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatSliderModule} from '@angular/material/slider';
+import {MatTabsModule} from '@angular/material/tabs';
+import {CdkTableModule} from '@angular/cdk/table';
+import {StatusModalComponent} from './modals/status/status-modal.component';
+import {AngularWeb3ComponentsModule} from 'angular-web3-components';
+
+/*Angular Material modules*/
+const AngularMaterial = [
+    MatToolbarModule,
+    MatSidenavModule,
+    MatMenuModule,
+    MatListModule,
+    MatButtonModule,
+    MatIconModule,
+    MatGridListModule,
+    MatCardModule,
+    MatSelectModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    MatTableModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatPaginatorModule,
+    MatSortModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatProgressBarModule,
+    MatCheckboxModule,
+    MatSlideToggleModule,
+    MatAutocompleteModule,
+    MatExpansionModule,
+    MatButtonToggleModule,
+    MatDialogModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatTooltipModule,
+    MatSnackBarModule,
+    MatSliderModule,
+    MatTabsModule,
+    CdkTableModule
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        RouterModule,
+        MobxAngularModule,
+        ...AngularMaterial,
+        FormsModule,
+        ReactiveFormsModule,
+        AngularWeb3ComponentsModule
+    ],
+    declarations: [StatusModalComponent],
+    entryComponents: [StatusModalComponent],
+    exports: [
+        MobxAngularModule,
+        ...AngularMaterial,
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        AngularWeb3ComponentsModule
+    ],
+})
+export class SharedModule {
+}