Skip to content

Commit

Permalink
transform dialog to page (#1427)
Browse files Browse the repository at this point in the history
* transform dialog to page

* Update CedeStore.vue

* fix namings

* change name

* save localStorage field

* Update index.ts

* bump wallet

* make btn pressed

* change url

* use util method
  • Loading branch information
RustemYuzlibaev authored May 30, 2024
1 parent feabb3c commit 072e819
Show file tree
Hide file tree
Showing 7 changed files with 114 additions and 85 deletions.
5 changes: 3 additions & 2 deletions src/components/App/Header/AppHeader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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;
}
Expand Down
60 changes: 0 additions & 60 deletions src/components/pages/CedeStore/CedeStoreWidget.vue

This file was deleted.

7 changes: 3 additions & 4 deletions src/consts/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand Down
17 changes: 11 additions & 6 deletions src/router/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
82 changes: 82 additions & 0 deletions src/views/CedeStore.vue
Original file line number Diff line number Diff line change
@@ -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>
24 changes: 13 additions & 11 deletions src/views/FiatDepositOptions.vue → src/views/DepositOptions.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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;
Expand Down

0 comments on commit 072e819

Please sign in to comment.