From 234844f79afd7b65dbfb6f46c3725ace247f5c0a Mon Sep 17 00:00:00 2001
From: dennyscode <43956540+dennyscode@users.noreply.github.com>
Date: Thu, 17 Oct 2024 15:03:28 +0200
Subject: [PATCH] fix: refactor, use and export calcPriceImpact function (#307)

Co-authored-by: Eugene Chybisov <18644653+chybisov@users.noreply.github.com>
---
 .../widget/src/components/Token/Token.tsx     | 15 +++++------
 .../src/components/TransactionDetails.tsx     | 25 ++++++-----------
 packages/widget/src/index.ts                  |  1 +
 packages/widget/src/utils/getPriceImpact.ts   | 27 +++++++++++++++++++
 4 files changed, 43 insertions(+), 25 deletions(-)
 create mode 100644 packages/widget/src/utils/getPriceImpact.ts

diff --git a/packages/widget/src/components/Token/Token.tsx b/packages/widget/src/components/Token/Token.tsx
index 339002200..ddb22640a 100644
--- a/packages/widget/src/components/Token/Token.tsx
+++ b/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;
   }
 
diff --git a/packages/widget/src/components/TransactionDetails.tsx b/packages/widget/src/components/TransactionDetails.tsx
index 38d5ec837..630bb6bea 100644
--- a/packages/widget/src/components/TransactionDetails.tsx
+++ b/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',
diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts
index 325d12c19..f2c662cb0 100644
--- a/packages/widget/src/index.ts
+++ b/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';
diff --git a/packages/widget/src/utils/getPriceImpact.ts b/packages/widget/src/utils/getPriceImpact.ts
new file mode 100644
index 000000000..5beeeba3c
--- /dev/null
+++ b/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);
+};