From d3b8b4633001c9d4c46050030797ba9b0e6aecda Mon Sep 17 00:00:00 2001
From: vkulinich <viacheslav.kulinich@cleevio.com>
Date: Thu, 12 Dec 2024 20:26:46 +0100
Subject: [PATCH] Unlock Tokens

---
 src/i18n/locales/en/translations.json         |  3 ++-
 .../actions/WalletAssetsTableActionsMob.tsx   | 10 ++++++++--
 .../table/data/WalletAssetsTableData.utils.ts | 14 ++++++-------
 .../details/WalletAssetsTableDetails.tsx      | 20 +++++++++++++------
 4 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/i18n/locales/en/translations.json b/src/i18n/locales/en/translations.json
index 01dc7cb98..bc25e63e0 100644
--- a/src/i18n/locales/en/translations.json
+++ b/src/i18n/locales/en/translations.json
@@ -564,7 +564,8 @@
   "wallet.assets.table.details.lockedVesting": "Locked in Vesting",
   "wallet.assets.table.details.lockedDemocracy": "Locked in Democracy",
   "wallet.assets.table.details.unlockable": "Unlockable",
-  "wallet.assets.table.details.btn": "Clear locks",
+  "wallet.assets.table.details.clear": "Clear locks",
+  "wallet.assets.table.details.unlock": "Unlock tokens",
   "wallet.assets.table.details.lockedStaking": "Total Locked in Staking",
   "wallet.assets.table.details.noprice.tooltip": "Spot price currently not available",
   "wallet.assets.table.details.expired_one": "{{count}} Expired lock",
diff --git a/src/sections/wallet/assets/table/actions/WalletAssetsTableActionsMob.tsx b/src/sections/wallet/assets/table/actions/WalletAssetsTableActionsMob.tsx
index 8e56eb1e3..495df568d 100644
--- a/src/sections/wallet/assets/table/actions/WalletAssetsTableActionsMob.tsx
+++ b/src/sections/wallet/assets/table/actions/WalletAssetsTableActionsMob.tsx
@@ -283,6 +283,12 @@ const NativeLocks = ({
     toast,
   })
 
+  const isUnlockDisabled = !unlocable.ids.length && unlocable.value.isZero()
+  const title =
+    !unlocable.ids.length && unlocable.value.gt(0)
+      ? t("wallet.assets.table.details.unlock")
+      : t("wallet.assets.table.details.clear")
+
   return (
     <div sx={{ flex: "row", flexWrap: "wrap", py: 20 }}>
       <div
@@ -401,13 +407,13 @@ const NativeLocks = ({
           size="compact"
           disabled={
             account?.isExternalWalletConnected ||
-            !unlocable.ids.length ||
+            isUnlockDisabled ||
             unlock.isLoading
           }
           onClick={() => unlock.mutate()}
           isLoading={unlock.isLoading}
         >
-          {t("wallet.assets.table.details.btn")}
+          {title}
         </Button>
       </div>
 
diff --git a/src/sections/wallet/assets/table/data/WalletAssetsTableData.utils.ts b/src/sections/wallet/assets/table/data/WalletAssetsTableData.utils.ts
index 5e670fed8..a7b635864 100644
--- a/src/sections/wallet/assets/table/data/WalletAssetsTableData.utils.ts
+++ b/src/sections/wallet/assets/table/data/WalletAssetsTableData.utils.ts
@@ -312,16 +312,16 @@ export const useUnlockTokens = ({
   return useMutation(async () => {
     const txs = ids.map((id) => api.tx.democracy.removeVote(id))
 
-    if (!txs.length) return null
+    if (!account?.address) return null
 
     return await createTransaction(
       {
-        tx: api.tx.utility.batchAll([
-          ...txs,
-          ...(account?.address
-            ? [api.tx.democracy.unlock(account.address)]
-            : []),
-        ]),
+        tx: txs.length
+          ? api.tx.utility.batchAll([
+              ...txs,
+              api.tx.democracy.unlock(account.address),
+            ])
+          : api.tx.democracy.unlock(account.address),
       },
       {
         toast,
diff --git a/src/sections/wallet/assets/table/details/WalletAssetsTableDetails.tsx b/src/sections/wallet/assets/table/details/WalletAssetsTableDetails.tsx
index 65e1ca9b7..09a7f23f7 100644
--- a/src/sections/wallet/assets/table/details/WalletAssetsTableDetails.tsx
+++ b/src/sections/wallet/assets/table/details/WalletAssetsTableDetails.tsx
@@ -15,7 +15,7 @@ import {
 import BN from "bignumber.js"
 import { Button } from "components/Button/Button"
 import { Separator } from "components/Separator/Separator"
-import { BN_0, BN_NAN } from "utils/constants"
+import { BN_NAN } from "utils/constants"
 import { useAccount } from "sections/web3-connect/Web3Connect.utils"
 import { TOAST_MESSAGES } from "state/toasts"
 import { ToastMessage } from "state/store"
@@ -91,6 +91,12 @@ const NativeAssetDetails = ({
     toast,
   })
 
+  const isUnlockDisabled = !unlocable.ids.length && unlocable.value.isZero()
+  const title =
+    !unlocable.ids.length && unlocable.value.gt(0)
+      ? t("wallet.assets.table.details.unlock")
+      : t("wallet.assets.table.details.clear")
+
   return (
     <SContainer hasChain={false} isNativeAsset>
       <div>
@@ -140,7 +146,9 @@ const NativeAssetDetails = ({
           </SLocksContainer>
         ) : null}
       </div>
-      <div sx={{ flex: "row", justify: "space-between", align: "center" }}>
+      <div
+        sx={{ flex: "row", justify: "space-between", align: "center", gap: 4 }}
+      >
         <div>
           <Text fs={14} lh={14} fw={500} color="basic300">
             {t("wallet.assets.table.details.unlockable")}
@@ -150,14 +158,14 @@ const NativeAssetDetails = ({
             {unlocable.isLoading ? (
               <Skeleton height={14} width={30} />
             ) : (
-              t("value.token", { value: unlocable.value ?? BN_0 })
+              t("value.token", { value: unlocable.value })
             )}
           </Text>
           <Text fs={11} lh={14} fw={500} color="whiteish500">
             {unlocable.isLoading ? (
               <Skeleton height={10} width={20} />
             ) : (
-              <DisplayValue value={unlocable.displayValue ?? BN_0} />
+              <DisplayValue value={unlocable.displayValue} />
             )}
           </Text>
           {unlocable.votesUnlocked ? (
@@ -176,13 +184,13 @@ const NativeAssetDetails = ({
           size="compact"
           disabled={
             account?.isExternalWalletConnected ||
-            !unlocable.ids.length ||
+            isUnlockDisabled ||
             unlock.isLoading
           }
           onClick={() => unlock.mutate()}
           isLoading={unlock.isLoading}
         >
-          {t("wallet.assets.table.details.btn")}
+          {title}
         </Button>
       </div>
       <div css={{ gridColumn: "1/4", height: 1 }}>