@rango-dev/widget-embedded 0.17.1-next.8 → 0.18.0

package/src/components/Quote/Quote.tsx

@@ -25,6 +25,8 @@ 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,
@@ -32,6 +34,11 @@ import {
 } from '../../containers/QuoteInfo/QuoteInfo.styles';
 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,9 @@ import { getPriceImpact, getPriceImpactLevel } from '../../utils/quote';
 import { getTotalFeeInUsd } from '../../utils/swap';
 
 import {
+  BasicInfoOutput,
+  basicInfoStyles,
+  ChainImageContainer,
   Chains,
   Content,
   EXPANDABLE_QUOTE_TRANSITION_DURATION,
@@ -48,7 +58,9 @@ import {
   HorizontalSeparator,
   IconContainer,
   QuoteContainer,
+  stepsDetailsStyles,
   SummaryContainer,
+  summaryStyles,
 } from './Quote.styles';
 import { QuoteSummary } from './QuoteSummary';
 
@@ -63,19 +75,38 @@ export function Quote(props: QuoteProps) {
     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
   );
@@ -87,8 +118,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);
@@ -100,11 +131,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: {
@@ -115,17 +152,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,
@@ -183,7 +241,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 && {
@@ -209,14 +267,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 (
     <>
@@ -224,27 +284,26 @@ 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>
-              <Typography
-                size="small"
-                variant="body"
-                style={{ letterSpacing: 0.4 }}>
-                {`${input.value} ${steps[0].from.token.displayName} = ${
-                  output.value
-                } ${steps[steps.length - 1].to.token.displayName}`}
-              </Typography>
+              <BasicInfoOutput size="small" variant="body">
+                {`${roundedInput} ${
+                  steps[0].from.token.displayName
+                } = ${roundedOutput} ${
+                  steps[steps.length - 1].to.token.displayName
+                }`}
+              </BasicInfoOutput>
               <Typography
                 color="$neutral600"
                 ml={2}
                 size="xsmall"
                 variant="body">
-                {`($${output.usdValue})`}
+                {`($${roundedOutputUsdValue})`}
               </Typography>
             </div>
           )}
@@ -252,7 +311,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,
@@ -281,38 +340,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>
                 );
               })}
@@ -323,7 +392,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;
 };

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

@@ -1,15 +1,16 @@
-import { styled } from '@rango-dev/ui';
+import { css, styled } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   position: 'relative',
   display: 'flex',
   flexDirection: 'column',
   width: '100%',
-  '& .separator': {
-    height: '14px',
-    marginLeft: '14px',
-    position: 'absolute',
-    borderLeft: '1px solid $foreground',
-    top: '42%',
-  },
+});
+
+export const separatorStyles = css({
+  height: '14px',
+  marginLeft: '14px',
+  position: 'absolute',
+  borderLeft: '1px solid $foreground',
+  top: '42%',
 });

package/src/components/Quote/QuoteSummary.tsx

@@ -3,7 +3,7 @@ import type { PriceImpactWarningLevel, Step } from '@rango-dev/ui';
 import { TokenAmount } from '@rango-dev/ui';
 import React from 'react';
 
-import { Container } from './QuoteSummary.styles';
+import { Container, separatorStyles } from './QuoteSummary.styles';
 
 type PropTypes = {
   from: Step['from'];
@@ -27,7 +27,7 @@ export function QuoteSummary(props: PropTypes) {
         }}
         chain={{ image: from.chain.image }}
       />
-      <div className="separator" />
+      <div className={separatorStyles()} />
       <TokenAmount
         direction="horizontal"
         label="Estimated output"

package/src/components/Quote/index.ts

@@ -1,3 +1,2 @@
 export { Quote } from './Quote';
-export { QuoteSkeleton } from './QuoteSkeleton';
 export { QuoteSummary } from './QuoteSummary';

package/src/components/QuoteSkeleton/QuoteSkeleton.styles.ts

@@ -0,0 +1,42 @@
+import { darkTheme, styled } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
+  borderBottomLeftRadius: '$xm',
+  borderBottomRightRadius: '$xm',
+  padding: '$15 ',
+  variants: {
+    rounded: {
+      true: {
+        borderRadius: '$xm',
+      },
+    },
+  },
+});
+
+export const Chains = styled('div', {
+  paddingTop: '$2',
+});
+
+export const Steps = styled('div', {
+  paddingLeft: '$8',
+});
+
+export const StepSeparator = styled('div', {
+  borderLeft: '1px dashed black',
+  minHeight: ' 0',
+  margin: '0px 11.5px',
+  alignSelf: 'stretch',
+  variants: {
+    hideSeparator: {
+      true: {
+        minHeight: 'unset',
+        height: '0',
+      },
+    },
+  },
+});

package/src/components/QuoteSkeleton/QuoteSkeleton.tsx

@@ -0,0 +1,30 @@
+import type { PropTypes } from './QuoteSkeleton.types';
+
+import { Divider, Skeleton } from '@rango-dev/ui';
+import React from 'react';
+
+import { Chains, Container, Steps } from './QuoteSkeleton.styles';
+import { QuoteSummarySkeleton } from './QuoteSummarySkeleton';
+import { StepSkeleton } from './StepSkeleton';
+
+export function QuoteSkeleton(props: PropTypes) {
+  const { type, expanded, tag = false } = props;
+
+  return (
+    <Container rounded={type !== 'basic'}>
+      <QuoteSummarySkeleton type={type} tag={tag} />
+      <Chains>
+        <Skeleton height={15} variant="rounded" />
+      </Chains>
+
+      {expanded && (
+        <Steps>
+          <Divider size={20} />
+          <StepSkeleton />
+          <StepSkeleton />
+          <StepSkeleton separator={false} />
+        </Steps>
+      )}
+    </Container>
+  );
+}

package/src/components/QuoteSkeleton/QuoteSummarySkeleton.styles.ts

@@ -0,0 +1,57 @@
+import { styled } from '@rango-dev/ui';
+
+export const CostAndTag = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  height: '22px',
+});
+
+export const Cost = styled('div', {
+  display: 'flex',
+});
+
+export const BasicSummary = styled('div', {
+  padding: '$15 $0 14px $0',
+});
+
+export const Output = styled('div', {
+  padding: '$6 $0 $15 $0',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const OutputTokenInfo = styled('div', {
+  display: 'flex',
+  justifyContent: 'start',
+  alignItems: 'center',
+  paddingBottom: '$5',
+});
+
+export const QuoteSummary = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'end',
+});
+
+export const QuoteSummarySeparator = styled('div', {
+  height: '$28',
+  marginLeft: '13px',
+  borderLeft: '1px solid $neutral700',
+});
+
+export const TokenAmount = styled('div', {
+  width: '65%',
+  display: 'flex',
+  justifyContent: 'start',
+});
+
+export const TokenAmountLabel = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'start',
+  flexGrow: 1,
+  maxWidth: '148px',
+});
+
+export const SwapPreview = styled('div', { padding: '$15 $0 $15 $0' });

package/src/components/QuoteSkeleton/QuoteSummarySkeleton.tsx

@@ -0,0 +1,76 @@
+import type { PropTypes } from './QuoteSummarySkeleton.types';
+
+import { ChainToken, Divider, Skeleton } from '@rango-dev/ui';
+import React from 'react';
+
+import {
+  BasicSummary,
+  Cost,
+  CostAndTag,
+  Output,
+  OutputTokenInfo,
+  QuoteSummary,
+  QuoteSummarySeparator,
+  SwapPreview,
+  TokenAmount,
+  TokenAmountLabel,
+} from './QuoteSummarySkeleton.styles';
+
+export function QuoteSummarySkeleton(props: PropTypes) {
+  const { type, tag = false } = props;
+  const quotePreview = (
+    <QuoteSummary>
+      <TokenAmount>
+        <ChainToken loading size="medium" chainImage="" tokenImage="" />
+        <Divider size={8} direction="horizontal" />
+        <TokenAmountLabel>
+          <Skeleton height={10} width={60} variant="rounded" />
+          <Divider size={4} />
+          <Skeleton height={15} variant="rounded" />
+        </TokenAmountLabel>
+      </TokenAmount>
+      <Skeleton height={12} width={64} variant="rounded" />
+    </QuoteSummary>
+  );
+
+  return (
+    <div>
+      <CostAndTag>
+        <Cost>
+          <Skeleton width={60} height={10} variant="rounded" />
+          <Divider size={4} direction="horizontal" />
+          <Skeleton width={60} height={10} variant="rounded" />
+          <Divider size={4} direction="horizontal" />
+          <Skeleton width={60} height={10} variant="rounded" />
+        </Cost>
+        {tag && <Skeleton height={22} width={100} variant="rounded" />}
+      </CostAndTag>
+      {type === 'basic' && (
+        <BasicSummary>
+          <Skeleton height={15} width={148} variant="rounded" />
+        </BasicSummary>
+      )}
+      {type === 'list-item' && (
+        <Output>
+          <OutputTokenInfo>
+            <ChainToken loading size="medium" chainImage="" tokenImage="" />
+            <Divider direction="horizontal" size={4} />
+            <Skeleton height={15} width={150} variant="rounded" />
+          </OutputTokenInfo>
+          <Divider size={4} />
+          <Skeleton height={10} width={184} variant="rounded" />
+        </Output>
+      )}
+      {type === 'swap-preview' && (
+        <>
+          <Divider size={4} />
+          <SwapPreview>
+            {quotePreview}
+            <QuoteSummarySeparator />
+            {quotePreview}
+          </SwapPreview>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/QuoteSkeleton/QuoteSummarySkeleton.types.ts

@@ -0,0 +1,6 @@
+import type { QuoteProps } from '../Quote/Quote.types';
+
+export type PropTypes = {
+  type: QuoteProps['type'];
+  tag?: boolean;
+};

package/src/components/QuoteSkeleton/StepSkeleton.styles.ts

@@ -0,0 +1,33 @@
+import { styled } from '@rango-dev/ui';
+
+export const StepContent = styled('div', {
+  display: 'flex',
+  alignItems: 'start',
+});
+
+export const StepTokens = styled('div', {
+  flexGrow: 1,
+  paddingTop: '$5',
+  paddingBottom: '$10',
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const StepTokenInfo = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  flexGrow: 1,
+});
+
+export const StepIconContainer = styled('div', {
+  margin: '$0 $2',
+  padding: '$4',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const StepTitle = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+});

package/src/components/QuoteSkeleton/StepSkeleton.tsx

@@ -0,0 +1,44 @@
+import type { PropTypes } from './StepSkeleton.types';
+
+import { ChainToken, Divider, NextIcon, Skeleton } from '@rango-dev/ui';
+import React from 'react';
+
+import { StepSeparator } from './QuoteSkeleton.styles';
+import {
+  StepContent,
+  StepIconContainer,
+  StepTitle,
+  StepTokenInfo,
+  StepTokens,
+} from './StepSkeleton.styles';
+
+export function StepSkeleton(props: PropTypes) {
+  const { separator = true } = props;
+  return (
+    <>
+      <StepTitle>
+        <Skeleton height={22} width={22} variant="circular" />
+        <Divider direction="horizontal" size={8} />
+        <Skeleton height={15} width={148} variant="rounded" />
+      </StepTitle>
+      <StepContent>
+        <StepSeparator hideSeparator={!separator} />
+        <StepTokens>
+          <StepTokenInfo>
+            <ChainToken size="small" loading chainImage="" tokenImage="" />
+            <Divider direction="horizontal" size={8} />
+            <Skeleton height={12} variant="rounded" />
+          </StepTokenInfo>
+          <StepIconContainer>
+            <NextIcon color="gray" size={16} />
+          </StepIconContainer>
+          <StepTokenInfo>
+            <ChainToken size="small" loading chainImage="" tokenImage="" />
+            <Divider direction="horizontal" size={8} />
+            <Skeleton height={12} variant="rounded" />
+          </StepTokenInfo>
+        </StepTokens>
+      </StepContent>
+    </>
+  );
+}

package/src/components/QuoteSkeleton/StepSkeleton.types.ts

@@ -0,0 +1 @@
+export type PropTypes = { separator?: boolean };

package/src/components/QuoteSkeleton/index.ts

@@ -0,0 +1,3 @@
+export { QuoteSkeleton } from './QuoteSkeleton';
+export { StepSkeleton } from './StepSkeleton';
+export { QuoteSummarySkeleton } from './QuoteSummarySkeleton';

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