BorrowInfo.tsx
1 import { valueToBigNumber } from '@aave/math-utils'; 2 import { Trans } from '@lingui/macro'; 3 import { Box, Typography } from '@mui/material'; 4 import { BigNumber } from 'bignumber.js'; 5 import { CapsCircularStatus } from 'src/components/caps/CapsCircularStatus'; 6 import { IncentivesButton } from 'src/components/incentives/IncentivesButton'; 7 import { VariableAPYTooltip } from 'src/components/infoTooltips/VariableAPYTooltip'; 8 import { FormattedNumber } from 'src/components/primitives/FormattedNumber'; 9 import { Link } from 'src/components/primitives/Link'; 10 import { ReserveSubheader } from 'src/components/ReserveSubheader'; 11 import { TextWithTooltip } from 'src/components/TextWithTooltip'; 12 import { ComputedReserveData } from 'src/hooks/app-data-provider/useAppDataProvider'; 13 import { AssetCapHookData } from 'src/hooks/useAssetCaps'; 14 import { MarketDataType, NetworkConfig } from 'src/utils/marketsAndNetworksConfig'; 15 import { GENERAL } from 'src/utils/mixPanelEvents'; 16 17 import { ApyGraphContainer } from './graphs/ApyGraphContainer'; 18 import { ReserveFactorOverview } from './ReserveFactorOverview'; 19 import { PanelItem } from './ReservePanels'; 20 21 interface BorrowInfoProps { 22 reserve: ComputedReserveData; 23 currentMarketData: MarketDataType; 24 currentNetworkConfig: NetworkConfig; 25 renderCharts: boolean; 26 showBorrowCapStatus: boolean; 27 borrowCap: AssetCapHookData; 28 } 29 30 export const BorrowInfo = ({ 31 reserve, 32 currentMarketData, 33 currentNetworkConfig, 34 renderCharts, 35 showBorrowCapStatus, 36 borrowCap, 37 }: BorrowInfoProps) => { 38 const maxAvailableToBorrow = BigNumber.max( 39 valueToBigNumber(reserve.borrowCap).minus(valueToBigNumber(reserve.totalDebt)), 40 0 41 ).toNumber(); 42 43 const maxAvailableToBorrowUSD = BigNumber.max( 44 valueToBigNumber(reserve.borrowCapUSD).minus(valueToBigNumber(reserve.totalDebtUSD)), 45 0 46 ).toNumber(); 47 48 return ( 49 <Box sx={{ flexGrow: 1, minWidth: 0, maxWidth: '100%', width: '100%' }}> 50 <Box 51 sx={{ 52 display: 'flex', 53 alignItems: 'center', 54 flexWrap: 'wrap', 55 }} 56 > 57 {showBorrowCapStatus ? ( 58 // With a borrow cap 59 <> 60 <CapsCircularStatus 61 value={borrowCap.percentUsed} 62 tooltipContent={ 63 <> 64 <Trans> 65 Maximum amount available to borrow is{' '} 66 <FormattedNumber value={maxAvailableToBorrow} variant="secondary12" />{' '} 67 {reserve.symbol} ( 68 <FormattedNumber 69 value={maxAvailableToBorrowUSD} 70 variant="secondary12" 71 symbol="USD" 72 /> 73 ). 74 </Trans> 75 </> 76 } 77 /> 78 <PanelItem 79 title={ 80 <Box display="flex" alignItems="center"> 81 <Trans>Total borrowed</Trans> 82 <TextWithTooltip 83 event={{ 84 eventName: GENERAL.TOOL_TIP, 85 eventParams: { 86 tooltip: 'Total borrowed', 87 asset: reserve.underlyingAsset, 88 assetName: reserve.name, 89 }, 90 }} 91 > 92 <> 93 <Trans> 94 Borrowing of this asset is limited to a certain amount to minimize liquidity 95 pool insolvency. 96 </Trans>{' '} 97 <Link 98 href="https://docs.aave.com/developers/whats-new/supply-borrow-caps" 99 underline="always" 100 > 101 <Trans>Learn more</Trans> 102 </Link> 103 </> 104 </TextWithTooltip> 105 </Box> 106 } 107 > 108 <Box> 109 <FormattedNumber value={reserve.totalDebt} variant="main16" /> 110 <Typography 111 component="span" 112 color="text.primary" 113 variant="secondary16" 114 sx={{ display: 'inline-block', mx: 1 }} 115 > 116 <Trans>of</Trans> 117 </Typography> 118 <FormattedNumber value={reserve.borrowCap} variant="main16" /> 119 </Box> 120 <Box> 121 <ReserveSubheader value={reserve.totalDebtUSD} /> 122 <Typography 123 component="span" 124 color="text.primary" 125 variant="secondary16" 126 sx={{ display: 'inline-block', mx: 1 }} 127 > 128 <Trans>of</Trans> 129 </Typography> 130 <ReserveSubheader value={reserve.borrowCapUSD} /> 131 </Box> 132 </PanelItem> 133 </> 134 ) : ( 135 // Without a borrow cap 136 <PanelItem 137 title={ 138 <Box display="flex" alignItems="center"> 139 <Trans>Total borrowed</Trans> 140 </Box> 141 } 142 > 143 <FormattedNumber value={reserve.totalDebt} variant="main16" /> 144 <ReserveSubheader value={reserve.totalDebtUSD} /> 145 </PanelItem> 146 )} 147 <PanelItem 148 title={ 149 <VariableAPYTooltip 150 event={{ 151 eventName: GENERAL.TOOL_TIP, 152 eventParams: { 153 tooltip: 'APY, variable', 154 asset: reserve.underlyingAsset, 155 assetName: reserve.name, 156 }, 157 }} 158 text={<Trans>APY, variable</Trans>} 159 key="APY_res_variable_type" 160 variant="description" 161 /> 162 } 163 > 164 <FormattedNumber value={reserve.variableBorrowAPY} percent variant="main16" /> 165 <IncentivesButton 166 symbol={reserve.symbol} 167 incentives={reserve.vIncentivesData} 168 displayBlank={true} 169 /> 170 </PanelItem> 171 {reserve.borrowCapUSD && reserve.borrowCapUSD !== '0' && ( 172 <PanelItem title={<Trans>Borrow cap</Trans>}> 173 <FormattedNumber value={reserve.borrowCap} variant="main16" /> 174 <ReserveSubheader value={reserve.borrowCapUSD} /> 175 </PanelItem> 176 )} 177 </Box> 178 {renderCharts && ( 179 <ApyGraphContainer 180 graphKey="borrow" 181 reserve={reserve} 182 currentMarketData={currentMarketData} 183 /> 184 )} 185 <Box 186 sx={{ display: 'inline-flex', alignItems: 'center', pt: '42px', pb: '12px' }} 187 paddingTop={'42px'} 188 > 189 <Typography variant="subheader1" color="text.main"> 190 <Trans>Collector Info</Trans> 191 </Typography> 192 </Box> 193 {currentMarketData.addresses.COLLECTOR && ( 194 <ReserveFactorOverview 195 collectorContract={currentMarketData.addresses.COLLECTOR} 196 explorerLinkBuilder={currentNetworkConfig.explorerLinkBuilder} 197 reserveFactor={reserve.reserveFactor} 198 reserveName={reserve.name} 199 reserveAsset={reserve.underlyingAsset} 200 /> 201 )} 202 </Box> 203 ); 204 };