Merge pull request #121 from pendulum-chain/118-bugfix-calculate-myko…

…bo-fee-correctly Fix offramping fee calculation
pendulum-chain · Aug 27, 2024 · ecfbc9b · ecfbc9b
2 parents 6660a53 + 6f41b41
commit ecfbc9b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git 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<CollapseProps> = ({ fromAmount, toAmount, toTokenSymbol }) => {
+export const FeeCollapse: FC<CollapseProps> = ({ 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<CollapseProps> = ({ fromAmount, toAmount, toTokenSy
     <ChevronDownIcon className="w-8 text-blue-700" />
   );
 
-  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
@@ -37,6 +37,7 @@ export interface OutputTokenDetails {
   minWithdrawalAmountRaw: string;
   maxWithdrawalAmountRaw: string;
   erc20WrapperAddress: string;
+  offrampFeesBasisPoints: number;
 }
 export const INPUT_TOKEN_CONFIG: Record<InputTokenType, InputTokenDetails> = {
   usdc: {
@@ -86,6 +87,7 @@ export const OUTPUT_TOKEN_CONFIG: Record<OutputTokenType, OutputTokenDetails> =
     erc20WrapperAddress: '6fA9DRKJ12oTXfSAU7ZZGZ9gEQ92YnyRXeJzW1wXekPzeXZC',
     minWithdrawalAmountRaw: '10000000000000',
     maxWithdrawalAmountRaw: '10000000000000000',
+    offrampFeesBasisPoints: 125,
   },
 };
 

diff --git a/src/pages/swap/index.tsx b/src/pages/swap/index.tsx
@@ -252,7 +252,7 @@ export const SwapPage = () => {
         <FeeCollapse
           fromAmount={fromAmount?.toString()}
           toAmount={tokenOutData.data?.amountOut.preciseString}
-          toTokenSymbol={toToken.fiat.symbol}
+          toToken={toToken}
         />
         <section className="flex items-center justify-center w-full mt-5">
           <BenefitsList amount={fromAmount} currency={from} />