fix(launch-market): Pre-populate market when on trade page (#1117)

src/components/Popover.tsx

@@ -24,6 +24,7 @@ type ElementProps = {
 
 type StyleProps = {
   className?: string;
+  disabled?: boolean;
   fullWidth?: boolean;
   noBlur?: boolean;
   align?: 'start' | 'center' | 'end';
@@ -48,6 +49,7 @@ export const Popover = ({
   withPortal = false,
   className,
   children,
+  disabled,
 }: PopoverProps) => {
   const [trigger, setTrigger] = useState<HTMLButtonElement | null>(null);
   const rect = useRect(trigger);
@@ -70,7 +72,7 @@ export const Popover = ({
 
   return (
     <Root modal={modal} open={open} onOpenChange={onOpenChange}>
-      <$Trigger ref={setTrigger} $noBlur={noBlur} $triggerType={triggerType}>
+      <$Trigger ref={setTrigger} disabled={disabled} $noBlur={noBlur} $triggerType={triggerType}>
         {slotTrigger}
       </$Trigger>
       {slotAnchor}

src/components/SearchSelectMenu.tsx

@@ -23,6 +23,7 @@ import { DropdownIcon } from './DropdownIcon';
 type ElementProps = {
   asChild?: boolean;
   children: ReactNode;
+  disabled?: boolean;
   label?: string;
   items: MenuConfig<string, string>;
   withSearch?: boolean;
@@ -39,6 +40,7 @@ export const SearchSelectMenu = ({
   asChild,
   children,
   className,
+  disabled,
   label,
   items,
   withSearch = true,
@@ -59,7 +61,7 @@ export const SearchSelectMenu = ({
   ) : (
     <$MenuTrigger>
       {label ? <$WithLabel label={label}>{children}</$WithLabel> : children}
-      <DropdownIcon isOpen={open} />
+      {!disabled && <DropdownIcon isOpen={open} />}
     </$MenuTrigger>
   );
 
@@ -68,6 +70,7 @@ export const SearchSelectMenu = ({
       <$WithDetailsReceipt detailItems={withReceiptItems} side="bottom">
         <$Popover
           open={open}
+          disabled={disabled}
           onOpenChange={setOpen}
           slotTrigger={Trigger}
           triggerType={TriggerType.SearchSelect}

src/constants/dialogs.ts

@@ -41,7 +41,7 @@ export type GeoComplianceDialogProps = {};
 export type GlobalCommandDialogProps = {};
 export type HelpDialogProps = {};
 export type ExternalNavKeplrDialogProps = {};
-export type LaunchMarketDialogProps = {};
+export type LaunchMarketDialogProps = { defaultLaunchableMarketId?: string };
 export type ManageFundsDialogProps = { selectedTransferType?: string };
 export type MnemonicExportDialogProps = {};
 export type MobileDownloadDialogProps = { mobileAppUrl: string };

src/layout/Header/HeaderDesktop.tsx

@@ -94,7 +94,7 @@ export const HeaderDesktop = () => {
               {
                 value: 'TEST_MARKET',
                 label: 'TIME-USD',
-                href: '/trade/TIME,RAYDIUM,ED5WBEYAYTLM4WRGNOHPXJEWNIAIKEFIOVMJYZH6K31M?pml=true',
+                href: '/trade/TIME,RAYDIUM,ED5WBEYAYTLM4WRGNOHPXJEWNIAIKEFIOVMJYZH6K31M-USD?pml=true',
               },
             ]
           : []),

src/pages/trade/MarketSelectorAndStats.tsx

@@ -4,9 +4,9 @@ import styled from 'styled-components';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { VerticalSeparator } from '@/components/Separator';
+import { LaunchableMarketStatsDetails } from '@/views/LaunchableMarketStatsDetails';
 import { MarketStatsDetails } from '@/views/MarketStatsDetails';
 import { MarketsDropdown } from '@/views/MarketsDropdown';
-import { UnlaunchedMarketStatsDetails } from '@/views/UnlaunchedMarketStatsDetails';
 
 import { useAppSelector } from '@/state/appTypes';
 import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
@@ -42,7 +42,7 @@ export const MarketSelectorAndStats = ({
       <VerticalSeparator fullHeight={!!uiRefresh} />
 
       {launchableMarketId ? (
-        <UnlaunchedMarketStatsDetails launchableMarketId={launchableMarketId} />
+        <LaunchableMarketStatsDetails launchableMarketId={launchableMarketId} />
       ) : (
         <MarketStatsDetails />
       )}

src/pages/trade/MobileBottomPanel.tsx

@@ -5,10 +5,10 @@ import { STRING_KEYS } from '@/constants/localization';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
 import { MobileTabs } from '@/components/Tabs';
+import { LaunchableMarketStatsDetails } from '@/views/LaunchableMarketStatsDetails';
 import { CurrentMarketDetails } from '@/views/MarketDetails/CurrentMarketDetails';
 import { LaunchableMarketDetails } from '@/views/MarketDetails/LaunchableMarketDetails';
 import { MarketStatsDetails } from '@/views/MarketStatsDetails';
-import { UnlaunchedMarketStatsDetails } from '@/views/UnlaunchedMarketStatsDetails';
 
 enum InfoSection {
   Statistics = 'Statistics',
@@ -26,7 +26,7 @@ export const MobileBottomPanel = ({ launchableMarketId }: { launchableMarketId?:
           value: InfoSection.Statistics,
           label: stringGetter({ key: STRING_KEYS.STATISTICS }),
           content: (
-            <UnlaunchedMarketStatsDetails
+            <LaunchableMarketStatsDetails
               launchableMarketId={launchableMarketId}
               showMidMarketPrice={false}
             />

src/views/LaunchMarketSidePanel.tsx

@@ -111,8 +111,15 @@ export const LaunchMarketSidePanel = ({
       >
         <Button
           action={ButtonAction.Primary}
+          disabled={!launchableAsset}
           onClick={() => {
-            dispatch(openDialog(DialogTypes.LaunchMarket()));
+            if (launchableMarketId) {
+              dispatch(
+                openDialog(
+                  DialogTypes.LaunchMarket({ defaultLaunchableMarketId: launchableMarketId })
+                )
+              );
+            }
           }}
         >
           {stringGetter({ key: STRING_KEYS.BEGIN_LAUNCH })} →

src/views/UnlaunchedMarketStatsDetails.tsx → src/views/LaunchableMarketStatsDetails.tsx

@@ -1,5 +1,8 @@
+import { ReactNode } from 'react';
+
 import styled, { css } from 'styled-components';
 
+import { Nullable } from '@/constants/abacus';
 import { STRING_KEYS } from '@/constants/localization';
 import { USD_DECIMALS } from '@/constants/numbers';
 import { TooltipStringKeys } from '@/constants/tooltips';
@@ -12,6 +15,7 @@ import breakpoints from '@/styles/breakpoints';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Details } from '@/components/Details';
+import { Icon, IconName } from '@/components/Icon';
 import { Output, OutputType } from '@/components/Output';
 import { VerticalSeparator } from '@/components/Separator';
 
@@ -43,7 +47,7 @@ const DetailsItem = ({ value, stat }: { value: number | null | undefined; stat:
   }
 };
 
-export const UnlaunchedMarketStatsDetails = ({
+export const LaunchableMarketStatsDetails = ({
   launchableMarketId,
   showMidMarketPrice = true,
 }: ElementProps) => {
@@ -54,19 +58,32 @@ export const UnlaunchedMarketStatsDetails = ({
   const {
     marketCap,
     price,
+    reportedMarketCap,
     tickSizeDecimals,
     volume24h: spotVolume24H,
   } = orEmptyObj(launchableAsset);
 
+  const showSelfReportedMarketCap = marketCap ? false : !!reportedMarketCap;
+
   const valueMap = {
-    [MarketStats.MARKET_CAP]: marketCap,
+    [MarketStats.MARKET_CAP]: showSelfReportedMarketCap ? reportedMarketCap : marketCap,
     [MarketStats.SPOT_VOLUME_24H]: spotVolume24H,
-  };
+  } satisfies Record<MarketStats, Nullable<number>>;
+
+  const tooltipMap = {
+    [MarketStats.MARKET_CAP]: showSelfReportedMarketCap ? 'self-reported-cmc' : undefined,
+    [MarketStats.SPOT_VOLUME_24H]: undefined,
+  } satisfies Record<MarketStats, TooltipStringKeys | undefined>;
 
   const labelMap = {
-    [MarketStats.MARKET_CAP]: stringGetter({ key: STRING_KEYS.MARKET_CAP }),
+    [MarketStats.MARKET_CAP]: (
+      <span tw="flex items-center gap-0.25">
+        {stringGetter({ key: STRING_KEYS.MARKET_CAP })}
+        {showSelfReportedMarketCap && <Icon iconName={IconName.CautionCircle} />}
+      </span>
+    ),
     [MarketStats.SPOT_VOLUME_24H]: stringGetter({ key: STRING_KEYS.SPOT_VOLUME_24H }),
-  };
+  } satisfies Record<MarketStats, ReactNode>;
 
   return (
     <$MarketDetailsItems>
@@ -81,7 +98,7 @@ export const UnlaunchedMarketStatsDetails = ({
         items={defaultMarketStatistics.map((stat) => ({
           key: stat,
           label: labelMap[stat],
-          tooltip: stat as unknown as TooltipStringKeys,
+          tooltip: tooltipMap[stat],
           value: <DetailsItem value={valueMap[stat]} stat={stat} />,
         }))}
         layout={isTablet ? 'grid' : 'rowColumns'}

src/views/dialogs/LaunchMarketDialog.tsx

@@ -16,7 +16,10 @@ import { Output, OutputType } from '@/components/Output';
 
 import { NewMarketForm, NewMarketFormStep } from '../forms/NewMarketForm';
 
-export const LaunchMarketDialog = ({ setIsOpen }: DialogProps<LaunchMarketDialogProps>) => {
+export const LaunchMarketDialog = ({
+  defaultLaunchableMarketId,
+  setIsOpen,
+}: DialogProps<LaunchMarketDialogProps>) => {
   const { isMobile } = useBreakpoints();
   const [formStep, setFormStep] = useState<NewMarketFormStep>();
   const stringGetter = useStringGetter();
@@ -86,7 +89,10 @@ export const LaunchMarketDialog = ({ setIsOpen }: DialogProps<LaunchMarketDialog
       setIsOpen={setIsOpen}
       placement={isMobile ? DialogPlacement.FullScreen : DialogPlacement.Default}
     >
-      <NewMarketForm setFormStep={setFormStep} />
+      <NewMarketForm
+        defaultLaunchableMarketId={defaultLaunchableMarketId}
+        setFormStep={setFormStep}
+      />
     </Dialog>
   );
 };

src/views/forms/NewMarketForm/index.tsx

@@ -36,15 +36,17 @@ export enum NewMarketFormStep {
 }
 
 export const NewMarketForm = ({
+  defaultLaunchableMarketId,
   setFormStep,
   updateTickerToAdd,
 }: {
+  defaultLaunchableMarketId?: string;
   setFormStep?: Dispatch<SetStateAction<NewMarketFormStep | undefined>>;
   updateTickerToAdd?: Dispatch<SetStateAction<string | undefined>>;
 }) => {
   const [step, setStep] = useState(NewMarketFormStep.SELECTION);
   const [assetToAdd, setAssetToAdd] = useState<NewMarketProposal>();
-  const [tickerToAdd, setTickerToAdd] = useState<string>();
+  const [tickerToAdd, setTickerToAdd] = useState<string | undefined>(defaultLaunchableMarketId);
   const [liquidityTier, setLiquidityTier] = useState<number>();
   const [proposalTxHash, setProposalTxHash] = useState<string>();
   const { mintscan: mintscanTxUrl } = useURLConfigs();