Merge pull request #3104 from threefoldtech/development_reterun_docs

Reterun docs at application
threefoldtech · Jul 14, 2024 · 0d964e5 · 0d964e5
2 parents f52e09b + 06f2fcc
commit 0d964e5
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 4 deletions.
diff --git a/packages/playground/src/components/view_layout.vue b/packages/playground/src/components/view_layout.vue
@@ -1,10 +1,28 @@
 <template>
-  <div class="border px-4 pb-4 rounded position-relative pt-3 mt-1" ref="viewLayoutContainer">
+  <div
+    class="border px-4 pb-4 rounded position-relative mt-1"
+    :class="{ 'pt-10': hasInfo, 'pt-3': !hasInfo }"
+    ref="viewLayoutContainer"
+  >
     <div
       :style="{ opacity: $vuetify.theme.name === 'dark' ? 'var(--v-medium-emphasis-opacity)' : '' }"
       v-if="$slots.description"
     />
 
+    <div
+      class="position-absolute pa-1 rounded-circle border"
+      :style="{
+        top: 0,
+        right: '16px',
+        transform: 'translateY(-50%)',
+        zIndex: 99,
+        backgroundColor: 'rgb(var(--v-theme-background))',
+      }"
+      v-if="hasInfo"
+    >
+      <AppInfo />
+    </div>
+
     <template v-if="requireSSH && !ssh">
       <VAlert variant="tonal" type="error" class="mb-4">
         {{ title }} requires a public SSH key. You can generate or import it from the
@@ -26,8 +44,11 @@ import { useRoute } from "vue-router";
 import { DashboardRoutes } from "@/router/routes";
 import { useProfileManager } from "@/stores";
 
+import AppInfo from "./app_info.vue";
+
 export default {
   name: "ViewLayout",
+  components: { AppInfo },
   setup() {
     const route = useRoute();
     const profileManager = useProfileManager();

diff --git a/packages/playground/src/router/index.ts b/packages/playground/src/router/index.ts
@@ -541,7 +541,6 @@ function createTFChainRoutes(): RouteRecordRaw[] {
         {
           path: DashboardRoutes.TFChain.TFMintingReports,
           component: () => import("../views/minting_view.vue"),
-          meta: { title: "Minting", info: { page: "info/minting.md" }, publicPath: true },
         },
       ],
     },
@@ -694,7 +693,6 @@ function createDeployRoutes(): RouteRecordRaw[] {
           component: () => import("../dashboard/contracts_list.vue"),
           meta: {
             title: "Your Contracts List",
-            info: { page: "info/contracts_list.md" },
           },
         },
 

diff --git a/packages/playground/src/views/minting_view.vue b/packages/playground/src/views/minting_view.vue
@@ -4,7 +4,32 @@
       <v-icon size="30" class="pr-3">mdi-file-document-edit</v-icon>
       <v-card-title class="pa-0">TF Minting Reports</v-card-title>
     </v-card>
-    <v-alert variant="tonal" type="warning" class="mb-4"> All data subject to change </v-alert>
+    <v-alert class="mb-4 text-subtitle-2 font-weight-regular" type="info" variant="tonal">
+      For more information about minting check
+      <a
+        class="app-link font-weight-medium"
+        target="_blank"
+        href="https://www.manual.grid.tf/documentation/faq/faq.html#what-is-the-tft-minting-process-is-it-fully-automated"
+        >TFT minting process.
+      </a>
+      <br />
+      The user can verify the 3Nodes' payments on Stellar Blockchain through the Threefold's
+      <a
+        class="app-link font-weight-medium"
+        target="_blank"
+        href="https://www.manual.grid.tf/documentation/dashboard/tfchain/tf_minting_reports.html"
+        >minting tool.
+      </a>
+      <br />
+      TFT minting address on Stellar Chain:
+      <a
+        class="app-link font-weight-medium"
+        target="_blank"
+        href="https://stellar.expert/explorer/public/account/GBOVQKJYHXRR3DX6NOX2RRYFRCUMSADGDESTDNBDS6CDVLGVESRTAC47"
+        >GBOVQKJYHXRR3DX6NOX2RRYFRCUMSADGDESTDNBDS6CDVLGVESRTAC47.</a
+      >
+      <br />
+    </v-alert>
     <v-form class="d-inline-flex w-100">
       <FormValidator v-model="isValidForm">
         <InputValidator

diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
@@ -13,6 +13,25 @@
     <v-icon size="30" class="pr-3">mdi-file-document-edit</v-icon>
     <v-card-title class="pa-0">Contracts List</v-card-title>
   </v-card>
+
+  <v-alert class="mb-4 text-subtitle-2 font-weight-regular" type="info" variant="tonal">
+    For more details about Contract Types, Billing Cycle & Grace Period, check
+    <a
+      class="app-link font-weight-medium"
+      target="_blank"
+      href="https://www.manual.grid.tf/documentation/developers/tfchain/tfchain.html"
+      >Contract Documentation,
+    </a>
+    and to explore further contract details, check
+    <a
+      class="app-link font-weight-medium"
+      target="_blank"
+      href="https://www.manual.grid.tf/documentation/dashboard/deploy/your_contracts.html"
+      >Node Contract Documentation.</a
+    >
+    <br />
+  </v-alert>
+
   <v-card variant="text" class="my-3">
     <section class="d-flex align-center">
       <v-spacer />