Unlock Tokens

src/i18n/locales/en/translations.json

@@ -567,7 +567,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",

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>
 

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,

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 }}>