Show sidebar if the user is not logged in

packages/grid_client/src/modules/calculator.ts

@@ -1,3 +1,5 @@
+import { QueryClient } from "@threefold/tfchain_client";
+
 import { TFClient } from "../clients/tf-grid/client";
 import { GridClientConfig } from "../config";
 import { expose } from "../helpers/expose";
@@ -18,10 +20,10 @@ interface PricingInfo {
 }
 
 class Calculator {
-  client: TFClient;
+  client: TFClient | QueryClient;
 
-  constructor(public config: GridClientConfig) {
-    this.client = config.tfclient;
+  constructor(config: GridClientConfig | QueryClient) {
+    this.client = config instanceof QueryClient ? config : config.tfclient;
   }
   @expose
   @validateInput
@@ -55,7 +57,7 @@ class Calculator {
   @validateInput
   async tftPrice() {
     const pricing = await this.client.tftPrice.get();
-    return pricing;
+    return this.client instanceof TFClient ? pricing : pricing / 1000;
   }
   @validateInput
   private async pricing(options: CalculatorModel) {
@@ -136,8 +138,11 @@ class Calculator {
   }
 
   async calculateWithMyBalance(options: CalculatorModel) {
-    const balances = await this.client.balances.getMyBalance();
-    const balance = balances.free;
+    let balance = options.balance;
+    if (this.client instanceof TFClient) {
+      const balances = await this.client.balances.getMyBalance();
+      balance = balances.free;
+    }
     const calculate = await this.calculate({
       cru: options.cru,
       mru: options.mru,

packages/playground/src/App.vue

@@ -4,7 +4,7 @@
       <v-navigation-drawer
         width="280"
         :permanent="permanent"
-        :model-value="hasActiveProfile && openSidebar"
+        :model-value="openSidebar"
         @update:model-value="openSidebar = $event"
       >
         <div :style="{ paddingTop: '64px' }">
@@ -162,13 +162,12 @@
           <v-container fluid :style="{ paddingBottom: '100px' }">
             <div class="d-flex align-center">
               <v-btn
+                v-if="!openSidebar"
                 color="secondary"
                 @click="openSidebar = true"
                 icon="mdi-menu"
                 variant="tonal"
                 class="mr-2"
-                :disabled="!hasActiveProfile"
-                v-if="!permanent"
               />
               <div :style="{ width: '100%' }" class="mb-4">
                 <DisclaimerToolbar />
@@ -179,7 +178,8 @@
               <router-view v-slot="{ Component }">
                 <transition name="fade">
                   <div :key="$route.path">
-                    <component :is="Component" v-if="hasActiveProfile && hasGrid"></component>
+                    <component :is="Component" v-if="isAuthorized($route.path)"></component>
+                    <component :is="Component" v-else-if="hasActiveProfile && hasGrid"></component>
                     <ConnectWalletLanding @openProfile="openProfile = true" v-else />
                   </div>
                 </transition>
@@ -367,6 +367,11 @@ function clickHandler({ route, url }: AppRouteItem): void {
   }
 }
 
+function isAuthorized(route: string) {
+  const items = ["dashboard", "solutions"];
+  return !items.some(substr => route.startsWith(`/${substr}`));
+}
+
 $router.beforeEach((to, from, next) => {
   if (to.path === "/" && hasActiveProfile) {
     next({ path: "dashboard/twin" });

packages/playground/src/calculator/resource_pricing.vue

@@ -115,7 +115,7 @@
             <input-tooltip tooltip="The amount of TFT to calculate discount.">
               <v-text-field
                 label="Balance"
-                :disabled="currentbalance"
+                :disabled="currentbalance && hasActiveProfile"
                 suffix="TFT"
                 type="number"
                 v-bind="props"
@@ -141,7 +141,12 @@
         >
           <v-switch color="primary" inset label="With a Public IPv4" v-model="ipv4" hide-details />
         </input-tooltip>
-        <input-tooltip inline class="px-2" tooltip="Use current balance to calculate the discount.">
+        <input-tooltip
+          v-if="hasActiveProfile"
+          inline
+          class="px-2"
+          tooltip="Use current balance to calculate the discount."
+        >
           <v-switch color="primary" inset label="Use current balance" v-model="currentbalance" hide-details />
         </input-tooltip>
       </v-row>
@@ -182,13 +187,15 @@
 </template>
 
 <script lang="ts" setup>
-import { capitalize, watch } from "vue";
+import { QueryClient } from "@threefold/tfchain_client";
+import { capitalize, computed, watch } from "vue";
 import { onMounted } from "vue";
 import { ref } from "vue";
 
 import { useProfileManager } from "@/stores/profile_manager";
-import { getGrid } from "@/utils/grid";
 
+import { calculator as Calculator } from "../../../grid_client/dist/es6";
+import { useGrid } from "../stores";
 import { color } from "../utils/background_color";
 
 const CRU = ref<number>(1);
@@ -213,37 +220,32 @@ interface PriceType {
   info: string;
 }
 const prices = ref<PriceType[]>([]);
-
-const grid = ref();
+const gridStore = useGrid();
 const profileManager = useProfileManager();
-
-watch([CRU, MRU, SRU, HRU, balance, isCertified, ipv4, currentbalance], async () => {
+const hasActiveProfile = computed(() => {
+  return !!profileManager.profile;
+});
+const calculator = computed(() => {
+  return hasActiveProfile.value && gridStore.grid
+    ? gridStore.grid?.calculator
+    : new Calculator(new QueryClient(window.env.SUBSTRATE_URL));
+});
+watch([CRU, MRU, SRU, HRU, balance, isCertified, ipv4, currentbalance, hasActiveProfile], async () => {
   let pkgs: any;
   if (!valid.value.error) {
-    if (currentbalance.value) {
-      const accountBalance = await grid.value.balance.getMyBalance();
-      balance.value = accountBalance.free;
-      pkgs = await grid.value.calculator.calculateWithMyBalance({
-        cru: CRU.value,
-        mru: MRU.value,
-        hru: HRU.value,
-        sru: SRU.value,
-        ipv4u: ipv4.value,
-        certified: isCertified.value,
-      });
-    } else {
-      if (!balance.value) balance.value = 0;
-      pkgs = await grid.value.calculator.calculate({
-        cru: CRU.value,
-        mru: MRU.value,
-        hru: HRU.value,
-        sru: SRU.value,
-        ipv4u: ipv4.value,
-        certified: isCertified.value,
-        balance: balance.value,
-      });
+    if (currentbalance.value && hasActiveProfile.value && gridStore.grid) {
+      const accountBalance = await gridStore.grid?.balance.getMyBalance();
+      balance.value = accountBalance?.free;
     }
-
+    pkgs = await calculator.value?.calculate({
+      cru: CRU.value,
+      mru: MRU.value,
+      hru: HRU.value,
+      sru: SRU.value,
+      ipv4u: ipv4.value,
+      certified: isCertified.value,
+      balance: balance.value || 0,
+    });
     setPriceList(pkgs);
   }
 });
@@ -255,7 +257,7 @@ watch(currentbalance, (newCurrentBalance, oldCurrentBalance) => {
 });
 
 async function setPriceList(pkgs: any): Promise<PriceType[]> {
-  TFTPrice.value = await grid.value.calculator.tftPrice();
+  TFTPrice.value = await calculator.value?.tftPrice();
   prices.value = [
     {
       label: "Dedicated Node",
@@ -280,23 +282,16 @@ async function setPriceList(pkgs: any): Promise<PriceType[]> {
 }
 
 onMounted(async () => {
-  getGrid(profileManager.profile!)
-    .then(async result => {
-      grid.value = result;
-      const pkgs = await grid.value.calculator.calculate({
-        cru: CRU.value,
-        mru: MRU.value,
-        hru: HRU.value,
-        sru: SRU.value,
-        ipv4u: ipv4.value,
-        certified: isCertified.value,
-        balance: balance.value,
-      });
-      setPriceList(pkgs);
-    })
-    .catch(error => {
-      console.error("Error fetching the grid:", error);
-    });
+  const pkgs = await calculator.value.calculate({
+    cru: CRU.value,
+    mru: MRU.value,
+    hru: HRU.value,
+    sru: SRU.value,
+    ipv4u: ipv4.value,
+    certified: isCertified.value,
+    balance: balance.value,
+  });
+  await setPriceList(pkgs);
 });
 
 function openManual() {

packages/playground/src/components/connect_wallet_landing.vue

@@ -1,7 +1,9 @@
 <template>
   <div :style="{ paddingBottom: '250px' }">
     <v-alert type="info" variant="tonal">
-      Connect your TFChain Wallet <a class="app-link" @click="$emit('openProfile')">here</a>
+      Connect your TFChain
+      <a class="app-link" @click="$emit('openProfile')">Wallet</a>
+      to view {{ pageTitle }}
     </v-alert>
     <v-container class="custom-container">
       <h4 class="text-center text-h3 mt-16">A Co-Owned Global Sovereign Internet</h4>
@@ -75,6 +77,8 @@
 </template>
 
 <script lang="ts">
+import { computed } from "vue";
+import { useRoute } from "vue-router";
 import { useTheme } from "vuetify";
 
 import { getCapacityURL } from "../utils/getCapacityUrl";
@@ -86,9 +90,11 @@ export default {
     const baseUrl = import.meta.env.BASE_URL;
     const network = process.env.NETWORK || (window as any).env.NETWORK;
     const capacityURL = getCapacityURL(network);
-
+    const route = useRoute();
+    const pageTitle = computed(() => route.meta.title);
     return {
       theme,
+      pageTitle,
       stats: [
         {
           label: "Capacity",