dApp staking v3

.eslintignore

@@ -7,5 +7,6 @@
 .eslintrc.js
 babel.config.js
 /src-ssr
+/src-pwa
 /tests/polkadot_wallet
 /tests/metamask_wallet

.gitignore

@@ -47,5 +47,8 @@ zombienet-macos
 polkadot
 astar-collator
 
+# Temp folder
+*temp
+
 # Chopstick binaries
-db.sqlite*
+db.sqlite*

package.json

@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@astar-network/astar-sdk-core": "^0.2.8",
-    "@astar-network/astar-ui": "^0.0.136",
+    "@astar-network/astar-ui": "^0.0.137",
     "@astar-network/metamask-astar-adapter": "^0.5.4",
     "@astar-network/metamask-astar-types": "^0.6.1",
     "@ethersproject/bignumber": "^5.5.0",

src/App.vue

@@ -40,7 +40,7 @@
 // https://polkadot.js.org/docs/api/FAQ/#since-upgrading-to-the-7x-series-typescript-augmentation-is-missing
 import 'reflect-metadata';
 import '@polkadot/api-augment';
-import { defineComponent, computed, ref, watch } from 'vue';
+import { defineComponent, computed, ref, watch, onMounted } from 'vue';
 import DashboardLayout from 'layouts/DashboardLayout.vue';
 import { useStore } from 'src/store';
 import ModalLoading from 'components/common/ModalLoading.vue';
@@ -61,6 +61,13 @@ import { container } from 'src/v2/common';
 import { Symbols } from 'src/v2/symbols';
 import { useAccount, useAppRouter } from 'src/hooks';
 import { LOCAL_STORAGE } from 'src/config/localStorage';
+import {
+  AccountLedgerChangedMessage,
+  IDappStakingService,
+  ProtocolStateChangedMessage,
+} from './staking-v3';
+import { useDappStaking, useDapps } from './staking-v3/hooks';
+import { IDappStakingRepository as IDappStakingRepositoryV3 } from 'src/staking-v3/logic/repositories';
 
 export default defineComponent({
   name: 'App',
@@ -75,7 +82,18 @@ export default defineComponent({
   setup() {
     useAppRouter();
     const store = useStore();
-    const { currentAccountName } = useAccount();
+    const { currentAccountName, currentAccount } = useAccount();
+    const {
+      protocolState,
+      getAllRewards,
+      getCurrentEraInfo,
+      getDappTiers,
+      fetchStakerInfoToStore,
+      fetchTiersConfigurationToStore,
+      fetchEraLengthsToStore,
+      isDappStakingV3,
+    } = useDappStaking();
+    const { fetchStakeAmountsToStore, fetchDappsToStore } = useDapps();
 
     const isLoading = computed(() => store.getters['general/isLoading']);
     const showAlert = computed(() => store.getters['general/showAlert']);
@@ -94,7 +112,7 @@ export default defineComponent({
       showDisclaimerModal.value = isOpen;
     };
 
-    // Handle busy and extrisnsic call status messages.
+    // Handle busy and extrinsic call status messages.
     const eventAggregator = container.get<IEventAggregator>(Symbols.EventAggregator);
     eventAggregator.subscribe(ExtrinsicStatusMessage.name, (m) => {
       const message = m as ExtrinsicStatusMessage;
@@ -124,9 +142,65 @@ export default defineComponent({
       store.commit('dapps/setCurrentEra', message.era, { root: true });
     });
 
+    // **** dApp staking v3
+    // dApp staking v3 data changed subscriptions.
+    onMounted(() => {
+      if (isDappStakingV3.value) {
+        container
+          .get<IDappStakingRepositoryV3>(Symbols.DappStakingRepositoryV3)
+          .startProtocolStateSubscription();
+      }
+    });
+
+    eventAggregator.subscribe(ProtocolStateChangedMessage.name, async (m) => {
+      const message = m as ProtocolStateChangedMessage;
+
+      if (message.state) {
+        console.log('protocol state', message.state);
+        store.commit('stakingV3/setProtocolState', message.state, { root: true });
+        await fetchDappsToStore();
+        await Promise.all([
+          getAllRewards(),
+          getCurrentEraInfo(),
+          getDappTiers(message.state.era - 1),
+          fetchStakeAmountsToStore(),
+          fetchStakerInfoToStore(),
+          fetchEraLengthsToStore(),
+        ]);
+      }
+    });
+
+    eventAggregator.subscribe(AccountLedgerChangedMessage.name, (m) => {
+      const message = m as AccountLedgerChangedMessage;
+      if (message.ledger) {
+        store.commit('stakingV3/setLedger', message.ledger, { root: true });
+        console.log('ledger', message.ledger);
+      }
+    });
+    // **** end dApp staking v3
+
     // Handle wallet change so we can inject proper wallet
-    watch([isEthWallet, currentWallet, isH160, currentAccountName], () => {
+    let previousAddress: string | undefined = undefined;
+    watch([isEthWallet, currentWallet, isH160, currentAccountName], async () => {
       setCurrentWallet(isEthWallet.value, currentWallet.value);
+
+      // Subscribe to an account specific dApp staking v3 data.
+      if (!isDappStakingV3.value) return;
+
+      // Memo: Can't use senderSs58Account here because unified account is not stored to vuex yet
+      // and senderSs58Account contains evm mapped address which is incorrect for unified account.
+      if (currentAccount.value && currentAccount.value !== previousAddress) {
+        const stakingService = container.get<() => IDappStakingService>(
+          Symbols.DappStakingServiceFactoryV3
+        )();
+        await stakingService.startAccountLedgerSubscription(currentAccount.value);
+        fetchStakerInfoToStore();
+        getAllRewards();
+        fetchTiersConfigurationToStore();
+        getDappTiers((protocolState.value?.era ?? 0) - 1);
+
+        previousAddress = currentAccount.value;
+      }
     });
 
     const removeSplashScreen = () => {

src/components/assets/Assets.vue

@@ -10,14 +10,25 @@
           :is-loading-xcm-assets-amount="isLoadingXcmAssetsAmount"
         />
 
-        <div v-if="!isLoading" class="container">
+        <template v-if="isDappStakingV3">
+          <your-project />
+        </template>
+        <template v-if="isDappStakingV3">
+          <staking />
+        </template>
+
+        <div v-if="!isLoading">
           <div v-if="isH160">
-            <evm-asset-list :tokens="evmAssets.assets" />
+            <evm-asset-list :tokens="evmAssets.assets" class="container" />
           </div>
           <div v-else>
             <!-- Memo: hide xvm panel because AA might replace it -->
             <!-- <xvm-native-asset-list v-if="isSupportXvmTransfer" :xvm-assets="xvmAssets.xvmAssets" /> -->
-            <xcm-native-asset-list v-if="isEnableXcm" :xcm-assets="xcmAssets.assets" />
+            <xcm-native-asset-list
+              v-if="isEnableXcm"
+              :xcm-assets="xcmAssets.assets"
+              class="container"
+            />
           </div>
         </div>
       </div>
@@ -30,19 +41,22 @@
   </div>
 </template>
 <script lang="ts">
+import { isValidEvmAddress } from '@astar-network/astar-sdk-core';
 import Account from 'src/components/assets/Account.vue';
 import SideAds from 'src/components/assets/SideAds.vue';
 import AstarDomains from 'src/components/header/mobile/AstarDomains.vue';
 import EvmAssetList from 'src/components/assets/EvmAssetList.vue';
 import XcmNativeAssetList from 'src/components/assets/XcmNativeAssetList.vue';
+import YourProject from 'src/components/assets/YourProject.vue';
 import { providerEndpoints } from 'src/config/chainEndpoints';
 import { LOCAL_STORAGE } from 'src/config/localStorage';
-import { isValidEvmAddress } from '@astar-network/astar-sdk-core';
 import { useAccount, useBalance, useDispatchGetDapps, useNetworkInfo } from 'src/hooks';
+import { useDappStaking } from 'src/staking-v3';
 import { useStore } from 'src/store';
 import { EvmAssets, XcmAssets, XvmAssets } from 'src/store/assets/state';
 import { Asset } from 'src/v2/models';
-import { computed, defineComponent, ref, watch, watchEffect, onUnmounted } from 'vue';
+import { computed, defineComponent, onUnmounted, ref, watch, watchEffect } from 'vue';
+import Staking from 'src/staking-v3/components/my-staking/Staking.vue';
 
 export default defineComponent({
   components: {
@@ -51,14 +65,18 @@ export default defineComponent({
     AstarDomains,
     EvmAssetList,
     XcmNativeAssetList,
+    YourProject,
+    Staking,
   },
   setup() {
     const token = ref<Asset | null>(null);
     const isModalXcmBridge = ref<boolean>(false);
     const isModalXcmTransfer = ref<boolean>(false);
+    const { isDappStakingV3 } = useDappStaking();
 
     const store = useStore();
     const { currentAccount } = useAccount();
+
     const { accountData } = useBalance(currentAccount);
     const { isMainnet, currentNetworkIdx, evmNetworkIdx, isZkEvm } = useNetworkInfo();
     // Memo: load the dApps data in advance, so that users can access to dApp staging page smoothly
@@ -184,6 +202,7 @@ export default defineComponent({
       isModalXcmBridge,
       isLoading,
       bg,
+      isDappStakingV3,
     };
   },
 });

src/components/assets/Erc20Currency.vue

@@ -136,20 +136,19 @@
   </div>
 </template>
 <script lang="ts">
-import TokenBalance from 'src/components/common/TokenBalance.vue';
 import { LOCAL_STORAGE } from 'src/config/localStorage';
 import { SupportWallet } from 'src/config/wallets';
-import { useNetworkInfo, useBreakpoints } from 'src/hooks';
+import { useBreakpoints, useNetworkInfo } from 'src/hooks';
 import { addToEvmProvider, getEvmProvider } from 'src/hooks/helper/wallet';
 import {
-  deleteImportedErc20Token,
   Erc20Token,
+  deleteImportedErc20Token,
   getErc20Explorer,
   getStoredERC20Tokens,
 } from 'src/modules/token';
-import { buildTransferPageLink, buildEthereumBridgePageLink } from 'src/router/routes';
+import { buildEthereumBridgePageLink, buildTransferPageLink } from 'src/router/routes';
 import { useStore } from 'src/store';
-import { computed, defineComponent, PropType, ref } from 'vue';
+import { PropType, computed, defineComponent, ref } from 'vue';
 import Jazzicon from 'vue3-jazzicon/src/components';
 import { truncate } from '@astar-network/astar-sdk-core';
 

src/components/assets/Rewards.vue

@@ -1,21 +1,19 @@
 <template>
-  <div>
-    <button v-if="!isDappDeveloper" class="wrapper--rewards" @click="handleClaim">
-      <div class="container--rewards">
-        <div class="text--title">
-          {{ $t('assets.yourEstimatedRewards') }}
-        </div>
-        <div class="row--data">
-          <div class="value">
-            <div>
-              <span class="text--amount">{{ $n(pendingRewards || 0) }}</span>
-              <span class="text--symbol">{{ nativeTokenSymbol }}</span>
-            </div>
+  <button v-if="!isDappDeveloper" class="wrapper--rewards" @click="handleClaim">
+    <div class="container--rewards">
+      <div class="text--title">
+        {{ $t('assets.yourEstimatedRewards') }}
+      </div>
+      <div class="row--data">
+        <div class="value">
+          <div>
+            <span class="text--amount">{{ $n(pendingRewards || 0) }}</span>
+            <span class="text--symbol">{{ nativeTokenSymbol }}</span>
           </div>
         </div>
       </div>
-    </button>
-  </div>
+    </div>
+  </button>
 </template>
 
 <script lang="ts">

src/components/assets/YourProject.vue

@@ -0,0 +1,49 @@
+<template>
+  <div v-if="ownDapps.length > 0" class="container">
+    <div class="wrapper--your-project">
+      <div class="row--title">
+        <astar-icon-project />
+        <span class="text--title">{{ $t('assets.yourProject') }}</span>
+      </div>
+      <div class="separator" />
+      <div class="box--dapps">
+        <router-link
+          v-for="dapp in ownDapps"
+          :key="dapp.basic.address"
+          :to="navigateOwnerPage(dapp.basic.address)"
+          class="card--dapp"
+        >
+          <img class="icon--dapp-logo" :src="dapp.basic.iconUrl" :alt="dapp.basic.name" />
+          <div>
+            <span>{{ dapp.basic.name }}</span>
+          </div>
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { useAccount, useClaimAll } from 'src/hooks';
+import { CombinedDappInfo, useDappStakingNavigation, useDapps } from 'src/staking-v3';
+import { computed, defineComponent } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const { currentAccount } = useAccount();
+    useClaimAll();
+    const { allDapps } = useDapps();
+    const { navigateOwnerPage } = useDappStakingNavigation();
+    const ownDapps = computed<CombinedDappInfo[]>(() => {
+      if (!allDapps.value) return [];
+      return allDapps.value.filter((dapp) => dapp.chain.owner === currentAccount.value);
+    });
+
+    return { ownDapps, navigateOwnerPage };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use 'src/components/assets/styles/your-project.scss';
+</style>

src/components/assets/styles/account.scss

@@ -4,6 +4,10 @@
   display: flex;
   flex-direction: column;
   gap: 32px;
+  margin-top: -36px;
+  @media (min-width: $lg) {
+    margin-top: 0;
+  }
 }
 
 .row--details-signatory {
@@ -60,8 +64,6 @@
   img {
     width: 32px;
     height: 32px;
-    // object-fit: cover;
-    // border-radius: 9999px;
   }
 }
 
@@ -218,7 +220,7 @@
   background-color: white;
   padding: 16px;
   min-height: 180px;
-  @media (min-width: $sm) {
+  @media (min-width: $lg) {
     border-radius: 16px;
     margin: 0;
   }
@@ -270,7 +272,7 @@
       color: white;
       background: linear-gradient(270deg, #6c6c6c 25%, #b7b7b7 100%);
     }
-    &:not(.active){
+    &:not(.active) {
       cursor: pointer;
     }
   }
@@ -330,7 +332,7 @@
         }
       }
     }
-  }  
+  }
 }
 
 .row--account-rewards {