fix borrowbutton logic, add vault deposit manage btn, fix icon size vault modal

src/components/borrow/Table/Columns/BorrowButton.tsx

@@ -20,7 +20,7 @@ interface Props {
 export default function BorrowButton(props: Props) {
   const account = useCurrentAccount()
   const address = useStore((s) => s.address)
-  const hasNoDeposits = !!account?.deposits?.length && !!account?.lends?.length && !!address
+  const hasNoDeposits = !account?.deposits?.length && !account?.lends?.length && !!address
 
   const borrowHandler = useCallback(() => {
     if (!props.data.asset) return null

src/components/common/Button/DropDownButton.tsx

@@ -10,6 +10,7 @@ import useToggle from 'hooks/useToggle'
 interface Props extends ButtonProps {
   items: DropDownItem[]
   text: string
+  showProgressIndicator?: boolean
 }
 
 export default function DropDownButton(props: Props) {
@@ -32,6 +33,7 @@ export default function DropDownButton(props: Props) {
         }}
         rightIcon={<ChevronDown />}
         iconClassName='w-3 h-3'
+        showProgressIndicator={props.showProgressIndicator}
         {...props}
       />
     </Tooltip>
@@ -62,16 +64,19 @@ function DropDownItem(props: DropDownItemProps) {
   return (
     <ConditionalWrapper
       condition={!!props.item.disabled}
-      wrapper={(children) => (
+      wrapper={(children) => {
-        <Tooltip
+        if (!props.item.disabledTooltip) return children
-          type='warning'
+        return (
-          content={<Text size='sm'>{props.item.disabledTooltip}</Text>}
+          <Tooltip
-          contentClassName='max-w-[200px]'
+            type='warning'
-          className='ml-auto'
+            content={<Text size='sm'>{props.item.disabledTooltip}</Text>}
-        >
+            contentClassName='max-w-[200px]'
-          {children}
+            className='ml-auto'
-        </Tooltip>
+          >
-      )}
+            {children}
+          </Tooltip>
+        )
+      }}
     >
       <button
         onClick={(e) => {
@@ -86,7 +91,7 @@ function DropDownItem(props: DropDownItemProps) {
         )}
         disabled={props.item.disabled}
       >
-        <div className='flex justify-center w-5 h-5'>{props.item.icon}</div>
+        <div className='flex justify-center w-4 h-4'>{props.item.icon}</div>
         <Text size='sm'>{props.item.text}</Text>
       </button>
     </ConditionalWrapper>

src/components/common/DepositCapMessage.tsx

@@ -18,7 +18,11 @@ export default function DepositCapMessage(props: Props) {
 
   return (
     <div className={classNames('flex items-start', props.className)}>
-      {props.showIcon && <InfoCircle width={26} className='mr-5' />}
+      {props.showIcon && (
+        <div className='w-6 mr-5'>
+          <InfoCircle />
+        </div>
+      )}
       <div className='flex flex-col gap-2'>
         <Text size='sm'>Deposit Cap Reached!</Text>
         <Text size='xs' className='text-white/40'>{`Unfortunately you're not able to ${

src/components/earn/farm/Table/Columns/Deposit.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import ActionButton from 'components/common/Button/ActionButton'
+import { Plus } from 'components/common/Icons'
 import Loading from 'components/common/Loading'
 import useStore from 'store'
 
@@ -9,6 +10,8 @@ interface Props {
   isLoading: boolean
 }
 
+export const DEPOSIT_META = { accessorKey: 'deposit', enableSorting: false, header: '' }
+
 export const Deposit = (props: Props) => {
   const { vault } = props
 
@@ -26,7 +29,12 @@ export const Deposit = (props: Props) => {
 
   return (
     <div className='flex items-center justify-end'>
-      <ActionButton onClick={enterVaultHandler} color='tertiary' text='Deposit' />
+      <ActionButton
+        onClick={enterVaultHandler}
+        color='tertiary'
+        text='Deposit'
+        leftIcon={<Plus />}
+      />
     </div>
   )
 }

src/components/earn/farm/Table/Columns/Details.tsx

@@ -1,24 +0,0 @@
-import classNames from 'classnames'
-import React from 'react'
-
-import { ChevronDown } from 'components/common/Icons'
-import Loading from 'components/common/Loading'
-
-export const DETAILS_META = { accessorKey: 'details', enableSorting: false, header: 'Deposit' }
-
-interface Props {
-  isLoading: boolean
-  isExpanded: boolean
-}
-
-export default function Details(props: Props) {
-  if (props.isLoading) return <Loading />
-
-  return (
-    <div className='flex items-center justify-end'>
-      <div className={classNames('w-4', props.isExpanded && 'rotate-180')}>
-        <ChevronDown />
-      </div>
-    </div>
-  )
-}

src/components/earn/farm/Table/Columns/Manage.tsx

@@ -0,0 +1,116 @@
+import moment from 'moment/moment'
+import React, { useCallback, useMemo, useState } from 'react'
+
+import { AccountArrowDown, LockLocked, LockUnlocked, Plus } from 'components/common/Icons'
+import Loading from 'components/common/Loading'
+import { VaultStatus } from 'types/enums/vault'
+
+import { DEFAULT_SETTINGS } from '../../../../../constants/defaultSettings'
+import { LocalStorageKeys } from '../../../../../constants/localStorageKeys'
+import useLocalStorage from '../../../../../hooks/localStorage/useLocalStorage'
+import useAccountId from '../../../../../hooks/useAccountId'
+import useStore from '../../../../../store'
+import DropDownButton from '../../../../common/Button/DropDownButton'
+
+export const MANAGE_META = { accessorKey: 'details', enableSorting: false, header: '' }
+
+interface Props {
+  vault: DepositedVault
+  isLoading: boolean
+  isExpanded: boolean
+}
+
+export default function Manage(props: Props) {
+  const accountId = useAccountId()
+  const address = useStore((s) => s.address)
+  const withdrawFromVaults = useStore((s) => s.withdrawFromVaults)
+  const [slippage] = useLocalStorage<number>(LocalStorageKeys.SLIPPAGE, DEFAULT_SETTINGS.slippage)
+  const [isConfirming, setIsConfirming] = useState(false)
+
+  const depositMoreHandler = useCallback(() => {
+    useStore.setState({
+      vaultModal: {
+        vault: props.vault,
+        isDeposited: true,
+        selectedBorrowDenoms: [props.vault.denoms.secondary],
+        isCreate: false,
+      },
+    })
+  }, [props.vault])
+
+  const unlockHandler = useCallback(
+    () => useStore.setState({ unlockModal: { vault: props.vault } }),
+    [props.vault],
+  )
+
+  const withdrawHandler = useCallback(async () => {
+    if (!accountId) return
+    setIsConfirming(true)
+    await withdrawFromVaults({
+      accountId: accountId,
+      vaults: [props.vault],
+      slippage,
+    })
+  }, [accountId, props.vault, slippage, withdrawFromVaults])
+
+  const ITEMS: DropDownItem[] = useMemo(
+    () => [
+      {
+        icon: <Plus />,
+        text: 'Deposit more',
+        onClick: depositMoreHandler,
+      },
+      ...(props.vault.status === VaultStatus.ACTIVE
+        ? [
+            {
+              icon: <LockUnlocked />,
+              text: 'Unlock to withdraw',
+              onClick: unlockHandler,
+            },
+          ]
+        : []),
+      ...(props.vault.status === VaultStatus.UNLOCKING
+        ? [
+            {
+              icon: <LockLocked />,
+              text: `Withdraw in ${moment(props.vault?.unlocksAt).fromNow(true)}`,
+              onClick: () => {},
+              disabled: true,
+              disabledTooltip: '',
+            },
+          ]
+        : []),
+      ...(props.vault.status === VaultStatus.UNLOCKED
+        ? [
+            {
+              icon: <AccountArrowDown />,
+              text: 'Withdraw funds',
+              onClick: withdrawHandler,
+            },
+          ]
+        : []),
+    ],
+    [
+      depositMoreHandler,
+      props.vault.status,
+      props.vault?.unlocksAt,
+      unlockHandler,
+      withdrawHandler,
+    ],
+  )
+
+  if (props.isLoading) return <Loading />
+
+  if (!address) return null
+
+  return (
+    <div className='flex justify-end z-10'>
+      <DropDownButton
+        items={ITEMS}
+        text='Manage'
+        color='tertiary'
+        showProgressIndicator={isConfirming}
+      />
+    </div>
+  )
+}

src/components/earn/farm/Table/Columns/useAvailableColumns.tsx

@@ -2,7 +2,6 @@ import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
 import Apy, { APY_META } from 'components/earn/farm/Table/Columns/Apy'
-import { Deposit } from 'components/earn/farm/Table/Columns/Deposit'
 import DepositCap, {
   DEPOSIT_CAP_META,
   depositCapSortingFn,
@@ -10,7 +9,8 @@ import DepositCap, {
 import MaxLTV, { LTV_MAX_META } from 'components/earn/farm/Table/Columns/MaxLTV'
 import Name, { NAME_META } from 'components/earn/farm/Table/Columns/Name'
 import TVL, { TVL_META } from 'components/earn/farm/Table/Columns/TVL'
-import { DETAILS_META } from 'components/earn/farm/Table/Columns/Details'
+
+import { Deposit, DEPOSIT_META } from './Deposit'
 
 interface Props {
   isLoading: boolean
@@ -41,7 +41,7 @@ export default function useAvailableColumns(props: Props) {
         cell: ({ row }) => <MaxLTV vault={row.original as Vault} isLoading={props.isLoading} />,
       },
       {
-        ...DETAILS_META,
+        ...DEPOSIT_META,
         cell: ({ row }) => <Deposit vault={row.original as Vault} isLoading={props.isLoading} />,
       },
     ]

src/components/earn/farm/Table/Columns/useDepositedColumns.tsx

@@ -6,7 +6,7 @@ import DepositCap, {
   DEPOSIT_CAP_META,
   depositCapSortingFn,
 } from 'components/earn/farm/Table/Columns/DepositCap'
-import Details, { DETAILS_META } from 'components/earn/farm/Table/Columns/Details'
+import Manage, { MANAGE_META } from 'components/earn/farm/Table/Columns/Manage'
 import MaxLTV, { LTV_MAX_META } from 'components/earn/farm/Table/Columns/MaxLTV'
 import Name, { NAME_META } from 'components/earn/farm/Table/Columns/Name'
 import PositionValue, {
@@ -55,8 +55,14 @@ export default function useDepositedColumns(props: Props) {
         ),
       },
       {
-        ...DETAILS_META,
+        ...MANAGE_META,
-        cell: ({ row }) => <Details isLoading={props.isLoading} isExpanded={row.getIsExpanded()} />,
+        cell: ({ row }) => (
+          <Manage
+            vault={row.original}
+            isLoading={props.isLoading}
+            isExpanded={row.getIsExpanded()}
+          />
+        ),
       },
     ]
   }, [props.isLoading])

src/components/earn/farm/Table/DepositedVaultsTable.tsx

@@ -1,10 +1,7 @@
-import { Row } from '@tanstack/react-table'
+import React from 'react'
-import { Table as TanStackTable } from '@tanstack/table-core/build/lib/types'
-import React, { useCallback } from 'react'
 
-import useDepositedColumns from 'components/earn/farm/Table/Columns/useDepositedColumns'
-import VaultExpanded from 'components/earn/farm/VaultExpanded'
 import Table from 'components/common/Table'
+import useDepositedColumns from 'components/earn/farm/Table/Columns/useDepositedColumns'
 
 type Props = {
   data: DepositedVault[]
@@ -14,20 +11,12 @@ type Props = {
 export default function DepositedVaultsTable(props: Props) {
   const columns = useDepositedColumns({ isLoading: props.isLoading })
 
-  const renderExpanded = useCallback(
-    (row: Row<DepositedVault>, table: TanStackTable<DepositedVault>) => (
-      <VaultExpanded row={row} resetExpanded={table.resetExpanded} />
-    ),
-    [],
-  )
-
   return (
     <Table
       title='Deposited Vaults'
       columns={columns}
       data={props.data}
       initialSorting={[{ id: 'name', desc: true }]}
-      renderExpanded={renderExpanded}
     />
   )
 }