align buttons, perps row clickable

src/components/Wallet/WalletConnectedButton.tsx

@@ -18,6 +18,7 @@ import chains from 'configs/chains'
 import { BN_ZERO } from 'constants/math'
 import useBaseAsset from 'hooks/assets/useBasetAsset'
 import useMarketEnabledAssets from 'hooks/assets/useMarketEnabledAssets'
+import useChainConfig from 'hooks/useChainConfig'
 import useCurrentWallet from 'hooks/useCurrentWallet'
 import useICNSDomain from 'hooks/useICNSDomain'
 import useToggle from 'hooks/useToggle'
@@ -27,7 +28,6 @@ import { NETWORK } from 'types/enums/network'
 import { ChainInfoID } from 'types/enums/wallet'
 import { truncate } from 'utils/formatters'
 import { getPage, getRoute } from 'utils/route'
-import useChainConfig from 'hooks/useChainConfig'
 
 export default function WalletConnectedButton() {
   // ---------------

src/components/borrow/BorrowActionButtons.tsx

@@ -1,44 +0,0 @@
-import { useCallback } from 'react'
-
-import Button from 'components/common/Button'
-import ActionButton from 'components/common/Button/ActionButton'
-import { HandCoins, Plus } from 'components/common/Icons'
-import useMarketEnabledAssets from 'hooks/assets/useMarketEnabledAssets'
-import useStore from 'store'
-
-interface Props {
-  data: BorrowMarketTableData
-}
-
-export default function BorrowActionButtons(props: Props) {
-  const { asset, accountDebt } = props.data
-  const marketAssets = useMarketEnabledAssets()
-  const currentAsset = marketAssets.find((a) => a.denom === asset.denom)
-
-  const borrowHandler = useCallback(() => {
-    if (!currentAsset) return null
-    useStore.setState({ borrowModal: { asset: currentAsset, marketData: props.data } })
-  }, [currentAsset, props.data])
-
-  const repayHandler = useCallback(() => {
-    if (!currentAsset) return null
-    useStore.setState({
-      borrowModal: { asset: currentAsset, marketData: props.data, isRepay: true },
-    })
-  }, [currentAsset, props.data])
-
-  return (
-    <div className='flex flex-row space-x-2'>
-      <ActionButton
-        leftIcon={<Plus className='w-3' />}
-        onClick={borrowHandler}
-        color='secondary'
-        text={accountDebt ? 'Borrow more' : 'Borrow'}
-        className='text-center min-w-40'
-      />
-      {accountDebt && (
-        <Button color='tertiary' leftIcon={<HandCoins />} text='Repay' onClick={repayHandler} />
-      )}
-    </div>
-  )
-}

src/components/borrow/Table/AvailableBorrowingsTable.tsx

@@ -2,12 +2,10 @@ import { Row } from '@tanstack/react-table'
 import { Table as TanstackTable } from '@tanstack/table-core/build/lib/types'
 import { useCallback } from 'react'
 
-import BorrowActionButtons from 'components/borrow/BorrowActionButtons'
 import { NAME_META } from 'components/borrow/Table/Columns/Name'
 import useAvailableColumns from 'components/borrow/Table/Columns/useAvailableColumns'
 import MarketDetails from 'components/common/MarketDetails'
 import Table from 'components/common/Table'
-import ActionButtonRow from 'components/common/Table/ActionButtonRow'
 
 type Props = {
   data: BorrowMarketTableData[]
@@ -20,14 +18,7 @@ export default function AvailableBorrowingsTable(props: Props) {
   const renderExpanded = useCallback(
     (row: Row<BorrowMarketTableData>, _: TanstackTable<BorrowMarketTableData>) => {
       const currentRow = row as Row<BorrowMarketTableData>
-      return (
-        <>
-          <ActionButtonRow row={currentRow}>
-            <BorrowActionButtons data={row.original} />
-          </ActionButtonRow>
-          <MarketDetails row={currentRow} type='borrow' />
-        </>
-      )
+      return <MarketDetails row={currentRow} type='borrow' />
     },
     [],
   )

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

@@ -0,0 +1,60 @@
+import { useCallback } from 'react'
+
+import ActionButton from 'components/common/Button/ActionButton'
+import { Plus } from 'components/common/Icons'
+import Text from 'components/common/Text'
+import { Tooltip } from 'components/common/Tooltip'
+import ConditionalWrapper from 'hocs/ConditionalWrapper'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
+import useStore from 'store'
+
+export const BORROW_BUTTON_META = {
+  accessorKey: 'borrow',
+  enableSorting: false,
+  header: '',
+}
+
+interface Props {
+  data: LendingMarketTableData
+}
+export default function BorrowButton(props: Props) {
+  const account = useCurrentAccount()
+  const hasNoDeposits = !!account?.deposits?.length && !!account?.lends?.length
+
+  const borrowHandler = useCallback(() => {
+    if (!props.data.asset) return null
+    useStore.setState({ borrowModal: { asset: props.data.asset, marketData: props.data } })
+  }, [props.data])
+
+  return (
+    <div className='flex justify-end'>
+      <ConditionalWrapper
+        condition={hasNoDeposits}
+        wrapper={(children) => (
+          <Tooltip
+            type='warning'
+            content={
+              <Text size='sm'>{`You don’t have any collateral.
+             Please first deposit into your Credit Account before borrowing.`}</Text>
+            }
+            contentClassName='max-w-[200px]'
+            className='ml-auto'
+          >
+            {children}
+          </Tooltip>
+        )}
+      >
+        <ActionButton
+          leftIcon={<Plus />}
+          disabled={hasNoDeposits}
+          color='tertiary'
+          onClick={(e) => {
+            borrowHandler()
+            e.stopPropagation()
+          }}
+          text='Borrow'
+        />
+      </ConditionalWrapper>
+    </div>
+  )
+}

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

@@ -4,7 +4,6 @@ import Loading from 'components/common/Loading'
 export const BORROW_RATE_META = {
   accessorKey: 'apy.borrow',
   header: 'Borrow Rate APY',
-  meta: { className: 'w-40' },
 }
 
 interface Props {

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

@@ -0,0 +1,21 @@
+import { ChevronDown, ChevronUp } from 'components/common/Icons'
+
+export const CHEVRON_META = {
+  id: 'chevron',
+  enableSorting: false,
+  header: '',
+  meta: {
+    className: 'w-5',
+  },
+}
+
+interface Props {
+  isExpanded: boolean
+}
+export default function Chevron(props: Props) {
+  return (
+    <div className='flex items-center justify-end'>
+      <div className='w-4'>{props.isExpanded ? <ChevronUp /> : <ChevronDown />}</div>
+    </div>
+  )
+}

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

@@ -10,7 +10,6 @@ export const LIQUIDITY_META = {
   accessorKey: 'liquidity',
   header: 'Liquidity Available',
   id: 'liquidity',
-  meta: { className: 'w-40' },
 }
 
 export const liquiditySortingFn = (

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

@@ -1,20 +1,55 @@
-import { ChevronDown, ChevronUp } from 'components/common/Icons'
+import { useCallback, useMemo } from 'react'
+
+import DropDownButton from 'components/common/Button/DropDownButton'
+import { HandCoins, Plus } from 'components/common/Icons'
+import useStore from 'store'
 
 export const MANAGE_META = {
   accessorKey: 'manage',
   enableSorting: false,
-  header: 'Manage',
-  meta: { className: 'w-30' },
+  header: '',
 }
 
 interface Props {
-  isExpanded: boolean
+  data: BorrowMarketTableData
 }
 
 export default function Manage(props: Props) {
+  const address = useStore((s) => s.address)
+
+  const borrowHandler = useCallback(() => {
+    if (!props.data.asset) return null
+    useStore.setState({ borrowModal: { asset: props.data.asset, marketData: props.data } })
+  }, [props.data])
+
+  const repayHandler = useCallback(() => {
+    if (!props.data.asset) return null
+    useStore.setState({
+      borrowModal: { asset: props.data.asset, marketData: props.data, isRepay: true },
+    })
+  }, [props.data])
+
+  const ITEMS: DropDownItem[] = useMemo(
+    () => [
+      {
+        icon: <Plus />,
+        text: 'Borrow more',
+        onClick: borrowHandler,
+      },
+      {
+        icon: <HandCoins />,
+        text: 'Repay',
+        onClick: repayHandler,
+      },
+    ],
+    [borrowHandler, repayHandler],
+  )
+
+  if (!address) return null
+
   return (
-    <div className='flex items-center justify-end'>
-      <div className='w-4'>{props.isExpanded ? <ChevronUp /> : <ChevronDown />}</div>
+    <div className='flex justify-end z-10'>
+      <DropDownButton items={ITEMS} text='Manage' color='tertiary' />
     </div>
   )
 }

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

@@ -1,12 +1,13 @@
 import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
+import BorrowButton, { BORROW_BUTTON_META } from 'components/borrow/Table/Columns/BorrowButton'
 import BorrowRate, { BORROW_RATE_META } from 'components/borrow/Table/Columns/BorrowRate'
+import Chevron, { CHEVRON_META } from 'components/borrow/Table/Columns/Chevron'
 import Liquidity, {
   LIQUIDITY_META,
   liquiditySortingFn,
 } from 'components/borrow/Table/Columns/Liquidity'
-import Manage, { MANAGE_META } from 'components/borrow/Table/Columns/Manage'
 import Name, { NAME_META } from 'components/borrow/Table/Columns/Name'
 
 export default function useAvailableColumns() {
@@ -26,8 +27,12 @@ export default function useAvailableColumns() {
         sortingFn: liquiditySortingFn,
       },
       {
-        ...MANAGE_META,
-        cell: ({ row }) => <Manage isExpanded={row.getIsExpanded()} />,
+        ...BORROW_BUTTON_META,
+        cell: ({ row }) => <BorrowButton data={row.original} />,
+      },
+      {
+        ...CHEVRON_META,
+        cell: ({ row }) => <Chevron isExpanded={row.getIsExpanded()} />,
       },
     ]
   }, [])

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

@@ -2,6 +2,7 @@ import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
 import BorrowRate, { BORROW_RATE_META } from 'components/borrow/Table/Columns/BorrowRate'
+import Chevron, { CHEVRON_META } from 'components/borrow/Table/Columns/Chevron'
 import Debt, { DEBT_META, debtSortingFn } from 'components/borrow/Table/Columns/Debt'
 import Liquidity, {
   LIQUIDITY_META,
@@ -33,7 +34,11 @@ export default function useDepositedColumns() {
       },
       {
         ...MANAGE_META,
-        cell: ({ row }) => <Manage isExpanded={row.getIsExpanded()} />,
+        cell: ({ row }) => <Manage data={row.original} />,
+      },
+      {
+        ...CHEVRON_META,
+        cell: ({ row }) => <Chevron isExpanded={row.getIsExpanded()} />,
       },
     ]
   }, [])

src/components/borrow/Table/DepositedBorrowingsTable.tsx

@@ -1,12 +1,10 @@
 import { Row } from '@tanstack/react-table'
 import { useCallback } from 'react'
 
-import BorrowActionButtons from 'components/borrow/BorrowActionButtons'
 import { NAME_META } from 'components/borrow/Table/Columns/Name'
 import useDepositedColumns from 'components/borrow/Table/Columns/useDepositedColumns'
 import MarketDetails from 'components/common/MarketDetails'
 import Table from 'components/common/Table'
-import ActionButtonRow from 'components/common/Table/ActionButtonRow'
 
 type Props = {
   data: BorrowMarketTableData[]
@@ -17,15 +15,7 @@ export default function DepositedBorrowingsTable(props: Props) {
   const columns = useDepositedColumns()
 
   const renderExpanded = useCallback((row: Row<BorrowMarketTableData>) => {
-    const currentRow = row as Row<BorrowMarketTableData>
-    return (
-      <>
-        <ActionButtonRow row={currentRow}>
-          <BorrowActionButtons data={row.original} />
-        </ActionButtonRow>
-        <MarketDetails row={row} type='borrow' />
-      </>
-    )
+    return <MarketDetails row={row} type='borrow' />
   }, [])
 
   if (!props.data.length) return null

src/components/common/Button/DropDownButton.tsx

@@ -16,14 +16,17 @@ export default function DropDownButton(props: Props) {
       content={<DropDown closeMenu={() => toggleIsOpen(false)} {...props} />}
       type='info'
       placement='bottom'
-      contentClassName='!bg-white/10 backdrop-blur-xl !p-0'
+      contentClassName='!bg-white/10 backdrop-blur-xl !p-0 w-full min-w-[140px]'
       interactive
       hideArrow
       visible={isOpen}
       onClickOutside={() => toggleIsOpen(false)}
     >
       <Button
-        onClick={() => toggleIsOpen()}
+        onClick={(e) => {
+          toggleIsOpen()
+          e.stopPropagation()
+        }}
         rightIcon={<ChevronDown />}
         iconClassName='w-3 h-3'
         {...props}
@@ -39,7 +42,7 @@ interface DropDownProps {
 
 function DropDown(props: DropDownProps) {
   return (
-    <div>
+    <div className='w-full'>
       {props.items.map((item) => (
         <DropDownItem key={item.text} item={item} closeMenu={props.closeMenu} />
       ))}
@@ -55,11 +58,13 @@ interface DropDownItemProps {
 function DropDownItem(props: DropDownItemProps) {
   return (
     <button
-      onClick={() => {
+      onClick={(e) => {
+        e.preventDefault()
         props.item.onClick()
         props.closeMenu()
+        e.stopPropagation()
       }}
-      className=' px-4 py-3 flex gap-2 items-center hover:bg-white/5 w-full [&:not(:last-child)]:border-b border-white/10'
+      className='z-1 px-4 py-3 flex gap-2 items-center hover:bg-white/5 w-full [&:not(:last-child)]:border-b border-white/10'
     >
       <div className='flex justify-center w-5 h-5'>{props.item.icon}</div>
       <Text size='sm'>{props.item.text}</Text>

src/components/common/Table/Row.tsx

@@ -10,6 +10,7 @@ interface Props<T> {
   className?: string
   isSelectable?: boolean
   type?: TableType
+  onClick?: (id: string) => void
 }
 
 function getBorderColor(
@@ -36,7 +37,7 @@ export default function Row<T>(props: Props<T>) {
         key={`${row.id}-row`}
         className={classNames(
           'group/row transition-bg',
-          (renderExpanded || isSelectable) && 'hover:cursor-pointer',
+          (renderExpanded || isSelectable || props.onClick) && 'hover:cursor-pointer',
           canExpand && row.getIsExpanded() ? 'is-expanded bg-black/20' : 'hover:bg-white/5',
         )}
         onClick={(e) => {
@@ -49,6 +50,10 @@ export default function Row<T>(props: Props<T>) {
             table.resetExpanded()
             !isExpanded && row.toggleExpanded()
           }
+
+          if (props.onClick) {
+            props.onClick((row.original as any).asset.denom)
+          }
         }}
       >
         {row.getVisibleCells().map((cell) => {
@@ -61,7 +66,7 @@ export default function Row<T>(props: Props<T>) {
                 spacingClassName ?? 'px-3 py-4',
                 type && type !== 'strategies' && isSymbolOrName && 'border-l',
                 type && type !== 'strategies' && getBorderColor(type, cell.row.original as any),
-                cell.column.columnDef.meta?.className,
+                cell.column.columnDef.meta?.className ?? 'w-min',
               )}
             >
               {flexRender(cell.column.columnDef.cell, cell.getContext())}

src/components/common/Table/index.tsx

@@ -31,6 +31,7 @@ interface Props<T> {
   hideCard?: boolean
   setRowSelection?: OnChangeFn<RowSelectionState>
   selectedRows?: RowSelectionState
+  onClickRow?: (id: string) => void
 }
 
 export default function Table<T>(props: Props<T>) {
@@ -75,6 +76,7 @@ export default function Table<T>(props: Props<T>) {
                       props.spacingClassName ?? 'px-4 py-3',
                       header.column.getCanSort() && 'hover:cursor-pointer',
                       header.id === 'symbol' || header.id === 'name' ? 'text-left' : 'text-right',
+                      'w-min',
                       header.column.columnDef.meta?.className,
                     )}
                   >
@@ -122,6 +124,7 @@ export default function Table<T>(props: Props<T>) {
               spacingClassName={props.spacingClassName}
               isSelectable={!!props.setRowSelection}
               type={props.type}
+              onClick={props.onClickRow}
             />
           ))}
         </tbody>

src/components/common/Tooltip/TooltipContent.tsx

@@ -16,9 +16,9 @@ export default function TooltipContent(props: Props) {
     <div>
       <div
         className={classNames(
-          'flex max-w-[320px] flex-1 gap-2 rounded-lg p-3 text-sm shadow-tooltip backdrop-blur-[100px]',
+          'flex max-w-[320px] flex-1 gap-2 rounded-base p-3 text-sm shadow-tooltip backdrop-blur-[100px]',
           'relative isolate max-w-full overflow-hidden',
-          'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-lg before:p-[1px] before:border-glas',
+          'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-base before:p-[1px] before:border-glas',
           props.type === 'info' && 'bg-white/10',
           props.type === 'warning' && 'bg-warning',
           props.type === 'error' && 'bg-error',

src/components/earn/lend/LendingActionButtons.tsx

@@ -1,98 +0,0 @@
-import { useCallback } from 'react'
-
-import { ACCOUNT_MENU_BUTTON_ID } from 'components/account/AccountMenuContent'
-import Button from 'components/common/Button'
-import ActionButton from 'components/common/Button/ActionButton'
-import { ArrowDownLine, ArrowUpLine, Enter, ExclamationMarkCircled } from 'components/common/Icons'
-import Text from 'components/common/Text'
-import { Tooltip } from 'components/common/Tooltip'
-import ConditionalWrapper from 'hocs/ConditionalWrapper'
-import useAccountId from 'hooks/useAccountId'
-import useAlertDialog from 'hooks/useAlertDialog'
-import useAutoLend from 'hooks/useAutoLend'
-import useCurrentAccountDeposits from 'hooks/useCurrentAccountDeposits'
-import useLendAndReclaimModal from 'hooks/useLendAndReclaimModal'
-import useStore from 'store'
-import { byDenom } from 'utils/array'
-
-interface Props {
-  data: LendingMarketTableData
-}
-
-const buttonClassnames = 'm-0 flex w-40'
-const iconClassnames = 'ml-0 mr-1 w-4 h-4'
-
-export default function LendingActionButtons(props: Props) {
-  const { asset, accountLentValue: accountLendValue } = props.data
-  const accountDeposits = useCurrentAccountDeposits()
-  const { openLend, openReclaim } = useLendAndReclaimModal()
-  const { open: showAlertDialog } = useAlertDialog()
-  const { isAutoLendEnabledForCurrentAccount } = useAutoLend()
-  const assetDepositAmount = accountDeposits.find(byDenom(asset.denom))?.amount
-  const address = useStore((s) => s.address)
-  const accountId = useAccountId()
-  const hasNoDeposit = !!(!assetDepositAmount && address && accountId)
-
-  const handleUnlend = useCallback(() => {
-    if (isAutoLendEnabledForCurrentAccount) {
-      showAlertDialog({
-        icon: <ExclamationMarkCircled width={18} />,
-        title: 'Disable Automatically Lend Assets',
-        content:
-          "Your auto-lend feature is currently enabled. To unlend your funds, please confirm if you'd like to disable this feature in order to continue.",
-        positiveButton: {
-          onClick: () => document.getElementById(ACCOUNT_MENU_BUTTON_ID)?.click(),
-          text: 'Continue to Account Settings',
-          icon: <Enter />,
-        },
-        negativeButton: {
-          text: 'Cancel',
-        },
-      })
-
-      return
-    }
-
-    openReclaim(props.data)
-  }, [isAutoLendEnabledForCurrentAccount, openReclaim, props.data, showAlertDialog])
-
-  return (
-    <div className='flex flex-row space-x-2'>
-      {accountLendValue && accountLendValue.isGreaterThan(0) && (
-        <Button
-          leftIcon={<ArrowDownLine />}
-          iconClassName={iconClassnames}
-          color='secondary'
-          onClick={handleUnlend}
-          className={buttonClassnames}
-        >
-          Unlend
-        </Button>
-      )}
-
-      <ConditionalWrapper
-        condition={hasNoDeposit}
-        wrapper={(children) => (
-          <Tooltip
-            type='warning'
-            content={
-              <Text size='sm'>{`You don’t have any ${asset.symbol}. Please first deposit ${asset.symbol} into your Credit Account before lending.`}</Text>
-            }
-          >
-            {children}
-          </Tooltip>
-        )}
-      >
-        <ActionButton
-          leftIcon={<ArrowUpLine />}
-          iconClassName={iconClassnames}
-          disabled={hasNoDeposit}
-          color='secondary'
-          onClick={() => openLend(props.data)}
-          className={buttonClassnames}
-          text='Lend'
-        />
-      </ConditionalWrapper>
-    </div>
-  )
-}

src/components/earn/lend/Table/AvailableLendsTable.tsx

@@ -1,12 +1,10 @@
 import { Row } from '@tanstack/react-table'
 import { useCallback } from 'react'
 
-import LendingActionButtons from 'components/earn/lend/LendingActionButtons'
-import { NAME_META } from 'components/earn/lend/Table/Columns/Name'
-import useAvailableColumns from 'components/earn/lend/Table/Columns/useAvailableColumns'
 import MarketDetails from 'components/common/MarketDetails'
 import Table from 'components/common/Table'
-import ActionButtonRow from 'components/common/Table/ActionButtonRow'
+import { NAME_META } from 'components/earn/lend/Table/Columns/Name'
+import useAvailableColumns from 'components/earn/lend/Table/Columns/useAvailableColumns'
 
 type Props = {
   data: LendingMarketTableData[]
@@ -19,9 +17,6 @@ export default function AvailableLendsTable(props: Props) {
   const renderExpanded = useCallback(
     (row: Row<LendingMarketTableData>) => (
       <>
-        <ActionButtonRow row={row}>
-          <LendingActionButtons data={row.original} />
-        </ActionButtonRow>
         <MarketDetails row={row} type='lend' />
       </>
     ),

src/components/earn/lend/Table/Columns/Chevron.tsx

@@ -0,0 +1,21 @@
+import { ChevronDown, ChevronUp } from 'components/common/Icons'
+
+export const CHEVRON_META = {
+  id: 'chevron',
+  enableSorting: false,
+  header: '',
+  meta: {
+    className: 'w-5',
+  },
+}
+
+interface Props {
+  isExpanded: boolean
+}
+export default function Chevron(props: Props) {
+  return (
+    <div className='flex items-center justify-end'>
+      <div className='w-4'>{props.isExpanded ? <ChevronUp /> : <ChevronDown />}</div>
+    </div>
+  )
+}

src/components/earn/lend/Table/Columns/DepositCap.tsx

@@ -10,7 +10,6 @@ export const DEPOSIT_CAP_META = {
   accessorKey: 'marketDepositCap',
   header: 'Deposit Cap',
   id: 'marketDepositCap',
-  meta: { className: 'w-40' },
 }
 
 export const marketDepositCapSortingFn = (

src/components/earn/lend/Table/Columns/LendButton.tsx

@@ -0,0 +1,60 @@
+import ActionButton from 'components/common/Button/ActionButton'
+import { ArrowUpLine } from 'components/common/Icons'
+import Text from 'components/common/Text'
+import { Tooltip } from 'components/common/Tooltip'
+import ConditionalWrapper from 'hocs/ConditionalWrapper'
+import useAccountId from 'hooks/useAccountId'
+import useCurrentAccountDeposits from 'hooks/useCurrentAccountDeposits'
+import useLendAndReclaimModal from 'hooks/useLendAndReclaimModal'
+import useStore from 'store'
+import { byDenom } from 'utils/array'
+
+export const LEND_BUTTON_META = {
+  accessorKey: 'lend',
+  enableSorting: false,
+  header: '',
+}
+
+interface Props {
+  data: LendingMarketTableData
+}
+export default function LendButton(props: Props) {
+  const { openLend } = useLendAndReclaimModal()
+  const accountDeposits = useCurrentAccountDeposits()
+  const assetDepositAmount = accountDeposits.find(byDenom(props.data.asset.denom))?.amount
+  const address = useStore((s) => s.address)
+  const accountId = useAccountId()
+  const hasNoDeposit = !!(!assetDepositAmount && address && accountId)
+
+  return (
+    <div className='flex justify-end'>
+      <ConditionalWrapper
+        condition={hasNoDeposit}
+        wrapper={(children) => (
+          <Tooltip
+            type='warning'
+            content={
+              <Text size='sm'>{`You don’t have any ${props.data.asset.symbol}.
+             Please first deposit ${props.data.asset.symbol} into your Credit Account before lending.`}</Text>
+            }
+            contentClassName='max-w-[200px]'
+            className='ml-auto'
+          >
+            {children}
+          </Tooltip>
+        )}
+      >
+        <ActionButton
+          leftIcon={<ArrowUpLine />}
+          disabled={hasNoDeposit}
+          color='tertiary'
+          onClick={(e) => {
+            openLend(props.data)
+            e.stopPropagation()
+          }}
+          text='Lend'
+        />
+      </ConditionalWrapper>
+    </div>
+  )
+}

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

@@ -1,21 +1,77 @@
-import { ChevronDown, ChevronUp } from 'components/common/Icons'
+import { useCallback, useMemo } from 'react'
+
+import { ACCOUNT_MENU_BUTTON_ID } from 'components/account/AccountMenuContent'
+import DropDownButton from 'components/common/Button/DropDownButton'
+import { ArrowDownLine, ArrowUpLine, Enter, ExclamationMarkCircled } from 'components/common/Icons'
+import useAlertDialog from 'hooks/useAlertDialog'
+import useAutoLend from 'hooks/useAutoLend'
+import useLendAndReclaimModal from 'hooks/useLendAndReclaimModal'
+import useStore from 'store'
 
 export const MANAGE_META = {
   accessorKey: 'manage',
   enableSorting: false,
-  header: 'Manage',
-  meta: {
-    className: 'w-30',
-  },
+  header: '',
 }
 
 interface Props {
-  isExpanded: boolean
+  data: LendingMarketTableData
 }
 export default function Manage(props: Props) {
+  const { openLend, openReclaim } = useLendAndReclaimModal()
+  const { isAutoLendEnabledForCurrentAccount } = useAutoLend()
+  const { open: showAlertDialog } = useAlertDialog()
+  const address = useStore((s) => s.address)
+
+  const hasLendAsset = useMemo(
+    () => !!props.data.accountLentValue && props.data.accountLentValue.isGreaterThan(0),
+    [props.data.accountLentValue],
+  )
+
+  const handleUnlend = useCallback(() => {
+    if (isAutoLendEnabledForCurrentAccount) {
+      showAlertDialog({
+        icon: <ExclamationMarkCircled width={18} />,
+        title: 'Disable Automatically Lend Assets',
+        content:
+          "Your auto-lend feature is currently enabled. To unlend your funds, please confirm if you'd like to disable this feature in order to continue.",
+        positiveButton: {
+          onClick: () => document.getElementById(ACCOUNT_MENU_BUTTON_ID)?.click(),
+          text: 'Continue to Account Settings',
+          icon: <Enter />,
+        },
+        negativeButton: {
+          text: 'Cancel',
+        },
+      })
+
+      return
+    }
+
+    openReclaim(props.data)
+  }, [isAutoLendEnabledForCurrentAccount, openReclaim, props.data, showAlertDialog])
+
+  const ITEMS: DropDownItem[] = useMemo(
+    () => [
+      {
+        icon: <ArrowUpLine />,
+        text: hasLendAsset ? 'Lend more' : 'Lend',
+        onClick: () => openLend(props.data),
+      },
+      {
+        icon: <ArrowDownLine />,
+        text: 'Unlend',
+        onClick: handleUnlend,
+      },
+    ],
+    [handleUnlend, hasLendAsset, openLend, props.data],
+  )
+
+  if (!address) return null
+
   return (
-    <div className='flex items-center justify-end'>
-      <div className='w-4'>{props.isExpanded ? <ChevronUp /> : <ChevronDown />}</div>
+    <div className='flex justify-end z-10'>
+      <DropDownButton items={ITEMS} text='Manage' color='tertiary' />
     </div>
   )
 }

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

@@ -2,11 +2,12 @@ import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
 import Apy, { APY_META } from 'components/earn/lend/Table/Columns/Apy'
+import Chevron, { CHEVRON_META } from 'components/earn/lend/Table/Columns/Chevron'
 import DepositCap, {
   DEPOSIT_CAP_META,
   marketDepositCapSortingFn,
 } from 'components/earn/lend/Table/Columns/DepositCap'
-import Manage, { MANAGE_META } from 'components/earn/lend/Table/Columns/Manage'
+import LendButton, { LEND_BUTTON_META } from 'components/earn/lend/Table/Columns/LendButton'
 import Name, { NAME_META } from 'components/earn/lend/Table/Columns/Name'
 
 interface Props {
@@ -36,8 +37,12 @@ export default function useAvailableColumns(props: Props) {
         sortingFn: marketDepositCapSortingFn,
       },
       {
-        ...MANAGE_META,
-        cell: ({ row }) => <Manage isExpanded={row.getIsExpanded()} />,
+        ...LEND_BUTTON_META,
+        cell: ({ row }) => <LendButton data={row.original} />,
+      },
+      {
+        ...CHEVRON_META,
+        cell: ({ row }) => <Chevron isExpanded={row.getIsExpanded()} />,
       },
     ]
   }, [props.isLoading])

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

@@ -2,6 +2,7 @@ import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
 import Apy, { APY_META } from 'components/earn/lend/Table/Columns/Apy'
+import Chevron, { CHEVRON_META } from 'components/earn/lend/Table/Columns/Chevron'
 import DepositCap, {
   DEPOSIT_CAP_META,
   marketDepositCapSortingFn,
@@ -48,7 +49,11 @@ export default function useDepositedColumns(props: Props) {
       },
       {
         ...MANAGE_META,
-        cell: ({ row }) => <Manage isExpanded={row.getIsExpanded()} />,
+        cell: ({ row }) => <Manage data={row.original} />,
+      },
+      {
+        ...CHEVRON_META,
+        cell: ({ row }) => <Chevron isExpanded={row.getIsExpanded()} />,
       },
     ]
   }, [props.isLoading])

src/components/earn/lend/Table/DepositedLendsTable.tsx

@@ -1,12 +1,10 @@
 import { Row } from '@tanstack/react-table'
 import { useCallback } from 'react'
 
-import LendingActionButtons from 'components/earn/lend/LendingActionButtons'
-import { NAME_META } from 'components/earn/lend/Table/Columns/Name'
-import useDepositedColumns from 'components/earn/lend/Table/Columns/useDepositedColumns'
 import MarketDetails from 'components/common/MarketDetails'
 import Table from 'components/common/Table'
-import ActionButtonRow from 'components/common/Table/ActionButtonRow'
+import { NAME_META } from 'components/earn/lend/Table/Columns/Name'
+import useDepositedColumns from 'components/earn/lend/Table/Columns/useDepositedColumns'
 
 type Props = {
   data: LendingMarketTableData[]
@@ -17,14 +15,7 @@ export default function DepositedLendsTable(props: Props) {
   const columns = useDepositedColumns({ isLoading: props.isLoading })
 
   const renderExpanded = useCallback(
-    (row: Row<LendingMarketTableData>) => (
-      <>
-        <ActionButtonRow row={row}>
-          <LendingActionButtons data={row.original} />
-        </ActionButtonRow>
-        <MarketDetails row={row} type='lend' />
-      </>
-    ),
+    (row: Row<LendingMarketTableData>) => <MarketDetails row={row} type='lend' />,
     [],
   )
 

src/components/perps/BalancesTable/index.tsx

@@ -1,10 +1,32 @@
+import { useCallback } from 'react'
+import { useSearchParams } from 'react-router-dom'
+
+import Table from 'components/common/Table'
 import usePerpsBalancesColumns from 'components/perps/BalancesTable/Columns/usePerpsBalancesColumns'
 import usePerpsBalancesData from 'components/perps/BalancesTable/usePerpsBalancesData'
-import Table from 'components/common/Table'
+import { SearchParams } from 'types/enums/searchParams'
+import { getSearchParamsObject } from 'utils/route'
 
 export default function PerpsBalancesTable() {
   const data = usePerpsBalancesData()
   const columns = usePerpsBalancesColumns()
+  const [searchParams, setSearchParams] = useSearchParams()
 
-  return <Table title='Perp Positions' columns={columns} data={data} initialSorting={[]} />
+  const onClickRow = useCallback((denom: string) => {
+    const params = getSearchParamsObject(searchParams)
+    setSearchParams({
+      ...params,
+      [SearchParams.PERPS_MARKET]: denom,
+    })
+  }, [])
+
+  return (
+    <Table
+      title='Perp Positions'
+      columns={columns}
+      data={data}
+      initialSorting={[]}
+      onClickRow={onClickRow}
+    />
+  )
 }