feat: [console-lite] - refactor market-list view afetr design update (#1244)

* feat: [console-lite] - refactor market-list view afetr design update

* feat: [console-lite] - refactor market-list fix failing test

* feat: [console-lite] - refactor market-list fix failing test

* feat: [console-lite] - refactor market-list fix failing test

Co-authored-by: maciek <maciek@vegaprotocol.io>
This commit is contained in:
macqbat 2022-09-06 08:13:17 +02:00 committed by GitHub
parent 5eb06254de
commit 7fe282a9fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 32 additions and 194 deletions

View File

@ -69,9 +69,7 @@ describe('market selector', () => {
cy.get('input[placeholder="Search"]').clear();
cy.get('input[placeholder="Search"]').type('aa');
const filtered = markets.filter(
(market) =>
market.data.market.state === 'STATE_ACTIVE' &&
market.name.match(/aa/i)
(market) => market.state === 'STATE_ACTIVE' && market.name.match(/aa/i)
);
cy.getByTestId('market-pane')
.children()

View File

@ -76,14 +76,7 @@ const protoCandles = [
export const protoMarket = {
id: 'first-btcusd-id',
name: 'AAVEDAI Monthly (30 Jun 2022)',
data: {
market: {
id: 'first-btcusd-id',
state: 'STATE_ACTIVE',
__typename: 'Market',
},
__typename: 'MarketData',
},
state: 'STATE_ACTIVE',
tradableInstrument: {
instrument: {
code: 'AAVEDAI.MF21',

View File

@ -8,14 +8,6 @@ export const generateSimpleMarkets = () => {
id: '57fbaa322e97cfc8bb5f1de048c37e033c41b1ac1906d3aed9960912a067ef5a',
name: 'CELUSD (June 2022)',
state: 'Active',
data: {
market: {
id: '57fbaa322e97cfc8bb5f1de048c37e033c41b1ac1906d3aed9960912a067ef5a',
state: 'STATE_PENDING',
__typename: 'Market',
},
__typename: 'MarketData',
},
tradableInstrument: {
instrument: {
code: 'CELUSD',
@ -45,14 +37,6 @@ export const generateSimpleMarkets = () => {
id: 'ccf2f04865e5951ac3405da6e16b7cbdb535a0ad32df4df2dbed4262cf473255',
name: 'XMRUSD market',
state: 'Suspended',
data: {
market: {
id: 'ccf2f04865e5951ac3405da6e16b7cbdb535a0ad32df4df2dbed4262cf473255',
state: 'STATE_PROPOSED',
__typename: 'Market',
},
__typename: 'MarketData',
},
tradableInstrument: {
instrument: {
code: 'XMRUSD',
@ -82,14 +66,6 @@ export const generateSimpleMarkets = () => {
id: '6030e5b4e0ca3297a26081e5af4d453f97f96baab2d74bf56f84efcffc4c382f',
name: 'UNIDAI Monthly (30 Jun 2022)',
state: 'Active',
data: {
market: {
id: '6030e5b4e0ca3297a26081e5af4d453f97f96baab2d74bf56f84efcffc4c382f',
state: 'STATE_SUSPENDED',
__typename: 'Market',
},
__typename: 'MarketData',
},
tradableInstrument: {
instrument: {
code: 'UNIDAI.MF21',
@ -193,14 +169,6 @@ export const generateSimpleMarkets = () => {
id: 'de74a5572045b300e8ec50d136896912ec76e7d7ec135bc305dfd4854d9363a4',
name: 'XMRUSD market',
state: 'Pending',
data: {
market: {
id: 'de74a5572045b300e8ec50d136896912ec76e7d7ec135bc305dfd4854d9363a4',
state: 'STATE_ACTIVE',
__typename: 'Market',
},
__typename: 'MarketData',
},
tradableInstrument: {
instrument: {
code: 'XMRUSD',
@ -303,14 +271,6 @@ export const generateSimpleMarkets = () => {
id: '31ea96284611771e486c820acb26a325a99664f9854b5a7e7ad99023efa8f9e6',
name: 'ApeCoin (18 Jul 2022)',
state: 'Closed',
data: {
market: {
id: '31ea96284611771e486c820acb26a325a99664f9854b5a7e7ad99023efa8f9e6',
state: 'STATE_PROPOSED',
__typename: 'Market',
},
__typename: 'MarketData',
},
tradableInstrument: {
instrument: {
code: 'APE/USD',
@ -339,14 +299,6 @@ export const generateSimpleMarkets = () => {
id: '34cff959cdc2ffdb0f167820d701fe8b51cc6b8588e650d93369aaa22d6f8b74',
name: 'BTCUSD Monthly (18 Jul 2022)',
state: 'Settled',
data: {
market: {
id: '34cff959cdc2ffdb0f167820d701fe8b51cc6b8588e650d93369aaa22d6f8b74',
state: 'STATE_PROPOSED',
__typename: 'Market',
},
__typename: 'MarketData',
},
tradableInstrument: {
instrument: {
code: 'BTCUSD.MF21',
@ -377,14 +329,6 @@ export const generateSimpleMarkets = () => {
id: '87b0bbb3c171baa5d97dfc3852332829c91e5c5dc9f7c8fb584c6d8ac75aaaf2',
name: 'Builders Club x ETHcc',
state: 'Settled',
data: {
market: {
id: '87b0bbb3c171baa5d97dfc3852332829c91e5c5dc9f7c8fb584c6d8ac75aaaf2',
state: 'STATE_ACTIVE',
__typename: 'Market',
},
__typename: 'MarketData',
},
tradableInstrument: {
instrument: {
code: 'LTCUSD',
@ -475,14 +419,6 @@ export const generateSimpleMarkets = () => {
id: '45266143c6e9b58f4cff9b8906e971c531bb29ea7af01066973f9b77e8134823',
name: 'BTCUSD Monthly (18 Jul 2022)',
state: 'Pending',
data: {
market: {
id: '45266143c6e9b58f4cff9b8906e971c531bb29ea7af01066973f9b77e8134823',
state: 'STATE_PROPOSED',
__typename: 'Market',
},
__typename: 'MarketData',
},
tradableInstrument: {
instrument: {
code: 'BTCUSD.MF21',
@ -513,14 +449,6 @@ export const generateSimpleMarkets = () => {
id: '65663ebdc96161162769c4d5c5508137416748178d7cb28e2cb0d07a151a2bc6',
name: 'ETHBTC Quarterly (30 Jun 2022)',
state: 'Active',
data: {
market: {
id: '65663ebdc96161162769c4d5c5508137416748178d7cb28e2cb0d07a151a2bc6',
state: 'STATE_ACTIVE',
__typename: 'Market',
},
__typename: 'MarketData',
},
tradableInstrument: {
instrument: {
code: 'ETHBTC.QM21',
@ -624,14 +552,6 @@ export const generateSimpleMarkets = () => {
id: '234afabd27e3bce1a879039c041f9f00f915d98459935ddafd0169d38dd13850',
name: 'Apple Monthly (30 Jun 2022)',
state: 'Active',
data: {
market: {
id: '234afabd27e3bce1a879039c041f9f00f915d98459935ddafd0169d38dd13850',
state: 'STATE_ACTIVE',
__typename: 'Market',
},
__typename: 'MarketData',
},
tradableInstrument: {
instrument: {
code: 'AAPL.MF21',
@ -736,14 +656,6 @@ export const generateSimpleMarkets = () => {
id: '9f2a3c1caa67bb0773ec18d908d32b55b129b9ec2d106a8e9a87f6aa5c0375a6',
name: 'Tesla Quarterly (30 Jun 2022)',
state: 'Active',
data: {
market: {
id: '9f2a3c1caa67bb0773ec18d908d32b55b129b9ec2d106a8e9a87f6aa5c0375a6',
state: 'STATE_ACTIVE',
__typename: 'Market',
},
__typename: 'MarketData',
},
tradableInstrument: {
instrument: {
code: 'TSLA.QM21',
@ -848,14 +760,6 @@ export const generateSimpleMarkets = () => {
id: '8a45ee934d3ddac4b036f9884df1064a5353c620a56f775ba36597d0edef9a7a',
name: 'Go big or Go home',
state: 'Active',
data: {
market: {
id: '8a45ee934d3ddac4b036f9884df1064a5353c620a56f775ba36597d0edef9a7a',
state: 'STATE_SUSPENDED',
__typename: 'Market',
},
__typename: 'MarketData',
},
tradableInstrument: {
instrument: {
code: 'LTCUSD',
@ -899,14 +803,6 @@ export const generateSimpleMarkets = () => {
id: 'aede7b9ac0c3b225004929c5455160a00f59864aad32ec366e8a2bff1b30fd0f',
name: 'BTCUSD Monthly (08 Jul 2022)',
state: 'Active',
data: {
market: {
id: 'aede7b9ac0c3b225004929c5455160a00f59864aad32ec366e8a2bff1b30fd0f',
state: 'STATE_PROPOSED',
__typename: 'Market',
},
__typename: 'MarketData',
},
tradableInstrument: {
instrument: {
code: 'BTCUSD.MF21',
@ -937,14 +833,6 @@ export const generateSimpleMarkets = () => {
id: '9398707e01daa1a1f1ca6ff87cf8d6c03fe7373ce31121ce81b99a129e6bda47',
name: 'BTCUSD Monthly (18 Jul 2022)',
state: 'Active',
data: {
market: {
id: '9398707e01daa1a1f1ca6ff87cf8d6c03fe7373ce31121ce81b99a129e6bda47',
state: 'STATE_PROPOSED',
__typename: 'Market',
},
__typename: 'MarketData',
},
tradableInstrument: {
instrument: {
code: 'BTCUSD.MF21',
@ -983,10 +871,6 @@ export const generateLongListMarkets = (count: number) => {
...protoMarket,
id: id + i,
name: name + i,
data: {
...protoMarket.data,
id: id + i,
},
});
}
return { markets };

View File

@ -22,9 +22,8 @@ export const NavigationDrawer = ({
const width = 'w-full md:w-auto md:min-w-[15%] shrink-0';
const position = 'absolute inset-0 h-full z-10 md:static';
const background = 'bg-black/50 dark:bg-white/50';
const border = 'border-r border-neutral-300 dark:border-neutral-700';
const flex = 'flex justify-end overflow-hidden';
const joinedClasses = [flex, width, position, background, border].join(' ');
const joinedClasses = [flex, width, position, background].join(' ');
const outerStyles = classNames(joinedClasses, {
visible: isMenuOpen,

View File

@ -12,7 +12,7 @@ const Header = () => {
} = useContext(LocalContext);
return (
<div
className="flex items-stretch pr-6 py-6 bg-black text-neutral-400 border-b border-neutral-300 dark:border-neutral-700"
className="flex items-stretch pr-6 py-6 bg-black text-neutral-400"
data-testid="header"
>
<Logo />

View File

@ -9,26 +9,6 @@ import { MarketState } from "@vegaprotocol/types";
// GraphQL query operation: SimpleMarkets
// ====================================================
export interface SimpleMarkets_markets_data_market {
__typename: "Market";
/**
* Market ID
*/
id: string;
/**
* Current state of the market
*/
state: MarketState;
}
export interface SimpleMarkets_markets_data {
__typename: "MarketData";
/**
* market ID of the associated mark price
*/
market: SimpleMarkets_markets_data_market;
}
export interface SimpleMarkets_markets_tradableInstrument_instrument_metadata {
__typename: "InstrumentMetadata";
/**
@ -107,10 +87,6 @@ export interface SimpleMarkets_markets {
* Current state of the market
*/
state: MarketState;
/**
* marketData for the given market
*/
data: SimpleMarkets_markets_data | null;
/**
* An instance of, or reference to, a tradable instrument.
*/

View File

@ -195,3 +195,5 @@ export const ROW_CLASS_RULES = {
'cursor-pointer': ({ data }: { data: SimpleMarkets_markets }) =>
IS_MARKET_TRADABLE(data || {}),
};
export const LARGE_SCREENS = ['xl', 'xxl'];

View File

@ -10,25 +10,12 @@ import type {
SimpleMarketDataSub_marketData,
} from './__generated__/SimpleMarketDataSub';
const MARKET_DATA_FRAGMENT = gql`
fragment SimpleMarketDataFields on MarketData {
market {
id
state
}
}
`;
export const MARKETS_QUERY = gql`
${MARKET_DATA_FRAGMENT}
query SimpleMarkets($CandleSince: String!) {
markets {
id
name
state
data {
...SimpleMarketDataFields
}
tradableInstrument {
instrument {
code
@ -55,10 +42,12 @@ export const MARKETS_QUERY = gql`
`;
const MARKET_DATA_SUB = gql`
${MARKET_DATA_FRAGMENT}
subscription SimpleMarketDataSub {
marketData {
...SimpleMarketDataFields
market {
id
state
}
}
}
`;
@ -78,7 +67,7 @@ const update = (
return produce(data, (draft) => {
const index = draft.findIndex((m) => m.id === delta.market.id);
if (index !== -1) {
draft[index].data = delta;
draft[index].state = delta.market.state;
}
// @TODO - else push new market to draft
});

View File

@ -66,11 +66,7 @@ describe('SimpleMarketList', () => {
const data = [
{
id: '1',
data: {
market: {
state: MarketState.STATE_ACTIVE,
},
},
state: MarketState.STATE_ACTIVE,
tradableInstrument: {
instrument: {
product: {
@ -86,11 +82,7 @@ describe('SimpleMarketList', () => {
},
{
id: '2',
data: {
market: {
state: MarketState.STATE_ACTIVE,
},
},
state: MarketState.STATE_ACTIVE,
tradableInstrument: {
instrument: {
product: {

View File

@ -45,7 +45,7 @@ export type RouterParams = Partial<{
}>;
const SimpleMarketList = () => {
const { isMobile } = useScreenDimensions();
const { isMobile, screenSize } = useScreenDimensions();
const navigate = useNavigate();
const params = useParams<RouterParams>();
const theme = useContext(ThemeContext);
@ -80,7 +80,7 @@ const SimpleMarketList = () => {
useEffect(() => {
const statuses: Record<string, MarketState | ''> = {};
data?.forEach((market) => {
statuses[market.id] = market.data?.market.state || '';
statuses[market.id] = market.state || '';
});
statusesRef.current = statuses;
}, [data, statusesRef]);
@ -129,6 +129,10 @@ const SimpleMarketList = () => {
[handleRowClicked]
);
const shouldSuppressHorizontalScroll = useMemo(() => {
return !isMobile && constants.LARGE_SCREENS.includes(screenSize);
}, [isMobile, screenSize]);
return (
<div className="h-full p-4 md:p-6 grid grid-rows-[min-content,1fr]">
<SimpleMarketToolbar data={data || []} />
@ -156,6 +160,7 @@ const SimpleMarketList = () => {
suppressRowTransform
onCellKeyDown={onCellKeyDown}
tabToNextCell={onTabToNextCell}
suppressHorizontalScroll={shouldSuppressHorizontalScroll}
/>
</AsyncRenderer>
</div>

View File

@ -75,7 +75,7 @@ const SimpleMarketToolbar = ({ data }: Props) => {
);
return (
<div className="w-full max-w-full mb-4 font-alpha">
<div className="w-full max-w-full mb-2 md:mb-8 font-alpha">
<ul
ref={slideContRef}
className="grid grid-flow-col auto-cols-min gap-4 relative pb-2 mb-2"
@ -121,8 +121,8 @@ const SimpleMarketToolbar = ({ data }: Props) => {
style={sliderStyles}
/>
</ul>
<div className="grid gap-8 pb-4 mt-6 md:grid-cols-[min-content,min-content,1fr]">
<div className="pb-8">
<div className="grid gap-4 pb-2 mt-2 md:mt-6 md:grid-cols-[min-content,min-content,1fr]">
<div className="pb-2">
<DropdownMenu onOpenChange={(open) => setOpen(open)}>
<DropdownMenuTrigger
className="mr-2 w-auto text-capMenu text-black dark:text-white"
@ -148,7 +148,7 @@ const SimpleMarketToolbar = ({ data }: Props) => {
<DropdownMenuContent>
{STATES_FILTER.map(({ value, text }) => (
<DropdownMenuCheckboxItem
className="uppercase text-ui dark:text-white"
className="uppercase text-ui"
key={value}
checked={
value === params.state ||
@ -170,7 +170,7 @@ const SimpleMarketToolbar = ({ data }: Props) => {
</div>
{activeNumber > 0 && (
<ul
className="md:gap-6 gap-4 pb-4 md:ml-2 flex flex-wrap"
className="md:gap-x-6 gap-x-4 gap-y-1 pb-2 md:ml-2 flex flex-wrap"
data-testid="market-assets-menu"
aria-label={t('Asset on the market')}
>

View File

@ -10,7 +10,7 @@ export const TRADABLE_STATES = {
};
export const IS_MARKET_TRADABLE = (market: SimpleMarkets_markets) =>
Boolean((market.data?.market.state ?? '') in TRADABLE_STATES && market?.id);
Boolean((market.state ?? '') in TRADABLE_STATES && market?.id);
export const MARKET_STATES_MAP: Record<MarketState | '', string> = {
[MarketState.STATE_ACTIVE]: t('Active'),

View File

@ -93,13 +93,13 @@ const useColumnDefinitions = ({ isMobile }: Props) => {
{
colId: 'status',
headerName: t('Status'),
field: 'data.market.state',
field: 'state',
headerClass: 'uppercase',
minWidth: 100,
cellRenderer: ({ data }: { data: SimpleMarkets_markets }) => (
<div className="uppercase flex h-full items-center justify-center">
<div className="border text-center px-2 md:px-8 leading-4 md:leading-6">
{MARKET_STATES_MAP[data.data?.market.state || '']}
<div className="border text-center px-2 md:px-6 leading-4 md:leading-6">
{MARKET_STATES_MAP[data.state || '']}
</div>
</div>
),

View File

@ -27,7 +27,7 @@ const useMarketsFilterData = (
: params.state
? params.state
: MarketState.STATE_ACTIVE;
if (state && state !== item.data?.market.state) {
if (state && state !== item.state) {
return false;
}
return true;

View File

@ -7,7 +7,7 @@ type Screen = keyof typeof theme.screens;
interface Props {
isMobile: boolean;
screen: Screen;
screenSize: Screen;
width: number;
}
@ -17,7 +17,7 @@ export const useScreenDimensions = (): Props => {
() => ({
width,
isMobile: width < parseInt(theme.screens.md),
screen: Object.entries(theme.screens).reduce((agg: Screen, entry) => {
screenSize: Object.entries(theme.screens).reduce((agg: Screen, entry) => {
if (width > parseInt(entry[1])) {
agg = entry[0] as Screen;
}