Mf/add buy deso with megaswap tab (#610)

* Add buy DESO with MegaSwap tab.

* Remove empty div element.

* Center tabs.

* Make Buy w BTC and Buy w ETH their own pages.

* Make tabs more consistent.

* Wrap iframe in row/col.

* Make iframe sizing more responsive.

* Fix height issue.

* Use GH pages link for now.

* Support other themes.

* Add links to megaswap.xyz.

* Update URL to megaswap.xyz.

* Add x padding.

* Remove x padding.

Author: mattfoley8

Caddyfile

@@ -37,6 +37,8 @@ header @html Content-Security-Policy "
     https://altumbase.com
     localhost:*
     explorer.bitclout.com
+    megaswap.dev
+    megaswap.xyz
     https://api.blockchain.com/ticker
     https://api.blockchain.com/mempool/fees
     https://ka-f.fontawesome.com/
@@ -80,6 +82,8 @@ header @html Content-Security-Policy "
     identity.bitclout.com
     identity.bitclout.blue
     identity.bitclout.green
+    megaswap.dev
+    megaswap.xyz
     https://geo.captcha-delivery.com
     https://www.youtube.com
     https://youtube.com

src/app/app-routing.module.ts

@@ -112,6 +112,11 @@ const routes: Routes = [
     component: BuyDeSoPageComponent,
     pathMatch: 'full',
   },
+  {
+    path: RouteNames.BUY_DESO + '/:ticker',
+    component: BuyDeSoPageComponent,
+    pathMatch: 'full',
+  },
   {
     path: RouteNames.PICK_A_COIN,
     component: PickACoinPageComponent,

src/app/app.module.ts

@@ -41,6 +41,7 @@ import { LeftBarButtonComponent } from './left-bar/left-bar-button/left-bar-butt
 import { TradeCreatorPageComponent } from './trade-creator-page/trade-creator-page.component';
 import { TradeCreatorComponent } from './trade-creator-page/trade-creator/trade-creator.component';
 import { BuyDeSoComponent } from './buy-deso-page/buy-deso/buy-deso.component';
+import { BuyDeSoMegaSwapComponent } from './buy-deso-page/buy-deso-megaswap/buy-deso-megaswap.component';
 import { BuyDeSoUSDComponent } from './buy-deso-page/buy-deso-usd/buy-deso-usd.component';
 import { TradeCreatorFormComponent } from './trade-creator-page/trade-creator-form/trade-creator-form.component';
 import { TradeCreatorPreviewComponent } from './trade-creator-page/trade-creator-preview/trade-creator-preview.component';
@@ -212,6 +213,7 @@ const greenishTheme: Theme = { key: 'greenish', name: 'Green Theme' };
     TradeCreatorPageComponent,
     TradeCreatorComponent,
     BuyDeSoComponent,
+    BuyDeSoMegaSwapComponent,
     BuyDeSoUSDComponent,
     TradeCreatorFormComponent,
     TradeCreatorPreviewComponent,

src/app/buy-deso-page/buy-deso-megaswap/buy-deso-megaswap.component.html

@@ -0,0 +1,25 @@
+<div class="vh-75">
+  <p class="mb-2 px-3 fs-7 text-muted">
+    <i class="fas fa-info-circle"></i>
+    Swap from BTC, ETH, SOL, and other chains to DESO using MegaSwap.
+    The legacy <a [routerLink]="'/' + globalVars.RouteNames.BUY_DESO + '/BTC'">Buy with BTC</a>
+    <span *ngIf="globalVars.showBuyWithETH; else elseBlockInfo">
+      and <a [routerLink]="'/' + globalVars.RouteNames.BUY_DESO + '/ETH'">Buy with ETH</a> flows are
+    </span>
+    <ng-template #elseBlockInfo>
+      flow is
+    </ng-template>
+    still accessible but being deprecated.
+  </p>
+
+  <iframe
+    *ngIf="iframeURL; else elseBlockIframe"
+    [src]="iframeURL"
+    class="border-0 rounded w-100 h-100"
+  ></iframe>
+  <ng-template #elseBlockIframe>
+    <p class="fs-8 text-danger text-center">
+      <i class="fas fa-exclamation-triangle"></i> Unable to render iFrame.<br />Invalid MegaSwap URL.
+    </p>
+  </ng-template>
+</div>

src/app/buy-deso-page/buy-deso-megaswap/buy-deso-megaswap.component.scss

@@ -0,0 +1,11 @@
+.fs-7 {
+  font-size: 0.7rem;
+}
+
+.fs-8 {
+  font-size: 0.8rem;
+}
+
+.vh-75 {
+  height: 75vh;
+}

src/app/buy-deso-page/buy-deso-megaswap/buy-deso-megaswap.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BuyDeSoMegaSwapComponent } from './buy-deso-megaswap.component';
+
+describe('BuyDeSoMegaSwapComponent', () => {
+  let component: BuyDeSoMegaSwapComponent;
+  let fixture: ComponentFixture<BuyDeSoMegaSwapComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [BuyDeSoMegaSwapComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BuyDeSoMegaSwapComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/buy-deso-page/buy-deso-megaswap/buy-deso-megaswap.component.ts

@@ -0,0 +1,52 @@
+import { Component, OnInit } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl, Title } from '@angular/platform-browser';
+import { GlobalVarsService } from 'src/app/global-vars.service';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'buy-deso-megaswap',
+  templateUrl: './buy-deso-megaswap.component.html',
+  styleUrls: ['./buy-deso-megaswap.component.scss'],
+})
+export class BuyDeSoMegaSwapComponent implements OnInit {
+  iframeURL: SafeResourceUrl = '';
+
+  constructor(
+    public globalVars: GlobalVarsService,
+    private sanitizer: DomSanitizer,
+  ) {
+    if (!environment.megaswapURL) {
+      return;
+    }
+
+    // Map theme to MegaSwap theme.
+    let theme = {
+      'cake': 'light-peach',
+      'dark': 'dark-gray',
+      'greenish': 'dark-green',
+      'icydark': 'dark-icy',
+      'legends': 'dark-brown',
+      'light': 'light-white',
+    }[localStorage.getItem('theme')] || 'default';
+
+    if (theme === 'default' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      theme = 'dark-gray';
+    }
+
+    this.iframeURL = this.sanitizer.bypassSecurityTrustResourceUrl(
+      [
+        environment.megaswapURL,
+        '/#/iframe/v1?',
+        `network=${environment.production ? 'mainnet' : 'testnet'}`,
+        `&theme=${theme}`,
+        '&destinationTickers=DESO',
+        '&destinationTicker=DESO',
+        `&destinationAddress=${this.globalVars.loggedInUser?.PublicKeyBase58Check || ''}`,
+      ].join('')
+    );
+  }
+
+  ngOnInit() {
+    window.scroll(0, 0);
+  }
+}

src/app/buy-deso-page/buy-deso/buy-deso.component.html

@@ -25,6 +25,9 @@
             (tabClick)="_handleTabClick($event)"
           ></tab-selector>
         </div>
+        <div *ngIf="activeTab === BuyDeSoComponent.BUY_WITH_MEGASWAP">
+          <buy-deso-megaswap></buy-deso-megaswap>
+        </div>
         <div *ngIf="activeTab === BuyDeSoComponent.BUY_WITH_USD">
           <buy-deso-usd></buy-deso-usd>
         </div>

src/app/buy-deso-page/buy-deso/buy-deso.component.ts

@@ -43,12 +43,13 @@ export class BuyDeSoComponent implements OnInit {
 
   BuyDeSoComponent = BuyDeSoComponent;
 
+  static BUY_WITH_MEGASWAP = 'Buy with Crypto';
   static BUY_WITH_USD = 'Buy with USD';
-  static BUY_WITH_BTC = 'Buy with Bitcoin';
+  static BUY_WITH_BTC = 'Buy with BTC';
   static BUY_WITH_ETH = 'Buy with ETH';
 
-  buyTabs = [BuyDeSoComponent.BUY_WITH_BTC];
-  activeTab = BuyDeSoComponent.BUY_WITH_BTC;
+  buyTabs = [BuyDeSoComponent.BUY_WITH_MEGASWAP];
+  activeTab = BuyDeSoComponent.BUY_WITH_MEGASWAP;
 
   constructor(
     public ref: ChangeDetectorRef,
@@ -518,14 +519,18 @@ export class BuyDeSoComponent implements OnInit {
     window.scroll(0, 0);
 
     // Add extra tabs
-    if (this.globalVars.showBuyWithUSD) {
-      this.buyTabs.unshift(BuyDeSoComponent.BUY_WITH_USD);
-      this.activeTab = BuyDeSoComponent.BUY_WITH_USD;
-    }
-
-    if (this.globalVars.showBuyWithETH) {
-      this.buyTabs.push(BuyDeSoComponent.BUY_WITH_ETH);
-    }
+    this.route.params.subscribe((params) => {
+      const ticker = (params.ticker || '').toUpperCase();
+      if (ticker === 'BTC') {
+        this.buyTabs = [BuyDeSoComponent.BUY_WITH_BTC];
+        this.activeTab = BuyDeSoComponent.BUY_WITH_BTC
+      } else if (ticker === 'ETH' && this.globalVars.showBuyWithETH) {
+        this.buyTabs = [BuyDeSoComponent.BUY_WITH_ETH];
+        this.activeTab = BuyDeSoComponent.BUY_WITH_ETH;
+      } else if (this.globalVars.showBuyWithUSD) {
+        this.buyTabs.push(BuyDeSoComponent.BUY_WITH_USD);
+      }
+    });
 
     // Query the website to get the fees.
     this.backendApi.GetBitcoinFeeRateSatoshisPerKB().subscribe(

src/environments/environment.bitclout.ts

@@ -21,4 +21,5 @@ export const environment = {
     url: 'https://bitclout.com',
     logoAssetDir: '/assets/bitclout/',
   },
+  megaswapURL: 'https://megaswap.xyz',
 };

src/environments/environment.deso.ts

@@ -21,4 +21,5 @@ export const environment = {
     url: 'https://node.deso.org',
     logoAssetDir: '/assets/deso/',
   },
+  megaswapURL: 'https://megaswap.xyz',
 };

src/environments/environment.dev.ts

@@ -21,4 +21,5 @@ export const environment = {
     url: 'https://test.deso.org',
     logoAssetDir: '/assets/deso/',
   },
+  megaswapURL: 'https://megaswap.xyz',
 };

src/environments/environment.prod.ts

@@ -21,4 +21,5 @@ export const environment = {
     url: 'https://node.deso.org',
     logoAssetDir: '/assets/deso/',
   },
+  megaswapURL: 'https://megaswap.xyz',
 };

src/environments/environment.ts

@@ -25,4 +25,5 @@ export const environment = {
     url: 'https://node.deso.org',
     logoAssetDir: '/assets/deso/',
   },
+  megaswapURL: 'https://megaswap.xyz',
 };