diff --git a/src/components/Wallet/WalletConnectedButton.tsx b/src/components/Wallet/WalletConnectedButton.tsx index faf694b8..fa60b15f 100644 --- a/src/components/Wallet/WalletConnectedButton.tsx +++ b/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() { // --------------- diff --git a/src/components/borrow/BorrowActionButtons.tsx b/src/components/borrow/BorrowActionButtons.tsx deleted file mode 100644 index 5d766d0c..00000000 --- a/src/components/borrow/BorrowActionButtons.tsx +++ /dev/null @@ -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 ( -
- } - onClick={borrowHandler} - color='secondary' - text={accountDebt ? 'Borrow more' : 'Borrow'} - className='text-center min-w-40' - /> - {accountDebt && ( -
- ) -} diff --git a/src/components/borrow/Table/AvailableBorrowingsTable.tsx b/src/components/borrow/Table/AvailableBorrowingsTable.tsx index 652baaeb..b025e004 100644 --- a/src/components/borrow/Table/AvailableBorrowingsTable.tsx +++ b/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, _: TanstackTable) => { const currentRow = row as Row - return ( - <> - - - - - - ) + return }, [], ) diff --git a/src/components/borrow/Table/Columns/BorrowButton.tsx b/src/components/borrow/Table/Columns/BorrowButton.tsx new file mode 100644 index 00000000..9f2c6606 --- /dev/null +++ b/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 ( +
+ ( + {`You don’t have any collateral. + Please first deposit into your Credit Account before borrowing.`} + } + contentClassName='max-w-[200px]' + className='ml-auto' + > + {children} + + )} + > + } + disabled={hasNoDeposits} + color='tertiary' + onClick={(e) => { + borrowHandler() + e.stopPropagation() + }} + text='Borrow' + /> + +
+ ) +} diff --git a/src/components/borrow/Table/Columns/BorrowRate.tsx b/src/components/borrow/Table/Columns/BorrowRate.tsx index 01c154ab..2f8cef90 100644 --- a/src/components/borrow/Table/Columns/BorrowRate.tsx +++ b/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 { diff --git a/src/components/borrow/Table/Columns/Chevron.tsx b/src/components/borrow/Table/Columns/Chevron.tsx new file mode 100644 index 00000000..efd9d678 --- /dev/null +++ b/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 ( +
+
{props.isExpanded ? : }
+
+ ) +} diff --git a/src/components/borrow/Table/Columns/Liquidity.tsx b/src/components/borrow/Table/Columns/Liquidity.tsx index c2202edc..1a871f3e 100644 --- a/src/components/borrow/Table/Columns/Liquidity.tsx +++ b/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 = ( diff --git a/src/components/borrow/Table/Columns/Manage.tsx b/src/components/borrow/Table/Columns/Manage.tsx index f6515b14..c7112d06 100644 --- a/src/components/borrow/Table/Columns/Manage.tsx +++ b/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: , + text: 'Borrow more', + onClick: borrowHandler, + }, + { + icon: , + text: 'Repay', + onClick: repayHandler, + }, + ], + [borrowHandler, repayHandler], + ) + + if (!address) return null + return ( -
-
{props.isExpanded ? : }
+
+
) } diff --git a/src/components/borrow/Table/Columns/useAvailableColumns.tsx b/src/components/borrow/Table/Columns/useAvailableColumns.tsx index 16eb04d1..9cc2bd8e 100644 --- a/src/components/borrow/Table/Columns/useAvailableColumns.tsx +++ b/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 }) => , + ...BORROW_BUTTON_META, + cell: ({ row }) => , + }, + { + ...CHEVRON_META, + cell: ({ row }) => , }, ] }, []) diff --git a/src/components/borrow/Table/Columns/useDepositedColumns.tsx b/src/components/borrow/Table/Columns/useDepositedColumns.tsx index fa657241..4c311786 100644 --- a/src/components/borrow/Table/Columns/useDepositedColumns.tsx +++ b/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 }) => , + cell: ({ row }) => , + }, + { + ...CHEVRON_META, + cell: ({ row }) => , }, ] }, []) diff --git a/src/components/borrow/Table/DepositedBorrowingsTable.tsx b/src/components/borrow/Table/DepositedBorrowingsTable.tsx index 85b6fa96..8eaf08da 100644 --- a/src/components/borrow/Table/DepositedBorrowingsTable.tsx +++ b/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) => { - const currentRow = row as Row - return ( - <> - - - - - - ) + return }, []) if (!props.data.length) return null diff --git a/src/components/common/Button/DropDownButton.tsx b/src/components/common/Button/DropDownButton.tsx index 6b54572e..fb54de85 100644 --- a/src/components/common/Button/DropDownButton.tsx +++ b/src/components/common/Button/DropDownButton.tsx @@ -16,14 +16,17 @@ export default function DropDownButton(props: Props) { content={ 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)} > - )} - - ( - {`You don’t have any ${asset.symbol}. Please first deposit ${asset.symbol} into your Credit Account before lending.`} - } - > - {children} - - )} - > - } - iconClassName={iconClassnames} - disabled={hasNoDeposit} - color='secondary' - onClick={() => openLend(props.data)} - className={buttonClassnames} - text='Lend' - /> - -
- ) -} diff --git a/src/components/earn/lend/Table/AvailableLendsTable.tsx b/src/components/earn/lend/Table/AvailableLendsTable.tsx index a8b10b5b..e4da0208 100644 --- a/src/components/earn/lend/Table/AvailableLendsTable.tsx +++ b/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) => ( <> - - - ), diff --git a/src/components/earn/lend/Table/Columns/Chevron.tsx b/src/components/earn/lend/Table/Columns/Chevron.tsx new file mode 100644 index 00000000..efd9d678 --- /dev/null +++ b/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 ( +
+
{props.isExpanded ? : }
+
+ ) +} diff --git a/src/components/earn/lend/Table/Columns/DepositCap.tsx b/src/components/earn/lend/Table/Columns/DepositCap.tsx index efd92d05..1ad1028e 100644 --- a/src/components/earn/lend/Table/Columns/DepositCap.tsx +++ b/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 = ( diff --git a/src/components/earn/lend/Table/Columns/LendButton.tsx b/src/components/earn/lend/Table/Columns/LendButton.tsx new file mode 100644 index 00000000..ffe78a75 --- /dev/null +++ b/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 ( +
+ ( + {`You don’t have any ${props.data.asset.symbol}. + Please first deposit ${props.data.asset.symbol} into your Credit Account before lending.`} + } + contentClassName='max-w-[200px]' + className='ml-auto' + > + {children} + + )} + > + } + disabled={hasNoDeposit} + color='tertiary' + onClick={(e) => { + openLend(props.data) + e.stopPropagation() + }} + text='Lend' + /> + +
+ ) +} diff --git a/src/components/earn/lend/Table/Columns/Manage.tsx b/src/components/earn/lend/Table/Columns/Manage.tsx index 863c2084..82a808a3 100644 --- a/src/components/earn/lend/Table/Columns/Manage.tsx +++ b/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: , + 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: , + }, + negativeButton: { + text: 'Cancel', + }, + }) + + return + } + + openReclaim(props.data) + }, [isAutoLendEnabledForCurrentAccount, openReclaim, props.data, showAlertDialog]) + + const ITEMS: DropDownItem[] = useMemo( + () => [ + { + icon: , + text: hasLendAsset ? 'Lend more' : 'Lend', + onClick: () => openLend(props.data), + }, + { + icon: , + text: 'Unlend', + onClick: handleUnlend, + }, + ], + [handleUnlend, hasLendAsset, openLend, props.data], + ) + + if (!address) return null + return ( -
-
{props.isExpanded ? : }
+
+
) } diff --git a/src/components/earn/lend/Table/Columns/useAvailableColumns.tsx b/src/components/earn/lend/Table/Columns/useAvailableColumns.tsx index c066a1a7..976402c1 100644 --- a/src/components/earn/lend/Table/Columns/useAvailableColumns.tsx +++ b/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 }) => , + ...LEND_BUTTON_META, + cell: ({ row }) => , + }, + { + ...CHEVRON_META, + cell: ({ row }) => , }, ] }, [props.isLoading]) diff --git a/src/components/earn/lend/Table/Columns/useDepositedColumns.tsx b/src/components/earn/lend/Table/Columns/useDepositedColumns.tsx index 6274f09e..d39702fe 100644 --- a/src/components/earn/lend/Table/Columns/useDepositedColumns.tsx +++ b/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 }) => , + cell: ({ row }) => , + }, + { + ...CHEVRON_META, + cell: ({ row }) => , }, ] }, [props.isLoading]) diff --git a/src/components/earn/lend/Table/DepositedLendsTable.tsx b/src/components/earn/lend/Table/DepositedLendsTable.tsx index 42d37ade..b63da489 100644 --- a/src/components/earn/lend/Table/DepositedLendsTable.tsx +++ b/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) => ( - <> - - - - - - ), + (row: Row) => , [], ) diff --git a/src/components/perps/BalancesTable/index.tsx b/src/components/perps/BalancesTable/index.tsx index 6e643172..94b7774b 100644 --- a/src/components/perps/BalancesTable/index.tsx +++ b/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 + const onClickRow = useCallback((denom: string) => { + const params = getSearchParamsObject(searchParams) + setSearchParams({ + ...params, + [SearchParams.PERPS_MARKET]: denom, + }) + }, []) + + return ( +
+ ) }