@rango-dev/widget-embedded 0.1.10-next.100

package/src/components/UpdateUrl.tsx

@@ -0,0 +1,162 @@
+import { useEffect, useRef } from 'react';
+import {
+  createSearchParams,
+  useLocation,
+  useSearchParams,
+} from 'react-router-dom';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useMetaStore } from '../store/meta';
+import { SearchParams } from '../constants/searchParams';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useUiStore } from '../store/ui';
+import { searchParamsToToken } from '../utils/routing';
+
+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 fromChain = useBestRouteStore.use.fromChain();
+  const toChain = useBestRouteStore.use.toChain();
+  const fromToken = useBestRouteStore.use.fromToken();
+  const toToken = useBestRouteStore.use.toToken();
+  const setFromChain = useBestRouteStore.use.setFromChain();
+  const setFromToken = useBestRouteStore.use.setFromToken();
+  const setToChain = useBestRouteStore.use.setToChain();
+  const setToToken = useBestRouteStore.use.setToToken();
+  const inputAmount = useBestRouteStore.use.inputAmount();
+  const setInputAmount = useBestRouteStore.use.setInputAmount();
+  const loadingStatus = useMetaStore.use.loadingStatus();
+  const { blockchains, tokens } = useMetaStore.use.meta();
+  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(() => {
+    let fromChainString = '',
+      fromTokenString = '',
+      toChainString = '',
+      toTokenString = '',
+      fromAmount = '';
+    if (
+      loadingStatus !== 'success' &&
+      ![navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(
+        location.pathname
+      )
+    ) {
+      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];
+      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(),
+          }),
+        },
+        { replace: true }
+      );
+    }
+    if (!firstRender.current) {
+      let fromChainString = '',
+        fromTokenString = '',
+        toChainString = '',
+        toTokenString = '',
+        fromAmount = '';
+      if (loadingStatus !== '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];
+      } else {
+        if (location.state === 'redirect') return;
+        fromChainString = fromChain?.name || '';
+        fromTokenString =
+          (fromToken?.symbol || '') +
+          (fromToken?.address ? `--${fromToken?.address}` : '');
+        toChainString = toChain?.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(),
+            }),
+          },
+          { replace: true }
+        );
+      }
+    }
+    firstRender.current = false;
+  }, [location.pathname, inputAmount]);
+
+  useEffect(() => {
+    if (loadingStatus === '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 fromChain = blockchains.find(
+        (blockchain) => blockchain.name === fromChainString
+      );
+      const fromToken = searchParamsToToken(
+        tokens,
+        fromTokenString,
+        fromChain || null
+      );
+      const toChain = blockchains.find(
+        (blockchain) => blockchain.name === toChainString
+      );
+      const toToken = searchParamsToToken(
+        tokens,
+        toTokenString,
+        toChain || null
+      );
+      if (!!fromChain) {
+        setFromChain(fromChain);
+        if (!!fromToken) setFromToken(fromToken);
+      }
+      if (!!toChain) {
+        setToChain(toChain);
+        if (!!toToken) setToToken(toToken);
+      }
+      if (fromAmount) setInputAmount(fromAmount);
+    }
+  }, [loadingStatus]);
+
+  return null;
+}

package/src/components/warnings/BalanceWarnings.tsx

@@ -0,0 +1,39 @@
+import { styled, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+interface PropTypes {
+  messages: string[];
+}
+
+const List = styled('ul', {
+  variants: {
+    showListStyle: {
+      true: { paddingLeft: '$24' },
+    },
+  },
+});
+
+const ListItem = styled('li', {
+  variants: {
+    showListStyle: {
+      true: { listStyleType: 'disc', listStylePosition: 'outside' },
+    },
+  },
+});
+
+const Message = styled(Typography, {
+  display: 'block',
+});
+
+export function BalanceWarnings({ messages }: PropTypes) {
+  const showListStyle = messages.length > 1;
+  return (
+    <List showListStyle={showListStyle}>
+      {messages.map((warning) => (
+        <ListItem showListStyle={showListStyle}>
+          <Message variant="body2">{warning}</Message>
+        </ListItem>
+      ))}
+    </List>
+  );
+}

package/src/components/warnings/ConfirmSwapExtraMessages.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { HIGH_SLIPPAGE } from '../../constants/swapSettings';
+import { HighSlippageWarning } from './HighSlippageWarning';
+
+interface PropTypes {
+  selectedSlippage: number;
+}
+
+export function ConfirmSwapExtraMessages(props: PropTypes) {
+  const { selectedSlippage } = props;
+  const highSlippage = selectedSlippage >= HIGH_SLIPPAGE;
+
+  return (
+    <>
+      {highSlippage && (
+        <HighSlippageWarning selectedSlippage={selectedSlippage} />
+      )}
+    </>
+  );
+}

package/src/components/warnings/HighSlippageWarning.tsx

@@ -0,0 +1,18 @@
+import { Alert } from '@rango-dev/ui';
+import React from 'react';
+import { ChangeSlippageButton } from '../ChangeSlippageButton';
+
+interface PropTypes {
+  selectedSlippage: number;
+}
+
+export function HighSlippageWarning(props: PropTypes) {
+  const { selectedSlippage } = props;
+
+  return (
+    <Alert type="warning" footer={<ChangeSlippageButton />}>
+      Caution, your slippage is high (=
+      {selectedSlippage}). Your trade may be front run.
+    </Alert>
+  );
+}

package/src/components/warnings/MinRequiredSlippage.tsx

@@ -0,0 +1,18 @@
+import { Typography } from '@rango-dev/ui';
+import React from 'react';
+import { ChangeSlippageButton } from '../ChangeSlippageButton';
+
+interface PropTypes {
+  minRequiredSlippage: number | null;
+}
+
+export function MinRequiredSlippage({ minRequiredSlippage }: PropTypes) {
+  return (
+    <Typography variant="body2">
+      We recommend you to increase slippage to at least &nbsp;
+      {minRequiredSlippage}
+      &nbsp; for this route.
+      <ChangeSlippageButton />
+    </Typography>
+  );
+}

package/src/constants/errors.ts

@@ -0,0 +1,3 @@
+export const errorMessages = {
+  genericServerError: 'Error connecting server, please reload the app and try again',
+};

package/src/constants/navigationRoutes.ts

@@ -0,0 +1,14 @@
+export const navigationRoutes = {
+  home: '/',
+  fromChain: '/from-chain',
+  fromToken: '/from-token',
+  toChain: '/to-chain',
+  toToken: '/to-token',
+  settings: '/settings',
+  liquiditySources: '/settings/liquidity-sources',
+  swaps: '/swaps',
+  wallets: '/wallets',
+  confirmSwap: '/confirm-swap',
+  confirmWallets: '/confirm-wallets',
+  swapDetails: '/swaps/:requestId',
+};

package/src/constants/numbers.ts

@@ -0,0 +1,3 @@
+import BigNumber from 'bignumber.js';
+
+export const ZERO = new BigNumber(0);

package/src/constants/searchParams.ts

@@ -0,0 +1,7 @@
+export enum SearchParams {
+  'FROM_CHAIN' = 'fromChain',
+  'FROM_TOKEN' = 'fromToken',
+  'TO_CHAIN' = 'toChain',
+  'TO_TOKEN' = 'toToken',
+  'FROM_AMOUNT' = 'fromAmount',
+}

package/src/constants/swapSettings.ts

@@ -0,0 +1,9 @@
+export const SLIPPAGES = [0.5, 1, 3, 5, 8, 13, 20];
+
+export const DEFAULT_SLIPPAGE = 1;
+
+export const HIGH_SLIPPAGE = 5;
+
+export const MAX_SLIPPAGE = 100;
+
+export const MIN_SLIPPGAE = 0;

package/src/globalStyles.ts

@@ -0,0 +1,26 @@
+import { globalCss } from '@rango-dev/ui';
+
+export const globalStyles = globalCss({
+  '*': {
+    '&::-webkit-scrollbar': { width: '$8' },
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: '$neutrals400',
+    },
+    '&::-webkit-scrollbar-thumb:hover': {
+      backgroundColor: '$neutrals500',
+    },
+    '&::-webkit-scrollbar-track': {
+      backgroundColor: '$neutrals300',
+    },
+  },
+});
+export const globalFont = (fontFamily: string) =>
+  globalCss({
+    '@import': [
+      "url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')",
+      "url('https://fonts.cdnfonts.com/css/times-new-roman')",
+    ],
+    body: {
+      fontFamily,
+    },
+  })();

package/src/hooks/useConfirmSwap.ts

@@ -0,0 +1,260 @@
+import { useEffect, useRef, useState } from 'react';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useMetaStore } from '../store/meta';
+import { useSettingsStore } from '../store/settings';
+import { useWalletsStore } from '../store/wallets';
+import {
+  ConfirmSwapError,
+  ConfirmSwapErrorTypes,
+  ConfirmSwapWarningTypes,
+  ConfirmSwapWarnings,
+  PendingSwapSettings,
+} from '../types';
+import { PendingSwap } from '@rango-dev/ui/dist/containers/History/types';
+import {
+  calculatePendingSwap,
+  createBestRouteRequestBody,
+  getBalanceWarnings,
+  getMinRequiredSlippage,
+  getOutputRatio,
+  getPercentageChange,
+  getRouteOutputAmount,
+  getWalletsForNewSwap,
+  hasProperSlippage,
+  isOutputAmountChangedALot,
+  outputRatioHasWarning,
+} from '../utils/swap';
+import { httpService } from '../services/httpService';
+import BigNumber from 'bignumber.js';
+import {
+  isNumberOfSwapsChanged,
+  isRouteChanged,
+  isRouteInternalCoinsUpdated,
+  isRouteSwappersUpdated,
+} from '../utils/routing';
+import { numberToString } from '../utils/numbers';
+import { BestRouteResponse } from 'rango-sdk';
+
+type ConfirmSwap = {
+  loading: boolean;
+  errors: ConfirmSwapError[];
+  warnings: ConfirmSwapWarnings[];
+  confirmSwap: (() => Promise<PendingSwap | undefined>) | null;
+};
+
+export function useConfirmSwap(): ConfirmSwap {
+  const fromToken = useBestRouteStore.use.fromToken();
+  const toToken = useBestRouteStore.use.toToken();
+  const inputAmount = useBestRouteStore.use.inputAmount();
+  const initialRoute = useBestRouteStore.use.bestRoute();
+  const setBestRoute = useBestRouteStore.use.setBestRoute();
+  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
+  const accounts = useWalletsStore.use.accounts();
+  const selectedWallets = useWalletsStore.use.selectedWallets();
+  const meta = useMetaStore.use.meta();
+  const customSlippage = useSettingsStore.use.customSlippage();
+  const slippage = useSettingsStore.use.slippage();
+  const disabledLiquiditySources =
+    useSettingsStore.use.disabledLiquiditySources();
+  const userSlippage = customSlippage || slippage;
+  const proceedAnywayRef = useRef(false);
+  const confiremedRouteRef = useRef<BestRouteResponse | null>(null);
+  let abortControllerRef = useRef<AbortController | null>(null);
+
+  const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState<ConfirmSwapError[]>([]);
+  const [warnings, setWarnings] = useState<ConfirmSwapWarnings[]>([]);
+
+  useEffect(() => {
+    return () => abortControllerRef.current?.abort();
+  }, []);
+
+  if (!fromToken || !toToken || !inputAmount || !initialRoute)
+    return { loading: false, warnings: [], errors: [], confirmSwap: null };
+
+  const confirmSwap = async (): Promise<PendingSwap | undefined> => {
+    if (proceedAnywayRef.current) {
+      const swapSettings: PendingSwapSettings = {
+        slippage: userSlippage.toString(),
+        disabledSwappersGroups: disabledLiquiditySources,
+      };
+
+      if (errors.length > 0) setErrors([]);
+      if (warnings.length > 0) setWarnings([]);
+      proceedAnywayRef.current = false;
+
+      if (confiremedRouteRef.current) {
+        const newSwap = calculatePendingSwap(
+          inputAmount.toString(),
+          confiremedRouteRef.current,
+          getWalletsForNewSwap(selectedWallets),
+          swapSettings,
+          false,
+          meta
+        );
+
+        return newSwap;
+      }
+      return;
+    }
+
+    abortControllerRef.current = new AbortController();
+
+    setLoading(true);
+
+    const requestBody = createBestRouteRequestBody(
+      fromToken,
+      toToken,
+      inputAmount,
+      accounts,
+      selectedWallets,
+      disabledLiquiditySources,
+      userSlippage,
+      true
+    );
+
+    try {
+      const confiremedRoute = await httpService.getBestRoute(requestBody, {
+        signal: abortControllerRef.current?.signal,
+      });
+
+      abortControllerRef.current = null;
+
+      setLoading(false);
+
+      if (
+        !confiremedRoute.result ||
+        !new BigNumber(confiremedRoute.requestAmount).isEqualTo(
+          new BigNumber(inputAmount || '-1')
+        )
+      ) {
+        setErrors((prevState) =>
+          prevState.concat({
+            type: ConfirmSwapErrorTypes.NO_ROUTE,
+          })
+        );
+        return;
+      }
+
+      const confirmSwapState: Omit<ConfirmSwap, 'confirmSwap' | 'loading'> = {
+        errors: [],
+        warnings: [],
+      };
+
+      const routeChanged = isRouteChanged(initialRoute, confiremedRoute!);
+
+      if (routeChanged) {
+        setBestRoute(confiremedRoute);
+        const newRouteOutputUsdValue = new BigNumber(
+          confiremedRoute.result?.outputAmount || '0'
+        ).multipliedBy(toToken.usdPrice || 0);
+
+        const outputRatio = getOutputRatio(
+          inputUsdValue,
+          newRouteOutputUsdValue
+        );
+        const highValueLoss = outputRatioHasWarning(inputUsdValue, outputRatio);
+
+        if (highValueLoss)
+          confirmSwapState.errors.push({
+            type: ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS,
+          });
+        else if (isOutputAmountChangedALot(initialRoute, confiremedRoute))
+          confirmSwapState.warnings.push({
+            type: ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
+            newOutputAmount: numberToString(
+              getRouteOutputAmount(confiremedRoute)
+            ),
+            percentageChange: numberToString(
+              getPercentageChange(
+                getRouteOutputAmount(initialRoute),
+                getRouteOutputAmount(confiremedRoute)
+              ),
+              null,
+              2
+            ),
+          });
+        else if (isRouteInternalCoinsUpdated(initialRoute, confiremedRoute))
+          confirmSwapState.warnings.push({
+            type: ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED,
+          });
+        else if (isNumberOfSwapsChanged(initialRoute, confiremedRoute))
+          confirmSwapState.warnings.push({
+            type: ConfirmSwapWarningTypes.ROUTE_UPDATED,
+          });
+        else if (isRouteSwappersUpdated(initialRoute, confiremedRoute))
+          confirmSwapState.warnings.push({
+            type: ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED,
+          });
+      }
+
+      const balanceWarnings = getBalanceWarnings(
+        confiremedRoute,
+        selectedWallets
+      );
+      const enoughBalance = balanceWarnings.length === 0;
+
+      if (!enoughBalance)
+        confirmSwapState.warnings.push({
+          type: ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE,
+          messages: balanceWarnings,
+        });
+
+      const minRequiredSlippage = getMinRequiredSlippage(initialRoute);
+
+      if (!hasProperSlippage(userSlippage.toString(), minRequiredSlippage))
+        confirmSwapState.errors.push({
+          type: ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE,
+          minRequiredSlippage,
+        });
+
+      const noErrors = confirmSwapState.errors.length === 0;
+      const noWarnings = confirmSwapState.warnings.length === 0;
+
+      if (
+        (noErrors || (!noErrors && proceedAnywayRef.current)) &&
+        (noWarnings || (!noWarnings && proceedAnywayRef.current))
+      ) {
+        const swapSettings: PendingSwapSettings = {
+          slippage: userSlippage.toString(),
+          disabledSwappersGroups: disabledLiquiditySources,
+        };
+
+        const newSwap = calculatePendingSwap(
+          inputAmount.toString(),
+          confiremedRoute,
+          getWalletsForNewSwap(selectedWallets),
+          swapSettings,
+          false,
+          meta
+        );
+
+        return newSwap;
+      } else if (!proceedAnywayRef.current) {
+        proceedAnywayRef.current = true;
+        setErrors(confirmSwapState.errors);
+        setWarnings(confirmSwapState.warnings);
+        confiremedRouteRef.current = confiremedRoute;
+      }
+      return;
+    } catch (error) {
+      if ((error as any)?.code === 'ERR_CANCELED') {
+        return;
+      }
+
+      const status = (error as any)?.response?.status;
+
+      setLoading(false);
+      setErrors([
+        {
+          type: ConfirmSwapErrorTypes.REQUEST_FAILED,
+          status,
+        },
+      ]);
+
+      return;
+    }
+  };
+
+  return { loading, warnings, errors, confirmSwap };
+}

package/src/hooks/useCopyToClipboard.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import copy from 'copy-to-clipboard';
+
+export default function useCopyToClipboard(resetInterval?: number) {
+  const [isCopied, setCopied] = React.useState(false);
+
+  const handleCopy = React.useCallback((text: string | number) => {
+    copy(text.toString());
+    setCopied(true);
+  }, []);
+
+  React.useEffect(() => {
+    let timeout: NodeJS.Timeout;
+    if (isCopied && resetInterval) {
+      timeout = setTimeout(() => setCopied(false), resetInterval);
+    }
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [isCopied, resetInterval]);
+
+  return [isCopied, handleCopy] as const;
+}

package/src/hooks/useNavigateBack.ts

@@ -0,0 +1,40 @@
+import { useInRouterContext, useNavigate } from 'react-router-dom';
+import { navigationRoutes } from '../constants/navigationRoutes';
+
+export function useNavigateBack() {
+  const isRouterInContext = useInRouterContext();
+  const navigate = useNavigate();
+
+  navigationRoutes;
+
+  const navigateBackFrom = (currentRoute: string) => {
+    if (
+      !isRouterInContext ||
+      (window.history.state && window.history.state.idx > 0)
+    )
+      navigate(-1);
+    else {
+      if (
+        [
+          navigationRoutes.fromChain,
+          navigationRoutes.fromToken,
+          navigationRoutes.toChain,
+          navigationRoutes.toToken,
+          navigationRoutes.settings,
+          navigationRoutes.wallets,
+          navigationRoutes.swaps,
+          navigationRoutes.confirmWallets,
+        ].includes(currentRoute)
+      )
+        navigate(navigationRoutes.home, { replace: true });
+      else if (currentRoute === navigationRoutes.liquiditySources)
+        navigate(navigationRoutes.settings, { replace: true });
+      else if (currentRoute === navigationRoutes.swapDetails)
+        navigate(navigationRoutes.swaps, { replace: true });
+      else if (currentRoute === navigationRoutes.confirmSwap)
+        navigate(navigationRoutes.confirmWallets, { replace: true });
+    }
+  };
+
+  return { navigateBackFrom };
+}

package/src/hooks/usePrevious.ts

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from 'react';
+
+export default function usePrevious(value: string) {
+  // The ref object is a generic container whose current property is mutable ...
+  // ... and can hold any value, similar to an instance property on a class
+  const ref = useRef<string>();
+  // Store current value in ref
+  useEffect(() => {
+    ref.current = value;
+  }, [value]); // Only re-run if value changes
+  // Return previous value (happens before update in useEffect above)
+  return ref.current;
+}

package/src/hooks/useSelectLanguage.ts

@@ -0,0 +1,15 @@
+import { useTranslation } from 'react-i18next';
+
+export default function useSelectLanguage() {
+  const { i18n } = useTranslation();
+  // @ts-ignore
+  const currentLanguage = i18n?.language || 'en';
+  const changeLanguage = (value: string) => {
+    if (currentLanguage !== value) {
+      // @ts-ignore
+      i18n.changeLanguage(value);
+    }
+  };
+
+  return { changeLanguage, currentLanguage };
+}