Skip to content

Commit

Permalink
fix: ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@rhlsthrm
rhlsthrm committed Oct 11, 2024
1 parent e0e059b commit a5b2e16
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 22 deletions.
103 changes: 87 additions & 16 deletions packages/ui/app/_components/dashboards/CollateralSwapPopup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -78,6 +79,8 @@ ChartJS.register(
Legend
);

const DEFAULT_SLIPPAGE_TOL = 0.005;

export default function CollateralSwapPopup({
swapRef,
toggler,
Expand All @@ -93,13 +96,14 @@ export default function CollateralSwapPopup({
const [conversionRate, setConversionRate] = useState<string>('100');
const [maxTokens, setMaxTokens] = useState<IBal>({
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);
Expand All @@ -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(
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -415,13 +424,14 @@ export default function CollateralSwapPopup({
<MaxDeposit
headerText={'Wallet Balance'}
amount={swapFromAmountUnderlying}
tokenName={swappedFromAsset?.underlyingSymbol.toLowerCase()}
token={swappedFromAsset?.cToken}
tokenName={swappedFromAsset.underlyingSymbol.toLowerCase()}
token={swappedFromAsset.cToken}
handleInput={(val?: string) => setSwapFromAmount(val as string)}
// max="0"
chain={+chain}
setMaxTokenForUtilization={setMaxTokens}
exchangeRate={swappedFromAsset?.exchangeRate}
exchangeRate={swappedFromAsset.exchangeRate}
footerText={'$' + lifiQuote?.estimate?.fromAmountUSD}
/>
<SwapTo
headerText={'Swap To'}
Expand All @@ -444,6 +454,7 @@ export default function CollateralSwapPopup({
)
.map((asset) => asset.underlyingSymbol)
}
footerText={'$' + lifiQuote?.estimate?.toAmountUSD}
/>
<div className={`my-6 w-full`}>
<SliderComponent
Expand All @@ -464,17 +475,75 @@ export default function CollateralSwapPopup({
<div className="h-[2px] w-full mx-auto bg-white/10 my-2.5 " />
<div className={` text-xs flex items-center justify-between w-full`}>
<span className=" text-white/50 ">HEALTH FACTOR</span>
<span className=" ">69</span>
<span className=" ">{healthFactor ?? '-'}</span>
</div>
<div className="h-[2px] w-full mx-auto bg-white/10 my-2.5 " />
<div className={` text-xs flex items-center justify-between w-full`}>
<span className=" text-white/50 ">MARKET SUPPLY BALANCE</span>
<span className=" ">234 {'->'} 648</span>
<span className=" text-white/50 ">
MARKET SUPPLY BALANCE {swappedFromAsset.underlyingSymbol}
</span>
<span className=" ">
{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
})}
</span>
</div>
<div className={` text-xs flex items-center justify-between w-full`}>
<span className=" text-white/50 ">COLLATERAL FACTOR</span>
<span className=" ">545 {'->'} 34</span>
{swappedToAsset && (
<>
<span className=" text-white/50 ">
MARKET SUPPLY BALANCE {swappedToAsset.underlyingSymbol}
</span>
<span className=" ">
{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
})}
</span>
</>
)}
</div>
{swappedToAsset && (
<div className={` text-xs flex items-center justify-between w-full`}>
<span className=" text-white/50 ">COLLATERAL FACTOR</span>
<span className=" ">
{Number(formatEther(swappedFromAsset.collateralFactor)) * 100}%{' '}
{'->'}{' '}
{Number(formatEther(swappedToAsset.collateralFactor)) * 100}%
</span>
</div>
)}
<div className="h-[2px] w-full mx-auto bg-white/10 my-2.5 " />
<div className={`w-full flex items-center justify-center gap-5`}>
<div className={` w-14 h-14`}>
Expand Down Expand Up @@ -530,7 +599,9 @@ export default function CollateralSwapPopup({
<span className=" text-white/50 ">Slippage</span>
<span className=" ">0.2%</span>
</div> */}
<p className={`text-xs mb-3`}>0.01% Slippage Tolerance</p>
<p className={`text-xs mb-3`}>
{DEFAULT_SLIPPAGE_TOL * 100}% Slippage Tolerance
</p>
{transactionSteps.length > 0 ? (
<TransactionStepsHandler
chainId={chainId}
Expand Down
14 changes: 10 additions & 4 deletions packages/ui/app/_components/dashboards/MaxDeposit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ interface IMaxDeposit {
tokenArr?: string[];
setMaxTokenForUtilization?: Dispatch<SetStateAction<IBal>>;
exchangeRate?: bigint;
footerText?: string;
}

export interface IBal {
Expand All @@ -42,7 +43,8 @@ function MaxDeposit({
tokenSelector = false,
tokenArr,
setMaxTokenForUtilization,
exchangeRate
exchangeRate,
footerText
}: IMaxDeposit) {
const [bal, setBal] = useState<IBal>();

Expand Down Expand Up @@ -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
)
Expand Down Expand Up @@ -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
)
Expand Down Expand Up @@ -206,6 +207,11 @@ function MaxDeposit({
)}
</div>
</div>
<div
className={`flex w-full mt-2 items-center justify-between text-[11px] text-white/40`}
>
<span>{footerText}</span>
</div>
</>
);
}
Expand Down
11 changes: 9 additions & 2 deletions packages/ui/app/_components/dashboards/SwapTo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ interface ISwapTo {
tokenSelector?: boolean;
tokenArr?: string[];
isLoading: boolean;
footerText?: string;
}

export interface IBal {
Expand All @@ -27,7 +28,8 @@ function SwapTo({
tokenName = 'eth',
tokenSelector = false,
tokenArr,
isLoading
isLoading,
footerText
}: ISwapTo) {
const newRef = useRef(null!);
const [open, setOpen] = useState<boolean>(false);
Expand All @@ -53,7 +55,7 @@ function SwapTo({
<span>{headerText}</span>
</div>
<div
className={`flex max-w-full mt-2 items-center justify-between text-md gap-x-1 `}
className={`flex max-w-full mt-0 items-center justify-between text-md gap-x-1 `}
>
<input
className={`focus:outline-none amount-field font-bold bg-transparent disabled:text-white/60 flex-auto flex w-full trucnate`}
Expand Down Expand Up @@ -90,6 +92,11 @@ function SwapTo({
)}
</div>
</div>
<div
className={`flex w-full items-center justify-between text-[11px] text-white/40`}
>
<span>{footerText}</span>
</div>
</>
);
}
Expand Down

0 comments on commit a5b2e16

Please sign in to comment.