fix: don't modify estimations for contract calls

lifinance · Jun 16, 2023 · 23f8997 · 23f8997
1 parent bf3aeac
commit 23f8997
Show file tree

Hide file tree

Showing 13 changed files with 188 additions and 158 deletions.
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "lerna": "^7.0.1",
+    "lerna": "^7.0.2",
     "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/packages/wallet-management/package.json b/packages/wallet-management/package.json
@@ -52,7 +52,7 @@
     "@ethersproject/abstract-signer": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
-    "@lifi/sdk": "^2.0.0",
+    "@lifi/sdk": "^2.0.1",
     "@walletconnect/ethereum-provider": "^1.8.0",
     "@walletconnect/web3-provider": "^1.8.0",
     "events": "^3.3.0",

diff --git a/packages/widget-embedded/package.json b/packages/widget-embedded/package.json
@@ -24,14 +24,14 @@
   "author": "Eugene Chybisov <eugene@li.finance>",
   "dependencies": {
     "@ethersproject/abstract-signer": "^5.7.0",
-    "@lifi/sdk": "^2.0.0",
+    "@lifi/sdk": "^2.0.1",
     "@lifi/wallet-management": "^2.0.0",
     "@lifi/widget": "^2.0.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.134",
     "@mui/material": "^5.13.5",
     "@opensea/seaport-js": "2.0.3",
-    "@tanstack/react-query": "^4.29.13",
+    "@tanstack/react-query": "^4.29.14",
     "bignumber.js": "^9.1.1",
     "ethers": "^5.7.2",
     "events": "^3.3.0",
@@ -44,7 +44,7 @@
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@vitejs/plugin-react": "^4.0.0",
     "buffer": "^6.0.3",
-    "esbuild": "^0.18.2",
+    "esbuild": "^0.18.3",
     "rollup": "^3.25.1",
     "rollup-plugin-polyfill-node": "^0.12.0",
     "typescript": "^5.1.3",

diff --git a/packages/widget-playground/package.json b/packages/widget-playground/package.json
@@ -23,7 +23,7 @@
   },
   "author": "Eugene Chybisov <eugene@li.finance>",
   "dependencies": {
-    "@lifi/sdk": "^2.0.0",
+    "@lifi/sdk": "^2.0.1",
     "@lifi/wallet-management": "^2.0.0",
     "@lifi/widget": "^2.0.0",
     "@mui/icons-material": "^5.11.16",

diff --git a/packages/widget/package.json b/packages/widget/package.json
@@ -53,15 +53,15 @@
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
-    "@lifi/sdk": "^2.0.0",
+    "@lifi/sdk": "^2.0.1",
     "@lifi/wallet-management": "^2.0.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.134",
     "@mui/material": "^5.13.5",
-    "@tanstack/react-query": "^4.29.13",
+    "@tanstack/react-query": "^4.29.14",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "big.js": "^6.2.1",
-    "i18next": "^23.0.1",
+    "i18next": "^23.0.2",
     "i18next-browser-languagedetector": "^7.0.2",
     "microdiff": "^1.3.2",
     "mitt": "^3.0.0",

diff --git a/packages/widget/src/components/Step/StepList.tsx b/packages/widget/src/components/Step/StepList.tsx
@@ -1,9 +1,10 @@
 import type { Route, TokenAmount } from '@lifi/sdk';
 import { Fragment } from 'react';
 import { StepDivider } from '../../components/StepDivider';
+import type { WidgetSubvariant } from '../../types';
 import { Step } from './Step';
 
-export const getStepList = (route?: Route) =>
+export const getStepList = (route?: Route, subvariant?: WidgetSubvariant) =>
   route?.steps.map((step, index, steps) => {
     const lastIndex = steps.length - 1;
     const fromToken: TokenAmount | undefined =
@@ -14,7 +15,10 @@ export const getStepList = (route?: Route) =>
       index === lastIndex
         ? {
             ...(step.execution?.toToken ?? step.action?.toToken),
-            amount: step.execution?.toAmount ?? step.estimate.toAmount,
+            amount:
+              step.execution?.toAmount ?? subvariant === 'nft'
+                ? route.toAmount
+                : step.estimate.toAmount,
           }
         : undefined;
     const toAddress =

diff --git a/packages/widget/src/components/StepActions/StepActions.tsx b/packages/widget/src/components/StepActions/StepActions.tsx
@@ -46,6 +46,14 @@ export const StepActions: React.FC<StepActionsProps> = ({
 
   const hasCollapsedSteps = dense && step.includedSteps?.length > 1;
 
+  // FIXME: step transaction request overrides step tool details, but not included step tool details
+  const toolDetails =
+    subvariant === 'nft'
+      ? step.includedSteps.find(
+          (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom',
+        )?.toolDetails || step.toolDetails
+      : step.toolDetails;
+
   return (
     <Box {...other}>
       <Box display="flex" alignItems="center">
@@ -60,15 +68,15 @@ export const StepActions: React.FC<StepActionsProps> = ({
         >
           <StepAvatar
             variant="circular"
-            src={step.toolDetails.logoURI}
-            alt={step.toolDetails.name}
+            src={toolDetails.logoURI}
+            alt={toolDetails.name}
           >
-            {step.toolDetails.name[0]}
+            {toolDetails.name[0]}
           </StepAvatar>
         </Badge>
         <Typography ml={2} fontSize={18} fontWeight="500" flex={1}>
           {t(`main.stepDetails`, {
-            tool: step.toolDetails.name,
+            tool: toolDetails.name,
           })}
         </Typography>
         {hasCollapsedSteps ? (
@@ -226,10 +234,19 @@ export const CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({
     return null;
   }
 
+  // FIXME: step transaction request overrides step tool details, but not included step tool details
+  const toolDetails =
+    subvariant === 'nft' &&
+    (step as unknown as LifiStep).includedSteps?.length > 0
+      ? (step as unknown as LifiStep).includedSteps.find(
+          (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom',
+        )?.toolDetails || step.toolDetails
+      : step.toolDetails;
+
   return (
     <Typography fontSize={12} fontWeight="500" color="text.secondary">
       {t(`main.${subvariant}StepDetails`, {
-        tool: step.toolDetails.name,
+        tool: toolDetails.name,
       })}
     </Typography>
   );

diff --git a/packages/widget/src/hooks/useRoutes.ts b/packages/widget/src/hooks/useRoutes.ts
@@ -185,8 +185,6 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
             { signal },
           );
 
-          contractCallQuote.estimate.toAmount = toTokenAmount;
-          contractCallQuote.estimate.toAmountMin = toTokenAmount;
           contractCallQuote.action.toToken = toToken!;
 
           const customStep =
@@ -215,9 +213,8 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
             fromAddress: contractCallQuote.action.fromAddress,
             toChainId: contractCallQuote.action.toChainId,
             toAmountUSD: contractCallQuote.estimate.toAmountUSD || '',
-            toAmount: contractCallQuote.estimate.toAmount || toTokenAmount,
-            toAmountMin:
-              contractCallQuote.estimate.toAmountMin || toTokenAmount,
+            toAmount: toTokenAmount,
+            toAmountMin: toTokenAmount,
             toToken: toToken!,
             toAddress: toWalletAddress,
             gasCostUSD: contractCallQuote.estimate.gasCosts?.[0].amountUSD,

diff --git a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx
@@ -98,7 +98,7 @@ export const TransactionDetailsPage: React.FC = () => {
           }).format(startedAt)}
         </Typography>
       </Box>
-      {getStepList(routeExecution?.route)}
+      {getStepList(routeExecution?.route, subvariant)}
       {subvariant === 'nft' ? (
         <ContractComponent mt={2}>
           {contractSecondaryComponent || contractComponent}

diff --git a/packages/widget/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx b/packages/widget/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx
@@ -96,6 +96,8 @@ const ExchangeRateBottomSheetContent: React.FC<
   const { t } = useTranslation();
   const ref = useRef<HTMLElement>();
   useSetContentHeight(ref);
+
+  const oldAmount = Big(data?.oldToAmount || 1);
   return (
     <Box p={3} ref={ref}>
       <CenterContainer>
@@ -137,7 +139,7 @@ const ExchangeRateBottomSheetContent: React.FC<
         <Typography>{t('main.rateChange')}</Typography>
         <Typography fontWeight={600}>
           {Big(data?.newToAmount || 0)
-            .div(Big(data?.oldToAmount || 0))
+            .div(oldAmount.eq(0) ? Big(1) : oldAmount)
             .minus(1)
             .mul(100)
             .round(2, Big.roundUp)

diff --git a/packages/widget/src/pages/TransactionPage/TransactionPage.tsx b/packages/widget/src/pages/TransactionPage/TransactionPage.tsx
@@ -97,6 +97,10 @@ export const TransactionPage: React.FC = () => {
     tokenValueBottomSheetRef.current?.close();
     executeRoute();
     setValue(FormKey.FromAmount, '');
+    if (subvariant === 'nft') {
+      setValue(FormKey.FromToken, '');
+      setValue(FormKey.ToToken, '');
+    }
   };
 
   const handleStartClick = async () => {
@@ -157,7 +161,7 @@ export const TransactionPage: React.FC = () => {
 
   return (
     <Container>
-      {getStepList(route)}
+      {getStepList(route, subvariant)}
       {subvariant === 'nft' ? (
         <ContractComponent mt={2}>
           {contractSecondaryComponent || contractComponent}

diff --git a/packages/widget/src/stores/routes/utils.ts b/packages/widget/src/stores/routes/utils.ts
@@ -31,6 +31,12 @@ export const isRouteActive = (route?: Route) => {
   return !isDone && !isFailed && alreadyStarted;
 };
 
+export const doesRouteHaveCustomTool = (route: Route) => {
+  return route.steps.some(
+    (step) => step.tool === 'custom' || step.toolDetails.key === 'custom',
+  );
+};
+
 export const getUpdatedProcess = (
   currentRoute: Route,
   updatedRoute: Route,