Skip to content

Commit 2791c8f

Browse files
therealemjytherealemjy
committed
feat: add market table to Markets page
1 parent 09fa532 commit 2791c8f

43 files changed

Lines changed: 623 additions & 588 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.changeset/large-teams-lie.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@venusprotocol/ui": minor
3+
---
4+
5+
add Markets table to Markets page

‎apps/evm/src/components/AdCarousel/__tests__/__snapshots__/index.spec.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3-
exports[`AdCarousel > displays correctly 1`] = `"Boost is available now!One-click leverage to boost your yield up to 5xLearn moreShare $1M in Venus Flux IncentivesLet your liquidity Flux, watch your yield grow.Start nowBelieve in something?Give your conviction a boost on probably.marketsStart nowIsolated pools are being sunsetClaim your rewards and close your positionsLearn more"`;
3+
exports[`AdCarousel > displays correctly 1`] = `"Boost is available now!One-click leverage to boost your yield up to 5xLearn moreVenus Flux is live!Let your liquidity Flux, watch your yield grow.Start nowBelieve in something?Give your conviction a boost on probable.marketsStart nowIsolated pools are being sunsetClaim your rewards and close your positionsLearn more"`;

‎apps/evm/src/components/Icon/icons/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ export { default as gift } from './gift';
8484
export { default as eye } from './eye';
8585
export { default as closedEye } from './closedEye';
8686
export { default as pending } from './pending';
87+
export { default as pendingOutline } from './pendingOutline';
8788
export { default as innerArrows } from './innerArrows';
8889
export { default as outerArrows } from './outerArrows';
8990
export { default as crown } from './crown';

‎apps/evm/src/components/Icon/icons/pendingOutline.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import type { SVGProps } from 'react';
2+
3+
const SvgPendingOutline = (props: SVGProps<SVGSVGElement>) => (
4+
<svg
5+
width="16"
6+
height="16"
7+
viewBox="0 0 16 16"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
{...props}
11+
>
12+
<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="currentColor" />
13+
<path
14+
d="M4 9C4.55228 9 5 8.55228 5 8C5 7.44772 4.55228 7 4 7C3.44772 7 3 7.44772 3 8C3 8.55228 3.44772 9 4 9Z"
15+
fill="currentColor"
16+
/>
17+
<path
18+
d="M8 9C8.55228 9 9 8.55228 9 8C9 7.44772 8.55228 7 8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9Z"
19+
fill="currentColor"
20+
/>
21+
<path
22+
d="M12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9Z"
23+
fill="currentColor"
24+
/>
25+
</svg>
26+
);
27+
28+
export default SvgPendingOutline;

‎apps/evm/src/components/Modal/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const Modal: React.FC<ModalProps> = ({
4848
<Fade in={isOpen}>
4949
<div
5050
className={cn(
51-
'overflow-auto outline-hidden bg-cards rounded-xl absolute top-[50%] left-[50%] translate-y-[-50%] translate-x-[-50%] border border-lightGrey max-w-136 w-[calc(100%-2rem)] max-h-[calc(100%-2rem)]',
51+
'overflow-auto outline-hidden bg-dark-blue rounded-xl absolute top-[50%] left-[50%] translate-y-[-50%] translate-x-[-50%] border border-blue max-w-136 w-[calc(100%-2rem)] max-h-[calc(100%-2rem)]',
5252
className,
5353
)}
5454
>

‎apps/evm/src/components/Modal/styles.ts‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { css } from '@emotion/react';
22
import { useTheme } from '@mui/material';
3+
import { theme } from '@venusprotocol/ui';
34

45
export const useModalStyles = ({
56
hasTitleComponent,
@@ -8,27 +9,26 @@ export const useModalStyles = ({
89
hasTitleComponent: boolean;
910
noHorizontalPadding?: boolean;
1011
}) => {
11-
const theme = useTheme();
12+
const muiTheme = useTheme();
1213

1314
return {
1415
titleWrapper: css`
15-
padding: ${theme.spacing(6, 6, hasTitleComponent ? 6 : 0, 6)};
16-
border-bottom: ${hasTitleComponent ? `1px solid ${theme.palette.secondary.light}` : 0};
16+
padding: ${muiTheme.spacing(6, 6, hasTitleComponent ? 6 : 0, 6)};
1717
position: sticky;
1818
top: 0;
1919
z-index: 10;
20-
background-color: ${hasTitleComponent ? theme.palette.background.paper : 'transparent'};
21-
margin-bottom: ${hasTitleComponent ? theme.spacing(6) : 0};
20+
background-color: ${hasTitleComponent ? theme.colors['dark-blue'] : 'transparent'};
21+
margin-bottom: ${hasTitleComponent ? muiTheme.spacing(6) : 0};
2222
display: flex;
2323
align-items: center;
2424
justify-content: center;
25-
${theme.breakpoints.down('md')} {
26-
margin-bottom: ${hasTitleComponent ? theme.spacing(4) : 0};
25+
${muiTheme.breakpoints.down('md')} {
26+
margin-bottom: ${hasTitleComponent ? muiTheme.spacing(4) : 0};
2727
}
2828
`,
2929
backAction: css`
3030
position: absolute;
31-
left: ${theme.spacing(6)};
31+
left: ${muiTheme.spacing(6)};
3232
padding: 0;
3333
min-width: auto;
3434
background-color: transparent;
@@ -39,27 +39,27 @@ export const useModalStyles = ({
3939
`,
4040
backArrow: css`
4141
transform: rotate(180deg);
42-
height: ${theme.shape.iconSize.xLarge}px;
43-
width: ${theme.shape.iconSize.xLarge}px;
44-
color: ${theme.palette.text.primary};
42+
height: ${muiTheme.shape.iconSize.xLarge}px;
43+
width: ${muiTheme.shape.iconSize.xLarge}px;
44+
color: ${muiTheme.palette.text.primary};
4545
`,
4646
titleComponent: css`
4747
align-self: center;
4848
display: flex;
4949
justify-content: center;
5050
align-items: center;
51-
min-height: ${theme.shape.iconSize.xLarge}px;
52-
padding-left: ${theme.shape.iconSize.xLarge}px;
53-
padding-right: ${theme.shape.iconSize.xLarge}px;
54-
font-size: ${theme.typography.h4.fontSize};
55-
font-weight: ${theme.typography.h4.fontWeight};
51+
min-height: ${muiTheme.shape.iconSize.xLarge}px;
52+
padding-left: ${muiTheme.shape.iconSize.xLarge}px;
53+
padding-right: ${muiTheme.shape.iconSize.xLarge}px;
54+
font-size: ${muiTheme.typography.h4.fontSize};
55+
font-weight: ${muiTheme.typography.h4.fontWeight};
5656
`,
5757
closeIcon: css`
5858
top: 50%;
59-
margin-top: ${-theme.shape.iconSize.xLarge / 2}px;
59+
margin-top: ${-muiTheme.shape.iconSize.xLarge / 2}px;
6060
position: absolute;
61-
height: ${theme.shape.iconSize.xLarge}px;
62-
width: ${theme.shape.iconSize.xLarge}px;
61+
height: ${muiTheme.shape.iconSize.xLarge}px;
62+
width: ${muiTheme.shape.iconSize.xLarge}px;
6363
margin-left: auto;
6464
min-width: 0;
6565
padding: 0;
@@ -70,13 +70,13 @@ export const useModalStyles = ({
7070
}
7171
`,
7272
contentWrapper: css`
73-
padding-bottom: ${theme.spacing(6)};
74-
padding-left: ${noHorizontalPadding ? 0 : theme.spacing(6)};
75-
padding-right: ${noHorizontalPadding ? 0 : theme.spacing(6)};
76-
${theme.breakpoints.down('md')} {
77-
padding-bottom: ${theme.spacing(4)};
78-
padding-left: ${noHorizontalPadding ? 0 : theme.spacing(4)};
79-
padding-right: ${noHorizontalPadding ? 0 : theme.spacing(4)};
73+
padding-bottom: ${muiTheme.spacing(6)};
74+
padding-left: ${noHorizontalPadding ? 0 : muiTheme.spacing(6)};
75+
padding-right: ${noHorizontalPadding ? 0 : muiTheme.spacing(6)};
76+
${muiTheme.breakpoints.down('md')} {
77+
padding-bottom: ${muiTheme.spacing(4)};
78+
padding-left: ${noHorizontalPadding ? 0 : muiTheme.spacing(4)};
79+
padding-right: ${noHorizontalPadding ? 0 : muiTheme.spacing(4)};
8080
}
8181
`,
8282
};

‎apps/evm/src/components/Table/Head.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import MuiTableRow from '@mui/material/TableRow';
66
import MuiTableSortLabel from '@mui/material/TableSortLabel';
77
import { visuallyHidden } from '@mui/utils';
88

9+
import { cn } from '@venusprotocol/ui';
910
import { Icon } from '../Icon';
1011
import { useStyles } from './styles';
1112
import type { TableColumn } from './types';
@@ -16,6 +17,7 @@ interface HeadProps<R> {
1617
orderDirection: 'asc' | 'desc' | undefined;
1718
onRequestOrder: (column: TableColumn<R>) => void;
1819
controls: boolean;
20+
rowControlColumn: boolean;
1921
className?: string;
2022
}
2123

@@ -26,12 +28,13 @@ function Head<R>({
2628
onRequestOrder,
2729
className,
2830
controls,
31+
rowControlColumn,
2932
}: HeadProps<R>) {
3033
const styles = useStyles();
3134

3235
return (
33-
<MuiTableHead>
34-
<MuiTableRow className={className}>
36+
<MuiTableHead className={cn('h-14', className)}>
37+
<MuiTableRow>
3538
{columns.map(column => {
3639
const active = orderBy?.key === column.key;
3740
const sortable = controls && !!column.sortRows;
@@ -81,6 +84,8 @@ function Head<R>({
8184
</MuiTableCell>
8285
);
8386
})}
87+
88+
{rowControlColumn && <MuiTableCell className="w-8" />}
8489
</MuiTableRow>
8590
</MuiTableHead>
8691
);

‎apps/evm/src/components/Table/RowControl/index.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { cn } from '@venusprotocol/ui';
2+
3+
import { Icon } from 'components/Icon';
4+
5+
export interface RowControlProps extends React.HTMLAttributes<HTMLButtonElement> {}
6+
7+
export const RowControl: React.FC<RowControlProps> = ({ className, ...otherProps }) => (
8+
<button
9+
type="button"
10+
className={cn('p-2 -mr-2 cursor-pointer text-light-grey hover:text-white', className)}
11+
{...otherProps}
12+
>
13+
<Icon name="pendingOutline" className="text-inherit transition-colors" />
14+
</button>
15+
);

‎apps/evm/src/components/Table/TableCards.tsx‎

Lines changed: 0 additions & 129 deletions
This file was deleted.

0 commit comments

Comments
 (0)