Improve balance display over the entire App

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

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..." : 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: {

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(8) + " TFT/hour";
+  return normalizeBalance(value) + " TFT/hour";
 }
 
 export interface NormalizedContract {

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, "");
+}

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' }">{{ normalizeBalance(balance.free, true) }} TFT</strong>
             </p>
             <p>
-              Locked: <strong>{{ balance.locked }} 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: {