Merge pull request #357 from Cryptorubic/develop

Develop

package.json

@@ -18,82 +18,84 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~11.2.3",
-    "@angular/cdk": "^11.2.2",
-    "@angular/common": "~11.2.3",
-    "@angular/compiler": "~11.2.3",
-    "@angular/core": "~11.2.3",
-    "@angular/forms": "~11.2.3",
-    "@angular/material": "^11.2.2",
-    "@angular/material-moment-adapter": "^11.2.2",
-    "@angular/platform-browser": "~11.2.3",
-    "@angular/platform-browser-dynamic": "~11.2.3",
-    "@angular/router": "~11.2.3",
-    "@ethersproject/address": "^5.0.10",
-    "@ethersproject/contracts": "^5.0.10",
-    "@ethersproject/networks": "^5.0.8",
-    "@ethersproject/providers": "^5.0.22",
-    "@ethersproject/solidity": "^5.0.9",
-    "@maticnetwork/maticjs": "^2.0.37",
-    "@nguniversal/common": "latest",
+    "@angular/animations": "^11.2.14",
+    "@angular/cdk": "^11.2.13",
+    "@angular/common": "^11.2.14",
+    "@angular/compiler": "^11.2.14",
+    "@angular/core": "^11.2.14",
+    "@angular/forms": "^11.2.14",
+    "@angular/material": "^11.2.13",
+    "@angular/material-moment-adapter": "^11.2.13",
+    "@angular/platform-browser": "^11.2.14",
+    "@angular/platform-browser-dynamic": "^11.2.14",
+    "@angular/router": "^11.2.14",
+    "@ethersproject/address": "^5.2.0",
+    "@ethersproject/contracts": "^5.2.0",
+    "@ethersproject/networks": "^5.2.0",
+    "@ethersproject/providers": "^5.2.0",
+    "@ethersproject/solidity": "^5.2.0",
+    "@maticnetwork/maticjs": "^2.0.40",
     "@ngx-translate/core": "^11.0.1",
     "@ngx-translate/http-loader": "^4.0.0",
     "@uniswap/sdk": "^3.0.3",
+    "@walletconnect/web3-provider": "^1.4.1",
     "bignumber.js": "^8.1.1",
     "core-js": "^2.6.12",
     "date-and-time": "^0.14.2",
-    "ethers": "^5.0.30",
+    "ethers": "^5.2.0",
     "immutable": "^4.0.0-rc.12",
     "latest": "^0.2.0",
-    "luxon": "^1.26.0",
+    "luxon": "^1.27.0",
     "moment": "^2.29.1",
     "ng-dynamic-component": "^4.0.3",
     "ng-inline-svg": "^12.1.0",
     "ngx-clipboard": "^12.3.1",
     "ngx-cookie-service": "^2.4.0",
     "ngx-material-timepicker": "^5.5.3",
+    "postcss": "^8.3.0",
     "rxjs": "~6.6.6",
     "tar": "^4.4.13",
-    "tslib": "^2.0.0",
-    "web3": "^1.3.4",
+    "tslib": "^2.2.0",
+    "walletlink": "^2.1.0",
+    "web3": "^1.3.5",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1102.2",
+    "@angular-devkit/build-angular": "^0.1102.11",
     "@angular-eslint/builder": "1.2.0",
     "@angular-eslint/eslint-plugin": "1.2.0",
     "@angular-eslint/eslint-plugin-template": "1.2.0",
     "@angular-eslint/schematics": "1.2.0",
     "@angular-eslint/template-parser": "1.2.0",
-    "@angular/cli": "~11.2.2",
-    "@angular/compiler-cli": "~11.2.3",
-    "@angular/language-service": "~11.2.3",
-    "@types/jasmine": "~3.6.0",
-    "@types/jasminewd2": "^2.0.8",
-    "@types/node": "^12.11.1",
+    "@angular/cli": "^11.2.13",
+    "@angular/compiler-cli": "^11.2.14",
+    "@angular/language-service": "^11.2.14",
+    "@types/jasmine": "^3.6.11",
+    "@types/jasminewd2": "^2.0.9",
+    "@types/node": "^12.20.13",
     "@typescript-eslint/eslint-plugin": "4.3.0",
     "@typescript-eslint/parser": "4.3.0",
-    "codelyzer": "^6.0.0",
-    "eslint": "^7.6.0",
+    "codelyzer": "^6.0.2",
+    "eslint": "^7.27.0",
     "eslint-config-airbnb-typescript": "^12.3.1",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.23.3",
     "eslint-plugin-jasmine": "^4.1.2",
     "eslint-plugin-jsdoc": "30.7.6",
     "eslint-plugin-prefer-arrow": "1.2.2",
-    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-prettier": "^3.4.0",
     "husky": "^6.0.0",
-    "jasmine-core": "~3.6.0",
+    "jasmine-core": "~3.7.1",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~5.2.3",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
+    "karma-jasmine-html-reporter": "^1.6.0",
     "lint-staged": "^10.5.4",
-    "prettier": "^2.2.1",
+    "prettier": "^2.3.0",
     "protractor": "~7.0.0",
-    "stylelint": "^13.12.0",
+    "stylelint": "^13.13.1",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-sass-guidelines": "^8.0.0",
     "stylelint-order": "^4.1.0",

src/app/core/core.module.ts

@@ -11,6 +11,7 @@ import { SharedModule } from '../shared/shared.module';
 import { configLoader, httpLoaderFactory } from './app.loaders';
 import { ContentLoaderService } from './services/content-loader/content-loader.service';
 import { HTTPInterceptor } from './interceptors/http-interceptor';
+import { WalletsModalComponent } from './header/components/header/components/wallets-modal/wallets-modal.component';
 
 @NgModule({
   declarations: [MaintenanceComponent],
@@ -28,6 +29,7 @@ import { HTTPInterceptor } from './interceptors/http-interceptor';
       multi: true
     }
   ],
+  entryComponents: [WalletsModalComponent],
   imports: [
     CommonModule,
     HeaderModule,

src/app/core/header/components/header/components/login-button/login-button.component.html

@@ -1,3 +1,3 @@
 <button class="login-button">
-  <span (click)="authUser()" class="login-button__text">{{ 'navigation.login' | translate }}</span>
-</button>
+  <span (click)="showModal()" class="login-button__text">{{ 'Connect Wallet' | translate }}</span>
+</button>

src/app/core/header/components/header/components/login-button/login-button.component.ts

@@ -1,13 +1,9 @@
-import { ChangeDetectorRef, Component } from '@angular/core';
+import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 import { AuthService } from 'src/app/core/services/auth/auth.service';
 import { UserInterface } from 'src/app/core/services/auth/models/user.interface';
 import { MatDialog } from '@angular/material/dialog';
-import { AsyncPipe } from '@angular/common';
-import { TranslateService } from '@ngx-translate/core';
-import { QueryParamsService } from 'src/app/core/services/query-params/query-params.service';
-import { RubicError } from '../../../../../../shared/models/errors/RubicError';
-import { MessageBoxComponent } from '../../../../../../shared/components/message-box/message-box.component';
+import { WalletsModalComponent } from '../wallets-modal/wallets-modal.component';
 
 @Component({
   selector: 'app-login-button',
@@ -17,34 +13,11 @@ import { MessageBoxComponent } from '../../../../../../shared/components/message
 export class LoginButtonComponent {
   public $currentUser: Observable<UserInterface>;
 
-  constructor(
-    private readonly authService: AuthService,
-    private dialog: MatDialog,
-    private readonly translateService: TranslateService,
-    private readonly queryParamsService: QueryParamsService,
-    private cdr: ChangeDetectorRef
-  ) {
+  constructor(private readonly authService: AuthService, private dialog: MatDialog) {
     this.$currentUser = this.authService.getCurrentUser();
   }
 
-  public async authUser(): Promise<void> {
-    const isIframe = new AsyncPipe(this.cdr).transform(this.queryParamsService.$isIframe);
-    try {
-      if (isIframe) {
-        await this.authService.iframeSignIn();
-      } else {
-        await this.authService.signIn();
-      }
-    } catch (error) {
-      if (error.code === 4001) {
-        return;
-      }
-      const e = error instanceof RubicError ? error : new RubicError(this.translateService);
-      const data: any = { title: 'Warinig', descriptionText: e.comment };
-      this.dialog.open(MessageBoxComponent, {
-        width: '400px',
-        data
-      });
-    }
+  public showModal(): void {
+    this.dialog.open(WalletsModalComponent, { width: '420px' });
   }
 }

src/app/core/header/components/header/components/logout-confirm-modal/logout-confirm-modal.component.html

@@ -5,30 +5,26 @@
         {{ 'navigation.logoutMessage' | translate }}
       </div>
       <br /><br />
-      <div class="alert-window-buttons text-center">
-        <div class="grid-row">
+      <div class="alert-window-buttons text-center dialog-block__body">
+        <div class="grid-row dialog-block__body-row">
           <div class="grid-cell grid-cell-1-2 grid-cell-vs-1">
-            <button
-              class="btn btn-transparent btn-min"
-              type="button"
+            <app-primary-button
+              matDialogClose
+              [label]="'common.yes' | translate"
               (click)="confirmLogout()"
               [disabled]="logoutProgress"
-            >
-              <span class="lds-ellipsis" *ngIf="logoutProgress">
-                <span class="lds-ellipsis-container">
-                  <span></span><span></span><span></span><span></span>
-                </span>
-              </span>
-              <span class="just-title">
-                &nbsp;&nbsp;&nbsp;{{ 'common.yes' | translate }}&nbsp;&nbsp;&nbsp;
-              </span>
-            </button>
-            <br />
+              backgroundColor="white"
+              textColor="#4aa956"
+              [border]="true"
+              [hideArrow]="true"
+            ></app-primary-button>
           </div>
           <div class="grid-cell grid-cell-1-2 grid-cell-vs-1">
-            <button class="btn btn-green btn-min" matDialogClose type="button">
-              <span>&nbsp;&nbsp;&nbsp;{{ 'common.no' | translate }}&nbsp;&nbsp;&nbsp;</span>
-            </button>
+            <app-primary-button
+              matDialogClose
+              [label]="'common.no' | translate"
+              [hideArrow]="true"
+            ></app-primary-button>
           </div>
         </div>
       </div>

src/app/core/header/components/header/components/logout-confirm-modal/logout-confirm-modal.component.scss

@@ -1,7 +1,18 @@
 @import 'src/scss/vars';
+@import 'src/scss/mixins';
 
 .lds-ellipsis-container {
   span {
     background: $main-green;
   }
 }
+
+.dialog-block {
+  &__body-row {
+    > *:not(:last-child) {
+      @include b($mobile-sm-plus) {
+        margin-bottom: 15px;
+      }
+    }
+  }
+}

src/app/core/header/components/header/components/logout-confirm-modal/logout-confirm-modal.component.ts

@@ -56,7 +56,9 @@ export class LogoutConfirmModalComponent {
         this.headerStore.setConfirmModalOpeningStatus(false);
         this.logoutConfirmationModal.close();
       },
-      () => {},
+      () => {
+        this.logoutProgress = false;
+      },
       () => {
         this.logoutProgress = false;
       }

src/app/core/header/components/header/components/user-profile/user-profile.component.html

@@ -1,17 +1,17 @@
 <div class="user-profile" [ngClass]="{ 'user-profile_mobile': $isMobile | async }">
   <div class="user-profile__account">
-    <div *ngIf="($currentBlockchain | async)?.imagePath" class="user-profile__blockchain-icon">
+    <div *ngIf="currentBlockchain?.imagePath" class="user-profile__blockchain-icon">
       <img
         (click)="useTestingMode()"
-        [src]="($currentBlockchain | async)?.imagePath"
+        [src]="currentBlockchain?.imagePath"
         alt="($currentBlockchain | async)?.name"
         width="34"
         height="25"
       />
     </div>
     <span
       class="user-profile__text"
-      [ngClass]="{ 'user-profile__text_iconless': !($currentBlockchain | async)?.imagePath }"
+      [ngClass]="{ 'user-profile__text_iconless': !currentBlockchain?.imagePath }"
     >{{ ($currentUser | async)?.address | shortAddress: 5:3  }}</span>
   </div>
   <ul *ngIf="$isMobile | async" class="user-profile__list">

src/app/core/header/components/header/components/user-profile/user-profile.component.ts

@@ -1,16 +1,15 @@
 import {
   Component,
   ChangeDetectionStrategy,
-  ElementRef,
   ChangeDetectorRef,
   AfterViewInit,
   OnDestroy
 } from '@angular/core';
 import { NavigationStart, Router } from '@angular/router';
 import { Observable, Subscription } from 'rxjs';
 import { UserInterface } from 'src/app/core/services/auth/models/user.interface';
-import { Web3PrivateService } from 'src/app/core/services/blockchain/web3-private-service/web3-private.service';
 import { IBlockchain } from 'src/app/shared/models/blockchain/IBlockchain';
+import { ProviderConnectorService } from 'src/app/core/services/blockchain/provider-connector/provider-connector.service';
 import { HeaderStore } from '../../../../services/header.store';
 import { AuthService } from '../../../../../services/auth/auth.service';
 
@@ -29,19 +28,18 @@ export class UserProfileComponent implements AfterViewInit, OnDestroy {
 
   public readonly $currentUser: Observable<UserInterface>;
 
-  public readonly $currentBlockchain: Observable<IBlockchain>;
+  public currentBlockchain: IBlockchain;
 
   private _onNetworkChanges$: Subscription;
 
   private _onAddressChanges$: Subscription;
 
   constructor(
-    private readonly elementRef: ElementRef,
     private readonly headerStore: HeaderStore,
     private readonly router: Router,
     private readonly cdr: ChangeDetectorRef,
-    private web3PrivateService: Web3PrivateService,
-    private readonly authService: AuthService
+    private readonly authService: AuthService,
+    private readonly providerConnectorService: ProviderConnectorService
   ) {
     this.$isMobile = this.headerStore.getMobileDisplayStatus();
     this.$isConfirmModalOpened = this.headerStore.getConfirmModalOpeningStatus();
@@ -51,15 +49,16 @@ export class UserProfileComponent implements AfterViewInit, OnDestroy {
         this.headerStore.setConfirmModalOpeningStatus(false);
       }
     });
-    this.$currentBlockchain = this.web3PrivateService.onNetworkChanges;
     this.$currentUser = this.authService.getCurrentUser();
   }
 
   ngAfterViewInit(): void {
-    this._onNetworkChanges$ = this.web3PrivateService.onNetworkChanges.subscribe(() =>
-      this.cdr.detectChanges()
-    );
-    this._onAddressChanges$ = this.web3PrivateService.onAddressChanges.subscribe(() =>
+    this.cdr.detectChanges();
+    this._onNetworkChanges$ = this.providerConnectorService.$networkChange.subscribe(network => {
+      this.currentBlockchain = network;
+      this.cdr.detectChanges();
+    });
+    this._onAddressChanges$ = this.providerConnectorService.$addressChange.subscribe(() =>
       this.cdr.detectChanges()
     );
   }

src/app/core/header/components/header/components/wallets-modal/models/providers.ts

@@ -0,0 +1,12 @@
+export enum WALLET_NAME {
+  METAMASK = 'metamask',
+  WALLET_LINK = 'walletlink',
+  WALLET_CONNECT = 'walletconnect'
+}
+
+export interface WalletProvider {
+  name: string;
+  value: WALLET_NAME;
+  img: string;
+  desktopOnly: boolean;
+}

src/app/core/header/components/header/components/wallets-modal/wallets-modal.component.html

@@ -0,0 +1,21 @@
+<ng-container #modal>
+  <div class="modal">
+    <button (click)="close()" class="modal__close" >
+      <span [inlineSVG]="'assets/images/icons/cross-gray.svg'"></span>
+    </button>
+    <div class="modal__content">
+      <header class="modal__header">
+        <div class="modal__title">Connect wallet</div>
+      </header>
+      <main class="modal__body">
+        <button [disabled]="($walletsLoading | async) ? 'disabled' : false" class="modal__provider-button" *ngFor="let provider of providers" (click)="connectProvider(provider.value)">{{ provider.name }}
+          <span class="modal__provider-icon"><img src="{{ provider.img }}" alt="{{provider.name}} provider"></span>
+        </button>
+      </main>
+      <footer class="modal__footer">
+        <span>New to Ethereum? </span>
+        <a target="_blank" class="modal__link" href="https://ethereum.org/en/wallets/">Learn more about wallets</a>
+      </footer>
+    </div>
+  </div>
+</ng-container>