Fixes slippage percentage

packages/synapse-interface/components/ExchangeRateInfo.tsx → packages/synapse-interface/components/SwapExchangeRateInfo.tsx

@@ -1,8 +1,5 @@
-import { useState, useMemo, useEffect } from 'react'
+import { useMemo } from 'react'
 import { CHAINS_BY_ID } from '@constants/chains'
-import * as CHAINS from '@constants/chains/master'
-import { useCoingeckoPrice } from '@hooks/useCoingeckoPrice'
-import { useGasDropAmount } from '@/utils/hooks/useGasDropAmount'
 import Image from 'next/image'
 
 import { Token } from '@/utils/types'
@@ -11,22 +8,17 @@ import {
   formatBigIntToString,
 } from '@/utils/bigint/format'
 
-const ExchangeRateInfo = ({
+const SwapExchangeRateInfo = ({
   fromAmount,
   toToken,
   exchangeRate,
   toChainId,
-  showGasDrop,
 }: {
   fromAmount: bigint
   toToken: Token
   exchangeRate: bigint
   toChainId: number
-  showGasDrop: boolean
 }) => {
-  const [gasDropChainId, setGasDropChainId] = useState<number>(null)
-  const { gasDrop: gasDropAmount, loading } = useGasDropAmount(toChainId)
-
   const safeExchangeRate = useMemo(() => exchangeRate ?? 0n, [exchangeRate]) // todo clean
   const safeFromAmount = useMemo(() => fromAmount ?? 0n, [fromAmount]) // todo clean
   const formattedExchangeRate = formatBigIntToString(safeExchangeRate, 18, 5)
@@ -45,39 +37,12 @@ const ExchangeRateInfo = ({
     }
   }, [numExchangeRate])
 
-  const isGasDropped = useMemo(() => {
-    if (gasDropAmount) {
-      return gasDropAmount.gt(0)
-    }
-  }, [gasDropAmount])
-
-  useEffect(() => {
-    setGasDropChainId(toChainId)
-  }, [toChainId, isGasDropped])
-
-  const memoizedGasDropLabel = useMemo(() => {
-    if (!isGasDropped || !(toChainId == gasDropChainId)) return null
-    if (loading) return null
-    return <GasDropLabel gasDropAmount={gasDropAmount} toChainId={toChainId} />
-  }, [toChainId, gasDropChainId, isGasDropped, loading])
-
   const expectedToChain = useMemo(() => {
     return toChainId && <ChainInfoLabel chainId={toChainId} />
   }, [toChainId])
 
   return (
     <div className="py-3.5 px-1 space-y-2 text-xs md:text-base lg:text-base md:px-6">
-      {showGasDrop && (
-        <div
-          className={
-            isGasDropped
-              ? 'flex items-center justify-between'
-              : 'flex justify-end'
-          }
-        >
-          {memoizedGasDropLabel}
-        </div>
-      )}
       <div className="flex justify-between">
         <div className="flex space-x-2 text-[#88818C]">
           <p>Expected Price on</p>
@@ -106,50 +71,6 @@ const ExchangeRateInfo = ({
   )
 }
 
-const GasDropLabel = ({
-  gasDropAmount,
-  toChainId,
-}: {
-  gasDropAmount: bigint
-  toChainId: number
-}) => {
-  let decimalsToDisplay
-  const symbol = CHAINS_BY_ID[toChainId].nativeCurrency.symbol
-
-  if ([CHAINS.FANTOM.id].includes(toChainId)) {
-    decimalsToDisplay = 2
-  } else if (
-    [CHAINS.BNB.id, CHAINS.AVALANCHE.id, CHAINS.BOBA.id].includes(toChainId)
-  ) {
-    decimalsToDisplay = 3
-  } else {
-    decimalsToDisplay = 4
-  }
-
-  const formattedGasDropAmount = formatBigIntToString(
-    gasDropAmount,
-    18,
-    decimalsToDisplay
-  )
-
-  const airdropInDollars = getAirdropInDollars(symbol, formattedGasDropAmount)
-
-  return (
-    <div className="flex justify-between text-[#88818C]">
-      <span className="text-[#88818C]">
-        Will also receive {formattedGasDropAmount}{' '}
-      </span>
-      <span className="ml-1 font-medium text-white">
-        {' '}
-        {symbol}{' '}
-        <span className="text-[#88818C] font-normal">
-          {airdropInDollars && `($${airdropInDollars})`}
-        </span>
-      </span>
-    </div>
-  )
-}
-
 const ChainInfoLabel = ({ chainId }: { chainId: number }) => {
   const chain = CHAINS_BY_ID[chainId]
   return chain ? (
@@ -166,18 +87,4 @@ const ChainInfoLabel = ({ chainId }: { chainId: number }) => {
   ) : null
 }
 
-const getAirdropInDollars = (
-  symbol: string,
-  formattedGasDropAmount: string
-) => {
-  const price = useCoingeckoPrice(symbol)
-
-  if (price) {
-    const airdropInDollars = parseFloat(formattedGasDropAmount) * price
-
-    return airdropInDollars.toFixed(2)
-  } else {
-    return undefined
-  }
-}
-export default ExchangeRateInfo
+export default SwapExchangeRateInfo

packages/synapse-interface/pages/swap/SwapCard.tsx

@@ -5,7 +5,7 @@ import { getWalletClient, switchNetwork } from '@wagmi/core'
 import { Address } from 'wagmi'
 import { sortByTokenBalance, sortByVisibilityRank } from '@utils/sortTokens'
 import { calculateExchangeRate } from '@utils/calculateExchangeRate'
-import ExchangeRateInfo from '@components/ExchangeRateInfo'
+import SwapExchangeRateInfo from '@components/SwapExchangeRateInfo'
 import { TransactionButton } from '@/components/buttons/TransactionButton'
 import BridgeInputContainer from '../../components/input/TokenAmountInput/index'
 import { approveToken } from '@/utils/approveToken'
@@ -830,12 +830,11 @@ const SwapCard = ({
           />
         </Grid>
 
-        <ExchangeRateInfo
+        <SwapExchangeRateInfo
           fromAmount={fromInput.bigInt}
           toToken={toToken}
           exchangeRate={swapQuote.exchangeRate}
           toChainId={connectedChainId}
-          showGasDrop={false}
         />
         <div className="px-2 py-2 md:px-0 md:py-4">{ActionButton}</div>
       </div>

packages/synapse-interface/utils/bigint/format.ts

@@ -66,7 +66,7 @@ export const formatBigIntToPercentString = (
     )
 
     // Convert the bigint to a floating-point number, preserving the requested number of decimal places
-    const num = Number(bn) / Number(conversionFactor)
+    const num = (Number(bn) * 100) / Number(conversionFactor)
 
     // Format the number as a percentage string
     return `${num.toFixed(decimalPlaces)}%`