@rango-dev/widget-embedded 0.17.1-next.3 → 0.17.1-next.30

package/src/components/Quote/Quote.styles.ts

@@ -1,5 +1,5 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { darkTheme, styled } from '@rango-dev/ui';
+import { darkTheme, Image, styled } from '@rango-dev/ui';
 
 import { CollapsibleContent } from '../ConfirmWalletsModal/ConfirmWallets.styles';
 
@@ -13,6 +13,7 @@ export const QuoteContainer = styled(Collapsible.Root, {
   overflowY: 'hidden',
   width: '100%',
   borderRadius: '$xm',
+  cursor: 'default',
   variants: {
     recommended: {
       true: {
@@ -107,11 +108,19 @@ export const SummaryContainer = styled('div', {
   '& .summary': {
     width: '100%',
     padding: '$15 $15 $10 $15',
+    cursor: 'default',
   },
   '& .basic-info': {
     paddingTop: '$10',
     display: 'flex',
     alignItems: 'center',
+    '.usd-value': {
+      $$color: '$colors$neutral600',
+      [`.${darkTheme} &`]: {
+        $$color: '$colors$neutral700',
+      },
+      color: '$$color',
+    },
   },
 });
 
@@ -162,6 +171,24 @@ export const Chains = styled(Collapsible.Trigger, {
   '& div:nth-child(1)': { display: 'flex' },
 });
 
+export const ChainImageContainer = styled('div', {
+  width: '18px',
+  height: '18px',
+  borderRadius: '100%',
+  border: '1.5px transparent solid',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  variants: {
+    state: {
+      error: {
+        borderColor: '$error500',
+      },
+      warning: { borderColor: '$warning500' },
+    },
+  },
+});
+
 export const Content = styled(CollapsibleContent, {
   width: '100%',
 });

package/src/components/Quote/Quote.tsx

@@ -25,13 +25,20 @@ import {
   PERCENTAGE_CHANGE_MIN_DECIMALS,
   TOKEN_AMOUNT_MAX_DECIMALS,
   TOKEN_AMOUNT_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
 import {
   FooterAlert,
   FooterStepAlarm,
 } from '../../containers/QuoteInfo/QuoteInfo.styles';
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 import { QuoteErrorType, QuoteWarningType } from '../../types';
+import { getContainer } from '../../utils/common';
+import {
+  getBlockchainShortNameFor,
+  getSwapperDisplayName,
+} from '../../utils/meta';
 import {
   numberToString,
   secondsToString,
@@ -41,6 +48,7 @@ import { getPriceImpact, getPriceImpactLevel } from '../../utils/quote';
 import { getTotalFeeInUsd } from '../../utils/swap';
 
 import {
+  ChainImageContainer,
   Chains,
   Content,
   EXPANDABLE_QUOTE_TRANSITION_DURATION,
@@ -53,9 +61,6 @@ import {
 import { QuoteSummary } from './QuoteSummary';
 
 export function Quote(props: QuoteProps) {
-  const {
-    meta: { tokens },
-  } = useMetaStore();
   const {
     quote,
     input,
@@ -65,19 +70,39 @@ export function Quote(props: QuoteProps) {
     type,
     recommended = true,
   } = props;
+  const tokens = useAppStore().tokens();
+  const blockchains = useAppStore().blockchains();
+  const swappers = useAppStore().swappers();
 
   const [expanded, setExpanded] = useState(props.expanded);
   const quoteRef = useRef<HTMLButtonElement | null>(null);
+  const prevExpanded = useRef(expanded);
   const totalFee = numberToString(
     getTotalFeeInUsd(quote.result?.swaps ?? [], tokens),
     GAS_FEE_MIN_DECIMALS,
     GAS_FEE_MAX_DECIMALS
   );
   const totalTime = secondsToString(totalArrivalTime(quote.result?.swaps));
-
+  const roundedInput = numberToString(
+    input.value,
+    TOKEN_AMOUNT_MIN_DECIMALS,
+    TOKEN_AMOUNT_MAX_DECIMALS
+  );
+  const roundedOutput = numberToString(
+    output.value,
+    TOKEN_AMOUNT_MIN_DECIMALS,
+    TOKEN_AMOUNT_MAX_DECIMALS
+  );
+  const roundedOutputUsdValue = output.usdValue
+    ? numberToString(
+        output.usdValue,
+        USD_VALUE_MIN_DECIMALS,
+        USD_VALUE_MAX_DECIMALS
+      )
+    : '';
   const priceImpact = getPriceImpact(input.usdValue, output.usdValue ?? null);
   const percentageChange = numberToString(
-    String(priceImpact),
+    priceImpact,
     PERCENTAGE_CHANGE_MIN_DECIMALS,
     PERCENTAGE_CHANGE_MAX_DECIMALS
   );
@@ -89,8 +114,8 @@ export function Quote(props: QuoteProps) {
       const stepHasError =
         (error?.type === QuoteErrorType.BRIDGE_LIMIT &&
           error.swap.swapperId === swap.swapperId) ||
-        (warning?.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE &&
-          warning.recommendedSlippages?.has(index));
+        (error?.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE &&
+          error.recommendedSlippages?.has(index));
       const stepHasWarning =
         warning?.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE &&
         warning.recommendedSlippages?.has(index);
@@ -102,11 +127,17 @@ export function Quote(props: QuoteProps) {
       }
 
       return {
-        swapper: { displayName: swap.swapperId, image: swap.swapperLogo },
+        swapper: {
+          displayName: getSwapperDisplayName(swap.swapperId, swappers),
+          image: swap.swapperLogo,
+        },
         from: {
           token: { displayName: swap.from.symbol, image: swap.from.logo },
           chain: {
-            displayName: swap.from.blockchain,
+            displayName: getBlockchainShortNameFor(
+              swap.from.blockchain,
+              blockchains
+            ),
             image: swap.from.blockchainLogo,
           },
           price: {
@@ -117,17 +148,38 @@ export function Quote(props: QuoteProps) {
                     TOKEN_AMOUNT_MIN_DECIMALS,
                     TOKEN_AMOUNT_MAX_DECIMALS
                   )
-                : swap.fromAmount,
+                : numberToString(
+                    swap.fromAmount,
+                    TOKEN_AMOUNT_MIN_DECIMALS,
+                    TOKEN_AMOUNT_MAX_DECIMALS
+                  ),
+            usdValue: numberToString(
+              (swap.from.usdPrice ?? 0) * parseFloat(swap.fromAmount),
+              USD_VALUE_MIN_DECIMALS,
+              USD_VALUE_MAX_DECIMALS
+            ),
           },
         },
         to: {
           token: { displayName: swap.to.symbol, image: swap.to.logo },
           chain: {
-            displayName: swap.to.blockchain,
+            displayName: getBlockchainShortNameFor(
+              swap.to.blockchain,
+              blockchains
+            ),
             image: swap.to.blockchainLogo,
           },
           price: {
-            value: swap.toAmount,
+            value: numberToString(
+              swap.toAmount,
+              TOKEN_AMOUNT_MIN_DECIMALS,
+              TOKEN_AMOUNT_MAX_DECIMALS
+            ),
+            usdValue: numberToString(
+              (swap.to.usdPrice ?? 0) * parseFloat(swap.toAmount),
+              USD_VALUE_MIN_DECIMALS,
+              USD_VALUE_MAX_DECIMALS
+            ),
           },
         },
         state: stepState,
@@ -185,7 +237,7 @@ export function Quote(props: QuoteProps) {
                         variant="body"
                         color="neutral900">
                         {i18n.t({
-                          id: 'min required Slippage: {minRequiredSlippage}',
+                          id: 'Minimum required slippage is {minRequiredSlippage}',
                           values: {
                             ...(error?.type ===
                               QuoteErrorType.INSUFFICIENT_SLIPPAGE && {
@@ -211,14 +263,16 @@ export function Quote(props: QuoteProps) {
   };
   const steps = getQuoteSteps(quote.result?.swaps ?? []);
   const numberOfSteps = steps.length;
+  const tooltipContainer = getContainer();
 
   useLayoutEffect(() => {
-    if (expanded && quoteRef.current) {
+    if (expanded && !prevExpanded.current && quoteRef.current) {
       setTimeout(() => {
         quoteRef?.current?.scrollIntoView({ behavior: 'smooth' });
       }, EXPANDABLE_QUOTE_TRANSITION_DURATION);
     }
-  }, [expanded]);
+    prevExpanded.current = expanded;
+  }, [expanded, prevExpanded]);
 
   return (
     <>
@@ -237,16 +291,18 @@ export function Quote(props: QuoteProps) {
                 size="small"
                 variant="body"
                 style={{ letterSpacing: 0.4 }}>
-                {`${input.value} ${steps[0].from.token.displayName} = ${
-                  output.value
-                } ${steps[steps.length - 1].to.token.displayName}`}
+                {`${roundedInput} ${
+                  steps[0].from.token.displayName
+                } = ${roundedOutput} ${
+                  steps[steps.length - 1].to.token.displayName
+                }`}
               </Typography>
               <Typography
                 color="$neutral600"
                 ml={2}
                 size="xsmall"
                 variant="body">
-                {`($${output.usdValue})`}
+                {`($${roundedOutputUsdValue})`}
               </Typography>
             </div>
           )}
@@ -254,7 +310,7 @@ export function Quote(props: QuoteProps) {
             <TokenAmount
               type="output"
               direction="vertical"
-              price={{ value: output.value, usdValue: output.usdValue }}
+              price={{ value: roundedOutput, usdValue: roundedOutputUsdValue }}
               token={{
                 displayName: steps[numberOfSteps - 1].to.token.displayName,
                 image: steps[numberOfSteps - 1].to.token.image,
@@ -283,38 +339,48 @@ export function Quote(props: QuoteProps) {
           <Chains
             ref={(ref) => (quoteRef.current = ref)}
             recommended={recommended}
-            onClick={setExpanded.bind(null, (prevState) => !prevState)}>
+            onClick={() => setExpanded((prevState) => !prevState)}>
             <div>
               {steps.map((step, index) => {
                 const key = `item-${index}`;
+                const arrow = (
+                  <IconContainer>
+                    <ChevronRightIcon
+                      size={12}
+                      color="black"
+                      {...(step.state && {
+                        color: step.state === 'error' ? 'error' : 'warning',
+                      })}
+                    />
+                  </IconContainer>
+                );
                 return (
                   <React.Fragment key={key}>
                     <Tooltip
-                      container={props.tooltipContainer}
+                      container={tooltipContainer}
                       side="bottom"
                       sideOffset={4}
                       content={step.from.chain.displayName}>
-                      <Image src={step.from.chain.image} size={16} />
+                      <ChainImageContainer
+                        state={step.state || steps[index - 1]?.state}>
+                        <Image src={step.from.chain.image} size={16} />
+                      </ChainImageContainer>
                     </Tooltip>
                     {index === numberOfSteps - 1 && (
                       <>
-                        <IconContainer>
-                          <ChevronRightIcon size={12} color="black" />
-                        </IconContainer>
+                        {arrow}
                         <Tooltip
-                          container={props.tooltipContainer}
+                          container={tooltipContainer}
                           side="bottom"
                           sideOffset={4}
                           content={step.to.chain.displayName}>
-                          <Image src={step.to.chain.image} size={16} />
+                          <ChainImageContainer state={step.state}>
+                            <Image src={step.to.chain.image} size={16} />
+                          </ChainImageContainer>
                         </Tooltip>
                       </>
                     )}
-                    {index !== numberOfSteps - 1 && (
-                      <IconContainer>
-                        <ChevronRightIcon size={12} color="black" />
-                      </IconContainer>
-                    )}
+                    {index !== numberOfSteps - 1 && <>{arrow}</>}
                   </React.Fragment>
                 );
               })}

package/src/components/Quote/Quote.types.ts

@@ -12,5 +12,4 @@ export type QuoteProps = {
   input: { value: string; usdValue: string };
   output: { value: string; usdValue?: string };
   expanded?: boolean;
-  tooltipContainer?: HTMLElement;
 };

package/src/components/Quote/QuoteSkeleton.tsx

@@ -54,7 +54,7 @@ export function QuoteSkeleton(props: PropTypes) {
   );
 
   return (
-    <Container>
+    <Container rounded={type !== 'basic'}>
       <div className="cost-and-tag">
         <div className="cost">
           <Skeleton width={60} height={10} variant="rounded" />

package/src/components/QuoteWarningsAndErrors/QuoteErrorsModalItem.tsx

@@ -10,7 +10,7 @@ export function QuoteErrorsModalItem(props: ModalContentData) {
 
   return (
     <Item>
-      <Typography size="medium" variant="label" color="neutral600">
+      <Typography size="medium" variant="label" className="_title">
         {title}
       </Typography>
       <Typography

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.helpers.ts

@@ -31,6 +31,7 @@ export function makeAlerts(
       if (warningLevel === 'high') {
         alertInfo.alertType = 'error';
       }
+      alertInfo.action = null;
       alertInfo.title = errorMessages().highValueLossError.title;
     }
     if (warning.type === QuoteWarningType.UNKNOWN_PRICE) {
@@ -38,14 +39,15 @@ export function makeAlerts(
     }
     if (warning.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE) {
       alertInfo.title = i18n.t({
-        id: 'minimum required slippage for this route: {minRequiredSlippage}',
+        id: 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
         values: {
           minRequiredSlippage: warning.minRequiredSlippage,
         },
       });
+      alertInfo.action = 'change-settings';
     }
     if (warning.type === QuoteWarningType.HIGH_SLIPPAGE) {
-      alertInfo.title = i18n.t('Caution, your slippage is high');
+      alertInfo.title = i18n.t('Caution, your slippage is high.');
     }
     return alertInfo;
   }
@@ -53,11 +55,16 @@ export function makeAlerts(
     alertInfo.alertType = 'error';
     if (error.type === QuoteErrorType.BRIDGE_LIMIT) {
       alertInfo.title = error.recommendation;
-      alertInfo.action = null;
+      alertInfo.action = 'show-info';
     }
 
     if (error.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE) {
-      alertInfo.title = '';
+      alertInfo.title = i18n.t({
+        id: 'You need to increase slippage to at least {minRequiredSlippage} for this route.',
+        values: {
+          minRequiredSlippage: error.minRequiredSlippage,
+        },
+      });
       alertInfo.action = 'change-settings';
     }
 

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.styles.ts

@@ -1,4 +1,4 @@
-import { styled } from '@rango-dev/ui';
+import { darkTheme, styled } from '@rango-dev/ui';
 
 export const Alerts = styled('div', {
   width: '100%',
@@ -19,6 +19,13 @@ export const Item = styled('div', {
   justifyContent: 'space-between',
   alignItems: 'center',
   width: '100%',
+  '._title': {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
 });
 
 export const Action = styled('div', {

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.tsx

@@ -3,9 +3,7 @@ import type { PropTypes } from './QuoteWarningsAndErrors.types';
 import { i18n } from '@lingui/core';
 import { Alert, Button, InfoIcon } from '@rango-dev/ui';
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
 
-import { navigationRoutes } from '../../constants/navigationRoutes';
 import { QuoteErrorType, QuoteWarningType } from '../../types';
 import { NoResult } from '../NoResult';
 
@@ -24,10 +22,9 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
     onOpenWarningModal,
     onCloseWarningModal,
     onConfirmWarningModal,
+    onChangeSettings,
   } = props;
 
-  const navigate = useNavigate();
-
   const warningModalHandlers = {
     open: showWarningModal,
     onClose: onCloseWarningModal,
@@ -58,20 +55,23 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
             title={alertInfo.title}
             type={alertInfo.alertType}
             variant="alarm"
-            action={
-              alertInfo.action === 'show-info' ? (
+            {...(alertInfo.action === 'show-info' && {
+              action: (
                 <Action onClick={onOpenWarningModal}>
                   <InfoIcon size={12} color="gray" />
                 </Action>
-              ) : (
+              ),
+            })}
+            {...(alertInfo.action === 'change-settings' && {
+              action: (
                 <Button
-                  size="xsmall"
-                  type={'error'}
-                  onClick={() => navigate(navigationRoutes.settings)}>
-                  {i18n.t('Change Settings')}
+                  size="xxsmall"
+                  type={alertInfo.alertType}
+                  onClick={onChangeSettings}>
+                  {i18n.t('Change')}
                 </Button>
-              )
-            }
+              ),
+            })}
           />
         </Alerts>
       )}

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.types.ts

@@ -9,6 +9,7 @@ export interface PropTypes {
   onOpenWarningModal: () => void;
   onCloseWarningModal: () => void;
   onConfirmWarningModal: () => void;
+  onChangeSettings: () => void;
 }
 
 type ModalPropTypesKeys = keyof Omit<PropTypes, 'extraSpace' | 'loading'>;

package/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { navigationRoutes } from '../../constants/navigationRoutes';
-import { useSettingsStore } from '../../store/settings';
+import { useAppStore } from '../../store/AppStore';
 import { QuoteWarningType } from '../../types';
 import { getContainer } from '../../utils/common';
 
@@ -21,7 +21,7 @@ type PropsTypes = {
 };
 
 export function SlippageWarningModal(props: PropsTypes) {
-  const { customSlippage, slippage } = useSettingsStore();
+  const { customSlippage, slippage } = useAppStore();
   const { open, onClose, onConfirm, warning } = props;
   const navigate = useNavigate();
   const userSlippage = customSlippage ?? slippage;
@@ -33,7 +33,7 @@ export function SlippageWarningModal(props: PropsTypes) {
         <Button
           size="small"
           variant="ghost"
-          onClick={() => navigate('/' + navigationRoutes.settings)}>
+          onClick={() => navigate('../' + navigationRoutes.settings)}>
           <Typography variant="label" size="medium" color="$neutral900">
             {i18n.t('Change settings')}
           </Typography>

package/src/components/Slippage/Slippage.tsx

@@ -14,17 +14,15 @@ import {
   MIN_SLIPPGAE,
   SLIPPAGES,
 } from '../../constants/swapSettings';
-import { useSettingsStore } from '../../store/settings';
+import { useAppStore } from '../../store/AppStore';
 import { getContainer } from '../../utils/common';
 
 import { BaseContainer, Head, SlippageChipsContainer } from './Slippage.styles';
 import { SlippageTooltipContent } from './SlippageTooltipContent';
 
 export function Slippage() {
-  const slippage = useSettingsStore.use.slippage();
-  const setSlippage = useSettingsStore.use.setSlippage();
-  const customSlippage = useSettingsStore.use.customSlippage();
-  const setCustomSlippage = useSettingsStore.use.setCustomSlippage();
+  const { slippage, setSlippage, customSlippage, setCustomSlippage } =
+    useAppStore();
 
   return (
     <BaseContainer>

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(navigationRoutes.swapDetails),
         suffix: <SuffixContainer />,
       }}>
       {showSkeleton && (

package/src/components/SwapDetails/SwapDetails.helpers.tsx

@@ -1,6 +1,6 @@
 import type { GetStep } from '../SwapDetailsAlerts';
-import type { PendingSwapStep } from '@rango-dev/queue-manager-rango-preset';
 import type { Step, StepDetailsProps } from '@rango-dev/ui';
+import type { PendingSwapStep } from 'rango-types';
 
 import React from 'react';