@rango-dev/widget-embedded 0.17.1-next.2 → 0.17.1-next.21

package/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx

@@ -0,0 +1,77 @@
+import type {
+  HighSlippageWarning,
+  InsufficientSlippageWarning,
+} from '../../types';
+
+import { i18n } from '@lingui/core';
+import { Button, Divider, MessageBox, Modal, Typography } from '@rango-dev/ui';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { navigationRoutes } from '../../constants/navigationRoutes';
+import { useSettingsStore } from '../../store/settings';
+import { QuoteWarningType } from '../../types';
+import { getContainer } from '../../utils/common';
+
+type PropsTypes = {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  warning: InsufficientSlippageWarning | HighSlippageWarning;
+};
+
+export function SlippageWarningModal(props: PropsTypes) {
+  const { customSlippage, slippage } = useSettingsStore();
+  const { open, onClose, onConfirm, warning } = props;
+  const navigate = useNavigate();
+  const userSlippage = customSlippage ?? slippage;
+  return (
+    <Modal
+      anchor="bottom"
+      open={open}
+      prefix={
+        <Button
+          size="small"
+          variant="ghost"
+          onClick={() => navigate('../' + navigationRoutes.settings)}>
+          <Typography variant="label" size="medium" color="$neutral900">
+            {i18n.t('Change settings')}
+          </Typography>
+        </Button>
+      }
+      container={getContainer()}
+      onClose={onClose}>
+      <MessageBox
+        type="warning"
+        title={
+          warning.type === QuoteWarningType.HIGH_SLIPPAGE
+            ? i18n.t('High slippage')
+            : i18n.t('Low slippage')
+        }
+        description={
+          warning.type === QuoteWarningType.HIGH_SLIPPAGE
+            ? i18n.t({
+                id: ' Caution, your slippage is high (={userSlippage}). Your trade may be front run.',
+                values: { userSlippage },
+              })
+            : i18n.t({
+                id: 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
+                values: {
+                  minRequiredSlippage: warning.minRequiredSlippage,
+                },
+              })
+        }>
+        <Divider size={18} />
+        <Divider size={32} />
+        <Button
+          size="large"
+          type="primary"
+          variant="contained"
+          fullWidth
+          onClick={onConfirm}>
+          {i18n.t('Confirm anyway')}
+        </Button>
+      </MessageBox>
+    </Modal>
+  );
+}

package/src/components/QuoteWarningsAndErrors/UnknownPriceWarningModal.tsx

@@ -0,0 +1,38 @@
+import type { UnknownPriceWarning } from '../../types';
+
+import { Button, Divider, MessageBox, Modal, WarningIcon } from '@rango-dev/ui';
+import React from 'react';
+
+import { errorMessages } from '../../constants/errors';
+import { getContainer } from '../../utils/common';
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  warning: UnknownPriceWarning;
+};
+
+export function UnknownPriceWarningModal(props: Props) {
+  const { open, onClose, onConfirm } = props;
+
+  return (
+    <Modal open={open} onClose={onClose} container={getContainer()}>
+      <MessageBox
+        type="warning"
+        title={errorMessages().unknownPriceError.impactTitle}
+        description={errorMessages().unknownPriceError.description}
+      />
+
+      <Divider size={32} />
+      <Button
+        type="primary"
+        size="large"
+        prefix={<WarningIcon />}
+        fullWidth
+        onClick={onConfirm}>
+        {errorMessages().unknownPriceError.confirmMessage}
+      </Button>
+    </Modal>
+  );
+}

package/src/components/QuoteWarningsAndErrors/index.ts

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

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

@@ -10,8 +10,6 @@ import {
 } from '@rango-dev/ui';
 import React from 'react';
 
-import { navigationRoutes } from '../../constants/navigationRoutes';
-import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { SuffixContainer } from '../HeaderButtons/HeaderButtons.styles';
 import { Layout } from '../Layout';
 import { LoadingSwapDetails } from '../LoadingSwapDetails';
@@ -24,14 +22,12 @@ import {
 
 export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
   const { requestId, showSkeleton } = props;
-  const { navigateBackFrom } = useNavigateBack();
 
   return (
     <Layout
       noPadding
       header={{
         title: i18n.t('Swap and Bridge'),
-        onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
         suffix: <SuffixContainer />,
       }}>
       {showSkeleton && (

package/src/components/SwapDetails/SwapDetails.tsx

@@ -13,8 +13,7 @@ import {
   CopyIcon,
   Divider,
   IconButton,
-  RouteCost,
-  RouteSummary,
+  QuoteCost,
   StepDetails,
   Typography,
   useCopyToClipboard,
@@ -23,7 +22,6 @@ import { useWallets } from '@rango-dev/wallets-react';
 import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { navigationRoutes } from '../../constants/navigationRoutes';
 import {
   GAS_FEE_MAX_DECIMALS,
   GAS_FEE_MIN_DECIMALS,
@@ -34,19 +32,17 @@ import {
   USD_VALUE_MAX_DECIMALS,
   USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
-import { useNavigateBack } from '../../hooks/useNavigateBack';
-import { useBestRouteStore } from '../../store/bestRoute';
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
+import { useQuoteStore } from '../../store/quote';
 import {
   numberToString,
   secondsToString,
   totalArrivalTime,
 } from '../../utils/numbers';
-import { getPriceImpactLevel } from '../../utils/routing';
+import { getPriceImpact, getPriceImpactLevel } from '../../utils/quote';
 import {
   getLastConvertedTokenInFailedSwap,
-  getPercentageChange,
   getSwapMessages,
   shouldRetrySwap,
 } from '../../utils/swap';
@@ -54,6 +50,7 @@ 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,
@@ -65,18 +62,16 @@ 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 retry = useBestRouteStore.use.retry();
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
+  const retry = useQuoteStore.use.retry();
   const navigate = useNavigate();
-  const { navigateBackFrom } = useNavigateBack();
   const [_, handleCopy] = useCopyToClipboard(RESET_INTERVAL);
   const listRef = useRef<HTMLDivElement | null>(null);
   const [modalState, setModalState] = useState<ModalState>(null);
   const [showCompletedModal, setShowCompletedModal] = useState<
     'success' | 'failed' | null
   >(null);
-  const {
-    meta: { tokens, blockchains },
-  } = useMetaStore();
 
   const onCancel = () => {
     onCancelProps();
@@ -151,7 +146,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]];
@@ -201,7 +196,7 @@ export function SwapDetails(props: SwapDetailsProps) {
     USD_VALUE_MAX_DECIMALS
   );
 
-  const percentageChange = getPercentageChange(inputUsdValue, outputUsdValue);
+  const percentageChange = getPriceImpact(inputUsdValue, outputUsdValue);
 
   const completeModalDesc =
     swap.status === 'success'
@@ -239,7 +234,6 @@ export function SwapDetails(props: SwapDetailsProps) {
       noPadding
       header={{
         title: i18n.t('Swap and Bridge'),
-        onBack: navigateBackFrom.bind(null, navigationRoutes.swapDetails),
         onCancel:
           swap.status === 'running' ? () => setModalState('cancel') : undefined,
         suffix: swap.status !== 'running' && (
@@ -265,9 +259,10 @@ export function SwapDetails(props: SwapDetailsProps) {
             type="primary"
             size="large"
             onClick={() => {
-              retry(swap);
+              retry(swap, { blockchains: blockchains, tokens: tokens });
               setTimeout(() => {
-                navigate(navigationRoutes.home);
+                const home = '../../';
+                navigate(home);
               }, 0);
             }}>
             {i18n.t('Try again')}
@@ -302,7 +297,7 @@ export function SwapDetails(props: SwapDetailsProps) {
         </HeaderDetails>
 
         <div className="output">
-          <RouteCost
+          <QuoteCost
             fee={numberToString(
               String(totalFee),
               GAS_FEE_MIN_DECIMALS,
@@ -311,7 +306,7 @@ export function SwapDetails(props: SwapDetailsProps) {
             time={secondsToString(totalArrivalTime(swap.steps))}
             steps={numberOfSteps}
           />
-          <RouteSummary
+          <QuoteSummary
             from={{
               price: {
                 value: numberToString(
@@ -353,9 +348,7 @@ export function SwapDetails(props: SwapDetailsProps) {
               PERCENTAGE_CHANGE_MIN_DECIMALS,
               PERCENTAGE_CHANGE_MAX_DECIMALS
             )}
-            warningLevel={getPriceImpactLevel(
-              percentageChange?.toNumber() ?? 0
-            )}
+            warningLevel={getPriceImpactLevel(percentageChange ?? 0)}
           />
         </div>
         <div className="title-steps">
@@ -377,7 +370,7 @@ export function SwapDetails(props: SwapDetailsProps) {
               <StepDetails
                 key={key}
                 step={step}
-                type="route-progress"
+                type="swap-progress"
                 ref={listRef}
                 state={state}
                 hasSeparator={index !== 0}

package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx

@@ -12,8 +12,6 @@ import {
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { navigationRoutes } from '../../constants/navigationRoutes';
-
 export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
   const {
     open,
@@ -70,7 +68,10 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
           variant="contained"
           type="primary"
           size="large"
-          onClick={() => navigate(navigationRoutes.home)}>
+          onClick={() => {
+            const home = '../../';
+            navigate(home);
+          }}>
           <Typography variant="title" size="medium" color="neutral100">
             {i18n.t('Done')}
           </Typography>

package/src/components/SwapDetailsModal/SwapDetailsModal.Cancel.tsx

@@ -10,8 +10,8 @@ export const CancelContent = ({ onCancel, onClose }: CancelContentProps) => {
       <Divider size={20} />
       <MessageBox
         type="error"
-        title={i18n.t('Transaction Cancel')}
-        description={i18n.t('Are you sure you want to Cancel this swap?')}
+        title={i18n.t('Cancel Swap')}
+        description={i18n.t('Are you sure you want to cancel this swap?')}
       />
       <Divider size={32} />
       <Button

package/src/components/SwapsGroup/SwapsGroup.styles.ts

@@ -1,9 +1,16 @@
-import { styled } from '@rango-dev/ui';
+import { darkTheme, styled } from '@rango-dev/ui';
 
 export const Group = styled('div', {
   width: '100%',
   display: 'flex',
   flexDirection: 'column',
+  '.group-title': {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
 });
 
 export const Time = styled('div', {

package/src/components/SwapsGroup/SwapsGroup.tsx

@@ -34,7 +34,6 @@ export function SwapsGroup(props: PropTypes) {
                 <Typography
                   variant="label"
                   size="medium"
-                  color="neutral600"
                   className="group-title">
                   {i18n.t(group.title)}
                 </Typography>
@@ -68,7 +67,6 @@ export function SwapsGroup(props: PropTypes) {
                 <Typography
                   variant="label"
                   size="medium"
-                  color="neutral600"
                   className="group-title">
                   {i18n.t(group.title)}
                 </Typography>

package/src/components/SwitchFromAndTo.tsx

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

package/src/components/TokenList/TokenList.styles.ts

@@ -1,4 +1,4 @@
-import { styled, Typography } from '@rango-dev/ui';
+import { darkTheme, styled, Typography } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   display: 'flex',
@@ -40,7 +40,11 @@ export const List = styled('ul', {
         '& a': {
           fontSize: '$12',
           lineHeight: '$16',
-          color: '$neutral600',
+          $$color: '$colors$neutral600',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$neutral700',
+          },
+          color: '$$color',
           textDecoration: 'none',
         },
       },
@@ -92,6 +96,14 @@ export const TagTitle = styled(Typography, {});
 
 export const BalanceContainer = styled('div', {
   textAlign: 'right',
+
+  '.usd-value': {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
 });
 
 export const End = styled('ul', {

package/src/components/TokenList/TokenList.tsx

@@ -21,8 +21,7 @@ import {
 } from '@rango-dev/ui';
 import React, { forwardRef, useEffect, useState } from 'react';
 
-import { useAppStore } from '../../store/app';
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 import { useWalletsStore } from '../../store/wallets';
 import { generateRangeColors } from '../../utils/colors';
 
@@ -87,10 +86,10 @@ export function TokenList(props: PropTypes) {
   const { list, searchedFor = '', onChange, selectedBlockchain } = props;
 
   const [tokens, setTokens] = useState<TokenWithBalance[]>(list);
-  const loadingStatus = useMetaStore.use.loadingStatus();
+  const fetchStatus = useAppStore().fetchStatus;
+  const blockchains = useAppStore().blockchains();
   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
@@ -239,7 +238,7 @@ export function TokenList(props: PropTypes) {
                         {token.balance?.usdValue && (
                           <Typography
                             variant="body"
-                            color="neutral600"
+                            className="usd-value"
                             size="xsmall">
                             {`$${token.balance?.usdValue}`}
                           </Typography>
@@ -268,8 +267,8 @@ export function TokenList(props: PropTypes) {
         {i18n.t('Select Token')}
       </Typography>
       <Divider size={4} />
-      {loadingStatus === 'loading' && <LoadingTokenList size={PAGE_SIZE} />}
-      {loadingStatus === 'success' && <List>{renderList()}</List>}
+      {fetchStatus === 'loading' && <LoadingTokenList size={PAGE_SIZE} />}
+      {fetchStatus === 'success' && <List>{renderList()}</List>}
     </Container>
   );
 }

package/src/components/UpdateUrl.tsx

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

package/src/components/WidgetEvents.tsx

@@ -8,11 +8,13 @@ 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();
@@ -38,8 +40,8 @@ export function WidgetEvents() {
             (wallet) => wallet.chain === step?.toBlockchain
           );
 
-        fromAccount && getWalletsDetails([fromAccount]);
-        toAccount && getWalletsDetails([toAccount]);
+        fromAccount && getWalletsDetails([fromAccount], tokens);
+        toAccount && getWalletsDetails([toAccount], tokens);
       }
       if (
         (event.type === StepEventType.TX_EXECUTION_BLOCKED &&