diff --git a/src/ui/src/components/AllMarketModal/index.js b/src/ui/src/components/AllMarketModal/index.js index 2b8eec36..b79876bb 100644 --- a/src/ui/src/components/AllMarketModal/index.js +++ b/src/ui/src/components/AllMarketModal/index.js @@ -23,7 +23,7 @@ const AllMarketModal = (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); @@ -171,6 +171,7 @@ const AllMarketModal = (props) => { APYTextTwo="Borrow APY" CurrentStateText= "Currently Supplying" CurrentStateTextTwo= "Currently Borrowing" + tab={tab ? tab : "one"} open={open} close={close} tokenDetails={tokenDetails} diff --git a/src/ui/src/components/Constants/index.js b/src/ui/src/components/Constants/index.js index 7c8ae70d..99114be9 100644 --- a/src/ui/src/components/Constants/index.js +++ b/src/ui/src/components/Constants/index.js @@ -1,4 +1,4 @@ -import { AssetType } from 'tezoslendingplatformjs'; +import { AssetType, testnetAddresses, mainnetAddresses } from 'tezoslendingplatformjs'; import fUSDtz from '../../assets/fusdtz.svg'; import fXTZ from '../../assets/fXTZ.svg'; import fUSDT from '../../assets/fusdt.svg'; @@ -21,6 +21,8 @@ import XTZ from '../../assets/XTZ.svg'; // import fOXTZ from '../../assets/foxtz.svg'; // import fWTZ from '../../assets/fwtz.svg'; +const addresses = process.env.REACT_APP_ENV=="dev"? testnetAddresses : mainnetAddresses; + export const tokens = [ { title: 'XTZ', @@ -29,6 +31,7 @@ export const tokens = [ fLogo: fXTZ, banner: 'Tez', assetType: AssetType.XTZ, + address: '' }, { title: 'USDtz', @@ -37,6 +40,7 @@ export const tokens = [ fLogo: fUSDtz, banner: 'USDtz', assetType: AssetType.USD, + address: addresses.underlying.USD?.address ?? '' }, { title: 'USDt', @@ -45,6 +49,7 @@ export const tokens = [ fLogo: fUSDT, banner: 'USDt', assetType: AssetType.USDT, + address: addresses.underlying.USDT?.address ?? '' }, { title: 'tzBTC', @@ -54,6 +59,7 @@ export const tokens = [ banner: 'tzBTC', assetType: AssetType.TZBTC, visibilityThreshold: 0.0000001, + address: addresses.underlying.TZBTC?.address ?? '' } // { // title: 'BTCtz', logo: BTCtz, fLogo: fBTCtz, banner: 'BTCtz', assetType: AssetType.BTC diff --git a/src/ui/src/components/Dashboard/AllMarketTokenTable.tsx b/src/ui/src/components/Dashboard/AllMarketTokenTable.tsx deleted file mode 100644 index 850785ce..00000000 --- a/src/ui/src/components/Dashboard/AllMarketTokenTable.tsx +++ /dev/null @@ -1,231 +0,0 @@ -/* eslint-disable no-nested-ternary */ -/* eslint-disable import/extensions */ -/* eslint-disable import/no-unresolved */ -// eslint-disable-next-line no-use-before-define -import React, { useState } from "react"; -import { useSelector } from "react-redux"; - -import { decimals } from "tezoslendingplatformjs"; -import BigNumber from "bignumber.js"; - -import Table from "@mui/material/Table"; -import TableBody from "@mui/material/TableBody"; -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 { decimalify, nFormatter, roundValue } from "../../util"; - -import AllMarketModal from "../AllMarketModal"; -import TableSkeleton from "../Skeleton"; - -import { useStyles } from "./style"; - -const AllMarketTokenTable = (props) => { - const classes = useStyles(); - const { tableData } = props; - const { address } = useSelector((state: any) => state.addWallet.account); - - const [tokenDetails, setTokenDetails] = useState(); - const [openMktModal, setMktModal] = useState(false); - - const closeModal = () => { - setMktModal(false); - }; - - const handleClickMktModal = (item) => { - setTokenDetails(item); - setMktModal(true); - }; - - return ( - - {tokenDetails && ( - - )} - - - - Token - Market Size - Total Borrowed - Supply APY - Borrow APY - Wallet - - - - {tableData?.map((data) => ( - - {(address && data.walletBalance) || - (!address && data.marketSize) ? ( - handleClickMktModal(data)} - > - -
-
- {`${data.title}-Icon`} - -
- - {" "} - {data.name}{" "} - - - {" "} - {data.title}{" "} - -
-
-
- - - - {data.marketSize > 0 - ? decimalify( - data.marketSize.toString(), - decimals[data.title], - decimals[data.title], - ) < 0.01 - ? '>0.00' - : nFormatter( - decimalify( - data.marketSize.toString(), - decimals[data.title], - decimals[data.title], - ), - ) - : '0'}{" "} - {data.title} - {" "} -
- - $ - {data.marketSize > 0 - ? nFormatter( - decimalify( - (data.marketSize * data.usdPrice).toString(), - decimals[data.title], - decimals[data.title], - ), - ) - : "0.00"} - - - - - {data.totalBorrowed > 0 - ? decimalify( - data.totalBorrowed.toString(), - decimals[data.title], - decimals[data.title], - ) < 0.01 - ? '>0.00' - : nFormatter( - decimalify( - data.totalBorrowed.toString(), - decimals[data.title], - decimals[data.title], - ), - ) - : '0'}{" "} - {data.title} - {" "} -
- - $ - {data.totalBorrowed > 0 - ? nFormatter( - decimalify( - (data.totalBorrowed * data.usdPrice).toString(), - decimals[data.title], - decimals[data.title], - ), - ) - : "0.00"} - - - - - {data.supplyRate > 0 - ? // checks if rate is lower than 0.1% (all rates lower than 0.01% is shown as <0.01%) - new BigNumber(data.supplyRate).gt( - new BigNumber(10000000000000000), - ) - ? roundValue(decimalify(data.supplyRate, 18)) - : "<0.01" - : "0"} - % - - - - - {data.borrowRate > 0 - ? // checks if rate is lower than 0.1% (all rates lower than 0.01% is shown as <0.01%) - new BigNumber(data.borrowRate).gt( - new BigNumber(10000000000000000), - ) - ? roundValue(decimalify(data.borrowRate, 18)) - : "<0.01" - : "0"} - % - - - - - {data.walletBalance > 0 - ? decimalify( - data.walletBalance.toString(), - decimals[data.title], - decimals[data.title], - ) < 0.01 - ? '>0.00' - : nFormatter( - decimalify( - data.walletBalance.toString(), - decimals[data.title], - decimals[data.title], - ), - ) - : '0'}{" "} - {data.title} - {" "} -
- - $ - {data.walletBalance > 0 - ? nFormatter( - decimalify( - (data.walletBalance * data.usdPrice).toString(), - decimals[data.title], - decimals[data.title], - ), - ) - : "0.00"} - - - - ) : ( - - )} - - ))} - -
- - ); -}; - -export default AllMarketTokenTable; diff --git a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx new file mode 100644 index 00000000..9015904b --- /dev/null +++ b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx @@ -0,0 +1,166 @@ +/* eslint-disable no-nested-ternary */ +/* eslint-disable import/extensions */ +/* eslint-disable import/no-unresolved */ +// eslint-disable-next-line no-use-before-define +import React, { useState } from 'react'; +import { useSelector } from 'react-redux'; + +import { decimals } from 'tezoslendingplatformjs'; +import BigNumber from 'bignumber.js'; + +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +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 { Button, Typography } from '@mui/material'; + +import { decimalify, nFormatter, roundValue } from '../../util'; + +import AllMarketModal from '../AllMarketModal'; +import TableSkeleton from '../Skeleton'; + +import { useStyles } from './style'; + +const BorrowMarketTokenTable = (props) => { + const classes = useStyles(); + const { tableData } = props; + const { address } = useSelector((state: any) => state.addWallet.account); + + const [tokenDetails, setTokenDetails] = useState(); + const [openMktModal, setMktModal] = useState(false); + + const closeModal = () => { + setMktModal(false); + }; + + const handleClickDetails = (address) => { + const tzktUrl = + process.env.REACT_APP_ENV == 'dev' ? `https://ghostnet.tzkt.io/${address}` : `https://tzkt.io/${address}`; + window.open(tzktUrl, '_blank'); + }; + + const handleClickMktModal = (item) => { + setTokenDetails(item); + setMktModal(true); + }; + + return ( + + {tokenDetails && ( + + )} + + + + + Token + + Available + Borrow APY + + + + + + {tableData?.map((data) => ( + + {(address && data.walletBalance) || (!address && data.marketSize) ? ( + + +
+ {`${data.title}-Icon`} + +
+ {data.name} + + {' '} + {data.title}{' '} + +
+
+ + + + {data.marketSize > 0 + ? decimalify( + data.available.toString(), + decimals[data.title], + decimals[data.title], + ) < 0.01 + ? '>0.00' + : nFormatter( + decimalify( + data.available.toString(), + decimals[data.title], + decimals[data.title], + ), + ) + : '0'}{' '} + {data.title} + {' '} +
+ + $ + {data.marketSize > 0 + ? nFormatter( + decimalify( + ( + (data.marketSize - data.totalBorrowed) * + data.usdPrice + ).toString(), + decimals[data.title], + decimals[data.title], + ), + ) + : '0.00'} + + + + + {data.borrowRate > 0 + ? // checks if rate is lower than 0.1% (all rates lower than 0.01% is shown as <0.01%) + new BigNumber(data.borrowRate).gt(new BigNumber(10000000000000000)) + ? roundValue(decimalify(data.borrowRate, 18)) + : '<0.01' + : '0'} + % + + + + + + + + + + ) : ( + + )} + + ))} + +
+ + ); +}; + +export default BorrowMarketTokenTable; diff --git a/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx b/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx index 45955d39..98550363 100644 --- a/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx +++ b/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx @@ -97,7 +97,7 @@ const BorrowedTokenTable = (props) => { {borrowedData && borrowedData.map((data) => ( handleClickMktModal(data)}> - +
{`${data.title}-Icon`} @@ -110,7 +110,7 @@ const BorrowedTokenTable = (props) => {
- + {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)) diff --git a/src/ui/src/components/Dashboard/SuppliedTokenTable.tsx b/src/ui/src/components/Dashboard/SuppliedTokenTable.tsx index 6816aeb8..107952dc 100644 --- a/src/ui/src/components/Dashboard/SuppliedTokenTable.tsx +++ b/src/ui/src/components/Dashboard/SuppliedTokenTable.tsx @@ -89,7 +89,7 @@ const SuppliedTokenTable = (props) => { Token APY Balance - + Collateral{' '} {'questionIcon'} @@ -114,7 +114,7 @@ const SuppliedTokenTable = (props) => { {suppliedData && suppliedData.map((data) => ( handleClickMktModal(data, event)}> - +
{`${data.title}-Icon`} @@ -178,7 +178,7 @@ const SuppliedTokenTable = (props) => { : '0.00'} - + diff --git a/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx b/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx new file mode 100644 index 00000000..129e9b9c --- /dev/null +++ b/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx @@ -0,0 +1,147 @@ +/* eslint-disable no-nested-ternary */ +/* eslint-disable import/extensions */ +/* eslint-disable import/no-unresolved */ +// eslint-disable-next-line no-use-before-define +import React, { useState } from 'react'; +import { useSelector } from 'react-redux'; + +import { decimals } from 'tezoslendingplatformjs'; +import BigNumber from 'bignumber.js'; + +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +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 { Button, Typography } from '@mui/material'; + +import { decimalify, nFormatter, roundValue } from '../../util'; + +import AllMarketModal from '../AllMarketModal'; +import TableSkeleton from '../Skeleton'; + +import { useStyles } from './style'; + +const SupplyMarketTokenTable = (props) => { + const classes = useStyles(); + const { tableData } = props; + const { address } = useSelector((state: any) => state.addWallet.account); + + const [tokenDetails, setTokenDetails] = useState(); + const [openMktModal, setMktModal] = useState(false); + + const closeModal = () => { + setMktModal(false); + }; + + const handleClickMktModal = (item) => { + setTokenDetails(item); + setMktModal(true); + }; + + return ( + + {tokenDetails && } + + + + + Token + + Wallet + Supply APY + + + + + {tableData?.map((data) => ( + + {(address && data.walletBalance) || (!address && data.marketSize) ? ( + handleClickMktModal(data)}> + +
+ {`${data.title}-Icon`} + +
+ {data.name} + + {' '} + {data.title}{' '} + +
+
+ + + + {data.walletBalance > 0 + ? decimalify( + data.walletBalance.toString(), + decimals[data.title], + decimals[data.title], + ) < 0.01 + ? '>0.00' + : nFormatter( + decimalify( + data.walletBalance.toString(), + decimals[data.title], + decimals[data.title], + ), + ) + : '0'}{' '} + {data.title} + {' '} +
+ + $ + {data.walletBalance > 0 + ? nFormatter( + decimalify( + (data.walletBalance * data.usdPrice).toString(), + decimals[data.title], + decimals[data.title], + ), + ) + : '0.00'} + + + + + {data.supplyRate > 0 + ? // checks if rate is lower than 0.1% (all rates lower than 0.01% is shown as <0.01%) + new BigNumber(data.supplyRate).gt(new BigNumber(10000000000000000)) + ? roundValue(decimalify(data.supplyRate, 18)) + : '<0.01' + : '0'} + % + + + + + + + + + ) : ( + + )} + + ))} + +
+ + ); +}; + +export default SupplyMarketTokenTable; diff --git a/src/ui/src/components/Dashboard/index.tsx b/src/ui/src/components/Dashboard/index.tsx index 7ed5907b..ecb79ae9 100644 --- a/src/ui/src/components/Dashboard/index.tsx +++ b/src/ui/src/components/Dashboard/index.tsx @@ -5,11 +5,12 @@ import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import Grid from '@mui/material/Grid'; -import { Typography } from '@mui/material'; +import { Box, Typography } from '@mui/material'; import BorrowedTokenTable from './BorrowedTokenTable'; import SuppliedTokenTable from './SuppliedTokenTable'; -import AllMarketTokenTable from './AllMarketTokenTable'; +import BorrowMarketTokenTable from './BorrowMarketTokenTable'; +import SupplyMarketTokenTable from './SupplyMarketTokenTable'; import { borrowedMarketAction, allMarketAction, suppliedMarketAction } from '../../reduxContent/market/actions'; @@ -24,7 +25,9 @@ const Dashboard = () => { const { suppliedMarkets, borrowedMarkets, allMarkets } = useSelector((state: any) => state.market); useEffect(() => { - if (!markets) { return; } + if (!markets) { + return; + } dispatch(allMarketAction(account, markets)); dispatch(suppliedMarketAction(allMarkets)); @@ -35,15 +38,19 @@ const Dashboard = () => { Supplying - + - + Borrowing - - Markets - + + Assets to Supply + + + + Assets to Borrow + ); diff --git a/src/ui/src/components/Dashboard/style.ts b/src/ui/src/components/Dashboard/style.ts index 567876bd..045d1b77 100644 --- a/src/ui/src/components/Dashboard/style.ts +++ b/src/ui/src/components/Dashboard/style.ts @@ -1,253 +1,331 @@ /* eslint-disable import/prefer-default-export */ -import { makeStyles } from "@mui/styles"; +import { makeStyles } from '@mui/styles'; export const useStyles = makeStyles({ - root: { - "& .MuiTypography-root": { - "@media(max-width: 501px)": { - fontSize: "0.75rem", - }, - "@media(max-width: 320px)": { - fontSize: "0.625rem", - }, - }, - "& .MuiTable-root": { - "& .MuiTableRow-root": { - "& .MuiTableCell-root:first-of-type": { - padding: "1.25rem", - paddingLeft: ".75rem", - "@media(min-width: 1200px)": { - paddingLeft: "1.5rem", - }, - }, - "& .MuiTableCell-root:last-of-type": { - paddingRight: ".75rem", - "@media(min-width: 1200px)": { - paddingRight: "2.75rem", - }, - }, - }, - }, - "& .MuiTableCell-root": { - color: "#000", - borderBottom: "1px solid #E0E0E0", - padding: ".75rem", - whiteSpace: "nowrap", - "@media(min-width: 1200px)": { - paddingLeft: "1.5rem", - }, - "@media(max-width: 501px)": { - padding: ".5rem", - }, - }, - "& .MuiTableHead-root ": { - "& .MuiTableRow-root": { - height: "3.5rem", - }, - "& .MuiTableCell-root": { - color: "#000", - opacity: "0.6", - fontSize: ".875rem", - "@media(min-width: 768px)": { - minWidth: "5.5625rem", - }, - "@media(max-width: 1200px)": { - fontSize: "0.75rem", - }, - "@media(max-width: 501px)": { - fontSize: "0.625rem", - }, - "@media(max-width: 320px)": { - fontSize: "0.75rem", - }, - }, - }, - "& .MuiTableBody-root ": { - "& .MuiTableRow-root:last-of-type": { - "& .MuiTableCell-root": { - borderBottom: "0", - }, - }, - "& .MuiTableRow-root": { - height: "4.5rem", - "&:hover": { - background: "#DDF5FC66", - }, - }, - "& .MuiTableCell-root": { - fontWeight: "400", - "@media(min-width: 1200px)": { - fontSize: "1rem", - }, - "@media(max-width: 768px)": { - fontSize: "0.875rem", - }, - "@media(max-width: 501px)": { - fontSize: "0.75rem", - }, - }, - }, - }, - tableCon: { - background: "#fff", - borderBottom: "0", - borderRadius: "1rem", - "&::-webkit-scrollbar": { - display: "none", - }, - boxShadow: "2px 4px 23px 5px rgba(163,163,163,0.096)", - }, - questionCircleIcon: { - width: "1rem", - height: "1rem", - marginBottom: "-3px", - }, - img: { - width: "2.5rem", - height: "2.5rem", - marginRight: "12px", - - "@media (min-width: 769px) and (max-width: 1024px)": { - width: "2.5rem", - height: "2.5rem", - marginLeft: "12px", - }, - "@media(max-width: 768px)": { - width: "2.5rem", - height: "2.5rem", - marginLeft: "12px", - }, - "@media(max-width: 501px)": { - width: "2.5rem", - height: "2.5rem", - marginLeft: "10px", - }, - }, - tokenSymbol: { - display: "inline", - color: "#000", - opacity: "0.6", - fontSize: "1rem", - fontWeight: "400", - letterSpacing: "0.005em", - lineHeight: "1.875rem", - "@media(max-width: 1200px)": { - fontSize: "1rem", - }, - "@media(max-width: 768px)": { - fontSize: "1rem", - }, - }, - token: { - display: "flex", - flexDirection: "row", - alignItems: "center", - alignContent: "center", - alignText: "center", - }, - tokenTitle: { - display: "flex", - flexDirection: "column", - }, - tokenName: { - display: "inline", - color: "#000", - opacity: "0.87", - fontSize: "1rem", - fontWeight: "400", - letterSpacing: "0.005em", - lineHeight: "1.875rem", - "@media(max-width: 1200px)": { - fontSize: "1rem", - }, - "@media(max-width: 768px)": { - fontSize: "1rem", - }, - }, - clearFont: { - color: "#000", - opacity: "0.87", - fontWeight: "400", - }, - faintFont: { - color: "#000", - opacity: "0.6", - fontWeight: "400", - fontSize: "0.875rem", - }, - dashboard: { - background: "#F9FAFC", - padding: "0px 6.25rem 10.125rem", - "@media(max-width: 1024px)": { - padding: "0px 4rem 10.125rem", - }, - "@media(max-width: 900px)": { - padding: "0px 2rem 10.125rem", - }, - "@media(max-width: 768px)": { - padding: "0px 4rem 10.125rem", - }, - "@media(max-width: 501px)": { - padding: "0px 1rem 10.125rem", - }, - }, - borrowTablePadding: { - "@media(min-width: 900px)": { - paddingLeft: "0.875rem", - }, - "@media(min-width: 1024px)": { - paddingLeft: "0.9375rem", - }, - "@media(min-width: 1200px)": { - paddingLeft: "1.875rem", - }, - }, - supplyTablePadding: { - "@media(min-width: 900px)": { - paddingRight: "0.875rem", - }, - "@media(min-width: 1024px)": { - paddingRight: "0.9375rem", - }, - "@media(min-width: 1200px)": { - paddingRight: "1.875rem", - }, - }, - tableTitle: { - color: "#000", - opacity: "0.87", - padding: " 1.5rem 0 .5rem", - fontSize: "1.25rem", - fontWeight: "500", - lineHeight: "30px", - }, - emptyStateText: { - color: "#000", - fontSize: "1rem", - fontWeight: "400", - lineHeight: "30px", - letterSpacing: "0.005em", - "@media(min-width: 768px)": { - 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", - }, - }, + root: { + '& .MuiTypography-root': { + '@media(max-width: 501px)': { + fontSize: '0.75rem', + }, + '@media(max-width: 320px)': { + fontSize: '0.625rem', + }, + }, + '& .MuiTable-root': { + flexDirection: 'column', + width: '100%', + alignItems: 'center', + justifyContent: 'center', + '& .MuiTableRow-root': { + paddingRight: '0rem', + marginRight: '0rem', + }, + }, + '& .MuiTableCell-root': { + color: '#000', + borderBottom: '1px solid #E0E0E0', + padding: '.75rem', + whiteSpace: 'nowrap', + '@media(min-width: 1200px)': { + paddingLeft: '1.5rem', + }, + '@media(max-width: 501px)': { + padding: '.5rem', + }, + }, + '& .MuiTableHead-root ': { + '& .MuiTableRow-root': { + height: '3.5rem', + }, + '& .MuiTableCell-root': { + color: '#000', + opacity: '0.6', + fontSize: '.875rem', + '@media(min-width: 768px)': { + minWidth: '5.5625rem', + }, + '@media(max-width: 1200px)': { + fontSize: '0.75rem', + }, + '@media(max-width: 501px)': { + fontSize: '0.625rem', + }, + '@media(max-width: 320px)': { + fontSize: '0.75rem', + }, + }, + }, + '& .MuiTableBody-root ': { + '& .MuiTableRow-root:last-of-type': { + '& .MuiTableCell-root': { + padding: '-10px', + marginRight: '10px', + borderBottom: '0', + }, + }, + '& .MuiTableRow-root': { + height: '4.5rem', + '&:hover': { + background: '#DDF5FC66', + }, + }, + '& .MuiTableCell-root': { + fontWeight: '400', + '@media(min-width: 1200px)': { + fontSize: '1rem', + }, + '@media(max-width: 768px)': { + fontSize: '0.875rem', + }, + '@media(max-width: 501px)': { + fontSize: '0.75rem', + }, + }, + }, + }, + tableCon: { + padding: '0px', + background: '#fff', + borderBottom: '0', + borderRadius: '1rem', + '&::-webkit-scrollbar': { + display: 'none', + }, + boxShadow: '2px 4px 23px 5px rgba(163,163,163,0.096)', + }, + questionCircleIcon: { + width: '1rem', + height: '1rem', + marginBottom: '-3px', + }, + img: { + //width: "7%", + //height: "7%", + // marginRight: "20%", + width: '2.5rem', + height: '2.5rem', + marginRight: '12px', + '@media (min-width: 769px) and (max-width: 1024px)': { + width: '2.5rem', + height: '2.5rem', + marginRight: '12px', + }, + '@media(max-width: 768px)': { + width: '2.5rem', + height: '2.5rem', + marginRight: '12px', + }, + '@media(max-width: 501px)': { + width: '2.5rem', + height: '2.5rem', + marginRight: '12px', + }, + }, + tokenSymbol: { + display: 'inline', + color: '#000', + opacity: '0.6', + fontSize: '1rem', + fontWeight: '400', + letterSpacing: '0.005em', + lineHeight: '1.875rem', + '@media(max-width: 1200px)': { + fontSize: '1rem', + }, + '@media(max-width: 768px)': { + fontSize: '1rem', + }, + }, + token: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + alignContent: 'center', + alignText: 'center', + padding: '0px', + }, + tokenTitle: { + display: 'flex', + flexDirection: 'column', + }, + borrowButton: { + marginRight: '0%', + borderRadius: '8px', + '@media(max-width: 768px)': {}, + '@media(max-width: 501px)': {}, + width: '80%' + }, + detailsButton: { + color: '#2C2C2C', + border: '1px solid #2C2C2C', + borderRadius: '8px', + backgroundColor: '#F2F3F7', + '&:hover': { + backgroundColor: 'lightgrey', + boxShadow: 'none', + }, + width: '80%' + }, + tokenName: { + display: 'inline', + color: '#000', + opacity: '0.87', + fontSize: '1rem', + fontWeight: '400', + letterSpacing: '0.005em', + lineHeight: '1.875rem', + '@media(max-width: 1200px)': { + fontSize: '1rem', + }, + '@media(max-width: 768px)': { + fontSize: '1rem', + }, + }, + clearFont: { + color: '#000', + opacity: '0.87', + fontWeight: '400', + }, + faintFont: { + color: '#000', + opacity: '0.6', + fontWeight: '400', + fontSize: '0.875rem', + }, + compositionOne: {}, + dashboard: { + paddingLeft: '6.25rem', + paddingRight: '6.25rem', + '@media(max-width: 1024px)': { + paddingLeft: '4rem', + paddingRight: '4rem', + }, + '@media(max-width: 900px)': { + paddingLeft: '2rem', + paddingRight: '2rem', + }, + '@media(max-width: 768px)': { + paddingLeft: '4rem', + paddingRight: '4rem', + }, + '@media(max-width: 501px)': { + paddingLeft: '1rem', + paddingRight: '1rem', + }, + }, + borrowTablePadding: { + '@media(min-width: 600px)': { + paddingRight: '1rem', + }, + '@media(min-width: 900px)': { + paddingRight: '2rem', + }, + '@media(min-width: 1024px)': { + paddingLeft: '0.9375rem', + }, + '@media(min-width: 1200px)': { + paddingLeft: '0.875rem', + }, + }, + supplyTablePadding: { + '@media(min-width: 600px)': { + paddingRight: '1rem', + }, + '@media(min-width: 900px)': { + paddingRight: '2rem', + }, + '@media(min-width: 1024px)': { + paddingRight: '2rem', + }, + '@media(min-width: 1200px)': { + paddingRight: '3rem', + }, + }, + firstCell: { + width: '10%', + }, + secondCell: {}, + thirdCell: {}, + fourthCell: { + width: '30%', + }, + fifthCell: { + width: '15%', + right: '10px', + '@media(max-width: 1300px)': { + opacity: '1 !important', + }, + paddingLeft: '1px !important', + backgroundColor: '#ECF4FF' + }, + supplyButton: { + borderRadius: '8px', + marginRight: '25%', + marginLeft: '0%', + width: '80%', + }, + tableTitle2: { + color: '#000', + opacity: '0.87', + padding: ' 1.5rem 0 .5rem', + display: 'inline-block', + fontSize: '1.25rem', + fontWeight: '500', + lineHeight: '30px', + }, + tableTitle: { + color: '#000', + opacity: '0.87', + padding: ' 1.5rem 0 .5rem', + fontSize: '1.25rem', + fontWeight: '500', + lineHeight: '30px', + }, + emptyStateText: { + color: '#000', + fontSize: '1rem', + fontWeight: '400', + lineHeight: '30px', + letterSpacing: '0.005em', + '@media(min-width: 768px)': { + 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', + }, + }, + stickyCellLeft: { + '@media(max-width: 1300px)': { + position: 'sticky', + zIndex: 2, + left: 0, + opacity: '1 !important', + }, + backgroundColor: '#ECF4FF' + }, + stickyCellRight: { + '@media(max-width: 1300px)': { + position: 'sticky', + zIndex: 2, + right: 0, + opacity: '1 !important', + }, + backgroundColor: '#ECF4FF' + }, }); diff --git a/src/ui/src/components/DashboardModal/index.js b/src/ui/src/components/DashboardModal/index.js index b8bf38f6..b8baeef9 100644 --- a/src/ui/src/components/DashboardModal/index.js +++ b/src/ui/src/components/DashboardModal/index.js @@ -73,9 +73,10 @@ const DashboardModal = (props) => { errorText, pendingLimit, pendingLimitUsed, + tab, } = props; - const [tabValue, setTabValue] = useState('one'); + const [tabValue, setTabValue] = useState(tab); const [tokenValue, setTokenValue] = useState(''); const [limit, setLimit] = useState(''); const [limitUsed, setLimitUsed] = useState(''); diff --git a/src/ui/src/components/Switch/index.js b/src/ui/src/components/Switch/index.js index f7d9185f..6bf96c1b 100644 --- a/src/ui/src/components/Switch/index.js +++ b/src/ui/src/components/Switch/index.js @@ -1,91 +1,83 @@ // eslint-disable-next-line no-use-before-define -import * as React from 'react'; -import clsx from 'clsx'; +import React, { forwardRef } from 'react'; import { styled } from '@mui/system'; import { useSwitch } from '@mui/core/SwitchUnstyled'; +import MuiSwitch from '@mui/material/Switch'; -const BasicSwitchRoot = styled('span')(` - font-size: 0; - position: relative; - display: inline-block; - width: 40px; - height: 16px; - background: #E0E0E0; - border-radius: 16px; - cursor: pointer; +const CustomSwitch = styled( + forwardRef((props, ref) => ( + + )), +)(({ theme }) => ({ + width: 42, + height: 26, + padding: 0, + '& .MuiSwitch-switchBase': { + padding: 0, + margin: 2.9, + transitionDuration: '300ms', + transform: 'translateX(1px) scale(0.5)', + color: '#79747E', + '&.Mui-checked': { + padding: 0, + margin: 2, + width: '22px', + height: '22px', + transform: 'translateX(18px) scale(1)', + color: '#EADDFF', + '& + .MuiSwitch-track': { + border: '0px solid red', + backgroundColor: '#9F329F', + opacity: 1, + border: 0, + }, + '&.Mui-disabled': { + border: '6px solid #fff', + opacity: 0.5, + }, + }, + '&.Mui-focusVisible .MuiSwitch-thumb': {}, + '&.Mui-disabled + .MuiSwitch-thumb': {}, + }, + '& .MuiSwitch-thumb': { + boxSizing: 'border-box', + }, + '& .MuiSwitch-track': { + border: '2px solid #79747E', + borderRadius: 26 / 2, + backgroundColor: '#E6E0E9', + opacity: 1, + transition: theme.transitions.create(['background-color'], { + duration: 500, + }), + }, +})); - &.Switch-disabled { - opacity: 0.4; - cursor: not-allowed; - } - - &.Switch-checked { - background: #39E4B8; - } -`); - -const BasicSwitchInput = styled('input')(` - cursor: inherit; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - opacity: 0; - z-index: 1; - margin: 0; -`); - -const BasicSwitchThumb = styled('span')(` - display: block; - width: 12px; - height: 12px; - top: 1.8px; - left: 3px; - border-radius: 50%; - background-color: #FFF; - position: relative; - transition: all 200ms ease; - - &.Switch-focusVisible { - background-color: rgba(255,255,255,1); - box-shadow: 0 0 1px 8px rgba(0,0,0,0.25); - } - - &.Switch-checked { - left: 25px; - top: 1.8px; - background-color: #FFF; - } -`); - -function BasicSwitch(props) { - const { - getInputProps, checked, disabled, focusVisible - } = useSwitch(props); - - const stateClasses = { - 'Switch-checked': checked, - 'Switch-disabled': disabled, - 'Switch-focusVisible': focusVisible - }; +const BasicSwitch = forwardRef((props, ref) => { + const { getInputProps, checked, disabled } = useSwitch(props); return ( - - - - + ); -} +}); + +// Switch component export default function Switch(props) { const { data } = props; return (
- +
); } diff --git a/src/ui/src/reduxContent/market/actions.js b/src/ui/src/reduxContent/market/actions.js index bba6e5e5..5b48808c 100644 --- a/src/ui/src/reduxContent/market/actions.js +++ b/src/ui/src/reduxContent/market/actions.js @@ -40,6 +40,7 @@ export const allMarketAction = (account, markets) => (dispatch) => { .toFixed(4); token.marketSize = markets[token.assetType].supply.totalAmount.toString(); token.totalBorrowed = markets[token.assetType].borrow.totalAmount.toString(); + token.available = markets[token.assetType].available; token.supplyRate = markets[token.assetType].supply.rate.toString(); token.borrowRate = markets[token.assetType].borrow.rate.toString(); token.borrowRateFn = markets[token.assetType].borrow.rateFn; @@ -72,6 +73,7 @@ export const suppliedMarketAction = (markets) => (dispatch) => { logo, fLogo, usdPrice, + address, walletBalance, collateralFactor, supply, @@ -83,6 +85,7 @@ export const suppliedMarketAction = (markets) => (dispatch) => { logo, fLogo, usdPrice, + address, walletBalance, collateralFactor, ...supply, @@ -104,13 +107,14 @@ export const suppliedMarketAction = (markets) => (dispatch) => { export const borrowedMarketAction = (markets) => (dispatch) => { // eslint-disable-next-line object-curly-newline const borrowedTokens = markets.map( - ({ assetType, banner, title, name, logo, usdPrice, walletBalance, collateralFactor, borrow }) => ({ + ({ assetType, banner, title, name, logo, address, usdPrice, walletBalance, collateralFactor, borrow }) => ({ assetType, banner, title, name, logo, usdPrice, + address, walletBalance, collateralFactor, ...borrow, diff --git a/src/util/src/TezosLendingPlatform.ts b/src/util/src/TezosLendingPlatform.ts index b70233ba..4767ed74 100644 --- a/src/util/src/TezosLendingPlatform.ts +++ b/src/util/src/TezosLendingPlatform.ts @@ -96,7 +96,10 @@ export namespace TezosLendingPlatform { rate: FToken.getBorrowRateApy(fToken, rateModel), rateFn: FToken.getDynamicBorrowRateApyFn(fToken, rateModel), }; - + const available = FToken.applyExchangeRate( + supply.totalAmount.minus(borrow.totalAmount).minus(fToken.totalReserves), + fToken); + return { currentPrice: price, address: address, @@ -105,6 +108,7 @@ export namespace TezosLendingPlatform { cashUsd: comptroller.markets[underlying.assetType].price.multiply(FToken.GetCash(fToken)), supply: supply, borrow: borrow, + available: available, dailyInterestPaid: bigInt('0'), // TODO: parse this reserves: fToken.totalReserves, reserveFactor: fToken.reserveFactorMantissa.toJSNumber(), diff --git a/src/util/src/enum.ts b/src/util/src/enum.ts index 4cf1118a..b787eed1 100644 --- a/src/util/src/enum.ts +++ b/src/util/src/enum.ts @@ -12,11 +12,11 @@ export enum AssetType { WTZ = "WTZ", OXTZ = "OXTZ", USDT = "USDT", - TZBTC= "TZBTC" + TZBTC = "TZBTC" } export enum TokenStandard { XTZ = 0, FA12, FA2 -} \ No newline at end of file +} diff --git a/src/util/src/types.ts b/src/util/src/types.ts index 02559e2d..c889a8bf 100644 --- a/src/util/src/types.ts +++ b/src/util/src/types.ts @@ -175,6 +175,7 @@ export interface Market { cashUsd: bigInt.BigInteger; supply: MarketData; borrow: MarketData; + available: BigNumber; dailyInterestPaid: bigInt.BigInteger; reserves: bigInt.BigInteger; currentPrice: bigInt.BigInteger;