Skip to content

Chore/tooltip standart #424

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KevinMehrabi merged 3 commits into from
Feb 28, 2025
Merged

Chore/tooltip standart #424

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
75957ab
chore: tooltip standart design
Raziievskyi-Illia Feb 24, 2025
da1d849
fix: progress bar padding
Raziievskyi-Illia Feb 24, 2025
729549a
Merge branch 'main' into chore/tooltip_standart
Raziievskyi-Illia Feb 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/ui/src/components/BorrowModal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { useStyles } from './style';
const BorrowModal = (props) => {
const classes = useStyles();
const dispatch = useDispatch();
const { open, close, tokenDetails } = props;
const { open, close, tokenDetails, tab } = props;

const { account } = useSelector((state) => state.addWallet);
const { protocolAddresses, comptroller } = useSelector((state) => state.nodes);
Expand Down Expand Up @@ -239,6 +239,7 @@ const BorrowModal = (props) => {
setTokenValue(tokenAmount);
setCurrentTab(tabValue);
}}
tab={tab}
/>
</>
);
Expand Down
62 changes: 42 additions & 20 deletions src/ui/src/components/Dashboard/BorrowedTokenTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import { Typography } from '@mui/material';
import { Button, tooltipClasses, Typography } from '@mui/material';

// eslint-disable-next-line object-curly-newline
import { decimalify, formatTokenData, nFormatter, roundValue, truncateNum } from '../../util';
Expand All @@ -35,26 +35,25 @@ const BorrowedTokenTable = (props) => {
const [tokenDetails, setTokenDetails] = useState();
const [openMktModal, setMktModal] = useState(false);
const [loading, setLoading] = useState(true);
const [openRepayTab, setRepayTab] = useState(false);

const checkLimitUsed = (data) => {
const val = new BigNumber(
decimalify(data.outstandingLoan * data.usdPrice, decimals[data.title], decimals[data.title]),
)
.dividedBy(new BigNumber(totalCollateral))
.multipliedBy(100)
.toNumber();
return val > 0.01 ? truncateNum(val) : '<0.01';
};

const closeModal = () => {
setMktModal(false);
setRepayTab(false);
};

const handleClickMktModal = (item) => {
setTokenDetails(item);
setMktModal(true);
};

const handleClickRepay = (item) => {
setTokenDetails(item);
setMktModal(true);
setRepayTab(true);
};

const borrowedData = formatTokenData(tableData);

useEffect(() => {
Expand All @@ -68,14 +67,14 @@ const BorrowedTokenTable = (props) => {

return (
<TableContainer className={`${classes.root} ${classes.tableCon}`}>
{tokenDetails && <BorrowModal open={openMktModal} close={closeModal} tokenDetails={tokenDetails} />}
{tokenDetails && <BorrowModal open={openMktModal} close={closeModal} tokenDetails={tokenDetails} tab={openRepayTab ? 'two' : undefined} />}
<Table>
<TableHead>
<TableRow>
<TableCell> Token </TableCell>
<TableCell align="center"> APY </TableCell>
<TableCell align="center"> Balance </TableCell>
<TableCell align="center"> Limit used </TableCell>
<TableCell align="center"> </TableCell>
</TableRow>
</TableHead>
<TableBody>
Expand Down Expand Up @@ -122,12 +121,33 @@ const BorrowedTokenTable = (props) => {
</TableCell>
<TableCell align="center">
<LightTooltip
title={`${decimalify(
data.outstandingLoan,
decimals[data.title],
decimals[data.title],
)} ${data.title}`}
placement="bottom"
sx={{
[`& .${tooltipClasses.tooltip}`]: {
marginBottom: '11px !important'
}
}}
title={ <>
<Typography className={classes.tooltipPrimaryText}>
{`${decimalify(
data.outstandingLoan,
decimals[data.title],
decimals[data.title]
).replace(/\.?0+$/, '')} ${data.title}`}
</Typography>
<Typography className={classes.tooltipSecondaryText}>
$
{data.balanceUnderlying > 0
? nFormatter(
decimalify(
(data.outstandingLoan * data.usdPrice).toString(),
decimals[data.title],
decimals[data.title]
)
)
: '0.00'}
</Typography>
</>}
placement="top"
>
<span className={classes.clearFont}>
{data.outstandingLoan > 0 &&
Expand Down Expand Up @@ -159,8 +179,10 @@ const BorrowedTokenTable = (props) => {
)}
</span>
</TableCell>
<TableCell align="center">
<span className={classes.clearFont}>{checkLimitUsed(data)}%</span>
<TableCell align="center" className={classes.repayCell}>
<Button variant='contained' className={classes.detailsButton} onClick={() => handleClickRepay(data)}>
R<Typography textTransform={'lowercase'}>epay</Typography>
</Button>
</TableCell>
</TableRow>
))}
Expand Down
54 changes: 45 additions & 9 deletions src/ui/src/components/Dashboard/SuppliedTokenTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import { Typography } from '@mui/material';
import { Button, Typography, tooltipClasses } from '@mui/material';

import TableSkeleton from '../Skeleton';
import Switch from '../Switch';
Expand Down Expand Up @@ -42,11 +42,13 @@ const SuppliedTokenTable = (props) => {
const [collModal, setCollModal] = useState(false);
const [disableCollModal, setDisableCollModal] = useState(false);
const [loading, setLoading] = useState(true);
const [openWithdrawTab, setWithdrawTab] = useState(false);

const closeModal = () => {
setSupplyModal(false);
setDisableCollModal(false);
setCollModal(false);
setWithdrawTab(false);
};

const handleClickMktModal = (item, event) => {
Expand All @@ -63,6 +65,12 @@ const SuppliedTokenTable = (props) => {
}
};

const handleClickWithdraw = (item) => {
setTokenDetails(item);
setSupplyModal(true);
setWithdrawTab(true);
};

const suppliedData = formatTokenData(tableData);

useEffect(() => {
Expand All @@ -78,7 +86,7 @@ const SuppliedTokenTable = (props) => {
<TableContainer className={`${classes.root} ${classes.tableCon}`}>
{tokenDetails && (
<>
<SupplyModal open={openSupplyModal} close={closeModal} tokenDetails={tokenDetails} />
<SupplyModal open={openSupplyModal} close={closeModal} tokenDetails={tokenDetails} tab={openWithdrawTab ? 'two' : undefined}/>
<DisableCollateralModal open={disableCollModal} close={closeModal} tokenDetails={tokenDetails} />
<CollateralizeModal open={collModal} close={closeModal} tokenDetails={tokenDetails} />
</>
Expand All @@ -93,6 +101,7 @@ const SuppliedTokenTable = (props) => {
Collateral{' '}
<img src={questionCircleIcon} alt={'questionIcon'} className={classes.questionCircleIcon} />
</TableCell>
<TableCell align='center'></TableCell>
</TableRow>
</TableHead>
<TableBody>
Expand Down Expand Up @@ -130,7 +139,7 @@ const SuppliedTokenTable = (props) => {
<span>
{data.rate > 0
? // checks if rate is lower than 0.1% (all rates lower than 0.01% is shown as <0.01%)
new BigNumber(data.rate).gt(new BigNumber(10000000000000000))
new BigNumber(data.rate).gt(new BigNumber(10000000000000000))
? roundValue(decimalify(data.rate, 18))
: '<0.01'
: '0'}
Expand All @@ -139,12 +148,34 @@ const SuppliedTokenTable = (props) => {
</TableCell>
<TableCell align="center">
<LightTooltip
title={`${decimalify(
data.balanceUnderlying,
decimals[data.title],
decimals[data.title],
)} ${data.title}`}
placement="bottom"
sx={{
[`& .${tooltipClasses.tooltip}`]: {
marginBottom: '11px !important'
}
}}
title={
<>
<Typography className={classes.tooltipPrimaryText}>
{`${decimalify(
data.balanceUnderlying,
decimals[data.title],
decimals[data.title]
).replace(/\.?0+$/, '')} ${data.title}`}
</Typography>
<Typography className={classes.tooltipSecondaryText}>
$
{data.balanceUnderlying > 0
? nFormatter(
decimalify(
(data.balanceUnderlying * data.usdPrice).toString(),
decimals[data.title],
decimals[data.title]
)
)
: '0.00'}
</Typography>
</>}
placement="top"
>
<span className={classes.clearFont}>
{data.balanceUnderlying >= 1 &&
Expand Down Expand Up @@ -181,6 +212,11 @@ const SuppliedTokenTable = (props) => {
<TableCell align="center" className={classes.switchPadding}>
<Switch data={data} />
</TableCell>
<TableCell className={classes.withdrawCell}>
<Button variant='contained' className={classes.detailsButton} onClick={() => handleClickWithdraw(data)}>
W<Typography textTransform={'lowercase'}>ithdraw</Typography>
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
Expand Down
44 changes: 25 additions & 19 deletions src/ui/src/components/Dashboard/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,25 +302,8 @@ export const useStyles = makeStyles({
padding: '21px 35px 21px 30px !important',
},
},
collateralPadding: {
'@media(min-width: 968px)': {
paddingRight: '.5rem !important',
},
'@media(min-width: 1200px)': {
paddingRight: '2rem !important',
},
},
switchPadding: {
'@media(min-width: 501px)': {
paddingRight: '2.5rem !important',
},
'@media(min-width: 968px)': {
paddingRight: '2rem !important',
},
'@media(min-width: 1200px)': {
paddingRight: '4rem !important',
},
},
collateralPadding: {},
switchPadding: {},
stickyCellLeft: {
position: 'sticky',
zIndex: 2,
Expand All @@ -343,5 +326,28 @@ export const useStyles = makeStyles({
'.MuiTableRow-root:hover &': {
backgroundColor: '#F5FCFE',
}
},
tooltipPrimaryText: {
fontSize: '16px',
fontWeight: 600,
lineHeight: '22.4px',
textAlign: 'center'
},
tooltipSecondaryText: {
fontSize: '14px',
fontWeight: 400,
lineHeight: '19.6px',
textAlign: 'center'
},
withdrawCell: {
'@media(min-width: 1200px)': {
paddingRight: '1.5rem !important',
},
width: '17%',
},
repayCell: {
'@media(min-width: 1200px)': {
paddingRight: '1.5rem !important',
},
}
});
23 changes: 22 additions & 1 deletion src/ui/src/components/DashboardModal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { BigNumber } from 'bignumber.js';
import { decimals } from 'tezoslendingplatformjs';

import Box from '@mui/material/Box';
import { Button, Typography } from '@mui/material';
import { Button, Typography, tooltipClasses } from '@mui/material';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogTitle from '@mui/material/DialogTitle';
Expand Down Expand Up @@ -92,6 +92,12 @@ const DashboardModal = (props) => {
setTabValue(newValue);
};

useEffect(() => {
if (tab) {
setTabValue(tab);
}
}, [tab]);

useEffect(() => {
setTokenValue('');
}, [close]);
Expand All @@ -116,6 +122,11 @@ const DashboardModal = (props) => {
<div>
<img src={tokenDetails.logo} alt="logo" className={classes.img} />
<LightTooltip
sx={{
[`& .${tooltipClasses.tooltip}`]: {
marginTop: '0px !important'
}
}}
title={
tokenDetails.walletBalance
? `${decimalify(
Expand Down Expand Up @@ -221,6 +232,11 @@ const DashboardModal = (props) => {
</Grid>
{mainModal ? (
<LightTooltip
sx={{
[`& .${tooltipClasses.tooltip}`]: {
marginTop: '0px !important'
}
}}
title={`${
tabValue === 'one'
? tokenDetails.supply.balanceUnderlying > 0
Expand Down Expand Up @@ -266,6 +282,11 @@ const DashboardModal = (props) => {
</LightTooltip>
) : (
<LightTooltip
sx={{
[`& .${tooltipClasses.tooltip}`]: {
marginTop: '0px !important'
}
}}
title={`${decimalify(
tokenDetails.balanceUnderlying,
decimals[tokenDetails.title],
Expand Down
Loading