Fix/maintenance mode modal

src/constants.ts

@@ -2,7 +2,7 @@ export enum HttpCodes {
   NotFound = 404,
 }
 
-export const ORIGINAL_BLOCK_TIME = 12;
+export const ORIGINAL_BLOCK_TIME = 6;
 
 export const PERIOD1_START_BLOCKS = new Map<string, number>([
   ['astar', 5514935],

src/i18n/en-US/index.ts

@@ -473,6 +473,7 @@ export default {
       switching: 'Switching to',
       willBeBack: 'We will be back',
       verySoon: 'very soon',
+      visitLater: 'Please visit the page later.',
     },
   },
   assets: {
@@ -731,6 +732,7 @@ export default {
     portalIpfs: 'Portal is now on IPFS!',
     astarHome: 'Astar Home',
     astarDocs: 'Astar Docs',
+    goHome: 'Go Home',
   },
   disclaimer: {
     disclaimer: 'Disclaimer',
@@ -763,7 +765,7 @@ export default {
     noDappSelected: 'No dApp selected.',
     stakerRewardsExpired: 'Staker rewards expired.',
     dappStaking: {
-      Disabled: 'Pallet is disabled/in maintenance mode.',
+      Disabled: 'dApp staking is currently in maintenance mode.',
       NoExpiredEntries: 'There are no expired entries to clean up.',
       NoStakingInfo: 'Account has no staking information for the contract',
       NotOperatedDApp: 'dApp is part of dApp staking but is not active anymore.',

src/staking-v3/components/DiscoverV3.vue

@@ -50,6 +50,7 @@
         backgroundImage: `url(${require('src/staking-v3/assets/dapp_staking_period002_bg.webp')})`,
       }"
     />
+    <maintenance-mode />
   </div>
 </template>
 
@@ -69,6 +70,7 @@ import PeriodInfoBuild from './PeriodInfoBuild.vue';
 import VotingWizard from './vote/VotingWizard.vue';
 import PeriodStats from './PeriodStats.vue';
 import ToggleButtons from './ToggleButtons.vue';
+import MaintenanceMode from './MaintenanceMode.vue';
 
 export default defineComponent({
   components: {
@@ -81,6 +83,7 @@ export default defineComponent({
     VotingWizard,
     PeriodStats,
     ToggleButtons,
+    MaintenanceMode,
   },
   setup() {
     const { isZkEvm, isAstarZkEvm, currentNetworkIdx } = useNetworkInfo();

src/staking-v3/components/MaintenanceMode.vue

@@ -1,37 +1,69 @@
 <template>
-  <div class="wrapper--maintenance">
-    <div class="header--text">{{ $t('dappStaking.maintenance.switching') }}</div>
-    <div class="main--text">V3</div>
-    <div class="footer--text">{{ $t('dappStaking.maintenance.willBeBack') }}</div>
-    <div class="footer--text">{{ $t('dappStaking.maintenance.verySoon') }}</div>
-  </div>
+  <modal-wrapper
+    :is-modal-open="show"
+    title=""
+    :is-closing="isClosingModal"
+    :close-modal="closeModal"
+  >
+    <div class="wrapper--maintenance">
+      <div class="main--text">{{ $t('stakingV3.dappStaking.Disabled') }}</div>
+      <div class="sub-text">{{ $t('dappStaking.maintenance.visitLater') }}</div>
+      <div class="home" @click="goHome">{{ $t('links.goHome') }}</div>
+    </div>
+  </modal-wrapper>
 </template>
 
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import ModalWrapper from 'src/components/common/ModalWrapper.vue';
+import { useDappStaking } from '../hooks';
+import { Path } from 'src/router';
+
+export default defineComponent({
+  name: 'MaintenanceMode',
+  components: {
+    ModalWrapper,
+  },
+  setup() {
+    const router = useRouter();
+    const { protocolState } = useDappStaking();
+    const show = computed<boolean>(() => {
+      return protocolState.value ? protocolState.value.maintenance : false;
+    });
+    const isClosingModal = ref(false);
+    const closeModal = () => {};
+    const goHome = () => {
+      router.push(Path.Assets);
+    };
+
+    return {
+      show,
+      isClosingModal,
+      closeModal,
+      goHome,
+    };
+  },
+});
+</script>
+
 <style lang="scss" scoped>
 @import 'src/css/quasar.variables.scss';
 .wrapper--maintenance {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
-  height: 70vh;
+  height: 100%;
   width: 100%;
   font-size: 24px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
-  background: url('/images/bk_maintenance.png') no-repeat center;
   color: $container-bg-white;
-  @media (min-width: $lg) {
-    background-size: contain;
-  }
-}
-
-.header--text {
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 96.8%;
+  row-gap: 24px;
+  padding: 16px;
+  padding-bottom: 48px;
+  color: $navy-1;
 }
 
 .main--text {
@@ -42,11 +74,7 @@
   margin: 16px 0;
 }
 
-.footer--text {
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
-  letter-spacing: 2.8px;
+.home {
+  cursor: pointer;
 }
 </style>