🍉 feat: bridge and gas fees; fix: handled prepare failure (#24)

* 🍉 feat: bridge and gas fees; fix: handled prepare failure

* feat: added routedId to txModal

Author: salil-naik

src/components/RouteDetails/ReviewModal.tsx

@@ -1,5 +1,5 @@
 import { useDispatch, useSelector } from "react-redux";
-import { useContext, useEffect, useState } from "react";
+import { ReactNode, useContext, useEffect, useState } from "react";
 import { CustomizeContext } from "../../providers/CustomizeProvider";
 import { BRIDGE_DISPLAY_NAMES } from "../../consts/";
 
@@ -15,6 +15,14 @@ import { setSelectedRoute } from "../../state/selectedRouteSlice";
 import { TxStepDetails } from "../TxModal/TxStepDetails";
 import { TokenDetailsRow } from "../common/TokenDetailsRow";
 
+import {
+  formatCurrencyAmount,
+  timeInMinutes,
+  truncateDecimalValue,
+} from "../../utils/";
+import { useGetFees } from "../../hooks/useGetFees";
+import { useGetGasLimitFromUserTxs } from "../../hooks/useGetGasLimitFromUserTxs";
+
 export const ReviewModal = ({
   closeModal,
   style,
@@ -48,29 +56,80 @@ export const ReviewModal = ({
 
   const refuelSourceToken = {
     amount: selectedRoute?.refuel?.fromAmount,
-    asset: selectedRoute?.refuel?.fromAsset
-  }
+    asset: selectedRoute?.refuel?.fromAsset,
+  };
   const refuelDestToken = {
     amount: selectedRoute?.refuel?.toAmount,
-    asset: selectedRoute?.refuel?.toAsset
-  }
+    asset: selectedRoute?.refuel?.toAsset,
+  };
 
-  function formattedGasFees(){
-    const feesInUsd = selectedRoute?.route?.totalGasFeesInUsd?.toFixed(3);
-    return `${feesInUsd} USD`;
-  }
+  // Source Gas Fees
+  const sourceGasLimit = useGetGasLimitFromUserTxs(
+    selectedRoute?.route,
+    selectedRoute?.path?.fromToken?.chainId
+  );
+  const sourceNativeToken = selectedRoute?.route?.userTxs.filter(
+    (tx) => tx.chainId === selectedRoute?.path?.fromToken?.chainId
+  )[0]?.gasFees?.asset;
+  const { feesInToken: sourceFeesInToken, feesInUsd: sourceFeesInUSD } =
+    useGetFees(
+      sourceGasLimit,
+      sourceNativeToken?.chainId,
+      sourceNativeToken?.decimals,
+      selectedRoute?.route
+    );
+
+  // Dest Gas Fees
+  const destGasLimit = useGetGasLimitFromUserTxs(
+    selectedRoute?.route,
+    selectedRoute?.path?.fromToken?.chainId
+  );
+  const destNativeToken = selectedRoute?.route?.userTxs.filter(
+    (tx) => tx.chainId === selectedRoute?.path?.toToken?.chainId
+  )[0]?.gasFees?.asset;
+  const { feesInToken: destFeesInToken, feesInUsd: destFeesInUSD } = useGetFees(
+    destGasLimit,
+    destNativeToken?.chainId,
+    destNativeToken?.decimals,
+    selectedRoute?.route
+  );
+
+  // Extracting Bridge Step from fundMove userTx
+  const fundMovrData = selectedRoute?.route?.userTxs.filter(
+    (item) => item.userTxType === "fund-movr"
+  )[0];
+  const bridgeData =
+    fundMovrData?.steps &&
+    fundMovrData?.steps.filter((step) => step.type === "bridge")[0];
+
+  // Bridge Fee
+  const bridgeFee = bridgeData?.protocolFees.feesInUsd;
+  const bridgeFeeInToken = formatCurrencyAmount(
+    bridgeData?.protocolFees.amount,
+    bridgeData?.protocolFees.asset.decimals,
+    5
+  );
+  const bridgeFeeTokenSymbol = bridgeData?.protocolFees.asset.symbol;
 
   return (
     <Modal
       title="Review Quote"
-      closeModal={showTxDetails ? () => setShowTxDetails(!showTxDetails) : closeModal}
+      closeModal={
+        showTxDetails ? () => setShowTxDetails(!showTxDetails) : closeModal
+      }
       style={style}
     >
       <div className="skt-w flex flex-col justify-between flex-1 relative">
         <div className="skt-w w-full">
-          <TokenDetailsRow 
-            srcDetails={{token: selectedRoute?.path?.fromToken, amount: selectedRoute?.amount}}
-            destDetails={{token: selectedRoute?.path?.toToken, amount: selectedRoute?.route?.toAmount}}
+          <TokenDetailsRow
+            srcDetails={{
+              token: selectedRoute?.path?.fromToken,
+              amount: selectedRoute?.amount,
+            }}
+            destDetails={{
+              token: selectedRoute?.path?.toToken,
+              amount: selectedRoute?.route?.toAmount,
+            }}
             srcRefuel={refuelSourceToken}
             destRefuel={refuelDestToken}
           />
@@ -85,9 +144,32 @@ export const ReviewModal = ({
               }
             />
             <RouteDetailRow
-              label="Total Gas Fee"
-              value={formattedGasFees()}
+              label="Estimated Bridging Time"
+              value={timeInMinutes(selectedRoute?.route?.serviceTime)}
             />
+            <RouteDetailRow label="Source Gas Fee">
+              <FeeDisplay
+                feeInToken={sourceFeesInToken}
+                feeInUsd={sourceFeesInUSD}
+                tokenSymbol={sourceNativeToken?.symbol}
+              />
+            </RouteDetailRow>
+            {!!destFeesInToken && (
+              <RouteDetailRow label="Dest Gas Fee">
+                <FeeDisplay
+                  feeInToken={destFeesInToken}
+                  feeInUsd={destFeesInUSD}
+                  tokenSymbol={destNativeToken?.symbol}
+                />
+              </RouteDetailRow>
+            )}
+            <RouteDetailRow label="Bridge Fee">
+              <FeeDisplay
+                feeInToken={bridgeFeeInToken}
+                feeInUsd={bridgeFee}
+                tokenSymbol={bridgeFeeTokenSymbol}
+              />
+            </RouteDetailRow>
             <RouteDetailRow
               label="Number of transactions"
               value={selectedRoute?.route?.totalUserTx}
@@ -115,7 +197,11 @@ export const ReviewModal = ({
 
             {showTxDetails && (
               <div className="skt-w mb-3 flex-1 overflow-y-auto">
-                <TxStepDetails activeRoute={selectedRoute?.route} forReview refuel={selectedRoute?.refuel}/>
+                <TxStepDetails
+                  activeRoute={selectedRoute?.route}
+                  forReview
+                  refuel={selectedRoute?.refuel}
+                />
               </div>
             )}
           </div>
@@ -147,11 +233,49 @@ export const ReviewModal = ({
   );
 };
 
-const RouteDetailRow = ({ label, value }: { label: string; value: string }) => {
+const RouteDetailRow = ({
+  label,
+  value,
+  children,
+}: {
+  label: string;
+  value?: string;
+  children?: ReactNode;
+}) => {
   return (
     <div className="skt-w w-full flex justify-between text-sm text-widget-secondary">
       <span>{label}</span>
       <span>{value}</span>
+      {children}
     </div>
   );
 };
+
+interface FeeDisplayProps {
+  feeInToken: string;
+  tokenSymbol: string | undefined;
+  feeInUsd: number;
+}
+
+const FeeDisplay = (props: FeeDisplayProps) => {
+  const { feeInToken, tokenSymbol, feeInUsd } = props;
+  if (!!feeInToken) {
+    return (
+      <span>
+        {!!feeInToken && feeInToken !== "0" ? (
+          <span>
+            {truncateDecimalValue(feeInToken, 5)}{" "}
+            <span className="font-medium">{tokenSymbol}</span>{" "}
+          </span>
+        ) : (
+          0
+        )}
+        {feeInUsd !== 0 && (
+          <span className="opacity-80 font-normal">
+            (${feeInUsd.toFixed(4)})
+          </span>
+        )}
+      </span>
+    );
+  } else return null;
+};

src/components/TokenInput/TokenSelect.tsx

@@ -109,7 +109,7 @@ export const TokenSelect = (props: Props) => {
         (style, item) =>
           item && (
             <Modal
-              title="Token selector"
+              title="Select Token"
               closeModal={() => setOpenTokenList(false)}
               style={style}
             >

src/components/TxModal/BridgingLoader.tsx

@@ -4,7 +4,7 @@ import { ExternalLink } from "react-feather";
 import { ethers } from "ethers";
 
 import useMappedChainData from "../../hooks/useMappedChainData";
-import { getExplorerLink, ExplorerDataType } from "../../utils/";
+import { getExplorerLink, ExplorerDataType, timeInMinutes } from "../../utils/";
 import { UserTxType } from "../../consts/";
 import { TxDetails } from "../../types";
 
@@ -14,7 +14,12 @@ import { TokenDetailsRow } from "../common/TokenDetailsRow";
 import { Stepper } from "../common/Stepper";
 
 // This component is displayed when transaction of type 'fund-movr' (bridging tx) is in progress
-export const BridgingLoader = ({ currentRoute, explorerParams, txDetails, refuelEnabled }) => {
+export const BridgingLoader = ({
+  currentRoute,
+  explorerParams,
+  txDetails,
+  refuelEnabled,
+}) => {
   const mappedChainData = useMappedChainData();
   const [srcTxHash, setSrcTxHash] = useState("");
   const [destTxHash, setDestTxHash] = useState("");
@@ -23,10 +28,6 @@ export const BridgingLoader = ({ currentRoute, explorerParams, txDetails, refuel
   const [showSupportLink, setShowSupportLink] = useState(false);
   const [furtherStepsAvailable, setFurtherStepsAvailable] = useState(false);
 
-  const formatedTime = (time: number) => {
-    return Math.floor(time / 60) + "m";
-  };
-
   useEffect(() => {
     const srcUrl = getExplorerLink(
       mappedChainData?.[explorerParams.srcChainId]?.explorers[0],
@@ -149,7 +150,7 @@ export const BridgingLoader = ({ currentRoute, explorerParams, txDetails, refuel
             ) : (
               <span>
                 Estimated wait time is{" "}
-                {formatedTime(bridgeDetails?.serviceTime)}
+                {timeInMinutes(bridgeDetails?.serviceTime)}
                 {furtherStepsAvailable &&
                   ", please come back later to sign the next transaction."}
               </span>

src/components/TxModal/index.tsx

@@ -222,7 +222,12 @@ export const TxModal = ({ style }) => {
       }
 
       // This checks the status of the transaction. The status can be ready, completed and pending.
-      const currentStatus = await userTx.submit(sendTx.hash);
+      let currentStatus;
+      try {
+        currentStatus = await userTx.submit(sendTx.hash);
+      } catch (e) {
+        currentStatus = PrepareTxStatus.PENDING;
+      }
 
       // If current status is completed mark route as completed else continue the route.
       if (currentStatus && currentStatus !== PrepareTxStatus.COMPLETED) {
@@ -370,9 +375,19 @@ export const TxModal = ({ style }) => {
       : selectedRoute?.refuel?.toAsset,
   };
 
+  const modalTitle = (
+    <span className="flex items-center gap-1">
+      Bridging transaction{" "}
+      <span className="text-xs text-widget-primary text-opacity-70 font-normal">
+        {currentRoute?.route?.activeRouteId
+          ? ` - #${currentRoute?.route?.activeRouteId}`
+          : ""}
+      </span>
+    </span>
+  );
   return (
     <Modal
-      title="Bridging transaction"
+      title={modalTitle}
       closeModal={closeTxModal}
       disableClose={isApproving || txInProgress}
       style={style}

src/hooks/useGetGasLimitFromUserTxs.ts

@@ -0,0 +1,22 @@
+import { Route } from "@socket.tech/socket-v2-sdk";
+import { ethers } from "ethers";
+import { useEffect, useState } from "react";
+
+export const useGetGasLimitFromUserTxs = (route: Route, chainId: number) => {
+  const [totalGasLimit, setTotalGasLimit] = useState<string>("");
+
+  useEffect(() => {
+    if (route && chainId) {
+      const gasLimit = route?.userTxs.reduce((acc, curr) => {
+        if (curr.chainId === chainId) {
+          return acc.add(ethers.BigNumber.from(curr.gasFees?.gasLimit) || 0);
+        }
+        return acc;
+      }, ethers.BigNumber.from(0));
+
+      setTotalGasLimit(gasLimit.toString());
+    }
+  }, [route, chainId]);
+
+  return totalGasLimit;
+};

src/utils/index.ts

@@ -121,4 +121,8 @@ export function formatRGB(color: string) {
 // Filters the tokens of a particular chain from the standard token list
 export function filterTokensByChain(tokens: Currency[], chainId: number) {
   return tokens.filter((x: Currency) => x.chainId === chainId);
-}
+}
+
+export const timeInMinutes = (time: number) => {
+  return Math.floor(time / 60) + "m";
+};