fix: PML miscellaneous nits (#1111)

dydxprotocol · Oct 3, 2024 · e04d6c0 · e04d6c0
1 parent 9adb8aa
commit e04d6c0
Show file tree

Hide file tree

Showing 10 changed files with 94 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 },
         })}
       </h2>
+
       <div tw="flex flex-col gap-1">{steps}</div>
-      <Button
-        action={ButtonAction.Primary}
-        onClick={() => {
-          dispatch(openDialog(DialogTypes.LaunchMarket()));
-        }}
+
+      <WithDetailsReceipt
+        side="top"
+        detailItems={[
+          {
+            key: 'deposit',
+            label: stringGetter({ key: STRING_KEYS.DEPOSIT }),
+            value: (
+              <Output
+                tw="inline text-color-text-1"
+                type={OutputType.Asset}
+                value={10_000}
+                slotRight={<AssetIcon tw="mb-[-0.125rem] ml-0.25 inline" symbol="USDC" />}
+                fractionDigits={0}
+              />
+            ),
+          },
+          {
+            key: 'time-until-live',
+            label: stringGetter({ key: STRING_KEYS.TIME_UNTIL_LIVE }),
+            value: (
+              <span tw="text-color-positive">{stringGetter({ key: STRING_KEYS.INSTANT })}</span>
+            ),
+          },
+        ]}
       >
-        {stringGetter({ key: STRING_KEYS.LAUNCH_MARKET })}
-      </Button>
+        <Button
+          action={ButtonAction.Primary}
+          onClick={() => {
+            dispatch(openDialog(DialogTypes.LaunchMarket()));
+          }}
+        >
+          {stringGetter({ key: STRING_KEYS.BEGIN_LAUNCH })} →
+        </Button>
+      </WithDetailsReceipt>
     </$Container>
   );
 };

diff --git 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: <Output useGrouping value={marketCap} type={OutputType.Fiat} />,
+      label: (
+        <span tw="flex items-center gap-0.25">
+          {stringGetter({ key: STRING_KEYS.MARKET_CAP })}
+          {showSelfReportedMarketCap && <Icon iconName={IconName.CautionCircle} />}
+        </span>
+      ),
+      value: (
+        <Output
+          type={OutputType.Fiat}
+          value={showSelfReportedMarketCap ? reportedMarketCap : marketCap}
+        />
+      ),
+      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
@@ -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<MetadataServiceCandlesTimeframes>('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: (
+        <span tw="flex items-center gap-0.25">
+          {stringGetter({ key: STRING_KEYS.MARKET_CAP })}
+          {showSelfReportedMarketCap && <Icon iconName={IconName.CautionCircle} />}
+        </span>
+      ),
       value: (
         <Output
           type={OutputType.CompactFiat}
           isLoading={!ticker}
           tw="text-color-text-1"
-          value={marketCap}
+          value={showSelfReportedMarketCap ? reportedMarketCap : marketCap}
         />
       ),
+      tooltip: showSelfReportedMarketCap ? ('self-reported-cmc' as TooltipStringKeys) : undefined,
     },
     {
       key: 'max-leverage',
@@ -148,9 +158,9 @@ export const LaunchableMarketChart = ({
           )}
           <h2 tw="flex flex-row items-center gap-[0.5ch] text-extra text-color-text-1">
             {name && (
-              <Link href={websiteLink}>
+              <Link href={cmcLink}>
                 <span>{name}</span>
-                <LinkOutIcon tw="h-1.25 w-1.25" />
+                {cmcLink && <LinkOutIcon tw="h-1.25 w-1.25" />}
               </Link>
             )}
           </h2>
@@ -201,7 +211,7 @@ export const LaunchableMarketChart = ({
       </div>
 
       <$ChartContainer chartBackground={chartDotsBackground}>
-        {candlesQuery.isLoading || !candlesQuery.data ? (
+        {!ticker ? null : candlesQuery.isLoading || !candlesQuery.data ? (
           <LoadingSpace id="launchable-market-chart" />
         ) : (
           <TimeSeriesChart

diff --git a/src/views/dialogs/LaunchMarketDialog.tsx b/src/views/dialogs/LaunchMarketDialog.tsx
@@ -35,7 +35,7 @@ export const LaunchMarketDialog = ({ setIsOpen }: DialogProps<LaunchMarketDialog
             </$Title>
           ),
           description: stringGetter({
-            key: STRING_KEYS.MARKET_LAUNCH_DETAILS,
+            key: STRING_KEYS.MARKET_LAUNCH_DETAILS_3,
             params: {
               APR_PERCENTAGE: (
                 <Output

diff --git a/src/views/forms/NewMarketForm/index.tsx b/src/views/forms/NewMarketForm/index.tsx
@@ -79,7 +79,12 @@ export const NewMarketForm = ({
       {
         key: 'deposit-lockup',
         label: stringGetter({ key: STRING_KEYS.DEPOSIT_LOCKUP }),
-        value: <Output type={OutputType.Percent} value={0.3256} />,
+        value: (
+          <Output
+            type={OutputType.Text}
+            value={`30${stringGetter({ key: STRING_KEYS.DAYS_ABBREVIATED })}`}
+          />
+        ),
       },
       {
         key: 'cross-margin-usage',

diff --git a/src/views/forms/NewMarketForm/v7/NewMarketSelectionStep.tsx b/src/views/forms/NewMarketForm/v7/NewMarketSelectionStep.tsx
@@ -78,7 +78,7 @@ export const NewMarketSelectionStep = ({
         </h2>
         <span tw="text-base text-color-text-0">
           {stringGetter({
-            key: STRING_KEYS.MARKET_LAUNCH_DETAILS,
+            key: STRING_KEYS.MARKET_LAUNCH_DETAILS_3,
             params: {
               APR_PERCENTAGE: (
                 <Output
@@ -160,6 +160,7 @@ export const NewMarketSelectionStep = ({
             tw="[--withReceipt-backgroundColor:--color-layer-2]"
           >
             <FormInput
+              disabled
               type={InputType.Currency}
               label={stringGetter({ key: STRING_KEYS.REQUIRED_AMOUNT_TO_DEPOSIT })}
               placeholder="$10,000"