-
Notifications
You must be signed in to change notification settings - Fork 10
/
Slippage.tsx
37 lines (33 loc) · 1.35 KB
/
Slippage.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import { FC } from 'react';
import { SafeDecimal } from 'libs/safedecimal';
import { cn, sanitizeNumber } from 'utils/helpers';
import { useFiatCurrency } from 'hooks/useFiatCurrency';
import { Tooltip } from '../tooltip/Tooltip';
import { ReactComponent as IconWarning } from 'assets/icons/warning.svg';
interface Props {
slippage: SafeDecimal;
}
const slippageColor = (slippage: SafeDecimal) => {
if (slippage?.gt(0)) return 'text-primary';
if (slippage?.isZero()) return 'text-error';
if (slippage?.lt(-3)) return 'text-error';
return 'text-white/80';
};
export const Slippage: FC<Props> = ({ slippage }) => {
const { selectedFiatCurrency } = useFiatCurrency();
const slippageValue = sanitizeNumber(slippage.toString(), 2);
const textColor = slippageColor(slippage);
return (
<Tooltip
element={`The slippage is calculated based on the ${selectedFiatCurrency} value difference between the selected source and target tokens.`}
>
<span className={cn('flex flex-1 items-center gap-5', textColor)}>
{slippage?.eq(0) && <IconWarning className="size-12" />}
{slippage?.gt(0) && <>(+{slippageValue}%)</>}
{slippage?.lt(0) && <>(-{slippageValue}%)</>}
{slippage?.eq(0) && <>Notice: price & slippage are unknown</>}
{slippage.lt(-3) && <IconWarning className="size-12" />}
</span>
</Tooltip>
);
};