diff --git a/components/explore/RecentGainersLosers.tsx b/components/explore/RecentGainersLosers.tsx index 09707550..fda5a708 100644 --- a/components/explore/RecentGainersLosers.tsx +++ b/components/explore/RecentGainersLosers.tsx @@ -1,15 +1,15 @@ import Change from '@components/shared/Change' import FormatNumericValue from '@components/shared/FormatNumericValue' -import TokenLogo from '@components/shared/TokenLogo' import useListedMarketsWithMarketData, { SerumMarketWithMarketData, } from 'hooks/useListedMarketsWithMarketData' import useMangoGroup from 'hooks/useMangoGroup' import { useRouter } from 'next/router' -import { useMemo } from 'react' +import { useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' import { goToTokenPage } from '@components/stats/tokens/TokenOverviewTable' import { + ArrowDownTrayIcon, BoltIcon, ChevronRightIcon, FaceFrownIcon, @@ -25,6 +25,13 @@ import mangoStore from '@store/mangoStore' import { goToPerpMarketDetails } from '@components/stats/perps/PerpMarketDetailsTable' import MarketLogos from '@components/trade/MarketLogos' import { TOKEN_REDUCE_ONLY_OPTIONS } from 'utils/constants' +import TableTokenName from '@components/shared/TableTokenName' +import { IconButton } from '@components/shared/Button' +import DepositWithdrawModal from '@components/modals/DepositWithdrawModal' +import useMangoAccount from 'hooks/useMangoAccount' +import { useWallet } from '@solana/wallet-adapter-react' +import CreateAccountModal from '@components/modals/CreateAccountModal' +import Tooltip from '@components/shared/Tooltip' dayjs.extend(relativeTime) export type BankWithMarketData = { @@ -39,6 +46,8 @@ const RecentGainersLosers = () => { const { t } = useTranslation(['common', 'explore', 'trade']) const router = useRouter() const { group } = useMangoGroup() + const { mangoAccountAddress } = useMangoAccount() + const { connected } = useWallet() const { banks } = useBanks() const { serumMarketsWithData, @@ -46,6 +55,8 @@ const RecentGainersLosers = () => { isLoading: loadingSerumMarkets, } = useListedMarketsWithMarketData() const groupLoaded = mangoStore((s) => s.groupLoaded) + const [showDepositModal, setShowDepositModal] = useState('') + const [showCreateAccountModal, setShowCreateAccountModal] = useState(false) const banksWithMarketData = useMemo(() => { if (!banks.length || !group || !serumMarketsWithData.length) return [] @@ -134,6 +145,14 @@ const RecentGainersLosers = () => { return [gainers, losers] }, [banksWithMarketData, perpMarketsWithData]) + const handleDepositModal = (token: string) => { + if (mangoAccountAddress) { + setShowDepositModal(token) + } else { + setShowCreateAccountModal(true) + } + } + return ( <>
- {token.name} -
-- {bank?.name || gainer?.market?.name} -
-+ {gainer?.market?.name} +
+- {bank?.name || loser?.market?.name} -
-+ {loser?.market?.name} +
+{t('available')}
-{t('trade:max-leverage')}
+{t('available')}
-+ {t('trade:max-leverage')} +
+@@ -566,3 +565,24 @@ const MobileSpotItem = ({ data }: { data: TableData }) => { ) } + +export const LeverageMaxDisplay = ({ + leverageMax, +}: { + leverageMax: number | undefined +}) => { + return ( + + {leverageMax && leverageMax !== Infinity ? ( + = 5 ? GRADIENT_TEXT : ''}`}> + {leverageMax < 2 && leverageMax > 1 + ? leverageMax.toFixed(1) + : leverageMax.toFixed()} + x + + ) : ( + '–' + )} + + ) +} diff --git a/components/explore/WatchlistButton.tsx b/components/explore/WatchlistButton.tsx index be780d32..5c0d41b1 100644 --- a/components/explore/WatchlistButton.tsx +++ b/components/explore/WatchlistButton.tsx @@ -3,6 +3,8 @@ import { TOKEN_WATCHLIST_KEY } from 'utils/constants' import PinFill from '@components/icons/PinFill' import PinOutline from '@components/icons/PinOutline' +export const DEFAULT_WATCHLIST = [4, 0] + const WatchlistButton = ({ tokenIndex, className, @@ -12,7 +14,7 @@ const WatchlistButton = ({ }) => { const [watchlist, setWatchlist] = useLocalStorageState( TOKEN_WATCHLIST_KEY, - [], + DEFAULT_WATCHLIST, ) const toggleWatchlist = (tokenIndex: number) => { diff --git a/components/shared/TableTokenName.tsx b/components/shared/TableTokenName.tsx index df455d23..5e23ac62 100644 --- a/components/shared/TableTokenName.tsx +++ b/components/shared/TableTokenName.tsx @@ -2,7 +2,7 @@ import { Bank } from '@blockworks-foundation/mango-v4' import TokenLogo from './TokenLogo' import TokenReduceOnlyDesc from './TokenReduceOnlyDesc' import { useVaultLimits } from '@components/swap/useVaultLimits' -import { ExclamationTriangleIcon } from '@heroicons/react/20/solid' +import { Battery100Icon } from '@heroicons/react/20/solid' import Tooltip from './Tooltip' import { useTranslation } from 'react-i18next' import { floorToDecimal } from 'utils/numbers' @@ -12,10 +12,12 @@ const TableTokenName = ({ bank, symbol, showLeverage, + hideReduceDesc, }: { bank: Bank symbol: string showLeverage?: boolean + hideReduceDesc?: boolean }) => { const { t } = useTranslation(['common', 'trade']) const { vaultFull } = useVaultLimits(bank) @@ -31,8 +33,8 @@ const TableTokenName = ({
{symbol}
- {showLeverage && leverageMax > 1 && leverageMax < Infinity ? ( -{initLiabWeight.toFixed(2)}x
{loanOriginationFee.toFixed(2)}%
@@ -268,6 +290,7 @@ const TokenDetailsTable = () => {
liquidationFee,
loanOriginationFee,
collateralFeeRate,
+ leverageMax,
} = data
return (
+ {t('trade:max-leverage')}
+