@rango-dev/widget-embedded 0.17.1-next.9 → 0.19.0

package/src/components/RouteErrors/RouteErrorsModal.tsx

@@ -0,0 +1,129 @@
+import type { ModalPropTypes } from './RouteErrors.types';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  Divider,
+  MessageBox,
+  Modal,
+  Typography,
+  WarningIcon,
+} from '@rango-dev/ui';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { errorMessages } from '../../constants/errors';
+import { navigationRoutes } from '../../constants/navigationRoutes';
+import {
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
+  HIGHT_PRICE_IMPACT,
+  PERCENTAGE_CHANGE_MAX_DECIMALS,
+  PERCENTAGE_CHANGE_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../../constants/routing';
+import { numberToString } from '../../utils/numbers';
+
+import { Flex } from './RouteErrors.styles';
+import { RouteErrorsModalItem } from './RouteErrorsModalItem';
+
+export function RouteErrorsModal(props: ModalPropTypes) {
+  const {
+    highValueLoss,
+    open,
+    onToggle,
+    percentageChange,
+    inputUsdValue,
+    outputUsdValue,
+    totalFeeInUsd,
+  } = props;
+  const navigate = useNavigate();
+  const type =
+    highValueLoss && !!percentageChange?.lt(HIGHT_PRICE_IMPACT)
+      ? 'error'
+      : 'warning';
+  const highValueLossData = [
+    {
+      title: i18n.t('Swapping'),
+      value: numberToString(
+        inputUsdValue,
+        USD_VALUE_MIN_DECIMALS,
+        USD_VALUE_MAX_DECIMALS
+      ),
+    },
+    {
+      title: i18n.t('Gas cost'),
+      value: numberToString(
+        totalFeeInUsd,
+        GAS_FEE_MIN_DECIMALS,
+        GAS_FEE_MAX_DECIMALS
+      ),
+    },
+    {
+      title: i18n.t('Receiving'),
+      value: numberToString(
+        outputUsdValue,
+        USD_VALUE_MIN_DECIMALS,
+        USD_VALUE_MAX_DECIMALS
+      ),
+    },
+    {
+      title: i18n.t('Price impact'),
+      value: numberToString(
+        percentageChange,
+        PERCENTAGE_CHANGE_MIN_DECIMALS,
+        PERCENTAGE_CHANGE_MAX_DECIMALS
+      ),
+      valueColor: `${type}500`,
+    },
+  ];
+
+  return (
+    <Modal
+      open={open}
+      onClose={() => onToggle(false)}
+      container={document.getElementById('swap-box') || document.body}>
+      {highValueLoss ? (
+        <MessageBox
+          type={type}
+          title={errorMessages().highValueLossError.impactTitle}
+          description={errorMessages().highValueLossError.description}
+        />
+      ) : (
+        <MessageBox
+          type={type}
+          title={errorMessages().unknownPriceError.impactTitle}
+          description={errorMessages().unknownPriceError.description}
+        />
+      )}
+      {highValueLoss && (
+        <Flex>
+          <Divider size={20} />
+          <Typography size="small" variant="title">
+            {i18n.t('Details')}
+          </Typography>
+          <Flex>
+            {highValueLossData.map((item, index) => {
+              const key = index;
+              return <RouteErrorsModalItem key={key} {...item} />;
+            })}
+          </Flex>
+        </Flex>
+      )}
+      <Divider size={32} />
+      <Button
+        type="primary"
+        size="large"
+        prefix={<WarningIcon />}
+        fullWidth
+        onClick={() => {
+          navigate(navigationRoutes.confirmSwap);
+        }}>
+        {highValueLoss
+          ? errorMessages().highValueLossError.confirmMessage
+          : errorMessages().unknownPriceError.confirmMessage}
+      </Button>
+    </Modal>
+  );
+}

package/src/components/{QuoteWarningsAndErrors/QuoteErrorsModalItem.tsx → RouteErrors/RouteErrorsModalItem.tsx}

@@ -1,11 +1,11 @@
-import type { ModalContentData } from './QuoteWarningsAndErrors.types';
+import type { ModalContentData } from './RouteErrors.types';
 
 import { Typography } from '@rango-dev/ui';
 import React from 'react';
 
-import { Item } from './QuoteWarningsAndErrors.styles';
+import { Item } from './RouteErrors.styles';
 
-export function QuoteErrorsModalItem(props: ModalContentData) {
+export function RouteErrorsModalItem(props: ModalContentData) {
   const { title, value, valueColor } = props;
 
   return (

package/src/components/RouteErrors/index.ts

@@ -0,0 +1 @@
+export { RouteErrors } from './RouteErrors';

package/src/components/SwapDetails/SwapDetails.Placeholder.tsx

@@ -31,7 +31,7 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
       noPadding
       header={{
         title: i18n.t('Swap and Bridge'),
-        onBack: () => navigateBackFrom(navigationRoutes.swapDetails),
+        onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
         suffix: <SuffixContainer />,
       }}>
       {showSkeleton && (

package/src/components/SwapDetails/SwapDetails.tsx

@@ -13,7 +13,8 @@ import {
   CopyIcon,
   Divider,
   IconButton,
-  QuoteCost,
+  RouteCost,
+  RouteSummary,
   StepDetails,
   Typography,
   useCopyToClipboard,
@@ -34,17 +35,18 @@ import {
   USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
 import { useNavigateBack } from '../../hooks/useNavigateBack';
-import { useAppStore } from '../../store/AppStore';
+import { useBestRouteStore } from '../../store/bestRoute';
+import { useMetaStore } from '../../store/meta';
 import { useNotificationStore } from '../../store/notification';
-import { useQuoteStore } from '../../store/quote';
 import {
   numberToString,
   secondsToString,
   totalArrivalTime,
 } from '../../utils/numbers';
-import { getPriceImpact, getPriceImpactLevel } from '../../utils/quote';
+import { getPriceImpactLevel } from '../../utils/routing';
 import {
   getLastConvertedTokenInFailedSwap,
+  getPercentageChange,
   getSwapMessages,
   shouldRetrySwap,
 } from '../../utils/swap';
@@ -52,7 +54,6 @@ import { getSwapDate } from '../../utils/time';
 import { getConciseAddress, getUsdPrice } from '../../utils/wallets';
 import { SuffixContainer } from '../HeaderButtons/HeaderButtons.styles';
 import { Layout } from '../Layout';
-import { QuoteSummary } from '../Quote';
 import {
   SwapDetailsCompleteModal,
   SwapDetailsModal,
@@ -64,9 +65,7 @@ import { Container, HeaderDetails, StepsList } from './SwapDetails.styles';
 export function SwapDetails(props: SwapDetailsProps) {
   const { swap, requestId, onDelete, onCancel: onCancelProps } = props;
   const { canSwitchNetworkTo, connect, getWalletInfo } = useWallets();
-  const blockchains = useAppStore().blockchains();
-  const tokens = useAppStore().tokens();
-  const retry = useQuoteStore.use.retry();
+  const retry = useBestRouteStore.use.retry();
   const navigate = useNavigate();
   const { navigateBackFrom } = useNavigateBack();
   const [_, handleCopy] = useCopyToClipboard(RESET_INTERVAL);
@@ -75,6 +74,9 @@ export function SwapDetails(props: SwapDetailsProps) {
   const [showCompletedModal, setShowCompletedModal] = useState<
     'success' | 'failed' | null
   >(null);
+  const {
+    meta: { tokens, blockchains },
+  } = useMetaStore();
 
   const onCancel = () => {
     onCancelProps();
@@ -149,7 +151,7 @@ export function SwapDetails(props: SwapDetailsProps) {
     showNetworkModal: currentStepNetworkStatus,
     setNetworkModal: setModalState,
     message: stepMessage,
-    blockchains: blockchains,
+    blockchains,
   });
   const numberOfSteps = steps.length;
   const [firstStep, lastStep] = [swap.steps[0], swap.steps[numberOfSteps - 1]];
@@ -199,7 +201,7 @@ export function SwapDetails(props: SwapDetailsProps) {
     USD_VALUE_MAX_DECIMALS
   );
 
-  const percentageChange = getPriceImpact(inputUsdValue, outputUsdValue);
+  const percentageChange = getPercentageChange(inputUsdValue, outputUsdValue);
 
   const completeModalDesc =
     swap.status === 'success'
@@ -237,7 +239,7 @@ export function SwapDetails(props: SwapDetailsProps) {
       noPadding
       header={{
         title: i18n.t('Swap and Bridge'),
-        onBack: () => navigateBackFrom(navigationRoutes.swapDetails),
+        onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
         onCancel:
           swap.status === 'running' ? () => setModalState('cancel') : undefined,
         suffix: swap.status !== 'running' && (
@@ -263,7 +265,7 @@ export function SwapDetails(props: SwapDetailsProps) {
             type="primary"
             size="large"
             onClick={() => {
-              retry(swap, { blockchains: blockchains, tokens: tokens });
+              retry(swap);
               setTimeout(() => {
                 navigate(navigationRoutes.home);
               }, 0);
@@ -300,7 +302,7 @@ export function SwapDetails(props: SwapDetailsProps) {
         </HeaderDetails>
 
         <div className="output">
-          <QuoteCost
+          <RouteCost
             fee={numberToString(
               String(totalFee),
               GAS_FEE_MIN_DECIMALS,
@@ -309,7 +311,7 @@ export function SwapDetails(props: SwapDetailsProps) {
             time={secondsToString(totalArrivalTime(swap.steps))}
             steps={numberOfSteps}
           />
-          <QuoteSummary
+          <RouteSummary
             from={{
               price: {
                 value: numberToString(
@@ -347,11 +349,13 @@ export function SwapDetails(props: SwapDetailsProps) {
               },
             }}
             percentageChange={numberToString(
-              String(percentageChange),
+              percentageChange,
               PERCENTAGE_CHANGE_MIN_DECIMALS,
               PERCENTAGE_CHANGE_MAX_DECIMALS
             )}
-            warningLevel={getPriceImpactLevel(percentageChange ?? 0)}
+            warningLevel={getPriceImpactLevel(
+              percentageChange?.toNumber() ?? 0
+            )}
           />
         </div>
         <div className="title-steps">
@@ -373,7 +377,7 @@ export function SwapDetails(props: SwapDetailsProps) {
               <StepDetails
                 key={key}
                 step={step}
-                type="swap-progress"
+                type="route-progress"
                 ref={listRef}
                 state={state}
                 hasSeparator={index !== 0}
@@ -405,7 +409,7 @@ export function SwapDetails(props: SwapDetailsProps) {
         )}
         usdValue={outputUsdValue}
         percentageChange={numberToString(
-          String(percentageChange),
+          percentageChange,
           PERCENTAGE_CHANGE_MIN_DECIMALS,
           PERCENTAGE_CHANGE_MAX_DECIMALS
         )}

package/src/components/SwitchFromAndTo.tsx

@@ -1,7 +1,7 @@
 import { ReverseIcon, styled } from '@rango-dev/ui';
 import React from 'react';
 
-import { useQuoteStore } from '../store/quote';
+import { useBestRouteStore } from '../store/bestRoute';
 
 const SwitchButtonContainer = styled('div', {
   position: 'absolute',
@@ -27,7 +27,7 @@ const StyledButton = styled('div', {
 });
 
 export function SwitchFromAndToButton() {
-  const switchFromAndTo = useQuoteStore.use.switchFromAndTo();
+  const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
 
   return (
     <SwitchButtonContainer>

package/src/components/TokenList/TokenList.tsx

@@ -21,7 +21,8 @@ import {
 } from '@rango-dev/ui';
 import React, { forwardRef, useEffect, useState } from 'react';
 
-import { useAppStore } from '../../store/AppStore';
+import { useAppStore } from '../../store/app';
+import { useMetaStore } from '../../store/meta';
 import { useWalletsStore } from '../../store/wallets';
 import { generateRangeColors } from '../../utils/colors';
 
@@ -86,10 +87,10 @@ export function TokenList(props: PropTypes) {
   const { list, searchedFor = '', onChange, selectedBlockchain } = props;
 
   const [tokens, setTokens] = useState<TokenWithBalance[]>(list);
-  const fetchStatus = useAppStore().fetchStatus;
-  const blockchains = useAppStore().blockchains();
+  const loadingStatus = useMetaStore.use.loadingStatus();
   const [hasNextPage, setHasNextPage] = useState<boolean>(true);
   const loadingWallet = useWalletsStore.use.loading();
+  const { blockchains } = useMetaStore.use.meta();
   const { isTokenPinned } = useAppStore();
 
   // eslint-disable-next-line react/display-name
@@ -267,8 +268,8 @@ export function TokenList(props: PropTypes) {
         {i18n.t('Select Token')}
       </Typography>
       <Divider size={4} />
-      {fetchStatus === 'loading' && <LoadingTokenList size={PAGE_SIZE} />}
-      {fetchStatus === 'success' && <List>{renderList()}</List>}
+      {loadingStatus === 'loading' && <LoadingTokenList size={PAGE_SIZE} />}
+      {loadingStatus === 'success' && <List>{renderList()}</List>}
     </Container>
   );
 }

package/src/components/UpdateUrl.tsx

@@ -1,3 +1,5 @@
+import type { WidgetConfig } from '../types';
+
 import { useEffect, useRef } from 'react';
 import {
   createSearchParams,
@@ -8,32 +10,33 @@ import {
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { SearchParams } from '../constants/searchParams';
 import { useSyncStoresWithConfig } from '../hooks/useSyncStoresWithConfig';
-import { useAppStore } from '../store/AppStore';
-import { useQuoteStore } from '../store/quote';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useMetaStore } from '../store/meta';
 import { useUiStore } from '../store/ui';
-import { searchParamsToToken } from '../utils/quote';
+import { searchParamsToToken } from '../utils/routing';
+
+type Props = { config: WidgetConfig | undefined };
 
-export function UpdateUrl() {
+export function UpdateUrl(props: Props) {
   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 fromBlockchain = useBestRouteStore.use.fromBlockchain();
+  const toBlockchain = useBestRouteStore.use.toBlockchain();
+  const fromToken = useBestRouteStore.use.fromToken();
+  const toToken = useBestRouteStore.use.toToken();
+  const setFromBlockchain = useBestRouteStore.use.setFromBlockchain();
+  const setFromToken = useBestRouteStore.use.setFromToken();
+  const setToBlockchain = useBestRouteStore.use.setToBlockchain();
+  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();
-  useSyncStoresWithConfig();
+  useSyncStoresWithConfig(props.config);
 
   useEffect(() => {
     const params: Record<string, string> = {};
@@ -57,8 +60,7 @@ export function UpdateUrl() {
         toChainString = '',
         toTokenString = '',
         fromAmount = '';
-      const autoConnect = searchParamsRef.current[SearchParams.AUTO_CONNECT];
-      if (fetchMetaStatus !== 'success') {
+      if (loadingStatus !== 'success') {
         fromChainString = searchParamsRef.current[SearchParams.FROM_CHAIN];
         fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
         toChainString = searchParamsRef.current[SearchParams.TO_CHAIN];
@@ -92,9 +94,6 @@ export function UpdateUrl() {
           ...(fromAmount && {
             [SearchParams.FROM_AMOUNT]: fromAmount.toString(),
           }),
-          ...(autoConnect && {
-            [SearchParams.AUTO_CONNECT]: autoConnect,
-          }),
         },
         { replace: true }
       );
@@ -110,7 +109,7 @@ export function UpdateUrl() {
   ]);
 
   useEffect(() => {
-    if (fetchMetaStatus === 'success') {
+    if (loadingStatus === 'success') {
       const fromChainString = searchParams.get(SearchParams.FROM_CHAIN);
       const fromTokenString = searchParams.get(SearchParams.FROM_TOKEN);
       const toChainString = searchParams.get(SearchParams.TO_CHAIN);
@@ -135,29 +134,20 @@ export function UpdateUrl() {
       if (!!fromBlockchain) {
         setFromBlockchain(fromBlockchain);
         if (!!fromToken) {
-          setFromToken({
-            token: fromToken,
-            meta: {
-              blockchains: blockchains,
-              tokens: tokens,
-            },
-          });
+          setFromToken(fromToken);
         }
       }
       if (!!toBlockchain) {
         setToBlockchain(toBlockchain);
         if (!!toToken) {
-          setToToken({
-            token: toToken,
-            meta: { blockchains: blockchains, tokens: tokens },
-          });
+          setToToken(toToken);
         }
       }
       if (fromAmount) {
         setInputAmount(fromAmount);
       }
     }
-  }, [fetchMetaStatus]);
+  }, [loadingStatus]);
 
   return null;
 }

package/src/components/WidgetEvents.tsx

@@ -8,13 +8,11 @@ import {
 } from '@rango-dev/queue-manager-rango-preset';
 import { useEffect } from 'react';
 
-import { useAppStore } from '../store/AppStore';
 import { useNotificationStore } from '../store/notification';
 import { useWalletsStore } from '../store/wallets';
 import { validBlockedStatuses } from '../types/notification';
 
 export function WidgetEvents() {
-  const tokens = useAppStore().tokens();
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const getWalletsDetails = useWalletsStore.use.getWalletsDetails();
   const setNotification = useNotificationStore.use.setNotification();
@@ -40,8 +38,8 @@ export function WidgetEvents() {
             (wallet) => wallet.chain === step?.toBlockchain
           );
 
-        fromAccount && getWalletsDetails([fromAccount], tokens);
-        toAccount && getWalletsDetails([toAccount], tokens);
+        fromAccount && getWalletsDetails([fromAccount]);
+        toAccount && getWalletsDetails([toAccount]);
       }
       if (
         (event.type === StepEventType.TX_EXECUTION_BLOCKED &&

package/src/constants/errors.ts

@@ -1,8 +1,8 @@
-import type { QuoteError } from '../types';
+import type { ConfirmSwapError } from '../types';
 
 import { i18n } from '@lingui/core';
 
-import { QuoteErrorType } from '../types';
+import { ConfirmSwapErrorTypes } from '../types';
 
 export const errorMessages = () => {
   return {
@@ -13,7 +13,7 @@ export const errorMessages = () => {
         'You have limited the liquidity sources and this might result in Rango finding no routes. Please consider resetting your liquidity sources'
       ),
     },
-    noResultError: {
+    noRoutesError: {
       title: i18n.t('No Routes Found'),
       description: i18n.t(
         "Reasons why Rango couldn't find a route: low liquidity on token, very low input amount or no routes available for the selected input/output token combination."
@@ -31,7 +31,7 @@ export const errorMessages = () => {
       ),
       confirmMessage: i18n.t('Confirm High price impact'),
     },
-    quoteUpdatedWithHighValueLoss: {
+    routeUpdatedWithHighValueLoss: {
       title: i18n.t(
         'Route updated and price impact is too high, try again later!'
       ),
@@ -47,12 +47,14 @@ export const errorMessages = () => {
   };
 };
 
-export function getQuoteErrorMessage(error: QuoteError) {
+export function getConfirmSwapErrorMessage(error: ConfirmSwapError) {
   switch (error.type) {
-    case QuoteErrorType.NO_RESULT:
-      return error.diagnosisMessage ?? errorMessages().noResultError.title;
-    case QuoteErrorType.REQUEST_FAILED:
+    case ConfirmSwapErrorTypes.NO_ROUTE:
+      return error.diagnosisMessage ?? errorMessages().noRoutesError.title;
+    case ConfirmSwapErrorTypes.REQUEST_FAILED:
       return errorMessages().genericServerError;
+    case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS:
+      return errorMessages().routeUpdatedWithHighValueLoss.title;
     default:
       return '';
   }

package/src/constants/messages.ts

@@ -5,6 +5,6 @@ export const swapButtonTitles = () => {
     connectWallet: i18n.t('Connect Wallet'),
     swap: i18n.t('Swap'),
     swapAnyway: i18n.t('Swap anyway'),
-    ethWarning: i18n.t('The route goes through Ethereum. Continue?'),
+    ethRouteWarning: i18n.t('The route goes through Ethereum. Continue?'),
   };
 };

package/src/constants/searchParams.ts

@@ -4,5 +4,4 @@ export enum SearchParams {
   'TO_CHAIN' = 'toBlockchain',
   'TO_TOKEN' = 'toToken',
   'FROM_AMOUNT' = 'fromAmount',
-  'AUTO_CONNECT' = 'autoConnect',
 }

package/src/constants/warnings.ts

@@ -1,14 +1,14 @@
-import type { QuoteUpdateWarning } from '../types';
+import type { RouteWarning } from '../types';
 
 import { i18n } from '@lingui/core';
 
-import { QuoteUpdateType } from '../types';
+import { RouteWarningType } from '../types';
 
-export function getQuoteUpdateWarningMessage(warning: QuoteUpdateWarning) {
+export function getRouteWarningMessage(warning: RouteWarning) {
   switch (warning.type) {
-    case QuoteUpdateType.QUOTE_UPDATED:
+    case RouteWarningType.ROUTE_UPDATED:
       return i18n.t('Route has been updated.');
-    case QuoteUpdateType.QUOTE_AND_OUTPUT_AMOUNT_UPDATED:
+    case RouteWarningType.ROUTE_AND_OUTPUT_AMOUNT_UPDATED:
       return i18n.t(
         'Output amount changed to {newOutputAmount} ({percentageChange}% change).',
         {
@@ -16,9 +16,9 @@ export function getQuoteUpdateWarningMessage(warning: QuoteUpdateWarning) {
           percentageChange: warning.percentageChange,
         }
       );
-    case QuoteUpdateType.QUOTE_SWAPPERS_UPDATED:
+    case RouteWarningType.ROUTE_SWAPPERS_UPDATED:
       return i18n.t('Route swappers has been updated.');
-    case QuoteUpdateType.QUOTE_COINS_UPDATED:
+    case RouteWarningType.ROUTE_COINS_UPDATED:
       return i18n.t('Route internal coins has been updated.');
     default:
       return '';