Revert "Resolve "Remove Mt. Pelerin functionality""

jafarijason · Feb 12, 2024 · 9336a87 · 9336a87
1 parent 8903a7e
commit 9336a87
Show file tree

Hide file tree

Showing 10 changed files with 254 additions and 1 deletion.
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -210,6 +210,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: {

diff --git a/src/app/pages/account-transaction-list/account-transaction-list.html b/src/app/pages/account-transaction-list/account-transaction-list.html
@@ -96,12 +96,34 @@
   <ion-fab vertical="bottom" slot="fixed">
     <ion-row>
       <ion-col>
+        <ion-button
+          *ngIf="isMtPerelinActive"
+          class="mt-perelin-button"
+          expand="full"
+          size="default"
+          color="white"
+          (click)="buyMtPerelin()"
+          shape="round"
+        >
+          {{ 'account-transaction-list.mtpelerin.buy_label' | translate }}
+        </ion-button>
         <ion-button id="receive" expand="full" size="default" color="primary" (click)="openReceivePage()" shape="round">
           <ion-icon slot="start" src="./assets/custom-ion-icons/md-call_received.svg"></ion-icon>
           {{ 'account-transaction-list.receive_label' | translate }}
         </ion-button>
       </ion-col>
       <ion-col>
+        <ion-button
+          *ngIf="isMtPerelinActive"
+          class="mt-perelin-button"
+          expand="full"
+          size="default"
+          color="white"
+          (click)="sellMtPerelin()"
+          shape="round"
+        >
+          {{ 'account-transaction-list.mtpelerin.cash-out_label' | translate }}
+        </ion-button>
         <ion-button
           id="send"
           expand="full"

diff --git a/src/app/pages/account-transaction-list/account-transaction-list.scss b/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;
+    }
+  }
+}
diff --git a/src/app/pages/account-transaction-list/account-transaction-list.ts b/src/app/pages/account-transaction-list/account-transaction-list.ts
@@ -1,4 +1,10 @@
-import { createV0TezosKtProtocol, ICoinSubProtocolAdapter, ProtocolService } from '@airgap/angular-core'
+import {
+  createV0TezosKtProtocol,
+  ICoinSubProtocolAdapter,
+  InternalStorageKey,
+  InternalStorageService,
+  ProtocolService
+} from '@airgap/angular-core'
 import { AirGapMarketWallet, IAirGapTransaction, MainProtocolSymbols, SubProtocolSymbols } from '@airgap/coinlib-core'
 import { Action } from '@airgap/coinlib-core/actions/Action'
 import { IAirGapAddressResult } from '@airgap/coinlib-core/interfaces/IAirGapAddress'
@@ -116,6 +122,7 @@ export class AccountTransactionListPage {
     private readonly pushBackendProvider: PushBackendProvider,
     private readonly extensionsService: ExtensionsService,
     private readonly browserService: BrowserService,
+    private readonly storageService: InternalStorageService,
     private readonly modalController: ModalController
   ) {
     this.isDesktop = this.platform.is('desktop')
@@ -159,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 {
@@ -416,4 +435,20 @@ export class AccountTransactionListPage {
       })
     })
   }
+
+  public async buyMtPerelin() {
+    this.wallet.protocol.getSymbol().then(async (symbol) => {
+      const url = `https://buy.mtpelerin.com/?type=direct-link&bdc=${symbol}&rfr=bcH4RmHm&_ctkn=954139b2-ef3e-4914-82ea-33192d3f43d3`
+      await this.openModal(url)
+      // window.open(`https://buy.mtpelerin.com/?type=direct-link&bdc=${symbol}&rfr=bcH4RmHm`, '_blank')
+    })
+  }
+
+  public async sellMtPerelin() {
+    this.wallet.protocol.getSymbol().then(async (symbol) => {
+      const url = `https://sell.mtpelerin.com/?type=direct-link&tab=sell&ssc=${symbol}&rfr=bcH4RmHm&_ctkn=954139b2-ef3e-4914-82ea-33192d3f43d3`
+      await this.openModal(url)
+      // window.open(`https://sell.mtpelerin.com/?type=direct-link&tab=sell&ssc=${symbol}&rfr=bcH4RmHm`, '_blank')
+    })
+  }
 }
diff --git a/src/app/pages/settings/settings.html b/src/app/pages/settings/settings.html
@@ -250,6 +250,16 @@
       </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-list lines="none">
       <ion-list-header class="ion-no-margin" lines="none">
         <ion-label>{{ 'settings.add-ons_settings.label' | translate }}</ion-label>

diff --git a/src/app/pages/trading-settings/trading-settings.module.ts b/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 { TranslateModule } from '@ngx-translate/core'
+import { ComponentsModule } from '@airgap/angular-core'
+import { RouterModule } from '@angular/router'
+import { TradingSettingsPage } from './trading-settings.page'
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ComponentsModule,
+    TranslateModule,
+    RouterModule.forChild([{ path: '', component: TradingSettingsPage }])
+  ],
+  declarations: [TradingSettingsPage]
+})
+export class TradingSettingsPageModule {}
diff --git a/src/app/pages/trading-settings/trading-settings.page.html b/src/app/pages/trading-settings/trading-settings.page.html
@@ -0,0 +1,65 @@
+<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>
+    <ion-toggle [checked]="useMtPerelin" (ionChange)="toggleUseMtPerelin($event)" slot="end">{{ 'settings.trading_settings.mtpelerin' | translate }}</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>
+    <span>
+      <a (click)="navigate('https://developers.mtpelerin.com/service-information/supported-countries')">{{ 'mtpelerin.noteLink1' | translate }}</a>, <a (click)="navigate('https://www.mtpelerin.com/terms-conditions')">{{ 'mtpelerin.noteLink2' | translate }}</a>
+    </span>
+  </div>
+</ion-content>
diff --git a/src/app/pages/trading-settings/trading-settings.page.scss b/src/app/pages/trading-settings/trading-settings.page.scss
@@ -0,0 +1,45 @@
+.mtpelerin-wrapper {
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+
+  .buttons-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  img {
+    height: 48px;
+    width: fit-content;
+  }
+
+  h3 {
+    color: white;
+    margin-top: 32px;
+    margin-bottom: 0px;
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  p {
+    margin-top: 12px;
+    margin-bottom: 0px;
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  ul {
+    margin-top: 12px;
+    margin-bottom: 32px;
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  span {
+    margin-top: 12px;
+    margin-bottom: 0px;
+    font-size: 12px;
+    font-weight: 400;
+    color: gray;
+  }
+}
diff --git a/src/app/pages/trading-settings/trading-settings.page.ts b/src/app/pages/trading-settings/trading-settings.page.ts
@@ -0,0 +1,26 @@
+import { InternalStorageKey, InternalStorageService } from '@airgap/angular-core'
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'app-trading-settings',
+  templateUrl: './trading-settings.page.html',
+  styleUrls: ['./trading-settings.page.scss']
+})
+export class TradingSettingsPage {
+  public useMtPerelin: boolean = false
+
+  public constructor(private readonly storageService: InternalStorageService) {
+    this.storageService.get(InternalStorageKey.SETTINGS_TRADING_USE_MTPELERIN).then((value) => {
+      this.useMtPerelin = value
+    })
+  }
+
+  public async toggleUseMtPerelin(event: any) {
+    const value = event.detail.checked
+    await this.storageService.set(InternalStorageKey.SETTINGS_TRADING_USE_MTPELERIN, value)
+  }
+
+  public navigate(path: string) {
+    window.open(path, '_blank')
+  }
+}
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -196,6 +196,11 @@
       "label": "Interaction Setting",
       "text": "Vault and Wallet Interaction Settings"
     },
+    "trading_settings": {
+      "label": "Trading",
+      "text": "Advanced Trading Settings",
+      "mtpelerin": "Use Mt Pelerin"
+    },
     "add-ons_settings": {
       "label": "Add-ons",
       "isolated-modules_text": "Isolated Modules"