move to separate module (#871)

* move to separate module

* add enabling flag

* Update getters.ts

* remove route

* Update types.ts

public/env.json

@@ -7,7 +7,8 @@
   },
   "FEATURE_FLAGS": {
     "moonpay": true,
-    "charts": true
+    "charts": true,
+    "soraCard": true
   },
   "FAUCET_URL": "https://faucet.dev.sora2.tachi.soramitsu.co.jp/",
   "SUBQUERY_ENDPOINT": "https://api.subquery.network/sq/sora-xor/sora-dev",

src/components/App/Menu/AppMenu.vue

@@ -14,10 +14,9 @@
           :default-active="getCurrentPath()"
           @select="onSelect"
         >
-          <s-menu-item-group v-for="(group, index) in SidebarMenuGroups" :key="index">
+          <s-menu-item-group v-for="(item, index) in sidebarMenuItems" :key="index">
             <s-menu-item
               v-button
-              v-for="item in group"
               :key="item.title"
               :index="item.title"
               :disabled="item.disabled"
@@ -95,6 +94,7 @@ import {
   RewardsChildPages,
   StakingChildPages,
   SidebarMenuGroups,
+  SidebarMenuItem,
   FaucetLink,
   Components,
 } from '@/consts';
@@ -114,6 +114,7 @@ export default class AppMenu extends Mixins(TranslationMixin) {
   @Prop({ default: () => {}, type: Function }) readonly onSelect!: VoidFunction;
 
   @state.settings.faucetUrl faucetUrl!: string;
+  @getter.settings.soraCardEnabled private soraCardEnabled!: boolean;
   @getter.libraryTheme private libraryTheme!: Theme;
 
   readonly SidebarMenuGroups = SidebarMenuGroups;
@@ -123,6 +124,11 @@ export default class AppMenu extends Mixins(TranslationMixin) {
     return this.libraryTheme === Theme.LIGHT ? 'var(--s-color-theme-accent)' : 'var(--s-color-theme-accent-focused)';
   }
 
+  get sidebarMenuItems(): Array<SidebarMenuItem> {
+    if (this.soraCardEnabled) return SidebarMenuGroups;
+    return SidebarMenuGroups.filter((menuItem) => menuItem.title !== PageNames.SoraCard);
+  }
+
   getCurrentPath(): string {
     if (PoolChildPages.includes(router.currentRoute.name as PageNames)) {
       return PageNames.Pool;

src/components/SoraCard/SoraCardIntroPage.vue

@@ -42,9 +42,9 @@ import TranslationMixin from '../mixins/TranslationMixin';
   },
 })
 export default class SoraCardIntroPage extends Mixins(mixins.LoadingMixin, TranslationMixin) {
-  @state.prices.euroBalance private euroBalance!: string;
-  @state.prices.xorToDeposit private xorToDeposit!: FPNumber;
-  @getter.prices.isEuroBalanceEnough private isEuroBalanceEnough!: boolean;
+  @state.soraCard.euroBalance private euroBalance!: string;
+  @state.soraCard.xorToDeposit private xorToDeposit!: FPNumber;
+  @getter.soraCard.isEuroBalanceEnough private isEuroBalanceEnough!: boolean;
   @getter.wallet.account.isLoggedIn isLoggedIn!: boolean;
 
   isPriceCalculated = false;

src/consts/index.ts

@@ -216,7 +216,7 @@ export enum RewardsTabsItems {
   ReferralProgram = PageNames.ReferralProgram,
 }
 
-interface SidebarMenuItem {
+export interface SidebarMenuItem {
   icon?: string;
   title: string;
   disabled?: boolean;
@@ -321,7 +321,7 @@ export const FaucetLink: SidebarMenuItemLink = {
   title: 'faucet',
 };
 
-export const SidebarMenuGroups = [MainMenu, AccountMenu, OtherPagesMenu];
+export const SidebarMenuGroups = [...MainMenu, ...AccountMenu, ...OtherPagesMenu];
 
 export const BridgeChildPages = [PageNames.BridgeTransaction, PageNames.BridgeTransactionsHistory];
 export const PoolChildPages = [PageNames.AddLiquidity, PageNames.RemoveLiquidity];

src/router/index.ts

@@ -228,6 +228,13 @@ router.beforeEach((to, from, next) => {
       return;
     }
   }
+
+  if (!store.getters.settings.soraCardEnabled && to.name === PageNames.SoraCard) {
+    next({ name: PageNames.Swap });
+    store.commit.router.setRoute({ prev, current: PageNames.Swap });
+    return;
+  }
+
   store.commit.router.setRoute({ prev, current: to.name as PageNames });
   next();
 });

src/store/consts.ts

@@ -18,6 +18,7 @@ export enum Module {
   RemoveLiquidity = 'removeLiquidity',
   Rewards = 'rewards',
   DemeterFarming = 'demeterFarming',
+  SoraCard = 'soraCard',
 }
 
 export const Modules = [...Object.values(Module), ...WalletModules];

src/store/index.ts

@@ -18,6 +18,7 @@ import addLiquidity from './addLiquidity';
 import removeLiquidity from './removeLiquidity';
 import rewards from './rewards';
 import demeterFarming from './demeterFarming';
+import soraCard from './soraCard';
 
 Vue.use(Vuex);
 
@@ -37,6 +38,7 @@ const modules = {
   removeLiquidity,
   rewards,
   demeterFarming,
+  soraCard,
 };
 
 const { store, rootGetterContext, rootActionContext } = createDirectStore({

src/store/prices/actions.ts

@@ -1,8 +1,6 @@
 import { defineActions } from 'direct-vuex';
 import { api } from '@soramitsu/soraneo-wallet-web';
-import { FPNumber } from '@sora-substrate/util';
 
-import { getXorPerEuroRatio, waitForAccountPair } from '@/utils';
 import { pricesActionContext } from './../prices';
 import { PricesPayload } from './types';
 
@@ -36,49 +34,6 @@ const actions = defineActions({
       commit.resetPrices();
     }
   },
-  calculateXorRestPrice(context, xorPerEuro): void {
-    const { state, commit } = pricesActionContext(context);
-    const { totalXorBalance } = state;
-    const euroToPay = FPNumber.HUNDRED.add(FPNumber.ONE).sub(totalXorBalance.mul(xorPerEuro));
-    const euroToPayInXor = euroToPay.div(xorPerEuro);
-
-    commit.setXorPriceToDeposit(euroToPayInXor);
-  },
-  async calculateXorBalanceInEuros(context, xorTotalBalance: FPNumber): Promise<void> {
-    const { commit, dispatch } = pricesActionContext(context);
-    try {
-      const xorPerEuro: string = await getXorPerEuroRatio();
-      const xorPerEuroFPN = FPNumber.fromNatural(xorPerEuro);
-      const euroBalance = xorTotalBalance.mul(xorPerEuroFPN).toNumber();
-      commit.setEuroBalance(euroBalance.toString());
-
-      if (euroBalance < 100) {
-        dispatch.calculateXorRestPrice(xorPerEuroFPN);
-      }
-    } catch {}
-  },
-  async subscribeToTotalXorBalance(context): Promise<void> {
-    const { commit, rootGetters, dispatch } = pricesActionContext(context);
-
-    commit.resetTotalXorBalanceUpdates();
-
-    if (!rootGetters.wallet.account.isLoggedIn) return;
-
-    await waitForAccountPair(async () => {
-      const subscription = api.assets.getTotalXorBalanceObservable().subscribe((xorTotalBalance: FPNumber) => {
-        commit.setTotalXorBalance(xorTotalBalance);
-        dispatch.calculateXorBalanceInEuros(xorTotalBalance);
-      });
-
-      commit.setTotalXorBalanceUpdates(subscription);
-    });
-  },
-  async unsubscribeFromTotalXorBalance(context): Promise<void> {
-    const { commit } = pricesActionContext(context);
-    setTimeout(() => {
-      commit.resetTotalXorBalanceUpdates();
-    }, 1000 * 60 * 5);
-  },
 });
 
 export default actions;

src/store/prices/index.ts

@@ -1,23 +1,20 @@
 import { defineModule } from 'direct-vuex';
 
-import { localActionContext, localGetterContext } from '@/store';
+import { localActionContext } from '@/store';
 import { Module } from '@/store/consts';
 
 import mutations from './mutations';
 import state from './state';
-import getters from './getters';
 import actions from './actions';
 
 const prices = defineModule({
   namespaced: true,
   state,
-  getters,
   mutations,
   actions,
 });
 
-const pricesGetterContext = (args: [any, any, any, any]) => localGetterContext(args, Module.Prices, prices);
 const pricesActionContext = (context: any) => localActionContext(context, Module.Prices, prices);
 
-export { pricesActionContext, pricesGetterContext };
+export { pricesActionContext };
 export default prices;

src/store/prices/mutations.ts

@@ -4,30 +4,14 @@ import { ZeroStringValue } from '@/consts';
 import type { PriceState } from './types';
 
 const mutations = defineMutations<PriceState>()({
-  setPrices(state, params: Partial<PriceState>): void {
+  setPrices(state, params: PriceState): void {
     state.price = params.price;
     state.priceReversed = params.priceReversed;
   },
   resetPrices(state): void {
     state.price = ZeroStringValue;
     state.priceReversed = ZeroStringValue;
   },
-  setXorPriceToDeposit(state, xorToDeposit): void {
-    state.xorToDeposit = xorToDeposit;
-  },
-  setEuroBalance(state, euroBalance: string) {
-    state.euroBalance = euroBalance;
-  },
-  setTotalXorBalance(state, balance) {
-    state.totalXorBalance = balance;
-  },
-  setTotalXorBalanceUpdates(state, subscription) {
-    state.totalXorBalanceUpdates = subscription;
-  },
-  resetTotalXorBalanceUpdates(state) {
-    state.totalXorBalanceUpdates?.unsubscribe();
-    state.totalXorBalanceUpdates = null;
-  },
 });
 
 export default mutations;

src/store/prices/state.ts

@@ -1,15 +1,10 @@
 import { ZeroStringValue } from '@/consts';
 import type { PriceState } from './types';
-import { FPNumber } from '@sora-substrate/util';
 
 function initialState(): PriceState {
   return {
     price: ZeroStringValue,
     priceReversed: ZeroStringValue,
-    euroBalance: ZeroStringValue,
-    totalXorBalance: FPNumber.ZERO,
-    xorToDeposit: FPNumber.ZERO,
-    totalXorBalanceUpdates: null,
   };
 }
 

src/store/prices/types.ts

@@ -1,13 +1,6 @@
-import type { Subscription } from 'rxjs';
-import { FPNumber } from '@sora-substrate/util';
-
 export type PriceState = {
   price: string | undefined;
   priceReversed: string | undefined;
-  euroBalance: string;
-  totalXorBalance: FPNumber;
-  xorToDeposit: FPNumber;
-  totalXorBalanceUpdates: Nullable<Subscription>;
 };
 
 export type PricesPayload = Partial<{

src/store/settings/getters.ts

@@ -44,6 +44,10 @@ const getters = defineGetters<SettingsState>()({
     const { state } = settingsGetterContext(args);
     return !!state.featureFlags.charts && state.сhartsEnabled;
   },
+  soraCardEnabled(...args): boolean {
+    const { state } = settingsGetterContext(args);
+    return !!state.featureFlags.soraCard;
+  },
   notificationActivated(...args): boolean {
     const { state } = settingsGetterContext(args);
     return state.browserNotifsPermission === 'granted';

src/store/settings/types.ts

@@ -6,6 +6,7 @@ import type { Node } from '@/types/nodes';
 export type FeatureFlags = {
   moonpay?: boolean;
   charts?: boolean;
+  soraCard?: boolean;
 };
 
 export type SettingsState = {

src/store/soraCard/actions.ts

@@ -0,0 +1,57 @@
+import { defineActions } from 'direct-vuex';
+import { api } from '@soramitsu/soraneo-wallet-web';
+import { FPNumber } from '@sora-substrate/util';
+
+import { getXorPerEuroRatio, waitForAccountPair } from '@/utils';
+import { soraCardActionContext } from './../soraCard';
+
+const actions = defineActions({
+  calculateXorRestPrice(context, xorPerEuro): void {
+    const { state, commit } = soraCardActionContext(context);
+    const { totalXorBalance } = state;
+    const euroToPay = FPNumber.HUNDRED.add(FPNumber.ONE).sub(totalXorBalance.mul(xorPerEuro));
+    const euroToPayInXor = euroToPay.div(xorPerEuro);
+
+    commit.setXorPriceToDeposit(euroToPayInXor);
+  },
+
+  async calculateXorBalanceInEuros(context, xorTotalBalance: FPNumber): Promise<void> {
+    const { commit, dispatch } = soraCardActionContext(context);
+    try {
+      const xorPerEuro: string = await getXorPerEuroRatio();
+      const xorPerEuroFPN = FPNumber.fromNatural(xorPerEuro);
+      const euroBalance = xorTotalBalance.mul(xorPerEuroFPN).toNumber();
+      commit.setEuroBalance(euroBalance.toString());
+
+      if (euroBalance < 100) {
+        dispatch.calculateXorRestPrice(xorPerEuroFPN);
+      }
+    } catch {}
+  },
+
+  async subscribeToTotalXorBalance(context): Promise<void> {
+    const { commit, rootGetters, dispatch } = soraCardActionContext(context);
+
+    commit.resetTotalXorBalanceUpdates();
+
+    if (!rootGetters.wallet.account.isLoggedIn) return;
+
+    await waitForAccountPair(async () => {
+      const subscription = api.assets.getTotalXorBalanceObservable().subscribe((xorTotalBalance: FPNumber) => {
+        commit.setTotalXorBalance(xorTotalBalance);
+        dispatch.calculateXorBalanceInEuros(xorTotalBalance);
+      });
+
+      commit.setTotalXorBalanceUpdates(subscription);
+    });
+  },
+
+  async unsubscribeFromTotalXorBalance(context): Promise<void> {
+    const { commit } = soraCardActionContext(context);
+    setTimeout(() => {
+      commit.resetTotalXorBalanceUpdates();
+    }, 1000 * 60 * 5);
+  },
+});
+
+export default actions;

src/store/prices/getters.ts → src/store/soraCard/getters.ts

@@ -1,11 +1,11 @@
 import { defineGetters } from 'direct-vuex';
-import { pricesGetterContext } from '.';
+import { soraCardGetterContext } from '.';
 
-import { PriceState } from './types';
+import { SoraCardState } from './types';
 
-const getters = defineGetters<PriceState>()({
+const getters = defineGetters<SoraCardState>()({
   isEuroBalanceEnough(...args): boolean {
-    const { state } = pricesGetterContext(args);
+    const { state } = soraCardGetterContext(args);
     const euroBalance = parseInt(state.euroBalance, 10);
     return euroBalance > 100;
   },

src/store/soraCard/index.ts

@@ -0,0 +1,23 @@
+import { defineModule } from 'direct-vuex';
+
+import { localActionContext, localGetterContext } from '@/store';
+import { Module } from '@/store/consts';
+
+import mutations from './mutations';
+import state from './state';
+import getters from './getters';
+import actions from './actions';
+
+const soraCard = defineModule({
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions,
+});
+
+const soraCardGetterContext = (args: [any, any, any, any]) => localGetterContext(args, Module.SoraCard, soraCard);
+const soraCardActionContext = (context: any) => localActionContext(context, Module.SoraCard, soraCard);
+
+export { soraCardActionContext, soraCardGetterContext };
+export default soraCard;