transform dialog to page

src/components/App/Header/AppHeader.vue

@@ -4,7 +4,7 @@
     <app-logo-button class="app-logo--header" responsive :theme="libraryTheme" @click="goTo(PageNames.Swap)" />
     <div class="app-controls app-controls--middle s-flex">
       <app-marketing v-show="!isMobile" />
-      <s-button :class="fiatBtnClass" :type="fiatBtnType" size="medium" @click="goTo(PageNames.FiatDepositOptions)">
+      <s-button :class="fiatBtnClass" :type="fiatBtnType" size="medium" @click="goTo(PageNames.DepositOptions)">
         <pair-token-logo class="payment-icon" :first-token="xor" :second-token="eth" :size="fiatBtnSize" />
         <span v-if="!isAnyMobile">{{ t('moonpay.buttons.buy') }}</span>
       </s-button>
@@ -78,7 +78,8 @@ export default class AppHeader extends Mixins(WalletConnectMixin) {
   get fiatBtnClass(): string[] {
     const base = ['app-controls-fiat-btn', 'active'];
 
-    if (this.$route.name === PageNames.FiatDepositOptions) base.push('app-controls-fiat-btn--active', 's-pressed');
+    if ([PageNames.DepositOptions, PageNames.CedeStore].includes(this.$route.name as PageNames))
+      base.push('app-controls-fiat-btn--active', 's-pressed');
 
     return base;
   }

src/consts/index.ts

@@ -133,8 +133,9 @@ export enum PageNames {
   BridgeTransaction = 'BridgeTransaction',
   BridgeTransactionsHistory = 'BridgeTransactionsHistory',
   Tokens = 'Tokens',
-  FiatDepositOptions = 'FiatDepositOptions',
-  FiatTxHistory = 'FiatTxHistory',
+  DepositOptions = 'DepositOptions',
+  DepositTxHistory = 'DepositTxHistory',
+  CedeStore = 'CedeStore',
   StakingContainer = 'StakingContainer',
   // just for router name & different titles
   ExploreContainer = 'Explore/Container',
@@ -210,8 +211,6 @@ export enum Components {
   MoonpayNotification = 'pages/Moonpay/Notification',
   MoonpayConfirmation = 'pages/Moonpay/Confirmation',
   MoonpayHistory = 'pages/Moonpay/MoonpayHistory',
-  // CedeStore Page
-  CedeStore = 'pages/CedeStore/CedeStoreWidget',
   // Swap Page
   SwapFormWidget = 'pages/Swap/Widget/Form',
   SwapChartWidget = 'pages/Swap/Widget/Chart',

src/router/index.ts

@@ -252,18 +252,23 @@ const routes: Array<RouteConfig> = [
     },
   },
   {
-    path: '/fiat-deposit',
-    name: PageNames.FiatDepositOptions,
-    component: lazyView(PageNames.FiatDepositOptions),
+    path: '/deposit',
+    name: PageNames.DepositOptions,
+    component: lazyView(PageNames.DepositOptions),
   },
   {
-    path: '/fiat-deposit/history',
-    name: PageNames.FiatTxHistory,
-    component: lazyView(PageNames.FiatTxHistory),
+    path: '/deposit/history',
+    name: PageNames.DepositTxHistory,
+    component: lazyView(PageNames.DepositTxHistory),
     meta: {
       requiresAuth: true,
     },
   },
+  {
+    path: '/deposit/transfer-from-cex',
+    name: PageNames.CedeStore,
+    component: lazyView(PageNames.CedeStore),
+  },
   {
     path: '/kensetsu',
     component: lazyView(PageNames.VaultsContainer),

src/views/CedeStore.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="container cede-store-page" v-loading="parentLoading">
+    <generic-page-header has-button-back @back="goTo(PageNames.DepositOptions)">
+      <template #title="">{{ brandName }}</template>
+    </generic-page-header>
+    <div id="cede-widget" />
+  </div>
+</template>
+
+<script lang="ts">
+import { renderSendWidget } from '@cedelabs/widgets-universal';
+import { mixins, WALLET_CONSTS } from '@soramitsu/soraneo-wallet-web';
+import Theme from '@soramitsu-ui/ui-vue2/lib/types/Theme';
+import { Component, Mixins } from 'vue-property-decorator';
+
+import { capitalize } from '@/utils';
+
+import { Components, PageNames } from '../consts';
+import { goTo, lazyComponent } from '../router';
+import { getter, state } from '../store/decorators';
+
+@Component({
+  components: {
+    GenericPageHeader: lazyComponent(Components.GenericPageHeader),
+  },
+})
+export default class CedeStore extends Mixins(mixins.TranslationMixin, mixins.LoadingMixin) {
+  @state.wallet.settings.soraNetwork soraNetwork!: Nullable<WALLET_CONSTS.SoraNetwork>;
+  @state.wallet.account.address accountAddress!: string;
+
+  @getter.wallet.account.isLoggedIn isLoggedIn!: boolean;
+  @getter.libraryTheme libraryTheme!: Theme;
+
+  goTo = goTo;
+  PageNames = PageNames;
+
+  get brandName(): string {
+    return capitalize(this.TranslationConsts.CedeStore);
+  }
+
+  rootSelector = '#cede-widget';
+
+  private loadCedeWidget(): void {
+    try {
+      this.$nextTick(() => {
+        renderSendWidget(this.rootSelector, {
+          config: {
+            tokenSymbol: 'XOR',
+            network: 'sora',
+            address: this.accountAddress,
+            lockNetwork: true,
+          },
+          theme: {
+            mode: this.libraryTheme,
+            logoTheme: this.libraryTheme,
+            fontFamily: 'Sora',
+            width: '420px',
+            accentColor: '#f8087b',
+            logoBorderColor: '#f8087b',
+            warningColor: '#eba332',
+            errorColor: '#f754a3',
+          },
+        });
+      });
+    } catch (error) {
+      console.error("[CEDE STORE] wasn't loaded.", error);
+    }
+  }
+
+  mounted(): void {
+    this.loadCedeWidget();
+  }
+}
+</script>
+
+<style lang="scss">
+.cede-store-page {
+  .page-header .page-header-title {
+    text-transform: none;
+  }
+}
+</style>

src/views/FiatDepositOptions.vue → src/views/DepositOptions.vue

@@ -17,19 +17,16 @@
             value3: TranslationConsts.CedeStore,
           })
         }}</span>
-        <s-button type="primary" @click="openCedeDialog">{{
-          t('fiatPayment.cedeStoreBtn', { value1: TranslationConsts.CEX, value2: TranslationConsts.CedeStore })
-        }}</s-button>
+        <s-button type="primary" @click="openCedeWidget">{{ cedeTextBtn }}</s-button>
       </div>
-      <div v-if="isLoggedIn" class="pay-options__history-btn" @click="openFiatTxHistory">
+      <div v-if="isLoggedIn" class="pay-options__history-btn" @click="openDepositTxHistory">
         <span>{{ t('fiatPayment.historyBtn') }}</span>
         <div>
           <span :class="computedCounterClass">{{ +hasPendingTx }}</span>
           <s-icon name="arrows-chevron-right-rounded-24" size="18" />
         </div>
       </div>
     </div>
-    <cede-store-dialog @error="showErrorMessage" :visible.sync="showCedeDialog" />
     <template v-if="moonpayEnabled">
       <moonpay />
       <moonpay-notification />
@@ -62,12 +59,11 @@ import type Theme from '@soramitsu-ui/ui-vue2/lib/types/Theme';
     MoonpayConfirmation: lazyComponent(Components.MoonpayConfirmation),
     PaymentError: lazyComponent(Components.PaymentErrorDialog),
     SelectProviderDialog: lazyComponent(Components.SelectProviderDialog),
-    CedeStoreDialog: lazyComponent(Components.CedeStore),
     MoonpayLogo,
     CedeStoreLogo,
   },
 })
-export default class FiatTxHistory extends Mixins(mixins.TranslationMixin, WalletConnectMixin) {
+export default class DepositOptions extends Mixins(mixins.TranslationMixin, WalletConnectMixin) {
   @state.moonpay.bridgeTransactionData private bridgeTransactionData!: Nullable<EthHistory>;
   @state.moonpay.startBridgeButtonVisibility private startBridgeButtonVisibility!: boolean;
 
@@ -96,16 +92,22 @@ export default class FiatTxHistory extends Mixins(mixins.TranslationMixin, Walle
     return !this.isSoraAccountConnected ? this.t('connectWalletText') : this.t('fiatPayment.moonpayTitle');
   }
 
-  openFiatTxHistory(): void {
-    goTo(PageNames.FiatTxHistory);
+  get cedeTextBtn(): string {
+    return !this.isSoraAccountConnected
+      ? this.t('connectWalletText')
+      : this.t('fiatPayment.cedeStoreBtn', { value1: TranslationConsts.CEX, value2: TranslationConsts.CedeStore });
   }
 
-  openCedeDialog(): void {
+  openDepositTxHistory(): void {
+    goTo(PageNames.DepositTxHistory);
+  }
+
+  openCedeWidget(): void {
     if (!this.isSoraAccountConnected) {
       return this.connectSoraWallet();
     }
 
-    this.showCedeDialog = true;
+    goTo(PageNames.CedeStore);
   }
 
   showErrorMessage(): void {

src/views/FiatTxHistory.vue → src/views/DepositTxHistory.vue

@@ -2,7 +2,7 @@
   <div class="container transaction-fiat-history" v-loading="parentLoading">
     <generic-page-header
       class="page-header-title--moonpay-history"
-      @back="goTo(PageNames.FiatDepositOptions)"
+      @back="goTo(PageNames.DepositOptions)"
       has-button-back
     >
       <template #title="">{{ t('fiatPayment.historyTitle') }}</template>
@@ -29,7 +29,7 @@ import { FiatOptionTabs } from '../types/tabs';
     MoonpayHistory: lazyComponent(Components.MoonpayHistory),
   },
 })
-export default class FiatTxHistory extends Mixins(mixins.TranslationMixin, mixins.LoadingMixin) {
+export default class DepositTxHistory extends Mixins(mixins.TranslationMixin, mixins.LoadingMixin) {
   @getter.wallet.account.isLoggedIn isLoggedIn!: boolean;
 
   FiatOptionTabs = FiatOptionTabs;