fix: refactor, use and export calcPriceImpact function (#307)

Co-authored-by: Eugene Chybisov <[email protected]>

packages/widget/src/components/Token/Token.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { useChain } from '../../hooks/useChain.js';
 import { useToken } from '../../hooks/useToken.js';
 import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js';
+import { getPriceImpact } from '../../utils/getPriceImpact.js';
 import { AvatarBadgedSkeleton } from '../Avatar/Avatar.js';
 import { TokenAvatar } from '../Avatar/TokenAvatar.js';
 import { SmallAvatar } from '../SmallAvatar.js';
@@ -79,14 +80,12 @@ export const TokenBase: FC<TokenProps & BoxProps> = ({
   let priceImpact;
   let priceImpactPercent;
   if (impactToken) {
-    const impactTokenAmount = formatTokenAmount(
-      impactToken.amount,
-      impactToken.decimals,
-    );
-    const impactTokenPrice =
-      formatTokenPrice(impactTokenAmount, impactToken.priceUSD) || 0.01;
-
-    priceImpact = tokenPrice / impactTokenPrice - 1;
+    priceImpact = getPriceImpact({
+      fromToken: impactToken,
+      fromAmount: impactToken.amount,
+      toToken: token,
+      toAmount: token.amount,
+    });
     priceImpactPercent = priceImpact * 100;
   }
 

packages/widget/src/components/TransactionDetails.tsx

@@ -12,7 +12,8 @@ import { formatUnits } from 'viem';
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
 import { isRouteDone } from '../stores/routes/utils.js';
 import { getAccumulatedFeeCostsBreakdown } from '../utils/fees.js';
-import { formatTokenAmount, formatTokenPrice } from '../utils/format.js';
+import { formatTokenAmount } from '../utils/format.js';
+import { getPriceImpact } from '../utils/getPriceImpact.js';
 import { Card } from './Card/Card.js';
 import { CardIconButton } from './Card/CardIconButton.js';
 import { FeeBreakdownTooltip } from './FeeBreakdownTooltip.js';
@@ -37,22 +38,12 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
   const { gasCosts, feeCosts, gasCostUSD, feeCostUSD, combinedFeesUSD } =
     getAccumulatedFeeCostsBreakdown(route);
 
-  const fromTokenAmount = formatTokenAmount(
-    BigInt(route.fromAmount),
-    route.fromToken.decimals,
-  );
-  const fromTokenPrice = formatTokenPrice(
-    fromTokenAmount,
-    route.fromToken.priceUSD,
-  );
-  const toTokenAmount = formatTokenAmount(
-    BigInt(route.toAmount),
-    route.toToken.decimals,
-  );
-  const toTokenPrice =
-    formatTokenPrice(toTokenAmount, route.toToken.priceUSD) || 0.01;
-
-  const priceImpact = toTokenPrice / fromTokenPrice - 1;
+  const priceImpact = getPriceImpact({
+    fromAmount: BigInt(route.fromAmount),
+    toAmount: BigInt(route.toAmount),
+    fromToken: route.fromToken,
+    toToken: route.toToken,
+  });
 
   const feeCollectionStep = route.steps[0].includedSteps.find(
     (includedStep) => includedStep.tool === 'feeCollection',

packages/widget/src/index.ts

@@ -23,3 +23,4 @@ export { windows95Theme } from './themes/windows95.js';
 export * from './types/events.js';
 export type { TokenAmount } from './types/token.js';
 export * from './types/widget.js';
+export { getPriceImpact } from './utils/getPriceImpact.js';

packages/widget/src/utils/getPriceImpact.ts

@@ -0,0 +1,27 @@
+import type { Token } from '@lifi/sdk';
+import { formatTokenAmount, formatTokenPrice } from './format.js';
+
+interface GetPriceImpractProps {
+  fromToken: Token;
+  toToken: Token;
+  fromAmount?: bigint;
+  toAmount?: bigint;
+}
+
+export const getPriceImpact = ({
+  fromToken,
+  toToken,
+  fromAmount,
+  toAmount,
+}: GetPriceImpractProps) => {
+  const fromTokenAmount = formatTokenAmount(fromAmount, fromToken.decimals);
+  const fromTokenPrice = formatTokenPrice(fromTokenAmount, fromToken.priceUSD);
+
+  const toTokenAmount = formatTokenAmount(toAmount, toToken.decimals);
+  const toTokenPrice =
+    formatTokenPrice(toTokenAmount, toToken.priceUSD) || 0.01;
+
+  const priceImpact = toTokenPrice / fromTokenPrice - 1;
+
+  return Number(priceImpact);
+};