From e04d6c0abd60d6e41b211740d9b386a134beda61 Mon Sep 17 00:00:00 2001 From: Jared Vu Date: Thu, 3 Oct 2024 15:35:13 -0700 Subject: [PATCH] fix: PML miscellaneous nits (#1111) --- src/constants/tooltips/index.ts | 2 + src/constants/tooltips/newMarkets.ts | 11 +++++ src/constants/tooltips/trade.ts | 4 -- src/layout/Header/HeaderDesktop.tsx | 4 +- src/views/LaunchMarketSidePanel.tsx | 43 ++++++++++++++++--- .../MarketDetails/LaunchableMarketDetails.tsx | 20 +++++++-- src/views/charts/LaunchableMarketChart.tsx | 24 ++++++++--- src/views/dialogs/LaunchMarketDialog.tsx | 2 +- src/views/forms/NewMarketForm/index.tsx | 7 ++- .../v7/NewMarketSelectionStep.tsx | 3 +- 10 files changed, 94 insertions(+), 26 deletions(-) create mode 100644 src/constants/tooltips/newMarkets.ts diff --git a/src/constants/tooltips/index.ts b/src/constants/tooltips/index.ts index 863144a1e..72444eacf 100644 --- a/src/constants/tooltips/index.ts +++ b/src/constants/tooltips/index.ts @@ -2,6 +2,7 @@ import type { TooltipStrings } from '@/constants/localization'; import { depositTooltips } from './deposit'; import { generalTooltips } from './general'; +import { newMarketsTooltips } from './newMarkets'; import { portfolioTooltips } from './portfolio'; import { stakeTooltips } from './stake'; import { tradeTooltips } from './trade'; @@ -13,6 +14,7 @@ import { withdrawTooltips } from './withdraw'; export const tooltipStrings = { ...depositTooltips, ...generalTooltips, + ...newMarketsTooltips, ...portfolioTooltips, ...stakeTooltips, ...tradeTooltips, diff --git a/src/constants/tooltips/newMarkets.ts b/src/constants/tooltips/newMarkets.ts new file mode 100644 index 000000000..cf4f8671f --- /dev/null +++ b/src/constants/tooltips/newMarkets.ts @@ -0,0 +1,11 @@ +import { TOOLTIP_STRING_KEYS, type TooltipStrings } from '@/constants/localization'; + +export const newMarketsTooltips = { + 'reference-price': ({ stringGetter }) => ({ + title: stringGetter({ key: TOOLTIP_STRING_KEYS.REFERENCE_PRICE_TITLE }), + body: stringGetter({ key: TOOLTIP_STRING_KEYS.REFERENCE_PRICE_BODY }), + }), + 'self-reported-cmc': ({ stringGetter }) => ({ + body: stringGetter({ key: TOOLTIP_STRING_KEYS.SELF_REPORTED_CMC_BODY }), + }), +} satisfies TooltipStrings; diff --git a/src/constants/tooltips/trade.ts b/src/constants/tooltips/trade.ts index 133e67bf2..15927be0e 100644 --- a/src/constants/tooltips/trade.ts +++ b/src/constants/tooltips/trade.ts @@ -191,10 +191,6 @@ export const tradeTooltips = { title: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_TIMEINFORCE_IOC_TITLE }), body: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_TIMEINFORCE_IOC_BODY }), }), - 'reference-price': ({ stringGetter }) => ({ - title: stringGetter({ key: TOOLTIP_STRING_KEYS.REFERENCE_PRICE_TITLE }), - body: stringGetter({ key: TOOLTIP_STRING_KEYS.REFERENCE_PRICE_BODY }), - }), spread: () => ({ title: 'Spread', body: 'The difference in price between the highest bid (the price a buyer is willing to buy for) and lowest ask (the price a seller is willing to sell for) an asset.', diff --git a/src/layout/Header/HeaderDesktop.tsx b/src/layout/Header/HeaderDesktop.tsx index aed917a01..a9caf6c12 100644 --- a/src/layout/Header/HeaderDesktop.tsx +++ b/src/layout/Header/HeaderDesktop.tsx @@ -83,7 +83,7 @@ export const HeaderDesktop = () => { href: AppRoute.Markets, }, ]), - ...(!uiRefreshEnabled && showLaunchMarkets + ...(showLaunchMarkets ? [ { value: 'LAUNCH_MARKET', @@ -94,7 +94,7 @@ export const HeaderDesktop = () => { { value: 'TEST_MARKET', label: 'TIME-USD', - href: '/trade/TIME,raydium,ED5wbeyAYtLM4WRGnohPxJEwniaikEFioVmJyZH6K31m-USD?pml=true', + href: '/trade/TIME,RAYDIUM,ED5WBEYAYTLM4WRGNOHPXJEWNIAIKEFIOVMJYZH6K31M?pml=true', }, ] : []), diff --git a/src/views/LaunchMarketSidePanel.tsx b/src/views/LaunchMarketSidePanel.tsx index 52c17e739..4c3ea8170 100644 --- a/src/views/LaunchMarketSidePanel.tsx +++ b/src/views/LaunchMarketSidePanel.tsx @@ -10,6 +10,7 @@ import { useStringGetter } from '@/hooks/useStringGetter'; import { AssetIcon } from '@/components/AssetIcon'; import { Button } from '@/components/Button'; import { Output, OutputType } from '@/components/Output'; +import { WithDetailsReceipt } from '@/components/WithDetailsReceipt'; import { useAppDispatch } from '@/state/appTypes'; import { openDialog } from '@/state/dialogs'; @@ -80,15 +81,43 @@ export const LaunchMarketSidePanel = ({ params: { MARKET: baseAsset }, })} +
{steps}
- + + ); }; diff --git a/src/views/MarketDetails/LaunchableMarketDetails.tsx b/src/views/MarketDetails/LaunchableMarketDetails.tsx index e3b93bb2f..afa6b799e 100644 --- a/src/views/MarketDetails/LaunchableMarketDetails.tsx +++ b/src/views/MarketDetails/LaunchableMarketDetails.tsx @@ -1,10 +1,12 @@ import { STRING_KEYS } from '@/constants/localization'; import { LIQUIDITY_TIERS } from '@/constants/markets'; +import { TooltipStringKeys } from '@/constants/tooltips'; import { useMetadataServiceAssetFromId } from '@/hooks/useLaunchableMarkets'; import { useStringGetter } from '@/hooks/useStringGetter'; import { DetailsItem } from '@/components/Details'; +import { Icon, IconName } from '@/components/Icon'; import { Output, OutputType } from '@/components/Output'; import { getDisplayableTickerFromMarket } from '@/lib/assetUtils'; @@ -20,8 +22,9 @@ export const LaunchableMarketDetails = ({ launchableMarketId }: { launchableMark if (!launchableAsset) return null; - const { name, id, logo, urls, marketCap, volume24h } = launchableAsset; + const { name, id, logo, urls, marketCap, reportedMarketCap, volume24h } = launchableAsset; const { website, technicalDoc, cmc } = urls; + const showSelfReportedMarketCap = marketCap ? false : !!reportedMarketCap; const items = [ { @@ -31,8 +34,19 @@ export const LaunchableMarketDetails = ({ launchableMarketId }: { launchableMark }, { key: 'market-cap', - label: stringGetter({ key: STRING_KEYS.MARKET_CAP }), - value: , + label: ( + + {stringGetter({ key: STRING_KEYS.MARKET_CAP })} + {showSelfReportedMarketCap && } + + ), + value: ( + + ), + tooltip: showSelfReportedMarketCap ? ('self-reported-cmc' as TooltipStringKeys) : undefined, }, { key: 'volume-24h', diff --git a/src/views/charts/LaunchableMarketChart.tsx b/src/views/charts/LaunchableMarketChart.tsx index 5586f2150..b747061e2 100644 --- a/src/views/charts/LaunchableMarketChart.tsx +++ b/src/views/charts/LaunchableMarketChart.tsx @@ -11,6 +11,7 @@ import { TradingViewBar } from '@/constants/candles'; import { STRING_KEYS } from '@/constants/localization'; import { LIQUIDITY_TIERS } from '@/constants/markets'; import { timeUnits } from '@/constants/time'; +import { TooltipStringKeys } from '@/constants/tooltips'; import { useMetadataServiceAssetFromId, @@ -21,6 +22,7 @@ import { useStringGetter } from '@/hooks/useStringGetter'; import { LinkOutIcon } from '@/icons'; import { Details } from '@/components/Details'; +import { Icon, IconName } from '@/components/Icon'; import { Link } from '@/components/Link'; import { LoadingSpace } from '@/components/Loading/LoadingSpinner'; import { Output, OutputType } from '@/components/Output'; @@ -48,24 +50,32 @@ export const LaunchableMarketChart = ({ const stringGetter = useStringGetter(); const [timeframe, setTimeframe] = useState('1d'); const launchableAsset = useMetadataServiceAssetFromId(ticker); - const { id, marketCap, name, price, logo, tickSizeDecimals, urls } = orEmptyObj(launchableAsset); - const websiteLink = urls?.website ?? undefined; + const { id, marketCap, name, price, logo, reportedMarketCap, tickSizeDecimals, urls } = + orEmptyObj(launchableAsset); + const cmcLink = urls?.cmc ?? undefined; const candlesQuery = useMetadataServiceCandles(id, timeframe); const selectedLocale = useAppSelector(getSelectedLocale); const chartDotsBackground = useAppSelector(getChartDotBackground); + const showSelfReportedMarketCap = marketCap ? false : !!reportedMarketCap; const items = [ { key: 'market-cap', - label: stringGetter({ key: STRING_KEYS.MARKET_CAP }), + label: ( + + {stringGetter({ key: STRING_KEYS.MARKET_CAP })} + {showSelfReportedMarketCap && } + + ), value: ( ), + tooltip: showSelfReportedMarketCap ? ('self-reported-cmc' as TooltipStringKeys) : undefined, }, { key: 'max-leverage', @@ -148,9 +158,9 @@ export const LaunchableMarketChart = ({ )}

{name && ( - + {name} - + {cmcLink && } )}

@@ -201,7 +211,7 @@ export const LaunchableMarketChart = ({ <$ChartContainer chartBackground={chartDotsBackground}> - {candlesQuery.isLoading || !candlesQuery.data ? ( + {!ticker ? null : candlesQuery.isLoading || !candlesQuery.data ? ( ) : ( ), description: stringGetter({ - key: STRING_KEYS.MARKET_LAUNCH_DETAILS, + key: STRING_KEYS.MARKET_LAUNCH_DETAILS_3, params: { APR_PERCENTAGE: ( , + value: ( + + ), }, { key: 'cross-margin-usage', diff --git a/src/views/forms/NewMarketForm/v7/NewMarketSelectionStep.tsx b/src/views/forms/NewMarketForm/v7/NewMarketSelectionStep.tsx index 22e42a765..62e369799 100644 --- a/src/views/forms/NewMarketForm/v7/NewMarketSelectionStep.tsx +++ b/src/views/forms/NewMarketForm/v7/NewMarketSelectionStep.tsx @@ -78,7 +78,7 @@ export const NewMarketSelectionStep = ({ {stringGetter({ - key: STRING_KEYS.MARKET_LAUNCH_DETAILS, + key: STRING_KEYS.MARKET_LAUNCH_DETAILS_3, params: { APR_PERCENTAGE: (