Merge branch 'feat/mtpelerin' into 'develop'

Feat/ Mt Pelerin

See merge request papers/airgap/airgap-wallet!661

package.json

@@ -56,8 +56,8 @@
   },
   "dependencies": {
     "@airgap/aeternity": "0.13.15-beta.10",
-    "@airgap/angular-core": "0.0.37-beta.17",
-    "@airgap/angular-ngrx": "0.0.37-beta.17",
+    "@airgap/angular-core": "0.0.37-beta.21",
+    "@airgap/angular-ngrx": "0.0.37-beta.21",
     "@airgap/astar": "0.13.15-beta.10",
     "@airgap/beacon-sdk": "3.1.5-beta.0",
     "@airgap/bitcoin": "0.13.15-beta.10",

src/app/app-routing.module.ts

@@ -85,7 +85,8 @@ const routes: Routes = [
       special: DataResolverService
     },
     canActivate: [ProtocolGuard, ServiceKeyGuard],
-    loadChildren: () => import('./pages/sub-account-add-generic/sub-account-add-generic.module').then((m) => m.SubAccountAddGenericPageModule)
+    loadChildren: () =>
+      import('./pages/sub-account-add-generic/sub-account-add-generic.module').then((m) => m.SubAccountAddGenericPageModule)
   },
   {
     path: 'sub-account-select/:id',
@@ -225,6 +226,10 @@ const routes: Routes = [
         (m) => m.InteractionSelectionSettingsPageModule
       )
   },
+  {
+    path: 'trading-settings',
+    loadChildren: () => import('./pages/trading-settings/trading-settings.module').then((m) => m.TradingSettingsPageModule)
+  },
   {
     path: 'collectibles-list/:id/:publicKey/:protocolID/:addressIndex',
     resolve: {

src/app/app.component.ts

@@ -21,10 +21,7 @@ import {
   MainProtocolSymbols,
   NetworkType
 } from '@airgap/coinlib-core'
-import {
-  generateId,
-  IACMessageType
-} from '@airgap/serializer'
+import { generateId, IACMessageType } from '@airgap/serializer'
 import {
   TezosProtocolNetwork,
   TezosBlockExplorer,
@@ -66,6 +63,7 @@ import { WalletStorageKey, WalletStorageService } from './services/storage/stora
 import { WalletconnectService } from './services/walletconnect/walletconnect.service'
 import { faProtocolSymbol } from './types/GenericProtocolSymbols'
 import { generateGUID } from './utils/utils'
+import { HttpClient } from '@angular/common/http'
 
 @Component({
   selector: 'app-root',
@@ -96,6 +94,7 @@ export class AppComponent implements AfterViewInit {
     private readonly themeService: ThemeService,
     private readonly navigationService: NavigationService,
     private readonly isolatedModulesService: IsolatedModulesService,
+    private readonly http: HttpClient,
     @Inject(APP_PLUGIN) private readonly app: AppPlugin,
     @Inject(APP_INFO_PLUGIN) private readonly appInfo: AppInfoPlugin,
     @Inject(SPLASH_SCREEN_PLUGIN) private readonly splashScreen: SplashScreenPlugin
@@ -143,6 +142,14 @@ export class AppComponent implements AfterViewInit {
       })
     }
 
+    // Mt Perelin
+    this.http
+      .get('https://api.mtpelerin.com/currencies/tokens')
+      .toPromise()
+      .then((result) => {
+        this.storageProvider.setCache('mtperelin-currencies', result)
+      })
+
     this.appSerivce.setReady()
   }
 

src/app/pages/account-transaction-list/account-transaction-list.html

@@ -109,6 +109,31 @@
     </ion-infinite-scroll>
   </ion-grid>
   <ion-fab vertical="bottom" slot="fixed">
+    <ng-container *ngIf="isMtPerelinActive">
+      <ion-row>
+        <ion-col>
+          <ion-button class="mt-perelin-button" expand="full" size="default" color="white" (click)="buyMtPerelin()" shape="round">
+            {{ 'swap.buy_label' | translate }}
+            <div>
+              {{ 'account-transaction-list.provided_by' | translate }}
+              <img src="https://www.mtpelerin.com/images/logo.svg" />
+            </div>
+          </ion-button>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col>
+          <ion-button class="mt-perelin-button" expand="full" size="default" color="white" (click)="sellMtPerelin()" shape="round">
+            {{ 'swap.sell_label' | translate }}
+            <div>
+              {{ 'account-transaction-list.provided_by' | translate }}
+              <img src="https://www.mtpelerin.com/images/logo.svg" />
+            </div>
+          </ion-button>
+        </ion-col>
+      </ion-row>
+    </ng-container>
+
     <ion-row>
       <ion-col>
         <ion-button id="receive" expand="full" size="default" color="primary" (click)="openReceivePage()" shape="round">

src/app/pages/account-transaction-list/account-transaction-list.scss

@@ -27,3 +27,21 @@ ion-fab {
 svg {
   stroke: none;
 }
+
+.mt-perelin-button {
+  border: 1px solid gray;
+  border-radius: 100px;
+
+  div {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: auto;
+    font-size: 12px;
+    color: rgb(83, 83, 83);
+
+    img {
+      height: 18px;
+    }
+  }
+}

src/app/pages/account-transaction-list/account-transaction-list.ts

@@ -1,9 +1,9 @@
-import { ProtocolService } from '@airgap/angular-core'
+import { InternalStorageKey, InternalStorageService, ProtocolService } from '@airgap/angular-core'
 import {
   AirGapMarketWallet,
   IAirGapTransaction,
   MainProtocolSymbols,
-  SubProtocolSymbols,
+  SubProtocolSymbols
 } from '@airgap/coinlib-core'
 import { Action } from '@airgap/coinlib-core/actions/Action'
 import { IAirGapTransactionResult, IProtocolTransactionCursor } from '@airgap/coinlib-core/interfaces/IAirGapTransaction'
@@ -96,6 +96,9 @@ export class AccountTransactionListPage {
   private protocolID: string
   private addressIndex
 
+  // Mt Perelin
+  public isMtPerelinActive: boolean = false
+
   constructor(
     public readonly alertCtrl: AlertController,
     public readonly navController: NavController,
@@ -116,7 +119,8 @@ export class AccountTransactionListPage {
     private readonly pushBackendProvider: PushBackendProvider,
     private readonly exchangeProvider: ExchangeProvider,
     private readonly extensionsService: ExtensionsService,
-    private readonly browserService: BrowserService
+    private readonly browserService: BrowserService,
+    private readonly storageService: InternalStorageService
   ) {
     this.isDesktop = this.platform.is('desktop')
 
@@ -162,6 +166,18 @@ export class AccountTransactionListPage {
     this.actionGroup.getActions().then((actions) => {
       this.actions = actions
     })
+
+    // Mt Perelin
+    this.storageService.get(InternalStorageKey.SETTINGS_TRADING_USE_MTPELERIN).then((active) => {
+      if (active) {
+        this.storageProvider.getCache('mtperelin-currencies').then((savedCurrencies) => {
+          this.wallet.protocol.getSymbol().then((symbol) => {
+            const validCurrency = Object.values(savedCurrencies).find((currency) => currency.symbol === symbol)
+            this.isMtPerelinActive = !!active && !!validCurrency
+          })
+        })
+      }
+    })
   }
 
   public showNoTransactionScreen(): boolean {
@@ -268,8 +284,10 @@ export class AccountTransactionListPage {
   public async loadInitialTransactions(forceRefresh: boolean = false): Promise<void> {
     if (forceRefresh || this.transactions.length === 0) {
       this.transactions =
-        (await this.storageProvider.getCache<IAirGapTransaction[]>(await this.accountProvider.getAccountIdentifier(this.wallet)))?.slice(0, 10) ??
-        []
+        (await this.storageProvider.getCache<IAirGapTransaction[]>(await this.accountProvider.getAccountIdentifier(this.wallet)))?.slice(
+          0,
+          10
+        ) ?? []
     }
 
     const transactionPromise: Promise<IAirGapTransaction[]> = this.getTransactions(undefined, this.TRANSACTION_LIMIT)
@@ -314,7 +332,10 @@ export class AccountTransactionListPage {
       })
     }
 
-    await this.storageProvider.setCache<IAirGapTransaction[]>(await this.accountProvider.getAccountIdentifier(this.wallet), this.transactions)
+    await this.storageProvider.setCache<IAirGapTransaction[]>(
+      await this.accountProvider.getAccountIdentifier(this.wallet),
+      this.transactions
+    )
     this.txOffset = this.transactions.length
 
     this.infiniteEnabled = this.transactions.length >= this.TRANSACTION_LIMIT
@@ -402,4 +423,17 @@ export class AccountTransactionListPage {
     this.subscription.unsubscribe()
     this.walletChanged.unsubscribe()
   }
+
+  // Mt Perelin
+  public async buyMtPerelin() {
+    this.wallet.protocol.getSymbol().then((symbol) => {
+      window.open(`https://buy.mtpelerin.com/?type=direct-link&bdc=${symbol}&addr=${this.wallet.addresses[0]}&rfr=bcH4RmHm`, '_blank')
+    })
+  }
+
+  public async sellMtPerelin() {
+    this.wallet.protocol.getSymbol().then((symbol) => {
+      window.open(`https://sell.mtpelerin.com/?type=direct-link&tab=sell&ssc=${symbol}&rfr=bcH4RmHm`, '_blank')
+    })
+  }
 }

src/app/pages/settings/settings.html

@@ -162,5 +162,15 @@
         {{ 'settings.qr-advanced-settings_label' | translate }}
       </ion-item>
     </ion-list>
+
+    <ion-list lines="none">
+      <ion-list-header class="ion-no-margin" lines="none">
+        <ion-label>{{ 'settings.trading_settings.label' | translate }}</ion-label>
+      </ion-list-header>
+      <ion-item (click)="goToTradingSettings()" detail="true">
+        <ion-icon name="repeat-outline" slot="start"></ion-icon>
+        {{ 'settings.trading_settings.text' | translate }}
+      </ion-item>
+    </ion-list>
   </ion-grid>
 </ion-content>

src/app/pages/settings/settings.ts

@@ -140,6 +140,10 @@ export class SettingsPage {
     this.navigate('/interaction-selection-settings')
   }
 
+  public goToTradingSettings(): void {
+    this.navigate('/trading-settings')
+  }
+
   private navigate(url: string) {
     this.router.navigateByUrl(url).catch(handleErrorSentry(ErrorCategory.NAVIGATION))
   }

src/app/pages/trading-settings/trading-settings.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { FormsModule } from '@angular/forms'
+
+import { IonicModule } from '@ionic/angular'
+
+import { TradingSettingsPage } from './trading-settings.page'
+import { TranslateModule } from '@ngx-translate/core'
+import { ComponentsModule } from '@airgap/angular-core'
+import { RouterModule } from '@angular/router'
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ComponentsModule,
+    TranslateModule,
+    RouterModule.forChild([{ path: '', component: TradingSettingsPage }])
+  ],
+  declarations: [TradingSettingsPage]
+})
+export class TradingSettingsPageModule {}

src/app/pages/trading-settings/trading-settings.page.html

@@ -0,0 +1,63 @@
+<ion-header class="ion-no-border">
+  <ion-grid class="ion-no-padding">
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button defaultHref="/tabs/settings"></ion-back-button>
+      </ion-buttons>
+      <ion-title>{{ 'settings.trading_settings.text' | translate }}</ion-title>
+    </ion-toolbar>
+  </ion-grid>
+</ion-header>
+<ion-content>
+  <ion-item>
+    {{ 'settings.trading_settings.mtpelerin' | translate }}
+    <ion-toggle [checked]="useMtPerelin" (ionChange)="toggleUseMtPerelin($event)" slot="end"></ion-toggle>
+  </ion-item>
+
+  <div class="mtpelerin-wrapper">
+    <img src="https://www.mtpelerin.com/images/logo.svg" />
+    <h3>{{ 'mtpelerin.header1' | translate }}</h3>
+    <p>
+      {{ 'mtpelerin.paragraph1' | translate }}
+    </p>
+    <h3>{{ 'mtpelerin.header2' | translate }}</h3>
+    <ul>
+      <li>{{ 'mtpelerin.lineItem1' | translate }}</li>
+      <li>{{ 'mtpelerin.lineItem2' | translate }}</li>
+      <li>{{ 'mtpelerin.lineItem3' | translate }}</li>
+    </ul>
+
+    <ion-row>
+      <ion-col>
+        <ion-button
+          class="mt-perelin-button"
+          expand="full"
+          size="small"
+          color="white"
+          shape="round"
+          (click)="navigate('https://www.mtpelerin.com/buy-crypto')"
+        >
+          {{ 'mtpelerin.button1' | translate }}
+        </ion-button>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col>
+        <ion-button
+          class="mt-perelin-button"
+          expand="full"
+          size="small"
+          color="white"
+          shape="round"
+          (click)="navigate('https://www.mtpelerin.com/sell-crypto')"
+        >
+          {{ 'mtpelerin.button2' | translate }}
+        </ion-button>
+      </ion-col>
+    </ion-row>
+
+    <span>
+      {{ 'mtpelerin.note' | translate }}
+    </span>
+  </div>
+</ion-content>