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

package/src/components/UpdateUrl.tsx

@@ -0,0 +1,85 @@
+import { Token } from 'rango-sdk';
+import { useEffect, useRef } from 'react';
+import { useLocation, useSearchParams } from 'react-router-dom';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useMetaStore } from '../store/meta';
+import { SearchParams } from '../constants/searchParams';
+
+function searchParamsToToken(tokens: Token[], searchParams: string | null): Token | null {
+  return (
+    tokens.find((token) => {
+      const symbolAndAddress = searchParams?.split('--');
+      if (symbolAndAddress?.length === 1)
+        return token.symbol === symbolAndAddress[0] && token.address === null;
+      return token.symbol === symbolAndAddress?.[0] && token.address === symbolAndAddress?.[1];
+    }) || null
+  );
+}
+
+export function UpdateUrl() {
+  const firstRender = useRef(true);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const location = useLocation();
+
+  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();
+
+  useEffect(() => {
+    if (!firstRender.current) {
+      const fromChainString = fromChain?.name || '';
+      const fromTokenString =
+        (fromToken?.symbol || '') + (fromToken?.address ? `--${fromToken?.address}` : '');
+      const toChainString = toChain?.name || '';
+      const toTokenString =
+        (toToken?.symbol || '') + (toToken?.address ? `--${toToken?.address}` : '');
+      const 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 fronChainString = 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 === fronChainString);
+      const fromToken = searchParamsToToken(tokens, fromTokenString);
+      const toChain = blockchains.find((blockchain) => blockchain.name === toChainString);
+      const toToken = searchParamsToToken(tokens, toTokenString);
+      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/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: '/liquidity-sources',
+  history: '/history',
+  wallets: '/wallets',
+  confirmSwap: '/confirm-swap',
+  confirmWallets: '/confirm-wallets',
+  swapDetails: '/swap-details',
+};

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/globalStyles.ts

@@ -0,0 +1,16 @@
+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',
+    },
+  },
+});

package/src/hooks/useBestRoute.ts

@@ -0,0 +1,70 @@
+import { BestRouteRequest, BestRouteResponse } from 'rango-sdk';
+import { useEffect, useRef, useState } from 'react';
+import { httpService } from '../services/httpService';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useSettingsStore } from '../store/settings';
+
+export function useBestRoute() {
+  const fromToken = useBestRouteStore.use.fromToken();
+  const toToken = useBestRouteStore.use.toToken();
+  const inputAmount = useBestRouteStore.use.inputAmount();
+
+  const slippage = useSettingsStore.use.slippage();
+  const customSlippage = useSettingsStore.use.customSlippage();
+  const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
+  const [count, setCount] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [data, setData] = useState<BestRouteResponse | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const retry = () => {
+    setCount((prev) => prev + 1);
+  };
+
+  useEffect(() => {
+    if (abortControllerRef.current) abortControllerRef.current.abort();
+    const abortController = new AbortController();
+    abortControllerRef.current = abortController;
+    if (!!fromToken && !!toToken && !!inputAmount) {
+      if (!!data) setData(null);
+      const requestBody: BestRouteRequest = {
+        amount: inputAmount?.toString(),
+        connectedWallets: [],
+        selectedWallets: {},
+        checkPrerequisites: false,
+        swapperGroups: disabledLiquiditySources,
+        swappersGroupsExclude: true,
+        from: {
+          address: fromToken.address,
+          blockchain: fromToken.blockchain,
+          symbol: fromToken.symbol,
+        },
+        to: { address: toToken.address, blockchain: toToken.blockchain, symbol: toToken.symbol },
+      };
+      setLoading(true);
+      httpService
+        .getBestRoute(requestBody, { signal: abortControllerRef.current.signal })
+        .then((res) => {
+          setData(res);
+          setLoading(false);
+          abortControllerRef.current = null;
+        })
+        .catch((error) => {
+          if (error.code === 'ERR_CANCELED') return;
+          setError(error.message);
+          setLoading(false);
+        });
+    }
+  }, [
+    fromToken,
+    toToken,
+    inputAmount,
+    count,
+    slippage,
+    customSlippage,
+    disabledLiquiditySources.length,
+  ]);
+
+  return { loading, error, data, retry };
+}

package/src/hooks/useConfirmSwap.ts

@@ -0,0 +1,234 @@
+import { PendingSwap } from '@rango-dev/ui/dist/containers/History/types';
+import {
+  BestRouteType,
+  SimulationValidationStatus,
+  SwapSavedSettings,
+} from '@rango-dev/ui/dist/types/swaps';
+import { WalletType } from '@rango-dev/wallets-shared';
+import BigNumber from 'bignumber.js';
+import { BestRouteRequest, BestRouteResponse } from 'rango-sdk';
+import { useState } from 'react';
+import { httpService } from '../services/httpService';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useSettingsStore } from '../store/settings';
+import { useWalletsStore } from '../store/wallets';
+import { compareRoutes, getRequiredBalanceOfWallet } from '../utils/routing';
+import { calculatePendingSwap } from '../utils/swap';
+import { SelectedWallet } from '../utils/wallets';
+
+type CheckFeeAndBalanceResult =
+  | {
+      hasEnoughBalanceOrSlippage: { balance: boolean; slippage: boolean; routeChanged: boolean };
+      bestRoute: BestRouteType;
+    }
+  | { bestRoute: null }
+  | null;
+
+export function useConfirmSwap() {
+  const fromToken = useBestRouteStore.use.fromToken();
+  const toToken = useBestRouteStore.use.toToken();
+  const inputAmount = useBestRouteStore.use.inputAmount();
+  const bestRoute = useBestRouteStore.use.bestRoute();
+  const setBestRoute = useBestRouteStore.use.setBestRoute();
+  const accounts = useWalletsStore.use.accounts();
+  const selectedWallets = useWalletsStore.use.selectedWallets();
+
+  const slippage = useSettingsStore.use.slippage();
+  const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [warning, setWarning] = useState('');
+  const [data, setData] = useState<BestRouteResponse | null>(null);
+  const [feeStatus, setFeeStatus] = useState<SimulationValidationStatus[] | null>(null);
+  const [bestRouteChanged, setBestRouteChanged] = useState(false);
+  const [enoughBalance, setEnoughBalance] = useState<boolean | null>(null);
+
+  const hasEnoughBalanceOrProperSlippage = (
+    route: BestRouteType,
+    selectedWallets: SelectedWallet[],
+    userSlippage: string,
+    routeChanged: boolean,
+  ): { balance: boolean; slippage: boolean; routeChanged: boolean } => {
+    const fee = route.validationStatus;
+
+    if (fee === null || fee.length === 0) return { balance: true, slippage: true, routeChanged };
+
+    for (const wallet of selectedWallets) {
+      const requiredAssets = getRequiredBalanceOfWallet(wallet, fee);
+      if (!requiredAssets) continue;
+
+      const hasEnoughBalance = requiredAssets?.map((it) => it.ok).reduce((a, b) => a && b);
+      if (!hasEnoughBalance) return { balance: false, slippage: true, routeChanged };
+    }
+
+    const slippages = route.result?.swaps?.map((s) => s.recommendedSlippage);
+    const slippageError = (slippages?.filter((s) => !!s?.error)?.length || 0) > 0;
+    const minSlippage =
+      slippages
+        ?.map((s) => parseFloat(s?.slippage.toString() || '0') || 0)
+        .filter((s) => s > 0)
+        .sort((a, b) => b - a)
+        .find(() => true) || null;
+    if (slippageError) {
+      setError('Server cannot calculated required slippage for your swap');
+      return { balance: true, slippage: false, routeChanged };
+    } else if (minSlippage !== null && minSlippage > parseFloat(userSlippage)) {
+      setError(`Your slippage should be ${minSlippage} at least`);
+      return { balance: true, slippage: false, routeChanged };
+    }
+
+    return { balance: true, slippage: true, routeChanged };
+  };
+
+  const checkFeeAndBalance = async (
+    selectedWallets: SelectedWallet[],
+  ): Promise<CheckFeeAndBalanceResult> => {
+    setLoading(true);
+    setFeeStatus(null);
+
+    const selectedWalletsMap = selectedWallets.reduce(
+      (selectedWalletsMap: BestRouteRequest['selectedWallets'], selectedWallet) => (
+        (selectedWalletsMap[selectedWallet.chain] = selectedWallet.address), selectedWalletsMap
+      ),
+      {},
+    );
+
+    const connectedWallets: BestRouteRequest['connectedWallets'] = [];
+
+    accounts.forEach((account) => {
+      const chainAndAccounts = connectedWallets.find((wallet) => wallet.blockchain);
+      if (!!chainAndAccounts) chainAndAccounts.addresses.push(account.address);
+      else connectedWallets.push({ blockchain: account.chain, addresses: [account.address] });
+    });
+
+    const r = await httpService
+      .getBestRoute({
+        amount: inputAmount!.toString(),
+        checkPrerequisites: true,
+        from: {
+          address: fromToken!.address,
+          blockchain: fromToken!.blockchain,
+          symbol: fromToken!.symbol,
+        },
+        to: {
+          address: toToken!.address,
+          blockchain: toToken!.blockchain,
+          symbol: toToken!.symbol,
+        },
+        connectedWallets,
+        selectedWallets: selectedWalletsMap,
+        //@ts-ignore
+        swapperGroups: disabledLiquiditySources,
+        swappersGroupsExclude: true,
+      })
+      .catch((error) => {
+        setError(error.message);
+        setLoading(false);
+      });
+    setLoading(false);
+    if (!r || !r.result || !bestRoute) return { bestRoute: null };
+    if (!new BigNumber(r.requestAmount).isEqualTo(new BigNumber(inputAmount || '-1'))) return null;
+    setFeeStatus(r.validationStatus);
+    const routeChangeStatus = compareRoutes(
+      bestRoute,
+      r,
+      inputAmount!.toString(),
+      fromToken!.usdPrice,
+      toToken!.usdPrice,
+    );
+    setBestRoute(r);
+    const isChanged = routeChangeStatus.isChanged;
+    const changeWarningMessage = routeChangeStatus.warningMessage;
+    setBestRouteChanged(isChanged);
+    setWarning('Best route changed');
+    setData(r);
+    return {
+      hasEnoughBalanceOrSlippage: hasEnoughBalanceOrProperSlippage(
+        r,
+        selectedWallets,
+        slippage.toString(),
+        isChanged,
+      ),
+      bestRoute: r,
+    };
+  };
+
+  const swap = () => {
+    if (!bestRoute) return;
+    if (inputAmount!.toString() === '') return;
+    const wallets = selectedWallets.reduce(
+      (
+        selectedWalletsMap: { [p: string]: { address: string; walletType: WalletType } },
+        selectedWallet,
+      ) => (
+        (selectedWalletsMap[selectedWallet.chain] = {
+          address: selectedWallet.address,
+          walletType: selectedWallet.walletType,
+        }),
+        selectedWalletsMap
+      ),
+      {},
+    );
+
+    const proceedAnyway = enoughBalance !== null;
+
+    const settings: SwapSavedSettings = {
+      slippage: slippage.toString(),
+      disabledSwappersGroups: ['Osmosis'],
+      disabledSwappersIds: [],
+    };
+    if (proceedAnyway) {
+      const newSwap: PendingSwap = calculatePendingSwap(
+        inputAmount!.toString(),
+        bestRoute,
+        wallets,
+        settings,
+        false,
+      );
+    }
+
+    !proceedAnyway &&
+      checkFeeAndBalance(selectedWallets)
+        .then((data) => {
+          if (!data) {
+            setError('confirm swap error');
+            return;
+          }
+
+          if (!data.bestRoute) {
+            setError('confirm swap error');
+            return;
+          } else {
+            const { hasEnoughBalanceOrSlippage, bestRoute: newBestRoute } = data;
+            if (!hasEnoughBalanceOrSlippage) {
+              return;
+            }
+
+            setEnoughBalance(
+              hasEnoughBalanceOrSlippage.balance && hasEnoughBalanceOrSlippage.slippage,
+            );
+
+            if (
+              hasEnoughBalanceOrSlippage.balance &&
+              hasEnoughBalanceOrSlippage.slippage &&
+              !hasEnoughBalanceOrSlippage.routeChanged
+            ) {
+              const newSwap: PendingSwap = calculatePendingSwap(
+                inputAmount!.toString(),
+                newBestRoute,
+                wallets,
+                settings,
+                true,
+              );
+            } else if (!hasEnoughBalanceOrSlippage.balance) {
+              setError('not enough balance');
+            }
+          }
+        })
+        .catch((error) => {
+          console.log('unexpected error', error);
+        });
+  };
+
+  return { loading, error, data, warning, feeStatus, bestRouteChanged, enoughBalance, swap };
+}

package/src/hooks/useTheme.ts

@@ -0,0 +1,37 @@
+import { lightTheme, darkTheme } from '@rango-dev/ui';
+import { useState, useEffect } from 'react';
+import { useMetaStore } from '../store/meta';
+import { useSettingsStore } from '../store/settings';
+
+export function useTheme() {
+  const theme = useSettingsStore.use.theme();
+  const fetchMeta = useMetaStore.use.fetchMeta();
+
+  const [OSTheme, setOSTheme] = useState(lightTheme);
+  useEffect(() => {
+    (async () => {
+      await fetchMeta();
+    })();
+
+    const switchTheme = (event: MediaQueryListEvent) => {
+      if (event.matches) setOSTheme(darkTheme);
+      else setOSTheme(lightTheme);
+    };
+
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      setOSTheme(darkTheme);
+    }
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', switchTheme);
+    return () => {
+      window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', switchTheme);
+    };
+  }, []);
+
+  const getActiveTheme = () => {
+    if (theme === 'auto') return OSTheme;
+    else return theme === 'dark' ? darkTheme : lightTheme;
+  };
+
+  return { activeTheme: getActiveTheme() };
+}

package/src/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { App } from './App';
+
+const container = document.getElementById('app')!;
+const root = createRoot(container);
+root.render(
+  <BrowserRouter>
+    <App />,
+  </BrowserRouter>,
+);