fix: dApp staking kaizen (#1193)

* fix: added reference link to the error message * fix: switch network * feat: added rewards notification * fix: refactor * fix: refactor * fix: hide onboard modal
AstarNetwork · Feb 21, 2024 · dfeab9e · dfeab9e
1 parent 07d552c
commit dfeab9e
Show file tree

Hide file tree

Showing 12 changed files with 257 additions and 69 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -28,11 +28,11 @@
     </transition>
     <notification-stack />
 
-    <modal-onboarding
+    <!-- <modal-onboarding
       v-if="showOnboardingModal"
       :set-is-open="setShowOnboardingModal"
       :show="showOnboardingModal"
-    />
+    /> -->
 
     <modal-disclaimer
       v-if="showDisclaimerModal"
@@ -138,19 +138,19 @@ export default defineComponent({
     };
 
     // dApp staking onboarding modal
-    const showOnboardingModal = ref<boolean>(false);
-    if (
-      !localStorage.getItem(LOCAL_STORAGE.CLOSE_DAPP_STAKING_V3_ONBOARDING) &&
-      isDappStakingV3.value
-    ) {
-      setTimeout(() => {
-        showOnboardingModal.value = true;
-      }, 2000);
-    }
-
-    const setShowOnboardingModal = (isOpen: boolean): void => {
-      showOnboardingModal.value = isOpen;
-    };
+    // const showOnboardingModal = ref<boolean>(false);
+    // if (
+    //   !localStorage.getItem(LOCAL_STORAGE.CLOSE_DAPP_STAKING_V3_ONBOARDING) &&
+    //   isDappStakingV3.value
+    // ) {
+    //   setTimeout(() => {
+    //     showOnboardingModal.value = true;
+    //   }, 2000);
+    // }
+
+    // const setShowOnboardingModal = (isOpen: boolean): void => {
+    //   showOnboardingModal.value = isOpen;
+    // };
 
     const setShowDecommissionModal = (isOpen: boolean): void => {
       showDecommissionModal.value = isOpen;
@@ -277,8 +277,6 @@ export default defineComponent({
       showDisclaimerModal,
       showDecommissionModal,
       setShowDisclaimerModal,
-      showOnboardingModal,
-      setShowOnboardingModal,
       setShowDecommissionModal,
     };
   },

diff --git a/src/components/assets/AnchorLinks.vue b/src/components/assets/AnchorLinks.vue
@@ -1,16 +1,36 @@
 <template>
   <div class="wrapper--anchor-links">
     <div class="item" @click="scrollTo(nativeSection)">{{ nativeTokenSymbol }}</div>
-    <div class="item" @click="scrollTo(stakingSection)">{{ $t('common.staking') }}</div>
-    <div v-if="isDappOwner" class="item" @click="scrollTo(projectSection)">
-      {{ $t('assets.project') }}
+    <div class="item" :class="isStakerRewards && 'bg--notify'" @click="scrollTo(stakingSection)">
+      <span>
+        {{ $t('common.staking') }}
+      </span>
+      <div v-if="isStakerRewards">
+        <div class="dot--bg" />
+        <div class="dot--active" />
+      </div>
+    </div>
+    <div
+      v-if="isDappOwner"
+      class="item"
+      :class="hasDappRewards && 'bg--notify'"
+      @click="scrollTo(projectSection)"
+    >
+      <span>
+        {{ $t('assets.project') }}
+      </span>
+      <div v-if="hasDappRewards">
+        <div class="dot--bg" />
+        <div class="dot--active" />
+      </div>
     </div>
     <div class="item" @click="scrollTo(assetsSection)">{{ $t('assets.assets') }}</div>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue';
 import { useNetworkInfo } from 'src/hooks';
+import { useDappStaking } from 'src/staking-v3';
+import { computed, defineComponent } from 'vue';
 
 export default defineComponent({
   components: {},
@@ -43,7 +63,13 @@ export default defineComponent({
       section?.scrollIntoView({ behavior: 'smooth', block: 'start' });
     };
 
-    return { nativeTokenSymbol, scrollTo };
+    const { hasBonusRewards, hasStakerRewards, hasDappRewards } = useDappStaking();
+
+    const isStakerRewards = computed<boolean>(() => {
+      return hasStakerRewards.value || hasBonusRewards.value;
+    });
+
+    return { nativeTokenSymbol, scrollTo, isStakerRewards, hasDappRewards };
   },
 });
 </script>
@@ -65,6 +91,10 @@ export default defineComponent({
   }
 }
 
+.bg--notify {
+  background-color: $gray-0;
+}
+
 .item {
   border-radius: 12px;
   cursor: pointer;
@@ -75,6 +105,7 @@ export default defineComponent({
   padding: 16px;
   flex-grow: 1;
   text-align: center;
+  position: relative;
   @media (min-width: $sm) {
     font-size: 16px;
     padding: 16px 24px;
@@ -86,14 +117,41 @@ export default defineComponent({
   }
 }
 
+.dot--bg {
+  top: -6px;
+  right: -5px;
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  background-color: $gray-1;
+  border-radius: 100%;
+}
+
+.dot--active {
+  top: 0;
+  right: 0;
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background-color: $astar-pink-1;
+  border-radius: 100%;
+}
+
 .body--dark {
   .wrapper--anchor-links {
-    background-color: $navy-3;
+    background-color: $navy-1;
     border-color: $navy-3;
     box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.8);
   }
   .item {
     color: $gray-2;
   }
+  .bg--notify {
+    background-color: $navy-3;
+  }
+
+  .dot--bg {
+    background-color: $navy-1;
+  }
 }
 </style>
diff --git a/src/components/assets/YourProject.vue b/src/components/assets/YourProject.vue
@@ -9,13 +9,20 @@
       <div class="box--dapps">
         <router-link
           v-for="dapp in ownDapps"
-          :key="dapp.basic.address"
-          :to="navigateOwnerPage(dapp.basic.address)"
+          :key="dapp.chain.address"
+          :to="navigateOwnerPage(dapp.chain.address)"
           class="card--dapp"
         >
           <img class="icon--dapp-logo" :src="dapp.basic.iconUrl" :alt="dapp.basic.name" />
-          <div>
-            <span>{{ dapp.basic.name }}</span>
+          <div class="row--dapp-name">
+            <span> {{ dapp.basic.name }} </span>
+            <div v-if="checkIsRewards(dapp.chain.address)" class="column--rewards">
+              <span>{{ $t('assets.rewardsAvailable') }}</span>
+            </div>
+          </div>
+          <div v-if="checkIsRewards(dapp.chain.address)">
+            <div class="dot--bg" />
+            <div class="dot--active" />
           </div>
         </router-link>
       </div>
@@ -24,9 +31,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
 import { useClaimAll } from 'src/hooks';
-import { CombinedDappInfo, useDappStakingNavigation } from 'src/staking-v3';
+import { CombinedDappInfo, IDappStakingService, useDappStaking, useDappStakingNavigation } from 'src/staking-v3';
+import { container } from 'src/v2/common';
+import { Symbols } from 'src/v2/symbols';
+import { defineComponent, watch, ref } from 'vue';
 
 export default defineComponent({
   props: {
@@ -35,11 +44,38 @@ export default defineComponent({
       required: true,
     },
   },
-  setup() {
+  setup(props) {
     useClaimAll();
     const { navigateOwnerPage } = useDappStakingNavigation();
+    const { rewards, getDappRewards } = useDappStaking();
+    const dAppRewardsMap = ref<{ dapp: string, rewards: bigint }[]>([]);
+
+    const checkIsRewards = (address: string): boolean => {
+      const dapp = dAppRewardsMap.value.find((it) => it.dapp === address);
+      if (dapp) {
+        return dapp.rewards > 0;
+      }
+      return false;
+    }
+
+    const setDappRewardsMap = async (): Promise<void> => {
+      const dAppRewardsArray: { dapp: string, rewards: bigint }[] = [];
+      if (props.ownDapps.length === 0) return
+
+
+      for await (const dapp of props.ownDapps) {
+        const ownedContractAddress = dapp.chain.address;
+        const dAppRewards = await getDappRewards(ownedContractAddress);
+        if (dAppRewards > 0) {
+          dAppRewardsArray.push({ dapp: ownedContractAddress, rewards: dAppRewards });
+        }
+      }
+      dAppRewardsMap.value = dAppRewardsArray;
+    }
+
+    watch([rewards], setDappRewardsMap, { immediate: false });
 
-    return { navigateOwnerPage };
+    return { navigateOwnerPage, checkIsRewards };
   },
 });
 </script>

diff --git a/src/components/assets/styles/your-project.scss b/src/components/assets/styles/your-project.scss
@@ -8,17 +8,9 @@
 }
 
 .box--dapps {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  display: flex;
+  flex-wrap: wrap;
   gap: 16px;
-
-  @media (min-width: $md) {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 32px;
-  }
-  @media (min-width: $xxl) {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
 }
 
 .text--title {
@@ -51,7 +43,8 @@
   color: $navy-1;
   line-height: 1.25;
   transition: all 0.2s ease;
-  &:hover{
+  position: relative;
+  &:hover {
     background-color: $gray-2;
   }
 }
@@ -70,15 +63,59 @@
   margin-bottom: 24px;
 }
 
+.row--dapp-name {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.column--rewards {
+  border: 1px solid $astar-pink-1;
+  padding: 8px 4px;
+  border-radius: 8px;
+  font-weight: 600;
+  color: $astar-pink-1;
+  font-size: 12px;
+}
+
+.dot--bg {
+  top: -6px;
+  right: -5px;
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  background-color: white;
+  border-radius: 100%;
+}
+
+.dot--active {
+  top: 0;
+  right: 0;
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background-color: $astar-pink-1;
+  border-radius: 100%;
+}
+
 .body--dark {
   .card--dapp {
     background-color: $navy-3;
     color: $gray-1;
-    &:hover{
-      background-color: lighten($navy-3,5%);
+    &:hover {
+      background-color: lighten($navy-3, 5%);
     }
   }
+
   .separator {
     background-color: $navy-3;
   }
+
+  .bg--notify {
+    background-color: $navy-3;
+  }
+
+  .dot--bg {
+    background-color: $navy-1;
+  }
 }
diff --git a/src/components/header/modals/ModalNetworkWallet.vue b/src/components/header/modals/ModalNetworkWallet.vue
@@ -78,7 +78,7 @@ import {
 import { endpointKey, getNetworkName, providerEndpoints } from 'src/config/chainEndpoints';
 import { LOCAL_STORAGE } from 'src/config/localStorage';
 import { SupportWallet, WalletModalOption } from 'src/config/wallets';
-import { useAccount } from 'src/hooks';
+import { useAccount, useNetworkInfo } from 'src/hooks';
 import { buildNetworkUrl } from 'src/router/utils';
 import { useStore } from 'src/store';
 import { computed, defineComponent, ref, watch } from 'vue';
@@ -157,6 +157,7 @@ export default defineComponent({
     const { NETWORK_IDX, SELECTED_ENDPOINT } = LOCAL_STORAGE;
     const store = useStore();
     const { currentAccount, disconnectAccount } = useAccount();
+    const { currentNetworkIdx } = useNetworkInfo();
     const isClosing = ref<boolean>(false);
     const isAnimatedIn = ref<boolean>(false);
 
@@ -250,7 +251,21 @@ export default defineComponent({
     const selectNetwork = async (): Promise<void> => {
       const networkIdxRef = selNetworkId.value;
       const { isEndpointChange, newEndpoint } = getNewEndpoint();
-      if (isEndpointChange || networkIdxRef === endpointKey.LOCAL) {
+
+      // Memo: zkEVM configuration is using substrate API to fetch the dApp staking information
+      // that's why `isEndpointChange` returns fails in `isChangeNetwork` variable
+      const isSwitchBetweenZkEvmTestnet =
+        networkIdxRef === endpointKey.SHIBUYA && currentNetworkIdx.value === endpointKey.ZKYOTO;
+      const isSwitchBetweenZkEvmMainnet =
+        networkIdxRef === endpointKey.ASTAR && currentNetworkIdx.value === endpointKey.ASTAR_ZKEVM;
+
+      const isChangeNetwork =
+        isEndpointChange ||
+        networkIdxRef === endpointKey.LOCAL ||
+        isSwitchBetweenZkEvmTestnet ||
+        isSwitchBetweenZkEvmMainnet;
+
+      if (isChangeNetwork) {
         localStorage.setItem(NETWORK_IDX, networkIdxRef.toString());
         localStorage.setItem(
           SELECTED_ENDPOINT,

diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
@@ -21,7 +21,7 @@ $modal-item-bg-dark: #141c34;
 $astar-blue: #0085ff;
 $astar-blue-dark: #05b6fd;
 $astar-pink: #e0338f;
-$astar-pink-01: rgba(230, 0, 122, 1);
+$astar-pink-1: #e6007a;
 
 $astar-purple: #703ac2;
 $shiden-purple: #770cff;