@rango-dev/widget-embedded 0.23.1-next.8 → 0.24.0

package/src/components/Quote/Quote.tsx

@@ -6,6 +6,7 @@ import { i18n } from '@lingui/core';
 import {
   Alert,
   Divider,
+  FullExpandedQuote,
   InfoIcon,
   QuoteTag,
   StepDetails,
@@ -33,7 +34,7 @@ import {
 } from '../../containers/QuoteInfo/QuoteInfo.styles';
 import { useAppStore } from '../../store/AppStore';
 import { QuoteErrorType, QuoteWarningType } from '../../types';
-import { getContainer } from '../../utils/common';
+import { getContainer, getExpanded } from '../../utils/common';
 import {
   getBlockchainShortNameFor,
   getSwapperDisplayName,
@@ -83,6 +84,7 @@ export function Quote(props: QuoteProps) {
     tagHidden = true,
     showModalFee = true,
     onClickAllRoutes,
+    fullExpandedMode = false,
   } = props;
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
@@ -298,157 +300,176 @@ export function Quote(props: QuoteProps) {
     GAS_FEE_MAX_DECIMALS
   );
 
-  return (
-    <>
-      <SummaryContainer
-        selected={selected}
-        listItem={type === 'list-item'}
-        basic={type === 'basic'}>
-        <div className={summaryStyles()}>
-          {!tagHidden && sortedQuoteTags.length ? (
-            <>
-              <TagContainer>
-                {sortedQuoteTags.map((tag, index) => {
-                  const key = `${tag.value}_${index}`;
-                  return (
-                    <>
-                      <QuoteTag label={tag.label} key={key} value={tag.value} />
-                      <Divider size={4} direction="horizontal" />
-                    </>
-                  );
-                })}
-              </TagContainer>
-              <Line />
-              {!showAllRoutesButton && <Divider size={4} />}
-            </>
-          ) : null}
-          <div id="portal-root" className={summaryHeaderStyles()}>
-            <QuoteCostDetails
-              quote={quote}
-              time={totalTime}
-              fee={fee}
-              feeWarning={totalFee.gte(new BigNumber(GAS_FEE_MAX))}
-              showModalFee={showModalFee}
-              steps={numberOfSteps}
-            />
+  const feeWarning = totalFee.gte(new BigNumber(GAS_FEE_MAX));
 
-            {showAllRoutesButton && (
-              <AllRoutesButton
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onClickAllRoutes();
-                }}
-                size="xxsmall"
-                type="secondary"
-                variant="default">
-                <Typography color="secondary" variant="label" size="medium">
-                  {i18n.t('See All Routes')}
-                </Typography>
-              </AllRoutesButton>
-            )}
-          </div>
-          {type === 'basic' && (
-            <div className={basicInfoStyles()}>
-              <FrameIcon>
-                <InfoIcon size={12} color="gray" />
-              </FrameIcon>
-              <ContainerInfoOutput>
-                <BasicInfoOutput size="small" variant="body">
-                  {`${roundedInput} ${steps[0].from.token.displayName} = `}
-                </BasicInfoOutput>
-                <Tooltip
-                  content={formatTooltipNumbers(output.value)}
-                  container={container}
-                  open={!output.value ? false : undefined}>
-                  <BasicInfoOutput size="small" variant="body">
-                    &nbsp;
-                    {`${roundedOutput} ${
-                      steps[steps.length - 1].to.token.displayName
-                    }`}
-                  </BasicInfoOutput>
-                </Tooltip>
-              </ContainerInfoOutput>
+  return fullExpandedMode ? (
+    <FullExpandedQuote
+      selected={selected}
+      fee={fee}
+      time={totalTime}
+      tooltipContainer={getExpanded()}
+      steps={steps}
+      tags={sortedQuoteTags}
+      feeWarning={feeWarning}
+      percentageChange={percentageChange}
+      warningLevel={priceImpactWarningLevel}
+      outputPrice={{
+        value: roundedOutput,
+        usdValue: roundedOutputUsdValue,
+        realValue: formatTooltipNumbers(output.value),
+        realUsdValue: formatTooltipNumbers(output.usdValue),
+      }}
+    />
+  ) : (
+    <SummaryContainer
+      selected={selected}
+      listItem={type === 'list-item'}
+      basic={type === 'basic'}>
+      <div className={summaryStyles()}>
+        {!tagHidden && sortedQuoteTags.length ? (
+          <>
+            <TagContainer>
+              {sortedQuoteTags.map((tag, index) => {
+                const key = `${tag.value}_${index}`;
+                return (
+                  <React.Fragment key={key}>
+                    <QuoteTag label={tag.label} value={tag.value} />
+                    <Divider size={4} direction="horizontal" />
+                  </React.Fragment>
+                );
+              })}
+            </TagContainer>
+            <Line />
+            {!showAllRoutesButton && <Divider size={4} />}
+          </>
+        ) : null}
+        <div id="portal-root" className={summaryHeaderStyles()}>
+          <QuoteCostDetails
+            quote={quote}
+            time={totalTime}
+            fee={fee}
+            feeWarning={feeWarning}
+            showModalFee={showModalFee}
+            steps={numberOfSteps}
+          />
+
+          {showAllRoutesButton && (
+            <AllRoutesButton
+              onClick={(e) => {
+                e.stopPropagation();
+                onClickAllRoutes();
+              }}
+              size="xxsmall"
+              type="secondary"
+              variant="default">
+              <Typography color="secondary" variant="label" size="medium">
+                {i18n.t('See All Routes')}
+              </Typography>
+            </AllRoutesButton>
+          )}
+        </div>
+        {type === 'basic' && (
+          <div className={basicInfoStyles()}>
+            <FrameIcon>
+              <InfoIcon size={12} color="gray" />
+            </FrameIcon>
+            <ContainerInfoOutput>
+              <BasicInfoOutput size="small" variant="body">
+                {`${roundedInput} ${steps[0].from.token.displayName} = `}
+              </BasicInfoOutput>
               <Tooltip
-                content={formatTooltipNumbers(output.usdValue)}
+                content={formatTooltipNumbers(output.value)}
                 container={container}
-                style={{
-                  display: 'flex',
-                }}>
-                <Typography
-                  color="$neutral600"
-                  ml={2}
-                  size="xsmall"
-                  variant="body">
-                  {`($${roundedOutputUsdValue})`}
-                </Typography>
+                open={!output.value ? false : undefined}>
+                <BasicInfoOutput size="small" variant="body">
+                  &nbsp;
+                  {`${roundedOutput} ${
+                    steps[steps.length - 1].to.token.displayName
+                  }`}
+                </BasicInfoOutput>
               </Tooltip>
-            </div>
-          )}
-          {type === 'list-item' && (
-            <TokenAmount
-              tooltipContainer={container}
-              type="output"
-              direction="vertical"
-              price={{
-                value: roundedOutput,
-                usdValue: roundedOutputUsdValue,
-                realValue: formatTooltipNumbers(output.value),
-                realUsdValue: formatTooltipNumbers(output.usdValue),
-              }}
-              token={{
-                displayName: steps[numberOfSteps - 1].to.token.displayName,
-                image: steps[numberOfSteps - 1].to.token.image,
-              }}
-              chain={{ image: steps[numberOfSteps - 1].to.chain.image }}
+            </ContainerInfoOutput>
+            <Tooltip
+              content={formatTooltipNumbers(output.usdValue)}
+              container={container}
+              style={{
+                display: 'flex',
+              }}>
+              <Typography
+                color="$neutral600"
+                ml={2}
+                size="xsmall"
+                variant="body">
+                {`($${roundedOutputUsdValue})`}
+              </Typography>
+            </Tooltip>
+          </div>
+        )}
+        {type === 'list-item' && (
+          <TokenAmount
+            tooltipContainer={container}
+            type="output"
+            direction="vertical"
+            price={{
+              value: roundedOutput,
+              usdValue: roundedOutputUsdValue,
+              realValue: formatTooltipNumbers(output.value),
+              realUsdValue: formatTooltipNumbers(output.usdValue),
+            }}
+            token={{
+              displayName: steps[numberOfSteps - 1].to.token.displayName,
+              image: steps[numberOfSteps - 1].to.token.image,
+            }}
+            chain={{ image: steps[numberOfSteps - 1].to.chain.image }}
+            percentageChange={percentageChange}
+            warningLevel={priceImpactWarningLevel}
+          />
+        )}
+        {type === 'swap-preview' && (
+          <>
+            <QuoteSummary
+              from={steps[0].from}
+              to={steps[numberOfSteps - 1].to}
               percentageChange={percentageChange}
               warningLevel={priceImpactWarningLevel}
             />
-          )}
-          {type === 'swap-preview' && (
-            <>
-              <QuoteSummary
-                from={steps[0].from}
-                to={steps[numberOfSteps - 1].to}
-                percentageChange={percentageChange}
-                warningLevel={priceImpactWarningLevel}
-              />
-              <Divider size={4} />
-            </>
-          )}
-        </div>
-        <QuoteContainer
+            <Divider size={4} />
+          </>
+        )}
+      </div>
+      <QuoteContainer
+        selected={selected}
+        listItem={type === 'list-item'}
+        open={expanded}
+        className="quote_container"
+        onOpenChange={setExpanded}>
+        <QuoteTrigger
+          type={type}
+          quoteRef={quoteRef}
           selected={selected}
-          listItem={type === 'list-item'}
-          open={expanded}
-          onOpenChange={setExpanded}>
-          <QuoteTrigger
-            type={type}
-            quoteRef={quoteRef}
-            selected={selected}
-            setExpanded={setExpanded}
-            expanded={expanded}
-            steps={steps}
-          />
-          <Content open={expanded}>
-            <HorizontalSeparator />
-            <div className={stepsDetailsStyles()}>
-              {steps.map((step, index) => {
-                const key = `item-${index}`;
-                return (
-                  <StepDetails
-                    type="quote-details"
-                    key={key}
-                    tooltipContainer={container}
-                    step={step}
-                    hasSeparator={index !== steps.length - 1}
-                    state={step.state}
-                  />
-                );
-              })}
-            </div>
-          </Content>
-        </QuoteContainer>
-      </SummaryContainer>
-    </>
+          setExpanded={setExpanded}
+          expanded={expanded}
+          steps={steps}
+        />
+        <Content open={expanded}>
+          <HorizontalSeparator />
+          <div className={stepsDetailsStyles()}>
+            {steps.map((step, index) => {
+              const key = `item-${index}`;
+              return (
+                <StepDetails
+                  type="quote-details"
+                  key={key}
+                  tooltipContainer={container}
+                  step={step}
+                  hasSeparator={index !== steps.length - 1}
+                  state={step.state}
+                />
+              );
+            })}
+          </div>
+        </Content>
+      </QuoteContainer>
+    </SummaryContainer>
   );
 }

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

@@ -14,6 +14,7 @@ export type QuoteProps = {
   selected?: boolean;
   showModalFee?: boolean;
   onClickAllRoutes?: () => void;
+  fullExpandedMode?: boolean;
 };
 
 export type optionProps = {

package/src/components/Quote/QuoteTrigger.tsx

@@ -11,7 +11,7 @@ import {
 } from '@rango-dev/ui';
 import React from 'react';
 
-import useMobileDetect from '../../hooks/useMobileDetect';
+import useScreenDetect from '../../hooks/useScreenDetect';
 import { getContainer } from '../../utils/common';
 import { getUniqueBlockchains } from '../../utils/quote';
 
@@ -48,7 +48,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
   const tooltipContainer = getContainer();
   const numberOfSteps = steps.length;
   const blockchains = getUniqueBlockchains(steps);
-  const isMobile = useMobileDetect();
+  const { isTablet, isMobile } = useScreenDetect();
 
   return (
     <Trigger
@@ -72,15 +72,15 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
             </IconContainer>
           );
 
-          return isMobile ? (
-            <>
+          return isMobile || isTablet ? (
+            <React.Fragment key={key}>
               <ImageComponent
                 content={step.swapper.displayName}
                 src={step.swapper.image}
                 state={step.state}
               />
               {index !== numberOfSteps - 1 && <>{arrow}</>}
-            </>
+            </React.Fragment>
           ) : (
             <React.Fragment key={key}>
               {numberOfSteps <= MAX_STEPS ||
@@ -148,17 +148,22 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
             </Typography>
             <Divider direction="horizontal" size={4} />
             {blockchains.map((blockchain, index) => (
-              <>
+              <React.Fragment key={blockchain.displayName}>
                 {blockchains.length <= MAX_BLOCKCHAINS ||
                 (blockchains.length > MAX_BLOCKCHAINS &&
                   index < MAX_BLOCKCHAINS - 1) ? (
-                  <ImageComponent
-                    key={blockchain.displayName}
-                    content={''}
-                    src={blockchain.image}
-                    open={false}
-                    className={index !== 0 ? 'blockchainImage' : ''}
-                  />
+                  <Tooltip
+                    container={tooltipContainer}
+                    side="bottom"
+                    content={blockchain.displayName}
+                    sideOffset={4}>
+                    <ImageComponent
+                      content={''}
+                      src={blockchain.image}
+                      open={false}
+                      className={index !== 0 ? 'blockchainImage' : ''}
+                    />
+                  </Tooltip>
                 ) : (
                   index === MAX_BLOCKCHAINS - 1 && (
                     <Tooltip
@@ -190,7 +195,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
                     </Tooltip>
                   )
                 )}
-              </>
+              </React.Fragment>
             ))}
 
             <Divider direction="horizontal" size={32} />

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

@@ -8,13 +8,21 @@ export const Container = styled('div', {
   backgroundColor: '$$color',
   borderBottomLeftRadius: '$xm',
   borderBottomRightRadius: '$xm',
-  padding: '$15 ',
+  padding: '$15',
   variants: {
     rounded: {
       true: {
         borderRadius: '$xm',
       },
     },
+    expanded: {
+      true: {
+        paddingBottom: '3px',
+      },
+      false: {
+        paddingBottom: '$12',
+      },
+    },
   },
 });
 
@@ -27,7 +35,7 @@ export const Steps = styled('div', {
 });
 
 export const StepSeparator = styled('div', {
-  borderLeft: '1px dashed black',
+  borderLeft: '1px dashed $foreground',
   minHeight: ' 0',
   margin: '0px 11.5px',
   alignSelf: 'stretch',

package/src/components/QuoteSkeleton/QuoteSkeleton.tsx

@@ -11,7 +11,7 @@ export function QuoteSkeleton(props: PropTypes) {
   const { type, expanded, tagHidden = false } = props;
 
   return (
-    <Container rounded={type !== 'basic'}>
+    <Container expanded={expanded} rounded={type !== 'basic'}>
       <QuoteSummarySkeleton type={type} tagHidden={tagHidden} />
       <Chains>
         <Skeleton height={15} variant="rounded" />
@@ -19,7 +19,7 @@ export function QuoteSkeleton(props: PropTypes) {
 
       {expanded && (
         <Steps>
-          <Divider size={20} />
+          <Divider size={24} />
           <StepSkeleton />
           <StepSkeleton />
           <StepSkeleton separator={false} />

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

@@ -9,7 +9,7 @@ export const BasicSummary = styled('div', {
 });
 
 export const Output = styled('div', {
-  padding: '$12 $0 $20 $0',
+  padding: '14px $0 $20 $0',
   display: 'flex',
   flexDirection: 'column',
 });
@@ -27,7 +27,7 @@ export const QuoteSummary = styled('div', {
 });
 
 export const QuoteSummarySeparator = styled('div', {
-  height: '$28',
+  height: '$24',
   marginLeft: '13px',
   borderLeft: '1px solid $neutral700',
 });

package/src/components/QuoteSkeleton/QuoteSummarySkeleton.tsx

@@ -41,11 +41,11 @@ export function QuoteSummarySkeleton(props: PropTypes) {
       {!tagHidden && (
         <>
           <FlexContent>
-            <Skeleton width={65} height={14} variant="rounded" />
+            <Skeleton width={65} height={20} variant="rounded" />
             <Divider size={4} direction="horizontal" />
-            <Skeleton width={65} height={14} variant="rounded" />
+            <Skeleton width={65} height={20} variant="rounded" />
             <Divider size={4} direction="horizontal" />
-            <Skeleton width={65} height={14} variant="rounded" />
+            <Skeleton width={65} height={20} variant="rounded" />
           </FlexContent>
           <Line />
           {!showAllRoutesSkeleton && <Divider size={4} />}
@@ -60,7 +60,7 @@ export function QuoteSummarySkeleton(props: PropTypes) {
           <Skeleton width={60} height={10} variant="rounded" />
         </FlexContent>
         {showAllRoutesSkeleton && (
-          <Skeleton width={100} height={22} variant="rounded" />
+          <Skeleton width={85} height={24} variant="rounded" />
         )}
       </div>
 
@@ -88,6 +88,7 @@ export function QuoteSummarySkeleton(props: PropTypes) {
             <QuoteSummarySeparator />
             {quotePreview}
           </SwapPreview>
+          <Divider size={12} />
         </>
       )}
     </div>

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

@@ -11,6 +11,13 @@ export const StepTokens = styled('div', {
   paddingBottom: '$10',
   display: 'flex',
   alignItems: 'center',
+  variants: {
+    extraSpace: {
+      true: {
+        paddingBottom: '$40',
+      },
+    },
+  },
 });
 
 export const StepTokenInfo = styled('div', {

package/src/components/QuoteSkeleton/StepSkeleton.tsx

@@ -23,7 +23,7 @@ export function StepSkeleton(props: PropTypes) {
       </StepTitle>
       <StepContent>
         <StepSeparator hideSeparator={!separator} />
-        <StepTokens>
+        <StepTokens extraSpace={separator}>
           <StepTokenInfo>
             <ChainToken size="small" loading chainImage="" tokenImage="" />
             <Divider direction="horizontal" size={8} />

package/src/components/QuoteWarningsAndErrors/HighValueLossWarningModal.tsx

@@ -97,7 +97,7 @@ export function HighValueLossWarningModal(props: Props) {
       />
 
       <Flex>
-        <Divider size={20} />
+        <Divider size="4" />
         <Typography size="small" variant="title">
           {i18n.t('Details')}
         </Typography>

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

@@ -23,13 +23,12 @@ export function makeAlerts(
   const alertInfo: AlertInfo = {
     alertType: 'warning',
     title: '',
-    action: 'show-info',
+    action: null,
   };
   if (error) {
     alertInfo.alertType = 'error';
     if (error.type === QuoteErrorType.BRIDGE_LIMIT) {
       alertInfo.title = error.recommendation;
-      alertInfo.action = 'show-info';
     }
 
     if (error.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE) {
@@ -50,7 +49,7 @@ export function makeAlerts(
       if (warningLevel === 'high') {
         alertInfo.alertType = 'error';
       }
-      alertInfo.action = null;
+      alertInfo.action = 'show-info';
       alertInfo.title = errorMessages().highValueLossError.title;
     }
     if (warning.type === QuoteWarningType.UNKNOWN_PRICE) {
@@ -67,6 +66,7 @@ export function makeAlerts(
     }
     if (warning.type === QuoteWarningType.HIGH_SLIPPAGE) {
       alertInfo.title = i18n.t('Caution, your slippage is high.');
+      alertInfo.action = 'change-settings';
     }
     return alertInfo;
   }

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

@@ -8,7 +8,7 @@ export const Flex = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-start',
-  gap: 10,
+  gap: '$5',
   width: '100%',
 });