diff --git a/src/components/FeeCollapse/index.tsx b/src/components/FeeCollapse/index.tsx index 8d3864cf..01c73e28 100644 --- a/src/components/FeeCollapse/index.tsx +++ b/src/components/FeeCollapse/index.tsx @@ -4,13 +4,16 @@ import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/20/solid'; import LocalGasStationIcon from '@mui/icons-material/LocalGasStation'; import Big from 'big.js'; import { roundDownToSignificantDecimals } from '../../helpers/parseNumbers'; +import { OutputTokenDetails } from '../../constants/tokenConfig'; import { useEventsContext } from '../../contexts/events'; const FEES_RATE = 0.05; // 0.5% fee rate -function calculateTotalReceive(toAmount: string): string { - const totalReceive = Number(toAmount) * (1 - FEES_RATE); - return roundDownToSignificantDecimals(new Big(totalReceive || 0), 2).toString(); +function calculateTotalReceive(toAmount: string, outputToken: OutputTokenDetails): string { + const feeBasisPoints = outputToken.offrampFeesBasisPoints; + const fees = Big(toAmount).mul(feeBasisPoints).div(10000).round(2, 1); + const totalReceive = Big(toAmount).minus(fees).toFixed(2, 0); + return totalReceive; } function calculateFeesUSD(fromAmount: string): string { @@ -22,12 +25,13 @@ function calculateFeesUSD(fromAmount: string): string { interface CollapseProps { fromAmount?: string; toAmount?: string; - toTokenSymbol: string; + toToken: OutputTokenDetails; } -export const FeeCollapse: FC = ({ fromAmount, toAmount, toTokenSymbol }) => { +export const FeeCollapse: FC = ({ fromAmount, toAmount, toToken }) => { const [isOpen, setIsOpen] = useState(false); const { trackEvent } = useEventsContext(); + const toTokenSymbol = toToken.fiat.symbol; const toggleIsOpen = () => { trackEvent({ event: 'click_details' }); @@ -40,7 +44,7 @@ export const FeeCollapse: FC = ({ fromAmount, toAmount, toTokenSy ); - const totalReceive = calculateTotalReceive(toAmount || '0'); + const totalReceive = calculateTotalReceive(toAmount || '0', toToken); const feesCost = calculateFeesUSD(fromAmount || '0'); return ( diff --git a/src/constants/tokenConfig.ts b/src/constants/tokenConfig.ts index 47e4e2d8..a3b12055 100644 --- a/src/constants/tokenConfig.ts +++ b/src/constants/tokenConfig.ts @@ -37,6 +37,7 @@ export interface OutputTokenDetails { minWithdrawalAmountRaw: string; maxWithdrawalAmountRaw: string; erc20WrapperAddress: string; + offrampFeesBasisPoints: number; } export const INPUT_TOKEN_CONFIG: Record = { usdc: { @@ -86,6 +87,7 @@ export const OUTPUT_TOKEN_CONFIG: Record = erc20WrapperAddress: '6fA9DRKJ12oTXfSAU7ZZGZ9gEQ92YnyRXeJzW1wXekPzeXZC', minWithdrawalAmountRaw: '10000000000000', maxWithdrawalAmountRaw: '10000000000000000', + offrampFeesBasisPoints: 125, }, }; diff --git a/src/pages/swap/index.tsx b/src/pages/swap/index.tsx index 7b706306..27fde8c0 100644 --- a/src/pages/swap/index.tsx +++ b/src/pages/swap/index.tsx @@ -252,7 +252,7 @@ export const SwapPage = () => {