Feat/dapp staking v3 (#1068)

* feat: link to the project page (#1049)

* feat: link to the project page

* fix: display dapp data

* fix: clean up

* fix: clean up

* fix: clean up

* styles: added 'current tier' and 'total earned' (#1053)

* pulled latest main branch (#1057)

* merge the `release-hotfix` to `main` branch (#1025)

* fix: enables Snap on the production (#1024)

* Add a link to the docs (#1027)

* fix: words (#1028)

* fix: display the staking list for EVM accounts (#1030)

---------

Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com>

* dApp fetching optimization (#1041)

* dApp fetching optimization

* An additional tiny optimization

* Update assets page layout (#956)

* Update assets page layout

* style update

* clean up

* replace transfer button to icon

* Align icon buttons on the right side

* Add navy-4 colour

* Update text color from default black to navy-1

* align token balance positions

* Adjust breakpoint for account section

* fix pointer events depends on screen size

* use i18n

* update asset search style

* Add faucet icon

* align token balance

* add reward animation

* remove static texts from account section

* Update AstarUI and replace icons

* remove claim button from reward section

* fix rewards section

* fix background image

* set max width

* update styles

* update delete button style

* move reward button next to account info

* Header style update

* update header color

* Add border color variation

* update to simple style

* remove old background image

* fix account icon size

* update sidebar size

* add border color for zKatana

* Update header icon styles

* update

* update style

* add icons

* Ads

* remove dynamic links

* update asset page style

* adjust border thickness 3px

* add background images

* add accout background

* update evm native token section style

* add ads style

* asset page wrapper space

* update header style

* add mobile nav

* Update styles

* add side ad area

* update Erx20Currency

* update account bg

* Add Rewards section

* Add rewards style

* update mobile nav

* update rewards style

* add mobile nav

* hide expand icon for mobile

* remove duplicated transfable

* display none

* revert

* Add assets list icon

* change-dark-bk

* add claim function

* fix mobile nav scroll

* update styles

* Remove transferable and comment out e2e test

* replace rewards section div to button

* add-account-images

* add shiden and testnet background

* Add transfer button for shibuya

* update native asset list style

* fix: updated rewards UI on the assets page (#1042)

* fix: fetch estimated rewards

* fix: updated rewards UI on the assets page

* fix: clean up

* fix: do not allow to select ZK network if the portal connects to native wallet

* fix: display background when the app is claiming rewards (#1045)

* fix: E2E test for new assets page  (#1044)

* fix: E2E test

* fix: E2E test (2)

* fix: remove --debug from 'playwright' command

* fix: include vesting amount in locked tokens (#1043)

* amend-style (#1047)

* fix: clean up

* fix: clean up

* use i18n

* clean up

* replace numers to endpointKey enum

* replace svg icons to astar ui

---------

Co-authored-by: Kahori Razzell <kahorirazzell@Kahoris-MacBook-Pro.local>
Co-authored-by: kahonnohak <kahon.nohak@gmail.com>
Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>
Co-authored-by: impelcrypto <impelcrypto@gmail.com>
Co-authored-by: Kahori <77480847+Kahonnohak@users.noreply.github.com>

* fix-styling (#1054)

* merge 'release-hotfix' to 'main' (#1052)

* fix: enables Snap on the production (#1024)

* Add a link to the docs (#1027)

* fix: words (#1028)

* fix: display the staking list for EVM accounts (#1030)

* Ignore gas station (#1050)

* Ignore gas station

* Turned off Gas station everywhere

* Ignore another one gas station call

---------

Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com>
Co-authored-by: Bobo <bobo.kovacevic@gmail.com>

* fix: resolved new assets page bugs (#1055)

* fix: close the modal after claiming EVM withdrawal

* fix: close the modal after claiming EVM withdrawal (2)

* fix: ModalVesting.vue

* fix: link to subscan for WASM projects

* feat: added Reserved section

* feat: added Reserved section (2)

* fix: words

* fix: refactor

---------

Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com>
Co-authored-by: Bobo <bobo.kovacevic@gmail.com>
Co-authored-by: Kahori Razzell <kahorirazzell@Kahoris-MacBook-Pro.local>
Co-authored-by: kahonnohak <kahon.nohak@gmail.com>
Co-authored-by: Kahori <77480847+Kahonnohak@users.noreply.github.com>

* Staking panels and leaderboard (#1056)

* Get contract stake

* Initial leaderboard version

* voting call refactoring

* Tier rewards updates

* Leaderboard rendering fix

* My staking components

* Staking components logic done

* Re-lock unlocking chunks

* Unbonding modal

* Bonus rewards calculation bug fix

* Minor navigation refactoring

* Display total stake

* PropType fix

* Total stake calculation fix

* feat: added owner section on the assets page (#1059)

* merge the `release-hotfix` to `main` branch (#1025)

* fix: enables Snap on the production (#1024)

* Add a link to the docs (#1027)

* fix: words (#1028)

* fix: display the staking list for EVM accounts (#1030)

---------

Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com>

* dApp fetching optimization (#1041)

* dApp fetching optimization

* An additional tiny optimization

* Update assets page layout (#956)

* Update assets page layout

* style update

* clean up

* replace transfer button to icon

* Align icon buttons on the right side

* Add navy-4 colour

* Update text color from default black to navy-1

* align token balance positions

* Adjust breakpoint for account section

* fix pointer events depends on screen size

* use i18n

* update asset search style

* Add faucet icon

* align token balance

* add reward animation

* remove static texts from account section

* Update AstarUI and replace icons

* remove claim button from reward section

* fix rewards section

* fix background image

* set max width

* update styles

* update delete button style

* move reward button next to account info

* Header style update

* update header color

* Add border color variation

* update to simple style

* remove old background image

* fix account icon size

* update sidebar size

* add border color for zKatana

* Update header icon styles

* update

* update style

* add icons

* Ads

* remove dynamic links

* update asset page style

* adjust border thickness 3px

* add background images

* add accout background

* update evm native token section style

* add ads style

* asset page wrapper space

* update header style

* add mobile nav

* Update styles

* add side ad area

* update Erx20Currency

* update account bg

* Add Rewards section

* Add rewards style

* update mobile nav

* update rewards style

* add mobile nav

* hide expand icon for mobile

* remove duplicated transfable

* display none

* revert

* Add assets list icon

* change-dark-bk

* add claim function

* fix mobile nav scroll

* update styles

* Remove transferable and comment out e2e test

* replace rewards section div to button

* add-account-images

* add shiden and testnet background

* Add transfer button for shibuya

* update native asset list style

* fix: updated rewards UI on the assets page (#1042)

* fix: fetch estimated rewards

* fix: updated rewards UI on the assets page

* fix: clean up

* fix: do not allow to select ZK network if the portal connects to native wallet

* fix: display background when the app is claiming rewards (#1045)

* fix: E2E test for new assets page  (#1044)

* fix: E2E test

* fix: E2E test (2)

* fix: remove --debug from 'playwright' command

* fix: include vesting amount in locked tokens (#1043)

* amend-style (#1047)

* fix: clean up

* fix: clean up

* use i18n

* clean up

* replace numers to endpointKey enum

* replace svg icons to astar ui

---------

Co-authored-by: Kahori Razzell <kahorirazzell@Kahoris-MacBook-Pro.local>
Co-authored-by: kahonnohak <kahon.nohak@gmail.com>
Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>
Co-authored-by: impelcrypto <impelcrypto@gmail.com>
Co-authored-by: Kahori <77480847+Kahonnohak@users.noreply.github.com>

* fix-styling (#1054)

* merge 'release-hotfix' to 'main' (#1052)

* fix: enables Snap on the production (#1024)

* Add a link to the docs (#1027)

* fix: words (#1028)

* fix: display the staking list for EVM accounts (#1030)

* Ignore gas station (#1050)

* Ignore gas station

* Turned off Gas station everywhere

* Ignore another one gas station call

---------

Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com>
Co-authored-by: Bobo <bobo.kovacevic@gmail.com>

* fix: resolved new assets page bugs (#1055)

* fix: close the modal after claiming EVM withdrawal

* fix: close the modal after claiming EVM withdrawal (2)

* fix: ModalVesting.vue

* fix: link to subscan for WASM projects

* feat: added Reserved section

* feat: added Reserved section (2)

* fix: words

* fix: refactor

* fix: display the amount of estimated rewards for Shibuya (#1058)

* feat: added owner page

* feat: added your-project section

* feat: resolve errors when the app connected to Astar

* feat: resolve errors when the app connected to Astar (2)

* feat: updated owner section

* fix: clean up

* fix: link to the owner page

---------

Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com>
Co-authored-by: Bobo <bobo.kovacevic@gmail.com>
Co-authored-by: Kahori Razzell <kahorirazzell@Kahoris-MacBook-Pro.local>
Co-authored-by: kahonnohak <kahon.nohak@gmail.com>
Co-authored-by: Kahori <77480847+Kahonnohak@users.noreply.github.com>

---------

Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>
Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com>
Co-authored-by: Bobo <bobo.kovacevic@gmail.com>
Co-authored-by: Kahori Razzell <kahorirazzell@Kahoris-MacBook-Pro.local>
Co-authored-by: kahonnohak <kahon.nohak@gmail.com>
Co-authored-by: Kahori <77480847+Kahonnohak@users.noreply.github.com>

.gitignore

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

package.json

@@ -21,14 +21,14 @@
     "heroku-postbuild": "yarn install && yarn build",
     "heroku-deploy": "git push heroku main",
     "playwright:codegen": "npx playwright codegen http://localhost:8080",
-    "playwright": "BASE_URL='http://localhost:8080' ENDPOINT='ws://127.0.0.1:9944' npx playwright test --project=chromium --debug",
+    "playwright": "BASE_URL='http://localhost:8080' ENDPOINT='ws://127.0.0.1:9944' npx playwright test --project=chromium",
     "playwright:ci": "node ./tests/chopsticks/start-chopsticks.js",
     "generate:meta": "node ./node_modules/.bin/polkadot-types-from-chain --package sample-polkadotjs-typegen/interfaces/ --endpoint ./src/staking-v3/logic/astar.json --output ./src/staking-v3/logic/interfaces/temp",
     "generate:defs": "node ./node_modules/.bin/polkadot-types-from-defs --package sample-polkadotjs-typegen/interfaces/ --input ./src/staking-v3/logic/interfaces/temp --endpoint ./src/staking-v3/logic/astar.json"
   },
   "dependencies": {
-    "@astar-network/astar-sdk-core": "^0.2.5",
-    "@astar-network/astar-ui": "^0.0.104",
+    "@astar-network/astar-sdk-core": "^0.2.7",
+    "@astar-network/astar-ui": "^0.0.136",
     "@astar-network/metamask-astar-adapter": "^0.5.4",
     "@astar-network/metamask-astar-types": "^0.6.1",
     "@ethersproject/bignumber": "^5.5.0",

src/App.vue

@@ -63,15 +63,12 @@ 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 { ETHEREUM_EXTENSION } from 'src/hooks';
 import {
   AccountLedgerChangedMessage,
   IDappStakingRepository,
-  IDappStakingService,
   ProtocolStateChangedMessage,
-  StakerInfoChangedMessage,
 } from './staking-v3';
-import { useDappStaking } from './staking-v3/hooks';
+import { useDappStaking, useDapps } from './staking-v3/hooks';
 
 export default defineComponent({
   name: 'App',
@@ -88,7 +85,14 @@ export default defineComponent({
     useAppRouter();
     const store = useStore();
     const { currentAccountName, currentAccount } = useAccount();
-    const { getAllRewards, getCurrentEraInfo, getDappTiers } = useDappStaking();
+    const {
+      getAllRewards,
+      getCurrentEraInfo,
+      getDappTiers,
+      fetchStakerInfoToStore,
+      isDappStakingV3,
+    } = useDappStaking();
+    const { fetchStakeAmountsToStore } = useDapps();
 
     const isLoading = computed(() => store.getters['general/isLoading']);
     const showAlert = computed(() => store.getters['general/showAlert']);
@@ -107,7 +111,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;
@@ -140,6 +144,7 @@ export default defineComponent({
     // **** dApp staking v3
 
     eventAggregator.subscribe(ProtocolStateChangedMessage.name, async (m) => {
+      if (!isDappStakingV3.value) return;
       const message = m as ProtocolStateChangedMessage;
       store.commit('stakingV3/setProtocolState', message.state, { root: true });
 
@@ -148,20 +153,18 @@ export default defineComponent({
         getAllRewards(),
         getCurrentEraInfo(),
         getDappTiers(message.state.era - 1),
+        fetchStakeAmountsToStore(),
+        fetchStakerInfoToStore(),
       ]);
     });
 
     eventAggregator.subscribe(AccountLedgerChangedMessage.name, (m) => {
+      if (!isDappStakingV3.value) return;
       const message = m as AccountLedgerChangedMessage;
       store.commit('stakingV3/setLedger', message.ledger, { root: true });
       console.log('ledger', message.ledger);
     });
 
-    eventAggregator.subscribe(StakerInfoChangedMessage.name, (m) => {
-      const message = m as StakerInfoChangedMessage;
-      store.commit('stakingV3/setStakerInfo', message.stakerInfo, { root: true });
-    });
-
     // **** end dApp staking v3
 
     // Handle wallet change so we can inject proper wallet
@@ -170,14 +173,13 @@ export default defineComponent({
       setCurrentWallet(isEthWallet.value, currentWallet.value);
 
       // Subscribe to an account specific dApp staking v3 data.
+      if (!isDappStakingV3.value) return;
       if (currentAccount.value && currentAccount.value !== previousAddress) {
         container
           .get<IDappStakingRepository>(Symbols.DappStakingRepositoryV3)
           .startAccountLedgerSubscription(currentAccount.value);
-
-        container
-          .get<IDappStakingRepository>(Symbols.DappStakingRepositoryV3)
-          .startGetStakerInfoSubscription(currentAccount.value);
+        fetchStakerInfoToStore();
+        getAllRewards();
 
         previousAddress = currentAccount.value;
       }