Show sidebar if the user is not logged in

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' }">
@@ -179,7 +179,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"></component>
                     <ConnectWalletLanding @openProfile="openProfile = true" v-else />
                   </div>
                 </transition>
@@ -203,15 +204,13 @@ import { useProfileManager } from "./stores/profile_manager";
 const $route = useRoute();
 const $router = useRouter();
 const profileManager = useProfileManager();
-const gridStore = useGrid();
 const network = process.env.NETWORK || (window as any).env.NETWORK;
 
 const openProfile = ref(true);
 const hasActiveProfile = computed(() => !!profileManager.profile);
 const theme = useTheme();
 const navbarConfig = ref();
 
-const hasGrid = computed(() => !!gridStore.grid);
 watch(
   () => $route.meta,
   meta => {
@@ -360,6 +359,11 @@ function clickHandler({ route, url }: AppRouteItem): void {
   }
 }
 
+function isAuthorized(route: string) {
+  const items = ["dashboard", "farms", "nodes", "solutions"];
+  return !items.some(substr => route.startsWith(`/${substr}`));
+}
+
 $router.beforeEach((to, from, next) => {
   if (to.path === "/" && hasActiveProfile) {
     next({ path: "dashboard/twin" });
@@ -382,7 +386,6 @@ import FundsCard from "./components/funds_card.vue";
 import ProfileManagerController from "./components/profile_manager_controller.vue";
 import TftSwapPrice from "./components/swap_price.vue";
 import TFNotification from "./components/tf_notification.vue";
-import { useGrid } from "./stores";
 import ProfileManager from "./weblets/profile_manager.vue";
 
 interface AppRoute {

packages/playground/src/calculator/resource_pricing.vue

@@ -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,11 +187,12 @@
 </template>
 
 <script lang="ts" setup>
-import { capitalize, watch } from "vue";
+import { capitalize, computed, watch } from "vue";
 import { onMounted } from "vue";
 import { ref } from "vue";
 
 import { useProfileManager } from "@/stores/profile_manager";
+import { Calculator } from "@/utils/calculator";
 import { getGrid } from "@/utils/grid";
 
 import { color } from "../utils/background_color";
@@ -216,12 +222,13 @@ const prices = ref<PriceType[]>([]);
 
 const grid = ref();
 const profileManager = useProfileManager();
-
+const hasActiveProfile = computed(() => !!profileManager.profile);
+const calculator = computed(() => grid.value?.calculator || new Calculator());
 watch([CRU, MRU, SRU, HRU, balance, isCertified, ipv4, currentbalance], async () => {
   let pkgs: any;
   if (!valid.value.error) {
     if (currentbalance.value) {
-      const accountBalance = await grid.value.balance.getMyBalance();
+      const accountBalance = await grid.value?.balance.getMyBalance();
       balance.value = accountBalance.free;
       pkgs = await grid.value.calculator.calculateWithMyBalance({
         cru: CRU.value,
@@ -233,7 +240,7 @@ watch([CRU, MRU, SRU, HRU, balance, isCertified, ipv4, currentbalance], async ()
       });
     } else {
       if (!balance.value) balance.value = 0;
-      pkgs = await grid.value.calculator.calculate({
+      pkgs = await calculator.value?.calculate({
         cru: CRU.value,
         mru: MRU.value,
         hru: HRU.value,
@@ -255,7 +262,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",
@@ -283,7 +290,7 @@ onMounted(async () => {
   getGrid(profileManager.profile!)
     .then(async result => {
       grid.value = result;
-      const pkgs = await grid.value.calculator.calculate({
+      const pkgs = await calculator.value.calculate({
         cru: CRU.value,
         mru: MRU.value,
         hru: HRU.value,
@@ -292,7 +299,7 @@ onMounted(async () => {
         certified: isCertified.value,
         balance: balance.value,
       });
-      setPriceList(pkgs);
+      await setPriceList(pkgs);
     })
     .catch(error => {
       console.error("Error fetching the grid:", error);

packages/playground/src/utils/calculator.ts

@@ -0,0 +1,161 @@
+import { QueryClient } from "@threefold/tfchain_client";
+
+interface CalculatorModel {
+  cru: number; // vCores
+  mru: number; // GB
+  sru: number; // GB
+  hru: number; // GB
+  ipv4u: boolean;
+  certified?: boolean;
+  balance?: number;
+}
+
+interface CUModel {
+  cru: number; // vCores
+  mru: number; // GB
+}
+
+interface SUModel {
+  hru: number; // GB
+  sru: number; // GB
+}
+
+interface PricingInfo {
+  dedicatedPrice: number;
+  dedicatedPackage: {
+    package: string;
+    discount: number;
+  };
+  sharedPrice: number;
+  sharedPackage: {
+    package: string;
+    discount: number;
+  };
+}
+
+type DiscountLevels = {
+  none: { duration: number; discount: number };
+  default: { duration: number; discount: number };
+  bronze: { duration: number; discount: number };
+  silver: { duration: number; discount: number };
+  gold: { duration: number; discount: number };
+};
+
+class Calculator {
+  client: QueryClient;
+
+  constructor() {
+    this.client = new QueryClient(window.env.SUBSTRATE_URL);
+  }
+
+  async calCU(options: CUModel) {
+    const mru_used_1 = options.mru / 4;
+    const cru_used_1 = options.cru / 2;
+    const cu1 = mru_used_1 > cru_used_1 ? mru_used_1 : cru_used_1;
+
+    const mru_used_2 = options.mru / 8;
+    const cru_used_2 = options.cru;
+    const cu2 = mru_used_2 > cru_used_2 ? mru_used_2 : cru_used_2;
+
+    const mru_used_3 = options.mru / 2;
+    const cru_used_3 = options.cru / 4;
+    const cu3 = mru_used_3 > cru_used_3 ? mru_used_3 : cru_used_3;
+
+    let cu = cu1 > cu2 ? cu2 : cu1;
+    cu = cu > cu3 ? cu3 : cu;
+    return cu;
+  }
+
+  async calSU(options: SUModel) {
+    return options.hru / 1200 + options.sru / 200;
+  }
+  async getPrices() {
+    const pricing = await this.client.pricingPolicies.get({ id: 1 });
+    return pricing;
+  }
+
+  async tftPrice() {
+    const pricing = await this.client.tftPrice.get();
+    return pricing;
+  }
+  private async pricing(options: CalculatorModel) {
+    const price = await this.getPrices();
+    const cu = await this.calCU({ cru: options.cru, mru: options.mru });
+    const su = await this.calSU({ hru: options.hru, sru: options.sru });
+    const ipv4u = options.ipv4u ? 1 : 0;
+
+    // certified node cotsts 25% more than DIY node
+    const certifiedFactor = options.certified ? 1.25 : 1;
+
+    const musd_month =
+      (cu * +price?.cu.value + su * +price?.su.value + ipv4u * price?.ipu.value) * certifiedFactor * 24 * 30;
+    return { musd_month: musd_month, dedicatedDiscount: price.discountForDedicationNodes };
+  }
+
+  async calculate(options: CalculatorModel): Promise<PricingInfo> {
+    let balance = 0;
+    const pricing = await this.pricing(options);
+
+    // discount for Dedicated Nodes
+    const discount = pricing.dedicatedDiscount;
+    let dedicatedPrice = pricing.musd_month - pricing.musd_month * (+discount / 100);
+    let sharedPrice = pricing.musd_month;
+    const TFTPrice = await this.tftPrice();
+    if (options.balance) {
+      balance = TFTPrice * options.balance * 10000000;
+    }
+
+    const discountPackages: DiscountLevels = {
+      none: {
+        duration: 0,
+        discount: 0,
+      },
+      default: {
+        duration: 1.5,
+        discount: 20,
+      },
+      bronze: {
+        duration: 3,
+        discount: 30,
+      },
+      silver: {
+        duration: 6,
+        discount: 40,
+      },
+      gold: {
+        duration: 18,
+        discount: 60,
+      },
+    };
+
+    let dedicatedPackage = "none";
+    let sharedPackage = "none";
+    for (const pkg in discountPackages) {
+      if (balance > dedicatedPrice * discountPackages[pkg as keyof DiscountLevels].duration) {
+        dedicatedPackage = pkg;
+      }
+      if (balance > sharedPrice * discountPackages[pkg as keyof DiscountLevels].duration) {
+        sharedPackage = pkg;
+      }
+    }
+    dedicatedPrice =
+      (dedicatedPrice - dedicatedPrice * (discountPackages[dedicatedPackage as keyof DiscountLevels].discount / 100)) /
+      10000000;
+    sharedPrice =
+      (sharedPrice - sharedPrice * (discountPackages[sharedPackage as keyof DiscountLevels].discount / 100)) / 10000000;
+    return {
+      dedicatedPrice: dedicatedPrice,
+      dedicatedPackage: {
+        package: dedicatedPackage,
+        discount: discountPackages[dedicatedPackage as keyof DiscountLevels].discount,
+      },
+      sharedPrice: sharedPrice,
+      sharedPackage: {
+        package: sharedPackage,
+        discount: discountPackages[sharedPackage as keyof DiscountLevels].discount,
+      },
+    };
+  }
+}
+
+export { Calculator };