add dApp staking v3 onboarding modal

src/App.vue

@@ -28,6 +28,12 @@
     </transition>
     <notification-stack />
 
+    <modal-onboarding
+      v-if="showOnboardingModal"
+      :set-is-open="setShowOnboardingModal"
+      :show="showOnboardingModal"
+    />
+
     <modal-disclaimer
       v-if="showDisclaimerModal"
       :set-is-open="setShowDisclaimerModal"
@@ -53,6 +59,7 @@ import ModalLoading from 'components/common/ModalLoading.vue';
 import AlertBox from 'components/common/AlertBox.vue';
 import CookiePolicy from 'components/common/CookiePolicy.vue';
 import ModalDisclaimer from 'components/common/ModalDisclaimer.vue';
+import ModalOnboarding from 'src/staking-v3/components/ModalOnboarding.vue';
 import NotificationStack from './components/common/Notification/NotificationStack.vue';
 import 'animate.css';
 import {
@@ -86,6 +93,7 @@ export default defineComponent({
     CookiePolicy,
     ModalDisclaimer,
     NotificationStack,
+    ModalOnboarding,
     ModalDecommission,
   },
   setup() {
@@ -129,6 +137,18 @@ export default defineComponent({
       showDisclaimerModal.value = isOpen;
     };
 
+    // dApp staking onboarding modal
+    const showOnboardingModal = ref<boolean>(false);
+    if (!localStorage.getItem(LOCAL_STORAGE.CLOSE_DAPP_STAKING_V3_ONBOARDING)) {
+      setTimeout(() => {
+        showOnboardingModal.value = true;
+      }, 2000);
+    }
+
+    const setShowOnboardingModal = (isOpen: boolean): void => {
+      showOnboardingModal.value = isOpen;
+    };
+
     const setShowDecommissionModal = (isOpen: boolean): void => {
       showDecommissionModal.value = isOpen;
     };
@@ -253,6 +273,8 @@ export default defineComponent({
       showDisclaimerModal,
       showDecommissionModal,
       setShowDisclaimerModal,
+      showOnboardingModal,
+      setShowOnboardingModal,
       setShowDecommissionModal,
     };
   },

src/config/localStorage.ts

@@ -20,6 +20,7 @@ export enum LOCAL_STORAGE {
   THEME_COLOR = 'themeColor',
   IS_LEDGER = 'isLedger',
   MULTISIG = 'multisig',
+  CLOSE_DAPP_STAKING_V3_ONBOARDING = 'closeDappStakingV3Onboarding',
   DECOMMISSION = 'decommission',
 }
 

src/i18n/en-US/index.ts

@@ -903,6 +903,19 @@ export default {
     registerNow: 'Register now',
     willUnstakeAll:
       'The operation will unstake all of your staked tokens because the minimum staking amount is {amount} tokens.',
+    onboarding: {
+      introducing: 'Introducing',
+      innovativeWayOfStaking: 'Innovative way of staking',
+      receiveStakerRewards: 'Receive Staker Rewards by voting your favourite projects',
+      earnBonusByVoting: 'Earn bonus by Voting on time',
+      receiveBonusRrewards: 'Receive bonus rewards being royal stakers',
+      remember: 'Remember',
+      stakingResetsEveryPeriod:
+        'Staking resets every period - It is requires to make votes every period.',
+      goToDappStakingAndVoteToday: 'Go to dApp Staking and Vote today',
+      goToDappStaking: 'Go to dApp Staking',
+      usersGuides: 'Users Guides',
+    },
     loyalStakerWarningAmount:
       'You will loose eligibility for bonus reward at the end of current period if you unstake more than {amount} tokens.',
     loyalStakerWarning:

src/staking-v3/components/ErrorPanel.vue

@@ -26,4 +26,4 @@ export default defineComponent({
   font-size: 14px;
   font-weight: 500;
 }
-</style>
+</style>

src/staking-v3/components/ModalOnboarding.vue

@@ -0,0 +1,189 @@
+<template>
+  <astar-default-modal
+    v-if="show"
+    :show="show"
+    :is-closing="isClosingModal"
+    :width="580"
+    :class="'highest-z-index wrapper--modal-onboarding'"
+    @close="closeModal"
+  >
+    <div class="modal__top">
+      <div class="title--onboarding">
+        {{ $t('stakingV3.onboarding.introducing') }}<br />
+        <span>{{ $t('stakingV3.title') }}</span>
+      </div>
+    </div>
+    <div class="modal__bottom">
+      <div class="modal__bottom-inner">
+        <swiper
+          :pagination="true"
+          :navigation="true"
+          :modules="modules"
+          class="swiper--modal-onboarding"
+        >
+          <swiper-slide>
+            <div class="text--title">
+              {{ $t('stakingV3.onboarding.innovativeWayOfStaking') }}
+            </div>
+            <div class="text--description">
+              {{ $t('stakingV3.onboarding.receiveStakerRewards') }}
+            </div>
+          </swiper-slide>
+          <swiper-slide>
+            <div class="text--title">
+              {{ $t('stakingV3.onboarding.earnBonusByVoting') }}
+            </div>
+            <div class="text--description">
+              {{ $t('stakingV3.onboarding.receiveBonusRrewards') }}
+            </div>
+          </swiper-slide>
+          <swiper-slide>
+            <div class="text--title text--yellow">
+              {{ $t('stakingV3.onboarding.remember') }}
+            </div>
+            <div class="text--description">
+              {{ $t('stakingV3.onboarding.stakingResetsEveryPeriod') }}
+            </div>
+          </swiper-slide>
+          <swiper-slide>
+            <div class="text--title">
+              <router-link :to="RoutePath.DappStaking" @click="closeModal">
+                <span>{{ $t('stakingV3.onboarding.goToDappStakingAndVoteToday') }}</span>
+                <astar-icon-arrow-right />
+              </router-link>
+            </div>
+            <div class="text--links">
+              <router-link :to="RoutePath.DappStaking" @click="closeModal">
+                <span>{{ $t('stakingV3.onboarding.goToDappStaking') }}</span>
+                <astar-icon-arrow-right />
+              </router-link>
+              <a
+                href="https://docs.astar.network/docs/build/dapp-staking/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <span>{{ $t('stakingV3.onboarding.usersGuides') }}</span>
+                <astar-icon-arrow-right />
+              </a>
+            </div>
+          </swiper-slide>
+        </swiper>
+      </div>
+      <div class="bg--modal-onboarding">
+        <img :src="require('/src/staking-v3/assets/leaderboard_bg.webp')" alt="" />
+      </div>
+    </div>
+  </astar-default-modal>
+</template>
+
+<script lang="ts">
+import { wait } from '@astar-network/astar-sdk-core';
+import { fadeDuration } from '@astar-network/astar-ui';
+import { defineComponent, ref } from 'vue';
+import { LOCAL_STORAGE } from 'src/config/localStorage';
+import { Path as RoutePath } from 'src/router/routes';
+
+// Import Swiper
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import { Navigation, Pagination } from 'swiper/modules';
+
+export default defineComponent({
+  components: { Swiper, SwiperSlide },
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    setIsOpen: {
+      type: Function,
+      required: true,
+    },
+  },
+  setup(props) {
+    const isClosingModal = ref<boolean>(false);
+    const closeModal = async (): Promise<void> => {
+      isClosingModal.value = true;
+      await wait(fadeDuration);
+      props.setIsOpen(false);
+      isClosingModal.value = false;
+      localStorage.setItem(LOCAL_STORAGE.CLOSE_DAPP_STAKING_V3_ONBOARDING, 'true');
+    };
+
+    if (localStorage.getItem(LOCAL_STORAGE.CLOSE_DAPP_STAKING_V3_ONBOARDING)) {
+      closeModal();
+    }
+
+    return {
+      isClosingModal,
+      modules: [Navigation, Pagination],
+      RoutePath,
+      closeModal,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use './styles/modal-onboarding.scss';
+</style>
+
+<style lang="scss">
+.body--dark {
+  .wrapper--modal-onboarding {
+    .modal-content {
+      background-color: white !important;
+    }
+  }
+}
+.swiper--modal-onboarding {
+  .swiper-button-prev,
+  .swiper-button-next {
+    margin: 0;
+    width: 40px;
+    height: 40px;
+    top: inherit;
+    bottom: 0;
+    display: block;
+    text-align: center;
+    background-color: $astar-blue;
+    border-radius: 9999px;
+    z-index: 9999;
+    transition: all 0.2s ease;
+    &:hover {
+      background-color: lighten($astar-blue, 10%);
+    }
+    &::after {
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 40px;
+      color: white;
+    }
+  }
+  .swiper-button-prev {
+    left: 0;
+  }
+  .swiper-button-next {
+    right: 0;
+  }
+  .swiper-button-disabled {
+    display: none;
+  }
+  .swiper-pagination {
+    height: 40px;
+    margin-top: 40px;
+    position: relative;
+    top: inherit;
+    bottom: inherit;
+    line-height: 40px;
+    .swiper-pagination-bullet {
+      background-color: $gray-2;
+      &.swiper-pagination-bullet-active {
+        background-color: $astar-blue;
+      }
+    }
+  }
+}
+</style>