@rango-dev/widget-embedded 0.20.1-next.8 → 0.21.0

package/src/utils/swap.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { FeesGroup, NameOfFees } from '../constants/quote';
 import type { FetchStatus } from '../store/slices/data';
 import type {
   ConvertedToken,
@@ -14,6 +15,7 @@ import type {
   BestRouteResponse,
   BlockchainMeta,
   RecommendedSlippage,
+  SwapFee,
   SwapResult,
   Token,
 } from 'rango-sdk';
@@ -328,6 +330,39 @@ export function getTotalFeeInUsd(
   );
 }
 
+export function getUsdFee(fee: SwapFee): BigNumber {
+  let totalFeeInUsd = ZERO;
+  totalFeeInUsd = totalFeeInUsd.plus(
+    new BigNumber(fee.amount).multipliedBy(fee.price || 0)
+  );
+
+  return totalFeeInUsd;
+}
+
+export function getTotalFeesInUsd(fees: SwapFee[]): BigNumber {
+  return fees.reduce(
+    (totalFee: BigNumber, fee) => totalFee.plus(getUsdFee(fee)),
+    ZERO
+  );
+}
+export function getFeesGroup(swaps: SwapResult[]): FeesGroup {
+  return swaps.reduce(
+    (result, swap) => {
+      for (const fee of swap.fee) {
+        const name = fee.name as NameOfFees;
+        const feeGroup =
+          fee.expenseType !== 'DECREASE_FROM_OUTPUT'
+            ? result.payable
+            : result.nonePayable;
+
+        feeGroup[name] = [...(feeGroup[name] || []), fee];
+      }
+      return result;
+    },
+    { payable: {}, nonePayable: {} } as FeesGroup
+  );
+}
+
 export function hasHighFee(totalFeeInUsd: BigNumber | null) {
   if (!totalFeeInUsd) {
     return false;

package/src/utils/ui.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { WidgetTheme } from '../types';
 import type { createTheme } from '@rango-dev/ui';
+import type React from 'react';
 
 import {
   theme as baseThemeTokens,
@@ -70,3 +71,22 @@ export function customizedThemeTokens(
     dark,
   };
 }
+
+export function joinList(
+  list: React.JSX.Element[],
+  divider: React.JSX.Element
+) {
+  if (list.length <= 1) {
+    return list;
+  }
+
+  const output: React.JSX.Element[] = [];
+  list.forEach((item, index) => {
+    output.push(item);
+    if (index < list.length - 1) {
+      output.push(divider);
+    }
+  });
+
+  return output;
+}

package/dist/components/UpdateUrl.d.ts

@@ -1,2 +0,0 @@
-export declare function UpdateUrl(): null;
-//# sourceMappingURL=UpdateUrl.d.ts.map

package/dist/components/UpdateUrl.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UpdateUrl.d.ts","sourceRoot":"","sources":["../../src/components/UpdateUrl.tsx"],"names":[],"mappings":"AAcA,wBAAgB,SAAS,SA+IxB"}

package/src/components/UpdateUrl.tsx

@@ -1,158 +0,0 @@
-import { useEffect, useRef } from 'react';
-import {
-  createSearchParams,
-  useLocation,
-  useSearchParams,
-} from 'react-router-dom';
-
-import { navigationRoutes } from '../constants/navigationRoutes';
-import { SearchParams } from '../constants/searchParams';
-import { useAppStore } from '../store/AppStore';
-import { useQuoteStore } from '../store/quote';
-import { useUiStore } from '../store/ui';
-import { searchParamsToToken } from '../utils/quote';
-
-export function UpdateUrl() {
-  const firstRender = useRef(true);
-  const [searchParams, setSearchParams] = useSearchParams();
-  const location = useLocation();
-  const firstRenderSearchParams = useRef(location.search);
-  const searchParamsRef = useRef<Record<string, string>>({});
-  const fromBlockchain = useQuoteStore.use.fromBlockchain();
-  const toBlockchain = useQuoteStore.use.toBlockchain();
-  const fromToken = useQuoteStore.use.fromToken();
-  const toToken = useQuoteStore.use.toToken();
-  const setFromBlockchain = useQuoteStore.use.setFromBlockchain();
-  const setFromToken = useQuoteStore.use.setFromToken();
-  const setToBlockchain = useQuoteStore.use.setToBlockchain();
-  const setToToken = useQuoteStore.use.setToToken();
-  const inputAmount = useQuoteStore.use.inputAmount();
-  const setInputAmount = useQuoteStore.use.setInputAmount();
-  const fetchMetaStatus = useAppStore().fetchStatus;
-  const blockchains = useAppStore().blockchains();
-  const tokens = useAppStore().tokens();
-  const setSelectedSwap = useUiStore.use.setSelectedSwap();
-
-  useEffect(() => {
-    const params: Record<string, string> = {};
-    createSearchParams(firstRenderSearchParams.current).forEach(
-      (value, key) => {
-        params[key] = value;
-      }
-    );
-    searchParamsRef.current = params;
-    const requestId =
-      location.pathname.split(navigationRoutes.swaps + '/')[1] || null;
-    if (requestId) {
-      setSelectedSwap(requestId);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!firstRender.current) {
-      let fromChainString = '',
-        fromTokenString = '',
-        toChainString = '',
-        toTokenString = '',
-        fromAmount = '';
-      const autoConnect = searchParamsRef.current[SearchParams.AUTO_CONNECT];
-      if (fetchMetaStatus !== 'success') {
-        fromChainString = searchParamsRef.current[SearchParams.FROM_CHAIN];
-        fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
-        toChainString = searchParamsRef.current[SearchParams.TO_CHAIN];
-        toTokenString = searchParamsRef.current[SearchParams.TO_TOKEN];
-        fromAmount =
-          searchParamsRef.current[SearchParams.FROM_AMOUNT] || inputAmount;
-      } else {
-        fromChainString = fromBlockchain?.name || '';
-        fromTokenString =
-          (fromToken?.symbol || '') +
-          (fromToken?.address ? `--${fromToken?.address}` : '');
-        toChainString = toBlockchain?.name || '';
-        toTokenString =
-          (toToken?.symbol || '') +
-          (toToken?.address ? `--${toToken?.address}` : '');
-        fromAmount = inputAmount;
-      }
-      setSearchParams(
-        {
-          ...(fromChainString && {
-            [SearchParams.FROM_CHAIN]: fromChainString,
-          }),
-          ...(fromTokenString && {
-            [SearchParams.FROM_TOKEN]: fromTokenString,
-          }),
-          ...(toChainString && { [SearchParams.TO_CHAIN]: toChainString }),
-          ...(toTokenString && { [SearchParams.TO_TOKEN]: toTokenString }),
-          ...(fromAmount && {
-            [SearchParams.FROM_AMOUNT]: fromAmount.toString(),
-          }),
-          ...(autoConnect && {
-            [SearchParams.AUTO_CONNECT]: autoConnect,
-          }),
-        },
-        { replace: true }
-      );
-    }
-    firstRender.current = false;
-  }, [
-    location.pathname,
-    inputAmount,
-    fromBlockchain,
-    fromToken,
-    toBlockchain,
-    toToken,
-  ]);
-
-  useEffect(() => {
-    if (fetchMetaStatus === 'success') {
-      const fromChainString = searchParams.get(SearchParams.FROM_CHAIN);
-      const fromTokenString = searchParams.get(SearchParams.FROM_TOKEN);
-      const toChainString = searchParams.get(SearchParams.TO_CHAIN);
-      const toTokenString = searchParams.get(SearchParams.TO_TOKEN);
-      const fromAmount = searchParams.get(SearchParams.FROM_AMOUNT);
-      const fromBlockchain = blockchains.find(
-        (blockchain) => blockchain.name === fromChainString
-      );
-      const fromToken = searchParamsToToken(
-        tokens,
-        fromTokenString,
-        fromBlockchain || null
-      );
-      const toBlockchain = blockchains.find(
-        (blockchain) => blockchain.name === toChainString
-      );
-      const toToken = searchParamsToToken(
-        tokens,
-        toTokenString,
-        toBlockchain || null
-      );
-      if (!!fromBlockchain) {
-        setFromBlockchain(fromBlockchain);
-        if (!!fromToken) {
-          setFromToken({
-            token: fromToken,
-            meta: {
-              blockchains: blockchains,
-              tokens: tokens,
-            },
-          });
-        }
-      }
-      if (!!toBlockchain) {
-        setToBlockchain(toBlockchain);
-        if (!!toToken) {
-          setToToken({
-            token: toToken,
-            meta: { blockchains: blockchains, tokens: tokens },
-          });
-        }
-      }
-      if (fromAmount) {
-        setInputAmount(fromAmount);
-      }
-    }
-  }, [fetchMetaStatus]);
-
-  return null;
-}