From a5b2e16f219519c9bc30e8936626d4eb36d2a9b7 Mon Sep 17 00:00:00 2001 From: Rahul Sethuram Date: Fri, 11 Oct 2024 14:08:09 +0400 Subject: [PATCH] fix: ui --- .../dashboards/CollateralSwapPopup.tsx | 103 +++++++++++++++--- .../app/_components/dashboards/MaxDeposit.tsx | 14 ++- .../ui/app/_components/dashboards/SwapTo.tsx | 11 +- 3 files changed, 106 insertions(+), 22 deletions(-) diff --git a/packages/ui/app/_components/dashboards/CollateralSwapPopup.tsx b/packages/ui/app/_components/dashboards/CollateralSwapPopup.tsx index 967a0b3bd..887d54471 100644 --- a/packages/ui/app/_components/dashboards/CollateralSwapPopup.tsx +++ b/packages/ui/app/_components/dashboards/CollateralSwapPopup.tsx @@ -45,6 +45,7 @@ import type { IBal } from '@ui/app/_components/stake/MaxDeposit'; import { donutoptions, getDonutData } from '@ui/app/_constants/mock'; import { INFO_MESSAGES } from '@ui/constants/index'; import { useMultiIonic } from '@ui/context/MultiIonicContext'; +import { useHealthFactor } from '@ui/hooks/pools/useHealthFactor'; import { useDebounce } from '@ui/hooks/useDebounce'; import { useSupplyCap } from '@ui/hooks/useSupplyCap'; import type { MarketData } from '@ui/types/TokensDataMap'; @@ -78,6 +79,8 @@ ChartJS.register( Legend ); +const DEFAULT_SLIPPAGE_TOL = 0.005; + export default function CollateralSwapPopup({ swapRef, toggler, @@ -93,13 +96,14 @@ export default function CollateralSwapPopup({ const [conversionRate, setConversionRate] = useState('100'); const [maxTokens, setMaxTokens] = useState({ value: BigInt(0), - decimals: 18 + decimals: swappedFromAsset.underlyingDecimals }); const chainId = useChainId(); const searchParams = useSearchParams(); const querychain = searchParams.get('chain'); const chain = querychain ? querychain : String(chainId); const queryToken = searchParams.get('token'); + const { data: healthFactor } = useHealthFactor(comptroller, +chain); const { getSdk, currentSdk, address } = useMultiIonic(); const sdk = getSdk(+chain); @@ -113,11 +117,15 @@ export default function CollateralSwapPopup({ const swapFromAmountUnderlying = useMemo(() => { if (!swapFromAmount) return '0'; const decimals = swappedFromAsset?.underlyingDecimals ?? 18; - return formatUnits( - (parseUnits(swapFromAmount, decimals) * swappedFromAsset.exchangeRate) / - 10n ** BigInt(decimals), - decimals - ); + return Number( + formatUnits( + (parseUnits(swapFromAmount, decimals) * swappedFromAsset.exchangeRate) / + 10n ** BigInt(18), + decimals + ) + ).toLocaleString('en-US', { + maximumFractionDigits: 3 + }); }, [swapFromAmount, swappedFromAsset]); const debouncedSwapFromAmountUnderlying = useDebounce( @@ -219,7 +227,8 @@ export default function CollateralSwapPopup({ fromAddress: collateralSwapContract.address, skipSimulation: true, integrator: 'ionic', - fee: '0.005' + fee: '0.005', + slippage: DEFAULT_SLIPPAGE_TOL }; try { setIsLoadingLifiQuote(true); @@ -415,13 +424,14 @@ export default function CollateralSwapPopup({ setSwapFromAmount(val as string)} // max="0" chain={+chain} setMaxTokenForUtilization={setMaxTokens} - exchangeRate={swappedFromAsset?.exchangeRate} + exchangeRate={swappedFromAsset.exchangeRate} + footerText={'$' + lifiQuote?.estimate?.fromAmountUSD} /> asset.underlyingSymbol) } + footerText={'$' + lifiQuote?.estimate?.toAmountUSD} />
HEALTH FACTOR - 69 + {healthFactor ?? '-'}
- MARKET SUPPLY BALANCE - 234 {'->'} 648 + + MARKET SUPPLY BALANCE {swappedFromAsset.underlyingSymbol} + + + {Number( + formatUnits( + swappedFromAsset.supplyBalance, + swappedFromAsset.underlyingDecimals + ) + ).toLocaleString('en-US', { + maximumFractionDigits: 2 + })}{' '} + {'->'}{' '} + {Number( + formatUnits( + swappedFromAsset.supplyBalance - + parseUnits( + swapFromAmountUnderlying ?? '0', + swappedFromAsset.underlyingDecimals + ), + swappedFromAsset.underlyingDecimals + ) + ).toLocaleString('en-US', { + maximumFractionDigits: 2 + })} +
- COLLATERAL FACTOR - 545 {'->'} 34 + {swappedToAsset && ( + <> + + MARKET SUPPLY BALANCE {swappedToAsset.underlyingSymbol} + + + {Number( + formatUnits( + swappedToAsset.supplyBalance, + swappedToAsset.underlyingDecimals + ) + ).toLocaleString('en-US', { + maximumFractionDigits: 2 + })}{' '} + {'->'}{' '} + {Number( + formatUnits( + swappedToAsset.supplyBalance + BigInt(swapToAmount ?? '0'), + swappedToAsset.underlyingDecimals + ) + ).toLocaleString('en-US', { + maximumFractionDigits: 2 + })} + + + )}
+ {swappedToAsset && ( +
+ COLLATERAL FACTOR + + {Number(formatEther(swappedFromAsset.collateralFactor)) * 100}%{' '} + {'->'}{' '} + {Number(formatEther(swappedToAsset.collateralFactor)) * 100}% + +
+ )}
@@ -530,7 +599,9 @@ export default function CollateralSwapPopup({ Slippage 0.2%
*/} -

0.01% Slippage Tolerance

+

+ {DEFAULT_SLIPPAGE_TOL * 100}% Slippage Tolerance +

{transactionSteps.length > 0 ? ( >; exchangeRate?: bigint; + footerText?: string; } export interface IBal { @@ -42,7 +43,8 @@ function MaxDeposit({ tokenSelector = false, tokenArr, setMaxTokenForUtilization, - exchangeRate + exchangeRate, + footerText }: IMaxDeposit) { const [bal, setBal] = useState(); @@ -127,7 +129,7 @@ function MaxDeposit({ ? parseFloat( formatUnits( exchangeRate - ? (bal?.value * exchangeRate) / 10n ** BigInt(bal?.decimals) + ? (bal?.value * exchangeRate) / 10n ** BigInt(18) : bal?.value, bal?.decimals ) @@ -165,8 +167,7 @@ function MaxDeposit({ parseFloat( formatUnits( exchangeRate - ? (bal?.value * exchangeRate) / - 10n ** BigInt(bal?.decimals) + ? (bal?.value * exchangeRate) / 10n ** BigInt(18) : bal?.value, bal?.decimals ) @@ -206,6 +207,11 @@ function MaxDeposit({ )}
+
+ {footerText} +
); } diff --git a/packages/ui/app/_components/dashboards/SwapTo.tsx b/packages/ui/app/_components/dashboards/SwapTo.tsx index a0079d505..719d5348c 100644 --- a/packages/ui/app/_components/dashboards/SwapTo.tsx +++ b/packages/ui/app/_components/dashboards/SwapTo.tsx @@ -14,6 +14,7 @@ interface ISwapTo { tokenSelector?: boolean; tokenArr?: string[]; isLoading: boolean; + footerText?: string; } export interface IBal { @@ -27,7 +28,8 @@ function SwapTo({ tokenName = 'eth', tokenSelector = false, tokenArr, - isLoading + isLoading, + footerText }: ISwapTo) { const newRef = useRef(null!); const [open, setOpen] = useState(false); @@ -53,7 +55,7 @@ function SwapTo({ {headerText}
+
+ {footerText} +
); }