diff --git a/src/components/borrow/Table/Columns/BorrowButton.tsx b/src/components/borrow/Table/Columns/BorrowButton.tsx index 1df103e5..421a277d 100644 --- a/src/components/borrow/Table/Columns/BorrowButton.tsx +++ b/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 diff --git a/src/components/common/Button/DropDownButton.tsx b/src/components/common/Button/DropDownButton.tsx index 752ae397..afc754c7 100644 --- a/src/components/common/Button/DropDownButton.tsx +++ b/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={} iconClassName='w-3 h-3' + showProgressIndicator={props.showProgressIndicator} {...props} /> @@ -62,16 +64,19 @@ function DropDownItem(props: DropDownItemProps) { return ( ( - {props.item.disabledTooltip}} - contentClassName='max-w-[200px]' - className='ml-auto' - > - {children} - - )} + wrapper={(children) => { + if (!props.item.disabledTooltip) return children + return ( + {props.item.disabledTooltip}} + contentClassName='max-w-[200px]' + className='ml-auto' + > + {children} + + ) + }} > diff --git a/src/components/common/DepositCapMessage.tsx b/src/components/common/DepositCapMessage.tsx index 1182e5f8..9b6be7c5 100644 --- a/src/components/common/DepositCapMessage.tsx +++ b/src/components/common/DepositCapMessage.tsx @@ -18,7 +18,11 @@ export default function DepositCapMessage(props: Props) { return (
- {props.showIcon && } + {props.showIcon && ( +
+ +
+ )}
Deposit Cap Reached! {`Unfortunately you're not able to ${ diff --git a/src/components/earn/farm/Table/Columns/Deposit.tsx b/src/components/earn/farm/Table/Columns/Deposit.tsx index 5160ac6f..54ba037a 100644 --- a/src/components/earn/farm/Table/Columns/Deposit.tsx +++ b/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 (
- + } + />
) } diff --git a/src/components/earn/farm/Table/Columns/Details.tsx b/src/components/earn/farm/Table/Columns/Details.tsx deleted file mode 100644 index 644a6058..00000000 --- a/src/components/earn/farm/Table/Columns/Details.tsx +++ /dev/null @@ -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 - - return ( -
-
- -
-
- ) -} diff --git a/src/components/earn/farm/Table/Columns/Manage.tsx b/src/components/earn/farm/Table/Columns/Manage.tsx new file mode 100644 index 00000000..ab85bebc --- /dev/null +++ b/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(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: , + text: 'Deposit more', + onClick: depositMoreHandler, + }, + ...(props.vault.status === VaultStatus.ACTIVE + ? [ + { + icon: , + text: 'Unlock to withdraw', + onClick: unlockHandler, + }, + ] + : []), + ...(props.vault.status === VaultStatus.UNLOCKING + ? [ + { + icon: , + text: `Withdraw in ${moment(props.vault?.unlocksAt).fromNow(true)}`, + onClick: () => {}, + disabled: true, + disabledTooltip: '', + }, + ] + : []), + ...(props.vault.status === VaultStatus.UNLOCKED + ? [ + { + icon: , + text: 'Withdraw funds', + onClick: withdrawHandler, + }, + ] + : []), + ], + [ + depositMoreHandler, + props.vault.status, + props.vault?.unlocksAt, + unlockHandler, + withdrawHandler, + ], + ) + + if (props.isLoading) return + + if (!address) return null + + return ( +
+ +
+ ) +} diff --git a/src/components/earn/farm/Table/Columns/useAvailableColumns.tsx b/src/components/earn/farm/Table/Columns/useAvailableColumns.tsx index 7b155b2c..8269d7d1 100644 --- a/src/components/earn/farm/Table/Columns/useAvailableColumns.tsx +++ b/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 }) => , }, { - ...DETAILS_META, + ...DEPOSIT_META, cell: ({ row }) => , }, ] diff --git a/src/components/earn/farm/Table/Columns/useDepositedColumns.tsx b/src/components/earn/farm/Table/Columns/useDepositedColumns.tsx index 56e62b91..80da2f0b 100644 --- a/src/components/earn/farm/Table/Columns/useDepositedColumns.tsx +++ b/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, - cell: ({ row }) =>
, + ...MANAGE_META, + cell: ({ row }) => ( + + ), }, ] }, [props.isLoading]) diff --git a/src/components/earn/farm/Table/DepositedVaultsTable.tsx b/src/components/earn/farm/Table/DepositedVaultsTable.tsx index 3b7caeef..208b4a1f 100644 --- a/src/components/earn/farm/Table/DepositedVaultsTable.tsx +++ b/src/components/earn/farm/Table/DepositedVaultsTable.tsx @@ -1,10 +1,7 @@ -import { Row } from '@tanstack/react-table' -import { Table as TanStackTable } from '@tanstack/table-core/build/lib/types' -import React, { useCallback } from 'react' +import React 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, table: TanStackTable) => ( - - ), - [], - ) - return ( ) }