Merge pull request #26 from SocketDotTech/fixes

🛠 feat: displaying refuel amounts; initiating routes when error is  thrown

Author: salil-naik

src/components/Output.tsx

@@ -65,15 +65,15 @@ export const Output = ({
   const customDestNetworks = useSelector(
     (state: any) => state.customSettings.destNetworks
   );
-  const customSourceNetworks = useSelector(
-    (state: any) => state.customSettings.sourceNetworks
-  );
   const defaultDestNetwork = useSelector(
     (state: any) => state.customSettings.defaultDestNetwork
   );
   const defaultDestTokenAddress = useSelector(
     (state: any) => state.customSettings.defaultDestToken
   );
+  const sameChainSwapsEnabled = useSelector(
+    (state: any) => state.customSettings.sameChainSwapsEnabled
+  );
 
   // Hack to check if it's the first render
   const [firstRender, setFirstRender] = useState<boolean>(false);
@@ -112,9 +112,15 @@ export const Output = ({
   const [firstNetworkRender, setFirstRenderNetwork] = useState<boolean>(false);
   useEffect(() => {
     if (supportedNetworks?.length) {
-      const networksSubset = supportedNetworks.filter(
-        (x: Network) => x.chainId !== sourceChainId
-      );
+      let networksSubset;
+      if (sameChainSwapsEnabled) {
+        // do not exclude the source chain from dest chain list if same chain swaps are enabled
+        networksSubset = supportedNetworks;
+      } else {
+        networksSubset = supportedNetworks.filter(
+          (x: Network) => x.chainId !== sourceChainId
+        );
+      }
       setSupportedNetworksSubset(networksSubset);
 
       if (firstNetworkRender) {
@@ -145,13 +151,21 @@ export const Output = ({
 
   // To set the tokens on load & when the source token changes
   function fallbackToUSDC() {
-    return (
-      allDestTokens.filter(
-        (x: Currency) =>
-          (x?.chainAgnosticId?.toLowerCase() || x.symbol.toLowerCase()) ===
-          "usdc"
-      )?.[0] ?? allDestTokens[0]
-    );
+    // USDC token
+    const usdc = allDestTokens.filter(
+      (x: Currency) =>
+        (x?.chainAgnosticId?.toLowerCase() || x.symbol.toLowerCase()) === "usdc"
+    )?.[0];
+
+    // If same chains are selected, and if the source token is same as usdc, set the dest token to the first token from the list
+    if (
+      sourceChainId === destChainId &&
+      usdc?.address === sourceToken?.address
+    ) {
+      return allDestTokens[0];
+    }
+
+    return usdc ?? allDestTokens[0];
   }
 
   useEffect(() => {
@@ -173,24 +187,29 @@ export const Output = ({
           _token = fallbackToUSDC();
         }
       } else {
-        // Check if the current dest token exists in the new token list. If yes, retain the same token. Else, change it.
-        const destTokenExists =
-          destToken &&
-          allDestTokens.find(
-            (x: Currency) =>
-              x.address.toLowerCase() === destToken?.address?.toLowerCase()
-          );
-
-        if (!destTokenExists) {
-          // Check if corresponding token is available - This will work only for Socket's token list
-          if (sourceToken.chainAgnosticId) {
-            _token = allDestTokens.filter(
+        if (sourceToken?.address === destToken?.address) {
+          _token = fallbackToUSDC();
+        } else {
+          // Check if the current dest token exists in the new token list. If yes, retain the same token. Else, change it.
+          const destTokenExists =
+            destToken &&
+            allDestTokens.find(
               (x: Currency) =>
-                x?.chainAgnosticId?.toLowerCase() ===
-                sourceToken.chainAgnosticId.toLowerCase()
-            )?.[0];
-          } else {
-            _token = fallbackToUSDC();
+                x.address.toLowerCase() === destToken?.address?.toLowerCase()
+            );
+
+          if (!destTokenExists) {
+            // Check if corresponding token is available - This will work only for Socket's token list
+            if (sourceToken.chainAgnosticId && sourceChainId !== destChainId) {
+              _token =
+                allDestTokens.filter(
+                  (x: Currency) =>
+                    x?.chainAgnosticId?.toLowerCase() ===
+                    sourceToken.chainAgnosticId.toLowerCase()
+                )?.[0] ?? fallbackToUSDC();
+            } else {
+              _token = fallbackToUSDC();
+            }
           }
         }
       }
@@ -225,6 +244,7 @@ export const Output = ({
         activeToken={destToken}
         tokens={allDestTokens}
         noTokens={noTokens}
+        tokenToDisable={sourceChainId === destChainId && sourceToken}
       />
     </div>
   );

src/components/Refuel.tsx

@@ -10,6 +10,9 @@ import { Popover } from "./common/Popover";
 export const Refuel = () => {
   const [isChecked, setIsChecked] = useState(false);
   const destChainId = useSelector((state: any) => state.networks.destChainId);
+  const sourceChainId = useSelector(
+    (state: any) => state.networks.sourceChainId
+  );
   const mappedChainData = useMappedChainData();
   const dispatch = useDispatch();
 
@@ -21,7 +24,7 @@ export const Refuel = () => {
   }, [isChecked]);
 
   useEffect(() => {
-    if (destChainId === 1) {
+    if (destChainId === 1 || destChainId === sourceChainId) {
       setIsChecked(false);
       dispatch(enableRefuel(false));
     }
@@ -48,6 +51,10 @@ export const Refuel = () => {
             <span className="skt-w text-red-500">
               Refuel isn't supported on Ethereum
             </span>
+          ) : destChainId === sourceChainId ? (
+            <span className="skt-w text-red-500">
+              Refuel isn't supported for same chain swaps
+            </span>
           ) : (
             `Get Gas for transactions on ${mappedChainData?.[destChainId]?.name}`
           )}
@@ -58,7 +65,7 @@ export const Refuel = () => {
         small
         isChecked={isChecked}
         setIsChecked={setIsChecked}
-        disabled={destChainId === 1}
+        disabled={destChainId === 1 || destChainId === sourceChainId}
       />
     </div>
   );

src/components/RouteDetails/ReviewModal.tsx

@@ -1,7 +1,7 @@
 import { useDispatch, useSelector } from "react-redux";
 import { ReactNode, useContext, useEffect, useState } from "react";
 import { CustomizeContext } from "../../providers/CustomizeProvider";
-import { BRIDGE_DISPLAY_NAMES } from "../../consts/";
+import { BRIDGE_DISPLAY_NAMES, UserTxType } from "../../consts/";
 
 // components
 import { Button } from "../common/Button";
@@ -35,6 +35,7 @@ export const ReviewModal = ({
   const selectedRoute = useSelector((state: any) => state.routes.selectedRoute);
   const [showTxDetails, setShowTxDetails] = useState<boolean>(false);
   const [quoteUpdated, setQuoteUpdated] = useState<boolean>(false);
+  const [isSameChainSwap, setIsSameChainSwap] = useState<boolean>(false);
 
   const customSettings = useContext(CustomizeContext);
   const { borderRadius } = customSettings.customization;
@@ -96,12 +97,17 @@ export const ReviewModal = ({
 
   // Extracting Bridge Step from fundMove userTx
   const fundMovrData = selectedRoute?.route?.userTxs.filter(
-    (item) => item.userTxType === "fund-movr"
+    (item) => item.userTxType === UserTxType.FUND_MOVR
   )[0];
   const bridgeData =
     fundMovrData?.steps &&
     fundMovrData?.steps.filter((step) => step.type === "bridge")[0];
 
+  // Extracting the Swap step from userTxs
+  const swapData = selectedRoute?.route?.userTxs.filter(
+    (item) => item.userTxType === UserTxType.DEX_SWAP
+  )?.[0];
+
   // Bridge Fee
   const bridgeFee = bridgeData?.protocolFees.feesInUsd;
   const bridgeFeeInToken = formatCurrencyAmount(
@@ -111,6 +117,13 @@ export const ReviewModal = ({
   );
   const bridgeFeeTokenSymbol = bridgeData?.protocolFees.asset.symbol;
 
+  useEffect(() => {
+    setIsSameChainSwap(
+      selectedRoute?.path?.fromToken?.chainId ===
+        selectedRoute?.path?.toToken?.chainId
+    );
+  }, [selectedRoute]);
+
   return (
     <Modal
       title="Review Quote"
@@ -135,45 +148,56 @@ export const ReviewModal = ({
           />
 
           <div className="skt-w p-3 flex flex-col gap-3 mt-1">
-            <RouteDetailRow
-              label="Bridge Name"
-              value={
-                BRIDGE_DISPLAY_NAMES[
-                  selectedRoute?.route?.usedBridgeNames?.[0]
-                ] || selectedRoute?.route?.usedBridgeNames?.[0]
-              }
-            />
-            <RouteDetailRow
-              label="Estimated Bridging Time"
-              value={timeInMinutes(selectedRoute?.route?.serviceTime)}
-            />
+            {!isSameChainSwap ? (
+              <>
+                <RouteDetailRow
+                  label="Bridge Name"
+                  value={
+                    BRIDGE_DISPLAY_NAMES[
+                      selectedRoute?.route?.usedBridgeNames?.[0]
+                    ] || selectedRoute?.route?.usedBridgeNames?.[0]
+                  }
+                />
+                <RouteDetailRow
+                  label="Estimated Bridging Time"
+                  value={timeInMinutes(selectedRoute?.route?.serviceTime)}
+                />
+                <RouteDetailRow label="Bridge Fee">
+                  <FeeDisplay
+                    feeInToken={bridgeFeeInToken}
+                    feeInUsd={bridgeFee}
+                    tokenSymbol={bridgeFeeTokenSymbol}
+                  />
+                </RouteDetailRow>
+              </>
+            ) : (
+              <RouteDetailRow
+                label="Dex Name"
+                value={swapData?.protocol?.displayName}
+              />
+            )}
             <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}
+            {!!destFeesInToken && !isSameChainSwap && (
+              <>
+                <RouteDetailRow label="Dest Gas Fee">
+                  <FeeDisplay
+                    feeInToken={destFeesInToken}
+                    feeInUsd={destFeesInUSD}
+                    tokenSymbol={destNativeToken?.symbol}
+                  />
+                </RouteDetailRow>
+                <RouteDetailRow
+                  label="Number of transactions"
+                  value={selectedRoute?.route?.totalUserTx}
                 />
-              </RouteDetailRow>
+              </>
             )}
-            <RouteDetailRow label="Bridge Fee">
-              <FeeDisplay
-                feeInToken={bridgeFeeInToken}
-                feeInUsd={bridgeFee}
-                tokenSymbol={bridgeFeeTokenSymbol}
-              />
-            </RouteDetailRow>
-            <RouteDetailRow
-              label="Number of transactions"
-              value={selectedRoute?.route?.totalUserTx}
-            />
           </div>
         </div>
 
@@ -224,7 +248,9 @@ export const ReviewModal = ({
               onClick={quoteUpdated ? updateSelectedRoute : openTxModal}
               classNames={`${quoteUpdated ? "h-12" : ""}`}
             >
-              {quoteUpdated ? "Accept" : "Confirm Bridge"}
+              {quoteUpdated
+                ? "Accept"
+                : `Confirm ${isSameChainSwap ? "Swap" : "Bridge"}`}
             </Button>
           </div>
         </InnerCard>
@@ -272,7 +298,7 @@ const FeeDisplay = (props: FeeDisplayProps) => {
         )}
         {feeInUsd !== 0 && (
           <span className="opacity-80 font-normal">
-            (${feeInUsd.toFixed(4)})
+            (${feeInUsd?.toFixed(4)})
           </span>
         )}
       </span>

src/components/RouteDetails/index.tsx

@@ -150,11 +150,16 @@ export const RouteDetails = () => {
       return `Not enough ${nativeTokenWithBalance?.symbol} for Refuel (${minReq} required)`;
     }
 
+    const sourceAmount = formatCurrencyAmount(bestRoute?.route?.fromAmount, bestRoute?.path?.fromToken?.decimals);
+    const destAmount = formatCurrencyAmount(bestRoute?.route?.toAmount, bestRoute?.path?.toToken?.decimals);
+    const conversion = Number(destAmount)/Number(sourceAmount);
+    const conversionMessage = `1 ${bestRoute?.path?.fromToken?.symbol} = ${conversion?.toFixed(4)} ${bestRoute?.path?.toToken?.symbol}`;
+
     return shouldFetch
       ? isQuotesLoading
         ? QuoteStatus.FETCHING_QUOTE
         : bestRoute
-        ? bridgeName
+        ? bridgeName ?? conversionMessage
         : QuoteStatus.NO_ROUTES_AVAILABLE
       : QuoteStatus.ENTER_AMOUNT;
   }

src/components/TokenInput/RefuelAmount.tsx

@@ -0,0 +1,20 @@
+import { formatCurrencyAmount } from "../../utils/";
+import { useSelector } from "react-redux";
+
+export const RefuelAmount = ({ src = false }: { src?: boolean }) => {
+  const bestRoute = useSelector((state: any) => state.quotes.bestRoute);
+  const refuel = bestRoute?.refuel;
+  const amount = formatCurrencyAmount(
+    src ? refuel?.fromAmount : refuel?.toAmount,
+    src ? refuel?.fromAsset?.decimals : refuel?.toAsset?.decimals,
+    3
+  );
+
+  if (!refuel) return null;
+
+  return (
+    <span className="skt-w text-widget-accent text-xs absolute left-0 -bottom-5">
+      + {amount} {src ? refuel?.fromAsset?.symbol : refuel?.toAsset?.symbol}
+    </span>
+  );
+};

src/components/TokenInput/SearchBar.tsx

@@ -0,0 +1,42 @@
+import { SetStateAction, useContext } from "react";
+import { CustomizeContext } from "../../providers/CustomizeProvider";
+import { Search, XCircle } from "react-feather";
+
+interface SearchBarProps {
+  handleInput: (e) => void;
+  searchInput: string;
+  setSearchInput: React.Dispatch<SetStateAction<string>>;
+}
+
+export const SearchBar = (props: SearchBarProps) => {
+  const { handleInput, searchInput, setSearchInput } = props;
+  const customSettings = useContext(CustomizeContext);
+  const { borderRadius } = customSettings.customization;
+
+  return (
+    <div
+      className="skt-w flex items-center px-2 w-full bg-widget-primary border border-widget-secondary-text/30 text-widget-primary text-sm overflow-hidden focus-within:border-widget-secondary-text relative"
+      style={{ borderRadius: `calc(0.5rem * ${borderRadius})` }}
+    >
+      <Search className="skt-w w-5 h-5 text-widget-secondary mr-2" />
+      <input
+        onChange={(e) => handleInput(e.target.value)}
+        placeholder="Search Name or Address"
+        className="stk-w skt-w-input w-full border-none py-2 pr-7 bg-transparent overflow-x-hidden overflow-ellipsis"
+        role="search"
+        value={searchInput}
+        spellCheck={false}
+      />
+
+      {!!searchInput && (
+        <XCircle
+          className="skt-w bg-widget-primary w-5 h-5 text-widget-secondary hover:text-secondary absolute right-3 top-.25 cursor-pointer"
+          onClick={() => {
+            setSearchInput("");
+            handleInput("");
+          }}
+        />
+      )}
+    </div>
+  );
+};