120 lines
3.4 KiB
TypeScript
120 lines
3.4 KiB
TypeScript
import React, { useCallback } from 'react';
|
|
import { useMarketList } from '@vegaprotocol/market-list';
|
|
import { t } from '@vegaprotocol/i18n';
|
|
import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
|
|
import { Link as UILink, TinyScroll } from '@vegaprotocol/ui-toolkit';
|
|
import type { OnCellClickHandler } from '../select-market';
|
|
import type { MarketMaybeWithDataAndCandles } from '@vegaprotocol/market-list';
|
|
import {
|
|
ColumnKind,
|
|
columns,
|
|
SelectMarketTableHeader,
|
|
SelectMarketTableRow,
|
|
} from '../select-market';
|
|
import { WelcomeDialogHeader } from './welcome-dialog-header';
|
|
import { Link } from 'react-router-dom';
|
|
import { ProposedMarkets } from './proposed-markets';
|
|
import { Links, Routes } from '../../pages/client-router';
|
|
import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
|
|
|
|
export const SelectMarketLandingTable = ({
|
|
markets,
|
|
onClose,
|
|
}: {
|
|
markets: MarketMaybeWithDataAndCandles[] | null;
|
|
onClose: () => void;
|
|
}) => {
|
|
const onSelect = useMarketClickHandler();
|
|
const onSelectMarket = useCallback(
|
|
(id: string, metaKey?: boolean) => {
|
|
onSelect(id, metaKey);
|
|
if (!metaKey) {
|
|
onClose();
|
|
}
|
|
},
|
|
[onSelect, onClose]
|
|
);
|
|
const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
|
|
const onCellClick = useCallback<OnCellClickHandler>(
|
|
(e, kind, value) => {
|
|
if (value && kind === ColumnKind.Asset) {
|
|
openAssetDetailsDialog(value, e.target as HTMLElement);
|
|
}
|
|
},
|
|
[openAssetDetailsDialog]
|
|
);
|
|
const showProposed = (markets?.length || 0) <= 5;
|
|
return (
|
|
<>
|
|
<TinyScroll
|
|
className="max-h-[60vh] overflow-x-auto -mr-4 pr-4"
|
|
data-testid="select-market-list"
|
|
>
|
|
<p className="text-neutral-500 dark:text-neutral-400 mb-4">
|
|
{t('Select a market to get started...')}
|
|
</p>
|
|
<table className="text-sm relative h-full min-w-full whitespace-nowrap">
|
|
<thead className="sticky top-0 z-10 bg-white dark:bg-black">
|
|
<SelectMarketTableHeader />
|
|
</thead>
|
|
<tbody>
|
|
{markets?.map((market, i) => (
|
|
<SelectMarketTableRow
|
|
marketId={market.id}
|
|
key={i}
|
|
detailed={false}
|
|
onSelect={onSelectMarket}
|
|
columns={columns(market, onSelectMarket, onCellClick)}
|
|
/>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</TinyScroll>
|
|
<div className="mt-4 text-md">
|
|
<Link
|
|
to={Links[Routes.MARKETS]()}
|
|
data-testid="view-market-list-link"
|
|
onClick={() => onClose()}
|
|
>
|
|
<UILink className="text-sm underline">
|
|
{'Or view full market list'}
|
|
</UILink>
|
|
</Link>
|
|
</div>
|
|
{showProposed && <ProposedMarkets />}
|
|
</>
|
|
);
|
|
};
|
|
|
|
interface LandingDialogContainerProps {
|
|
onClose: () => void;
|
|
}
|
|
|
|
export const WelcomeLandingDialog = ({
|
|
onClose,
|
|
}: LandingDialogContainerProps) => {
|
|
const { data, loading, error } = useMarketList();
|
|
if (error) {
|
|
return (
|
|
<div className="flex justify-center items-center">
|
|
<p className="my-8">{t('Failed to load markets')}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex justify-center items-center">
|
|
<p className="my-8">{t('Loading...')}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<WelcomeDialogHeader />
|
|
<SelectMarketLandingTable markets={data} onClose={onClose} />
|
|
</>
|
|
);
|
|
};
|