Merge pull request #276 from ltonetwork/bridge-testnet

Fix for bridge swap.

src/app/core/services/bridge.service.ts

@@ -1,10 +1,11 @@
-import { Injectable, Inject, ClassProvider } from '@angular/core';
+import { ClassProvider, Inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable, of, throwError } from 'rxjs';
-import { map, tap, shareReplay } from 'rxjs/operators';
-import { LTO_BRIDGE_HOST, BRIDGE_ENABLED } from '../../tokens';
+import { Observable, of } from 'rxjs';
+import { map, shareReplay, tap } from 'rxjs/operators';
+import { LTO_BRIDGE_HOST } from '../../tokens';
+import { SwapTokenType } from '@app/pages/bridge/bridge-swap/swap-type';
 
-export type TokenType = 'LTO' | 'LTO20' | 'WAVES' | 'BINANCE' | 'BEP20';
+export type TokenType = 'LTO' | 'LTO20' | 'WAVES' | 'BINANCE' | 'BSC';
 
 interface BridgeCache {
   deposit: {
@@ -60,27 +61,50 @@ export class BridgeServiceImpl implements BridgeService {
     this.bridgeStats$.subscribe();
   }
 
-  depositTo(address: string, captcha: string, tokenType: TokenType = 'LTO20', toTokenType: TokenType = 'LTO'): Observable<string> {
+  private swapTokenTypeToTokenType(swapTokenType: TokenType | SwapTokenType): TokenType {
+    switch (swapTokenType) {
+      case SwapTokenType.MAINNET:
+        return 'LTO';
+      case SwapTokenType.ERC20:
+        return 'LTO20';
+      case SwapTokenType.BEP20:
+        return 'BSC';
+      default:
+        return swapTokenType as TokenType;
+    }
+  }
+
+  depositTo(
+    address: string,
+    captcha: string,
+    tokenType: TokenType | SwapTokenType = 'LTO20',
+    toTokenType: TokenType | SwapTokenType = 'LTO'
+  ): Observable<string> {
     const cacheKey = `${address}:${tokenType}:${toTokenType}`;
     if (this.cache.deposit[cacheKey]) {
       return of(this.cache.deposit[cacheKey]);
     }
 
-    return this.createBridgeAddress(tokenType, toTokenType, address, captcha).pipe(
+    const type = this.swapTokenTypeToTokenType(tokenType);
+    const toType = this.swapTokenTypeToTokenType(toTokenType);
+
+    return this.createBridgeAddress(type, toType, address, captcha).pipe(
       tap(bridge => {
         this.cache.deposit[cacheKey] = bridge;
         this.saveCache(this.cache);
       })
     );
   }
 
-  withdrawTo(recipient: string, captcha: string, tokenType: TokenType = 'LTO20'): Observable<string> {
+  withdrawTo(recipient: string, captcha: string, tokenType: TokenType | SwapTokenType = 'LTO20'): Observable<string> {
     const cacheKey = recipient + tokenType;
     if (this.cache.withdraw[cacheKey]) {
       return of(this.cache.withdraw[cacheKey]);
     }
 
-    return this.createBridgeAddress('LTO', tokenType, recipient, captcha).pipe(
+    const type = this.swapTokenTypeToTokenType(tokenType);
+
+    return this.createBridgeAddress('LTO', type, recipient, captcha).pipe(
       tap(bridge => {
         this.cache.withdraw[cacheKey] = bridge;
         this.saveCache(this.cache);
@@ -96,15 +120,15 @@ export class BridgeServiceImpl implements BridgeService {
   }
 
   private createBridgeAddress(
-    fromToken: TokenType,
-    toToken: TokenType,
+    fromToken: TokenType | SwapTokenType,
+    toToken: TokenType | SwapTokenType,
     toAddress: string,
     captcha: string
   ): Observable<string> {
     return this.http
       .post<any>(this.ltoBridgeHost + '/bridge/address', {
-        from_token: fromToken,
-        to_token: toToken,
+        from_token: this.swapTokenTypeToTokenType(fromToken),
+        to_token: this.swapTokenTypeToTokenType(toToken),
         to_address: toAddress,
         captcha_response: captcha
       })
@@ -145,15 +169,23 @@ export abstract class BridgeService {
    * Generates bridge addres to convert LTO24 -> LTO and transfer on your account
    * @param address - your account address
    * @param captcha - captcha response
-   * @param tokenType type of token which will be converted to LTO
+   * @param tokenType type of token which will be converted from
+   * @param toTokenType type of token which will be converted to
    */
-  abstract depositTo(address: string, captcha: string, tokenType?: TokenType, toTokenType?: TokenType): Observable<string>;
+  abstract depositTo(
+    address: string,
+    captcha: string,
+    tokenType?: TokenType | SwapTokenType,
+    toTokenType?: TokenType | SwapTokenType
+  ): Observable<string>;
 
   /**
    * Generate bridge addres to convert LTO -> LTO20
-   * @param address - recipient addres
+   * @param recipient - recipient addres
+   * @param captcha - captcha response
+   * @param tokenType type of token which will be converted from
    */
-  abstract withdrawTo(recipient: string, captcha: string, tokenType?: TokenType): Observable<string>;
+  abstract withdrawTo(recipient: string, captcha: string, tokenType?: TokenType | SwapTokenType): Observable<string>;
 
   abstract faucet(recipient: string, captcha: string): Observable<any>;
 }

src/app/pages/bridge/bridge-swap/bridge-swap.component.ts

@@ -42,6 +42,7 @@ export class BridgeSwapComponent implements OnInit {
   goToNextStep() {
     switch (this.swapType) {
       case SwapType.ERC20_MAIN:
+      case SwapType.BEP20_MAIN:
       case SwapType.BINANCE_MAIN:
       case SwapType.ERC20_BINANCE:
         this.step = 4;
@@ -50,6 +51,8 @@ export class BridgeSwapComponent implements OnInit {
       case SwapType.MAIN_ERC20:
         this.step = 5;
         break;
+      default:
+        throw new Error(`No step for swap type: ${this.swapType}`);
     }
   }
 

src/app/pages/bridge/bridge-swap/steps/deposit-erc/deposit-erc.component.html

@@ -25,7 +25,7 @@ <h2 mat-dialog-title>Your deposit address</h2>
 
 <ng-template #addressTpl>
   <ng-container [ngSuspense]="address$">
-    <p *ngSuspenseError class="error">Cannot generate bridge</p>
+    <p *ngSuspenseError class="error">Failed to obtain a bridge address</p>
     <lto-loading-spinner *ngSuspensePlaceholder="1000"></lto-loading-spinner>
     <div class="address-box" fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="16px"
       *ngSuspenseSuccess="let address;">

src/app/pages/bridge/bridge-swap/steps/deposit-erc/deposit-erc.component.ts

@@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { BridgeService, WalletService } from '../../../../../core';
 import { switchMap } from 'rxjs/operators';
 import { Observable } from 'rxjs';
-import { SwapType } from '../../swap-type';
+import { SwapTokenType, SwapType } from '../../swap-type';
 import { AbstractControl, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
 import * as bech32 from 'bech32';
 
@@ -116,11 +116,7 @@ export class DepositErcComponent implements OnInit {
 
   resolveCaptcha(response: string) {
     this.captchaResponse = response;
-    const tokenType =
-      this.swapType === SwapType.ERC20_MAIN || this.swapType === SwapType.ERC20_BINANCE
-        ? 'LTO20'
-        : 'BINANCE';
-    const toTokenType = this.swapType === SwapType.ERC20_BINANCE ? 'BINANCE' : 'LTO';
+    const [tokenType, toTokenType] = this.swapType.split('->') as [SwapTokenType, SwapTokenType];
     if (this.swapType === SwapType.ERC20_BINANCE) {
       this.address$ = this._bridge.depositTo(
         this.depositForm.value.address,

src/app/transfers/transfers.component.html

@@ -9,15 +9,10 @@
     <lto-content-section title="Transfers" subtitle="">
       <div class="balance" fxLayout="row" fxLayout.lt-md="column" *ngIf="(balance$ | async) as balance" fxLayoutGap="24px">
         <mat-card fxFlex="1 1 20" fxLayout="column" fxLayoutAlign="center center">
-          <div class="label">Total</div>
+          <div class="label">Balance</div>
           <div class="value" matTooltip="{{ balance.regular | amountDivide }}">{{ balance.regular | amountDivide | number: '1.0-3' }}</div>
         </mat-card>
 
-        <mat-card fxFlex="1 1 20" fxLayout="column" fxHide.lt-md fxLayoutAlign="center center">
-          <div class="label">Available</div>
-          <div class="value" matTooltip="{{ balance.available | amountDivide }}">{{ balance.available | amountDivide | number: '1.0-3' }}</div>
-        </mat-card>
-
         <mat-card fxFlex="1 1 20" fxLayout="column" fxHide.lt-md fxLayoutAlign="center center">
           <div class="label">Leasing</div>
           <div class="value" matTooltip="{{ balance.leasing | amountDivide }}">{{ balance.leasing | amountDivide | number: '1.0-3' }}</div>
@@ -28,7 +23,12 @@
           <div class="value" matTooltip="{{ balance.unbonding | amountDivide }}">{{ balance.unbonding | amountDivide | number: '1.0-3' }}</div>
         </mat-card>
 
-        <mat-card fxFlex="1 1 20" fxLayout="column" fxLayoutAlign="center center">
+        <mat-card fxFlex="1 1 20" fxLayout="column" fxHide.lt-md fxLayoutAlign="center center">
+          <div class="label">Available</div>
+          <div class="value" matTooltip="{{ balance.available | amountDivide }}">{{ balance.available | amountDivide | number: '1.0-3' }}</div>
+        </mat-card>
+
+        <mat-card fxFlex="1 1 20" fxLayout="column" fxHide.lt-md fxLayoutAlign="center center">
           <div class="label">Number of transactions</div>
           <div class="value">{{ (transfers$ | async)?.total }}</div>
         </mat-card>

src/environments/environment.local.ts

@@ -8,7 +8,7 @@ export const environment = {
   bridge: true,
   swapPageEnabled: false,
   lto_api_url: 'https://testnet.lto.network/',
-  bridge_url: 'http://localhost:3000',
+  bridge_url: 'http://localhost:3002',
   mobile_auth: {
     ws: 'ws://localhost:3030/connect',
     url: 'http://localhost:3030/'

src/environments/environment.testnet.ts

@@ -8,7 +8,7 @@ export const environment = {
   bridge: true,
   swapPageEnabled: false,
   lto_api_url: 'https://testnet.lto.network/',
-  bridge_url: 'https://testnet-bridge.lto.network',
+  bridge_url: 'https://bridge.testnet.lto.network',
   mobile_auth: {
     ws: 'wss://wallet-auth.testnet.lto.network/connect',
     url: 'https://wallet-auth.testnet.lto.network/'