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

package/src/components/LoadingSwapDetails/LoadingSwapDetails.styles.ts

@@ -1,74 +1,15 @@
-import { styled } from '@rango-dev/ui';
+import { css, styled } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   width: '100%',
   height: '100%',
   padding: '$0 $20',
-
-  '.cost': {
-    paddingTop: '$15',
-    display: 'flex',
-  },
-
-  '.quote-summary': {
-    padding: '$15 $0',
-  },
-
-  '.quote-summary-item': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-
-  '.token-amount': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-
-  '.quote-summary-separator': {
-    width: '0px',
-    height: '$16',
-    borderLeft: '1px solid $neutral400',
-    marginLeft: '13px',
-  },
-
-  '.swaps-steps': {
-    paddingBottom: '$10',
-  },
 });
 
 export const StepContainer = styled('div', {
   backgroundColor: '$neutral100',
   borderRadius: '$xm',
   padding: '$10 $15',
-
-  '.step-title': {
-    display: 'flex',
-    justifyContent: 'start',
-    alignItems: 'center',
-  },
-  '.step-tokens': {
-    paddingTop: '$5',
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '.step-token-info': {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '.step-icon-container': {
-    padding: '$4 $6',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-
-  '.extra-info': {
-    display: 'flex',
-    paddingTop: '$10',
-    paddingBottom: '$5',
-  },
 });
 export const StepSeparator = styled('div', {
   width: '0px',
@@ -76,3 +17,65 @@ export const StepSeparator = styled('div', {
   borderLeft: '1px dashed $neutral700',
   marginLeft: '25px',
 });
+
+export const quoteSummaryItemStyles = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const tokenAmountStyles = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const costStyles = css({
+  paddingTop: '$15',
+  display: 'flex',
+});
+
+export const quoteSummaryStyles = css({
+  padding: '$15 $0',
+});
+
+export const quoteSummarySeparatorStyles = css({
+  width: '0px',
+  height: '$16',
+  borderLeft: '1px solid $neutral400',
+  marginLeft: '13px',
+});
+
+export const swapsStepsStyles = css({
+  paddingBottom: '$10',
+});
+
+export const stepTitleStyles = css({
+  display: 'flex',
+  justifyContent: 'start',
+  alignItems: 'center',
+});
+
+export const stepTokensStyles = css({
+  paddingTop: '$5',
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const stepInfoStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const stepIconStyles = css({
+  padding: '$4 $6',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const extraInfoStyles = css({
+  display: 'flex',
+  paddingTop: '$10',
+  paddingBottom: '$5',
+});

package/src/components/LoadingSwapDetails/LoadingSwapDetails.tsx

@@ -2,13 +2,22 @@ import { i18n } from '@lingui/core';
 import { ChainToken, Divider, Skeleton, Typography } from '@rango-dev/ui';
 import React from 'react';
 
-import { Container, StepSeparator } from './LoadingSwapDetails.styles';
+import {
+  Container,
+  costStyles,
+  quoteSummaryItemStyles,
+  quoteSummarySeparatorStyles,
+  quoteSummaryStyles,
+  StepSeparator,
+  swapsStepsStyles,
+  tokenAmountStyles,
+} from './LoadingSwapDetails.styles';
 import { LoadingSwapDetailStep } from './LoadingSwapDetailStep';
 
 export function LoadingSwapDetails() {
   const quoteSummary = (
-    <div className="quote-summary-item">
-      <div className="token-amount">
+    <div className={quoteSummaryItemStyles()}>
+      <div className={tokenAmountStyles()}>
         <ChainToken loading size="medium" chainImage="" tokenImage="" />
         <Divider size={8} direction="horizontal" />
         <Skeleton height={15} width={148} variant="rounded" />
@@ -19,7 +28,7 @@ export function LoadingSwapDetails() {
 
   return (
     <Container>
-      <div className="cost">
+      <div className={costStyles()}>
         <Skeleton width={60} height={10} variant="rounded" />
         <Divider size={4} direction="horizontal" />
         <Skeleton width={60} height={10} variant="rounded" />
@@ -27,19 +36,19 @@ export function LoadingSwapDetails() {
         <Skeleton width={60} height={10} variant="rounded" />
       </div>
 
-      <div className="quote-summary">
+      <div className={quoteSummaryStyles()}>
         {quoteSummary}
-        <div className="quote-summary-separator"></div>
+        <div className={quoteSummarySeparatorStyles()}></div>
         {quoteSummary}
       </div>
 
-      <div className="swaps-steps">
+      <div className={swapsStepsStyles()}>
         <Typography variant="title" size="small">
           {i18n.t('Swaps steps')}
         </Typography>
       </div>
 
-      <div className="step-container">
+      <div>
         <LoadingSwapDetailStep extraInfo />
         <StepSeparator />
         <LoadingSwapDetailStep />

package/src/components/NoResult/NoResult.helpers.ts

@@ -27,18 +27,6 @@ export function makeInfo(
       },
       description: '',
     };
-  } else if (
-    error?.type === QuoteErrorType.NO_RESULT &&
-    error.diagnosisMessage
-  ) {
-    return {
-      alert: {
-        type: 'error',
-        text: error.diagnosisMessage,
-        action: null,
-      },
-      description: '',
-    };
   } else if (disabledLiquiditySources.length) {
     return {
       alert: {
@@ -51,6 +39,18 @@ export function makeInfo(
       },
       description: errorMessages().liquiditySourcesError.description,
     };
+  } else if (
+    error?.type === QuoteErrorType.NO_RESULT &&
+    error.diagnosisMessage
+  ) {
+    return {
+      alert: {
+        type: 'error',
+        text: error.diagnosisMessage,
+        action: null,
+      },
+      description: '',
+    };
   }
   return {
     alert: null,

package/src/components/NoResult/NoResult.tsx

@@ -11,22 +11,22 @@ import {
 import React from 'react';
 
 import { errorMessages } from '../../constants/errors';
-import { useSettingsStore } from '../../store/settings';
+import { useAppStore } from '../../store/AppStore';
 
 import { makeInfo } from './NoResult.helpers';
 import { Container, Footer, PrefixIcon } from './NoResult.styles';
 
 export function NoResult(props: PropTypes) {
   const { fetch, error } = props;
-  const disabledLiquiditySources =
-    useSettingsStore.use.disabledLiquiditySources();
-  const toggleAllLiquiditySources =
-    useSettingsStore.use.toggleAllLiquiditySources();
+  const disabledLiquiditySources = useAppStore().disabledLiquiditySources;
+  const toggleAllLiquiditySources = useAppStore().toggleAllLiquiditySources;
+
+  const swappers = useAppStore().swappers();
 
   const info = makeInfo(
     error,
     disabledLiquiditySources,
-    toggleAllLiquiditySources,
+    () => toggleAllLiquiditySources(swappers, true),
     fetch
   );
 

package/src/components/NotificationContent/NotificationContent.tsx

@@ -10,7 +10,8 @@ import {
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { useMetaStore } from '../../store/meta';
+import { navigationRoutes } from '../../constants/navigationRoutes';
+import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useUiStore } from '../../store/ui';
 
@@ -26,14 +27,15 @@ export function NotificationContent() {
   const { getUnreadNotifications } = useNotificationStore();
 
   const notifications: Notification[] = getUnreadNotifications();
-  const { tokens, blockchains } = useMetaStore.use.meta();
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
   const sortedNotification = notifications
     .sort((a, b) => b.creationTime - a.creationTime)
     .slice(0, MAX_NOTIFICATIONS_DISPLAYED);
 
   const handleOnClick = (requestId: Notification['requestId']) => {
     setSelectedSwap(requestId);
-    navigate(`/swaps/${requestId}`);
+    navigate(`${navigationRoutes.swaps}/${requestId}`);
   };
 
   return (

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 { css, 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: {
@@ -31,9 +32,10 @@ export const QuoteContainer = styled(Collapsible.Root, {
       },
     },
   },
-  '& .steps-details': {
-    padding: '$10 $15',
-  },
+});
+
+export const stepsDetailsStyles = css({
+  padding: '$10 $15',
 });
 
 export const SummaryContainer = styled('div', {
@@ -104,14 +106,24 @@ export const SummaryContainer = styled('div', {
       },
     },
   ],
-  '& .summary': {
-    width: '100%',
-    padding: '$15 $15 $10 $15',
-  },
-  '& .basic-info': {
-    paddingTop: '$10',
-    display: 'flex',
-    alignItems: 'center',
+});
+
+export const summaryStyles = css({
+  width: '100%',
+  padding: '$15 $15 $10 $15',
+  cursor: 'default',
+});
+
+export const basicInfoStyles = css({
+  paddingTop: '$10',
+  display: 'flex',
+  alignItems: 'center',
+  '.usd-value': {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
   },
 });
 
@@ -162,6 +174,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,8 @@ import { getPriceImpact, getPriceImpactLevel } from '../../utils/quote';
 import { getTotalFeeInUsd } from '../../utils/swap';
 
 import {
+  basicInfoStyles,
+  ChainImageContainer,
   Chains,
   Content,
   EXPANDABLE_QUOTE_TRANSITION_DURATION,
@@ -48,14 +57,13 @@ import {
   HorizontalSeparator,
   IconContainer,
   QuoteContainer,
+  stepsDetailsStyles,
   SummaryContainer,
+  summaryStyles,
 } from './Quote.styles';
 import { QuoteSummary } from './QuoteSummary';
 
 export function Quote(props: QuoteProps) {
-  const {
-    meta: { tokens },
-  } = useMetaStore();
   const {
     quote,
     input,
@@ -65,19 +73,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 +117,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 +130,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 +151,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 +240,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 +266,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 (
     <>
@@ -226,10 +283,10 @@ export function Quote(props: QuoteProps) {
         recommended={recommended}
         listItem={type === 'list-item'}
         basic={type === 'basic'}>
-        <div className="summary">
+        <div className={summaryStyles()}>
           <QuoteCost fee={totalFee} time={totalTime} steps={numberOfSteps} />
           {type === 'basic' && (
-            <div className="basic-info">
+            <div className={basicInfoStyles()}>
               <FrameIcon>
                 <InfoIcon size={12} color="gray" />
               </FrameIcon>
@@ -237,16 +294,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 +313,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 +342,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>
                 );
               })}
@@ -325,7 +394,7 @@ export function Quote(props: QuoteProps) {
           </Chains>
           <Content open={expanded}>
             <HorizontalSeparator />
-            <div className="steps-details">
+            <div className={stepsDetailsStyles()}>
               {steps.map((step, index) => {
                 const key = `item-${index}`;
                 return (

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;
 };