From b600e08b4643264de4b2ca2cdcc5d8e88758060f Mon Sep 17 00:00:00 2001
From: zaelgohary <zainabelgohary19@gmail.com>
Date: Mon, 15 Apr 2024 17:28:49 +0200
Subject: [PATCH] Refactor Dashboard to use grid store instead of initializing
 grid multiple times

---
 .../contracts_list/contracts_table.vue          | 10 +++++-----
 .../src/components/deployment_data_dialog.vue   | 10 +++++-----
 .../src/components/deposit_dialog.vue           | 10 +++++++---
 .../playground/src/components/funds_card.vue    | 11 +++++++----
 .../manage_caprover_worker_dialog.vue           | 13 +++++++------
 .../src/components/manage_gateway_dialog.vue    | 13 ++++---------
 .../src/components/manage_k8s_worker_dialog.vue | 11 +++++------
 .../src/components/select_gateway_node.vue      | 10 ++++------
 .../src/components/tf_notification.vue          |  1 -
 .../src/components/withdraw_dialog.vue          | 11 +++++++----
 .../dashboard/components/reserve_action_btn.vue |  9 ++++++---
 packages/playground/src/dashboard/dao_view.vue  | 11 +++++++----
 packages/playground/src/utils/contracts.ts      |  2 +-
 packages/playground/src/weblets/freeflow.vue    | 10 +++++-----
 packages/playground/src/weblets/full_vm.vue     | 11 ++++++++---
 packages/playground/src/weblets/micro_vm.vue    | 12 +++++++-----
 packages/playground/src/weblets/tf_algorand.vue | 10 +++++++---
 packages/playground/src/weblets/tf_caprover.vue | 10 +++++++---
 .../playground/src/weblets/tf_casperlabs.vue    |  9 +++++----
 .../src/weblets/tf_contracts_list.vue           | 14 +++++++-------
 .../playground/src/weblets/tf_discourse.vue     |  9 +++++----
 .../playground/src/weblets/tf_funkwhale.vue     |  9 +++++----
 .../playground/src/weblets/tf_kubernetes.vue    | 12 +++++++-----
 .../playground/src/weblets/tf_mattermost.vue    | 10 ++++++----
 .../playground/src/weblets/tf_nextcloud.vue     |  9 +++++----
 .../playground/src/weblets/tf_node_pilot.vue    | 11 +++++++----
 packages/playground/src/weblets/tf_owncloud.vue | 10 +++++-----
 packages/playground/src/weblets/tf_peertube.vue | 10 +++++-----
 .../playground/src/weblets/tf_presearch.vue     | 12 +++++++-----
 packages/playground/src/weblets/tf_subsquid.vue |  9 +++++----
 packages/playground/src/weblets/tf_taiga.vue    |  9 +++++----
 packages/playground/src/weblets/tf_umbrel.vue   | 11 ++++++++---
 .../playground/src/weblets/tf_wordpress.vue     | 17 ++++++++---------
 33 files changed, 189 insertions(+), 147 deletions(-)

diff --git a/packages/playground/src/components/contracts_list/contracts_table.vue b/packages/playground/src/components/contracts_list/contracts_table.vue
index 3649f7474e..92d7462427 100644
--- a/packages/playground/src/components/contracts_list/contracts_table.vue
+++ b/packages/playground/src/components/contracts_list/contracts_table.vue
@@ -172,7 +172,7 @@ const props = defineProps({
     required: true,
   },
   grid: {
-    type: Object as PropType<Ref<GridClient | undefined>>,
+    type: Object as PropType<GridClient>,
     required: true,
   },
   loading: {
@@ -232,7 +232,7 @@ async function showDetails(value: any) {
   loadingContractId.value = contractId;
 
   try {
-    const deployment = await props.grid.value?.zos.getDeployment({ contractId });
+    const deployment = await props.grid?.zos.getDeployment({ contractId });
     return layout.value.openDialog(deployment, false, true);
   } catch (e) {
     failedContractId.value = contractId;
@@ -248,12 +248,12 @@ async function contractLockDetails(item: any) {
   contractStateDialog.value = true;
   loadingShowDetails.value = true;
   selectedItem.value = item;
-  await props.grid.value?.contracts
+  await props.grid?.contracts
     .contractLock({ id: item.contractId })
     .then((data: ContractLock) => {
       contractLocked.value = data;
     })
-    .catch(err => {
+    .catch((err: any) => {
       layout.value.setStatus(
         "failed",
         normalizeError(err, `Failed to fetch the contract ${item.contractId} lock details.`),
@@ -279,7 +279,7 @@ async function onDelete() {
   deleting.value = true;
 
   try {
-    await props.grid.value?.contracts.batchCancelContracts({
+    await props.grid?.contracts.batchCancelContracts({
       ids: selectedContracts.value.map(c => c.contractId),
     });
     contracts.value = contracts.value.filter(c => !selectedContracts.value.includes(c));
diff --git a/packages/playground/src/components/deployment_data_dialog.vue b/packages/playground/src/components/deployment_data_dialog.vue
index 64d92ba4c5..00298b377a 100644
--- a/packages/playground/src/components/deployment_data_dialog.vue
+++ b/packages/playground/src/components/deployment_data_dialog.vue
@@ -164,6 +164,8 @@ const contract = computed(() => contracts.value?.[activeTab.value] ?? {});
 const code = computed(() => JSON.stringify(props.data || {}, undefined, 2));
 const html = computed(() => hljs.highlight(code.value, { language: "json" }).value);
 const profileManager = useProfileManager();
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 function copy() {
   navigator.clipboard.writeText(code.value);
@@ -196,7 +198,6 @@ function getValue(key: string) {
 
 async function getGrafanaUrl() {
   isLoading.value = true;
-  const grid = await getGrid(profileManager.profile!);
   if (grid) {
     if (contract.value.type !== ContractType.NAME) {
       const nodeId = await grid.capacity.getNodeIdFromContractId({
@@ -213,8 +214,6 @@ getGrafanaUrl();
 
 async function getGPUInfo() {
   loadingCard.value = true;
-
-  const grid = await getGrid(profileManager.profile!);
   if (grid) {
     const nodeId = await grid.capacity.getNodeIdFromContractId({
       contractId: contract.value.contractId,
@@ -302,13 +301,14 @@ function getTooltipText(contract: any, index: number) {
 </script>
 
 <script lang="ts">
+import type { GridClient } from "@threefold/grid_client";
+
 import { useProfileManager } from "@/stores/profile_manager";
 import { ContractType } from "@/utils/contracts";
 import { createCustomToast, ToastType } from "@/utils/custom_toast";
 import { GrafanaStatistics } from "@/utils/get_metrics_url";
-import { getGrid } from "@/utils/grid";
 
-import type { NodeInfo } from "../../../grid_client/dist/es6";
+import { useGrid } from "../stores";
 import type { Disk } from "../utils/deploy_vm";
 import CopyReadonlyInput from "./copy_readonly_input.vue";
 import { HighlightDark, HighlightLight } from "./highlight_themes";
diff --git a/packages/playground/src/components/deposit_dialog.vue b/packages/playground/src/components/deposit_dialog.vue
index e19aa0b7ad..1acff1502c 100644
--- a/packages/playground/src/components/deposit_dialog.vue
+++ b/packages/playground/src/components/deposit_dialog.vue
@@ -83,9 +83,8 @@ import { manual } from "@/utils/manual";
 
 import { useProfileManagerController } from "../components/profile_manager_controller.vue";
 import QrcodeGenerator from "../components/qrcode_generator.vue";
-import { useProfileManager } from "../stores";
+import { useGrid, useProfileManager } from "../stores";
 import { createCustomToast, ToastType } from "../utils/custom_toast";
-import { getGrid } from "../utils/grid";
 import CopyReadonlyInput from "./copy_readonly_input.vue";
 const depositDialog = ref(false);
 const emits = defineEmits(["close"]);
@@ -95,6 +94,8 @@ const loading = ref(false);
 const dots = ref(".");
 const interval = ref<number | null>(null);
 const ProfileManagerController = useProfileManagerController();
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 const apps = [
   {
@@ -141,7 +142,7 @@ onMounted(async () => {
   interval.value = window.setInterval(loadingDots, 500);
   try {
     loading.value = true;
-    const grid = await getGrid(profileManager.profile!);
+    updateGrid(grid, { projectName: "" });
     const address = profileManager.profile?.address as string;
     const receivedDeposit = await grid!.bridge.listenToMintCompleted({
       address: address,
@@ -171,8 +172,11 @@ onBeforeUnmount(() => {
 });
 </script>
 <script lang="ts">
+import type { GridClient } from "@threefold/grid_client";
 import { defineComponent } from "vue";
 
+import { updateGrid } from "../utils/grid";
+
 export default defineComponent({
   name: "DepositDialog",
 });
diff --git a/packages/playground/src/components/funds_card.vue b/packages/playground/src/components/funds_card.vue
index d1fa519a74..160df65d78 100644
--- a/packages/playground/src/components/funds_card.vue
+++ b/packages/playground/src/components/funds_card.vue
@@ -25,28 +25,31 @@
 </template>
 
 <script lang="ts">
+import type { GridClient } from "@threefold/grid_client";
 import { ref } from "vue";
 
 import { manual } from "@/utils/manual";
 
 import { useProfileManagerController } from "../components/profile_manager_controller.vue";
-import { useProfileManager } from "../stores";
+import { useGrid } from "../stores";
 import { createCustomToast, ToastType } from "../utils/custom_toast";
-import { getGrid } from "../utils/grid";
+import { updateGrid } from "../utils/grid";
 
 export default {
   name: "FundsCard",
   setup() {
     const loadingAddTFT = ref(false);
-    const profileManager = useProfileManager();
     const ProfileManagerController = useProfileManagerController();
+    const gridStore = useGrid();
+    const grid = gridStore.client as GridClient;
+
     const addTFT = async () => {
       if (window.env.NETWORK !== "dev" && window.env.NETWORK !== "qa") {
         window.open("https://gettft.com/gettft/", "_blank");
       } else {
         loadingAddTFT.value = true;
         try {
-          const grid = await getGrid(profileManager.profile!);
+          updateGrid(grid, { projectName: "" });
           await grid?.balance.getMoreFunds();
           await ProfileManagerController.reloadBalance();
           loadingAddTFT.value = false;
diff --git a/packages/playground/src/components/manage_caprover_worker_dialog.vue b/packages/playground/src/components/manage_caprover_worker_dialog.vue
index 5ccc134ea4..07cbeea446 100644
--- a/packages/playground/src/components/manage_caprover_worker_dialog.vue
+++ b/packages/playground/src/components/manage_caprover_worker_dialog.vue
@@ -81,19 +81,18 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 
-import { useProfileManager } from "../stores";
+import { useGrid } from "../stores";
 import { addMachine, deleteMachine, loadVM } from "../utils/deploy_vm";
-import { getGrid } from "../utils/grid";
 import rootFs from "../utils/root_fs";
 
 const props = defineProps<{ master: any; data: any[]; projectName: string }>();
 const emits = defineEmits<{ (event: "close"): void; (event: "update:caprover", data: any): void }>();
 
-const profileManager = useProfileManager();
-
 const selectedWorkers = ref<any[]>([]);
 const deleting = ref(false);
 const deployedDialog = ref(false);
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 const worker = ref(createWorker());
 
@@ -112,8 +111,8 @@ async function deploy(layout: any) {
   layout.setStatus("deploy");
 
   try {
+    updateGrid(grid, { projectName: props.projectName });
     layout.value?.validateSSH();
-    const grid = await getGrid(profileManager.profile!, props.projectName);
 
     await layout.validateBalance(grid);
 
@@ -158,7 +157,6 @@ async function deploy(layout: any) {
 
 async function onDelete(cb: (workers: any[]) => void) {
   deleting.value = true;
-  const grid = await getGrid(profileManager.profile!, props.projectName);
   for (const worker of selectedWorkers.value) {
     console.log(props.master.name, worker.name);
 
@@ -184,8 +182,11 @@ async function onDelete(cb: (workers: any[]) => void) {
 </script>
 
 <script lang="ts">
+import type { GridClient } from "@threefold/grid_client";
+
 import CaproverWorker, { createWorker } from "../components/caprover_worker.vue";
 import ListTable from "../components/list_table.vue";
+import { updateGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
 import ManageWorkerDialog from "./manage_worker_dialog.vue";
 
diff --git a/packages/playground/src/components/manage_gateway_dialog.vue b/packages/playground/src/components/manage_gateway_dialog.vue
index 191a9ab769..82f25e1fcb 100644
--- a/packages/playground/src/components/manage_gateway_dialog.vue
+++ b/packages/playground/src/components/manage_gateway_dialog.vue
@@ -227,13 +227,13 @@
 </template>
 
 <script lang="ts">
+import type { GridClient } from "@threefold/grid_client";
 import { onMounted, type PropType, ref } from "vue";
 
-import { useProfileManager } from "../stores";
+import { useGrid } from "../stores";
 import { ProjectName } from "../types";
 import type { SelectionDetails } from "../types/nodeSelector";
 import { deployGatewayName, type GridGateway, loadDeploymentGateways } from "../utils/gateway";
-import { getGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
 import { generateName } from "../utils/strings";
 import IconActionBtn from "./icon_action_btn.vue";
@@ -247,7 +247,6 @@ export default {
     vm: { type: Array as PropType<any>, required: true },
   },
   setup(props) {
-    const profileManager = useProfileManager();
     const layout = useLayout();
     const gatewayTab = ref(0);
 
@@ -261,9 +260,10 @@ export default {
 
     const ip = props.vm.interfaces[0].ip as string;
     const networkName = props.vm.interfaces[0].network as string;
+    const gridStore = useGrid();
+    const grid = gridStore.client as GridClient;
 
     onMounted(async () => {
-      const grid = await getGrid(profileManager.profile!);
       oldPrefix.value =
         (props.vm.projectName.toLowerCase().includes(ProjectName.Fullvm.toLowerCase()) ? "fvm" : "vm") +
         grid!.config.twinId;
@@ -281,7 +281,6 @@ export default {
         gateways.value = [];
         gatewaysToDelete.value = [];
         loadingGateways.value = true;
-        const grid = await getGrid(profileManager.profile!, props.vm.projectName);
         const { gateways: gws, failedToList } = await loadDeploymentGateways(grid!);
         gateways.value = gws;
         failedToListGws.value = failedToList;
@@ -297,7 +296,6 @@ export default {
 
       try {
         const [x, y] = ip.split(".");
-        const grid = await getGrid(profileManager.profile!, props.vm.projectName);
 
         const data = {
           name: networkName,
@@ -330,7 +328,6 @@ export default {
     const deleting = ref(false);
     async function deleteSelectedGateways() {
       deleting.value = true;
-      const grid = await getGrid(profileManager.profile!, props.vm.projectName);
       const deletedGateways = new Set<GridGateway>();
       for (const gw of gatewaysToDelete.value) {
         await grid!.gateway
@@ -347,8 +344,6 @@ export default {
     }
 
     return {
-      profileManager,
-
       oldPrefix,
       prefix,
       layout,
diff --git a/packages/playground/src/components/manage_k8s_worker_dialog.vue b/packages/playground/src/components/manage_k8s_worker_dialog.vue
index c549d1361f..5432b4553e 100644
--- a/packages/playground/src/components/manage_k8s_worker_dialog.vue
+++ b/packages/playground/src/components/manage_k8s_worker_dialog.vue
@@ -48,18 +48,17 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 
-import { useProfileManager } from "../stores";
+import { useGrid } from "../stores";
 import { deleteWorker, deployWorker, loadK8S } from "../utils/deploy_k8s";
-import { getGrid } from "../utils/grid";
 
 const props = defineProps<{ data: K8S }>();
 const emits = defineEmits<{ (event: "close"): void; (event: "update:k8s", data: any): void }>();
 
-const profileManager = useProfileManager();
-
 const worker = ref(createWorker());
 const selectedWorkers = ref<any[]>([]);
 const deleting = ref(false);
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 function calcDiskSize(disks: { size: number }[]) {
   return disks.reduce((t, d) => t + d.size, 0) / 1024 ** 3;
@@ -67,7 +66,6 @@ function calcDiskSize(disks: { size: number }[]) {
 
 async function deploy(layout: any) {
   layout.setStatus("deploy");
-  const grid = await getGrid(profileManager.profile!, props.data.projectName);
 
   deployWorker(grid!, {
     ...worker.value,
@@ -86,7 +84,6 @@ async function deploy(layout: any) {
 
 async function onDelete(cb: (workers: any[]) => void) {
   deleting.value = true;
-  const grid = await getGrid(profileManager.profile!, props.data.projectName);
 
   for (const worker of selectedWorkers.value) {
     try {
@@ -108,6 +105,8 @@ async function onDelete(cb: (workers: any[]) => void) {
 </script>
 
 <script lang="ts">
+import type { GridClient } from "@threefold/grid_client";
+
 import ListTable from "../components/list_table.vue";
 import type { K8S } from "../utils/load_deployment";
 import K8SWorker, { createWorker } from "./k8s_worker.vue";
diff --git a/packages/playground/src/components/select_gateway_node.vue b/packages/playground/src/components/select_gateway_node.vue
index 38b21a3fdf..a2d0ee363d 100644
--- a/packages/playground/src/components/select_gateway_node.vue
+++ b/packages/playground/src/components/select_gateway_node.vue
@@ -45,16 +45,15 @@
 </template>
 
 <script lang="ts" setup>
-import type { FilterOptions } from "@threefold/grid_client";
+import type { FilterOptions, GridClient } from "@threefold/grid_client";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 
 import { ValidatorStatus } from "@/hooks/form_validator";
 
-import { useProfileManager } from "../stores";
+import { useGrid } from "../stores";
 import type { GatewayNode } from "../types";
 import type { FarmInterface } from "../types";
 import { loadGatewayNodes } from "../utils/gateway";
-import { getGrid } from "../utils/grid";
 
 const props = defineProps<{
   modelValue?: GatewayNode;
@@ -64,14 +63,14 @@ const props = defineProps<{
 }>();
 const emits = defineEmits<{ (event: "update:model-value", value: GatewayNode | undefined): void }>();
 
-const profileManager = useProfileManager();
-
 const loading = ref(false);
 const items = ref<any[]>([]);
 const page = ref(1);
 const size = 50;
 const validator = ref();
 const gatewayOption = ref("");
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 onMounted(loadNextPage);
 onUnmounted(() => emits("update:model-value", undefined));
@@ -88,7 +87,6 @@ watch(
 async function loadNextPage() {
   loading.value = true;
   validator.value?.setStatus(ValidatorStatus.Init);
-  const grid = await getGrid(profileManager.profile!);
   let nodes = [];
   gatewayOption.value = "farm";
   const options: gatewayFilters = {
diff --git a/packages/playground/src/components/tf_notification.vue b/packages/playground/src/components/tf_notification.vue
index 3e4b83baea..d24622a63c 100644
--- a/packages/playground/src/components/tf_notification.vue
+++ b/packages/playground/src/components/tf_notification.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { ContractStates, type GqlContracts, type GqlNodeContract, type GqlRentContract } from "@threefold/grid_client";
-import type { GridNode } from "@threefold/gridproxy_client";
 import uniq from "lodash/fp/uniq.js";
 import { onMounted, ref } from "vue";
 
diff --git a/packages/playground/src/components/withdraw_dialog.vue b/packages/playground/src/components/withdraw_dialog.vue
index 74330301ee..753fa48e2c 100644
--- a/packages/playground/src/components/withdraw_dialog.vue
+++ b/packages/playground/src/components/withdraw_dialog.vue
@@ -73,9 +73,8 @@ import { StrKey } from "stellar-sdk";
 import { onMounted, ref } from "vue";
 
 import { useProfileManagerController } from "../components/profile_manager_controller.vue";
-import { useProfileManager } from "../stores";
+import { useGrid } from "../stores";
 import { createCustomToast, ToastType } from "../utils/custom_toast";
-import { getGrid } from "../utils/grid";
 import { isValidStellarAddress } from "../utils/validators";
 const withdrawDialog = ref(false);
 const targetError = ref("");
@@ -84,9 +83,10 @@ const valid = ref(false);
 const validatingAddress = ref(false);
 const loadingWithdraw = ref(false);
 const ProfileManagerController = useProfileManagerController();
-const profileManager = useProfileManager();
 const amount = ref(2);
 const emits = defineEmits(["close"]);
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 const props = defineProps({
   selectedName: String,
@@ -130,7 +130,7 @@ async function validateAddress() {
 async function withdrawTFT(targetAddress: string, withdrawAmount: number) {
   loadingWithdraw.value = true;
   try {
-    const grid = await getGrid(profileManager.profile!);
+    updateGrid(grid, { projectName: "" });
     await grid?.bridge.swapToStellar({ amount: +withdrawAmount, target: targetAddress });
 
     await ProfileManagerController.reloadBalance();
@@ -150,8 +150,11 @@ const closeDialog = () => {
 };
 </script>
 <script lang="ts">
+import type { GridClient } from "@threefold/grid_client";
 import { defineComponent } from "vue";
 
+import { updateGrid } from "../utils/grid";
+
 export default defineComponent({
   name: "WithdrawDialog",
 });
diff --git a/packages/playground/src/dashboard/components/reserve_action_btn.vue b/packages/playground/src/dashboard/components/reserve_action_btn.vue
index 5d3a14a877..b4046be900 100644
--- a/packages/playground/src/dashboard/components/reserve_action_btn.vue
+++ b/packages/playground/src/dashboard/components/reserve_action_btn.vue
@@ -47,16 +47,18 @@
 </template>
 
 <script lang="ts">
+import type { GridClient } from "@threefold/grid_client";
 import type { GridNode } from "@threefold/gridproxy_client";
 import { InsufficientBalanceError } from "@threefold/types";
 import { computed, type PropType, ref, watch } from "vue";
 
 import { useProfileManager } from "@/stores";
 import { createCustomToast, ToastType } from "@/utils/custom_toast";
-import { getGrid } from "@/utils/grid";
 import { notifyDelaying } from "@/utils/notifications";
 
 import { useProfileManagerController } from "../../components/profile_manager_controller.vue";
+import { useGrid } from "../../stores";
+import { updateGrid } from "../../utils/grid";
 
 export default {
   name: "ReserveBtn",
@@ -80,6 +82,8 @@ export default {
     const hasInsufficientBalance = ref(false);
     const balance = profileManagerController.balance;
     const freeBalance = computed(() => balance.value?.free ?? 0);
+    const gridStore = useGrid();
+    const grid = gridStore.client as GridClient;
 
     watch(
       freeBalance,
@@ -100,7 +104,7 @@ export default {
     async function unReserveNode() {
       loadingUnreserveNode.value = true;
       try {
-        const grid = await getGrid(profile.value!);
+        updateGrid(grid, { projectName: "" });
         createCustomToast(`Verify contracts for node ${props.node.nodeId}`, ToastType.info);
 
         const result = (await grid?.contracts.getActiveContracts({ nodeId: +props.node.nodeId })) as any;
@@ -139,7 +143,6 @@ export default {
       try {
         if (profile.value) {
           loadingReserveNode.value = true;
-          const grid = await getGrid(profile.value);
           createCustomToast("Transaction Submitted", ToastType.info);
           await grid?.nodes.reserve({ nodeId: +props.node.nodeId });
           createCustomToast(`Transaction succeeded node ${props.node.nodeId} Reserved`, ToastType.success);
diff --git a/packages/playground/src/dashboard/dao_view.vue b/packages/playground/src/dashboard/dao_view.vue
index 663a8660c1..fcd0a461db 100644
--- a/packages/playground/src/dashboard/dao_view.vue
+++ b/packages/playground/src/dashboard/dao_view.vue
@@ -254,6 +254,7 @@
   </div>
 </template>
 <script lang="ts" setup>
+import type { GridClient } from "@threefold/grid_client";
 import type { Proposal, Proposals } from "@threefold/tfchain_client";
 import type moment from "moment";
 import { createToast } from "mosha-vue-toastify";
@@ -261,10 +262,10 @@ import { onMounted, ref } from "vue";
 
 import { manual } from "@/utils/manual";
 
-import { useProfileManager } from "../stores";
+import { useGrid, useProfileManager } from "../stores";
 import type { FarmInterface } from "../types";
 import { getFarms } from "../utils/get_farms";
-import { getGrid } from "../utils/grid";
+import { updateGrid } from "../utils/grid";
 
 const loadingProposals = ref(true);
 const activeTab = ref(0);
@@ -288,8 +289,11 @@ const tabs = [
   { title: "Executable", content: inactiveProposals },
 ];
 
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
+
 onMounted(async () => {
-  const grid = await getGrid(profile.value);
+  updateGrid(grid, { projectName: "" });
 
   if (grid) {
     proposals.value = await grid?.dao.get();
@@ -318,7 +322,6 @@ function filteredProposals(proposals: Proposal[] | undefined) {
 }
 async function castVote() {
   loadingVote.value = true;
-  const grid = await getGrid(profile.value);
 
   if (grid) {
     try {
diff --git a/packages/playground/src/utils/contracts.ts b/packages/playground/src/utils/contracts.ts
index 5ef4e72c58..bee5734e34 100644
--- a/packages/playground/src/utils/contracts.ts
+++ b/packages/playground/src/utils/contracts.ts
@@ -139,7 +139,7 @@ export type ContractsTableType = {
   type: ContractType;
   icon: string;
   title: string;
-  grid: Ref<GridClient | undefined>;
+  grid: GridClient;
   contracts: Ref<NormalizedContract[]>;
   loading: Ref<boolean>;
 };
diff --git a/packages/playground/src/weblets/freeflow.vue b/packages/playground/src/weblets/freeflow.vue
index 4f5fb02277..33c25debff 100644
--- a/packages/playground/src/weblets/freeflow.vue
+++ b/packages/playground/src/weblets/freeflow.vue
@@ -87,17 +87,15 @@ import { computed, onMounted, type Ref, ref } from "vue";
 import { manual } from "@/utils/manual";
 
 import { useLayout } from "../components/weblet_layout.vue";
-import { useProfileManager } from "../stores";
+import { useGrid } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM, type Disk } from "../utils/deploy_vm";
 import { deployGatewayName, rollbackDeployment } from "../utils/gateway";
-import { getGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
 
 const layout = useLayout();
 const valid = ref(false);
-const profileManager = useProfileManager();
 
 const threebotName = ref<string>("");
 const solution = ref() as Ref<SolutionFlavor>;
@@ -109,6 +107,8 @@ const ipv4 = ref(false);
 const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solution.value?.memory ?? 0));
 const selectionDetails = ref<SelectionDetails>();
 const selectedSSHKeys = ref("");
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 onMounted(() => {
   disks.value.push({
@@ -138,12 +138,11 @@ async function deploy() {
     ? selectionDetails.value!.domain!.customDomain
     : threebotName.value + "." + selectionDetails.value!.domain!.selectedDomain!.publicConfig.domain;
 
-  let grid: GridClient | null;
   let vm: any;
 
   try {
     layout.value?.validateSSH();
-    grid = await getGrid(profileManager.profile!, projectName);
+    updateGrid(grid, { projectName });
 
     await layout.value.validateBalance(grid!);
 
@@ -215,6 +214,7 @@ import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
+import { updateGrid } from "../utils/grid";
 import rootFs from "../utils/root_fs";
 
 export default {
diff --git a/packages/playground/src/weblets/full_vm.vue b/packages/playground/src/weblets/full_vm.vue
index 4ddf90c3d8..d9c9226fbd 100644
--- a/packages/playground/src/weblets/full_vm.vue
+++ b/packages/playground/src/weblets/full_vm.vue
@@ -147,11 +147,10 @@ import { manual } from "@/utils/manual";
 
 import Network from "../components/networks.vue";
 import { useLayout } from "../components/weblet_layout.vue";
-import { useProfileManager } from "../stores";
+import { useGrid, useProfileManager } from "../stores";
 import type { solutionFlavor as SolutionFlavor } from "../types";
 import { type Flist, ProjectName } from "../types";
 import { deployVM, type Disk } from "../utils/deploy_vm";
-import { getGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
 import { generateName } from "../utils/strings";
 
@@ -198,6 +197,9 @@ const disks = ref<Disk[]>([]);
 const network = ref();
 const hasGPU = ref(false);
 const rootFilesystemSize = 2;
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
+
 function addDisk() {
   const name = generateName();
   disks.value.push({
@@ -234,7 +236,7 @@ async function deploy() {
 
   try {
     layout.value?.validateSSH();
-    const grid = await getGrid(profileManager.profile!, projectName);
+    updateGrid(grid, { projectName });
 
     await layout.value.validateBalance(grid!);
 
@@ -278,12 +280,15 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
+import type { GridClient } from "@threefold/grid_client";
+
 import ExpandableLayout from "../components/expandable_layout.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SelectVmImage, { type VmImage } from "../components/select_vm_image.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
+import { updateGrid } from "../utils/grid";
 
 export default {
   name: "FullVm",
diff --git a/packages/playground/src/weblets/micro_vm.vue b/packages/playground/src/weblets/micro_vm.vue
index bb238e032d..c1813b109b 100644
--- a/packages/playground/src/weblets/micro_vm.vue
+++ b/packages/playground/src/weblets/micro_vm.vue
@@ -189,15 +189,13 @@ import { manual } from "@/utils/manual";
 import Network from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import { useLayout } from "../components/weblet_layout.vue";
-import { useProfileManager } from "../stores";
+import { useGrid } from "../stores";
 import { type Flist, ProjectName } from "../types";
 import { deployVM, type Disk, type Env } from "../utils/deploy_vm";
-import { getGrid } from "../utils/grid";
 import { generateName } from "../utils/strings";
 
 const layout = useLayout();
 const tabs = ref();
-const profileManager = useProfileManager();
 
 const images = [
   {
@@ -242,6 +240,8 @@ const certified = ref(false);
 const rootFilesystemSize = computed(() => solution.value?.disk);
 const selectionDetails = ref<SelectionDetails>();
 const selectedSSHKeys = ref("");
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 function layoutMount() {
   if (envs.value.length > 0) {
@@ -269,7 +269,7 @@ async function deploy() {
   const projectName = ProjectName.VM.toLowerCase() + "/" + name.value;
 
   try {
-    const grid = await getGrid(profileManager.profile!, projectName);
+    updateGrid(grid, { projectName });
 
     await layout.value.validateBalance(grid!);
 
@@ -313,12 +313,14 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
+import type { GridClient } from "@threefold/grid_client";
+
 import ExpandableLayout from "../components/expandable_layout.vue";
 import SelectVmImage from "../components/select_vm_image.vue";
-import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { solutionFlavor as SolutionFlavor } from "../types";
 import type { SelectionDetails } from "../types/nodeSelector";
+import { updateGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
 
 const solution = ref() as Ref<SolutionFlavor>;
diff --git a/packages/playground/src/weblets/tf_algorand.vue b/packages/playground/src/weblets/tf_algorand.vue
index ea8b7cd60b..dac891d67f 100644
--- a/packages/playground/src/weblets/tf_algorand.vue
+++ b/packages/playground/src/weblets/tf_algorand.vue
@@ -184,10 +184,9 @@ import { computed, type Ref, ref, watch } from "vue";
 import { manual } from "@/utils/manual";
 
 import { useLayout } from "../components/weblet_layout.vue";
-import { useProfileManager } from "../stores";
+import { useGrid, useProfileManager } from "../stores";
 import { type Flist, ProjectName, type Validators } from "../types";
 import { deployVM } from "../utils/deploy_vm";
-import { getGrid } from "../utils/grid";
 import { generateName } from "../utils/strings";
 
 const layout = useLayout();
@@ -215,6 +214,8 @@ const certified = ref(false);
 const rootFilesystemSize = computed(() => storage.value);
 const selectionDetails = ref<SelectionDetails>();
 const selectedSSHKeys = ref("");
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 watch(firstRound, () => lastRoundInput.value.validate(lastRound.value.toString()));
 
@@ -225,7 +226,7 @@ async function deploy() {
 
   try {
     layout.value?.validateSSH();
-    const grid = await getGrid(profileManager.profile!, projectName);
+    updateGrid(grid, { projectName });
 
     await layout.value.validateBalance(grid!);
 
@@ -298,11 +299,14 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
+import type { GridClient } from "@threefold/grid_client";
+
 import AlgorandCapacity from "../components/algorand_capacity.vue";
 import Networks from "../components/networks.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
+import { updateGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
 
 export default {
diff --git a/packages/playground/src/weblets/tf_caprover.vue b/packages/playground/src/weblets/tf_caprover.vue
index d6f599860f..a4d2296485 100644
--- a/packages/playground/src/weblets/tf_caprover.vue
+++ b/packages/playground/src/weblets/tf_caprover.vue
@@ -98,10 +98,9 @@ import { ref } from "vue";
 import { manual } from "@/utils/manual";
 
 import { useLayout } from "../components/weblet_layout.vue";
-import { useProfileManager } from "../stores";
+import { useGrid, useProfileManager } from "../stores";
 import { type CaproverWorker as CW, ProjectName } from "../types";
 import { deployVM, type Env, type Machine } from "../utils/deploy_vm";
-import { getGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
 import { generateName, generatePassword } from "../utils/strings";
 
@@ -113,6 +112,8 @@ const password = ref(generatePassword(10));
 const leader = ref(createWorker(generateName({ prefix: "cr" })));
 const workers = ref<CW[]>([]);
 const selectedSSHKeys = ref("");
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 async function deploy() {
   layout.value.setStatus("deploy");
@@ -121,7 +122,7 @@ async function deploy() {
 
   try {
     layout.value?.validateSSH();
-    const grid = await getGrid(profileManager.profile!, projectName);
+    updateGrid(grid, { projectName });
 
     await layout.value.validateBalance(grid!);
 
@@ -189,12 +190,15 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
+import type { GridClient } from "@threefold/grid_client";
+
 import { createNetwork } from "@/utils/deploy_helpers";
 
 import CaproverWorker, { createWorker } from "../components/caprover_worker.vue";
 import ExpandableLayout from "../components/expandable_layout.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
+import { updateGrid } from "../utils/grid";
 import rootFs from "../utils/root_fs";
 
 export default {
diff --git a/packages/playground/src/weblets/tf_casperlabs.vue b/packages/playground/src/weblets/tf_casperlabs.vue
index 1afaaa6d8d..545824d36a 100644
--- a/packages/playground/src/weblets/tf_casperlabs.vue
+++ b/packages/playground/src/weblets/tf_casperlabs.vue
@@ -77,12 +77,11 @@ import { computed, type Ref, ref } from "vue";
 import { manual } from "@/utils/manual";
 
 import { useLayout } from "../components/weblet_layout.vue";
-import { useProfileManager } from "../stores";
+import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/gateway";
-import { getGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
 import { generateName } from "../utils/strings";
 
@@ -103,6 +102,8 @@ const mycelium = ref(false);
 const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solution.value?.memory ?? 0));
 const selectionDetails = ref<SelectionDetails>();
 const selectedSSHKeys = ref("");
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 function finalize(deployment: any) {
   layout.value.reloadDeploymentsList();
@@ -125,12 +126,11 @@ async function deploy() {
     ? selectionDetails.value.domain.customDomain
     : subdomain + "." + selectionDetails.value?.domain?.selectedDomain?.publicConfig.domain;
 
-  let grid: GridClient | null;
   let vm: any;
 
   try {
     layout.value?.validateSSH();
-    grid = await getGrid(profileManager.profile!, projectName);
+    updateGrid(grid, { projectName });
 
     await layout.value.validateBalance(grid!);
 
@@ -201,6 +201,7 @@ import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
+import { updateGrid } from "../utils/grid";
 import rootFs from "../utils/root_fs";
 
 export default {
diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
index 2190a5ce06..4068e9dce0 100644
--- a/packages/playground/src/weblets/tf_contracts_list.vue
+++ b/packages/playground/src/weblets/tf_contracts_list.vue
@@ -79,14 +79,15 @@ import {
   type NormalizedContract,
 } from "@/utils/contracts";
 import { createCustomToast, ToastType } from "@/utils/custom_toast";
-import { getGrid } from "@/utils/grid";
 
 import { queryClient } from "../clients";
+import { useGrid } from "../stores";
+import { updateGrid } from "../utils/grid";
 
 const isLoading = ref<boolean>(false);
 const profileManager = useProfileManager();
-const grid = ref<GridClient>();
-
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 const contracts = ref<NormalizedContract[]>([]);
 const nameContracts = ref<NormalizedContract[]>([]);
 const nodeContracts = ref<NormalizedContract[]>([]);
@@ -112,14 +113,13 @@ async function onMount() {
   totalCost.value = undefined;
   totalCostUSD.value = undefined;
   loadingErrorMessage.value = undefined;
+  updateGrid(grid, { projectName: "" });
 
   if (profileManager.profile) {
-    const _grid = await getGrid(profileManager.profile);
-    if (_grid) {
-      grid.value = _grid;
+    if (grid) {
       try {
         // Fetch user contracts, node status, and calculate total cost
-        contracts.value = await getUserContracts(grid.value);
+        contracts.value = await getUserContracts(grid);
         nodeInfo.value = await getNodeInfo(nodeIDs.value);
         contracts.value.map(contract => {
           const { nodeId } = contract;
diff --git a/packages/playground/src/weblets/tf_discourse.vue b/packages/playground/src/weblets/tf_discourse.vue
index e2b6ade85c..2b29a3c1ff 100644
--- a/packages/playground/src/weblets/tf_discourse.vue
+++ b/packages/playground/src/weblets/tf_discourse.vue
@@ -106,12 +106,11 @@ import { computed, type Ref, ref } from "vue";
 import { manual } from "@/utils/manual";
 
 import { useLayout } from "../components/weblet_layout.vue";
-import { useProfileManager } from "../stores";
+import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/gateway";
-import { getGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
 import rootFs from "../utils/root_fs";
 import { generateName, generatePassword } from "../utils/strings";
@@ -134,6 +133,8 @@ const flist: Flist = {
   entryPoint: "/sbin/zinit init",
 };
 const selectedSSHKeys = ref("");
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 function finalize(deployment: any) {
   layout.value.reloadDeploymentsList();
@@ -156,12 +157,11 @@ async function deploy() {
     ? selectionDetails.value.domain.customDomain
     : subdomain + "." + selectionDetails.value?.domain?.selectedDomain?.publicConfig.domain;
 
-  let grid: GridClient | null;
   let vm: any;
 
   try {
     layout.value?.validateSSH();
-    grid = await getGrid(profileManager.profile!, projectName);
+    updateGrid(grid, { projectName });
     await layout.value.validateBalance(grid!);
 
     vm = await deployVM(grid!, {
@@ -245,6 +245,7 @@ import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
+import { updateGrid } from "../utils/grid";
 
 export default {
   name: "TfDiscourse",
diff --git a/packages/playground/src/weblets/tf_funkwhale.vue b/packages/playground/src/weblets/tf_funkwhale.vue
index ef1cde52c1..c7b5693390 100644
--- a/packages/playground/src/weblets/tf_funkwhale.vue
+++ b/packages/playground/src/weblets/tf_funkwhale.vue
@@ -127,12 +127,11 @@ import { computed, type Ref, ref } from "vue";
 import { manual } from "@/utils/manual";
 
 import { useLayout } from "../components/weblet_layout.vue";
-import { useProfileManager } from "../stores";
+import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/gateway";
-import { getGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
 import { generateName, generatePassword } from "../utils/strings";
 
@@ -154,6 +153,8 @@ const certified = ref(false);
 const ipv4 = ref(false);
 const mycelium = ref(false);
 const selectionDetails = ref<SelectionDetails>();
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 function finalize(deployment: any) {
   layout.value.reloadDeploymentsList();
@@ -175,12 +176,11 @@ async function deploy() {
     ? selectionDetails.value.domain.customDomain
     : subdomain + "." + selectionDetails.value?.domain?.selectedDomain?.publicConfig.domain;
 
-  let grid: GridClient | null;
   let vm: any;
 
   try {
     layout.value?.validateSSH();
-    grid = await getGrid(profileManager.profile!, projectName);
+    updateGrid(grid, { projectName });
 
     await layout.value.validateBalance(grid!);
 
@@ -253,6 +253,7 @@ import Networks from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
+import { updateGrid } from "../utils/grid";
 import rootFs from "../utils/root_fs";
 
 export default {
diff --git a/packages/playground/src/weblets/tf_kubernetes.vue b/packages/playground/src/weblets/tf_kubernetes.vue
index b289f3e35e..8f78fc9380 100644
--- a/packages/playground/src/weblets/tf_kubernetes.vue
+++ b/packages/playground/src/weblets/tf_kubernetes.vue
@@ -86,21 +86,21 @@ import { ref } from "vue";
 
 import { createWorker } from "../components/k8s_worker.vue";
 import { useLayout } from "../components/weblet_layout.vue";
-import { useProfileManager } from "../stores";
+import { useGrid } from "../stores";
 import type { K8SWorker as K8sWorker } from "../types";
 import { ProjectName } from "../types";
 import { deployK8s } from "../utils/deploy_k8s";
-import { getGrid } from "../utils/grid";
 import { generateName, generatePassword } from "../utils/strings";
 
 const layout = useLayout();
 const tabs = ref();
-const profileManager = useProfileManager();
 const name = ref(generateName({ prefix: "k8s" }));
 const clusterToken = ref(generatePassword(10));
 const master = ref(createWorker(generateName({ prefix: "mr" })));
 const workers = ref<K8sWorker[]>([]);
 const selectedSSHKeys = ref("");
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 function addWorker() {
   workers.value.push(createWorker());
@@ -112,8 +112,7 @@ async function deploy() {
   try {
     layout.value?.validateSSH();
     const projectName = ProjectName.Kubernetes.toLowerCase() + "/" + name.value;
-    const grid = await getGrid(profileManager.profile!, projectName);
-
+    updateGrid(grid, { projectName });
     await layout.value.validateBalance(grid!);
 
     const k8s = await deployK8s(grid!, {
@@ -138,10 +137,13 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
+import type { GridClient } from "@threefold/grid_client";
+
 import ExpandableLayout from "../components/expandable_layout.vue";
 import K8SWorker from "../components/k8s_worker.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
+import { updateGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
 
 export default {
diff --git a/packages/playground/src/weblets/tf_mattermost.vue b/packages/playground/src/weblets/tf_mattermost.vue
index 55ded8577d..5a6f633933 100644
--- a/packages/playground/src/weblets/tf_mattermost.vue
+++ b/packages/playground/src/weblets/tf_mattermost.vue
@@ -87,12 +87,11 @@ import { computed, type Ref, ref } from "vue";
 import { manual } from "@/utils/manual";
 
 import { useLayout } from "../components/weblet_layout.vue";
-import { useProfileManager } from "../stores";
+import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/gateway";
-import { getGrid } from "../utils/grid";
 import { generateName, generatePassword } from "../utils/strings";
 
 const layout = useLayout();
@@ -113,6 +112,8 @@ const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solut
 const selectionDetails = ref<SelectionDetails>();
 const mycelium = ref(false);
 const selectedSSHKeys = ref("");
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 function finalize(deployment: any) {
   layout.value.reloadDeploymentsList();
@@ -135,12 +136,11 @@ async function deploy() {
     ? selectionDetails.value.domain.customDomain
     : subdomain + "." + selectionDetails.value?.domain?.selectedDomain?.publicConfig.domain;
 
-  let grid: GridClient | null;
   let vm: any;
 
   try {
     layout.value?.validateSSH();
-    grid = await getGrid(profileManager.profile!, projectName);
+    updateGrid(grid, { projectName });
 
     await layout.value.validateBalance(grid!);
 
@@ -221,6 +221,8 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
+import { updateGrid } from "@/utils/grid";
+
 import Networks from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
diff --git a/packages/playground/src/weblets/tf_nextcloud.vue b/packages/playground/src/weblets/tf_nextcloud.vue
index 3b38bb2083..a19173805e 100644
--- a/packages/playground/src/weblets/tf_nextcloud.vue
+++ b/packages/playground/src/weblets/tf_nextcloud.vue
@@ -76,12 +76,11 @@ import { computed, type Ref, ref } from "vue";
 import { manual } from "@/utils/manual";
 
 import { useLayout } from "../components/weblet_layout.vue";
-import { useProfileManager } from "../stores";
+import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/gateway";
-import { getGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
 import { generateName } from "../utils/strings";
 
@@ -102,6 +101,8 @@ const mycelium = ref(false);
 const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solution.value?.memory ?? 0));
 const selectionDetails = ref<SelectionDetails>();
 const selectedSSHKeys = ref("");
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 function finalize(deployment: any) {
   layout.value.reloadDeploymentsList();
@@ -130,12 +131,11 @@ async function deploy() {
   const has_gateway = !(selectionDetails.value!.domain!.enabledCustomDomain && ipv4.value);
   const aio_link = domain + "/aio";
 
-  let grid: GridClient | null;
   let vm: any;
 
   try {
     layout.value?.validateSSH();
-    grid = await getGrid(profileManager.profile!, projectName);
+    updateGrid(grid, { projectName });
 
     await layout.value.validateBalance(grid!);
 
@@ -214,6 +214,7 @@ import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
+import { updateGrid } from "../utils/grid";
 import rootFs from "../utils/root_fs";
 
 export default {
diff --git a/packages/playground/src/weblets/tf_node_pilot.vue b/packages/playground/src/weblets/tf_node_pilot.vue
index df8a0d801c..7fa784d03e 100644
--- a/packages/playground/src/weblets/tf_node_pilot.vue
+++ b/packages/playground/src/weblets/tf_node_pilot.vue
@@ -99,14 +99,12 @@ import { ref } from "vue";
 import { manual } from "@/utils/manual";
 
 import { useLayout } from "../components/weblet_layout.vue";
-import { useProfileManager } from "../stores";
+import { useGrid } from "../stores";
 import { type Flist, ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
-import { getGrid } from "../utils/grid";
 import { generateName } from "../utils/strings";
 const layout = useLayout();
 const valid = ref(false);
-const profileManager = useProfileManager();
 const name = ref(generateName({ prefix: "np" }));
 const cpu = ref(8);
 const memory = ref(8192);
@@ -119,6 +117,8 @@ const certified = ref(false);
 const rootFilesystemSize = 2;
 const selectionDetails = ref<SelectionDetails>();
 const selectedSSHKeys = ref("");
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 async function deploy() {
   layout.value.setStatus("deploy");
@@ -127,7 +127,7 @@ async function deploy() {
 
   try {
     layout.value?.validateSSH();
-    const grid = await getGrid(profileManager.profile!, projectName);
+    updateGrid(grid, { projectName });
 
     await layout.value.validateBalance(grid!);
 
@@ -176,9 +176,12 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
+import type { GridClient } from "@threefold/grid_client";
+
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
+import { updateGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
 
 export default {
diff --git a/packages/playground/src/weblets/tf_owncloud.vue b/packages/playground/src/weblets/tf_owncloud.vue
index 2ab92d523f..19304199a6 100644
--- a/packages/playground/src/weblets/tf_owncloud.vue
+++ b/packages/playground/src/weblets/tf_owncloud.vue
@@ -126,12 +126,11 @@ import { computed, type Ref, ref } from "vue";
 import { manual } from "@/utils/manual";
 
 import { useLayout } from "../components/weblet_layout.vue";
-import { useProfileManager } from "../stores";
+import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/gateway";
-import { getGrid } from "../utils/grid";
 import { generateName, generatePassword } from "../utils/strings";
 
 const selectionDetails = ref<SelectionDetails>();
@@ -155,6 +154,8 @@ const mycelium = ref(false);
 const smtp = ref(createSMTPServer());
 const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solution.value?.memory ?? 0));
 const selectedSSHKeys = ref("");
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 function finalize(deployment: any) {
   layout.value.reloadDeploymentsList();
@@ -176,13 +177,11 @@ async function deploy() {
     ? selectionDetails.value.domain.customDomain
     : subdomain + "." + selectionDetails.value?.domain?.selectedDomain?.publicConfig.domain;
 
-  let grid: GridClient | null;
   let vm: any;
 
   try {
     layout.value?.validateSSH();
-    grid = await getGrid(profileManager.profile!, projectName);
-
+    updateGrid(grid, { projectName });
     await layout.value.validateBalance(grid!);
 
     vm = await deployVM(grid!, {
@@ -274,6 +273,7 @@ import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
+import { updateGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
 import rootFs from "../utils/root_fs";
 
diff --git a/packages/playground/src/weblets/tf_peertube.vue b/packages/playground/src/weblets/tf_peertube.vue
index 40de2fde45..3bee0a0412 100644
--- a/packages/playground/src/weblets/tf_peertube.vue
+++ b/packages/playground/src/weblets/tf_peertube.vue
@@ -103,7 +103,7 @@ import { computed, type Ref, ref } from "vue";
 import { manual } from "@/utils/manual";
 
 import { useLayout } from "../components/weblet_layout.vue";
-import { useProfileManager } from "../stores";
+import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
@@ -128,6 +128,8 @@ const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solut
 const selectionDetails = ref<SelectionDetails>();
 const mycelium = ref(false);
 const selectedSSHKeys = ref("");
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 function finalize(deployment: any) {
   layout.value.reloadDeploymentsList();
@@ -149,13 +151,11 @@ async function deploy() {
     ? selectionDetails.value.domain.customDomain
     : subdomain + "." + selectionDetails.value?.domain?.selectedDomain?.publicConfig.domain;
 
-  let grid: GridClient | null;
   let vm: any;
 
   try {
     layout.value?.validateSSH();
-    grid = await getGrid(profileManager.profile!, projectName);
-
+    updateGrid(grid, { projectName });
     await layout.value.validateBalance(grid!);
 
     vm = await deployVM(grid!, {
@@ -233,7 +233,7 @@ import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
-import { getGrid } from "../utils/grid";
+import { updateGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
 import rootFs from "../utils/root_fs";
 
diff --git a/packages/playground/src/weblets/tf_presearch.vue b/packages/playground/src/weblets/tf_presearch.vue
index 0280c0d24c..93ec2746c1 100644
--- a/packages/playground/src/weblets/tf_presearch.vue
+++ b/packages/playground/src/weblets/tf_presearch.vue
@@ -113,17 +113,15 @@ import { manual } from "@/utils/manual";
 
 import Network from "../components/networks.vue";
 import { useLayout } from "../components/weblet_layout.vue";
-import { useProfileManager } from "../stores";
+import { useGrid } from "../stores";
 import { type Flist, ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
-import { getGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
 import rootFs from "../utils/root_fs";
 import { generateName } from "../utils/strings";
 
 const layout = useLayout();
 const tabs = ref();
-const profileManager = useProfileManager();
 const name = ref(generateName({ prefix: "ps" }));
 const code = ref("");
 const ipv4 = ref(false);
@@ -144,6 +142,8 @@ const certified = ref(false);
 const selectionDetails = ref<SelectionDetails>();
 const mycelium = ref(false);
 const selectedSSHKeys = ref("");
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 async function deploy() {
   layout.value.setStatus("deploy");
@@ -152,8 +152,7 @@ async function deploy() {
 
   try {
     layout.value?.validateSSH();
-    const grid = await getGrid(profileManager.profile!, projectName);
-
+    updateGrid(grid, { projectName });
     await layout.value.validateBalance(grid!);
 
     const vm = await deployVM(grid!, {
@@ -215,9 +214,12 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
+import type { GridClient } from "@threefold/grid_client";
+
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
+import { updateGrid } from "../utils/grid";
 
 export default {
   name: "TFPresearch",
diff --git a/packages/playground/src/weblets/tf_subsquid.vue b/packages/playground/src/weblets/tf_subsquid.vue
index f41c0d70ab..eee6c6df09 100644
--- a/packages/playground/src/weblets/tf_subsquid.vue
+++ b/packages/playground/src/weblets/tf_subsquid.vue
@@ -89,12 +89,11 @@ import { computed, type Ref, ref } from "vue";
 import { manual } from "@/utils/manual";
 
 import { useLayout } from "../components/weblet_layout.vue";
-import { useProfileManager } from "../stores";
+import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/gateway";
-import { getGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
 import { generateName } from "../utils/strings";
 
@@ -115,6 +114,8 @@ const certified = ref(false);
 const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solution.value?.memory ?? 0));
 const selectionDetails = ref<SelectionDetails>();
 const selectedSSHKeys = ref("");
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 function finalize(deployment: any) {
   layout.value.reloadDeploymentsList();
@@ -137,12 +138,11 @@ async function deploy() {
     ? selectionDetails.value.domain.customDomain
     : subdomain + "." + selectionDetails.value?.domain?.selectedDomain?.publicConfig.domain;
 
-  let grid: GridClient | null;
   let vm: any;
 
   try {
     layout.value?.validateSSH();
-    grid = await getGrid(profileManager.profile!, projectName);
+    updateGrid(grid, { projectName });
 
     await layout.value.validateBalance(grid!);
 
@@ -218,6 +218,7 @@ import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
+import { updateGrid } from "../utils/grid";
 import rootFs from "../utils/root_fs";
 
 export default {
diff --git a/packages/playground/src/weblets/tf_taiga.vue b/packages/playground/src/weblets/tf_taiga.vue
index 68a2434d12..5bdadcec9b 100644
--- a/packages/playground/src/weblets/tf_taiga.vue
+++ b/packages/playground/src/weblets/tf_taiga.vue
@@ -137,12 +137,11 @@ import { computed, type Ref, ref } from "vue";
 import { manual } from "@/utils/manual";
 
 import { useLayout } from "../components/weblet_layout.vue";
-import { useProfileManager } from "../stores";
+import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/gateway";
-import { getGrid } from "../utils/grid";
 import { generateName, generatePassword } from "../utils/strings";
 
 const layout = useLayout();
@@ -166,6 +165,8 @@ const smtp = ref(createSMTPServer());
 const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solution.value?.memory ?? 0));
 const selectionDetails = ref<SelectionDetails>();
 const selectedSSHKeys = ref("");
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 function finalize(deployment: any) {
   layout.value.reloadDeploymentsList();
@@ -188,12 +189,11 @@ async function deploy() {
     ? selectionDetails.value.domain.customDomain
     : subdomain + "." + selectionDetails.value?.domain?.selectedDomain?.publicConfig.domain;
 
-  let grid: GridClient | null;
   let vm: any;
 
   try {
     layout.value?.validateSSH();
-    grid = await getGrid(profileManager.profile!, projectName);
+    updateGrid(grid, { projectName });
 
     await layout.value.validateBalance(grid!);
 
@@ -283,6 +283,7 @@ import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
+import { updateGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
 import rootFs from "../utils/root_fs";
 
diff --git a/packages/playground/src/weblets/tf_umbrel.vue b/packages/playground/src/weblets/tf_umbrel.vue
index 125b7048af..876d6f4727 100644
--- a/packages/playground/src/weblets/tf_umbrel.vue
+++ b/packages/playground/src/weblets/tf_umbrel.vue
@@ -123,11 +123,10 @@ import { manual } from "@/utils/manual";
 
 import Network from "../components/networks.vue";
 import { useLayout } from "../components/weblet_layout.vue";
-import { useProfileManager } from "../stores";
+import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
-import { getGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
 import rootFs from "../utils/root_fs";
 import { generateName, generatePassword } from "../utils/strings";
@@ -153,6 +152,8 @@ const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solut
 const selectionDetails = ref<SelectionDetails>();
 const mycelium = ref(false);
 const selectedSSHKeys = ref("");
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 async function deploy() {
   layout.value.setStatus("deploy");
@@ -161,7 +162,7 @@ async function deploy() {
 
   try {
     layout.value?.validateSSH();
-    const grid = await getGrid(profileManager.profile!, projectName);
+    updateGrid(grid, { projectName });
 
     await layout.value.validateBalance(grid!);
 
@@ -218,6 +219,10 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
+import type { GridClient } from "@threefold/grid_client";
+
+import { updateGrid } from "@/utils/grid";
+
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
diff --git a/packages/playground/src/weblets/tf_wordpress.vue b/packages/playground/src/weblets/tf_wordpress.vue
index c9ec324506..9128ed6885 100644
--- a/packages/playground/src/weblets/tf_wordpress.vue
+++ b/packages/playground/src/weblets/tf_wordpress.vue
@@ -127,15 +127,15 @@
 import type { GridClient } from "@threefold/grid_client";
 import { computed, type Ref, ref } from "vue";
 
+import { updateGrid } from "@/utils/grid";
 import { manual } from "@/utils/manual";
 
 import { useLayout } from "../components/weblet_layout.vue";
-import { useProfileManager } from "../stores";
+import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/gateway";
-import { getGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
 import { generateName, generatePassword } from "../utils/strings";
 
@@ -158,7 +158,8 @@ const mycelium = ref(false);
 const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solution.value?.memory ?? 0));
 const selectionDetails = ref<SelectionDetails>();
 const selectedSSHKeys = ref("");
-
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 function finalize(deployment: any) {
   layout.value.reloadDeploymentsList();
   layout.value.setStatus("success", "Successfully deployed a Wordpress instance.");
@@ -168,6 +169,7 @@ async function deploy() {
   layout.value.setStatus("deploy");
 
   const projectName = ProjectName.Wordpress.toLowerCase() + "/" + name.value;
+  updateGrid(grid, { projectName });
 
   const subdomain = getSubdomain({
     deploymentName: name.value,
@@ -179,15 +181,12 @@ async function deploy() {
     ? selectionDetails.value.domain.customDomain
     : subdomain + "." + selectionDetails.value?.domain?.selectedDomain?.publicConfig.domain;
 
-  let grid: GridClient | null;
   let vm: any;
   try {
     layout.value?.validateSSH();
-    grid = await getGrid(profileManager.profile!, projectName);
-
-    await layout.value.validateBalance(grid!);
+    await layout.value.validateBalance(grid);
 
-    vm = await deployVM(grid!, {
+    vm = await deployVM(grid, {
       name: name.value,
       network: {
         addAccess: selectionDetails.value!.domain!.enableSelectedDomain,
@@ -246,7 +245,7 @@ async function deploy() {
   } catch (e) {
     layout.value.setStatus("deploy", "Rollbacking back due to fail to deploy gateway...");
 
-    await rollbackDeployment(grid!, name.value);
+    await rollbackDeployment(grid, name.value);
     layout.value.setStatus("failed", normalizeError(e, "Failed to deploy a Wordpress instance."));
   }
 }