fix: #603 filter out rejected markets & dialog lg width

libs/market-list/src/lib/components/landing/landing-dialog.tsx

@@ -29,7 +29,10 @@ export const LandingDialog = ({ open, setOpen }: LandingDialogProps) => {
         intent={Intent.Primary}
         open={open}
         onChange={setClose}
-        titleClassNames="font-bold font-sans text-3xl tracking-tight mb-0 pl-8"
+        titleClassNames={
+          'font-bold font-sans text-3xl tracking-tight mb-0 pl-8'
+        }
+        contentClassNames={'md:w-[520px] lg:w-[520px] w-full'}
       >
         <SelectMarketList data={data} onSelect={setClose} />
       </Dialog>

libs/market-list/src/lib/components/markets-container/markets-container.tsx

@@ -10,6 +10,7 @@ import type {
   Markets_markets_data,
 } from '../../components/__generated__/Markets';
 import { marketsDataProvider as dataProvider } from './markets-data-provider';
+import { MarketState } from '@vegaprotocol/types';
 
 export const MarketsContainer = () => {
   const { push } = useRouter();
@@ -28,14 +29,15 @@ export const MarketsContainer = () => {
     Markets_markets_data
   >({ dataProvider, update });
   dataRef.current = data;
-
   const getRows = async ({
     successCallback,
     startRow,
     endRow,
   }: IGetRowsParams) => {
     const rowsThisBlock = dataRef.current
-      ? dataRef.current.slice(startRow, endRow)
+      ? dataRef.current
+          .slice(startRow, endRow)
+          .filter((m) => m.data?.market.state !== MarketState.Rejected)
       : [];
     const lastRow = dataRef.current?.length ?? -1;
     successCallback(rowsThisBlock, lastRow);

libs/market-list/src/lib/utils/market-list.utils.ts

@@ -1,3 +1,4 @@
+import { MarketState } from '@vegaprotocol/types';
 import orderBy from 'lodash/orderBy';
 import type {
   MarketList,
@@ -11,22 +12,24 @@ export const lastPrice = ({ candles }: MarketList_markets) =>
 
 export const mapDataToMarketList = ({ markets }: MarketList) =>
   orderBy(
-    markets?.map((m) => {
-      return {
-        id: m.id,
-        decimalPlaces: m.decimalPlaces,
-        marketName: m.tradableInstrument.instrument?.code,
-        lastPrice: lastPrice(m) ?? m.data?.markPrice,
-        candles: (m.candles || []).filter((c) => c),
-        open: m.marketTimestamps.open
-          ? new Date(m.marketTimestamps.open).getTime()
-          : null,
-        close: m.marketTimestamps.close
-          ? new Date(m.marketTimestamps.close).getTime()
-          : null,
-        state: m.state,
-      };
-    }) || [],
+    markets
+      ?.filter((m) => m.state !== MarketState.Rejected)
+      .map((m) => {
+        return {
+          id: m.id,
+          decimalPlaces: m.decimalPlaces,
+          marketName: m.tradableInstrument.instrument?.code,
+          lastPrice: lastPrice(m) ?? m.data?.markPrice,
+          candles: (m.candles || []).filter((c) => c),
+          open: m.marketTimestamps.open
+            ? new Date(m.marketTimestamps.open).getTime()
+            : null,
+          close: m.marketTimestamps.close
+            ? new Date(m.marketTimestamps.close).getTime()
+            : null,
+          state: m.state,
+        };
+      }) || [],
     ['state', 'open', 'id'],
     ['asc', 'asc', 'asc']
   );

libs/ui-toolkit/src/components/dialog/dialog.tsx

@@ -26,7 +26,7 @@ export function Dialog({
 }: DialogProps) {
   const contentClasses = classNames(
     // Positions the modal in the center of screen
-    'z-20 fixed w-full md:w-[520px] lg:w-[1000px] px-28 py-24 top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]',
+    'z-20 fixed w-full md:w-[720px] px-28 py-24 top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]',
     // Need to apply background and text colors again as content is rendered in a portal
     'dark:bg-black dark:text-white-95 bg-white text-black-95',
     getIntentShadow(intent),