Skip to content

Commit fe7d1a1

Browse files
philpher0xihoroleksiienkosb
philpher0x
authored and
ihoroleksiienkosb
committed
Merge pull request #5 from cp0x-org/add-supply
Add supply
2 parents 805c08f + 73d20ee commit fe7d1a1

31 files changed

Lines changed: 3180 additions & 2185 deletions

‎src/api/constants.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,16 @@ export const MorphoRequests = {
2626
id
2727
network
2828
}
29+
asset {
30+
id
31+
symbol
32+
address
33+
decimals
34+
name
35+
}
2936
state {
3037
dailyNetApy
38+
totalAssetsUsd
3139
curators {
3240
id
3341
name

‎src/appconfig/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,5 @@ export const appChainConfig = {
2727
}
2828
}
2929
} as const;
30+
31+
export const INPUT_DECIMALS = 12;

‎src/assets/scss/_theme-cp0x.module.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,11 @@ $grey900: #16161f;
5252
// paper & background
5353
$darkBackground: #16161f; // level 3
5454
$darkPaper: #1e1e26; // level 4
55+
//$darkPaper: #16161f; // level 4
5556

5657
// dark 800 & 900
5758
$darkLevel1: #39454b3d; // level 1
58-
$darkLevel2: #1e1e26; // level 2
59+
$darkLevel2: #16161f; // level 2
5960

6061
// primary dark
6162
$darkPrimaryLight: #2cffff26;

‎src/components/CustomInput.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { styled } from '@mui/material/styles';
2+
import { TextField } from '@mui/material';
3+
4+
export const CustomInput = styled(TextField)(() => ({
5+
'& .MuiInputBase-root': {
6+
background: 'none',
7+
border: 'none',
8+
boxShadow: 'none',
9+
fontSize: '2.5rem',
10+
caretColor: 'text.main'
11+
},
12+
'& .MuiOutlinedInput-notchedOutline': {
13+
border: 'none'
14+
},
15+
'&:hover .MuiOutlinedInput-notchedOutline': {
16+
border: 'none'
17+
},
18+
'& .MuiInputBase-input': {
19+
background: 'none',
20+
MozAppearance: 'textfield',
21+
caretWidth: '3px', // толще курсор
22+
'&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
23+
WebkitAppearance: 'none',
24+
margin: 0
25+
}
26+
},
27+
'& .MuiInputBase-input::placeholder': {
28+
fontSize: '2.5rem',
29+
opacity: 0.5
30+
}
31+
}));

‎src/components/TokenIcon.tsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,33 @@
1-
import Box from '@mui/material/Box';
2-
import { Avatar } from '@mui/material';
1+
import Box, { BoxProps } from '@mui/material/Box';
2+
import { Avatar, AvatarProps } from '@mui/material';
33
import React from 'react';
4-
interface TokenIconProps {
4+
5+
interface TokenIconProps extends BoxProps {
56
symbol: string;
7+
avatarProps?: AvatarProps; // чтобы можно было кастомизировать Avatar
68
}
7-
export const TokenIcon = ({ symbol }: TokenIconProps) => {
9+
10+
export const TokenIcon: React.FC<TokenIconProps> = ({ symbol, avatarProps, ...boxProps }) => {
11+
if (!symbol) {
12+
return null;
13+
}
14+
815
const normalizedSymbol = symbol.toLowerCase();
916
const iconUrl = `/tokens/${normalizedSymbol}.svg`;
1017

1118
return (
12-
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
19+
<Box
20+
sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
21+
{...boxProps} // применяем пропсы Box
22+
>
1323
<Avatar
1424
src={iconUrl}
1525
alt={`${symbol} icon`}
16-
sx={{ width: 24, height: 24 }}
26+
sx={{ width: 36, height: 36, ...avatarProps?.sx }} // объединяем стили
1727
onError={(e) => {
1828
(e.target as HTMLImageElement).style.display = 'none';
1929
}}
30+
{...avatarProps} // применяем остальные пропсы Avatar
2031
/>
2132
</Box>
2233
);

‎src/hooks/useFuturePosition.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ export const useFuturePosition = ({
4040
if (diffCollateralAmount && diffCollateralAmount !== 0n) {
4141
newCollateral += diffCollateralAmount;
4242
}
43-
console.log(newCollateral);
4443

4544
// Если изменений нет
4645
if ((!diffBorrowAmount || diffBorrowAmount === 0n) && (!diffCollateralAmount || diffCollateralAmount === 0n)) {

‎src/hooks/useMarketData.ts‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,6 @@ export const useMarketData = ({
6262
});
6363

6464
const oracleAddress = marketConfig?.[2];
65-
console.log('marketConfig');
66-
console.log(marketConfig);
67-
6865
const {
6966
data: oraclePrice,
7067
isLoading: isOpLoading,
@@ -78,11 +75,8 @@ export const useMarketData = ({
7875
args: [],
7976
query: { enabled: !!oracleAddress }
8077
});
81-
console.log('oraclePrice');
82-
console.log(oraclePrice);
8378

8479
const irmAddress = marketConfig?.[3];
85-
console.log(irmAddress);
8680
const {
8781
data: rateAtTarget,
8882
isLoading: isRatLoading,
@@ -96,8 +90,6 @@ export const useMarketData = ({
9690
args: uniqueKey ? [uniqueKey as `0x${string}`] : undefined,
9791
query: { enabled: !!irmAddress && !!userAddress }
9892
});
99-
console.log('irmAddress');
100-
console.log(irmAddress);
10193
const {
10294
data: marketState,
10395
isLoading: isMsLoading,
@@ -119,17 +111,13 @@ export const useMarketData = ({
119111
args: userAddress ? [userAddress] : undefined,
120112
query: { enabled: !!userAddress && !!marketItemData }
121113
});
122-
console.log('collateralBalance');
123-
console.log(collateralBalance);
124114
const { data: loanBalance, refetch: refetchLoanBalance } = useReadContract({
125115
abi: erc20ABIConfig.abi,
126116
address: marketItemData?.loanAsset.address as `0x${string}` | undefined,
127117
functionName: 'balanceOf',
128118
args: userAddress ? [userAddress] : undefined,
129119
query: { enabled: !!userAddress && !!marketItemData }
130120
});
131-
console.log('loanBalance');
132-
console.log(loanBalance);
133121
const [marketParams, setMarketParams] = useState<MarketParams | null>(null);
134122
const [market, setMarket] = useState<Market | null>(null);
135123
const [accrualPosition, setAccrualPosition] = useState<AccrualPosition | null>(null);
@@ -201,8 +189,7 @@ export const useMarketData = ({
201189
setAccrualPosition(tmpAccrualPosition);
202190
setIsLoading(false);
203191
}, [position, marketConfig, oraclePrice, rateAtTarget, marketState, userAddress, marketIdParam]);
204-
console.log('accrualPosition');
205-
console.log(accrualPosition);
192+
206193
return {
207194
position,
208195
marketConfig,

‎src/layout/MainLayout/index.tsx‎

Lines changed: 80 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
22
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
33

44
// material-ui
5-
import { useTheme } from '@mui/material/styles';
5+
import { styled, useTheme } from '@mui/material/styles';
66
import useMediaQuery from '@mui/material/useMediaQuery';
77
import AppBar from '@mui/material/AppBar';
88
import Container from '@mui/material/Container';
@@ -16,15 +16,64 @@ import MainContentStyled from './MainContentStyled';
1616
import Loader from 'ui-component/Loader';
1717
import Breadcrumbs from 'ui-component/extended/Breadcrumbs';
1818

19-
import { MenuOrientation } from 'config';
19+
import { MenuOrientation, ThemeMode } from 'config';
2020
import useConfig from 'hooks/useConfig';
2121
import { handlerDrawerOpen, useGetMenuMaster } from 'api/menu';
2222
import Tabs from '@mui/material/Tabs';
23-
import Tab from '@mui/material/Tab';
23+
import Tab, { TabProps } from '@mui/material/Tab';
2424
import MainCard from '../../ui-component/cards/MainCard';
2525

2626
// ==============================|| MAIN LAYOUT ||============================== //
2727

28+
// icon tab style
29+
const AntTabs = styled(Tabs)(({ theme }) => ({
30+
background: theme.palette.mode === ThemeMode.DARK ? theme.palette.dark[800] : theme.palette.primary.light,
31+
width: 'fit-content',
32+
borderBottom: 'none', // убираем бордер
33+
'& .MuiTabs-flexContainer': {
34+
border: '1px solid',
35+
borderRadius: '12px',
36+
borderColor: '#3F3F3F',
37+
height: '61px'
38+
},
39+
'& .MuiTabs-scroller': {
40+
borderBottom: 'none'
41+
},
42+
borderRadius: '12px',
43+
boxShadow: 'none',
44+
'& .MuiTabs-indicator': {
45+
backgroundColor: theme.palette.secondary.main,
46+
height: 0 // скрываем индикатор активного таба
47+
}
48+
}));
49+
50+
// style constant
51+
const AntTab = styled((props: TabProps) => <Tab disableRipple {...props} />)(({ theme }) => ({
52+
textTransform: 'none',
53+
minWidth: 0,
54+
fontWeight: theme.typography.fontWeightRegular,
55+
fontFamily: 'Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif',
56+
// fontWeight: 500, // Medium
57+
fontSize: '16px',
58+
color: theme.palette.grey[100],
59+
'&.MuiTab-root': {
60+
borderRight: '1px solid #3F3F3F',
61+
borderColor: '#3F3F3F',
62+
minWidth: '125px'
63+
},
64+
'&:hover': {
65+
color: theme.palette.grey[500],
66+
opacity: 1
67+
},
68+
'&.Mui-selected': {
69+
color: theme.palette.background.default,
70+
backgroundColor: theme.palette.secondary.main,
71+
fontWeight: theme.typography.fontWeightMedium
72+
},
73+
'&.Mui-focusVisible': {
74+
backgroundColor: theme.palette.secondary.main
75+
}
76+
}));
2877
export default function MainLayout() {
2978
const theme = useTheme();
3079
const downMD = useMediaQuery(theme.breakpoints.down('md'));
@@ -72,24 +121,42 @@ export default function MainLayout() {
72121
<MainContentStyled {...{ borderRadius, menuOrientation, open: drawerOpen, marginTop: 80 }}>
73122
<Container
74123
maxWidth={'lg'}
75-
sx={{ ...(!container && { px: { xs: 0 } }), minHeight: 'calc(100vh - 228px)', display: 'flex', flexDirection: 'column' }}
124+
sx={{
125+
...(!container && { px: { xs: 0 } }),
126+
minHeight: 'calc(100vh - 228px)',
127+
display: 'flex',
128+
flexDirection: 'column'
129+
}}
76130
>
77131
{/* breadcrumb */}
78132
<Breadcrumbs />
79133
{/*<Outlet />*/}
80134

135+
{/*<MainCard>*/}
81136
<MainCard>
82-
<Box sx={{ width: '100%' }}>
83-
<Tabs value={currentTabIndex} onChange={handleChange} centered>
84-
{tabs.map((tab) => (
85-
<Tab key={tab.path} label={tab.label} />
86-
))}
87-
</Tabs>
88-
<Box sx={{ p: 3 }}>
89-
<Outlet />
90-
</Box>
137+
<AntTabs value={currentTabIndex} onChange={handleChange} centered>
138+
{tabs.map((tab, index) => (
139+
<AntTab
140+
wrapped={true}
141+
key={tab.path}
142+
label={tab.label}
143+
onClick={() => {
144+
const tabPath = `/${tab.path}`;
145+
// клик на активный таб
146+
if (currentTabIndex === index) {
147+
navigate(tabPath, { replace: true, state: { refresh: Date.now() } });
148+
} else {
149+
navigate(tabPath);
150+
}
151+
}}
152+
/>
153+
))}
154+
</AntTabs>
155+
<Box sx={{ pt: 3 }}>
156+
<Outlet />
91157
</Box>
92158
</MainCard>
159+
{/*</MainCard>*/}
93160
</Container>
94161
{/* footer */}
95162
<Footer />

‎src/types/vaults.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export interface CuratorAddresses {
1616
}
1717

1818
export interface Curators {
19+
id: string;
1920
name: string;
2021
image: string;
2122
addresses: CuratorAddresses[];

‎src/ui-component/cards/MainCard.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ export default function MainCard({
6666
':hover': {
6767
boxShadow: boxShadow ? shadow || defaultShadow : 'inherit'
6868
},
69+
backgroundColor: 'primary.secondary.main',
6970
...(typeof sx === 'function' ? sx(theme) : sx || {})
7071
})}
7172
>

0 commit comments

Comments
 (0)