Merge pull request #1540 from mars-protocol/vault-withdraw

Vault withdraw

Author: linkielink

src/components/managedVaults/vaultDetails/table/columns/WithdrawButton.tsx

@@ -2,6 +2,9 @@ import Button from 'components/common/Button'
 import { AccountArrowDown } from 'components/common/Icons'
 import { useCallback, useState } from 'react'
 import useStore from 'store'
+import useCurrentWalletBalance from 'hooks/wallet/useCurrentWalletBalance'
+import { BN } from 'utils/helpers'
+import BigNumber from 'bignumber.js'
 
 export const WITHDRAW_META = {
   id: 'withdraw',
@@ -21,13 +24,19 @@ export default function WithdrawButton(props: Props) {
   const address = useStore((s) => s.address)
   const [isConfirming, setIsConfirming] = useState(false)
   const withdrawFromManagedVault = useStore((s) => s.withdrawFromManagedVault)
+  const walletBalance = useCurrentWalletBalance(vaultTokenDenom)
 
   const handleWithdraw = useCallback(async () => {
     setIsConfirming(true)
     try {
+      // Ensure the withdrawal amount never exceeds the user's wallet balance
+      const walletBalanceAmount = BN(walletBalance?.amount || '0')
+      const requestedAmount = BN(amount)
+      const actualAmount = BigNumber.minimum(requestedAmount, walletBalanceAmount).toString()
+
       await withdrawFromManagedVault({
         vaultAddress,
-        amount,
+        amount: actualAmount,
         vaultToken: vaultTokenDenom,
         recipient: address,
       })
@@ -36,7 +45,14 @@ export default function WithdrawButton(props: Props) {
     } finally {
       setIsConfirming(false)
     }
-  }, [address, amount, vaultAddress, vaultTokenDenom, withdrawFromManagedVault])
+  }, [
+    address,
+    amount,
+    vaultAddress,
+    vaultTokenDenom,
+    withdrawFromManagedVault,
+    walletBalance?.amount,
+  ])
 
   return (
     <Button

src/components/managedVaults/vaultDetails/table/useUserWithdrawals.tsx

@@ -6,6 +6,8 @@ import { useMemo } from 'react'
 import { BNCoin } from 'types/classes/BNCoin'
 import { BN } from 'utils/helpers'
 import { FormattedNumber } from 'components/common/FormattedNumber'
+import { Tooltip } from 'components/common/Tooltip'
+import { InfoCircle } from 'components/common/Icons'
 
 interface Props {
   isLoading: boolean
@@ -22,6 +24,17 @@ export default function useUserWithdrawals(props: Props) {
         id: 'name',
         accessorKey: 'Unlock Amount',
         meta: { className: 'min-w-30' },
+        header: () => (
+          <div className='flex items-center gap-1'>
+            <span>Unlock Amount</span>
+            <Tooltip
+              content='Dollar values are estimates and may change based on current vault share price when you withdraw.'
+              type='info'
+            >
+              <InfoCircle className='w-3 h-3 text-white/50 hover:text-white/70' />
+            </Tooltip>
+          </div>
+        ),
         cell: ({ row }) => {
           const coin = BNCoin.fromDenomAndBigNumber(
             details.base_tokens_denom,