From 1884b84e96e7321dd1c366961bfdd8e7a52e0999 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Mon, 12 Dec 2022 19:45:44 +0300
Subject: [PATCH 01/16] refactoring pool page

---
 .../components/CalculatorDialog.vue           | 12 ++-
 .../demeterFarming/mixins/PoolMixin.ts        | 10 --
 src/store/demeterFarming/getters.ts           |  3 +-
 src/store/demeterFarming/mutations.ts         |  6 +-
 src/store/demeterFarming/types.ts             |  6 +-
 src/store/pool/mutations.ts                   |  2 +-
 src/store/pool/types.ts                       |  2 +-
 src/views/Pool.vue                            | 99 +++++++++----------
 8 files changed, 65 insertions(+), 75 deletions(-)

diff --git a/src/modules/demeterFarming/components/CalculatorDialog.vue b/src/modules/demeterFarming/components/CalculatorDialog.vue
index 5cf6ad22e..a78bb6758 100644
--- a/src/modules/demeterFarming/components/CalculatorDialog.vue
+++ b/src/modules/demeterFarming/components/CalculatorDialog.vue
@@ -66,7 +66,7 @@ import StakeDialogMixin from '../mixins/StakeDialogMixin';
 
 import { lazyComponent } from '@/router';
 import { Components, Links } from '@/consts';
-import { isMaxButtonAvailable, getMaxValue } from '@/utils';
+import { getAssetBalance, isMaxButtonAvailable, getMaxValue } from '@/utils';
 
 @Component({
   components: {
@@ -101,6 +101,16 @@ export default class CalculatorDialog extends Mixins(StakeDialogMixin) {
     return `${this.rewardAssetSymbol} rewards`;
   }
 
+  get baseAssetDecimals(): number {
+    return this.baseAsset?.decimals ?? FPNumber.DEFAULT_PRECISION;
+  }
+
+  get baseAssetBalance(): FPNumber {
+    if (!this.baseAsset) return FPNumber.ZERO;
+
+    return FPNumber.fromCodecValue(getAssetBalance(this.baseAsset) ?? 0, this.baseAssetDecimals);
+  }
+
   get isBaseAssetMaxButtonAvailable(): boolean {
     if (!this.baseAsset) return false;
 
diff --git a/src/modules/demeterFarming/mixins/PoolMixin.ts b/src/modules/demeterFarming/mixins/PoolMixin.ts
index 43931bf81..33f53f55f 100644
--- a/src/modules/demeterFarming/mixins/PoolMixin.ts
+++ b/src/modules/demeterFarming/mixins/PoolMixin.ts
@@ -35,10 +35,6 @@ export default class PoolMixin extends Mixins(AccountPoolMixin, TranslationMixin
     return this.getAsset(this.pool?.baseAsset);
   }
 
-  get baseAssetDecimals(): number {
-    return this.baseAsset?.decimals ?? FPNumber.DEFAULT_PRECISION;
-  }
-
   get poolAsset(): Nullable<AccountAsset> {
     return this.getAsset(this.pool?.poolAsset);
   }
@@ -67,12 +63,6 @@ export default class PoolMixin extends Mixins(AccountPoolMixin, TranslationMixin
     return FPNumber.fromCodecValue(getAssetBalance(this.liquidity, { parseAsLiquidity: true }) ?? 0);
   }
 
-  get baseAssetBalance(): FPNumber {
-    if (!this.baseAsset) return FPNumber.ZERO;
-
-    return FPNumber.fromCodecValue(getAssetBalance(this.baseAsset) ?? 0, this.baseAssetDecimals);
-  }
-
   get poolAssetBalance(): FPNumber {
     if (!this.poolAsset) return FPNumber.ZERO;
 
diff --git a/src/store/demeterFarming/getters.ts b/src/store/demeterFarming/getters.ts
index 6beb8130c..ad7b0d190 100644
--- a/src/store/demeterFarming/getters.ts
+++ b/src/store/demeterFarming/getters.ts
@@ -1,6 +1,5 @@
 import { defineGetters } from 'direct-vuex';
 import { FPNumber } from '@sora-substrate/math';
-import { XOR } from '@sora-substrate/util/build/assets/consts';
 
 import { demeterFarmingGetterContext } from './index';
 
@@ -13,7 +12,7 @@ import type { DemeterFarmingState } from './types';
 
 type Pool = DemeterPool | DemeterAccountPool;
 
-const createPoolsDoubleMap = <T extends Pool>(pools: Array<T>, isFarm = true): DoubleMap<T[]> => {
+const createPoolsDoubleMap = <T extends Pool>(pools: readonly T[], isFarm = true): DoubleMap<T[]> => {
   return pools.reduce((buffer, pool) => {
     if (pool.isFarm !== isFarm) return buffer;
 
diff --git a/src/store/demeterFarming/mutations.ts b/src/store/demeterFarming/mutations.ts
index 22b88dee3..14e805906 100644
--- a/src/store/demeterFarming/mutations.ts
+++ b/src/store/demeterFarming/mutations.ts
@@ -10,7 +10,7 @@ import type { DemeterFarmingState } from './types';
 
 const mutations = defineMutations<DemeterFarmingState>()({
   setPools(state, pools: Array<DemeterPool>): void {
-    state.pools = [...pools];
+    state.pools = Object.freeze([...pools]);
   },
   setPoolsUpdates(state, updates: Subscription): void {
     state.poolsUpdates = updates;
@@ -21,7 +21,7 @@ const mutations = defineMutations<DemeterFarmingState>()({
   },
 
   setTokens(state, tokens: Array<DemeterRewardToken>): void {
-    state.tokens = [...tokens];
+    state.tokens = Object.freeze([...tokens]);
   },
   setTokensUpdates(state, updates: Subscription): void {
     state.tokensUpdates = updates;
@@ -32,7 +32,7 @@ const mutations = defineMutations<DemeterFarmingState>()({
   },
 
   setAccountPools(state, pools: Array<DemeterAccountPool>): void {
-    state.accountPools = [...pools];
+    state.accountPools = Object.freeze([...pools]);
   },
   setAccountPoolsUpdates(state, updates: Subscription): void {
     state.accountPoolsUpdates = updates;
diff --git a/src/store/demeterFarming/types.ts b/src/store/demeterFarming/types.ts
index 7e28ba186..b9c16d2bd 100644
--- a/src/store/demeterFarming/types.ts
+++ b/src/store/demeterFarming/types.ts
@@ -13,10 +13,10 @@ export type DemeterLiquidityParams = {
 };
 
 export type DemeterFarmingState = {
-  pools: Array<DemeterPool>;
+  pools: readonly DemeterPool[];
   poolsUpdates: Nullable<Subscription>;
-  tokens: Array<DemeterRewardToken>;
+  tokens: readonly DemeterRewardToken[];
   tokensUpdates: Nullable<Subscription>;
-  accountPools: Array<DemeterAccountPool>;
+  accountPools: readonly DemeterAccountPool[];
   accountPoolsUpdates: Nullable<Subscription>;
 };
diff --git a/src/store/pool/mutations.ts b/src/store/pool/mutations.ts
index 4e7dad9b8..08cc8fd64 100644
--- a/src/store/pool/mutations.ts
+++ b/src/store/pool/mutations.ts
@@ -20,7 +20,7 @@ const mutations = defineMutations<PoolState>()({
     state.accountLiquidityUpdates = null;
   },
   setAccountLiquidity(state, liquidity: Array<AccountLiquidity>): void {
-    state.accountLiquidity = [...liquidity]; // update vuex state by creating new copy of array
+    state.accountLiquidity = Object.freeze([...liquidity]); // update vuex state by creating new copy of array
   },
   resetAccountLiquidity(state): void {
     state.accountLiquidity = [];
diff --git a/src/store/pool/types.ts b/src/store/pool/types.ts
index aeb664fb8..25fe18654 100644
--- a/src/store/pool/types.ts
+++ b/src/store/pool/types.ts
@@ -2,7 +2,7 @@ import type { Subscription } from 'rxjs';
 import type { AccountLiquidity } from '@sora-substrate/util/build/poolXyk/types';
 
 export type PoolState = {
-  accountLiquidity: Array<AccountLiquidity>;
+  accountLiquidity: readonly AccountLiquidity[];
   accountLiquidityList: Nullable<Subscription>;
   accountLiquidityUpdates: Nullable<Subscription>;
 };
diff --git a/src/views/Pool.vue b/src/views/Pool.vue
index ef2dcc3bd..0bc69d37d 100644
--- a/src/views/Pool.vue
+++ b/src/views/Pool.vue
@@ -10,22 +10,20 @@
       </p>
       <s-collapse v-else class="pool-list" :borders="true" @change="updateActiveCollapseItems">
         <s-collapse-item
-          v-for="liquidityItem of accountLiquidity"
+          v-for="liquidityItem of accountLiquidityData"
           :key="liquidityItem.address"
           :name="liquidityItem.address"
           class="pool-info-container"
         >
           <template #title>
             <pair-token-logo
-              :first-token="getAsset(liquidityItem.firstAddress)"
-              :second-token="getAsset(liquidityItem.secondAddress)"
+              :first-token="liquidityItem.firstAsset"
+              :second-token="liquidityItem.secondAsset"
               size="small"
             />
             <div class="pool-info-container-block">
               <h3 class="pool-info-container__title">
-                {{
-                  getPairTitle(getAssetSymbol(liquidityItem.firstAddress), getAssetSymbol(liquidityItem.secondAddress))
-                }}
+                {{ liquidityItem.title }}
               </h3>
               <slot name="title-append" v-bind="{ liquidity: liquidityItem, activeCollapseItems }" />
             </div>
@@ -35,28 +33,22 @@
             <info-line
               is-formatted
               value-can-be-hidden
-              :label="t('pool.pooledToken', { tokenSymbol: getAssetSymbol(liquidityItem.firstAddress) })"
-              :value="getFirstBalance(liquidityItem)"
-              :fiat-value="getFiatAmountByCodecString(liquidityItem.firstBalance, getAsset(liquidityItem.firstAddress))"
+              :label="t('pool.pooledToken', { tokenSymbol: liquidityItem.firstAssetSymbol })"
+              :value="liquidityItem.firstBalanceFormatted"
+              :fiat-value="liquidityItem.firstBalanceFiat"
             />
             <info-line
               is-formatted
               value-can-be-hidden
-              :label="t('pool.pooledToken', { tokenSymbol: getAssetSymbol(liquidityItem.secondAddress) })"
-              :value="getSecondBalance(liquidityItem)"
-              :fiat-value="
-                getFiatAmountByCodecString(liquidityItem.secondBalance, getAsset(liquidityItem.secondAddress))
-              "
+              :label="t('pool.pooledToken', { tokenSymbol: liquidityItem.secondAssetSymbol })"
+              :value="liquidityItem.secondBalanceFormatted"
+              :fiat-value="liquidityItem.secondBalanceFiat"
             />
+            <info-line value-can-be-hidden :label="t('pool.poolShare')" :value="liquidityItem.poolShareFormatted" />
             <info-line
-              value-can-be-hidden
-              :label="t('pool.poolShare')"
-              :value="getPoolShare(liquidityItem.poolShare)"
-            />
-            <info-line
-              v-if="hasStrategicBonusApy(liquidityItem.secondAddress)"
+              v-if="liquidityItem.apyFormatted"
               :label="t('pool.strategicBonusApy')"
-              :value="getStrategicBonusApy(liquidityItem.secondAddress)"
+              :value="liquidityItem.apyFormatted"
             />
 
             <template #buttons>
@@ -88,7 +80,7 @@
       class="el-button--add-liquidity s-typography-button--large"
       data-test-name="addLiquidity"
       type="primary"
-      @click="handleAddLiquidity()"
+      @click="handleAddLiquidity"
     >
       {{ t('pool.addLiquidity') }}
     </s-button>
@@ -101,7 +93,7 @@
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator';
 import { mixins, components, WALLET_CONSTS } from '@soramitsu/soraneo-wallet-web';
-import type { Asset } from '@sora-substrate/util/build/assets/types';
+import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
 import type { AccountLiquidity } from '@sora-substrate/util/build/poolXyk/types';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
@@ -123,24 +115,39 @@ export default class Pool extends Mixins(mixins.FormattedAmountMixin, mixins.Loa
   readonly FontSizeRate = WALLET_CONSTS.FontSizeRate;
   readonly FontWeightRate = WALLET_CONSTS.FontWeightRate;
 
-  @state.wallet.account.assets private assets!: Array<Asset>;
   @state.pool.accountLiquidity accountLiquidity!: Array<AccountLiquidity>;
 
   @getter.wallet.account.isLoggedIn isLoggedIn!: boolean;
+  @getter.assets.assetDataByAddress getAsset!: (addr?: string) => Nullable<AccountAsset>;
 
   activeCollapseItems: string[] = [];
 
-  updateActiveCollapseItems(items: string[]) {
-    this.activeCollapseItems = items;
-  }
+  get accountLiquidityData() {
+    return this.accountLiquidity.map((liquidity) => {
+      const firstAsset = this.getAsset(liquidity.firstAddress);
+      const firstAssetSymbol = this.getAssetSymbol(firstAsset);
+      const secondAsset = this.getAsset(liquidity.secondAddress);
+      const secondAssetSymbol = this.getAssetSymbol(secondAsset);
 
-  getAsset(address: string): Asset {
-    return this.assets.find((a) => a.address === address) as Asset;
+      return {
+        ...liquidity,
+        firstAsset,
+        firstAssetSymbol,
+        firstBalanceFormatted: this.formatCodecNumber(liquidity.firstBalance, liquidity.decimals),
+        firstBalanceFiat: firstAsset ? this.getFiatAmountByCodecString(liquidity.firstBalance, firstAsset) : '0',
+        secondAsset,
+        secondAssetSymbol,
+        secondBalanceFormatted: this.formatCodecNumber(liquidity.secondBalance, liquidity.decimals),
+        secondBalanceFiat: secondAsset ? this.getFiatAmountByCodecString(liquidity.secondBalance, secondAsset) : '0',
+        poolShareFormatted: `${this.formatStringValue(liquidity.poolShare)}%`,
+        apyFormatted: this.getStrategicBonusApy(liquidity.secondAddress),
+        title: this.getPairTitle(firstAssetSymbol, secondAssetSymbol),
+      };
+    });
   }
 
-  getAssetSymbol(address: string): string {
-    const asset = this.assets.find((a) => a.address === address);
-    return asset ? asset.symbol : this.t('pool.unknownAsset');
+  updateActiveCollapseItems(items: string[]) {
+    this.activeCollapseItems = items;
   }
 
   handleAddLiquidity(first?: string, second?: string): void {
@@ -161,34 +168,18 @@ export default class Pool extends Mixins(mixins.FormattedAmountMixin, mixins.Loa
     router.push({ name: PageNames.Wallet });
   }
 
-  getPairTitle(firstTokenSymbol?: string, secondTokenSymbol?: string): string {
+  private getAssetSymbol(asset: Nullable<AccountAsset>): string {
+    return asset?.symbol ?? this.t('pool.unknownAsset');
+  }
+
+  private getPairTitle(firstTokenSymbol?: string, secondTokenSymbol?: string): string {
     if (firstTokenSymbol && secondTokenSymbol) {
       return `${firstTokenSymbol}-${secondTokenSymbol}`;
     }
     return '';
   }
 
-  getFirstBalance(liquidityItem: AccountLiquidity): string {
-    return this.formatCodecNumber(liquidityItem.firstBalance, liquidityItem.decimals);
-  }
-
-  getSecondBalance(liquidityItem: AccountLiquidity): string {
-    return this.formatCodecNumber(liquidityItem.secondBalance, liquidityItem.decimals);
-  }
-
-  getBalance(liquidityItem: AccountLiquidity): string {
-    return this.formatCodecNumber(liquidityItem.balance, liquidityItem.decimals);
-  }
-
-  getPoolShare(poolShare: string): string {
-    return `${this.formatStringValue(poolShare)}%`;
-  }
-
-  hasStrategicBonusApy(targetAssetAddress: string): boolean {
-    return !!this.fiatPriceAndApyObject[targetAssetAddress]?.strategicBonusApy;
-  }
-
-  getStrategicBonusApy(targetAssetAddress: string): string {
+  private getStrategicBonusApy(targetAssetAddress: string): string {
     const apy = this.fiatPriceAndApyObject[targetAssetAddress]?.strategicBonusApy;
     if (!apy) {
       return '';

From 697fa684d31524e76b03dcc2daf3b4dd1348b3f7 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Tue, 13 Dec 2022 21:22:09 +0300
Subject: [PATCH 02/16] refactoring mixins

---
 .../components/CalculatorDialog.vue              | 12 ++++++++----
 .../demeterFarming/components/PoolCard.vue       |  9 ++++++++-
 .../demeterFarming/mixins/AccountPoolMixin.ts    |  8 ++++++++
 src/modules/demeterFarming/mixins/PoolMixin.ts   | 16 ----------------
 4 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/modules/demeterFarming/components/CalculatorDialog.vue b/src/modules/demeterFarming/components/CalculatorDialog.vue
index f0b79745b..489d929c1 100644
--- a/src/modules/demeterFarming/components/CalculatorDialog.vue
+++ b/src/modules/demeterFarming/components/CalculatorDialog.vue
@@ -4,20 +4,20 @@
       <s-row v-if="poolAsset" flex align="middle">
         <pair-token-logo
           v-if="isFarm && baseAsset"
+          key="pair"
           :first-token="baseAsset"
           :second-token="poolAsset"
           class="title-logo"
         />
-        <token-logo v-else :token="poolAsset" class="title-logo" />
+        <token-logo v-else key="token" :token="poolAsset" class="title-logo" />
         <span class="calculator-dialog-title">
           <template v-if="isFarm">{{ baseAsset.symbol }}-</template>{{ poolAsset.symbol }}
         </span>
       </s-row>
 
       <s-form class="el-form--actions" :show-message="false">
-        <template v-if="isFarm">
+        <template v-if="isFarm && baseAsset">
           <token-input
-            v-if="baseAsset"
             :balance="baseAssetBalance.toCodecString()"
             :is-max-available="isBaseAssetMaxButtonAvailable"
             :title="t('demeterFarming.amountAdd')"
@@ -27,7 +27,7 @@
             @max="handleBaseAssetMax"
           />
 
-          <s-icon v-if="baseAsset && poolAsset" class="icon-divider" name="plus-16" />
+          <s-icon v-if="poolAsset" class="icon-divider" name="plus-16" />
         </template>
 
         <token-input
@@ -144,6 +144,10 @@ export default class CalculatorDialog extends Mixins(StakeDialogMixin) {
     return this.userTokensDeposit.mul(FPNumber.ONE.sub(depositFee));
   }
 
+  get emission(): FPNumber {
+    return this.getEmission(this.pool, this.tokenInfo);
+  }
+
   get calculatedRewards(): FPNumber {
     if (!this.pool) return FPNumber.ZERO;
 
diff --git a/src/modules/demeterFarming/components/PoolCard.vue b/src/modules/demeterFarming/components/PoolCard.vue
index 784468719..87e8f0c93 100644
--- a/src/modules/demeterFarming/components/PoolCard.vue
+++ b/src/modules/demeterFarming/components/PoolCard.vue
@@ -69,6 +69,7 @@
         <template v-if="activeStatus">
           <s-button
             v-if="isLoggedIn"
+            key="connected"
             type="primary"
             class="s-typography-button--large action-button"
             :disabled="depositDisabled"
@@ -76,7 +77,13 @@
           >
             {{ primaryButtonText }}
           </s-button>
-          <s-button v-else type="primary" class="s-typography-button--large action-button" @click="handleConnectWallet">
+          <s-button
+            v-else
+            type="primary"
+            key="disconnected"
+            class="s-typography-button--large action-button"
+            @click="handleConnectWallet"
+          >
             {{ t('connectWalletText') }}
           </s-button>
         </template>
diff --git a/src/modules/demeterFarming/mixins/AccountPoolMixin.ts b/src/modules/demeterFarming/mixins/AccountPoolMixin.ts
index 96da2e178..7dc2694ea 100644
--- a/src/modules/demeterFarming/mixins/AccountPoolMixin.ts
+++ b/src/modules/demeterFarming/mixins/AccountPoolMixin.ts
@@ -68,4 +68,12 @@ export default class AccountPoolMixin extends Mixins(mixins.FormattedAmountMixin
   get hasRewards(): boolean {
     return !this.rewards.isZero();
   }
+
+  get hasStake(): boolean {
+    return this.accountPool ? !this.lockedFunds.isZero() : false;
+  }
+
+  get lockedFunds(): FPNumber {
+    return this.accountPool?.pooledTokens ?? FPNumber.ZERO;
+  }
 }
diff --git a/src/modules/demeterFarming/mixins/PoolMixin.ts b/src/modules/demeterFarming/mixins/PoolMixin.ts
index 9e0b604a3..b8b324ec5 100644
--- a/src/modules/demeterFarming/mixins/PoolMixin.ts
+++ b/src/modules/demeterFarming/mixins/PoolMixin.ts
@@ -27,10 +27,6 @@ export default class PoolMixin extends Mixins(AprMixin, AccountPoolMixin, Transl
     return !this.pool?.isRemoved;
   }
 
-  get hasStake(): boolean {
-    return this.accountPool ? !this.lockedFunds.isZero() : false;
-  }
-
   get baseAsset(): Nullable<AccountAsset> {
     return this.getAsset(this.pool?.baseAsset);
   }
@@ -47,10 +43,6 @@ export default class PoolMixin extends Mixins(AprMixin, AccountPoolMixin, Transl
     return this.poolAsset?.decimals ?? FPNumber.DEFAULT_PRECISION;
   }
 
-  get poolAssetAddress(): string {
-    return this.poolAsset?.address ?? '';
-  }
-
   get poolAssetPrice(): FPNumber {
     return this.poolAsset ? FPNumber.fromCodecValue(this.getAssetFiatPrice(this.poolAsset) ?? 0) : FPNumber.ZERO;
   }
@@ -93,10 +85,6 @@ export default class PoolMixin extends Mixins(AprMixin, AccountPoolMixin, Transl
     return this.isFarm ? this.lpBalance : this.poolAssetBalance;
   }
 
-  get lockedFunds(): FPNumber {
-    return this.accountPool?.pooledTokens ?? FPNumber.ZERO;
-  }
-
   get availableFunds(): FPNumber {
     return this.isFarm ? (FPNumber.max(this.lockedFunds, this.funds) as FPNumber).sub(this.lockedFunds) : this.funds;
   }
@@ -148,10 +136,6 @@ export default class PoolMixin extends Mixins(AprMixin, AccountPoolMixin, Transl
     return `$${formatDecimalPlaces(this.tvl)}`;
   }
 
-  get emission(): FPNumber {
-    return this.getEmission(this.pool, this.tokenInfo);
-  }
-
   get apr(): FPNumber {
     return this.getApr(this.pool, this.tokenInfo, this.tvl);
   }

From a9985e8d892cec45693a61ef9e16c8b8fa6b88f1 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Wed, 14 Dec 2022 11:04:09 +0300
Subject: [PATCH 03/16] change v-if to v-show badges

---
 src/components/Pool/PoolInfo.vue                         | 2 +-
 src/components/Swap/StatusActionBadge.vue                | 2 +-
 .../demeterFarming/components/CalculatorDialog.vue       | 6 +++---
 src/modules/demeterFarming/mixins/PageMixin.ts           | 4 ----
 src/modules/demeterFarming/views/Pool.vue                | 9 ++++++++-
 5 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/Pool/PoolInfo.vue b/src/components/Pool/PoolInfo.vue
index 291da5782..f9cc074a8 100644
--- a/src/components/Pool/PoolInfo.vue
+++ b/src/components/Pool/PoolInfo.vue
@@ -1,4 +1,4 @@
-<template>
+<template functional>
   <div class="pool-info">
     <slot name="prepend" />
 
diff --git a/src/components/Swap/StatusActionBadge.vue b/src/components/Swap/StatusActionBadge.vue
index 9ec9e5eab..b34e9e576 100644
--- a/src/components/Swap/StatusActionBadge.vue
+++ b/src/components/Swap/StatusActionBadge.vue
@@ -1,4 +1,4 @@
-<template>
+<template functional>
   <s-card shadow="always" size="small" class="status-action-badge">
     <span class="status-action-badge__label"><slot name="label" /></span>
     <span class="status-action-badge__value"><slot name="value" /></span>
diff --git a/src/modules/demeterFarming/components/CalculatorDialog.vue b/src/modules/demeterFarming/components/CalculatorDialog.vue
index 489d929c1..438858403 100644
--- a/src/modules/demeterFarming/components/CalculatorDialog.vue
+++ b/src/modules/demeterFarming/components/CalculatorDialog.vue
@@ -73,7 +73,7 @@ import StakeDialogMixin from '../mixins/StakeDialogMixin';
 
 import { lazyComponent } from '@/router';
 import { Components, Links } from '@/consts';
-import { getAssetBalance, isMaxButtonAvailable, getMaxValue } from '@/utils';
+import { getAssetBalance, isMaxButtonAvailable, getMaxValue, formatDecimalPlaces } from '@/utils';
 
 @Component({
   components: {
@@ -105,7 +105,7 @@ export default class CalculatorDialog extends Mixins(StakeDialogMixin) {
   }
 
   get rewardsText(): string {
-    return `${this.rewardAssetSymbol} rewards`;
+    return this.t('demeterFarming.rewards', { symbol: this.rewardAssetSymbol });
   }
 
   get baseAssetDecimals(): number {
@@ -192,7 +192,7 @@ export default class CalculatorDialog extends Mixins(StakeDialogMixin) {
   }
 
   get calculatedRoiPercentFormatted(): string {
-    return new FPNumber(this.calculatedRoiPercent.toFixed(2)).toLocaleString() + '%';
+    return formatDecimalPlaces(this.calculatedRoiPercent, true);
   }
 
   selectPeriod(name: string): void {
diff --git a/src/modules/demeterFarming/mixins/PageMixin.ts b/src/modules/demeterFarming/mixins/PageMixin.ts
index 02bb1a454..e549e4dea 100644
--- a/src/modules/demeterFarming/mixins/PageMixin.ts
+++ b/src/modules/demeterFarming/mixins/PageMixin.ts
@@ -41,10 +41,6 @@ export default class PageMixin extends Mixins(BasePageMixin, mixins.TransactionM
     return !accountPool.pooledTokens.isZero() || !accountPool.rewards.isZero();
   }
 
-  getStatusBadgeVisibility(address: string, activeCollapseItems: string[]): boolean {
-    return !activeCollapseItems.includes(address);
-  }
-
   changePoolStake(params: { baseAsset: string; poolAsset: string; rewardAsset: string }, isAddingStake = true): void {
     this.isAddingStake = isAddingStake;
     this.setDialogParams(params);
diff --git a/src/modules/demeterFarming/views/Pool.vue b/src/modules/demeterFarming/views/Pool.vue
index c9d80b13b..3d7696ce7 100644
--- a/src/modules/demeterFarming/views/Pool.vue
+++ b/src/modules/demeterFarming/views/Pool.vue
@@ -2,7 +2,10 @@
   <div>
     <pool-base v-bind="{ parentLoading, ...$attrs }" v-on="$listeners">
       <template #title-append="{ liquidity, activeCollapseItems }">
-        <div v-if="getStatusBadgeVisibility(liquidity.address, activeCollapseItems)" class="s-flex farming-pool-badges">
+        <div
+          v-show="getStatusBadgeVisibility(liquidity.address, activeCollapseItems)"
+          class="s-flex farming-pool-badges"
+        >
           <status-badge
             v-for="(item, index) in getLiquidityFarmingPools(liquidity)"
             :key="`${item.pool.poolAsset}-${item.pool.rewardAsset}-${index}`"
@@ -111,6 +114,10 @@ export default class DemeterPools extends Mixins(PageMixin, mixins.TransactionMi
     return this.farmingPoolsByLiquidities[this.getLiquidityKey(liquidity)] ?? [];
   }
 
+  getStatusBadgeVisibility(address: string, activeCollapseItems: string[]): boolean {
+    return !activeCollapseItems.includes(address);
+  }
+
   private getLiquidityKey(liquidity: AccountLiquidity): string {
     return [liquidity.firstAddress, liquidity.secondAddress].join(';');
   }

From 738f20aec135a1ebf6e09b2da36a94383043ceb7 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Wed, 14 Dec 2022 13:34:33 +0300
Subject: [PATCH 04/16] refactoring apr calc & assetsTable getter

---
 .../components/CalculatorDialog.vue           |  4 --
 src/modules/demeterFarming/mixins/AprMixin.ts | 20 ++++-----
 .../demeterFarming/mixins/PoolMixin.ts        |  6 ++-
 src/store/assets/getters.ts                   | 45 ++++++++++---------
 src/store/assets/types.ts                     |  4 --
 src/store/demeterFarming/actions.ts           | 21 +++++----
 src/utils/bridge/history.ts                   |  4 +-
 src/views/Explore/Demeter.vue                 |  6 ++-
 8 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/src/modules/demeterFarming/components/CalculatorDialog.vue b/src/modules/demeterFarming/components/CalculatorDialog.vue
index 438858403..7c928db1c 100644
--- a/src/modules/demeterFarming/components/CalculatorDialog.vue
+++ b/src/modules/demeterFarming/components/CalculatorDialog.vue
@@ -144,10 +144,6 @@ export default class CalculatorDialog extends Mixins(StakeDialogMixin) {
     return this.userTokensDeposit.mul(FPNumber.ONE.sub(depositFee));
   }
 
-  get emission(): FPNumber {
-    return this.getEmission(this.pool, this.tokenInfo);
-  }
-
   get calculatedRewards(): FPNumber {
     if (!this.pool) return FPNumber.ZERO;
 
diff --git a/src/modules/demeterFarming/mixins/AprMixin.ts b/src/modules/demeterFarming/mixins/AprMixin.ts
index afe0770f9..e102d57ac 100644
--- a/src/modules/demeterFarming/mixins/AprMixin.ts
+++ b/src/modules/demeterFarming/mixins/AprMixin.ts
@@ -2,34 +2,30 @@ import { Component, Mixins } from 'vue-property-decorator';
 import { FPNumber } from '@sora-substrate/util';
 import { mixins } from '@soramitsu/soraneo-wallet-web';
 
-import type { Asset } from '@sora-substrate/util/build/assets/types';
 import type { DemeterPool, DemeterRewardToken } from '@sora-substrate/util/build/demeterFarming/types';
 
+const BLOCKS_PER_YEAR = new FPNumber(5_256_000);
+
 @Component
 export default class AprMixin extends Mixins(mixins.FormattedAmountMixin) {
   // allocation * token_per_block * multiplier
   getEmission(pool: DemeterPool, tokenInfo: Nullable<DemeterRewardToken>): FPNumber {
     const isFarm = !!pool?.isFarm;
-    const allocation = (isFarm ? tokenInfo?.farmsAllocation : tokenInfo?.stakingAllocation) ?? FPNumber.ZERO;
-    const tokenPerBlock = tokenInfo?.tokenPerBlock ?? FPNumber.ZERO;
-    const poolMultiplier = new FPNumber(pool.multiplier);
     const tokenMultiplier = new FPNumber(
       (isFarm ? tokenInfo?.farmsTotalMultiplier : tokenInfo?.stakingTotalMultiplier) ?? 0
     );
+    if (tokenMultiplier.isZero()) return FPNumber.ZERO;
+    const poolMultiplier = new FPNumber(pool?.multiplier ?? 0);
     const multiplier = poolMultiplier.div(tokenMultiplier);
+    const allocation = (isFarm ? tokenInfo?.farmsAllocation : tokenInfo?.stakingAllocation) ?? FPNumber.ZERO;
+    const tokenPerBlock = tokenInfo?.tokenPerBlock ?? FPNumber.ZERO;
 
     return allocation.mul(tokenPerBlock).mul(multiplier);
   }
 
-  getApr(pool: DemeterPool, tokenInfo: Nullable<DemeterRewardToken>, tvl: FPNumber): FPNumber {
+  getApr(emission: FPNumber, tvl: FPNumber, rewardAssetPrice: FPNumber): FPNumber {
     if (tvl.isZero()) return FPNumber.ZERO;
 
-    const blocksPerYear = new FPNumber(5_256_000);
-    const emission = this.getEmission(pool, tokenInfo);
-    const rewardAssetPrice = FPNumber.fromCodecValue(
-      this.getAssetFiatPrice({ address: pool.rewardAsset } as Asset) ?? 0
-    );
-
-    return emission.mul(blocksPerYear).mul(rewardAssetPrice).div(tvl).mul(FPNumber.HUNDRED);
+    return emission.mul(BLOCKS_PER_YEAR).mul(rewardAssetPrice).div(tvl).mul(FPNumber.HUNDRED);
   }
 }
diff --git a/src/modules/demeterFarming/mixins/PoolMixin.ts b/src/modules/demeterFarming/mixins/PoolMixin.ts
index b8b324ec5..4c27076fe 100644
--- a/src/modules/demeterFarming/mixins/PoolMixin.ts
+++ b/src/modules/demeterFarming/mixins/PoolMixin.ts
@@ -136,8 +136,12 @@ export default class PoolMixin extends Mixins(AprMixin, AccountPoolMixin, Transl
     return `$${formatDecimalPlaces(this.tvl)}`;
   }
 
+  get emission(): FPNumber {
+    return this.getEmission(this.pool, this.tokenInfo);
+  }
+
   get apr(): FPNumber {
-    return this.getApr(this.pool, this.tokenInfo, this.tvl);
+    return this.getApr(this.emission, this.tvl, this.rewardAssetPrice);
   }
 
   get aprFormatted(): string {
diff --git a/src/store/assets/getters.ts b/src/store/assets/getters.ts
index 5356cd990..6ce36740a 100644
--- a/src/store/assets/getters.ts
+++ b/src/store/assets/getters.ts
@@ -5,7 +5,7 @@ import type { AccountAsset, Asset } from '@sora-substrate/util/build/assets/type
 
 import { assetsGetterContext } from '@/store/assets';
 import { findAssetInCollection } from '@/utils';
-import type { AssetsState, RegisteredAccountAssetObject, RegisteredAccountAssetWithDecimals } from './types';
+import type { AssetsState, RegisteredAccountAssetWithDecimals } from './types';
 
 const getters = defineGetters<AssetsState>()({
   whitelistAssets(...args): Array<Asset> {
@@ -32,37 +32,38 @@ const getters = defineGetters<AssetsState>()({
       return buffer;
     }, {});
   },
-  assetsDataTable(...args): RegisteredAccountAssetObject {
-    const { state, rootState, rootGetters } = assetsGetterContext(args);
-    const { accountAssetsAddressTable } = rootGetters.wallet.account;
-    const { assets } = rootState.wallet.account;
-    const { registeredAssets } = state;
-
-    return assets.reduce<RegisteredAccountAssetObject>((result, asset: Asset) => {
-      const { externalAddress, externalBalance, externalDecimals } =
-        findAssetInCollection(asset, registeredAssets) || {};
-      const { balance } = accountAssetsAddressTable[asset.address] || {};
-
-      const item = {
-        ...asset,
-        balance,
-        externalAddress,
-        externalBalance,
-        externalDecimals,
-      };
+  assetsDataTable(...args): Record<string, Asset> {
+    const { rootState } = assetsGetterContext(args);
 
+    return rootState.wallet.account.assets.reduce((result, asset) => {
       return {
         ...result,
-        [asset.address]: item,
+        [asset.address]: asset,
       };
     }, {});
   },
   assetDataByAddress(...args): (address?: Nullable<string>) => Nullable<RegisteredAccountAssetWithDecimals> {
-    const { getters } = assetsGetterContext(args);
+    const { getters, state, rootGetters } = assetsGetterContext(args);
+
     return (address?: Nullable<string>): Nullable<RegisteredAccountAssetWithDecimals> => {
       if (!address) return undefined;
 
-      return getters.assetsDataTable[address];
+      const asset = getters.assetsDataTable[address];
+
+      if (!asset) return null;
+
+      const { externalAddress, externalBalance, externalDecimals } =
+        findAssetInCollection(asset, state.registeredAssets) || {};
+
+      const { balance } = rootGetters.wallet.account.accountAssetsAddressTable[asset.address] || {};
+
+      return {
+        ...asset,
+        balance,
+        externalAddress,
+        externalBalance,
+        externalDecimals,
+      };
     };
   },
   xor(...args): Nullable<RegisteredAccountAssetWithDecimals> {
diff --git a/src/store/assets/types.ts b/src/store/assets/types.ts
index 3c7966d29..eed860d06 100644
--- a/src/store/assets/types.ts
+++ b/src/store/assets/types.ts
@@ -16,7 +16,3 @@ export type AssetsState = {
 };
 
 export type RegisteredAccountAssetWithDecimals = RegisteredAccountAsset & { externalDecimals: number };
-
-export type RegisteredAccountAssetObject = {
-  [key: string]: RegisteredAccountAssetWithDecimals;
-};
diff --git a/src/store/demeterFarming/actions.ts b/src/store/demeterFarming/actions.ts
index 2f472d5e0..1f4fd072a 100644
--- a/src/store/demeterFarming/actions.ts
+++ b/src/store/demeterFarming/actions.ts
@@ -86,6 +86,7 @@ const actions = defineActions({
 
   async deposit(context, params: DemeterLiquidityParams): Promise<void> {
     const { rootGetters } = demeterFarmingActionContext(context);
+    const { assetsDataTable: table } = rootGetters.assets;
 
     const {
       baseAsset: baseAssetAddress,
@@ -94,9 +95,9 @@ const actions = defineActions({
       isFarm,
     } = params.pool;
 
-    const baseAsset = rootGetters.assets.assetsDataTable[baseAssetAddress];
-    const poolAsset = rootGetters.assets.assetsDataTable[poolAssetAddress];
-    const rewardAsset = rootGetters.assets.assetsDataTable[rewardAssetAddress];
+    const baseAsset = table[baseAssetAddress];
+    const poolAsset = table[poolAssetAddress];
+    const rewardAsset = table[rewardAssetAddress];
     const desiredAmount = params.value.toString();
 
     if (isFarm) {
@@ -108,6 +109,7 @@ const actions = defineActions({
 
   async withdraw(context, params: DemeterLiquidityParams): Promise<void> {
     const { rootGetters } = demeterFarmingActionContext(context);
+    const { assetsDataTable: table } = rootGetters.assets;
 
     const {
       baseAsset: baseAssetAddress,
@@ -116,9 +118,9 @@ const actions = defineActions({
       isFarm,
     } = params.pool;
 
-    const baseAsset = rootGetters.assets.assetsDataTable[baseAssetAddress];
-    const poolAsset = rootGetters.assets.assetsDataTable[poolAssetAddress];
-    const rewardAsset = rootGetters.assets.assetsDataTable[rewardAssetAddress];
+    const baseAsset = table[baseAssetAddress];
+    const poolAsset = table[poolAssetAddress];
+    const rewardAsset = table[rewardAssetAddress];
     const desiredAmount = params.value.toString();
 
     if (isFarm) {
@@ -130,6 +132,7 @@ const actions = defineActions({
 
   async claimRewards(context, pool: DemeterAccountPool): Promise<void> {
     const { rootGetters } = demeterFarmingActionContext(context);
+    const { assetsDataTable: table } = rootGetters.assets;
 
     const {
       baseAsset: baseAssetAddress,
@@ -139,9 +142,9 @@ const actions = defineActions({
       rewards,
     } = pool;
 
-    const baseAsset = rootGetters.assets.assetsDataTable[baseAssetAddress];
-    const poolAsset = rootGetters.assets.assetsDataTable[poolAssetAddress];
-    const rewardAsset = rootGetters.assets.assetsDataTable[rewardAssetAddress];
+    const baseAsset = table[baseAssetAddress];
+    const poolAsset = table[poolAssetAddress];
+    const rewardAsset = table[rewardAssetAddress];
     const amount = rewards.toString();
 
     await api.demeterFarming.getRewards(isFarm, poolAsset, rewardAsset, baseAsset, amount);
diff --git a/src/utils/bridge/history.ts b/src/utils/bridge/history.ts
index f5bef880d..218f47dd0 100644
--- a/src/utils/bridge/history.ts
+++ b/src/utils/bridge/history.ts
@@ -11,8 +11,8 @@ import { STATES } from './types';
 import { isOutgoingTransaction, getEvmTxRecieptByHash } from './utils';
 import { ZeroStringValue } from '@/consts';
 
+import type { Asset } from '@sora-substrate/util/build/assets/types';
 import type { BridgeHistory, NetworkFeesObject } from '@sora-substrate/util';
-import type { RegisteredAccountAssetObject } from '@/store/assets/types';
 
 type TimestampMap<T> = {
   [key: number]: T;
@@ -190,7 +190,7 @@ export class EthBridgeHistory {
 
   public async updateAccountHistory(
     address: string,
-    assets: RegisteredAccountAssetObject,
+    assets: Record<string, Asset>,
     networkFees: NetworkFeesObject,
     contracts?: string[],
     updateCallback?: AsyncVoidFn | VoidFunction
diff --git a/src/views/Explore/Demeter.vue b/src/views/Explore/Demeter.vue
index 04d262c1c..ac823c0a6 100644
--- a/src/views/Explore/Demeter.vue
+++ b/src/views/Explore/Demeter.vue
@@ -261,6 +261,9 @@ export default class ExploreDemeter extends Mixins(ExplorePageMixin, DemeterBase
       const poolAsset = this.getAsset(pool.poolAsset) as Asset;
       const rewardAsset = this.getAsset(pool.rewardAsset) as Asset;
       const rewardAssetSymbol = rewardAsset?.symbol ?? '';
+      const rewardAssetPrice = FPNumber.fromCodecValue(
+        this.getAssetFiatPrice({ address: pool.rewardAsset } as Asset) ?? 0
+      );
       const tokenInfo = this.tokenInfos[pool.rewardAsset];
       const accountPool = this.getAccountPool(pool);
       const poolData = this.poolsData[lpKey(pool.baseAsset, pool.poolAsset)];
@@ -289,7 +292,8 @@ export default class ExploreDemeter extends Mixins(ExplorePageMixin, DemeterBase
       const description = pool.isFarm ? '' : poolAsset?.name ?? '';
       const depositFee = new FPNumber(pool.depositFee ?? 0).mul(FPNumber.HUNDRED);
       const tvl = poolTokenPrice.mul(pool.totalTokensInPool);
-      const apr = this.getApr(pool, tokenInfo, tvl);
+      const emission = this.getEmission(pool, tokenInfo);
+      const apr = this.getApr(emission, tvl, rewardAssetPrice);
       const accountTokens = (
         pool.isFarm
           ? [

From 4bf68e7ae0e004f094f0e06a6c5f977a4c4de5dc Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Wed, 14 Dec 2022 14:23:01 +0300
Subject: [PATCH 05/16] transfer some computed properties

---
 .../demeterFarming/components/PoolCard.vue    | 10 ++++++++++
 .../demeterFarming/mixins/PoolMixin.ts        | 20 ++++++-------------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/modules/demeterFarming/components/PoolCard.vue b/src/modules/demeterFarming/components/PoolCard.vue
index 87e8f0c93..b45f217cb 100644
--- a/src/modules/demeterFarming/components/PoolCard.vue
+++ b/src/modules/demeterFarming/components/PoolCard.vue
@@ -110,6 +110,8 @@ import { DemeterComponents } from '../consts';
 import router, { lazyComponent } from '@/router';
 import { Components, PageNames, Links } from '@/consts';
 
+import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
+
 @Component({
   components: {
     CalculatorButton: demeterLazyComponent(DemeterComponents.CalculatorButton),
@@ -135,6 +137,14 @@ export default class PoolCard extends Mixins(PoolMixin, TranslationMixin) {
     return this.t(`demeterFarming.actions.${this.hasStake ? 'add' : 'start'}`);
   }
 
+  get poolAssetBalanceFormatted(): string {
+    return this.poolAssetBalance.toLocaleString();
+  }
+
+  get poolAssetBalanceFiat(): Nullable<string> {
+    return this.getFiatAmountByFPNumber(this.poolAssetBalance, this.poolAsset as AccountAsset);
+  }
+
   handleConnectWallet(): void {
     router.push({ name: PageNames.Wallet });
   }
diff --git a/src/modules/demeterFarming/mixins/PoolMixin.ts b/src/modules/demeterFarming/mixins/PoolMixin.ts
index 4c27076fe..4fde987a6 100644
--- a/src/modules/demeterFarming/mixins/PoolMixin.ts
+++ b/src/modules/demeterFarming/mixins/PoolMixin.ts
@@ -31,6 +31,10 @@ export default class PoolMixin extends Mixins(AprMixin, AccountPoolMixin, Transl
     return this.getAsset(this.pool?.baseAsset);
   }
 
+  get baseAssetPrice(): FPNumber {
+    return this.baseAsset ? FPNumber.fromCodecValue(this.getAssetFiatPrice(this.baseAsset) ?? 0) : FPNumber.ZERO;
+  }
+
   get poolAsset(): Nullable<AccountAsset> {
     return this.getAsset(this.pool?.poolAsset);
   }
@@ -47,26 +51,14 @@ export default class PoolMixin extends Mixins(AprMixin, AccountPoolMixin, Transl
     return this.poolAsset ? FPNumber.fromCodecValue(this.getAssetFiatPrice(this.poolAsset) ?? 0) : FPNumber.ZERO;
   }
 
-  get baseAssetPrice(): FPNumber {
-    return this.baseAsset ? FPNumber.fromCodecValue(this.getAssetFiatPrice(this.baseAsset) ?? 0) : FPNumber.ZERO;
-  }
-
-  get lpBalance(): FPNumber {
-    return FPNumber.fromCodecValue(getAssetBalance(this.liquidity, { parseAsLiquidity: true }) ?? 0);
-  }
-
   get poolAssetBalance(): FPNumber {
     if (!this.poolAsset) return FPNumber.ZERO;
 
     return FPNumber.fromCodecValue(getAssetBalance(this.poolAsset) ?? 0, this.poolAssetDecimals);
   }
 
-  get poolAssetBalanceFormatted(): string {
-    return this.poolAssetBalance.toLocaleString();
-  }
-
-  get poolAssetBalanceFiat(): Nullable<string> {
-    return this.getFiatAmountByFPNumber(this.poolAssetBalance, this.poolAsset as AccountAsset);
+  get lpBalance(): FPNumber {
+    return FPNumber.fromCodecValue(getAssetBalance(this.liquidity, { parseAsLiquidity: true }) ?? 0);
   }
 
   get tokenInfo(): Nullable<DemeterRewardToken> {

From d4d9c75b88d302ec07471b5ff442a8b183115d9d Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Wed, 14 Dec 2022 15:04:36 +0300
Subject: [PATCH 06/16] refactoring mixins

---
 .../components/CalculatorDialog.vue           | 13 ++++--
 .../demeterFarming/components/PoolCard.vue    |  4 +-
 .../demeterFarming/components/StakeDialog.vue | 26 ++++++++---
 .../demeterFarming/mixins/PoolCardMixin.ts    | 43 +++++++++++++++++++
 .../demeterFarming/mixins/PoolMixin.ts        | 32 --------------
 .../demeterFarming/mixins/StakeDialogMixin.ts | 26 -----------
 6 files changed, 75 insertions(+), 69 deletions(-)
 create mode 100644 src/modules/demeterFarming/mixins/PoolCardMixin.ts
 delete mode 100644 src/modules/demeterFarming/mixins/StakeDialogMixin.ts

diff --git a/src/modules/demeterFarming/components/CalculatorDialog.vue b/src/modules/demeterFarming/components/CalculatorDialog.vue
index 7c928db1c..8e8f8d44a 100644
--- a/src/modules/demeterFarming/components/CalculatorDialog.vue
+++ b/src/modules/demeterFarming/components/CalculatorDialog.vue
@@ -65,11 +65,12 @@
 
 <script lang="ts">
 import { Component, Mixins, Watch } from 'vue-property-decorator';
-import { components } from '@soramitsu/soraneo-wallet-web';
-import { FPNumber } from '@sora-substrate/util';
+import { components, mixins } from '@soramitsu/soraneo-wallet-web';
+import { FPNumber, Operation } from '@sora-substrate/util';
+import type { CodecString } from '@sora-substrate/util';
 import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
 
-import StakeDialogMixin from '../mixins/StakeDialogMixin';
+import PoolCardMixin from '../mixins/PoolCardMixin';
 
 import { lazyComponent } from '@/router';
 import { Components, Links } from '@/consts';
@@ -84,7 +85,7 @@ import { getAssetBalance, isMaxButtonAvailable, getMaxValue, formatDecimalPlaces
     TokenLogo: components.TokenLogo,
   },
 })
-export default class CalculatorDialog extends Mixins(StakeDialogMixin) {
+export default class CalculatorDialog extends Mixins(PoolCardMixin, mixins.DialogMixin, mixins.LoadingMixin) {
   @Watch('visible')
   private resetValue() {
     this.baseAssetValue = '';
@@ -100,6 +101,10 @@ export default class CalculatorDialog extends Mixins(StakeDialogMixin) {
 
   readonly link = Links.demeterFarmingPlatform;
 
+  get networkFee(): CodecString {
+    return this.networkFees[Operation.DemeterFarmingDepositLiquidity];
+  }
+
   get selectedPeriod(): string {
     return String(this.interval);
   }
diff --git a/src/modules/demeterFarming/components/PoolCard.vue b/src/modules/demeterFarming/components/PoolCard.vue
index b45f217cb..3ffe51944 100644
--- a/src/modules/demeterFarming/components/PoolCard.vue
+++ b/src/modules/demeterFarming/components/PoolCard.vue
@@ -100,7 +100,7 @@
 import { Component, Mixins, Prop } from 'vue-property-decorator';
 import { components } from '@soramitsu/soraneo-wallet-web';
 
-import PoolMixin from '../mixins/PoolMixin';
+import PoolCardMixin from '../mixins/PoolCardMixin';
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 
 import { getter } from '@/store/decorators';
@@ -119,7 +119,7 @@ import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
     InfoLine: components.InfoLine,
   },
 })
-export default class PoolCard extends Mixins(PoolMixin, TranslationMixin) {
+export default class PoolCard extends Mixins(PoolCardMixin, TranslationMixin) {
   @Prop({ default: false, type: Boolean }) readonly border!: boolean;
   @Prop({ default: false, type: Boolean }) readonly showBalance!: boolean;
 
diff --git a/src/modules/demeterFarming/components/StakeDialog.vue b/src/modules/demeterFarming/components/StakeDialog.vue
index bfd54af49..399a5ab3b 100644
--- a/src/modules/demeterFarming/components/StakeDialog.vue
+++ b/src/modules/demeterFarming/components/StakeDialog.vue
@@ -126,11 +126,11 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from 'vue-property-decorator';
-import { components } from '@soramitsu/soraneo-wallet-web';
-import { FPNumber } from '@sora-substrate/util';
+import { Component, Mixins, Watch, Prop } from 'vue-property-decorator';
+import { components, mixins } from '@soramitsu/soraneo-wallet-web';
+import { FPNumber, Operation } from '@sora-substrate/util';
 
-import StakeDialogMixin from '../mixins/StakeDialogMixin';
+import PoolCardMixin from '../mixins/PoolCardMixin';
 
 import { lazyComponent } from '@/router';
 import { Components, ZeroStringValue } from '@/consts';
@@ -149,7 +149,9 @@ import type { DemeterLiquidityParams } from '@/store/demeterFarming/types';
     TokenLogo: components.TokenLogo,
   },
 })
-export default class StakeDialog extends Mixins(StakeDialogMixin) {
+export default class StakeDialog extends Mixins(PoolCardMixin, mixins.DialogMixin, mixins.LoadingMixin) {
+  @Prop({ default: () => true, type: Boolean }) readonly isAdding!: boolean;
+
   @Watch('visible')
   private resetValue() {
     this.value = '';
@@ -157,12 +159,26 @@ export default class StakeDialog extends Mixins(StakeDialogMixin) {
 
   value = '';
 
+  get networkFee(): CodecString {
+    const operation = this.isAdding
+      ? Operation.DemeterFarmingDepositLiquidity
+      : Operation.DemeterFarmingWithdrawLiquidity;
+
+    return this.networkFees[operation];
+  }
+
   get title(): string {
     const actionKey = this.isAdding ? (this.hasStake ? 'add' : 'start') : 'remove';
 
     return this.t(`demeterFarming.actions.${actionKey}`);
   }
 
+  get inputTitle(): string {
+    const key = this.isAdding ? 'amountAdd' : 'amountRemove';
+
+    return this.t(`demeterFarming.${key}`);
+  }
+
   get valuePartCharClass(): string {
     const charClassName =
       {
diff --git a/src/modules/demeterFarming/mixins/PoolCardMixin.ts b/src/modules/demeterFarming/mixins/PoolCardMixin.ts
new file mode 100644
index 000000000..4cb84a39f
--- /dev/null
+++ b/src/modules/demeterFarming/mixins/PoolCardMixin.ts
@@ -0,0 +1,43 @@
+import { Component, Mixins } from 'vue-property-decorator';
+import { FPNumber } from '@sora-substrate/util';
+
+import PoolMixin from './PoolMixin';
+
+import { formatDecimalPlaces } from '@/utils';
+
+import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
+
+@Component
+export default class PoolCardMixin extends Mixins(PoolMixin) {
+  get poolShare(): FPNumber {
+    if (!this.isFarm) return this.lockedFunds;
+
+    if (this.funds.isZero()) return FPNumber.ZERO;
+    // use .min because pooled LP could be greater that liquiduty LP
+    return (FPNumber.min(this.lockedFunds, this.funds) as FPNumber).div(this.funds).mul(FPNumber.HUNDRED);
+  }
+
+  get poolShareFormatted(): string {
+    return this.poolShare.toLocaleString() + (this.isFarm ? '%' : '');
+  }
+
+  get poolShareFiat(): Nullable<string> {
+    if (this.isFarm) return null;
+
+    return this.getFiatAmountByFPNumber(this.poolShare, this.poolAsset as AccountAsset);
+  }
+
+  get poolShareText(): string {
+    return this.isFarm
+      ? this.t('demeterFarming.info.poolShare')
+      : this.t('demeterFarming.info.stake', { symbol: this.poolAssetSymbol });
+  }
+
+  get tvlFormatted(): string {
+    return `$${formatDecimalPlaces(this.tvl)}`;
+  }
+
+  get depositFeeFormatted(): string {
+    return `${this.depositFee * 100}%`;
+  }
+}
diff --git a/src/modules/demeterFarming/mixins/PoolMixin.ts b/src/modules/demeterFarming/mixins/PoolMixin.ts
index 4fde987a6..2ff925f23 100644
--- a/src/modules/demeterFarming/mixins/PoolMixin.ts
+++ b/src/modules/demeterFarming/mixins/PoolMixin.ts
@@ -69,10 +69,6 @@ export default class PoolMixin extends Mixins(AprMixin, AccountPoolMixin, Transl
     return this.pool?.depositFee ?? 0;
   }
 
-  get depositFeeFormatted(): string {
-    return `${this.depositFee * 100}%`;
-  }
-
   get funds(): FPNumber {
     return this.isFarm ? this.lpBalance : this.poolAssetBalance;
   }
@@ -85,30 +81,6 @@ export default class PoolMixin extends Mixins(AprMixin, AccountPoolMixin, Transl
     return !this.activeStatus || this.availableFunds.isZero();
   }
 
-  get poolShare(): FPNumber {
-    if (!this.isFarm) return this.lockedFunds;
-
-    if (this.funds.isZero()) return FPNumber.ZERO;
-    // use .min because pooled LP could be greater that liquiduty LP
-    return (FPNumber.min(this.lockedFunds, this.funds) as FPNumber).div(this.funds).mul(FPNumber.HUNDRED);
-  }
-
-  get poolShareFormatted(): string {
-    return this.poolShare.toLocaleString() + (this.isFarm ? '%' : '');
-  }
-
-  get poolShareFiat(): Nullable<string> {
-    if (this.isFarm) return null;
-
-    return this.getFiatAmountByFPNumber(this.poolShare, this.poolAsset as AccountAsset);
-  }
-
-  get poolShareText(): string {
-    return this.isFarm
-      ? this.t('demeterFarming.info.poolShare')
-      : this.t('demeterFarming.info.stake', { symbol: this.poolAssetSymbol });
-  }
-
   get tvl(): FPNumber {
     if (!this.pool) return FPNumber.ZERO;
 
@@ -124,10 +96,6 @@ export default class PoolMixin extends Mixins(AprMixin, AccountPoolMixin, Transl
     }
   }
 
-  get tvlFormatted(): string {
-    return `$${formatDecimalPlaces(this.tvl)}`;
-  }
-
   get emission(): FPNumber {
     return this.getEmission(this.pool, this.tokenInfo);
   }
diff --git a/src/modules/demeterFarming/mixins/StakeDialogMixin.ts b/src/modules/demeterFarming/mixins/StakeDialogMixin.ts
deleted file mode 100644
index 1a4228476..000000000
--- a/src/modules/demeterFarming/mixins/StakeDialogMixin.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Component, Mixins, Prop } from 'vue-property-decorator';
-import { mixins } from '@soramitsu/soraneo-wallet-web';
-import { Operation } from '@sora-substrate/util';
-
-import PoolMixin from './PoolMixin';
-
-import type { CodecString } from '@sora-substrate/util';
-
-@Component
-export default class StakeDialogMixin extends Mixins(PoolMixin, mixins.DialogMixin, mixins.LoadingMixin) {
-  @Prop({ default: () => true, type: Boolean }) readonly isAdding!: boolean;
-
-  get networkFee(): CodecString {
-    const operation = this.isAdding
-      ? Operation.DemeterFarmingDepositLiquidity
-      : Operation.DemeterFarmingWithdrawLiquidity;
-
-    return this.networkFees[operation];
-  }
-
-  get inputTitle(): string {
-    const key = this.isAdding ? 'amountAdd' : 'amountRemove';
-
-    return this.t(`demeterFarming.${key}`);
-  }
-}

From b00aec1bd48089690a6573e11a4fbabf434f302f Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Thu, 15 Dec 2022 11:44:08 +0300
Subject: [PATCH 07/16] prepare data in parent'

---
 public/env.json                               |  88 +-----------
 .../demeterFarming/components/StatusBadge.vue |   4 +-
 .../demeterFarming/mixins/AccountPoolMixin.ts |  95 +++++++++++--
 src/modules/demeterFarming/mixins/AprMixin.ts |  18 +++
 .../demeterFarming/mixins/BasePageMixin.ts    |  97 +++++++++++--
 .../demeterFarming/mixins/PageMixin.ts        |  20 +--
 .../demeterFarming/mixins/PoolCardMixin.ts    |   6 +-
 .../demeterFarming/mixins/PoolMixin.ts        | 134 ------------------
 src/modules/demeterFarming/types.ts           |  26 ++++
 src/modules/demeterFarming/views/Pool.vue     |  42 ++++--
 src/modules/demeterFarming/views/Staking.vue  |   6 +-
 src/store/demeterFarming/getters.ts           |  58 ++------
 src/views/Explore/Demeter.vue                 |   2 -
 13 files changed, 281 insertions(+), 315 deletions(-)
 delete mode 100644 src/modules/demeterFarming/mixins/PoolMixin.ts
 create mode 100644 src/modules/demeterFarming/types.ts

diff --git a/public/env.json b/public/env.json
index 4635d9854..8d3a6c4f9 100644
--- a/public/env.json
+++ b/public/env.json
@@ -1,87 +1 @@
-{
-    "BASE_API_URL": "",
-    "API_KEYS": {
-      "moonpay": "pk_test_4ASGxHKGpLPE6sdQq1V3QjtpUFSpWLk",
-      "nftStorage": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDBmMzgwOTMyQTNDODM3ZDNiN2JEYzBBNTc0NmNkMDlBRGIyNUZGMzQiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY0MjU4OTQ2ODA4MSwibmFtZSI6Im5mdC1zdG9yYWdlLWRldiJ9.hkvzea9ltcriXXHKoYd3F2Iu1Y8X5H-zunAQboC_3vw",
-      "etherscan": "YBR7IWEBEXFICT8M7GRV77NBX4AXJ9T53H"
-    },
-    "FEATURE_FLAGS": {
-      "moonpay": 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",
-    "DEFAULT_NETWORKS": [
-      {
-        "chain": "SORA-dev Testnet #1",
-        "name": "SORA",
-        "address": "wss://ws.framenode-1.s1.dev.sora2.soramitsu.co.jp"
-      },
-      {
-        "chain": "SORA-dev Testnet #2",
-        "name": "SORA",
-        "address": "wss://ws.framenode-2.s2.dev.sora2.soramitsu.co.jp"
-      },
-      {
-        "chain": "SORA-dev Testnet #3",
-        "name": "SORA",
-        "address": "wss://ws.framenode-3.s3.dev.sora2.soramitsu.co.jp"
-      },
-      {
-        "chain": "SORA-dev Testnet #4",
-        "name": "SORA",
-        "address": "wss://ws.framenode-4.s3.dev.sora2.soramitsu.co.jp"
-      },
-      {
-        "chain": "SORA-dev Testnet #5",
-        "name": "SORA",
-        "address": "wss://ws.framenode-5.s4.dev.sora2.soramitsu.co.jp"
-      },
-      {
-        "chain": "SORA-dev Testnet #6",
-        "name": "SORA",
-        "address": "wss://ws.framenode-6.s4.dev.sora2.soramitsu.co.jp"
-      }
-    ],
-    "NETWORK_TYPE": "Dev",
-    "CHAIN_GENESIS_HASH": "",
-    "SUB_NETWORKS": [
-      {
-        "name": "ethereum",
-        "id": 0,
-        "symbol": "ETH",
-        "currency": "ETH",
-        "defaultType": "sepolia",
-        "CONTRACTS": {
-          "XOR": {
-            "MASTER": "0x12c6a709925783f49fcca0b398d13b0d597e6e1c"
-          },
-          "VAL": {
-            "MASTER": "0x47e229aa491763038f6a505b4f85d8eb463f0962"
-          },
-          "OTHER": {
-            "MASTER": "0x24390c8f6cbd5d152c30226f809f4e3f153b88d4"
-          }
-        }
-      },
-      {
-        "name": "energy",
-        "id": 1,
-        "symbol": "VT",
-        "currency": "VT",
-        "defaultType": "private",
-        "CONTRACTS": {
-          "XOR": {
-            "MASTER": ""
-          },
-          "VAL": {
-            "MASTER": ""
-          },
-          "OTHER": {
-            "MASTER": "0x1891b81AE0C5A81Ec84BC4f69322C6a01A3B3095"
-          }
-        }
-      }
-    ]
-}
+{ "BASE_API_URL": "test.polkaswap.io", "FAUCET_URL": "https://testfaucet.polkaswap.io/", "SUBQUERY_ENDPOINT": "https://api.subquery.network/sq/sora-xor/sora-staging__c29yY", "API_KEYS": { "moonpay": "pk_test_4ASGxHKGpLPE6sdQq1V3QjtpUFSpWLk", "nftStorage": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDBmMzgwOTMyQTNDODM3ZDNiN2JEYzBBNTc0NmNkMDlBRGIyNUZGMzQiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY0MjU4OTQ2ODA4MSwibmFtZSI6Im5mdC1zdG9yYWdlLWRldiJ9.hkvzea9ltcriXXHKoYd3F2Iu1Y8X5H-zunAQboC_3vw", "etherscan": "UPTTMBUBCE5FIE7XJZYAJ3YZGFE7DA6374" }, "FEATURE_FLAGS": { "moonpay": true, "charts": true }, "DEFAULT_NETWORKS": [ { "chain": "SORA-staging Testnet", "name": "SORA", "address": "wss://ws.framenode-1.s1.stg1.sora2.soramitsu.co.jp" }, { "chain": "SORA-staging Testnet", "name": "SORA", "address": "wss://ws.framenode-2.s1.stg1.sora2.soramitsu.co.jp" }, { "chain": "SORA-staging Testnet", "name": "SORA", "address": "wss://ws.framenode-3.s2.stg1.sora2.soramitsu.co.jp" }, { "chain": "SORA-staging Testnet", "name": "SORA", "address": "wss://ws.framenode-4.s2.stg1.sora2.soramitsu.co.jp" }, { "chain": "SORA-staging Testnet", "name": "SORA", "address": "wss://ws.framenode-5.s3.stg1.sora2.soramitsu.co.jp" }, { "chain": "SORA-staging Testnet", "name": "SORA", "address": "wss://ws.framenode-6.s3.stg1.sora2.soramitsu.co.jp" }, { "chain": "SORA-staging Testnet", "name": "SORA", "address": "wss://ws.framenode-7.s4.stg1.sora2.soramitsu.co.jp" }, { "chain": "SORA-staging Testnet", "name": "SORA", "address": "wss://ws.framenode-8.s5.stg1.sora2.soramitsu.co.jp" } ], "NETWORK_TYPE": "Stage", "CHAIN_GENESIS_HASH": "0x1a0983c6c9fd3178ae24656bcfca4510a439ab7b90c83e360a1671609752b09a", "SUB_NETWORKS": [ { "name": "ethereum", "id": 0, "symbol": "ETH", "currency": "ETH", "defaultType": "rinkeby", "CONTRACTS": { "XOR": { "MASTER": "0xcceb41100aa2a9a6f144d7c1f876070b810bf7ae" }, "VAL": { "MASTER": "0xd7f81ed173cb3af28f983670164df30851fba678" }, "OTHER": { "MASTER": "0x78cb1bfd2256515019b03584d66eca516cd5893c" } } }, { "name": "energy", "id": 1, "symbol": "VT", "currency": "VT", "defaultType": "private", "CONTRACTS": { "XOR": { "MASTER": "" }, "VAL": { "MASTER": "" }, "OTHER": { "MASTER": "0x906111a433731a563Aa0d0FA871FF93f9A3B3035" } } } ] }
\ No newline at end of file
diff --git a/src/modules/demeterFarming/components/StatusBadge.vue b/src/modules/demeterFarming/components/StatusBadge.vue
index 6e1fe356f..432edb19e 100644
--- a/src/modules/demeterFarming/components/StatusBadge.vue
+++ b/src/modules/demeterFarming/components/StatusBadge.vue
@@ -16,14 +16,14 @@
 import { Component, Mixins } from 'vue-property-decorator';
 import { components } from '@soramitsu/soraneo-wallet-web';
 
-import PoolMixin from '../mixins/PoolMixin';
+import AccountPoolMixin from '../mixins/AccountPoolMixin';
 
 @Component({
   components: {
     TokenLogo: components.TokenLogo,
   },
 })
-export default class StatusBadge extends Mixins(PoolMixin) {
+export default class StatusBadge extends Mixins(AccountPoolMixin) {
   get title(): string {
     if (!this.activeStatus) return this.t('demeterFarming.staking.stopped');
 
diff --git a/src/modules/demeterFarming/mixins/AccountPoolMixin.ts b/src/modules/demeterFarming/mixins/AccountPoolMixin.ts
index 7dc2694ea..21e38bf30 100644
--- a/src/modules/demeterFarming/mixins/AccountPoolMixin.ts
+++ b/src/modules/demeterFarming/mixins/AccountPoolMixin.ts
@@ -4,16 +4,26 @@ import { mixins } from '@soramitsu/soraneo-wallet-web';
 import { XOR } from '@sora-substrate/util/build/assets/consts';
 
 import { getter, state } from '@/store/decorators';
-import { hasInsufficientXorForFee } from '@/utils';
+import { hasInsufficientXorForFee, formatDecimalPlaces, getAssetBalance } from '@/utils';
 
+import type { AccountLiquidity } from '@sora-substrate/util/build/poolXyk/types';
 import type { DemeterPool, DemeterAccountPool } from '@sora-substrate/util/build/demeterFarming/types';
 import type { Asset, AccountAsset } from '@sora-substrate/util/build/assets/types';
 import type { NetworkFeesObject, CodecString } from '@sora-substrate/util';
 
+import type { DemeterAsset } from '@/modules/demeterFarming/types';
+
 @Component
-export default class AccountPoolMixin extends Mixins(mixins.FormattedAmountMixin) {
+export default class AccountPoolMixin extends Mixins(mixins.FormattedAmountMixin, mixins.TranslationMixin) {
+  @Prop({ default: () => null, type: Object }) readonly liquidity!: AccountLiquidity;
   @Prop({ default: () => null, type: Object }) readonly pool!: DemeterPool;
   @Prop({ default: () => null, type: Object }) readonly accountPool!: DemeterAccountPool;
+  @Prop({ default: () => null, type: Object }) readonly baseAsset!: DemeterAsset;
+  @Prop({ default: () => null, type: Object }) readonly poolAsset!: DemeterAsset;
+  @Prop({ default: () => null, type: Object }) readonly rewardAsset!: DemeterAsset;
+  @Prop({ default: () => FPNumber.ZERO, type: Object }) readonly emission!: FPNumber;
+  @Prop({ default: () => FPNumber.ZERO, type: Object }) readonly tvl!: FPNumber;
+  @Prop({ default: () => FPNumber.ZERO, type: Object }) readonly apr!: FPNumber;
 
   @state.wallet.settings.networkFees networkFees!: NetworkFeesObject;
 
@@ -41,10 +51,6 @@ export default class AccountPoolMixin extends Mixins(mixins.FormattedAmountMixin
     return XOR.symbol;
   }
 
-  get rewardAsset(): Nullable<Asset> {
-    return this.getAsset(this.pool?.rewardAsset);
-  }
-
   get rewardAssetSymbol(): string {
     return this.rewardAsset?.symbol ?? '';
   }
@@ -57,8 +63,9 @@ export default class AccountPoolMixin extends Mixins(mixins.FormattedAmountMixin
     return this.rewards.toLocaleString();
   }
 
+  // [TODO]
   get rewardAssetPrice(): FPNumber {
-    return this.rewardAsset ? FPNumber.fromCodecValue(this.getAssetFiatPrice(this.rewardAsset) ?? 0) : FPNumber.ZERO;
+    return this.rewardAsset.price;
   }
 
   get rewardsFiat(): Nullable<string> {
@@ -69,11 +76,81 @@ export default class AccountPoolMixin extends Mixins(mixins.FormattedAmountMixin
     return !this.rewards.isZero();
   }
 
+  get lockedFunds(): FPNumber {
+    return this.accountPool?.pooledTokens ?? FPNumber.ZERO;
+  }
+
   get hasStake(): boolean {
     return this.accountPool ? !this.lockedFunds.isZero() : false;
   }
 
-  get lockedFunds(): FPNumber {
-    return this.accountPool?.pooledTokens ?? FPNumber.ZERO;
+  get isFarm(): boolean {
+    return !!this.pool?.isFarm;
+  }
+
+  get activeStatus(): boolean {
+    return !this.pool?.isRemoved;
+  }
+
+  get poolAssetSymbol(): string {
+    return this.poolAsset?.symbol ?? '';
+  }
+
+  // [TODO]
+  get poolAssetPrice(): FPNumber {
+    return this.poolAsset.price;
+  }
+
+  // [TODO]
+  get poolAssetBalance(): FPNumber {
+    return FPNumber.fromCodecValue(getAssetBalance(this.poolAsset) ?? 0, this.poolAsset.decimals);
+  }
+
+  get lpBalance(): FPNumber {
+    return FPNumber.fromCodecValue(getAssetBalance(this.liquidity, { parseAsLiquidity: true }) ?? 0);
+  }
+
+  get depositFee(): number {
+    return this.pool?.depositFee ?? 0;
+  }
+
+  get funds(): FPNumber {
+    return this.isFarm ? this.lpBalance : this.poolAssetBalance;
+  }
+
+  get availableFunds(): FPNumber {
+    return this.isFarm ? (FPNumber.max(this.lockedFunds, this.funds) as FPNumber).sub(this.lockedFunds) : this.funds;
+  }
+
+  get depositDisabled(): boolean {
+    return !this.activeStatus || this.availableFunds.isZero();
+  }
+
+  get aprFormatted(): string {
+    return formatDecimalPlaces(this.apr, true);
+  }
+
+  get emitParams(): object {
+    return {
+      baseAsset: this.pool.baseAsset,
+      poolAsset: this.pool.poolAsset,
+      rewardAsset: this.pool.rewardAsset,
+    };
+  }
+
+  add(): void {
+    this.$emit('add', this.emitParams);
+  }
+
+  remove(): void {
+    this.$emit('remove', this.emitParams);
+  }
+
+  claim(): void {
+    this.$emit('claim', this.emitParams);
+  }
+
+  calculator(): void {
+    this.$emit('calculator', this.emitParams);
   }
 }
diff --git a/src/modules/demeterFarming/mixins/AprMixin.ts b/src/modules/demeterFarming/mixins/AprMixin.ts
index e102d57ac..c27b82c08 100644
--- a/src/modules/demeterFarming/mixins/AprMixin.ts
+++ b/src/modules/demeterFarming/mixins/AprMixin.ts
@@ -2,6 +2,7 @@ import { Component, Mixins } from 'vue-property-decorator';
 import { FPNumber } from '@sora-substrate/util';
 import { mixins } from '@soramitsu/soraneo-wallet-web';
 
+import type { AccountLiquidity } from '@sora-substrate/util/build/poolXyk/types';
 import type { DemeterPool, DemeterRewardToken } from '@sora-substrate/util/build/demeterFarming/types';
 
 const BLOCKS_PER_YEAR = new FPNumber(5_256_000);
@@ -28,4 +29,21 @@ export default class AprMixin extends Mixins(mixins.FormattedAmountMixin) {
 
     return emission.mul(BLOCKS_PER_YEAR).mul(rewardAssetPrice).div(tvl).mul(FPNumber.HUNDRED);
   }
+
+  getTvl(pool: DemeterPool, poolAssetPrice: FPNumber, liquidity?: Nullable<AccountLiquidity>): FPNumber {
+    if (!pool) return FPNumber.ZERO;
+
+    if (pool.isFarm) {
+      if (!liquidity) return FPNumber.ZERO;
+
+      // calc liquidity locked price through liquidity
+      return FPNumber.fromCodecValue(liquidity.secondBalance)
+        .div(FPNumber.fromCodecValue(liquidity.balance))
+        .mul(pool.totalTokensInPool)
+        .mul(poolAssetPrice)
+        .mul(new FPNumber(2));
+    } else {
+      return pool.totalTokensInPool.mul(poolAssetPrice);
+    }
+  }
 }
diff --git a/src/modules/demeterFarming/mixins/BasePageMixin.ts b/src/modules/demeterFarming/mixins/BasePageMixin.ts
index 9ab6fc292..12dc31708 100644
--- a/src/modules/demeterFarming/mixins/BasePageMixin.ts
+++ b/src/modules/demeterFarming/mixins/BasePageMixin.ts
@@ -1,18 +1,45 @@
 import { Component, Mixins, Prop } from 'vue-property-decorator';
+import { mixins } from '@soramitsu/soraneo-wallet-web';
+import { FPNumber } from '@sora-substrate/math';
 
-import { getter } from '@/store/decorators';
+import { state, getter } from '@/store/decorators';
 
+import AprMixin from './AprMixin';
+
+import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
 import type { AccountLiquidity } from '@sora-substrate/util/build/poolXyk/types';
-import type { DemeterPool, DemeterAccountPool } from '@sora-substrate/util/build/demeterFarming/types';
+import type {
+  DemeterPool,
+  DemeterAccountPool,
+  DemeterRewardToken,
+} from '@sora-substrate/util/build/demeterFarming/types';
+
+import type { DemeterAsset, DemeterPoolDerived, DemeterPoolDerivedData } from '@/modules/demeterFarming/types';
+
+type Pool = DemeterPool | DemeterAccountPool;
+
+const createPoolsDoubleMap = <T extends Pool>(pools: readonly T[], isFarm = true): DoubleMap<T[]> => {
+  return pools.reduce((buffer, pool) => {
+    if (pool.isFarm !== isFarm) return buffer;
+
+    if (!buffer[pool.baseAsset]) buffer[pool.baseAsset] = {};
+    if (!buffer[pool.baseAsset][pool.poolAsset]) buffer[pool.baseAsset][pool.poolAsset] = [];
+
+    buffer[pool.baseAsset][pool.poolAsset].push(pool);
+
+    return buffer;
+  }, {});
+};
 
 @Component
-export default class BasePageMixin extends Mixins() {
+export default class BasePageMixin extends Mixins(AprMixin, mixins.FormattedAmountMixin) {
   @Prop({ default: true, type: Boolean }) readonly isFarmingPage!: boolean;
 
-  @getter.demeterFarming.farmingPools farmingPools!: DoubleMap<DemeterPool[]>;
-  @getter.demeterFarming.stakingPools stakingPools!: DoubleMap<DemeterPool[]>;
-  @getter.demeterFarming.accountFarmingPools accountFarmingPools!: DoubleMap<DemeterAccountPool[]>;
-  @getter.demeterFarming.accountStakingPools accountStakingPools!: DoubleMap<DemeterAccountPool[]>;
+  @state.demeterFarming.pools demeterPools!: DemeterPool[];
+  @state.demeterFarming.accountPools demeterAccountPools!: DemeterAccountPool[];
+
+  @getter.demeterFarming.tokenInfos tokenInfos!: DataMap<DemeterRewardToken>;
+  @getter.assets.assetDataByAddress getAsset!: (addr?: string) => Nullable<AccountAsset>;
 
   showCalculatorDialog = false;
 
@@ -21,12 +48,41 @@ export default class BasePageMixin extends Mixins() {
   rewardAsset: Nullable<string> = null;
   liquidity: Nullable<AccountLiquidity> = null;
 
+  get uniqueAssets(): string[] {
+    const adresses = this.demeterPools.reduce<string[]>((buffer, pool) => {
+      buffer.push(pool.baseAsset, pool.poolAsset, pool.rewardAsset);
+      return buffer;
+    }, []);
+
+    return [...new Set(adresses)];
+  }
+
+  get demeterAssetsData(): Record<string, DemeterAsset> {
+    console.log('demeterAssetsData');
+    return this.uniqueAssets.reduce((buffer, address) => {
+      const asset = this.getAsset(address);
+      const price = asset ? FPNumber.fromCodecValue(this.getAssetFiatPrice(asset) ?? 0) : FPNumber.ZERO;
+
+      return {
+        ...buffer,
+        [address]: {
+          address,
+          symbol: asset?.symbol ?? '',
+          name: asset?.name,
+          decimals: asset?.decimals,
+          balance: asset?.balance,
+          price,
+        },
+      };
+    }, {});
+  }
+
   get pools(): DoubleMap<DemeterPool[]> {
-    return this.isFarmingPage ? this.farmingPools : this.stakingPools;
+    return createPoolsDoubleMap(this.demeterPools, this.isFarmingPage);
   }
 
   get accountPools(): DoubleMap<DemeterAccountPool[]> {
-    return this.isFarmingPage ? this.accountFarmingPools : this.accountStakingPools;
+    return createPoolsDoubleMap(this.demeterAccountPools, this.isFarmingPage);
   }
 
   get selectedPool(): Nullable<DemeterPool> {
@@ -39,6 +95,29 @@ export default class BasePageMixin extends Mixins() {
     return this.selectedPool ? this.getAccountPool(this.selectedPool) : null;
   }
 
+  prepareDerivedPoolData(item: DemeterPoolDerived, liquidity?: Nullable<AccountLiquidity>): DemeterPoolDerivedData {
+    const { pool, accountPool } = item;
+    const baseAsset = this.demeterAssetsData[pool.poolAsset];
+    const poolAsset = this.demeterAssetsData[pool.poolAsset];
+    const rewardAsset = this.demeterAssetsData[pool.rewardAsset];
+    const tokenInfo = this.tokenInfos[pool.rewardAsset];
+    const emission = this.getEmission(pool, tokenInfo);
+    const tvl = this.getTvl(pool, poolAsset.price, liquidity);
+    const apr = this.getApr(emission, tvl, rewardAsset.price);
+
+    return {
+      pool,
+      accountPool,
+      tokenInfo,
+      baseAsset,
+      poolAsset,
+      rewardAsset,
+      emission,
+      tvl,
+      apr,
+    };
+  }
+
   getAccountPool(pool: DemeterPool): Nullable<DemeterAccountPool> {
     return this.accountPools[pool.baseAsset]?.[pool.poolAsset]?.find(
       (accountPool) => accountPool.rewardAsset === pool.rewardAsset
diff --git a/src/modules/demeterFarming/mixins/PageMixin.ts b/src/modules/demeterFarming/mixins/PageMixin.ts
index e549e4dea..0168fee6c 100644
--- a/src/modules/demeterFarming/mixins/PageMixin.ts
+++ b/src/modules/demeterFarming/mixins/PageMixin.ts
@@ -1,13 +1,17 @@
 import { Component, Mixins } from 'vue-property-decorator';
 import { mixins } from '@soramitsu/soraneo-wallet-web';
+import { FPNumber } from '@sora-substrate/math';
 
 import { action } from '@/store/decorators';
 
 import BasePageMixin from './BasePageMixin';
 
+import type { AccountLiquidity } from '@sora-substrate/util/build/poolXyk/types';
 import type { DemeterPool, DemeterAccountPool } from '@sora-substrate/util/build/demeterFarming/types';
 
+import type { DemeterPoolDerived, DemeterPoolDerivedData } from '@/modules/demeterFarming/types';
 import type { DemeterLiquidityParams } from '@/store/demeterFarming/types';
+
 @Component
 export default class PageMixin extends Mixins(BasePageMixin, mixins.TransactionMixin) {
   @action.demeterFarming.deposit deposit!: (params: DemeterLiquidityParams) => Promise<void>;
@@ -18,20 +22,20 @@ export default class PageMixin extends Mixins(BasePageMixin, mixins.TransactionM
   showClaimDialog = false;
   isAddingStake = true;
 
-  getAvailablePools(pools: DemeterPool[]): Array<{ pool: DemeterPool; accountPool: Nullable<DemeterAccountPool> }> {
+  getAvailablePools(pools: DemeterPool[]): DemeterPoolDerived[] {
     if (!Array.isArray(pools)) return [];
 
-    return pools.reduce<{ pool: DemeterPool; accountPool: Nullable<DemeterAccountPool> }[]>((buffer, pool) => {
+    return pools.reduce<DemeterPoolDerived[]>((buffer, pool) => {
       const poolIsActive = !pool.isRemoved;
       const accountPool = this.getAccountPool(pool);
       const accountPoolIsActive = !!accountPool && this.isActiveAccountPool(accountPool);
 
-      if (poolIsActive || accountPoolIsActive) {
-        buffer.push({
-          pool,
-          accountPool,
-        });
-      }
+      if (!(poolIsActive || accountPoolIsActive)) return buffer;
+
+      buffer.push({
+        pool,
+        accountPool,
+      });
 
       return buffer;
     }, []);
diff --git a/src/modules/demeterFarming/mixins/PoolCardMixin.ts b/src/modules/demeterFarming/mixins/PoolCardMixin.ts
index 4cb84a39f..4f76e38ce 100644
--- a/src/modules/demeterFarming/mixins/PoolCardMixin.ts
+++ b/src/modules/demeterFarming/mixins/PoolCardMixin.ts
@@ -1,14 +1,14 @@
 import { Component, Mixins } from 'vue-property-decorator';
 import { FPNumber } from '@sora-substrate/util';
 
-import PoolMixin from './PoolMixin';
+import AccountPoolMixin from './AccountPoolMixin';
 
 import { formatDecimalPlaces } from '@/utils';
 
 import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
 
 @Component
-export default class PoolCardMixin extends Mixins(PoolMixin) {
+export default class PoolCardMixin extends Mixins(AccountPoolMixin) {
   get poolShare(): FPNumber {
     if (!this.isFarm) return this.lockedFunds;
 
@@ -24,7 +24,7 @@ export default class PoolCardMixin extends Mixins(PoolMixin) {
   get poolShareFiat(): Nullable<string> {
     if (this.isFarm) return null;
 
-    return this.getFiatAmountByFPNumber(this.poolShare, this.poolAsset as AccountAsset);
+    return this.getFiatAmountByFPNumber(this.poolShare, this.poolAsset as unknown as AccountAsset);
   }
 
   get poolShareText(): string {
diff --git a/src/modules/demeterFarming/mixins/PoolMixin.ts b/src/modules/demeterFarming/mixins/PoolMixin.ts
deleted file mode 100644
index 2ff925f23..000000000
--- a/src/modules/demeterFarming/mixins/PoolMixin.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import { Component, Mixins, Prop } from 'vue-property-decorator';
-import { FPNumber } from '@sora-substrate/util';
-
-import AprMixin from './AprMixin';
-import AccountPoolMixin from './AccountPoolMixin';
-import TranslationMixin from '@/components/mixins/TranslationMixin';
-
-import { getter } from '@/store/decorators';
-
-import { getAssetBalance, formatDecimalPlaces } from '@/utils';
-
-import type { AccountLiquidity } from '@sora-substrate/util/build/poolXyk/types';
-import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
-import type { DemeterRewardToken } from '@sora-substrate/util/build/demeterFarming/types';
-
-@Component
-export default class PoolMixin extends Mixins(AprMixin, AccountPoolMixin, TranslationMixin) {
-  @Prop({ default: () => null, type: Object }) readonly liquidity!: AccountLiquidity;
-
-  @getter.demeterFarming.tokenInfos private tokenInfos!: DataMap<DemeterRewardToken>;
-
-  get isFarm(): boolean {
-    return !!this.pool?.isFarm;
-  }
-
-  get activeStatus(): boolean {
-    return !this.pool?.isRemoved;
-  }
-
-  get baseAsset(): Nullable<AccountAsset> {
-    return this.getAsset(this.pool?.baseAsset);
-  }
-
-  get baseAssetPrice(): FPNumber {
-    return this.baseAsset ? FPNumber.fromCodecValue(this.getAssetFiatPrice(this.baseAsset) ?? 0) : FPNumber.ZERO;
-  }
-
-  get poolAsset(): Nullable<AccountAsset> {
-    return this.getAsset(this.pool?.poolAsset);
-  }
-
-  get poolAssetSymbol(): string {
-    return this.poolAsset?.symbol ?? '';
-  }
-
-  get poolAssetDecimals(): number {
-    return this.poolAsset?.decimals ?? FPNumber.DEFAULT_PRECISION;
-  }
-
-  get poolAssetPrice(): FPNumber {
-    return this.poolAsset ? FPNumber.fromCodecValue(this.getAssetFiatPrice(this.poolAsset) ?? 0) : FPNumber.ZERO;
-  }
-
-  get poolAssetBalance(): FPNumber {
-    if (!this.poolAsset) return FPNumber.ZERO;
-
-    return FPNumber.fromCodecValue(getAssetBalance(this.poolAsset) ?? 0, this.poolAssetDecimals);
-  }
-
-  get lpBalance(): FPNumber {
-    return FPNumber.fromCodecValue(getAssetBalance(this.liquidity, { parseAsLiquidity: true }) ?? 0);
-  }
-
-  get tokenInfo(): Nullable<DemeterRewardToken> {
-    return this.tokenInfos[this.pool?.rewardAsset];
-  }
-
-  get depositFee(): number {
-    return this.pool?.depositFee ?? 0;
-  }
-
-  get funds(): FPNumber {
-    return this.isFarm ? this.lpBalance : this.poolAssetBalance;
-  }
-
-  get availableFunds(): FPNumber {
-    return this.isFarm ? (FPNumber.max(this.lockedFunds, this.funds) as FPNumber).sub(this.lockedFunds) : this.funds;
-  }
-
-  get depositDisabled(): boolean {
-    return !this.activeStatus || this.availableFunds.isZero();
-  }
-
-  get tvl(): FPNumber {
-    if (!this.pool) return FPNumber.ZERO;
-
-    if (this.isFarm) {
-      // calc liquidty locked price through liquidity
-      return FPNumber.fromCodecValue(this.liquidity.firstBalance)
-        .div(this.lpBalance)
-        .mul(this.pool.totalTokensInPool)
-        .mul(this.baseAssetPrice)
-        .mul(new FPNumber(2));
-    } else {
-      return this.pool.totalTokensInPool.mul(this.poolAssetPrice);
-    }
-  }
-
-  get emission(): FPNumber {
-    return this.getEmission(this.pool, this.tokenInfo);
-  }
-
-  get apr(): FPNumber {
-    return this.getApr(this.emission, this.tvl, this.rewardAssetPrice);
-  }
-
-  get aprFormatted(): string {
-    return formatDecimalPlaces(this.apr, true);
-  }
-
-  get emitParams(): object {
-    return {
-      baseAsset: this.pool.baseAsset,
-      poolAsset: this.pool.poolAsset,
-      rewardAsset: this.pool.rewardAsset,
-    };
-  }
-
-  add(): void {
-    this.$emit('add', this.emitParams);
-  }
-
-  remove(): void {
-    this.$emit('remove', this.emitParams);
-  }
-
-  claim(): void {
-    this.$emit('claim', this.emitParams);
-  }
-
-  calculator(): void {
-    this.$emit('calculator', this.emitParams);
-  }
-}
diff --git a/src/modules/demeterFarming/types.ts b/src/modules/demeterFarming/types.ts
new file mode 100644
index 000000000..24ec46c70
--- /dev/null
+++ b/src/modules/demeterFarming/types.ts
@@ -0,0 +1,26 @@
+import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
+import type { FPNumber } from '@sora-substrate/math';
+import type {
+  DemeterPool,
+  DemeterAccountPool,
+  DemeterRewardToken,
+} from '@sora-substrate/util/build/demeterFarming/types';
+
+export type DemeterAsset = AccountAsset & {
+  price: FPNumber;
+};
+
+export type DemeterPoolDerived = {
+  pool: DemeterPool;
+  accountPool: Nullable<DemeterAccountPool>;
+};
+
+export type DemeterPoolDerivedData = DemeterPoolDerived & {
+  tokenInfo: DemeterRewardToken;
+  baseAsset: DemeterAsset;
+  poolAsset: DemeterAsset;
+  rewardAsset: DemeterAsset;
+  emission: FPNumber;
+  tvl: FPNumber;
+  apr: FPNumber;
+};
diff --git a/src/modules/demeterFarming/views/Pool.vue b/src/modules/demeterFarming/views/Pool.vue
index 3d7696ce7..8d08f3997 100644
--- a/src/modules/demeterFarming/views/Pool.vue
+++ b/src/modules/demeterFarming/views/Pool.vue
@@ -12,6 +12,12 @@
             :liquidity="liquidity"
             :pool="item.pool"
             :account-pool="item.accountPool"
+            :base-asset="item.baseAsset"
+            :pool-asset="item.poolAsset"
+            :reward-asset="item.rewardAsset"
+            :emission="item.emission"
+            :tvl="item.tvl"
+            :apr="item.apr"
             @add="changePoolStake($event, true)"
             class="farming-pool-badge"
           />
@@ -24,6 +30,12 @@
           :liquidity="liquidity"
           :pool="item.pool"
           :account-pool="item.accountPool"
+          :base-asset="item.baseAsset"
+          :pool-asset="item.poolAsset"
+          :reward-asset="item.rewardAsset"
+          :emission="item.emission"
+          :tvl="item.tvl"
+          :apr="item.apr"
           @add="changePoolStake($event, true)"
           @remove="changePoolStake($event, false)"
           @claim="claimPoolRewards"
@@ -37,26 +49,23 @@
     <stake-dialog
       :visible.sync="showStakeDialog"
       :liquidity="selectedAccountLiquidity"
-      :pool="selectedPool"
-      :account-pool="selectedAccountPool"
-      :is-adding="isAddingStake"
       :parent-loading="parentLoading || loading"
+      v-bind="selectedDerivedPool"
       @add="handleStakeAction($event, deposit)"
       @remove="handleStakeAction($event, withdraw)"
     />
+
     <claim-dialog
       :visible.sync="showClaimDialog"
-      :pool="selectedPool"
-      :account-pool="selectedAccountPool"
       :parent-loading="parentLoading || loading"
+      v-bind="selectedDerivedPool"
       @confirm="handleClaimRewards"
     />
 
     <calculator-dialog
       :visible.sync="showCalculatorDialog"
-      :pool="selectedPool"
-      :account-pool="selectedAccountPool"
       :liquidity="selectedAccountLiquidity"
+      v-bind="selectedDerivedPool"
     />
   </div>
 </template>
@@ -76,7 +85,7 @@ import { PageNames } from '@/consts';
 import { state } from '@/store/decorators';
 
 import type { AccountLiquidity } from '@sora-substrate/util/build/poolXyk/types';
-import type { DemeterPool, DemeterAccountPool } from '@sora-substrate/util/build/demeterFarming/types';
+import type { DemeterPoolDerivedData } from '@/modules/demeterFarming/types';
 
 @Component({
   inheritAttrs: false,
@@ -100,11 +109,24 @@ export default class DemeterPools extends Mixins(PageMixin, mixins.TransactionMi
     );
   }
 
-  get farmingPoolsByLiquidities(): Record<string, { pool: DemeterPool; accountPool: Nullable<DemeterAccountPool> }[]> {
+  get selectedDerivedPool(): DemeterPoolDerivedData | object {
+    if (!this.selectedPool) return {};
+
+    return this.prepareDerivedPoolData(
+      {
+        pool: this.selectedPool,
+        accountPool: this.selectedAccountPool,
+      },
+      this.selectedAccountLiquidity
+    );
+  }
+
+  get farmingPoolsByLiquidities(): Record<string, DemeterPoolDerivedData[]> {
     return this.accountLiquidity.reduce((buffer, liquidity) => {
       const key = this.getLiquidityKey(liquidity);
+      const availablePools = this.getAvailablePools(this.pools[liquidity.firstAddress]?.[liquidity.secondAddress]);
 
-      buffer[key] = this.getAvailablePools(this.pools[liquidity.firstAddress]?.[liquidity.secondAddress]);
+      buffer[key] = availablePools.map((derived) => this.prepareDerivedPoolData(derived, liquidity));
 
       return buffer;
     }, {});
diff --git a/src/modules/demeterFarming/views/Staking.vue b/src/modules/demeterFarming/views/Staking.vue
index bea0b3386..6d1dc0258 100644
--- a/src/modules/demeterFarming/views/Staking.vue
+++ b/src/modules/demeterFarming/views/Staking.vue
@@ -81,11 +81,11 @@ import { Components } from '@/consts';
 import { getter } from '@/store/decorators';
 
 import type { Asset } from '@sora-substrate/util/build/assets/types';
-import type { DemeterPool, DemeterAccountPool } from '@sora-substrate/util/build/demeterFarming/types';
+import type { DemeterPoolDerived } from '@/modules/demeterFarming/types';
 
 type StakingItem = {
   asset: Asset;
-  items: Array<{ pool: DemeterPool; accountPool: Nullable<DemeterAccountPool> }>;
+  items: Array<DemeterPoolDerived>;
 };
 
 @Component({
@@ -100,8 +100,6 @@ type StakingItem = {
   },
 })
 export default class DemeterStaking extends Mixins(PageMixin, TranslationMixin) {
-  @getter.assets.assetDataByAddress getAsset!: (addr?: string) => Nullable<Asset>;
-
   activeCollapseItems: string[] = [];
 
   updateActiveCollapseItems(items: string[]) {
diff --git a/src/store/demeterFarming/getters.ts b/src/store/demeterFarming/getters.ts
index ad7b0d190..216f9670f 100644
--- a/src/store/demeterFarming/getters.ts
+++ b/src/store/demeterFarming/getters.ts
@@ -3,64 +3,28 @@ import { FPNumber } from '@sora-substrate/math';
 
 import { demeterFarmingGetterContext } from './index';
 
-import type {
-  DemeterPool,
-  DemeterAccountPool,
-  DemeterRewardToken,
-} from '@sora-substrate/util/build/demeterFarming/types';
+import type { DemeterRewardToken } from '@sora-substrate/util/build/demeterFarming/types';
 import type { DemeterFarmingState } from './types';
 
-type Pool = DemeterPool | DemeterAccountPool;
-
-const createPoolsDoubleMap = <T extends Pool>(pools: readonly T[], isFarm = true): DoubleMap<T[]> => {
-  return pools.reduce((buffer, pool) => {
-    if (pool.isFarm !== isFarm) return buffer;
-
-    if (!buffer[pool.baseAsset]) buffer[pool.baseAsset] = {};
-    if (!buffer[pool.baseAsset][pool.poolAsset]) buffer[pool.baseAsset][pool.poolAsset] = [];
-
-    buffer[pool.baseAsset][pool.poolAsset].push(pool);
-
-    return buffer;
-  }, {});
-};
-
 const getters = defineGetters<DemeterFarmingState>()({
-  farmingPools(...args): DoubleMap<DemeterPool[]> {
-    const { state } = demeterFarmingGetterContext(args);
-
-    return createPoolsDoubleMap(state.pools, true);
-  },
-  stakingPools(...args): DoubleMap<DemeterPool[]> {
-    const { state } = demeterFarmingGetterContext(args);
-
-    return createPoolsDoubleMap(state.pools, false);
-  },
-  accountFarmingPools(...args): DoubleMap<DemeterAccountPool[]> {
-    const { state } = demeterFarmingGetterContext(args);
-
-    return createPoolsDoubleMap(state.accountPools, true);
-  },
-  accountStakingPools(...args): DoubleMap<DemeterAccountPool[]> {
-    const { state } = demeterFarmingGetterContext(args);
-
-    return createPoolsDoubleMap(state.accountPools, false);
-  },
   tokenInfos(...args): DataMap<DemeterRewardToken> {
     const { state } = demeterFarmingGetterContext(args);
 
     return state.tokens.reduce((buffer, token) => ({ ...buffer, [token.assetId]: token }), {});
   },
   getLockedAmount(...args): (baseAsset: string, poolAsset: string, isFarm: boolean) => FPNumber {
-    const { getters } = demeterFarmingGetterContext(args);
+    const { state } = demeterFarmingGetterContext(args);
 
     return (baseAsset: string, poolAsset: string, isFarm = true) => {
-      const pools = isFarm ? getters.accountFarmingPools : getters.accountStakingPools;
-
-      if (!Array.isArray(pools[baseAsset]?.[poolAsset])) return FPNumber.ZERO;
-
-      return pools[baseAsset][poolAsset].reduce((value, accountPool) => {
-        return FPNumber.max(value, accountPool.pooledTokens) as FPNumber;
+      return state.accountPools.reduce((value, accountPool) => {
+        if (
+          accountPool.baseAsset === baseAsset &&
+          accountPool.poolAsset === poolAsset &&
+          accountPool.isFarm === isFarm
+        ) {
+          return FPNumber.max(value, accountPool.pooledTokens) as FPNumber;
+        }
+        return value;
       }, FPNumber.ZERO);
     };
   },
diff --git a/src/views/Explore/Demeter.vue b/src/views/Explore/Demeter.vue
index ac823c0a6..5cc9a7389 100644
--- a/src/views/Explore/Demeter.vue
+++ b/src/views/Explore/Demeter.vue
@@ -215,8 +215,6 @@ const lpKey = (baseAsset: string, poolAsset: string): string => {
   },
 })
 export default class ExploreDemeter extends Mixins(ExplorePageMixin, DemeterBasePageMixin, AprMixin) {
-  @getter.demeterFarming.tokenInfos private tokenInfos!: DataMap<DemeterRewardToken>;
-
   @Watch('pools', { deep: true })
   private async updatePoolsData() {
     await this.withLoading(async () => {

From b0f898ae101517f5ef3eea22d7dc8f1d2026c72f Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Thu, 15 Dec 2022 12:26:51 +0300
Subject: [PATCH 08/16] fix staking page

---
 .../components/CalculatorDialog.vue           | 10 +++++--
 .../demeterFarming/components/PoolCard.vue    |  4 +--
 .../demeterFarming/components/StakeDialog.vue | 12 ++++----
 .../demeterFarming/components/StatusBadge.vue |  2 +-
 .../demeterFarming/mixins/AccountPoolMixin.ts | 22 +++++---------
 .../demeterFarming/mixins/BasePageMixin.ts    | 10 +++++--
 .../demeterFarming/mixins/PoolCardMixin.ts    |  4 ---
 src/modules/demeterFarming/types.ts           |  4 +--
 src/modules/demeterFarming/views/Pool.vue     | 18 ++---------
 src/modules/demeterFarming/views/Staking.vue  | 30 ++++++++++++-------
 10 files changed, 52 insertions(+), 64 deletions(-)

diff --git a/src/modules/demeterFarming/components/CalculatorDialog.vue b/src/modules/demeterFarming/components/CalculatorDialog.vue
index 8e8f8d44a..07ef7388a 100644
--- a/src/modules/demeterFarming/components/CalculatorDialog.vue
+++ b/src/modules/demeterFarming/components/CalculatorDialog.vue
@@ -64,13 +64,13 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from 'vue-property-decorator';
+import { Component, Mixins, Watch, Prop } from 'vue-property-decorator';
 import { components, mixins } from '@soramitsu/soraneo-wallet-web';
 import { FPNumber, Operation } from '@sora-substrate/util';
 import type { CodecString } from '@sora-substrate/util';
 import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
 
-import PoolCardMixin from '../mixins/PoolCardMixin';
+import AccountPoolMixin from '../mixins/AccountPoolMixin';
 
 import { lazyComponent } from '@/router';
 import { Components, Links } from '@/consts';
@@ -85,7 +85,9 @@ import { getAssetBalance, isMaxButtonAvailable, getMaxValue, formatDecimalPlaces
     TokenLogo: components.TokenLogo,
   },
 })
-export default class CalculatorDialog extends Mixins(PoolCardMixin, mixins.DialogMixin, mixins.LoadingMixin) {
+export default class CalculatorDialog extends Mixins(AccountPoolMixin, mixins.DialogMixin, mixins.LoadingMixin) {
+  @Prop({ default: () => FPNumber.ZERO, type: Object }) readonly emission!: FPNumber;
+
   @Watch('visible')
   private resetValue() {
     this.baseAssetValue = '';
@@ -168,6 +170,8 @@ export default class CalculatorDialog extends Mixins(PoolCardMixin, mixins.Dialo
   }
 
   get calculatedRewardsFiat(): Nullable<string> {
+    if (!this.rewardAsset) return null;
+
     return this.getFiatAmountByFPNumber(this.calculatedRewards, this.rewardAsset as AccountAsset);
   }
 
diff --git a/src/modules/demeterFarming/components/PoolCard.vue b/src/modules/demeterFarming/components/PoolCard.vue
index 3ffe51944..d4339783b 100644
--- a/src/modules/demeterFarming/components/PoolCard.vue
+++ b/src/modules/demeterFarming/components/PoolCard.vue
@@ -20,7 +20,7 @@
         :value="poolAssetBalanceFormatted"
         :fiat-value="poolAssetBalanceFiat"
       />
-      <info-line v-if="pricesAvailable" :value="aprFormatted">
+      <info-line v-if="pricesAvailable" :value="apr">
         <template #info-line-prefix>
           <div class="apr">
             <span class="apr-label">{{ TranslationConsts.APR }}</span>
@@ -30,7 +30,7 @@
           </div>
         </template>
       </info-line>
-      <info-line v-if="pricesAvailable" :label="t('demeterFarming.info.totalLiquidityLocked')" :value="tvlFormatted" />
+      <info-line v-if="pricesAvailable" :label="t('demeterFarming.info.totalLiquidityLocked')" :value="tvl" />
       <info-line :label="t('demeterFarming.info.rewardToken')" :value="rewardAssetSymbol" />
 
       <info-line
diff --git a/src/modules/demeterFarming/components/StakeDialog.vue b/src/modules/demeterFarming/components/StakeDialog.vue
index 399a5ab3b..47da4cfc3 100644
--- a/src/modules/demeterFarming/components/StakeDialog.vue
+++ b/src/modules/demeterFarming/components/StakeDialog.vue
@@ -16,12 +16,10 @@
       </s-row>
 
       <div v-if="isAdding" class="stake-dialog-info">
-        <info-line v-if="pricesAvailable" :label="TranslationConsts.APR" :value="aprFormatted" />
-        <info-line
-          v-if="pricesAvailable"
-          :label="t('demeterFarming.info.totalLiquidityLocked')"
-          :value="tvlFormatted"
-        />
+        <template v-if="pricesAvailable">
+          <info-line :label="TranslationConsts.APR" :value="apr" />
+          <info-line :label="t('demeterFarming.info.totalLiquidityLocked')" :value="tvl" />
+        </template>
         <info-line :label="t('demeterFarming.info.rewardToken')" :value="rewardAssetSymbol" />
       </div>
 
@@ -209,7 +207,7 @@ export default class StakeDialog extends Mixins(PoolCardMixin, mixins.DialogMixi
   }
 
   get poolShareAfterFiat(): Nullable<string> {
-    if (this.isFarm) return null;
+    if (this.isFarm || !this.poolAsset) return null;
 
     return this.getFiatAmountByFPNumber(this.poolShareAfter, this.poolAsset as AccountAsset);
   }
diff --git a/src/modules/demeterFarming/components/StatusBadge.vue b/src/modules/demeterFarming/components/StatusBadge.vue
index 432edb19e..9922b5030 100644
--- a/src/modules/demeterFarming/components/StatusBadge.vue
+++ b/src/modules/demeterFarming/components/StatusBadge.vue
@@ -7,7 +7,7 @@
 
     <div class="status-badge-title">
       <div>{{ title }}</div>
-      <div v-if="pricesAvailable" class="status-badge-title--mini">{{ aprFormatted }} APR</div>
+      <div v-if="pricesAvailable" class="status-badge-title--mini">{{ apr }} APR</div>
     </div>
   </div>
 </template>
diff --git a/src/modules/demeterFarming/mixins/AccountPoolMixin.ts b/src/modules/demeterFarming/mixins/AccountPoolMixin.ts
index 21e38bf30..11a7c3c09 100644
--- a/src/modules/demeterFarming/mixins/AccountPoolMixin.ts
+++ b/src/modules/demeterFarming/mixins/AccountPoolMixin.ts
@@ -4,7 +4,7 @@ import { mixins } from '@soramitsu/soraneo-wallet-web';
 import { XOR } from '@sora-substrate/util/build/assets/consts';
 
 import { getter, state } from '@/store/decorators';
-import { hasInsufficientXorForFee, formatDecimalPlaces, getAssetBalance } from '@/utils';
+import { hasInsufficientXorForFee, getAssetBalance } from '@/utils';
 
 import type { AccountLiquidity } from '@sora-substrate/util/build/poolXyk/types';
 import type { DemeterPool, DemeterAccountPool } from '@sora-substrate/util/build/demeterFarming/types';
@@ -21,14 +21,12 @@ export default class AccountPoolMixin extends Mixins(mixins.FormattedAmountMixin
   @Prop({ default: () => null, type: Object }) readonly baseAsset!: DemeterAsset;
   @Prop({ default: () => null, type: Object }) readonly poolAsset!: DemeterAsset;
   @Prop({ default: () => null, type: Object }) readonly rewardAsset!: DemeterAsset;
-  @Prop({ default: () => FPNumber.ZERO, type: Object }) readonly emission!: FPNumber;
-  @Prop({ default: () => FPNumber.ZERO, type: Object }) readonly tvl!: FPNumber;
-  @Prop({ default: () => FPNumber.ZERO, type: Object }) readonly apr!: FPNumber;
+  @Prop({ default: () => '', type: String }) readonly tvl!: string;
+  @Prop({ default: () => '', type: String }) readonly apr!: string;
 
   @state.wallet.settings.networkFees networkFees!: NetworkFeesObject;
 
   @getter.assets.xor xor!: Nullable<AccountAsset>;
-  @getter.assets.assetDataByAddress getAsset!: (addr?: string) => Nullable<AccountAsset>;
 
   get pricesAvailable(): boolean {
     return Object.keys(this.fiatPriceAndApyObject).length > 0;
@@ -63,12 +61,12 @@ export default class AccountPoolMixin extends Mixins(mixins.FormattedAmountMixin
     return this.rewards.toLocaleString();
   }
 
-  // [TODO]
   get rewardAssetPrice(): FPNumber {
-    return this.rewardAsset.price;
+    return this.rewardAsset?.price ?? FPNumber.ZERO;
   }
 
   get rewardsFiat(): Nullable<string> {
+    if (!this.rewardAsset) return null;
     return this.getFiatAmountByFPNumber(this.rewards, this.rewardAsset as Asset);
   }
 
@@ -96,14 +94,12 @@ export default class AccountPoolMixin extends Mixins(mixins.FormattedAmountMixin
     return this.poolAsset?.symbol ?? '';
   }
 
-  // [TODO]
   get poolAssetPrice(): FPNumber {
-    return this.poolAsset.price;
+    return this.poolAsset?.price ?? FPNumber.ZERO;
   }
 
-  // [TODO]
   get poolAssetBalance(): FPNumber {
-    return FPNumber.fromCodecValue(getAssetBalance(this.poolAsset) ?? 0, this.poolAsset.decimals);
+    return FPNumber.fromCodecValue(getAssetBalance(this.poolAsset) ?? 0, this.poolAsset?.decimals);
   }
 
   get lpBalance(): FPNumber {
@@ -126,10 +122,6 @@ export default class AccountPoolMixin extends Mixins(mixins.FormattedAmountMixin
     return !this.activeStatus || this.availableFunds.isZero();
   }
 
-  get aprFormatted(): string {
-    return formatDecimalPlaces(this.apr, true);
-  }
-
   get emitParams(): object {
     return {
       baseAsset: this.pool.baseAsset,
diff --git a/src/modules/demeterFarming/mixins/BasePageMixin.ts b/src/modules/demeterFarming/mixins/BasePageMixin.ts
index 12dc31708..817095f65 100644
--- a/src/modules/demeterFarming/mixins/BasePageMixin.ts
+++ b/src/modules/demeterFarming/mixins/BasePageMixin.ts
@@ -6,6 +6,8 @@ import { state, getter } from '@/store/decorators';
 
 import AprMixin from './AprMixin';
 
+import { formatDecimalPlaces } from '@/utils';
+
 import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
 import type { AccountLiquidity } from '@sora-substrate/util/build/poolXyk/types';
 import type {
@@ -97,13 +99,15 @@ export default class BasePageMixin extends Mixins(AprMixin, mixins.FormattedAmou
 
   prepareDerivedPoolData(item: DemeterPoolDerived, liquidity?: Nullable<AccountLiquidity>): DemeterPoolDerivedData {
     const { pool, accountPool } = item;
-    const baseAsset = this.demeterAssetsData[pool.poolAsset];
+    const baseAsset = this.demeterAssetsData[pool.baseAsset];
     const poolAsset = this.demeterAssetsData[pool.poolAsset];
     const rewardAsset = this.demeterAssetsData[pool.rewardAsset];
     const tokenInfo = this.tokenInfos[pool.rewardAsset];
     const emission = this.getEmission(pool, tokenInfo);
     const tvl = this.getTvl(pool, poolAsset.price, liquidity);
     const apr = this.getApr(emission, tvl, rewardAsset.price);
+    const aprFormatted = formatDecimalPlaces(apr, true);
+    const tvlFormatted = `$${formatDecimalPlaces(tvl)}`;
 
     return {
       pool,
@@ -113,8 +117,8 @@ export default class BasePageMixin extends Mixins(AprMixin, mixins.FormattedAmou
       poolAsset,
       rewardAsset,
       emission,
-      tvl,
-      apr,
+      tvl: tvlFormatted,
+      apr: aprFormatted,
     };
   }
 
diff --git a/src/modules/demeterFarming/mixins/PoolCardMixin.ts b/src/modules/demeterFarming/mixins/PoolCardMixin.ts
index 4f76e38ce..705f73999 100644
--- a/src/modules/demeterFarming/mixins/PoolCardMixin.ts
+++ b/src/modules/demeterFarming/mixins/PoolCardMixin.ts
@@ -33,10 +33,6 @@ export default class PoolCardMixin extends Mixins(AccountPoolMixin) {
       : this.t('demeterFarming.info.stake', { symbol: this.poolAssetSymbol });
   }
 
-  get tvlFormatted(): string {
-    return `$${formatDecimalPlaces(this.tvl)}`;
-  }
-
   get depositFeeFormatted(): string {
     return `${this.depositFee * 100}%`;
   }
diff --git a/src/modules/demeterFarming/types.ts b/src/modules/demeterFarming/types.ts
index 24ec46c70..977f7558a 100644
--- a/src/modules/demeterFarming/types.ts
+++ b/src/modules/demeterFarming/types.ts
@@ -21,6 +21,6 @@ export type DemeterPoolDerivedData = DemeterPoolDerived & {
   poolAsset: DemeterAsset;
   rewardAsset: DemeterAsset;
   emission: FPNumber;
-  tvl: FPNumber;
-  apr: FPNumber;
+  tvl: string;
+  apr: string;
 };
diff --git a/src/modules/demeterFarming/views/Pool.vue b/src/modules/demeterFarming/views/Pool.vue
index 8d08f3997..d25fe7615 100644
--- a/src/modules/demeterFarming/views/Pool.vue
+++ b/src/modules/demeterFarming/views/Pool.vue
@@ -10,14 +10,7 @@
             v-for="(item, index) in getLiquidityFarmingPools(liquidity)"
             :key="`${item.pool.poolAsset}-${item.pool.rewardAsset}-${index}`"
             :liquidity="liquidity"
-            :pool="item.pool"
-            :account-pool="item.accountPool"
-            :base-asset="item.baseAsset"
-            :pool-asset="item.poolAsset"
-            :reward-asset="item.rewardAsset"
-            :emission="item.emission"
-            :tvl="item.tvl"
-            :apr="item.apr"
+            v-bind="item"
             @add="changePoolStake($event, true)"
             class="farming-pool-badge"
           />
@@ -28,14 +21,7 @@
           v-for="(item, index) in getLiquidityFarmingPools(liquidity)"
           :key="`${item.pool.poolAsset}-${item.pool.rewardAsset}-${index}`"
           :liquidity="liquidity"
-          :pool="item.pool"
-          :account-pool="item.accountPool"
-          :base-asset="item.baseAsset"
-          :pool-asset="item.poolAsset"
-          :reward-asset="item.rewardAsset"
-          :emission="item.emission"
-          :tvl="item.tvl"
-          :apr="item.apr"
+          v-bind="item"
           @add="changePoolStake($event, true)"
           @remove="changePoolStake($event, false)"
           @claim="claimPoolRewards"
diff --git a/src/modules/demeterFarming/views/Staking.vue b/src/modules/demeterFarming/views/Staking.vue
index 6d1dc0258..950285887 100644
--- a/src/modules/demeterFarming/views/Staking.vue
+++ b/src/modules/demeterFarming/views/Staking.vue
@@ -21,8 +21,7 @@
               <status-badge
                 v-for="item in token.items"
                 :key="item.pool.rewardAsset"
-                :pool="item.pool"
-                :account-pool="item.accountPool"
+                v-bind="item"
                 @add="changePoolStake($event, true)"
                 class="staking-info-badge"
               />
@@ -33,8 +32,7 @@
         <pool-card
           v-for="item in token.items"
           :key="item.pool.rewardAsset"
-          :pool="item.pool"
-          :account-pool="item.accountPool"
+          v-bind="item"
           @add="changePoolStake($event, true)"
           @remove="changePoolStake($event, false)"
           @claim="claimPoolRewards"
@@ -47,21 +45,21 @@
 
     <stake-dialog
       :visible.sync="showStakeDialog"
-      :pool="selectedPool"
-      :account-pool="selectedAccountPool"
       :is-adding="isAddingStake"
       :parent-loading="parentLoading || loading"
+      v-bind="selectedDerivedPool"
       @add="handleStakeAction($event, deposit)"
       @remove="handleStakeAction($event, withdraw)"
     />
+
     <claim-dialog
       :visible.sync="showClaimDialog"
-      :pool="selectedPool"
-      :account-pool="selectedAccountPool"
       :parent-loading="parentLoading || loading"
+      v-bind="selectedDerivedPool"
       @confirm="handleClaimRewards"
     />
-    <calculator-dialog :visible.sync="showCalculatorDialog" :pool="selectedPool" :account-pool="selectedAccountPool" />
+
+    <calculator-dialog :visible.sync="showCalculatorDialog" v-bind="selectedDerivedPool" />
   </div>
 </template>
 
@@ -81,7 +79,7 @@ import { Components } from '@/consts';
 import { getter } from '@/store/decorators';
 
 import type { Asset } from '@sora-substrate/util/build/assets/types';
-import type { DemeterPoolDerived } from '@/modules/demeterFarming/types';
+import type { DemeterPoolDerived, DemeterPoolDerivedData } from '@/modules/demeterFarming/types';
 
 type StakingItem = {
   asset: Asset;
@@ -106,13 +104,23 @@ export default class DemeterStaking extends Mixins(PageMixin, TranslationMixin)
     this.activeCollapseItems = items;
   }
 
+  get selectedDerivedPool(): DemeterPoolDerivedData | object {
+    if (!this.selectedPool) return {};
+
+    return this.prepareDerivedPoolData({
+      pool: this.selectedPool,
+      accountPool: this.selectedAccountPool,
+    });
+  }
+
   get tokensData(): object {
     return Object.entries(this.pools).reduce<StakingItem[]>((buffer, [address, poolsMap]) => {
       const asset = this.getAsset(address);
 
       if (!asset) return buffer;
 
-      const items = this.getAvailablePools(poolsMap?.[address]);
+      const available = this.getAvailablePools(poolsMap?.[address]);
+      const items = available.map((item) => this.prepareDerivedPoolData(item));
 
       if (!items.length) return buffer;
 

From 77c4d0e066e6f420d1567fd6f82d821ae26760d9 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Thu, 15 Dec 2022 16:55:29 +0300
Subject: [PATCH 09/16] refactoring usages

---
 package.json                                  |   2 +-
 .../components/CalculatorDialog.vue           |   4 +-
 .../demeterFarming/components/ClaimDialog.vue |   4 +-
 .../demeterFarming/components/StatusBadge.vue |   4 +-
 .../demeterFarming/mixins/AccountPoolMixin.ts | 148 ------------------
 .../demeterFarming/mixins/BasePageMixin.ts    |   1 -
 .../demeterFarming/mixins/PageMixin.ts        |   4 +-
 .../demeterFarming/mixins/PoolCardMixin.ts    |  94 ++++++++++-
 .../demeterFarming/mixins/PoolStatusMixin.ts  |  72 +++++++++
 src/modules/demeterFarming/views/Pool.vue     |  49 +++---
 src/modules/demeterFarming/views/Staking.vue  |  42 ++---
 src/views/Pool.vue                            |  10 +-
 yarn.lock                                     |   8 +-
 13 files changed, 224 insertions(+), 218 deletions(-)
 delete mode 100644 src/modules/demeterFarming/mixins/AccountPoolMixin.ts
 create mode 100644 src/modules/demeterFarming/mixins/PoolStatusMixin.ts

diff --git a/package.json b/package.json
index 1f83ef7c1..849742332 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@metamask/detect-provider": "^2.0.0",
-    "@soramitsu/soraneo-wallet-web": "1.11.7",
+    "@soramitsu/soraneo-wallet-web": "1.12.1",
     "@walletconnect/web3-provider": "^1.8.0",
     "base-64": "^1.0.0",
     "core-js": "^3.26.0",
diff --git a/src/modules/demeterFarming/components/CalculatorDialog.vue b/src/modules/demeterFarming/components/CalculatorDialog.vue
index 07ef7388a..c308e4b5e 100644
--- a/src/modules/demeterFarming/components/CalculatorDialog.vue
+++ b/src/modules/demeterFarming/components/CalculatorDialog.vue
@@ -70,7 +70,7 @@ import { FPNumber, Operation } from '@sora-substrate/util';
 import type { CodecString } from '@sora-substrate/util';
 import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
 
-import AccountPoolMixin from '../mixins/AccountPoolMixin';
+import PoolCardMixin from '../mixins/PoolCardMixin';
 
 import { lazyComponent } from '@/router';
 import { Components, Links } from '@/consts';
@@ -85,7 +85,7 @@ import { getAssetBalance, isMaxButtonAvailable, getMaxValue, formatDecimalPlaces
     TokenLogo: components.TokenLogo,
   },
 })
-export default class CalculatorDialog extends Mixins(AccountPoolMixin, mixins.DialogMixin, mixins.LoadingMixin) {
+export default class CalculatorDialog extends Mixins(PoolCardMixin, mixins.DialogMixin, mixins.LoadingMixin) {
   @Prop({ default: () => FPNumber.ZERO, type: Object }) readonly emission!: FPNumber;
 
   @Watch('visible')
diff --git a/src/modules/demeterFarming/components/ClaimDialog.vue b/src/modules/demeterFarming/components/ClaimDialog.vue
index 0d1e61e43..0dbb2f0d8 100644
--- a/src/modules/demeterFarming/components/ClaimDialog.vue
+++ b/src/modules/demeterFarming/components/ClaimDialog.vue
@@ -54,7 +54,7 @@
 import { Component, Mixins } from 'vue-property-decorator';
 import { components, mixins, WALLET_CONSTS } from '@soramitsu/soraneo-wallet-web';
 
-import AccountPoolMixin from '../mixins/AccountPoolMixin';
+import PoolCardMixin from '../mixins/PoolCardMixin';
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 
 @Component({
@@ -66,7 +66,7 @@ import TranslationMixin from '@/components/mixins/TranslationMixin';
   },
 })
 export default class ClaimDialog extends Mixins(
-  AccountPoolMixin,
+  PoolCardMixin,
   TranslationMixin,
   mixins.DialogMixin,
   mixins.LoadingMixin
diff --git a/src/modules/demeterFarming/components/StatusBadge.vue b/src/modules/demeterFarming/components/StatusBadge.vue
index 9922b5030..ab7f8587c 100644
--- a/src/modules/demeterFarming/components/StatusBadge.vue
+++ b/src/modules/demeterFarming/components/StatusBadge.vue
@@ -16,14 +16,14 @@
 import { Component, Mixins } from 'vue-property-decorator';
 import { components } from '@soramitsu/soraneo-wallet-web';
 
-import AccountPoolMixin from '../mixins/AccountPoolMixin';
+import PoolStatusMixin from '../mixins/PoolStatusMixin';
 
 @Component({
   components: {
     TokenLogo: components.TokenLogo,
   },
 })
-export default class StatusBadge extends Mixins(AccountPoolMixin) {
+export default class StatusBadge extends Mixins(PoolStatusMixin) {
   get title(): string {
     if (!this.activeStatus) return this.t('demeterFarming.staking.stopped');
 
diff --git a/src/modules/demeterFarming/mixins/AccountPoolMixin.ts b/src/modules/demeterFarming/mixins/AccountPoolMixin.ts
deleted file mode 100644
index 11a7c3c09..000000000
--- a/src/modules/demeterFarming/mixins/AccountPoolMixin.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-import { Component, Mixins, Prop } from 'vue-property-decorator';
-import { FPNumber, Operation } from '@sora-substrate/util';
-import { mixins } from '@soramitsu/soraneo-wallet-web';
-import { XOR } from '@sora-substrate/util/build/assets/consts';
-
-import { getter, state } from '@/store/decorators';
-import { hasInsufficientXorForFee, getAssetBalance } from '@/utils';
-
-import type { AccountLiquidity } from '@sora-substrate/util/build/poolXyk/types';
-import type { DemeterPool, DemeterAccountPool } from '@sora-substrate/util/build/demeterFarming/types';
-import type { Asset, AccountAsset } from '@sora-substrate/util/build/assets/types';
-import type { NetworkFeesObject, CodecString } from '@sora-substrate/util';
-
-import type { DemeterAsset } from '@/modules/demeterFarming/types';
-
-@Component
-export default class AccountPoolMixin extends Mixins(mixins.FormattedAmountMixin, mixins.TranslationMixin) {
-  @Prop({ default: () => null, type: Object }) readonly liquidity!: AccountLiquidity;
-  @Prop({ default: () => null, type: Object }) readonly pool!: DemeterPool;
-  @Prop({ default: () => null, type: Object }) readonly accountPool!: DemeterAccountPool;
-  @Prop({ default: () => null, type: Object }) readonly baseAsset!: DemeterAsset;
-  @Prop({ default: () => null, type: Object }) readonly poolAsset!: DemeterAsset;
-  @Prop({ default: () => null, type: Object }) readonly rewardAsset!: DemeterAsset;
-  @Prop({ default: () => '', type: String }) readonly tvl!: string;
-  @Prop({ default: () => '', type: String }) readonly apr!: string;
-
-  @state.wallet.settings.networkFees networkFees!: NetworkFeesObject;
-
-  @getter.assets.xor xor!: Nullable<AccountAsset>;
-
-  get pricesAvailable(): boolean {
-    return Object.keys(this.fiatPriceAndApyObject).length > 0;
-  }
-
-  // Override it component for another use case
-  get networkFee(): CodecString {
-    return this.networkFees[Operation.DemeterFarmingGetRewards];
-  }
-
-  get formattedNetworkFee(): string {
-    return this.formatCodecNumber(this.networkFee);
-  }
-
-  get isInsufficientXorForFee(): boolean {
-    return !!this.xor && hasInsufficientXorForFee(this.xor, this.networkFee);
-  }
-
-  get xorSymbol(): string {
-    return XOR.symbol;
-  }
-
-  get rewardAssetSymbol(): string {
-    return this.rewardAsset?.symbol ?? '';
-  }
-
-  get rewards(): FPNumber {
-    return this.accountPool?.rewards ?? FPNumber.ZERO;
-  }
-
-  get rewardsFormatted(): string {
-    return this.rewards.toLocaleString();
-  }
-
-  get rewardAssetPrice(): FPNumber {
-    return this.rewardAsset?.price ?? FPNumber.ZERO;
-  }
-
-  get rewardsFiat(): Nullable<string> {
-    if (!this.rewardAsset) return null;
-    return this.getFiatAmountByFPNumber(this.rewards, this.rewardAsset as Asset);
-  }
-
-  get hasRewards(): boolean {
-    return !this.rewards.isZero();
-  }
-
-  get lockedFunds(): FPNumber {
-    return this.accountPool?.pooledTokens ?? FPNumber.ZERO;
-  }
-
-  get hasStake(): boolean {
-    return this.accountPool ? !this.lockedFunds.isZero() : false;
-  }
-
-  get isFarm(): boolean {
-    return !!this.pool?.isFarm;
-  }
-
-  get activeStatus(): boolean {
-    return !this.pool?.isRemoved;
-  }
-
-  get poolAssetSymbol(): string {
-    return this.poolAsset?.symbol ?? '';
-  }
-
-  get poolAssetPrice(): FPNumber {
-    return this.poolAsset?.price ?? FPNumber.ZERO;
-  }
-
-  get poolAssetBalance(): FPNumber {
-    return FPNumber.fromCodecValue(getAssetBalance(this.poolAsset) ?? 0, this.poolAsset?.decimals);
-  }
-
-  get lpBalance(): FPNumber {
-    return FPNumber.fromCodecValue(getAssetBalance(this.liquidity, { parseAsLiquidity: true }) ?? 0);
-  }
-
-  get depositFee(): number {
-    return this.pool?.depositFee ?? 0;
-  }
-
-  get funds(): FPNumber {
-    return this.isFarm ? this.lpBalance : this.poolAssetBalance;
-  }
-
-  get availableFunds(): FPNumber {
-    return this.isFarm ? (FPNumber.max(this.lockedFunds, this.funds) as FPNumber).sub(this.lockedFunds) : this.funds;
-  }
-
-  get depositDisabled(): boolean {
-    return !this.activeStatus || this.availableFunds.isZero();
-  }
-
-  get emitParams(): object {
-    return {
-      baseAsset: this.pool.baseAsset,
-      poolAsset: this.pool.poolAsset,
-      rewardAsset: this.pool.rewardAsset,
-    };
-  }
-
-  add(): void {
-    this.$emit('add', this.emitParams);
-  }
-
-  remove(): void {
-    this.$emit('remove', this.emitParams);
-  }
-
-  claim(): void {
-    this.$emit('claim', this.emitParams);
-  }
-
-  calculator(): void {
-    this.$emit('calculator', this.emitParams);
-  }
-}
diff --git a/src/modules/demeterFarming/mixins/BasePageMixin.ts b/src/modules/demeterFarming/mixins/BasePageMixin.ts
index 817095f65..615dc7291 100644
--- a/src/modules/demeterFarming/mixins/BasePageMixin.ts
+++ b/src/modules/demeterFarming/mixins/BasePageMixin.ts
@@ -60,7 +60,6 @@ export default class BasePageMixin extends Mixins(AprMixin, mixins.FormattedAmou
   }
 
   get demeterAssetsData(): Record<string, DemeterAsset> {
-    console.log('demeterAssetsData');
     return this.uniqueAssets.reduce((buffer, address) => {
       const asset = this.getAsset(address);
       const price = asset ? FPNumber.fromCodecValue(this.getAssetFiatPrice(asset) ?? 0) : FPNumber.ZERO;
diff --git a/src/modules/demeterFarming/mixins/PageMixin.ts b/src/modules/demeterFarming/mixins/PageMixin.ts
index 0168fee6c..ce777b400 100644
--- a/src/modules/demeterFarming/mixins/PageMixin.ts
+++ b/src/modules/demeterFarming/mixins/PageMixin.ts
@@ -1,15 +1,13 @@
 import { Component, Mixins } from 'vue-property-decorator';
 import { mixins } from '@soramitsu/soraneo-wallet-web';
-import { FPNumber } from '@sora-substrate/math';
 
 import { action } from '@/store/decorators';
 
 import BasePageMixin from './BasePageMixin';
 
-import type { AccountLiquidity } from '@sora-substrate/util/build/poolXyk/types';
 import type { DemeterPool, DemeterAccountPool } from '@sora-substrate/util/build/demeterFarming/types';
 
-import type { DemeterPoolDerived, DemeterPoolDerivedData } from '@/modules/demeterFarming/types';
+import type { DemeterPoolDerived } from '@/modules/demeterFarming/types';
 import type { DemeterLiquidityParams } from '@/store/demeterFarming/types';
 
 @Component
diff --git a/src/modules/demeterFarming/mixins/PoolCardMixin.ts b/src/modules/demeterFarming/mixins/PoolCardMixin.ts
index 705f73999..9c814103c 100644
--- a/src/modules/demeterFarming/mixins/PoolCardMixin.ts
+++ b/src/modules/demeterFarming/mixins/PoolCardMixin.ts
@@ -1,14 +1,84 @@
-import { Component, Mixins } from 'vue-property-decorator';
-import { FPNumber } from '@sora-substrate/util';
+import { Component, Mixins, Prop } from 'vue-property-decorator';
+import { FPNumber, Operation } from '@sora-substrate/util';
+import { XOR } from '@sora-substrate/util/build/assets/consts';
 
-import AccountPoolMixin from './AccountPoolMixin';
+import PoolStatusMixin from './PoolStatusMixin';
 
-import { formatDecimalPlaces } from '@/utils';
+import { getter, state } from '@/store/decorators';
+import { hasInsufficientXorForFee } from '@/utils';
 
-import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
+import type { Asset, AccountAsset } from '@sora-substrate/util/build/assets/types';
+import type { NetworkFeesObject, CodecString } from '@sora-substrate/util';
+
+import type { DemeterAsset } from '@/modules/demeterFarming/types';
 
 @Component
-export default class PoolCardMixin extends Mixins(AccountPoolMixin) {
+export default class PoolCardMixin extends Mixins(PoolStatusMixin) {
+  @Prop({ default: () => null, type: Object }) readonly baseAsset!: DemeterAsset;
+  @Prop({ default: () => '', type: String }) readonly tvl!: string;
+
+  @state.wallet.settings.networkFees networkFees!: NetworkFeesObject;
+
+  @getter.assets.xor xor!: Nullable<AccountAsset>;
+
+  // Override it component for another use case
+  get networkFee(): CodecString {
+    return this.networkFees[Operation.DemeterFarmingGetRewards];
+  }
+
+  get formattedNetworkFee(): string {
+    return this.formatCodecNumber(this.networkFee);
+  }
+
+  get isInsufficientXorForFee(): boolean {
+    return !!this.xor && hasInsufficientXorForFee(this.xor, this.networkFee);
+  }
+
+  get xorSymbol(): string {
+    return XOR.symbol;
+  }
+
+  get rewardAssetSymbol(): string {
+    return this.rewardAsset?.symbol ?? '';
+  }
+
+  get rewards(): FPNumber {
+    return this.accountPool?.rewards ?? FPNumber.ZERO;
+  }
+
+  get rewardsFormatted(): string {
+    return this.rewards.toLocaleString();
+  }
+
+  get rewardAssetPrice(): FPNumber {
+    return this.rewardAsset?.price ?? FPNumber.ZERO;
+  }
+
+  get rewardsFiat(): Nullable<string> {
+    if (!this.rewardAsset) return null;
+    return this.getFiatAmountByFPNumber(this.rewards, this.rewardAsset as Asset);
+  }
+
+  get hasRewards(): boolean {
+    return !this.rewards.isZero();
+  }
+
+  get poolAssetSymbol(): string {
+    return this.poolAsset?.symbol ?? '';
+  }
+
+  get poolAssetPrice(): FPNumber {
+    return this.poolAsset?.price ?? FPNumber.ZERO;
+  }
+
+  get depositFee(): number {
+    return this.pool?.depositFee ?? 0;
+  }
+
+  get depositFeeFormatted(): string {
+    return `${this.depositFee * 100}%`;
+  }
+
   get poolShare(): FPNumber {
     if (!this.isFarm) return this.lockedFunds;
 
@@ -33,7 +103,15 @@ export default class PoolCardMixin extends Mixins(AccountPoolMixin) {
       : this.t('demeterFarming.info.stake', { symbol: this.poolAssetSymbol });
   }
 
-  get depositFeeFormatted(): string {
-    return `${this.depositFee * 100}%`;
+  remove(): void {
+    this.$emit('remove', this.emitParams);
+  }
+
+  claim(): void {
+    this.$emit('claim', this.emitParams);
+  }
+
+  calculator(): void {
+    this.$emit('calculator', this.emitParams);
   }
 }
diff --git a/src/modules/demeterFarming/mixins/PoolStatusMixin.ts b/src/modules/demeterFarming/mixins/PoolStatusMixin.ts
new file mode 100644
index 000000000..0f591a96a
--- /dev/null
+++ b/src/modules/demeterFarming/mixins/PoolStatusMixin.ts
@@ -0,0 +1,72 @@
+import { Component, Mixins, Prop } from 'vue-property-decorator';
+import { FPNumber } from '@sora-substrate/util';
+import { mixins } from '@soramitsu/soraneo-wallet-web';
+
+import { getAssetBalance } from '@/utils';
+
+import type { AccountLiquidity } from '@sora-substrate/util/build/poolXyk/types';
+import type { DemeterPool, DemeterAccountPool } from '@sora-substrate/util/build/demeterFarming/types';
+
+import type { DemeterAsset } from '@/modules/demeterFarming/types';
+
+@Component
+export default class PoolStatusMixin extends Mixins(mixins.FormattedAmountMixin, mixins.TranslationMixin) {
+  @Prop({ default: () => null, type: Object }) readonly liquidity!: AccountLiquidity;
+  @Prop({ default: () => null, type: Object }) readonly pool!: DemeterPool;
+  @Prop({ default: () => null, type: Object }) readonly accountPool!: DemeterAccountPool;
+  @Prop({ default: () => null, type: Object }) readonly poolAsset!: DemeterAsset;
+  @Prop({ default: () => null, type: Object }) readonly rewardAsset!: DemeterAsset;
+  @Prop({ default: () => '', type: String }) readonly apr!: string;
+
+  get pricesAvailable(): boolean {
+    return Object.keys(this.fiatPriceAndApyObject).length > 0;
+  }
+
+  get isFarm(): boolean {
+    return !!this.pool?.isFarm;
+  }
+
+  get activeStatus(): boolean {
+    return !this.pool?.isRemoved;
+  }
+
+  get lockedFunds(): FPNumber {
+    return this.accountPool?.pooledTokens ?? FPNumber.ZERO;
+  }
+
+  get hasStake(): boolean {
+    return this.accountPool ? !this.lockedFunds.isZero() : false;
+  }
+
+  get poolAssetBalance(): FPNumber {
+    return FPNumber.fromCodecValue(getAssetBalance(this.poolAsset) ?? 0, this.poolAsset?.decimals);
+  }
+
+  get lpBalance(): FPNumber {
+    return FPNumber.fromCodecValue(getAssetBalance(this.liquidity, { parseAsLiquidity: true }) ?? 0);
+  }
+
+  get funds(): FPNumber {
+    return this.isFarm ? this.lpBalance : this.poolAssetBalance;
+  }
+
+  get availableFunds(): FPNumber {
+    return this.isFarm ? (FPNumber.max(this.lockedFunds, this.funds) as FPNumber).sub(this.lockedFunds) : this.funds;
+  }
+
+  get depositDisabled(): boolean {
+    return !this.activeStatus || this.availableFunds.isZero();
+  }
+
+  get emitParams(): object {
+    return {
+      baseAsset: this.pool.baseAsset,
+      poolAsset: this.pool.poolAsset,
+      rewardAsset: this.pool.rewardAsset,
+    };
+  }
+
+  add(): void {
+    this.$emit('add', this.emitParams);
+  }
+}
diff --git a/src/modules/demeterFarming/views/Pool.vue b/src/modules/demeterFarming/views/Pool.vue
index d25fe7615..aeb6fa385 100644
--- a/src/modules/demeterFarming/views/Pool.vue
+++ b/src/modules/demeterFarming/views/Pool.vue
@@ -32,27 +32,30 @@
       </template>
     </pool-base>
 
-    <stake-dialog
-      :visible.sync="showStakeDialog"
-      :liquidity="selectedAccountLiquidity"
-      :parent-loading="parentLoading || loading"
-      v-bind="selectedDerivedPool"
-      @add="handleStakeAction($event, deposit)"
-      @remove="handleStakeAction($event, withdraw)"
-    />
-
-    <claim-dialog
-      :visible.sync="showClaimDialog"
-      :parent-loading="parentLoading || loading"
-      v-bind="selectedDerivedPool"
-      @confirm="handleClaimRewards"
-    />
-
-    <calculator-dialog
-      :visible.sync="showCalculatorDialog"
-      :liquidity="selectedAccountLiquidity"
-      v-bind="selectedDerivedPool"
-    />
+    <template v-if="selectedDerivedPool">
+      <stake-dialog
+        :visible.sync="showStakeDialog"
+        :is-adding="isAddingStake"
+        :liquidity="selectedAccountLiquidity"
+        :parent-loading="parentLoading || loading"
+        v-bind="selectedDerivedPool"
+        @add="handleStakeAction($event, deposit)"
+        @remove="handleStakeAction($event, withdraw)"
+      />
+
+      <claim-dialog
+        :visible.sync="showClaimDialog"
+        :parent-loading="parentLoading || loading"
+        v-bind="selectedDerivedPool"
+        @confirm="handleClaimRewards"
+      />
+
+      <calculator-dialog
+        :visible.sync="showCalculatorDialog"
+        :liquidity="selectedAccountLiquidity"
+        v-bind="selectedDerivedPool"
+      />
+    </template>
   </div>
 </template>
 
@@ -95,8 +98,8 @@ export default class DemeterPools extends Mixins(PageMixin, mixins.TransactionMi
     );
   }
 
-  get selectedDerivedPool(): DemeterPoolDerivedData | object {
-    if (!this.selectedPool) return {};
+  get selectedDerivedPool(): Nullable<DemeterPoolDerivedData> {
+    if (!this.selectedPool) return null;
 
     return this.prepareDerivedPoolData(
       {
diff --git a/src/modules/demeterFarming/views/Staking.vue b/src/modules/demeterFarming/views/Staking.vue
index 950285887..66a9bd603 100644
--- a/src/modules/demeterFarming/views/Staking.vue
+++ b/src/modules/demeterFarming/views/Staking.vue
@@ -43,23 +43,25 @@
       </s-collapse-item>
     </s-collapse>
 
-    <stake-dialog
-      :visible.sync="showStakeDialog"
-      :is-adding="isAddingStake"
-      :parent-loading="parentLoading || loading"
-      v-bind="selectedDerivedPool"
-      @add="handleStakeAction($event, deposit)"
-      @remove="handleStakeAction($event, withdraw)"
-    />
-
-    <claim-dialog
-      :visible.sync="showClaimDialog"
-      :parent-loading="parentLoading || loading"
-      v-bind="selectedDerivedPool"
-      @confirm="handleClaimRewards"
-    />
-
-    <calculator-dialog :visible.sync="showCalculatorDialog" v-bind="selectedDerivedPool" />
+    <template v-if="selectedDerivedPool">
+      <stake-dialog
+        :visible.sync="showStakeDialog"
+        :is-adding="isAddingStake"
+        :parent-loading="parentLoading || loading"
+        v-bind="selectedDerivedPool"
+        @add="handleStakeAction($event, deposit)"
+        @remove="handleStakeAction($event, withdraw)"
+      />
+
+      <claim-dialog
+        :visible.sync="showClaimDialog"
+        :parent-loading="parentLoading || loading"
+        v-bind="selectedDerivedPool"
+        @confirm="handleClaimRewards"
+      />
+
+      <calculator-dialog :visible.sync="showCalculatorDialog" v-bind="selectedDerivedPool" />
+    </template>
   </div>
 </template>
 
@@ -76,8 +78,6 @@ import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { lazyComponent } from '@/router';
 import { Components } from '@/consts';
 
-import { getter } from '@/store/decorators';
-
 import type { Asset } from '@sora-substrate/util/build/assets/types';
 import type { DemeterPoolDerived, DemeterPoolDerivedData } from '@/modules/demeterFarming/types';
 
@@ -104,8 +104,8 @@ export default class DemeterStaking extends Mixins(PageMixin, TranslationMixin)
     this.activeCollapseItems = items;
   }
 
-  get selectedDerivedPool(): DemeterPoolDerivedData | object {
-    if (!this.selectedPool) return {};
+  get selectedDerivedPool(): Nullable<DemeterPoolDerivedData> {
+    if (!this.selectedPool) return null;
 
     return this.prepareDerivedPoolData({
       pool: this.selectedPool,
diff --git a/src/views/Pool.vue b/src/views/Pool.vue
index 0bc69d37d..45a1918c0 100644
--- a/src/views/Pool.vue
+++ b/src/views/Pool.vue
@@ -2,13 +2,17 @@
   <div v-loading="parentLoading" class="container el-form--pool">
     <generic-page-header class="page-header--pool" :title="t('exchange.Pool')" :tooltip="t('pool.description')" />
     <div v-loading="parentLoading" class="pool-wrapper" data-test-name="Pools">
-      <p v-if="!isLoggedIn" class="pool-info-container pool-info-container--empty">
+      <p v-if="!isLoggedIn" key="not-logged" class="pool-info-container pool-info-container--empty">
         {{ t('pool.connectToWallet') }}
       </p>
-      <p v-else-if="!accountLiquidity.length || parentLoading" class="pool-info-container pool-info-container--empty">
+      <p
+        v-else-if="!accountLiquidity.length || parentLoading"
+        key="pools-empty"
+        class="pool-info-container pool-info-container--empty"
+      >
         {{ t('pool.liquidityNotFound') }}
       </p>
-      <s-collapse v-else class="pool-list" :borders="true" @change="updateActiveCollapseItems">
+      <s-collapse v-else key="has-pools" class="pool-list" :borders="true" @change="updateActiveCollapseItems">
         <s-collapse-item
           v-for="liquidityItem of accountLiquidityData"
           :key="liquidityItem.address"
diff --git a/yarn.lock b/yarn.lock
index 4cd5ba553..aedab8db3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2412,10 +2412,10 @@
     vue-property-decorator "^9.1.2"
     vuex "^3.6.2"
 
-"@soramitsu/soraneo-wallet-web@1.11.7":
-  version "1.11.7"
-  resolved "https://nexus.iroha.tech/repository/npm-group/@soramitsu/soraneo-wallet-web/-/soraneo-wallet-web-1.11.7.tgz#c82e8a168e483d5e43782ac3325cde0902e6f68b"
-  integrity sha512-W4qIQ2o6yZM7Kk9EWG4UdvsKFggGQoVh1DjeDgT1+jXeLY8hZyPh17oPyIxnZ/2Mlot9SAUdFJFzBs6R3mhhgw==
+"@soramitsu/soraneo-wallet-web@1.12.1":
+  version "1.12.1"
+  resolved "https://nexus.iroha.tech/repository/npm-group/@soramitsu/soraneo-wallet-web/-/soraneo-wallet-web-1.12.1.tgz#1547dd52e55190f8184fc541e2a186002d2434b1"
+  integrity sha512-Vnf/xD3tkp4YOwkOJa0iZunZLEV1J586r97869y9C9/ZbDqtOX7DV6PfA5sHJkyQ9v9EQ+azHyiIYK1JxZJkQg==
   dependencies:
     "@polkadot/vue-identicon" "2.6.1"
     "@sora-substrate/util" "1.11.17"

From ebf1c285af65180572e4c6d8b56a54aab18ae82f Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Thu, 15 Dec 2022 18:08:32 +0300
Subject: [PATCH 10/16] remove unused properties

---
 .../demeterFarming/mixins/BasePageMixin.ts    | 41 +++++++++++++++----
 .../demeterFarming/mixins/PageMixin.ts        | 41 ++++++-------------
 src/modules/demeterFarming/views/Pool.vue     | 18 +++-----
 src/modules/demeterFarming/views/Staking.vue  | 18 ++++----
 4 files changed, 60 insertions(+), 58 deletions(-)

diff --git a/src/modules/demeterFarming/mixins/BasePageMixin.ts b/src/modules/demeterFarming/mixins/BasePageMixin.ts
index 615dc7291..a5da17880 100644
--- a/src/modules/demeterFarming/mixins/BasePageMixin.ts
+++ b/src/modules/demeterFarming/mixins/BasePageMixin.ts
@@ -96,8 +96,34 @@ export default class BasePageMixin extends Mixins(AprMixin, mixins.FormattedAmou
     return this.selectedPool ? this.getAccountPool(this.selectedPool) : null;
   }
 
-  prepareDerivedPoolData(item: DemeterPoolDerived, liquidity?: Nullable<AccountLiquidity>): DemeterPoolDerivedData {
-    const { pool, accountPool } = item;
+  getDerivedPools(pools: DemeterPool[]): DemeterPoolDerived[] {
+    if (!Array.isArray(pools)) return [];
+
+    return pools.reduce<DemeterPoolDerived[]>((buffer, pool) => {
+      const poolIsActive = !pool.isRemoved;
+      const accountPool = this.getAccountPool(pool);
+      const accountPoolIsActive = !!accountPool && this.isActiveAccountPool(accountPool);
+
+      if (!(poolIsActive || accountPoolIsActive)) return buffer;
+
+      buffer.push({
+        pool,
+        accountPool,
+      });
+
+      return buffer;
+    }, []);
+  }
+
+  private isActiveAccountPool(accountPool: DemeterAccountPool): boolean {
+    return !(accountPool.pooledTokens.isZero() && accountPool.rewards.isZero());
+  }
+
+  prepareDerivedPoolData(
+    pool: DemeterPool,
+    accountPool: Nullable<DemeterAccountPool>,
+    liquidity?: Nullable<AccountLiquidity>
+  ): DemeterPoolDerivedData {
     const baseAsset = this.demeterAssetsData[pool.baseAsset];
     const poolAsset = this.demeterAssetsData[pool.poolAsset];
     const rewardAsset = this.demeterAssetsData[pool.rewardAsset];
@@ -127,25 +153,26 @@ export default class BasePageMixin extends Mixins(AprMixin, mixins.FormattedAmou
     );
   }
 
-  showPoolCalculator(params: {
+  async showPoolCalculator(params: {
     baseAsset: string;
     poolAsset: string;
     rewardAsset: string;
     liquidity?: AccountLiquidity;
-  }): void {
-    this.setDialogParams(params);
+  }): Promise<void> {
+    await this.setDialogParams(params);
     this.showCalculatorDialog = true;
   }
 
-  setDialogParams(params: {
+  async setDialogParams(params: {
     baseAsset: string;
     poolAsset: string;
     rewardAsset: string;
     liquidity?: AccountLiquidity;
-  }): void {
+  }): Promise<void> {
     this.baseAsset = params.baseAsset;
     this.poolAsset = params.poolAsset;
     this.rewardAsset = params.rewardAsset;
     this.liquidity = params.liquidity;
+    await this.$nextTick();
   }
 }
diff --git a/src/modules/demeterFarming/mixins/PageMixin.ts b/src/modules/demeterFarming/mixins/PageMixin.ts
index ce777b400..630d37e69 100644
--- a/src/modules/demeterFarming/mixins/PageMixin.ts
+++ b/src/modules/demeterFarming/mixins/PageMixin.ts
@@ -5,9 +5,8 @@ import { action } from '@/store/decorators';
 
 import BasePageMixin from './BasePageMixin';
 
-import type { DemeterPool, DemeterAccountPool } from '@sora-substrate/util/build/demeterFarming/types';
+import type { DemeterAccountPool } from '@sora-substrate/util/build/demeterFarming/types';
 
-import type { DemeterPoolDerived } from '@/modules/demeterFarming/types';
 import type { DemeterLiquidityParams } from '@/store/demeterFarming/types';
 
 @Component
@@ -20,37 +19,17 @@ export default class PageMixin extends Mixins(BasePageMixin, mixins.TransactionM
   showClaimDialog = false;
   isAddingStake = true;
 
-  getAvailablePools(pools: DemeterPool[]): DemeterPoolDerived[] {
-    if (!Array.isArray(pools)) return [];
-
-    return pools.reduce<DemeterPoolDerived[]>((buffer, pool) => {
-      const poolIsActive = !pool.isRemoved;
-      const accountPool = this.getAccountPool(pool);
-      const accountPoolIsActive = !!accountPool && this.isActiveAccountPool(accountPool);
-
-      if (!(poolIsActive || accountPoolIsActive)) return buffer;
-
-      buffer.push({
-        pool,
-        accountPool,
-      });
-
-      return buffer;
-    }, []);
-  }
-
-  private isActiveAccountPool(accountPool: DemeterAccountPool): boolean {
-    return !accountPool.pooledTokens.isZero() || !accountPool.rewards.isZero();
-  }
-
-  changePoolStake(params: { baseAsset: string; poolAsset: string; rewardAsset: string }, isAddingStake = true): void {
+  async changePoolStake(
+    params: { baseAsset: string; poolAsset: string; rewardAsset: string },
+    isAddingStake = true
+  ): Promise<void> {
     this.isAddingStake = isAddingStake;
-    this.setDialogParams(params);
+    await this.setDialogParams(params);
     this.showStakeDialog = true;
   }
 
-  claimPoolRewards(params: { baseAsset: string; poolAsset: string; rewardAsset: string }): void {
-    this.setDialogParams(params);
+  async claimPoolRewards(params: { baseAsset: string; poolAsset: string; rewardAsset: string }): Promise<void> {
+    await this.setDialogParams(params);
     this.showClaimDialog = true;
   }
 
@@ -70,4 +49,8 @@ export default class PageMixin extends Mixins(BasePageMixin, mixins.TransactionM
       this.showClaimDialog = false;
     });
   }
+
+  getStatusBadgeVisibility(address: string, activeCollapseItems: string[]): boolean {
+    return !activeCollapseItems.includes(address);
+  }
 }
diff --git a/src/modules/demeterFarming/views/Pool.vue b/src/modules/demeterFarming/views/Pool.vue
index aeb6fa385..68aec595a 100644
--- a/src/modules/demeterFarming/views/Pool.vue
+++ b/src/modules/demeterFarming/views/Pool.vue
@@ -101,21 +101,17 @@ export default class DemeterPools extends Mixins(PageMixin, mixins.TransactionMi
   get selectedDerivedPool(): Nullable<DemeterPoolDerivedData> {
     if (!this.selectedPool) return null;
 
-    return this.prepareDerivedPoolData(
-      {
-        pool: this.selectedPool,
-        accountPool: this.selectedAccountPool,
-      },
-      this.selectedAccountLiquidity
-    );
+    return this.prepareDerivedPoolData(this.selectedPool, this.selectedAccountPool, this.selectedAccountLiquidity);
   }
 
   get farmingPoolsByLiquidities(): Record<string, DemeterPoolDerivedData[]> {
     return this.accountLiquidity.reduce((buffer, liquidity) => {
       const key = this.getLiquidityKey(liquidity);
-      const availablePools = this.getAvailablePools(this.pools[liquidity.firstAddress]?.[liquidity.secondAddress]);
+      const derivedPools = this.getDerivedPools(this.pools[liquidity.firstAddress]?.[liquidity.secondAddress]);
 
-      buffer[key] = availablePools.map((derived) => this.prepareDerivedPoolData(derived, liquidity));
+      buffer[key] = derivedPools.map((derived) =>
+        this.prepareDerivedPoolData(derived.pool, derived.accountPool, liquidity)
+      );
 
       return buffer;
     }, {});
@@ -125,10 +121,6 @@ export default class DemeterPools extends Mixins(PageMixin, mixins.TransactionMi
     return this.farmingPoolsByLiquidities[this.getLiquidityKey(liquidity)] ?? [];
   }
 
-  getStatusBadgeVisibility(address: string, activeCollapseItems: string[]): boolean {
-    return !activeCollapseItems.includes(address);
-  }
-
   private getLiquidityKey(liquidity: AccountLiquidity): string {
     return [liquidity.firstAddress, liquidity.secondAddress].join(';');
   }
diff --git a/src/modules/demeterFarming/views/Staking.vue b/src/modules/demeterFarming/views/Staking.vue
index 66a9bd603..f151c1be3 100644
--- a/src/modules/demeterFarming/views/Staking.vue
+++ b/src/modules/demeterFarming/views/Staking.vue
@@ -17,7 +17,10 @@
           <token-logo :token="token.asset" size="medium" class="token-logo" />
           <div>
             <h3 class="staking-info-title">{{ token.asset.symbol }}</h3>
-            <div class="s-flex staking-info-badges">
+            <div
+              v-show="getStatusBadgeVisibility(token.asset.address, activeCollapseItems)"
+              class="s-flex staking-info-badges"
+            >
               <status-badge
                 v-for="item in token.items"
                 :key="item.pool.rewardAsset"
@@ -79,11 +82,11 @@ import { lazyComponent } from '@/router';
 import { Components } from '@/consts';
 
 import type { Asset } from '@sora-substrate/util/build/assets/types';
-import type { DemeterPoolDerived, DemeterPoolDerivedData } from '@/modules/demeterFarming/types';
+import type { DemeterPoolDerivedData } from '@/modules/demeterFarming/types';
 
 type StakingItem = {
   asset: Asset;
-  items: Array<DemeterPoolDerived>;
+  items: Array<DemeterPoolDerivedData>;
 };
 
 @Component({
@@ -107,10 +110,7 @@ export default class DemeterStaking extends Mixins(PageMixin, TranslationMixin)
   get selectedDerivedPool(): Nullable<DemeterPoolDerivedData> {
     if (!this.selectedPool) return null;
 
-    return this.prepareDerivedPoolData({
-      pool: this.selectedPool,
-      accountPool: this.selectedAccountPool,
-    });
+    return this.prepareDerivedPoolData(this.selectedPool, this.selectedAccountPool);
   }
 
   get tokensData(): object {
@@ -119,8 +119,8 @@ export default class DemeterStaking extends Mixins(PageMixin, TranslationMixin)
 
       if (!asset) return buffer;
 
-      const available = this.getAvailablePools(poolsMap?.[address]);
-      const items = available.map((item) => this.prepareDerivedPoolData(item));
+      const derived = this.getDerivedPools(poolsMap?.[address]);
+      const items = derived.map((item) => this.prepareDerivedPoolData(item.pool, item.accountPool));
 
       if (!items.length) return buffer;
 

From 5b8b3bb81bf3c165cc0b6df7fc90b5f2c7519aa0 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Thu, 15 Dec 2022 18:24:59 +0300
Subject: [PATCH 11/16] update demeter explore calculator

---
 src/views/Explore/Demeter.vue | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/views/Explore/Demeter.vue b/src/views/Explore/Demeter.vue
index 5cc9a7389..22d2c1772 100644
--- a/src/views/Explore/Demeter.vue
+++ b/src/views/Explore/Demeter.vue
@@ -142,12 +142,7 @@
       @next-click="handleNextClick"
     />
 
-    <calculator-dialog
-      :visible.sync="showCalculatorDialog"
-      :pool="selectedPool"
-      :account-pool="selectedAccountPool"
-      :liquidity="liquidity"
-    />
+    <calculator-dialog :visible.sync="showCalculatorDialog" v-bind="selectedDerivedPool" :liquidity="liquidity" />
   </div>
 </template>
 
@@ -155,27 +150,25 @@
 import { Component, Mixins, Watch } from 'vue-property-decorator';
 import { FPNumber } from '@sora-substrate/util';
 import { api, components } from '@soramitsu/soraneo-wallet-web';
-import { XOR } from '@sora-substrate/util/build/assets/consts';
 import { SortDirection } from '@soramitsu/soramitsu-js-ui/lib/components/Table/consts';
 
 import ExplorePageMixin from '@/components/mixins/ExplorePageMixin';
 import DemeterBasePageMixin from '@/modules/demeterFarming/mixins/BasePageMixin';
-import AprMixin from '@/modules/demeterFarming/mixins/AprMixin';
 
 import { demeterLazyComponent } from '@/modules/demeterFarming/router';
 import { DemeterComponents } from '@/modules/demeterFarming/consts';
 
 import { lazyComponent } from '@/router';
 import { Components } from '@/consts';
-import { getter } from '@/store/decorators';
 import { formatAmountWithSuffix, formatDecimalPlaces } from '@/utils';
 
 import SortButton from '@/components/SortButton.vue';
 
 import type { Asset } from '@sora-substrate/util/build/assets/types';
 import type { AccountLiquidity } from '@sora-substrate/util/build/poolXyk/types';
-import type { DemeterPool, DemeterRewardToken } from '@sora-substrate/util/build/demeterFarming/types';
+import type { DemeterPool } from '@sora-substrate/util/build/demeterFarming/types';
 import type { AmountWithSuffix } from '@/types/formats';
+import type { DemeterPoolDerivedData } from '@/modules/demeterFarming/types';
 
 type PoolData = {
   price: FPNumber;
@@ -214,7 +207,7 @@ const lpKey = (baseAsset: string, poolAsset: string): string => {
     FormattedAmount: components.FormattedAmount,
   },
 })
-export default class ExploreDemeter extends Mixins(ExplorePageMixin, DemeterBasePageMixin, AprMixin) {
+export default class ExploreDemeter extends Mixins(ExplorePageMixin, DemeterBasePageMixin) {
   @Watch('pools', { deep: true })
   private async updatePoolsData() {
     await this.withLoading(async () => {
@@ -253,11 +246,17 @@ export default class ExploreDemeter extends Mixins(ExplorePageMixin, DemeterBase
       .flat(2) as DemeterPool[];
   }
 
+  get selectedDerivedPool(): Nullable<DemeterPoolDerivedData> {
+    if (!this.selectedPool) return null;
+
+    return this.prepareDerivedPoolData(this.selectedPool, this.selectedAccountPool, this.liquidity);
+  }
+
   get preparedItems(): TableItem[] {
     return this.items.map((pool) => {
-      const baseAsset = this.getAsset(pool.baseAsset) as Asset;
-      const poolAsset = this.getAsset(pool.poolAsset) as Asset;
-      const rewardAsset = this.getAsset(pool.rewardAsset) as Asset;
+      const baseAsset = this.demeterAssetsData[pool.baseAsset] as Asset;
+      const poolAsset = this.demeterAssetsData[pool.poolAsset] as Asset;
+      const rewardAsset = this.demeterAssetsData[pool.rewardAsset] as Asset;
       const rewardAssetSymbol = rewardAsset?.symbol ?? '';
       const rewardAssetPrice = FPNumber.fromCodecValue(
         this.getAssetFiatPrice({ address: pool.rewardAsset } as Asset) ?? 0

From 13f3e4910763deb6303da4e2cbf4f92e1b7ee789 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Thu, 15 Dec 2022 18:28:42 +0300
Subject: [PATCH 12/16] return env.json

---
 public/env.json | 88 ++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 87 insertions(+), 1 deletion(-)

diff --git a/public/env.json b/public/env.json
index 8d3a6c4f9..4635d9854 100644
--- a/public/env.json
+++ b/public/env.json
@@ -1 +1,87 @@
-{ "BASE_API_URL": "test.polkaswap.io", "FAUCET_URL": "https://testfaucet.polkaswap.io/", "SUBQUERY_ENDPOINT": "https://api.subquery.network/sq/sora-xor/sora-staging__c29yY", "API_KEYS": { "moonpay": "pk_test_4ASGxHKGpLPE6sdQq1V3QjtpUFSpWLk", "nftStorage": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDBmMzgwOTMyQTNDODM3ZDNiN2JEYzBBNTc0NmNkMDlBRGIyNUZGMzQiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY0MjU4OTQ2ODA4MSwibmFtZSI6Im5mdC1zdG9yYWdlLWRldiJ9.hkvzea9ltcriXXHKoYd3F2Iu1Y8X5H-zunAQboC_3vw", "etherscan": "UPTTMBUBCE5FIE7XJZYAJ3YZGFE7DA6374" }, "FEATURE_FLAGS": { "moonpay": true, "charts": true }, "DEFAULT_NETWORKS": [ { "chain": "SORA-staging Testnet", "name": "SORA", "address": "wss://ws.framenode-1.s1.stg1.sora2.soramitsu.co.jp" }, { "chain": "SORA-staging Testnet", "name": "SORA", "address": "wss://ws.framenode-2.s1.stg1.sora2.soramitsu.co.jp" }, { "chain": "SORA-staging Testnet", "name": "SORA", "address": "wss://ws.framenode-3.s2.stg1.sora2.soramitsu.co.jp" }, { "chain": "SORA-staging Testnet", "name": "SORA", "address": "wss://ws.framenode-4.s2.stg1.sora2.soramitsu.co.jp" }, { "chain": "SORA-staging Testnet", "name": "SORA", "address": "wss://ws.framenode-5.s3.stg1.sora2.soramitsu.co.jp" }, { "chain": "SORA-staging Testnet", "name": "SORA", "address": "wss://ws.framenode-6.s3.stg1.sora2.soramitsu.co.jp" }, { "chain": "SORA-staging Testnet", "name": "SORA", "address": "wss://ws.framenode-7.s4.stg1.sora2.soramitsu.co.jp" }, { "chain": "SORA-staging Testnet", "name": "SORA", "address": "wss://ws.framenode-8.s5.stg1.sora2.soramitsu.co.jp" } ], "NETWORK_TYPE": "Stage", "CHAIN_GENESIS_HASH": "0x1a0983c6c9fd3178ae24656bcfca4510a439ab7b90c83e360a1671609752b09a", "SUB_NETWORKS": [ { "name": "ethereum", "id": 0, "symbol": "ETH", "currency": "ETH", "defaultType": "rinkeby", "CONTRACTS": { "XOR": { "MASTER": "0xcceb41100aa2a9a6f144d7c1f876070b810bf7ae" }, "VAL": { "MASTER": "0xd7f81ed173cb3af28f983670164df30851fba678" }, "OTHER": { "MASTER": "0x78cb1bfd2256515019b03584d66eca516cd5893c" } } }, { "name": "energy", "id": 1, "symbol": "VT", "currency": "VT", "defaultType": "private", "CONTRACTS": { "XOR": { "MASTER": "" }, "VAL": { "MASTER": "" }, "OTHER": { "MASTER": "0x906111a433731a563Aa0d0FA871FF93f9A3B3035" } } } ] }
\ No newline at end of file
+{
+    "BASE_API_URL": "",
+    "API_KEYS": {
+      "moonpay": "pk_test_4ASGxHKGpLPE6sdQq1V3QjtpUFSpWLk",
+      "nftStorage": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDBmMzgwOTMyQTNDODM3ZDNiN2JEYzBBNTc0NmNkMDlBRGIyNUZGMzQiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY0MjU4OTQ2ODA4MSwibmFtZSI6Im5mdC1zdG9yYWdlLWRldiJ9.hkvzea9ltcriXXHKoYd3F2Iu1Y8X5H-zunAQboC_3vw",
+      "etherscan": "YBR7IWEBEXFICT8M7GRV77NBX4AXJ9T53H"
+    },
+    "FEATURE_FLAGS": {
+      "moonpay": 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",
+    "DEFAULT_NETWORKS": [
+      {
+        "chain": "SORA-dev Testnet #1",
+        "name": "SORA",
+        "address": "wss://ws.framenode-1.s1.dev.sora2.soramitsu.co.jp"
+      },
+      {
+        "chain": "SORA-dev Testnet #2",
+        "name": "SORA",
+        "address": "wss://ws.framenode-2.s2.dev.sora2.soramitsu.co.jp"
+      },
+      {
+        "chain": "SORA-dev Testnet #3",
+        "name": "SORA",
+        "address": "wss://ws.framenode-3.s3.dev.sora2.soramitsu.co.jp"
+      },
+      {
+        "chain": "SORA-dev Testnet #4",
+        "name": "SORA",
+        "address": "wss://ws.framenode-4.s3.dev.sora2.soramitsu.co.jp"
+      },
+      {
+        "chain": "SORA-dev Testnet #5",
+        "name": "SORA",
+        "address": "wss://ws.framenode-5.s4.dev.sora2.soramitsu.co.jp"
+      },
+      {
+        "chain": "SORA-dev Testnet #6",
+        "name": "SORA",
+        "address": "wss://ws.framenode-6.s4.dev.sora2.soramitsu.co.jp"
+      }
+    ],
+    "NETWORK_TYPE": "Dev",
+    "CHAIN_GENESIS_HASH": "",
+    "SUB_NETWORKS": [
+      {
+        "name": "ethereum",
+        "id": 0,
+        "symbol": "ETH",
+        "currency": "ETH",
+        "defaultType": "sepolia",
+        "CONTRACTS": {
+          "XOR": {
+            "MASTER": "0x12c6a709925783f49fcca0b398d13b0d597e6e1c"
+          },
+          "VAL": {
+            "MASTER": "0x47e229aa491763038f6a505b4f85d8eb463f0962"
+          },
+          "OTHER": {
+            "MASTER": "0x24390c8f6cbd5d152c30226f809f4e3f153b88d4"
+          }
+        }
+      },
+      {
+        "name": "energy",
+        "id": 1,
+        "symbol": "VT",
+        "currency": "VT",
+        "defaultType": "private",
+        "CONTRACTS": {
+          "XOR": {
+            "MASTER": ""
+          },
+          "VAL": {
+            "MASTER": ""
+          },
+          "OTHER": {
+            "MASTER": "0x1891b81AE0C5A81Ec84BC4f69322C6a01A3B3095"
+          }
+        }
+      }
+    ]
+}

From 8566ae426830d23f217cd274f9130bfce00990e4 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Fri, 16 Dec 2022 14:13:33 +0300
Subject: [PATCH 13/16] remove unnecessary code

---
 .../demeterFarming/mixins/BasePageMixin.ts    | 25 ++++------
 .../demeterFarming/mixins/PageMixin.ts        | 11 ++---
 src/modules/demeterFarming/views/Pool.vue     | 46 +++++++++----------
 src/modules/demeterFarming/views/Staking.vue  | 40 ++++++++--------
 4 files changed, 53 insertions(+), 69 deletions(-)

diff --git a/src/modules/demeterFarming/mixins/BasePageMixin.ts b/src/modules/demeterFarming/mixins/BasePageMixin.ts
index a5da17880..94a5e8db6 100644
--- a/src/modules/demeterFarming/mixins/BasePageMixin.ts
+++ b/src/modules/demeterFarming/mixins/BasePageMixin.ts
@@ -64,17 +64,9 @@ export default class BasePageMixin extends Mixins(AprMixin, mixins.FormattedAmou
       const asset = this.getAsset(address);
       const price = asset ? FPNumber.fromCodecValue(this.getAssetFiatPrice(asset) ?? 0) : FPNumber.ZERO;
 
-      return {
-        ...buffer,
-        [address]: {
-          address,
-          symbol: asset?.symbol ?? '',
-          name: asset?.name,
-          decimals: asset?.decimals,
-          balance: asset?.balance,
-          price,
-        },
-      };
+      buffer[address] = { ...asset, price };
+
+      return buffer;
     }, {});
   }
 
@@ -153,26 +145,25 @@ export default class BasePageMixin extends Mixins(AprMixin, mixins.FormattedAmou
     );
   }
 
-  async showPoolCalculator(params: {
+  showPoolCalculator(params: {
     baseAsset: string;
     poolAsset: string;
     rewardAsset: string;
     liquidity?: AccountLiquidity;
-  }): Promise<void> {
-    await this.setDialogParams(params);
+  }): void {
+    this.setDialogParams(params);
     this.showCalculatorDialog = true;
   }
 
-  async setDialogParams(params: {
+  setDialogParams(params: {
     baseAsset: string;
     poolAsset: string;
     rewardAsset: string;
     liquidity?: AccountLiquidity;
-  }): Promise<void> {
+  }): void {
     this.baseAsset = params.baseAsset;
     this.poolAsset = params.poolAsset;
     this.rewardAsset = params.rewardAsset;
     this.liquidity = params.liquidity;
-    await this.$nextTick();
   }
 }
diff --git a/src/modules/demeterFarming/mixins/PageMixin.ts b/src/modules/demeterFarming/mixins/PageMixin.ts
index 630d37e69..891178d00 100644
--- a/src/modules/demeterFarming/mixins/PageMixin.ts
+++ b/src/modules/demeterFarming/mixins/PageMixin.ts
@@ -19,17 +19,14 @@ export default class PageMixin extends Mixins(BasePageMixin, mixins.TransactionM
   showClaimDialog = false;
   isAddingStake = true;
 
-  async changePoolStake(
-    params: { baseAsset: string; poolAsset: string; rewardAsset: string },
-    isAddingStake = true
-  ): Promise<void> {
+  changePoolStake(params: { baseAsset: string; poolAsset: string; rewardAsset: string }, isAddingStake = true): void {
     this.isAddingStake = isAddingStake;
-    await this.setDialogParams(params);
+    this.setDialogParams(params);
     this.showStakeDialog = true;
   }
 
-  async claimPoolRewards(params: { baseAsset: string; poolAsset: string; rewardAsset: string }): Promise<void> {
-    await this.setDialogParams(params);
+  claimPoolRewards(params: { baseAsset: string; poolAsset: string; rewardAsset: string }): void {
+    this.setDialogParams(params);
     this.showClaimDialog = true;
   }
 
diff --git a/src/modules/demeterFarming/views/Pool.vue b/src/modules/demeterFarming/views/Pool.vue
index 68aec595a..184764ebd 100644
--- a/src/modules/demeterFarming/views/Pool.vue
+++ b/src/modules/demeterFarming/views/Pool.vue
@@ -32,30 +32,28 @@
       </template>
     </pool-base>
 
-    <template v-if="selectedDerivedPool">
-      <stake-dialog
-        :visible.sync="showStakeDialog"
-        :is-adding="isAddingStake"
-        :liquidity="selectedAccountLiquidity"
-        :parent-loading="parentLoading || loading"
-        v-bind="selectedDerivedPool"
-        @add="handleStakeAction($event, deposit)"
-        @remove="handleStakeAction($event, withdraw)"
-      />
-
-      <claim-dialog
-        :visible.sync="showClaimDialog"
-        :parent-loading="parentLoading || loading"
-        v-bind="selectedDerivedPool"
-        @confirm="handleClaimRewards"
-      />
-
-      <calculator-dialog
-        :visible.sync="showCalculatorDialog"
-        :liquidity="selectedAccountLiquidity"
-        v-bind="selectedDerivedPool"
-      />
-    </template>
+    <stake-dialog
+      :visible.sync="showStakeDialog"
+      :is-adding="isAddingStake"
+      :liquidity="selectedAccountLiquidity"
+      :parent-loading="parentLoading || loading"
+      v-bind="selectedDerivedPool"
+      @add="handleStakeAction($event, deposit)"
+      @remove="handleStakeAction($event, withdraw)"
+    />
+
+    <claim-dialog
+      :visible.sync="showClaimDialog"
+      :parent-loading="parentLoading || loading"
+      v-bind="selectedDerivedPool"
+      @confirm="handleClaimRewards"
+    />
+
+    <calculator-dialog
+      :visible.sync="showCalculatorDialog"
+      :liquidity="selectedAccountLiquidity"
+      v-bind="selectedDerivedPool"
+    />
   </div>
 </template>
 
diff --git a/src/modules/demeterFarming/views/Staking.vue b/src/modules/demeterFarming/views/Staking.vue
index f151c1be3..a6cbeaf3f 100644
--- a/src/modules/demeterFarming/views/Staking.vue
+++ b/src/modules/demeterFarming/views/Staking.vue
@@ -46,25 +46,23 @@
       </s-collapse-item>
     </s-collapse>
 
-    <template v-if="selectedDerivedPool">
-      <stake-dialog
-        :visible.sync="showStakeDialog"
-        :is-adding="isAddingStake"
-        :parent-loading="parentLoading || loading"
-        v-bind="selectedDerivedPool"
-        @add="handleStakeAction($event, deposit)"
-        @remove="handleStakeAction($event, withdraw)"
-      />
-
-      <claim-dialog
-        :visible.sync="showClaimDialog"
-        :parent-loading="parentLoading || loading"
-        v-bind="selectedDerivedPool"
-        @confirm="handleClaimRewards"
-      />
-
-      <calculator-dialog :visible.sync="showCalculatorDialog" v-bind="selectedDerivedPool" />
-    </template>
+    <stake-dialog
+      :visible.sync="showStakeDialog"
+      :is-adding="isAddingStake"
+      :parent-loading="parentLoading || loading"
+      v-bind="selectedDerivedPool"
+      @add="handleStakeAction($event, deposit)"
+      @remove="handleStakeAction($event, withdraw)"
+    />
+
+    <claim-dialog
+      :visible.sync="showClaimDialog"
+      :parent-loading="parentLoading || loading"
+      v-bind="selectedDerivedPool"
+      @confirm="handleClaimRewards"
+    />
+
+    <calculator-dialog :visible.sync="showCalculatorDialog" v-bind="selectedDerivedPool" />
   </div>
 </template>
 
@@ -113,9 +111,9 @@ export default class DemeterStaking extends Mixins(PageMixin, TranslationMixin)
     return this.prepareDerivedPoolData(this.selectedPool, this.selectedAccountPool);
   }
 
-  get tokensData(): object {
+  get tokensData(): StakingItem[] {
     return Object.entries(this.pools).reduce<StakingItem[]>((buffer, [address, poolsMap]) => {
-      const asset = this.getAsset(address);
+      const asset = this.demeterAssetsData[address];
 
       if (!asset) return buffer;
 

From 54ac66931a9e422e444869aa7916375c9bd2c8c1 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Mon, 19 Dec 2022 17:14:46 +0300
Subject: [PATCH 14/16] chart refactoring & fix demeter farming page list

---
 src/components/App/Menu/AppMenu.vue         |  4 +-
 src/components/Swap/Chart.vue               | 74 ++++++++++-----------
 src/components/mixins/SubscriptionsMixin.ts |  4 +-
 src/views/Explore/Demeter.vue               |  3 +-
 src/views/Swap.vue                          |  2 +-
 5 files changed, 44 insertions(+), 43 deletions(-)

diff --git a/src/components/App/Menu/AppMenu.vue b/src/components/App/Menu/AppMenu.vue
index c550c551e..4f1da501e 100644
--- a/src/components/App/Menu/AppMenu.vue
+++ b/src/components/App/Menu/AppMenu.vue
@@ -11,7 +11,7 @@
           text-color="var(--s-color-base-content-primary)"
           :active-text-color="mainMenuActiveColor"
           active-hover-color="transparent"
-          :default-active="getCurrentPath()"
+          :default-active="currentPath"
           @select="onSelect"
         >
           <s-menu-item-group v-for="(item, index) in sidebarMenuItems" :key="index">
@@ -130,7 +130,7 @@ export default class AppMenu extends Mixins(TranslationMixin) {
     return SidebarMenuGroups.filter((menuItem) => menuItem.title !== PageNames.SoraCard);
   }
 
-  getCurrentPath(): string {
+  get currentPath(): string {
     if (PoolChildPages.includes(router.currentRoute.name as PageNames)) {
       return PageNames.Pool;
     }
diff --git a/src/components/Swap/Chart.vue b/src/components/Swap/Chart.vue
index f8b8d5d17..92c5c67ab 100644
--- a/src/components/Swap/Chart.vue
+++ b/src/components/Swap/Chart.vue
@@ -90,7 +90,7 @@
 import dayjs from 'dayjs';
 import isEqual from 'lodash/fp/isEqual';
 import { graphic } from 'echarts';
-import { Component, Mixins, Watch } from 'vue-property-decorator';
+import { Component, Mixins, Watch, Prop } from 'vue-property-decorator';
 import { FPNumber } from '@sora-substrate/util';
 import { SSkeleton, SSkeletonItem } from '@soramitsu/soramitsu-js-ui/lib/components/Skeleton';
 
@@ -109,11 +109,10 @@ import CandleIcon from '@/assets/img/charts/candle.svg?inline';
 
 import { lazyComponent } from '@/router';
 import { Components } from '@/consts';
-import { getter } from '@/store/decorators';
-import { debouncedInputHandler, getTextWidth, calcPriceChange } from '@/utils';
+import { debouncedInputHandler, getTextWidth, calcPriceChange, formatDecimalPlaces } from '@/utils';
 import { AssetSnapshot } from '@soramitsu/soraneo-wallet-web/lib/services/subquery/types';
 
-import type { AccountAsset, Asset } from '@sora-substrate/util/build/assets/types';
+import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
 
 type ChartDataItem = {
   timestamp: number;
@@ -237,6 +236,21 @@ const AXIS_OFFSET = 8;
 
 const SYNC_INTERVAL = 6 * 1000;
 
+const signific =
+  (value: FPNumber) =>
+  (positive: string, negative: string, zero: string): string => {
+    return FPNumber.gt(value, FPNumber.ZERO) ? positive : FPNumber.lt(value, FPNumber.ZERO) ? negative : zero;
+  };
+
+const formatChange = (value: FPNumber): string => {
+  const sign = signific(value)('+', '', '');
+  const priceChange = formatDecimalPlaces(value, true);
+
+  return `${sign}${priceChange}`;
+};
+
+const formatPrice = (value: number, symbol: string) => `${new FPNumber(value).toLocaleString()} ${symbol}`;
+
 @Component({
   components: {
     TokenLogo: components.TokenLogo,
@@ -256,9 +270,9 @@ export default class SwapChart extends Mixins(
   mixins.NumberFormatterMixin,
   mixins.FormattedAmountMixin
 ) {
-  @getter.swap.tokenFrom tokenFrom!: AccountAsset;
-  @getter.swap.tokenTo tokenTo!: AccountAsset;
-  @getter.swap.isAvailable isAvailable!: boolean;
+  @Prop({ default: () => null, type: Object }) readonly tokenFrom!: Nullable<AccountAsset>;
+  @Prop({ default: () => null, type: Object }) readonly tokenTo!: Nullable<AccountAsset>;
+  @Prop({ default: false, type: Boolean }) readonly isAvailable!: boolean;
 
   @Watch('tokenFrom')
   @Watch('tokenTo')
@@ -272,21 +286,21 @@ export default class SwapChart extends Mixins(
   readonly FontWeightRate = WALLET_CONSTS.FontWeightRate;
 
   // ordered by timestamp DESC
-  prices: ChartDataItem[] = [];
-  pageInfos: Partial<SUBQUERY_TYPES.PageInfo>[] = [];
-  zoomStart = 0; // percentage of zoom start position
-  zoomEnd = 100; // percentage of zoom end position
-  precision = 2;
-  limits = {
+  private prices: ChartDataItem[] = [];
+  private pageInfos: Partial<SUBQUERY_TYPES.PageInfo>[] = [];
+  private zoomStart = 0; // percentage of zoom start position
+  private zoomEnd = 100; // percentage of zoom end position
+  private precision = 2;
+  private limits = {
     min: Infinity,
     max: 0,
   };
 
   updatePrices = debouncedInputHandler(this.getHistoricalPrices, 250, { leading: false });
-  forceUpdatePrices = debouncedInputHandler(this.resetAndUpdatePrices, 250, { leading: false });
+  private forceUpdatePrices = debouncedInputHandler(this.resetAndUpdatePrices, 250, { leading: false });
 
-  priceUpdateWatcher: Nullable<FnWithoutArgs> = null;
-  priceUpdateTimestampSync: Nullable<NodeJS.Timer | number> = null;
+  private priceUpdateWatcher: Nullable<FnWithoutArgs> = null;
+  private priceUpdateTimestampSync: Nullable<NodeJS.Timer | number> = null;
 
   chartType: CHART_TYPES = CHART_TYPES.LINE;
   selectedFilter: ChartFilter = LINE_CHART_FILTERS[0];
@@ -311,8 +325,8 @@ export default class SwapChart extends Mixins(
     return this.tokenTo?.symbol ?? 'USD';
   }
 
-  get tokens(): Asset[] {
-    return [this.tokenFrom, this.tokenTo].filter((token) => !!token);
+  get tokens(): AccountAsset[] {
+    return [this.tokenFrom, this.tokenTo].filter((token) => !!token) as AccountAsset[];
   }
 
   get tokensAddresses(): string[] {
@@ -537,17 +551,7 @@ export default class SwapChart extends Mixins(
         formatter: (params) => {
           const { data, seriesType } = params[0];
 
-          const signific = (value: FPNumber) => (positive: string, negative: string, zero: string) =>
-            FPNumber.gt(value, FPNumber.ZERO) ? positive : FPNumber.lt(value, FPNumber.ZERO) ? negative : zero;
-          const formatPrice = (value: number) => `${new FPNumber(value).toLocaleString()} ${this.symbol}`;
-          const formatChange = (value: FPNumber) => {
-            const sign = signific(value)('+', '', '');
-            const priceChange = this.formatPriceChange(value);
-
-            return `${sign}${priceChange}%`;
-          };
-
-          if (seriesType === CHART_TYPES.LINE) return formatPrice(data[1]);
+          if (seriesType === CHART_TYPES.LINE) return formatPrice(data[1], this.symbol);
 
           if (seriesType === CHART_TYPES.CANDLE) {
             const [timestamp, open, close, low, high] = data;
@@ -559,10 +563,10 @@ export default class SwapChart extends Mixins(
             );
 
             const rows = [
-              { title: 'Open', data: formatPrice(open) },
-              { title: 'High', data: formatPrice(high) },
-              { title: 'Low', data: formatPrice(low) },
-              { title: 'Close', data: formatPrice(close) },
+              { title: 'Open', data: formatPrice(open, this.symbol) },
+              { title: 'High', data: formatPrice(high, this.symbol) },
+              { title: 'Low', data: formatPrice(low, this.symbol) },
+              { title: 'Close', data: formatPrice(close, this.symbol) },
               { title: 'Change', data: formatChange(change), color: changeColor },
             ];
 
@@ -919,10 +923,6 @@ export default class SwapChart extends Mixins(
   private isAllHistoricalPricesFetched(pageInfos: Partial<SUBQUERY_TYPES.PageInfo>[]): boolean {
     return pageInfos.some((pageInfo) => !pageInfo.hasNextPage);
   }
-
-  private formatPriceChange(value: FPNumber): string {
-    return new FPNumber(value.toFixed(2)).toLocaleString();
-  }
 }
 </script>
 
diff --git a/src/components/mixins/SubscriptionsMixin.ts b/src/components/mixins/SubscriptionsMixin.ts
index ed67835cb..7658c4825 100644
--- a/src/components/mixins/SubscriptionsMixin.ts
+++ b/src/components/mixins/SubscriptionsMixin.ts
@@ -9,7 +9,7 @@ export default class SubscriptionsMixin extends Mixins(mixins.LoadingMixin) {
   @getter.settings.nodeIsConnected nodeIsConnected!: boolean;
 
   startSubscriptionsList: Array<AsyncFnWithoutArgs> = [];
-  resetSubscriptionsList: Array<AsyncFnWithoutArgs> = [];
+  resetSubscriptionsList: Array<FnWithoutArgs> = [];
 
   @Watch('isLoggedIn')
   @Watch('nodeIsConnected')
@@ -37,7 +37,7 @@ export default class SubscriptionsMixin extends Mixins(mixins.LoadingMixin) {
     this.startSubscriptionsList = list;
   }
 
-  public setResetSubscriptions(list: AsyncFnWithoutArgs[]) {
+  public setResetSubscriptions(list: FnWithoutArgs[]) {
     this.resetSubscriptionsList = list;
   }
 
diff --git a/src/views/Explore/Demeter.vue b/src/views/Explore/Demeter.vue
index 22d2c1772..7aee511d9 100644
--- a/src/views/Explore/Demeter.vue
+++ b/src/views/Explore/Demeter.vue
@@ -243,7 +243,8 @@ export default class ExploreDemeter extends Mixins(ExplorePageMixin, DemeterBase
   get items(): DemeterPool[] {
     return Object.values(this.pools)
       .map((poolMap) => Object.values(poolMap))
-      .flat(2) as DemeterPool[];
+      .flat(2)
+      .filter((pool) => !pool.isRemoved) as DemeterPool[];
   }
 
   get selectedDerivedPool(): Nullable<DemeterPoolDerivedData> {
diff --git a/src/views/Swap.vue b/src/views/Swap.vue
index 59872a100..15de1027d 100644
--- a/src/views/Swap.vue
+++ b/src/views/Swap.vue
@@ -118,7 +118,7 @@
       />
       <settings-dialog :visible.sync="showSettings" />
     </s-form>
-    <swap-chart v-if="chartsEnabled" />
+    <swap-chart v-if="chartsEnabled" :token-from="tokenFrom" :token-to="tokenTo" :is-available="isAvailable" />
   </div>
 </template>
 

From 32bb1eb0749deb5e29f25a67a8e0a85a881f7b9f Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Mon, 19 Dec 2022 18:00:36 +0300
Subject: [PATCH 15/16] fix multiple chart requests after switching tokens

---
 src/components/Swap/Chart.vue | 38 ++++++++++++++++++-----------------
 src/views/Swap.vue            | 10 ++++-----
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/components/Swap/Chart.vue b/src/components/Swap/Chart.vue
index 92c5c67ab..48b8ddf96 100644
--- a/src/components/Swap/Chart.vue
+++ b/src/components/Swap/Chart.vue
@@ -298,7 +298,7 @@ export default class SwapChart extends Mixins(
 
   updatePrices = debouncedInputHandler(this.getHistoricalPrices, 250, { leading: false });
   private forceUpdatePrices = debouncedInputHandler(this.resetAndUpdatePrices, 250, { leading: false });
-
+  private priceUpdateRequestId = 0;
   private priceUpdateWatcher: Nullable<FnWithoutArgs> = null;
   private priceUpdateTimestampSync: Nullable<NodeJS.Timer | number> = null;
 
@@ -725,7 +725,7 @@ export default class SwapChart extends Mixins(
     return Math.max(this.getPrecision(min), this.getPrecision(max));
   }
 
-  private getHistoricalPrices(resetChartData = false): void {
+  private async getHistoricalPrices(resetChartData = false): Promise<void> {
     if (resetChartData) {
       this.clearData();
     } else if (this.loading || this.isAllHistoricalPricesFetched(this.pageInfos)) {
@@ -736,26 +736,28 @@ export default class SwapChart extends Mixins(
     if (this.tokensAddresses.length === 2 && !this.isAvailable) return;
 
     const addresses = [...this.tokensAddresses];
+    const requestId = Date.now();
 
-    this.withApi(async () => {
-      await this.withLoading(async () => {
-        try {
-          const response = await this.getChartData(addresses, this.selectedFilter, this.pageInfos);
+    this.priceUpdateRequestId = requestId;
 
-          // if no response, or tokens were changed, return
-          if (!response || !isEqual(addresses)(this.tokensAddresses)) return;
+    await this.withApi(async () => {
+      try {
+        const response = await this.getChartData(addresses, this.selectedFilter, this.pageInfos);
 
-          this.limits = response.limits;
-          this.pageInfos = response.pageInfos;
-          this.precision = response.precision;
-          this.prices = [...this.prices, ...response.prices];
+        // if no response, or tokens were changed, return
+        if (!(response && isEqual(addresses)(this.tokensAddresses) && isEqual(requestId)(this.priceUpdateRequestId)))
+          return;
 
-          this.isFetchingError = false;
-        } catch (error) {
-          this.isFetchingError = true;
-          console.error(error);
-        }
-      });
+        this.limits = response.limits;
+        this.pageInfos = response.pageInfos;
+        this.precision = response.precision;
+        this.prices = [...this.prices, ...response.prices];
+
+        this.isFetchingError = false;
+      } catch (error) {
+        this.isFetchingError = true;
+        console.error(error);
+      }
     });
   }
 
diff --git a/src/views/Swap.vue b/src/views/Swap.vue
index 15de1027d..fa9815306 100644
--- a/src/views/Swap.vue
+++ b/src/views/Swap.vue
@@ -153,7 +153,7 @@ import {
   debouncedInputHandler,
 } from '@/utils';
 import router, { lazyComponent } from '@/router';
-import { Components, MarketAlgorithms, PageNames } from '@/consts';
+import { Components, MarketAlgorithms, PageNames, ZeroStringValue } from '@/consts';
 import { action, getter, mutation, state } from '@/store/decorators';
 
 @Component({
@@ -263,13 +263,13 @@ export default class Swap extends Mixins(
   }
 
   get fromFiatAmount(): string {
-    if (!this.tokenFrom) return '0';
-    return this.fromValue ? this.getFiatAmountByString(this.fromValue, this.tokenFrom) || '0' : '0';
+    if (!(this.tokenFrom && this.fromValue)) return ZeroStringValue;
+    return this.getFiatAmountByString(this.fromValue, this.tokenFrom) || ZeroStringValue;
   }
 
   get toFiatAmount(): string {
-    if (!this.tokenTo) return '0';
-    return this.toValue ? this.getFiatAmountByString(this.toValue, this.tokenTo) || '0' : '0';
+    if (!(this.tokenTo && this.toValue)) return ZeroStringValue;
+    return this.getFiatAmountByString(this.toValue, this.tokenTo) || ZeroStringValue;
   }
 
   get fiatDifference(): string {

From 6ec1b30f665c0bd506e3f8785c971412784a9f33 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Tue, 20 Dec 2022 20:05:25 +0300
Subject: [PATCH 16/16] fix types

---
 src/modules/demeterFarming/mixins/PoolStatusMixin.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/demeterFarming/mixins/PoolStatusMixin.ts b/src/modules/demeterFarming/mixins/PoolStatusMixin.ts
index 0f591a96a..8a3b64a8b 100644
--- a/src/modules/demeterFarming/mixins/PoolStatusMixin.ts
+++ b/src/modules/demeterFarming/mixins/PoolStatusMixin.ts
@@ -11,7 +11,7 @@ import type { DemeterAsset } from '@/modules/demeterFarming/types';
 
 @Component
 export default class PoolStatusMixin extends Mixins(mixins.FormattedAmountMixin, mixins.TranslationMixin) {
-  @Prop({ default: () => null, type: Object }) readonly liquidity!: AccountLiquidity;
+  @Prop({ default: () => null, type: Object }) readonly liquidity!: Nullable<AccountLiquidity>;
   @Prop({ default: () => null, type: Object }) readonly pool!: DemeterPool;
   @Prop({ default: () => null, type: Object }) readonly accountPool!: DemeterAccountPool;
   @Prop({ default: () => null, type: Object }) readonly poolAsset!: DemeterAsset;
@@ -58,7 +58,7 @@ export default class PoolStatusMixin extends Mixins(mixins.FormattedAmountMixin,
     return !this.activeStatus || this.availableFunds.isZero();
   }
 
-  get emitParams(): object {
+  get emitParams() {
     return {
       baseAsset: this.pool.baseAsset,
       poolAsset: this.pool.poolAsset,