Merge pull request #846 from threefoldtech/development_graceperiod_no…

…tification Notify user when a contract is in grace period
threefoldtech · Jul 25, 2023 · 6d7b549 · 6d7b549
2 parents eba9192 + 06b147d
commit 6d7b549
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 0 deletions.
diff --git a/packages/playground/package.json b/packages/playground/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@mdi/font": "^7.2.96",
     "@threefold/grid_client": "^2.1.0-rc2",
+    "mosha-vue-toastify": "^1.0.23",
     "bip39": "^3.1.0",
     "cryptr": "^6.2.0",
     "decimal.js": "^10.4.3",

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
@@ -113,6 +113,7 @@
           </div>
         </v-container>
       </DeploymentListManager>
+      <TFNotification v-if="hasActiveProfile" />
     </v-main>
   </v-app>
 </template>
@@ -202,6 +203,7 @@ import AppTheme from "./components/app_theme.vue";
 import ConnectWalletLanding from "./components/connect_wallet_landing.vue";
 import DeploymentListManager from "./components/deployment_list_manager.vue";
 import DisclaimerToolbar from "./components/disclaimer_toolbar.vue";
+import TFNotification from "./components/tf_notification.vue";
 import ProfileManager from "./weblets/profile_manager.vue";
 
 interface AppRoute {
@@ -225,6 +227,7 @@ interface NavbarLink {
 export default {
   name: "App",
   components: {
+    TFNotification,
     DisclaimerToolbar,
     ProfileManager,
     DeploymentListManager,

diff --git a/packages/playground/src/components/tf_notification.vue b/packages/playground/src/components/tf_notification.vue
@@ -0,0 +1,47 @@
+<template>
+  <div></div>
+</template>
+
+<script lang="ts" setup>
+import "mosha-vue-toastify/dist/style.css";
+
+import { ContractStates } from "@threefold/grid_client";
+import { createToast } from "mosha-vue-toastify";
+import { onMounted } from "vue";
+import { ref } from "vue";
+
+import { useProfileManager } from "../stores";
+import { getGrid } from "../utils/grid";
+
+const profileManager = useProfileManager();
+const contractsCount = ref(0);
+
+onMounted(async () => {
+  while (profileManager.profile) {
+    const grid = await getGrid(profileManager.profile!);
+    const contracts: any = await grid!.contracts.listMyContracts({ state: [ContractStates.GracePeriod] });
+
+    if (
+      contracts.nameContracts.length != 0 ||
+      contracts.nodeContracts.length != 0 ||
+      contracts.rentContracts.length != 0
+    ) {
+      contractsCount.value =
+        contracts.nameContracts.length + contracts.nodeContracts.length + contracts.rentContracts.length;
+      createToast("You have " + contractsCount.value + " contracts in grace period", {
+        position: "top-right",
+        hideProgressBar: true,
+        toastBackgroundColor: "red",
+        timeout: 5000,
+      });
+    }
+    await new Promise(resolve => setTimeout(resolve, 15 * 60 * 1000));
+  }
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: "TFNotification",
+};
+</script>
diff --git a/yarn.lock b/yarn.lock
@@ -12977,6 +12977,11 @@ moment@^2.29.3:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
   integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
 
+mosha-vue-toastify@^1.0.23:
+  version "1.0.23"
+  resolved "https://registry.yarnpkg.com/mosha-vue-toastify/-/mosha-vue-toastify-1.0.23.tgz#eaa5de2a4ee0ca1167421132a42c1ac55ebb7e26"
+  integrity sha512-K9fij3e3H+E/Lj82ISrgmyKrtM5RNmtZC/KG/KH47+oZGmzAkN/Zuz39kBdT/Mp8OxaHuIWQntEUMP+HdmK1xA==
+
 mri@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"