6766882841

Committed 06 Nov 2023 05:57AM UTC coverage: 88.104% (-0.05%) from 88.149%

Build # 6766882841

Build Type

Pull #92

github

Committed by

web-flow

Commit Message

Merge 1c598097e into 5b98a1d59

Pull Request Pull Request #92: Meenu/trade page table

Run Details

177 of 254 branches covered (0.0%)

Branch coverage included in aggregate %.

2397 of 2728 new or added lines in 11 files covered. (87.87%)

10 existing lines in 2 files now uncovered.

6148 of 6925 relevant lines covered (88.78%)

3.52 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

32.41

/libs/templates/src/lib/trade/hooks/use-columns.tsx

import { createColumnHelper } from '@tanstack/react-table';
import { TableDataType } from '../types/types';
import { TableCell } from '@deriv-com/components';

const columnHelper = createColumnHelper<TableDataType>();

const UseColumns = (selected: string) => {
  const columns =
    selected === 'mainInfo'
      ? [
          columnHelper.accessor('instrument', {
            header: () => (
              <TableCell.TableHeaderCell
                className="px-600"
                width="lg"
                header="Instrument"
              ></TableCell.TableHeaderCell>
            ),
            cell: (info) => (
              <TableCell.TableSymbolCell
                className="px-600"
                width="lg"
                icon={info.getValue()?.icon}
                label={info.getValue()?.instrument}
                description={info.getValue()?.description}
              ></TableCell.TableSymbolCell>
            ),
          }),
          columnHelper.accessor('current_bid', {
            header: () => (
              <TableCell.TableHeaderCell
                className="text-left"
                header="Current Bid"
                width="xl"
              ></TableCell.TableHeaderCell>
            ),
            cell: (info) => (
              <TableCell.TableTextCell
                width="xl"
                label={info.getValue()}
              ></TableCell.TableTextCell>
            ),
          }),
          columnHelper.accessor('current_ask', {
            header: () => (
              <TableCell.TableHeaderCell
                width="xl"
                className="text-left"
                header="Current Ask"
              ></TableCell.TableHeaderCell>
            ),
            cell: (info) => (
              <TableCell.TableTextCell
                width="xl"
                label={info.getValue()}
              ></TableCell.TableTextCell>
            ),
          }),
          columnHelper.accessor('spread', {
            header: () => (
              <TableCell.TableHeaderCell
                width="xl"
                className="text-left"
                header="Spread"
              ></TableCell.TableHeaderCell>
            ),
            cell: (info) => (
              <TableCell.TableTextCell
                width="xl"
                label={info.getValue()}
              ></TableCell.TableTextCell>
            ),
          }),
          columnHelper.accessor('currency', {
            header: () => (
              <TableCell.TableHeaderCell
                width="xl"
                className="text-left"
                header="Currency"
              ></TableCell.TableHeaderCell>
            ),
            cell: (info) => (
              <TableCell.TableTextCell
                width="xl"
                label={info.getValue()}
              ></TableCell.TableTextCell>
            ),
          }),
        ]
      : selected === 'trading_condition'
      ? [
          columnHelper.accessor('instrument', {
            header: () => (
              <TableCell.TableHeaderCell
                className="px-600"
                header="Instrument"
              ></TableCell.TableHeaderCell>
            ),
            cell: (info) => (
              <TableCell.TableSymbolCell
                className="px-600"
                icon={info.getValue()?.icon}
                label={info.getValue()?.instrument}
                description={info.getValue()?.description}
              ></TableCell.TableSymbolCell>
            ),
          }),
          columnHelper.accessor('spread_cost', {
            header: () => (
              <TableCell.TableHeaderCell
                width="sm"
                className="text-left"
                header="Spread Cost per 1 Lot [USD]"
              ></TableCell.TableHeaderCell>
            ),
            cell: (info) => (
              <TableCell.TableTextCell
                width="sm"
                label={info.getValue()}
              ></TableCell.TableTextCell>
            ),
          }),
          columnHelper.accessor('commission', {
            header: () => (
              <TableCell.TableHeaderCell
                width="sm"
                className="text-left"
                header="Commissions [USD]"
              ></TableCell.TableHeaderCell>
            ),
            cell: (info) => (
              <TableCell.TableTextCell
                width="sm"
                label={info.getValue()}
              ></TableCell.TableTextCell>
            ),
          }),
          columnHelper.accessor('effective_leverage', {
            header: () => (
              <TableCell.TableHeaderCell
                width="sm"
                className="text-left"
                header="Effective Leverage"
              ></TableCell.TableHeaderCell>
            ),
            cell: (info) => (
              <TableCell.TableTextCell
                width="sm"
                label={info.getValue()}
              ></TableCell.TableTextCell>
            ),
          }),
          columnHelper.accessor('margin_requirement', {
            header: () => (
              <TableCell.TableHeaderCell
                width="sm"
                className="text-left"
                header="Margin Requirement/lot"
              ></TableCell.TableHeaderCell>
            ),
            cell: (info) => (
              <TableCell.TableTextCell
                width="sm"
                label={info.getValue()}
              ></TableCell.TableTextCell>
            ),
          }),
          columnHelper.accessor('swap_long', {
            header: () => (
              <TableCell.TableHeaderCell
                width="sm"
                className="text-left"
                header="Daily Swap Long (points)"
              ></TableCell.TableHeaderCell>
            ),
            cell: (info) => (
              <TableCell.TableTextCell
                width="sm"
                label={info.getValue()}
              ></TableCell.TableTextCell>
            ),
          }),
          columnHelper.accessor('swap_short', {
            header: () => (
              <TableCell.TableHeaderCell
                width="sm"
                className="text-left"
                header="Daily Swap Short (points)"
              ></TableCell.TableHeaderCell>
            ),
            cell: (info) => (
              <TableCell.TableTextCell
                width="sm"
                label={info.getValue()}
              ></TableCell.TableTextCell>
            ),
          }),

          columnHelper.accessor('day_swap', {
            header: () => (
              <TableCell.TableHeaderCell
                width="sm"
                className="text-left"
                header="3 Day Swap"
              ></TableCell.TableHeaderCell>
            ),
            cell: (info) => (
              <TableCell.TableTextCell
                width="sm"
                label={info.getValue()}
              ></TableCell.TableTextCell>
            ),
          }),
        ]
      : [
          columnHelper.accessor('instrument', {
            header: () => (
              <TableCell.TableHeaderCell
                className="px-600"
                header="Instrument"
              ></TableCell.TableHeaderCell>
            ),
            cell: (info) => (
              <TableCell.TableSymbolCell
                className="px-600"
                icon={info.getValue()?.icon}
                label={info.getValue()?.instrument}
                description={info.getValue()?.description}
              ></TableCell.TableSymbolCell>
            ),
          }),
          columnHelper.accessor('contract_size', {
            header: () => (
              <TableCell.TableHeaderCell
                width="md"
                className="text-left"
                header="Contract Size"
              ></TableCell.TableHeaderCell>
            ),
            cell: (info) => (
              <TableCell.TableTextCell
                width="md"
                label={info.getValue()}
              ></TableCell.TableTextCell>
            ),
          }),
          columnHelper.accessor('min_volume', {
            header: () => (
              <TableCell.TableHeaderCell
                width="md"
                className="text-left"
                header="Minimum Volume"
              ></TableCell.TableHeaderCell>
            ),
            cell: (info) => (
              <TableCell.TableTextCell
                width="md"
                label={info.getValue()}
              ></TableCell.TableTextCell>
            ),
          }),
          columnHelper.accessor('max_volume', {
            header: () => (
              <TableCell.TableHeaderCell
                width="md"
                className="text-left"
                header="Maximum Volume"
              ></TableCell.TableHeaderCell>
            ),
            cell: (info) => (
              <TableCell.TableTextCell
                width="md"
                label={info.getValue()}
              ></TableCell.TableTextCell>
            ),
          }),
          columnHelper.accessor('volume_step', {
            header: () => (
              <TableCell.TableHeaderCell
                width="md"
                className="text-left"
                header="Volume Step"
              ></TableCell.TableHeaderCell>
            ),
            cell: (info) => (
              <TableCell.TableTextCell
                width="md"
                label={info.getValue()}
              ></TableCell.TableTextCell>
            ),
          }),
          columnHelper.accessor('volume_limit', {
            header: () => (
              <TableCell.TableHeaderCell
                width="md"
                className="text-left"
                header="Volume Limit"
              ></TableCell.TableHeaderCell>
            ),
            cell: (info) => (
              <TableCell.TableTextCell
                width="md"
                label={info.getValue()}
              ></TableCell.TableTextCell>
            ),
          }),
        ];

  return columns;
};

export default UseColumns;

1	import { createColumnHelper } from '@tanstack/react-table';	1✔
2	import { TableDataType } from '../types/types';	1✔
3	import { TableCell } from '@deriv-com/components';	1✔
4		1✔
5	const columnHelper = createColumnHelper<TableDataType>();	1✔
6		1✔
7	const UseColumns = (selected: string) => {	1✔
8	const columns =	2✔
9	selected === 'mainInfo'	2✔
10	? [	2✔
11	columnHelper.accessor('instrument', {	2✔
12	header: () => (	2✔
13	<TableCell.TableHeaderCell	2✔
14	className="px-600"	2✔
15	width="lg"	2✔
16	header="Instrument"	2✔
17	></TableCell.TableHeaderCell>	2✔
18	),	2✔
19	cell: (info) => (	2✔
20	<TableCell.TableSymbolCell	15✔
21	className="px-600"	15✔
22	width="lg"	15✔
23	icon={info.getValue()?.icon}	15✔
24	label={info.getValue()?.instrument}	15✔
25	description={info.getValue()?.description}	15✔
26	></TableCell.TableSymbolCell>	15✔
27	),	2✔
28	}),	2✔
29	columnHelper.accessor('current_bid', {	2✔
30	header: () => (	2✔
31	<TableCell.TableHeaderCell	2✔
32	className="text-left"	2✔
33	header="Current Bid"	2✔
34	width="xl"	2✔
35	></TableCell.TableHeaderCell>	2✔
36	),	2✔
37	cell: (info) => (	2✔
38	<TableCell.TableTextCell	15✔
39	width="xl"	15✔
40	label={info.getValue()}	15✔
41	></TableCell.TableTextCell>	15✔
42	),	2✔
43	}),	2✔
44	columnHelper.accessor('current_ask', {	2✔
45	header: () => (	2✔
46	<TableCell.TableHeaderCell	2✔
47	width="xl"	2✔
48	className="text-left"	2✔
49	header="Current Ask"	2✔
50	></TableCell.TableHeaderCell>	2✔
51	),	2✔
52	cell: (info) => (	2✔
53	<TableCell.TableTextCell	15✔
54	width="xl"	15✔
55	label={info.getValue()}	15✔
56	></TableCell.TableTextCell>	15✔
57	),	2✔
58	}),	2✔
59	columnHelper.accessor('spread', {	2✔
60	header: () => (	2✔
61	<TableCell.TableHeaderCell	2✔
62	width="xl"	2✔
63	className="text-left"	2✔
64	header="Spread"	2✔
65	></TableCell.TableHeaderCell>	2✔
66	),	2✔
67	cell: (info) => (	2✔
68	<TableCell.TableTextCell	15✔
69	width="xl"	15✔
70	label={info.getValue()}	15✔
71	></TableCell.TableTextCell>	15✔
72	),	2✔
73	}),	2✔
74	columnHelper.accessor('currency', {	2✔
75	header: () => (	2✔
76	<TableCell.TableHeaderCell	2✔
77	width="xl"	2✔
78	className="text-left"	2✔
79	header="Currency"	2✔
80	></TableCell.TableHeaderCell>	2✔
81	),	2✔
82	cell: (info) => (	2✔
83	<TableCell.TableTextCell	15✔
84	width="xl"	15✔
85	label={info.getValue()}	15✔
86	></TableCell.TableTextCell>	15✔
87	),	2✔
88	}),	2✔
89	]	2!
NEW 90	: selected === 'trading_condition'	×
NEW 91	? [	×
NEW 92	columnHelper.accessor('instrument', {	×
NEW 93	header: () => (	×
NEW 94	<TableCell.TableHeaderCell	×
NEW 95	className="px-600"	×
NEW 96	header="Instrument"	×
NEW 97	></TableCell.TableHeaderCell>	×
NEW 98	),	×
NEW 99	cell: (info) => (	×
NEW 100	<TableCell.TableSymbolCell	×
NEW 101	className="px-600"	×
NEW 102	icon={info.getValue()?.icon}	×
NEW 103	label={info.getValue()?.instrument}	×
NEW 104	description={info.getValue()?.description}	×
NEW 105	></TableCell.TableSymbolCell>	×
NEW 106	),	×
NEW 107	}),	×
NEW 108	columnHelper.accessor('spread_cost', {	×
NEW 109	header: () => (	×
NEW 110	<TableCell.TableHeaderCell	×
NEW 111	width="sm"	×
NEW 112	className="text-left"	×
NEW 113	header="Spread Cost per 1 Lot [USD]"	×
NEW 114	></TableCell.TableHeaderCell>	×
NEW 115	),	×
NEW 116	cell: (info) => (	×
NEW 117	<TableCell.TableTextCell	×
NEW 118	width="sm"	×
NEW 119	label={info.getValue()}	×
NEW 120	></TableCell.TableTextCell>	×
NEW 121	),	×
NEW 122	}),	×
NEW 123	columnHelper.accessor('commission', {	×
NEW 124	header: () => (	×
NEW 125	<TableCell.TableHeaderCell	×
NEW 126	width="sm"	×
NEW 127	className="text-left"	×
NEW 128	header="Commissions [USD]"	×
NEW 129	></TableCell.TableHeaderCell>	×
NEW 130	),	×
NEW 131	cell: (info) => (	×
NEW 132	<TableCell.TableTextCell	×
NEW 133	width="sm"	×
NEW 134	label={info.getValue()}	×
NEW 135	></TableCell.TableTextCell>	×
NEW 136	),	×
NEW 137	}),	×
NEW 138	columnHelper.accessor('effective_leverage', {	×
NEW 139	header: () => (	×
NEW 140	<TableCell.TableHeaderCell	×
NEW 141	width="sm"	×
NEW 142	className="text-left"	×
NEW 143	header="Effective Leverage"	×
NEW 144	></TableCell.TableHeaderCell>	×
NEW 145	),	×
NEW 146	cell: (info) => (	×
NEW 147	<TableCell.TableTextCell	×
NEW 148	width="sm"	×
NEW 149	label={info.getValue()}	×
NEW 150	></TableCell.TableTextCell>	×
NEW 151	),	×
NEW 152	}),	×
NEW 153	columnHelper.accessor('margin_requirement', {	×
NEW 154	header: () => (	×
NEW 155	<TableCell.TableHeaderCell	×
NEW 156	width="sm"	×
NEW 157	className="text-left"	×
NEW 158	header="Margin Requirement/lot"	×
NEW 159	></TableCell.TableHeaderCell>	×
NEW 160	),	×
NEW 161	cell: (info) => (	×
NEW 162	<TableCell.TableTextCell	×
NEW 163	width="sm"	×
NEW 164	label={info.getValue()}	×
NEW 165	></TableCell.TableTextCell>	×
NEW 166	),	×
NEW 167	}),	×
NEW 168	columnHelper.accessor('swap_long', {	×
NEW 169	header: () => (	×
NEW 170	<TableCell.TableHeaderCell	×
NEW 171	width="sm"	×
NEW 172	className="text-left"	×
NEW 173	header="Daily Swap Long (points)"	×
NEW 174	></TableCell.TableHeaderCell>	×
NEW 175	),	×
NEW 176	cell: (info) => (	×
NEW 177	<TableCell.TableTextCell	×
NEW 178	width="sm"	×
NEW 179	label={info.getValue()}	×
NEW 180	></TableCell.TableTextCell>	×
NEW 181	),	×
NEW 182	}),	×
NEW 183	columnHelper.accessor('swap_short', {	×
NEW 184	header: () => (	×
NEW 185	<TableCell.TableHeaderCell	×
NEW 186	width="sm"	×
NEW 187	className="text-left"	×
NEW 188	header="Daily Swap Short (points)"	×
NEW 189	></TableCell.TableHeaderCell>	×
NEW 190	),	×
NEW 191	cell: (info) => (	×
NEW 192	<TableCell.TableTextCell	×
NEW 193	width="sm"	×
NEW 194	label={info.getValue()}	×
NEW 195	></TableCell.TableTextCell>	×
NEW 196	),	×
NEW 197	}),	×
NEW 198		×
NEW 199	columnHelper.accessor('day_swap', {	×
NEW 200	header: () => (	×
NEW 201	<TableCell.TableHeaderCell	×
NEW 202	width="sm"	×
NEW 203	className="text-left"	×
NEW 204	header="3 Day Swap"	×
NEW 205	></TableCell.TableHeaderCell>	×
NEW 206	),	×
NEW 207	cell: (info) => (	×
NEW 208	<TableCell.TableTextCell	×
NEW 209	width="sm"	×
NEW 210	label={info.getValue()}	×
NEW 211	></TableCell.TableTextCell>	×
NEW 212	),	×
NEW 213	}),	×
NEW 214	]	×
NEW 215	: [	×
NEW 216	columnHelper.accessor('instrument', {	×
NEW 217	header: () => (	×
NEW 218	<TableCell.TableHeaderCell	×
NEW 219	className="px-600"	×
NEW 220	header="Instrument"	×
NEW 221	></TableCell.TableHeaderCell>	×
NEW 222	),	×
NEW 223	cell: (info) => (	×
NEW 224	<TableCell.TableSymbolCell	×
NEW 225	className="px-600"	×
NEW 226	icon={info.getValue()?.icon}	×
NEW 227	label={info.getValue()?.instrument}	×
NEW 228	description={info.getValue()?.description}	×
NEW 229	></TableCell.TableSymbolCell>	×
NEW 230	),	×
NEW 231	}),	×
NEW 232	columnHelper.accessor('contract_size', {	×
NEW 233	header: () => (	×
NEW 234	<TableCell.TableHeaderCell	×
NEW 235	width="md"	×
NEW 236	className="text-left"	×
NEW 237	header="Contract Size"	×
NEW 238	></TableCell.TableHeaderCell>	×
NEW 239	),	×
NEW 240	cell: (info) => (	×
NEW 241	<TableCell.TableTextCell	×
NEW 242	width="md"	×
NEW 243	label={info.getValue()}	×
NEW 244	></TableCell.TableTextCell>	×
NEW 245	),	×
NEW 246	}),	×
NEW 247	columnHelper.accessor('min_volume', {	×
NEW 248	header: () => (	×
NEW 249	<TableCell.TableHeaderCell	×
NEW 250	width="md"	×
NEW 251	className="text-left"	×
NEW 252	header="Minimum Volume"	×
NEW 253	></TableCell.TableHeaderCell>	×
NEW 254	),	×
NEW 255	cell: (info) => (	×
NEW 256	<TableCell.TableTextCell	×
NEW 257	width="md"	×
NEW 258	label={info.getValue()}	×
NEW 259	></TableCell.TableTextCell>	×
NEW 260	),	×
NEW 261	}),	×
NEW 262	columnHelper.accessor('max_volume', {	×
NEW 263	header: () => (	×
NEW 264	<TableCell.TableHeaderCell	×
NEW 265	width="md"	×
NEW 266	className="text-left"	×
NEW 267	header="Maximum Volume"	×
NEW 268	></TableCell.TableHeaderCell>	×
NEW 269	),	×
NEW 270	cell: (info) => (	×
NEW 271	<TableCell.TableTextCell	×
NEW 272	width="md"	×
NEW 273	label={info.getValue()}	×
NEW 274	></TableCell.TableTextCell>	×
NEW 275	),	×
NEW 276	}),	×
NEW 277	columnHelper.accessor('volume_step', {	×
NEW 278	header: () => (	×
NEW 279	<TableCell.TableHeaderCell	×
NEW 280	width="md"	×
NEW 281	className="text-left"	×
NEW 282	header="Volume Step"	×
NEW 283	></TableCell.TableHeaderCell>	×
NEW 284	),	×
NEW 285	cell: (info) => (	×
NEW 286	<TableCell.TableTextCell	×
NEW 287	width="md"	×
NEW 288	label={info.getValue()}	×
NEW 289	></TableCell.TableTextCell>	×
NEW 290	),	×
NEW 291	}),	×
NEW 292	columnHelper.accessor('volume_limit', {	×
NEW 293	header: () => (	×
NEW 294	<TableCell.TableHeaderCell	×
NEW 295	width="md"	×
NEW 296	className="text-left"	×
NEW 297	header="Volume Limit"	×
NEW 298	></TableCell.TableHeaderCell>	×
NEW 299	),	×
NEW 300	cell: (info) => (	×
NEW 301	<TableCell.TableTextCell	×
NEW 302	width="md"	×
NEW 303	label={info.getValue()}	×
NEW 304	></TableCell.TableTextCell>	×
NEW 305	),	×
NEW 306	}),	×
NEW 307	];	×
308		2✔
309	return columns;	2✔
310	};	2✔
311		1✔
312	export default UseColumns;	1✔

deriv-com / deriv-com-v2 / 6766882841

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous