Maintenance mode (#1090)

* Maintenance mode

* Cleanup

* Comment update

src/i18n/en-US/index.ts

@@ -435,6 +435,11 @@ export default {
       warningLeaveMinAmount:
         'Account must hold greater than {amount}{symbol} in transferrable when you stake.',
     },
+    maintenance: {
+      switching: 'Switching to',
+      willBeBack: 'We will be back',
+      verySoon: 'very soon',
+    },
   },
   assets: {
     astarNativeAccount: 'Astar Native Account',

src/layouts/DashboardLayout.vue

@@ -64,6 +64,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .wrapper--components {
+  height: 100%;
   @media (min-width: $lg) {
     padding: 0 40px;
     padding-top: 12px;

src/pages/DappStaking.vue

@@ -19,6 +19,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.wrapper--dapp-staking {
+  height: 100%;
+}
+
 .dapps-staking-bg {
   background-repeat: round;
   position: fixed;
@@ -29,4 +33,8 @@ export default defineComponent({
   height: 100vh;
   opacity: 0.8;
 }
+
+.container--dapp-staking {
+  height: 100%;
+}
 </style>

src/router/index.ts

@@ -6,8 +6,8 @@ import {
   createWebHistory,
 } from 'vue-router';
 import { StateInterface } from 'src/store';
-import routes from 'src/router/routes';
-
+import routes, { Path } from 'src/router/routes';
+import { $api } from '../boot/api';
 export { Path } from 'src/router/routes';
 export { getHeaderName, buildTransferPageLink } from 'src/router/utils';
 
@@ -38,5 +38,22 @@ export default route<StateInterface>(function (/* { store, ssrContext } */) {
     history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE),
   });
 
+  // TODO - remove after the portal v3 is live.
+  Router.beforeEach((to, from, next) => {
+    // Prevent accessing to dApp staking pages if v3 is deployed to a node, but not supported by UI
+    const networksSupportV3 = ['development'];
+    const isStakingV3 = $api?.query.hasOwnProperty('dappStaking');
+    const dontNavigateToDappStaking =
+      to.path.includes('/dapp-staking') &&
+      !to.path.includes('/maintenance') &&
+      !networksSupportV3.includes(to.params?.network?.toString());
+
+    if (isStakingV3 && dontNavigateToDappStaking) {
+      next({ path: Path.DappStaking + Path.Maintenance });
+    } else {
+      next();
+    }
+  });
+
   return Router;
 });

src/router/routes.ts

@@ -13,6 +13,7 @@ import Dashboard from 'src/pages/Dashboard.vue';
 import RegisterDapp from 'src/pages/RegisterDapp.vue';
 import StakeManage from 'src/pages/StakeManage.vue';
 import DappPage from 'src/pages/DappPage.vue';
+import MaintenanceMode from 'src/staking-v3/components/MaintenanceMode.vue';
 import { RouteRecordRaw } from 'vue-router';
 
 export {
@@ -40,6 +41,7 @@ export enum Path {
   Transfer = '/transfer',
   XvmTransfer = '/xvm-transfer',
   Register = '/register',
+  Maintenance = '/maintenance',
 }
 
 const routes: RouteRecordRaw[] = [
@@ -68,6 +70,10 @@ const routes: RouteRecordRaw[] = [
     path: Path.DappStaking + Path.Discover,
     redirect: networkParam + Path.DappStaking + Path.Discover,
   },
+  {
+    path: Path.DappStaking + Path.Maintenance,
+    redirect: networkParam + Path.DappStaking + Path.Maintenance,
+  },
   {
     path: '/store/discover-dapps',
     redirect: networkParam + Path.DappStaking + Path.Discover,
@@ -156,6 +162,10 @@ const routes: RouteRecordRaw[] = [
         path: 'register',
         component: RegisterDapp,
       },
+      {
+        path: 'maintenance',
+        component: MaintenanceMode,
+      },
     ],
   },
 

src/staking-v3/components/MaintenanceMode.vue

@@ -0,0 +1,50 @@
+<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>
+</template>
+
+<style lang="scss" scoped>
+@import 'src/css/quasar.variables.scss';
+.wrapper--maintenance {
+  margin-top: 32px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  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;
+}
+
+.header--text {
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 96.8%;
+}
+
+.main--text {
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 900;
+  line-height: 96.8%;
+  margin: 16px 0;
+}
+
+.footer--text {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: 2.8px;
+}
+</style>