From 1c4eccfb7952d65e441722cb269e0c2962d7ecbd Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Mon, 5 Jun 2023 13:24:39 +0300
Subject: [PATCH 1/3] Improve tfwallet balance ux

---
 packages/playground/src/weblets/profile_manager.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/playground/src/weblets/profile_manager.vue b/packages/playground/src/weblets/profile_manager.vue
index acd307e836..4edb83e93f 100644
--- a/packages/playground/src/weblets/profile_manager.vue
+++ b/packages/playground/src/weblets/profile_manager.vue
@@ -18,10 +18,10 @@
           </p>
           <template v-else-if="balance">
             <p>
-              Balance: <strong>{{ balance.free }} TFT</strong>
+              Balance: <strong :style="{ color: '#76e2c8' }">{{ balance.free }} TFT</strong>
             </p>
             <p>
-              Locked: <strong>{{ balance.locked }} TFT</strong>
+              Locked: <strong :style="{ color: '#76e2c8' }">{{ balance.locked }} TFT</strong>
             </p>
           </template>
         </div>

From c972c41807965aa551f571d4a6bfaf5b169d766a Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Thu, 8 Jun 2023 16:09:57 +0300
Subject: [PATCH 2/3] Remove no-data-default-text in vuetify table & set
 balance over the entire app to fixed(3)

---
 packages/playground/src/components/list_table.vue    | 1 +
 packages/playground/src/components/weblet_layout.vue | 4 ++--
 packages/playground/src/utils/contracts.ts           | 2 +-
 packages/playground/src/weblets/profile_manager.vue  | 4 ++--
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/playground/src/components/list_table.vue b/packages/playground/src/components/list_table.vue
index dc7ba3499a..e9280b5b3a 100644
--- a/packages/playground/src/components/list_table.vue
+++ b/packages/playground/src/components/list_table.vue
@@ -9,6 +9,7 @@
     hide-default-footer
     show-select
     v-model="selectedItems"
+    hide-no-data
   >
     <template #[`column.data-table-select`]>
       <v-checkbox-btn
diff --git a/packages/playground/src/components/weblet_layout.vue b/packages/playground/src/components/weblet_layout.vue
index 3841b26ba1..7d373e1b43 100644
--- a/packages/playground/src/components/weblet_layout.vue
+++ b/packages/playground/src/components/weblet_layout.vue
@@ -48,8 +48,8 @@
         v-if="showPrice"
       >
         Your deployment costs
-        <span class="font-weight-black">{{ costLoading ? "Calculating..." : tft }}</span> TFTs or
-        <span class="font-weight-black">{{ costLoading ? "Calculating..." : usd }}</span> USD/month
+        <span class="font-weight-black">{{ costLoading ? "Calculating..." : tft?.toFixed(3) }}</span> TFTs or
+        <span class="font-weight-black">{{ costLoading ? "Calculating..." : usd?.toFixed(3) }}</span> USD/month
         <a
           class="app-link text-decoration-underline"
           target="_blank"
diff --git a/packages/playground/src/utils/contracts.ts b/packages/playground/src/utils/contracts.ts
index 5778a7c9d9..a6059e730c 100644
--- a/packages/playground/src/utils/contracts.ts
+++ b/packages/playground/src/utils/contracts.ts
@@ -56,7 +56,7 @@ async function normalizeContract(
 export function formatConsumption(value: number): string {
   value = +value;
   if (isNaN(value) || value <= 0) return "No Data Available";
-  return new Decimal(value).toFixed(8) + " TFT/hour";
+  return new Decimal(value).toFixed(3) + " TFT/hour";
 }
 
 export interface NormalizedContract {
diff --git a/packages/playground/src/weblets/profile_manager.vue b/packages/playground/src/weblets/profile_manager.vue
index 411a56718c..859ee8d00c 100644
--- a/packages/playground/src/weblets/profile_manager.vue
+++ b/packages/playground/src/weblets/profile_manager.vue
@@ -18,10 +18,10 @@
           </p>
           <template v-else-if="balance">
             <p>
-              Balance: <strong :style="{ color: '#76e2c8' }">{{ balance.free }} TFT</strong>
+              Balance: <strong :style="{ color: '#76e2c8' }">{{ balance.free.toFixed(3) }} TFT</strong>
             </p>
             <p>
-              Locked: <strong :style="{ color: '#76e2c8' }">{{ balance.locked }} TFT</strong>
+              Locked: <strong :style="{ color: '#76e2c8' }">{{ balance.locked.toFixed(3) }} TFT</strong>
             </p>
           </template>
         </div>

From 82be9c00ee3bc5409d33092d079d6aa377b81a43 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Thu, 8 Jun 2023 16:48:14 +0300
Subject: [PATCH 3/3] Update balance display

---
 .../playground/src/components/weblet_layout.vue |  5 +++--
 packages/playground/src/utils/contracts.ts      |  5 +++--
 packages/playground/src/utils/helpers.ts        | 17 +++++++++++++++++
 .../playground/src/weblets/profile_manager.vue  |  6 +++---
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/packages/playground/src/components/weblet_layout.vue b/packages/playground/src/components/weblet_layout.vue
index 7d373e1b43..ba9dc8ca20 100644
--- a/packages/playground/src/components/weblet_layout.vue
+++ b/packages/playground/src/components/weblet_layout.vue
@@ -48,8 +48,8 @@
         v-if="showPrice"
       >
         Your deployment costs
-        <span class="font-weight-black">{{ costLoading ? "Calculating..." : tft?.toFixed(3) }}</span> TFTs or
-        <span class="font-weight-black">{{ costLoading ? "Calculating..." : usd?.toFixed(3) }}</span> USD/month
+        <span class="font-weight-black">{{ costLoading ? "Calculating..." : normalizeBalance(tft) }}</span> TFTs or
+        <span class="font-weight-black">{{ costLoading ? "Calculating..." : normalizeBalance(usd) }}</span> USD/month
         <a
           class="app-link text-decoration-underline"
           target="_blank"
@@ -83,6 +83,7 @@ import { computed, ref, watch } from "vue";
 
 import { useProfileManager } from "../stores";
 import { getGrid, loadBalance } from "../utils/grid";
+import { normalizeBalance } from "../utils/helpers";
 
 const props = defineProps({
   disableAlerts: {
diff --git a/packages/playground/src/utils/contracts.ts b/packages/playground/src/utils/contracts.ts
index a6059e730c..28f15fa440 100644
--- a/packages/playground/src/utils/contracts.ts
+++ b/packages/playground/src/utils/contracts.ts
@@ -1,5 +1,6 @@
 import { ContractStates, type GridClient } from "@threefold/grid_client";
-import Decimal from "decimal.js";
+
+import { normalizeBalance } from "./helpers";
 
 export async function getUserContracts(grid: GridClient) {
   const res: any = await grid!.contracts.listMyContracts();
@@ -56,7 +57,7 @@ async function normalizeContract(
 export function formatConsumption(value: number): string {
   value = +value;
   if (isNaN(value) || value <= 0) return "No Data Available";
-  return new Decimal(value).toFixed(3) + " TFT/hour";
+  return normalizeBalance(value) + " TFT/hour";
 }
 
 export interface NormalizedContract {
diff --git a/packages/playground/src/utils/helpers.ts b/packages/playground/src/utils/helpers.ts
index 5120a4d1be..506d656f48 100644
--- a/packages/playground/src/utils/helpers.ts
+++ b/packages/playground/src/utils/helpers.ts
@@ -14,3 +14,20 @@ export function normalizeError(error: any, fallbackError: string): string {
     ? error.message
     : fallbackError;
 }
+
+export function normalizeBalance(num: number | string | undefined, floor = false): string {
+  if (!num || isNaN(+num)) return (num || "").toString();
+
+  if (floor) {
+    return (Math.floor(+num * 1000) / 1000).toString();
+  }
+
+  const [int = "0", decimal = ""] = num.toString().split(".");
+
+  if (decimal.startsWith("000")) {
+    if (+int > 0) return "~ <" + int;
+    else return "~ <0.001";
+  }
+
+  return (+num).toFixed(3).replace(/0+$/g, "");
+}
diff --git a/packages/playground/src/weblets/profile_manager.vue b/packages/playground/src/weblets/profile_manager.vue
index 859ee8d00c..7ac68680cd 100644
--- a/packages/playground/src/weblets/profile_manager.vue
+++ b/packages/playground/src/weblets/profile_manager.vue
@@ -18,10 +18,10 @@
           </p>
           <template v-else-if="balance">
             <p>
-              Balance: <strong :style="{ color: '#76e2c8' }">{{ balance.free.toFixed(3) }} TFT</strong>
+              Balance: <strong :style="{ color: '#76e2c8' }">{{ normalizeBalance(balance.free, true) }} TFT</strong>
             </p>
             <p>
-              Locked: <strong :style="{ color: '#76e2c8' }">{{ balance.locked.toFixed(3) }} TFT</strong>
+              Locked: <strong :style="{ color: '#76e2c8' }">{{ normalizeBalance(balance.locked, true) }} TFT</strong>
             </p>
           </template>
         </div>
@@ -273,7 +273,7 @@ import { generateKeyPair } from "web-ssh-keygen";
 import { useProfileManager } from "../stores";
 import { type Balance, createAccount, getGrid, loadBalance, loadProfile, storeSSH } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
-import { downloadAsFile } from "../utils/helpers";
+import { downloadAsFile, normalizeBalance } from "../utils/helpers";
 
 defineProps({
   modelValue: {