@rango-dev/widget-embedded 0.1.10-next.93 → 0.1.10-next.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.10-next.93",
+  "version": "0.1.10-next.95",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -41,8 +41,8 @@
     "immer": "^9.0.19",
     "mitt": "^3.0.0",
     "parcel": "^2.8.0",
-    "rango-sdk": "^0.1.18",
-    "rango-types": "^0.1.22",
+    "rango-sdk": "^0.1.19",
+    "rango-types": "^0.1.23",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^12.2.0",

package/src/QueueManager.tsx

@@ -80,6 +80,7 @@ function QueueManager(props: PropsWithChildren<{}>) {
 
   return (
     <ManagerProvider
+      //@ts-ignore
       queuesDefs={[swapQueueDef]}
       context={context}
       onPersistedDataLoaded={(_manager) => {}}

package/src/components/AppRoutes.tsx

@@ -13,48 +13,73 @@ import { ConfirmWalletsPage } from '../pages/ConfirmWalletsPage';
 import { SwapDetailsPage } from '../pages/SwapDetailsPage';
 import { Configs } from '../types';
 
-export const AppRoutes = ({
-  fromChains = 'all',
-  toChains = 'all',
-  fromTokens = 'all',
-  toTokens = 'all',
-  liquiditySources = 'all',
-  wallets = 'all',
-  title,
-  multiWallets = true,
-  titleSize,
-  titleWeight,
-}: Configs) =>
-  useRoutes([
+interface PropTypes {
+  configs?: Configs;
+}
+
+export function AppRoutes(props: PropTypes) {
+  const { configs } = props;
+
+  return useRoutes([
     {
       path: navigationRoutes.home,
       element: (
-        <Home title={title} titleSize={titleSize} titleWeight={titleWeight} />
+        <Home
+          title={configs?.title}
+          titleSize={configs?.titleSize}
+          titleWeight={configs?.titleWeight}
+        />
       ),
     },
     {
       path: navigationRoutes.fromChain,
-      element: <SelectChainPage type="from" supportedChains={fromChains} />,
+      element: (
+        <SelectChainPage
+          type="from"
+          supportedChains={configs?.fromChains || 'all'}
+        />
+      ),
     },
     {
       path: navigationRoutes.toChain,
-      element: <SelectChainPage type="to" supportedChains={toChains} />,
+      element: (
+        <SelectChainPage
+          type="to"
+          supportedChains={configs?.toChains || 'all'}
+        />
+      ),
     },
     {
       path: navigationRoutes.fromToken + '/*',
-      element: <SelectTokenPage type="from" supportedTokens={fromTokens} />,
+      element: (
+        <SelectTokenPage
+          type="from"
+          supportedTokens={configs?.fromTokens || 'all'}
+        />
+      ),
     },
     {
       path: navigationRoutes.toToken,
-      element: <SelectTokenPage type="to" supportedTokens={toTokens} />,
+      element: (
+        <SelectTokenPage
+          type="to"
+          supportedTokens={configs?.toTokens || 'all'}
+        />
+      ),
     },
     {
       path: navigationRoutes.settings,
-      element: <SettingsPage supportedSwappers={liquiditySources} />,
+      element: (
+        <SettingsPage supportedSwappers={configs?.liquiditySources || 'all'} />
+      ),
     },
     {
       path: navigationRoutes.liquiditySources,
-      element: <LiquiditySourcePage supportedSwappers={liquiditySources} />,
+      element: (
+        <LiquiditySourcePage
+          supportedSwappers={configs?.liquiditySources || 'all'}
+        />
+      ),
     },
     { path: navigationRoutes.swaps, element: <HistoryPage /> },
     {
@@ -64,9 +89,17 @@ export const AppRoutes = ({
     {
       path: navigationRoutes.wallets,
       element: (
-        <WalletsPage supportedWallets={wallets} multiWallets={multiWallets} />
+        <WalletsPage
+          supportedWallets={configs?.wallets || 'all'}
+          multiWallets={
+            typeof configs?.multiWallets === 'undefined'
+              ? true
+              : configs.multiWallets
+          }
+        />
       ),
     },
     { path: navigationRoutes.confirmSwap, element: <ConfirmSwapPage /> },
     { path: navigationRoutes.confirmWallets, element: <ConfirmWalletsPage /> },
   ]);
+}

package/src/components/ChangeSlippageButton.tsx

@@ -15,7 +15,7 @@ export function ChangeSlippageButton() {
       type="primary"
       variant="contained"
       size="small"
-      onClick={navigate.bind(null, navigationRoutes.settings)}
+      onClick={() => navigate(navigationRoutes.settings)}
     >
       Change Slippage
     </StyledButton>

package/src/components/ConfirmSwapErrors.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Typography } from '@rango-dev/ui';
-import { ConfirmSwapError, ConfirmSwapErrorTypes } from '../store/confirmSwap';
+import { ConfirmSwapError, ConfirmSwapErrorTypes } from '../types';
 import { MinRequiredSlippage } from './warnings/MinRequiredSlippage';
 
 export function ConfirmSwapErrors(errors: ConfirmSwapError[]) {

package/src/components/ConfirmSwapWarnings.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 import { Typography } from '@rango-dev/ui';
-import {
-  ConfirmSwapWarnings,
-  ConfirmSwapWarningTypes,
-} from '../store/confirmSwap';
+import { ConfirmSwapWarningTypes, ConfirmSwapWarnings } from '../types';
 import { BalanceWarnings } from './warnings/BalanceWarnings';
 
 export function ConfirmSwapWarnings(warnings: ConfirmSwapWarnings[]) {

package/src/components/Header.tsx

@@ -29,7 +29,7 @@ export function Header(props: PropTypes) {
   return (
     <HeaderContainer>
       <Typography variant="h4" className={titleStyle()}>
-        {t(title.toLocaleLowerCase()) || title}
+        {title ? t(title.toLocaleLowerCase()) : ''}
       </Typography>
       <HeaderButtons onClickRefresh={onClickRefresh} />
     </HeaderContainer>

package/src/components/Layout.tsx

@@ -30,7 +30,7 @@ const WalletImage = styled('img', {
 });
 
 export type LayoutProps = {
-  configs: Configs;
+  configs?: Configs;
 };
 
 export function Layout({ configs }: LayoutProps) {
@@ -58,7 +58,7 @@ export function Layout({ configs }: LayoutProps) {
     setToToken(configs?.toToken || null);
   }, [configs?.toChain, configs?.toToken]);
   useEffect(() => {
-    setInputAmount(configs?.fromAmount.toString() || null);
+    setInputAmount(configs?.fromAmount?.toString() || '');
   }, [configs?.fromAmount]);
 
   useEffect(() => {
@@ -90,7 +90,7 @@ export function Layout({ configs }: LayoutProps) {
           </Typography>
         </Button>
       </Header>
-      <AppRoutes {...configs} />
+      <AppRoutes configs={configs} />
     </>
   );
 }

package/src/components/UpdateUrl.tsx

@@ -1,4 +1,3 @@
-import { Token } from 'rango-sdk';
 import { useEffect, useRef } from 'react';
 import {
   createSearchParams,
@@ -10,23 +9,7 @@ import { useMetaStore } from '../store/meta';
 import { SearchParams } from '../constants/searchParams';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useUiStore } from '../store/ui';
-
-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
-  );
-}
+import { searchParamsToToken } from '../utils/routing';
 
 export function UpdateUrl() {
   const firstRender = useRef(true);
@@ -142,19 +125,27 @@ export function UpdateUrl() {
 
   useEffect(() => {
     if (loadingStatus === 'success') {
-      const fronChainString = searchParams.get(SearchParams.FROM_CHAIN);
+      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 === fronChainString
+        (blockchain) => blockchain.name === fromChainString
+      );
+      const fromToken = searchParamsToToken(
+        tokens,
+        fromTokenString,
+        fromChain || null
       );
-      const fromToken = searchParamsToToken(tokens, fromTokenString);
       const toChain = blockchains.find(
         (blockchain) => blockchain.name === toChainString
       );
-      const toToken = searchParamsToToken(tokens, toTokenString);
+      const toToken = searchParamsToToken(
+        tokens,
+        toTokenString,
+        toChain || null
+      );
       if (!!fromChain) {
         setFromChain(fromChain);
         if (!!fromToken) setFromToken(fromToken);

package/src/components/warnings/BalanceWarnings.tsx

@@ -1,16 +1,39 @@
-import { Typography } from '@rango-dev/ui';
+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 (
-    <div>
+    <List showListStyle={showListStyle}>
       {messages.map((warning) => (
-        <Typography variant="body2">{warning}</Typography>
+        <ListItem showListStyle={showListStyle}>
+          <Message variant="body2">{warning}</Message>
+        </ListItem>
       ))}
-    </div>
+    </List>
   );
 }

package/src/components/warnings/ConfirmSwapExtraMessages.tsx

@@ -10,5 +10,11 @@ export function ConfirmSwapExtraMessages(props: PropTypes) {
   const { selectedSlippage } = props;
   const highSlippage = selectedSlippage >= HIGH_SLIPPAGE;
 
-  return <>{highSlippage && <HighSlippageWarning selectedSlippage={selectedSlippage} />}</>;
+  return (
+    <>
+      {highSlippage && (
+        <HighSlippageWarning selectedSlippage={selectedSlippage} />
+      )}
+    </>
+  );
 }

package/src/components/warnings/HighSlippageWarning.tsx

@@ -12,7 +12,7 @@ export function HighSlippageWarning(props: PropTypes) {
   return (
     <Alert type="warning">
       <Typography variant="body2">
-        slippage is high=&gt; Caution, your slippage is high (=
+        Caution, your slippage is high (=
         {selectedSlippage}). Your trade may be front run.
         <ChangeSlippageButton />
       </Typography>

package/src/components/warnings/MinRequiredSlippage.tsx

@@ -9,9 +9,9 @@ interface PropTypes {
 export function MinRequiredSlippage({ minRequiredSlippage }: PropTypes) {
   return (
     <Typography variant="body2">
-      slippage is low =&gt; We recommend you to increase slippage to at least
+      We recommend you to increase slippage to at least &nbsp;
       {minRequiredSlippage}
-      for this route.
+      &nbsp; for this route.
       <ChangeSlippageButton />
     </Typography>
   );

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/pages/ConfirmSwapPage.tsx

@@ -6,11 +6,14 @@ import { useSettingsStore } from '../store/settings';
 import { ConfirmSwapExtraMessages } from '../components/warnings/ConfirmSwapExtraMessages';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import { confirmSwap, useConfirmSwapStore } from '../store/confirmSwap';
 import { ConfirmSwapErrors } from '../components/ConfirmSwapErrors';
 import { ConfirmSwapWarnings } from '../components/ConfirmSwapWarnings';
 import { useManager } from '@rango-dev/queue-manager-react';
 import { useUiStore } from '../store/ui';
+import { useConfirmSwap } from '../hooks/useConfirmSwap';
+import { ConfirmSwapErrorTypes } from '../types';
+import { useMetaStore } from '../store/meta';
+import { getBestRouteWithCalculatedFees } from '../utils/routing';
 
 export function ConfirmSwapPage() {
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
@@ -19,18 +22,22 @@ export function ConfirmSwapPage() {
   const navigate = useNavigate();
 
   const bestRoute = useBestRouteStore.use.bestRoute();
+  const fetchingBestRoute = useBestRouteStore.use.loading();
+  const { tokens } = useMetaStore.use.meta();
 
-  const loading = useConfirmSwapStore.use.loading();
-  const warnings = useConfirmSwapStore.use.warnings();
-  const errors = useConfirmSwapStore.use.errors();
   const slippage = useSettingsStore.use.slippage();
   const customSlippage = useSettingsStore.use.customSlippage();
   const selectedSlippage = customSlippage || slippage;
+  const { loading, errors, warnings, confirmSwap } = useConfirmSwap();
+
+  const showHighSlippageWarning = !errors.find(
+    (error) => error.type === ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE
+  );
 
   return (
     <ConfirmSwap
       onConfirm={() => {
-        confirmSwap().then((swap) => {
+        confirmSwap?.().then((swap) => {
           if (swap) {
             manager?.create('swap', { swapDetails: swap });
             setSelectedSwap(swap.requestId);
@@ -41,19 +48,21 @@ export function ConfirmSwapPage() {
         });
       }}
       onBack={navigateBackFrom.bind(null, navigationRoutes.confirmSwap)}
-      bestRoute={bestRoute}
+      bestRoute={getBestRouteWithCalculatedFees(bestRoute, tokens)}
       loading={loading}
       errors={ConfirmSwapErrors(errors)}
       warnings={ConfirmSwapWarnings(warnings)}
       extraMessages={
-        <ConfirmSwapExtraMessages selectedSlippage={selectedSlippage} />
+        showHighSlippageWarning && (
+          <ConfirmSwapExtraMessages selectedSlippage={selectedSlippage} />
+        )
       }
       confirmButtonTitle={
         warnings.length > 0 || errors.length > 0
           ? 'Proceed anyway!'
           : 'Confirm swap!'
       }
-      confirmButtonDisabled={errors.length > 0}
+      confirmButtonDisabled={fetchingBestRoute}
     />
   );
 }