Merge pull request #3111 from threefoldtech/development_unlock_contra…

…cts_msg

Enhance unlock dialog header and msg

packages/playground/src/components/contracts_list/contracts_table.vue

@@ -142,9 +142,9 @@
 
   <v-dialog width="800" v-model="contractStateDialog" attach="#modals">
     <v-card>
-      <v-toolbar color="primary" class="custom-toolbar">
-        <p class="mb-5">Contract lock Details</p>
-      </v-toolbar>
+      <v-card-title class="bg-primary">
+        <p class="pl-2">Contract lock Details</p>
+      </v-card-title>
       <v-card-text class="mt-4">
         <v-row class="d-flex justify-center">
           Amount Locked:
@@ -236,7 +236,8 @@
       <v-card-text v-else>
         <v-alert class="my-4" type="warning" variant="tonal">
           <div v-if="selectedLockedAmount < freeBalance">
-            You have enough balance to unlock your contract<span v-if="selectedContracts.length > 1">s</span>!
+            You have enough balance to unlock your contract<span v-if="selectedContracts.length > 1">s</span>; this will
+            cost you around {{ Math.ceil(selectedLockedAmount) }} TFTs.
           </div>
           <div v-else-if="selectedLockedAmount > 0">
             You need to fund your account with
@@ -386,7 +387,7 @@ const selectedContracts = ref<NormalizedContract[]>([]);
 const selectedItem = ref();
 const profileManagerController = useProfileManagerController();
 const balance = profileManagerController.balance;
-const freeBalance = computed(() => balance.value?.free ?? 0 - (balance.value?.locked ?? 0));
+const freeBalance = computed(() => (balance.value?.free ?? 0) - (balance.value?.locked ?? 0));
 const unlockContractLoading = ref(false);
 const unlockDialog = ref(false);
 const selectedLockedContracts = computed(() => {

packages/playground/src/weblets/tf_contracts_list.vue

@@ -91,7 +91,8 @@
           <v-row class="d-flex" v-else>
             <v-alert class="ma-4" type="warning" variant="tonal">
               <div v-if="lockedContracts?.totalAmountLocked < freeBalance" class="font-weigh-black">
-                You have enough balance to unlock your contracts!
+                You have enough balance to unlock your contracts; this will cost you around
+                {{ Math.ceil(lockedContracts?.totalAmountLocked) }} TFTs.
               </div>
               <div v-else>
                 You need to fund your account with
@@ -206,7 +207,7 @@ import { useGrid } from "../stores";
 
 const profileManagerController = useProfileManagerController();
 const balance = profileManagerController.balance;
-const freeBalance = computed(() => balance.value?.free ?? 0 - (balance.value?.locked ?? 0));
+const freeBalance = computed(() => (balance.value?.free ?? 0) - (balance.value?.locked ?? 0));
 const isLoading = ref<boolean>(false);
 
 const profileManager = useProfileManager();