From 4d584baa4334d51e1cb1ffaf5b705215e768ab7f Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Wed, 10 Jul 2024 13:31:18 +0300
Subject: [PATCH 1/3] Style: update dialog header to be consist with other
 dialogs

---
 .../src/components/contracts_list/contracts_table.vue       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/playground/src/components/contracts_list/contracts_table.vue b/packages/playground/src/components/contracts_list/contracts_table.vue
index 5cd0726fd3..6d40aec9e3 100644
--- a/packages/playground/src/components/contracts_list/contracts_table.vue
+++ b/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:

From ba30189eabb7e8acda0c0c172250e08e02e80275 Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Wed, 10 Jul 2024 13:32:07 +0300
Subject: [PATCH 2/3] Feat: show the total coast of unlocking contracts

---
 .../src/components/contracts_list/contracts_table.vue          | 3 ++-
 packages/playground/src/weblets/tf_contracts_list.vue          | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/playground/src/components/contracts_list/contracts_table.vue b/packages/playground/src/components/contracts_list/contracts_table.vue
index 6d40aec9e3..7648fa9753 100644
--- a/packages/playground/src/components/contracts_list/contracts_table.vue
+++ b/packages/playground/src/components/contracts_list/contracts_table.vue
@@ -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
diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
index c80eeb26d0..30a09dd389 100644
--- a/packages/playground/src/weblets/tf_contracts_list.vue
+++ b/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

From d97a435781b6422b2dbe8e3f23993aad7c9a3c32 Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Wed, 10 Jul 2024 13:32:51 +0300
Subject: [PATCH 3/3] Fix: caluculate the available blance

---
 .../src/components/contracts_list/contracts_table.vue           | 2 +-
 packages/playground/src/weblets/tf_contracts_list.vue           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/playground/src/components/contracts_list/contracts_table.vue b/packages/playground/src/components/contracts_list/contracts_table.vue
index 7648fa9753..0b29a19b72 100644
--- a/packages/playground/src/components/contracts_list/contracts_table.vue
+++ b/packages/playground/src/components/contracts_list/contracts_table.vue
@@ -387,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(() => {
diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
index 30a09dd389..6bd2027377 100644
--- a/packages/playground/src/weblets/tf_contracts_list.vue
+++ b/packages/playground/src/weblets/tf_contracts_list.vue
@@ -207,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();