Feature/pw 679 (#705)

* create demeter store * add PoolStatusBadge component * wip pool card * show/hide badge in title * update translations & info lines * add dialog templates * stake dialog content * fix percent css * fix ts error * subscriptions examples * update store * claim dialog wip * add AccountPoolMixin * buttons texts * add claim rewards action * fix claim handler * add staking route * wip Staking page * connect wallet on card * add PageMixin * refactoring common methods * add staking actions * add DemeterDataContainer * new folder structure * remove liqudity calculations * add APR for staking * fix apr formula * add liquidty apr * update calc * refactoring params * hide removed inactive pools * fix calculations after * add float input for stake * add fiat amounts to stake dialog * refactoring balance * fix pool share after * update translation keys * fix some translations, max button visibility * update removeLiquidity * update messages * update translations * revert env.json * staking empty card * fix status-badge css * update icon & balance text * update badges * fix click on stopped pool badge * fix bugs * fixes after review
sora-xor · Jun 20, 2022 · 7f1d5ea · 7f1d5ea
1 parent d05aa79
commit 7f1d5ea
Show file tree

Hide file tree

Showing 39 changed files with 2,298 additions and 277 deletions.
diff --git a/public/env.json b/public/env.json
@@ -1,86 +1,86 @@
 {
-    "BASE_API_URL": "",
-    "API_KEYS": {
-        "moonpay": "pk_test_4ASGxHKGpLPE6sdQq1V3QjtpUFSpWLk",
-        "nftStorage": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDBmMzgwOTMyQTNDODM3ZDNiN2JEYzBBNTc0NmNkMDlBRGIyNUZGMzQiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY0MjU4OTQ2ODA4MSwibmFtZSI6Im5mdC1zdG9yYWdlLWRldiJ9.hkvzea9ltcriXXHKoYd3F2Iu1Y8X5H-zunAQboC_3vw",
-        "etherscan": "YBR7IWEBEXFICT8M7GRV77NBX4AXJ9T53H"
-    },
-    "FEATURE_FLAGS": {
-        "moonpay": true,
-        "charts": false
-    },
-    "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",
-            "name": "SORA",
-            "address": "wss://ws.framenode-1.s1.dev.sora2.soramitsu.co.jp"
-        },
-        {
-            "chain": "SORA-dev Testnet",
-            "name": "SORA",
-            "address": "wss://ws.framenode-2.s2.dev.sora2.soramitsu.co.jp"
-        },
-        {
-            "chain": "SORA-dev Testnet",
-            "name": "SORA",
-            "address": "wss://ws.framenode-3.s3.dev.sora2.soramitsu.co.jp"
-        },
-        {
-            "chain": "SORA-dev Testnet",
-            "name": "SORA",
-            "address": "wss://ws.framenode-4.s3.dev.sora2.soramitsu.co.jp"
-        },
-        {
-            "chain": "SORA-dev Testnet",
-            "name": "SORA",
-            "address": "wss://ws.framenode-5.s4.dev.sora2.soramitsu.co.jp"
-        },
-        {
-            "chain": "SORA-dev Testnet",
-            "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": "rinkeby",
-            "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": "",
+  "API_KEYS": {
+      "moonpay": "pk_test_4ASGxHKGpLPE6sdQq1V3QjtpUFSpWLk",
+      "nftStorage": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDBmMzgwOTMyQTNDODM3ZDNiN2JEYzBBNTc0NmNkMDlBRGIyNUZGMzQiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY0MjU4OTQ2ODA4MSwibmFtZSI6Im5mdC1zdG9yYWdlLWRldiJ9.hkvzea9ltcriXXHKoYd3F2Iu1Y8X5H-zunAQboC_3vw",
+      "etherscan": "YBR7IWEBEXFICT8M7GRV77NBX4AXJ9T53H"
+  },
+  "FEATURE_FLAGS": {
+      "moonpay": true,
+      "charts": false
+  },
+  "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",
+          "name": "SORA",
+          "address": "wss://ws.framenode-1.s1.dev.sora2.soramitsu.co.jp"
+      },
+      {
+          "chain": "SORA-dev Testnet",
+          "name": "SORA",
+          "address": "wss://ws.framenode-2.s2.dev.sora2.soramitsu.co.jp"
+      },
+      {
+          "chain": "SORA-dev Testnet",
+          "name": "SORA",
+          "address": "wss://ws.framenode-3.s3.dev.sora2.soramitsu.co.jp"
+      },
+      {
+          "chain": "SORA-dev Testnet",
+          "name": "SORA",
+          "address": "wss://ws.framenode-4.s3.dev.sora2.soramitsu.co.jp"
+      },
+      {
+          "chain": "SORA-dev Testnet",
+          "name": "SORA",
+          "address": "wss://ws.framenode-5.s4.dev.sora2.soramitsu.co.jp"
+      },
+      {
+          "chain": "SORA-dev Testnet",
+          "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": "rinkeby",
+          "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"
+              }
+          }
+      }
+  ]
 }
diff --git a/src/components/App/Menu/AppMenu.vue b/src/components/App/Menu/AppMenu.vue
@@ -72,6 +72,7 @@ import {
   PoolChildPages,
   BridgeChildPages,
   RewardsChildPages,
+  StakingChildPages,
   SidebarMenuGroups,
   FaucetLink,
   Components,
@@ -111,6 +112,9 @@ export default class AppMenu extends Mixins(TranslationMixin) {
     if (RewardsChildPages.includes(router.currentRoute.name as PageNames)) {
       return PageNames.Rewards;
     }
+    if (StakingChildPages.includes(router.currentRoute.name as any)) {
+      return PageNames.StakingContainer;
+    }
     return router.currentRoute.name as string;
   }
 

diff --git a/src/components/PairTokenLogo.vue b/src/components/PairTokenLogo.vue
@@ -61,4 +61,5 @@ export default class PairTokenLogo extends Mixins(TranslationMixin) {
 
 @include element-size('pair-logo--mini', 24px);
 @include element-size('pair-logo--small', 36px);
+@include element-size('pair-logo--medium', 44px);
 </style>
diff --git a/src/components/Pool/PoolInfo.vue b/src/components/Pool/PoolInfo.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="pool-info">
+    <slot name="prepend" />
+
+    <div class="pool-info-content">
+      <slot />
+    </div>
+
+    <div class="pool-info-buttons" v-if="$slots.buttons">
+      <slot name="buttons" />
+    </div>
+
+    <slot name="append" />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component
+export default class PoolInfo extends Vue {}
+</script>
+
+<style lang="scss">
+.pool-info {
+  & > *:not(:last-child) {
+    margin-bottom: $inner-spacing-medium;
+  }
+
+  &-buttons {
+    display: flex;
+    justify-content: center;
+
+    > * {
+      width: 100%;
+
+      &:not(:first-child),
+      &:not(:last-child) {
+        width: 50%;
+      }
+    }
+
+    .el-button + .el-button {
+      margin-left: $inner-spacing-small;
+    }
+  }
+}
+</style>
diff --git a/src/components/mixins/SubscriptionsMixin.ts b/src/components/mixins/SubscriptionsMixin.ts
@@ -0,0 +1,63 @@
+import { Component, Watch, Mixins } from 'vue-property-decorator';
+import { mixins } from '@soramitsu/soraneo-wallet-web';
+
+import { getter } from '@/store/decorators';
+
+@Component
+export default class SubscriptionsMixin extends Mixins(mixins.LoadingMixin) {
+  @getter.wallet.account.isLoggedIn isLoggedIn!: boolean;
+  @getter.settings.nodeIsConnected nodeIsConnected!: boolean;
+
+  startSubscriptionsList: AsyncVoidFn[] = [];
+  resetSubscriptionsList: AsyncVoidFn[] = [];
+
+  @Watch('isLoggedIn')
+  @Watch('nodeIsConnected')
+  private async restartSubscriptions(value: boolean) {
+    if (value) {
+      await this.updateSubscriptions();
+    } else {
+      await this.resetSubscriptions();
+    }
+  }
+
+  get subscriptionsDataLoading(): boolean {
+    return this.parentLoading || this.loading;
+  }
+
+  async mounted(): Promise<void> {
+    await this.updateSubscriptions();
+  }
+
+  async beforeDestroy(): Promise<void> {
+    await this.resetSubscriptions();
+  }
+
+  public setStartSubscriptions(list: AsyncVoidFn[]) {
+    this.startSubscriptionsList = list;
+  }
+
+  public setResetSubscriptions(list: AsyncVoidFn[]) {
+    this.resetSubscriptionsList = list;
+  }
+
+  /**
+   * Update subscriptions
+   * If this page is loaded first time by url, "watch" & "mounted" call this method
+   */
+  private async updateSubscriptions(): Promise<void> {
+    // return if updateSubscription is already called by "watch" or "mounted"
+    if (this.loading) return;
+
+    await this.withLoading(async () => {
+      // wait for node connection & wallet init (App.vue)
+      await this.withParentLoading(async () => {
+        await Promise.all(this.startSubscriptionsList.map((fn) => fn?.()));
+      });
+    });
+  }
+
+  private async resetSubscriptions(): Promise<void> {
+    await Promise.all(this.resetSubscriptionsList.map((fn) => fn?.()));
+  }
+}
diff --git a/src/consts/index.ts b/src/consts/index.ts
@@ -2,6 +2,8 @@ import invert from 'lodash/fp/invert';
 import { KnownAssets, KnownSymbols, XOR } from '@sora-substrate/util/build/assets/consts';
 import { LiquiditySourceTypes } from '@sora-substrate/liquidity-proxy/build/consts';
 
+import { DemeterPageNames } from '@/modules/demeterFarming/consts';
+
 import pkg from '../../package.json';
 import { KnownBridgeAsset } from '../utils/ethers-util';
 
@@ -129,6 +131,7 @@ export enum PageNames {
   BridgeTransactionsHistory = 'BridgeTransactionsHistory',
   Tokens = 'Tokens',
   MoonpayHistory = 'MoonpayHistory',
+  StakingContainer = 'StakingContainer',
 }
 
 export enum Components {
@@ -189,6 +192,8 @@ export enum Components {
   CreatePairTransactionDetails = 'TransactionDetails/CreatePairTransactionDetails',
   BridgeTransferNotification = 'Bridge/TransferNotification',
   MobilePopup = 'MobilePopup/MobilePopup',
+  // Pool
+  PoolInfo = 'Pool/PoolInfo',
 }
 
 export enum RewardsTabsItems {
@@ -215,14 +220,14 @@ const MainMenu: Array<SidebarMenuItem> = [
     icon: 'basic-drop-24',
     title: PageNames.Pool,
   },
+  {
+    icon: 'basic-layers-24',
+    title: PageNames.StakingContainer,
+  },
   {
     icon: 'grid-block-distribute-vertically-24',
     title: PageNames.Bridge,
   },
-  // {
-  //   icon: 'various-pocket-24',
-  //   title: PageNames.Auctions,
-  // },
 ];
 
 const AccountMenu: Array<SidebarMenuItem> = [
@@ -303,6 +308,8 @@ export const RewardsChildPages = [
   PageNames.ReferralUnbonding,
 ];
 
+export const StakingChildPages = [DemeterPageNames.Staking];
+
 export enum Topics {
   SwapTokens = 'SwapTokens',
   PassiveEarning = 'PassiveEarning',