@rango-dev/widget-embedded 0.23.1-next.12 → 0.23.1-next.13

package/dist/pages/Home.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA2BnD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,wBAAgB,IAAI,sBAsLnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA4BnD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,wBAAgB,IAAI,sBAsLnB"}

package/dist/types/config.d.ts

@@ -2,7 +2,7 @@ import type { Language } from '@rango-dev/ui';
 import type { ProviderInterface } from '@rango-dev/wallets-react';
 import type { WalletType } from '@rango-dev/wallets-shared';
 import type { Asset } from 'rango-sdk';
-export type WidgetVariant = 'default' | 'expandable';
+export type WidgetVariant = 'default' | 'expanded' | 'full-expanded';
 /**
  * The above type defines a set of optional color properties for a widget.
  * @property {string} background
@@ -170,7 +170,8 @@ export type Features = Partial<Record<'theme' | 'language' | 'connectWalletButto
  *   - 'language': Visibility state for the language.
  *   - 'experimentalRoute': Enablement state for the experimental route.
  * @property {WidgetVariant} variant
- *   If it is expandable, multiple routes will show up on the home page;
+ *   If it is expanded, multiple routes will show up on the home page;
+ *   If it is full-expanded, multiple routes will show up on the home page with full routes;
  *   if not, you will need to go to a different page to see the suggested routes.
  */
 export type WidgetConfig = {

package/dist/types/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"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"}

package/dist/utils/configs.d.ts

@@ -1,4 +1,4 @@
-import type { Tokens } from '../types';
+import type { Tokens, WidgetVariant } from '../types';
 import type { Asset, BlockchainMeta, Token } from 'rango-sdk';
 export interface Configs {
     API_KEY: string;
@@ -19,5 +19,6 @@ export declare const DEFAULT_FONT_FAMILY = "Roboto";
 export declare const THEME_CLASS_NAME_PREFIX = "theme-widget";
 export declare const isTokenExcludedInConfig: (token: Token | null, tokensConfig?: TokensConfig) => boolean;
 export declare const isBlockchainExcludedInConfig: (blockchain: BlockchainMeta | null, blockchainsConfig?: string[]) => boolean | null | undefined;
+export declare const isVarianExpandable: (variant?: WidgetVariant) => boolean;
 export {};
 //# sourceMappingURL=configs.d.ts.map

package/dist/utils/configs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../src/utils/configs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAM9D,MAAM,WAAW,OAAO;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,KAAK,YAAY,GACb,KAAK,EAAE,GACP;IACE,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;CAC9B,CAAC;AAMN,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAAO,UAE5C;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAAO,EAAE,KAAK,EAAE,GAAG,OAIxD;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,WAAW,EAAE,OAAO,WAS9C;AAED,eAAO,MAAM,sBAAsB,KAAK,CAAC;AACzC,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAC3C,eAAO,MAAM,mBAAmB,WAAW,CAAC;AAE5C,eAAO,MAAM,uBAAuB,iBAAiB,CAAC;AAEtD,eAAO,MAAM,uBAAuB,UAC3B,KAAK,GAAG,IAAI,iBACJ,YAAY,YAe5B,CAAC;AAEF,eAAO,MAAM,4BAA4B,eAC3B,cAAc,GAAG,IAAI,sBACb,MAAM,EAAE,+BAO7B,CAAC"}
+{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../src/utils/configs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAM9D,MAAM,WAAW,OAAO;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,KAAK,YAAY,GACb,KAAK,EAAE,GACP;IACE,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;CAC9B,CAAC;AAMN,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAAO,UAE5C;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAAO,EAAE,KAAK,EAAE,GAAG,OAIxD;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,WAAW,EAAE,OAAO,WAS9C;AAED,eAAO,MAAM,sBAAsB,KAAK,CAAC;AACzC,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAC3C,eAAO,MAAM,mBAAmB,WAAW,CAAC;AAE5C,eAAO,MAAM,uBAAuB,iBAAiB,CAAC;AAEtD,eAAO,MAAM,uBAAuB,UAC3B,KAAK,GAAG,IAAI,iBACJ,YAAY,YAe5B,CAAC;AAEF,eAAO,MAAM,4BAA4B,eAC3B,cAAc,GAAG,IAAI,sBACb,MAAM,EAAE,+BAO7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,aAAc,aAAa,YAEzD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.23.1-next.12",
+  "version": "0.23.1-next.13",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,7 +25,7 @@
     "@rango-dev/queue-manager-core": "^0.26.0",
     "@rango-dev/queue-manager-rango-preset": "^0.28.1-next.3",
     "@rango-dev/queue-manager-react": "^0.26.0",
-    "@rango-dev/ui": "^0.29.1-next.9",
+    "@rango-dev/ui": "^0.29.1-next.10",
     "@rango-dev/wallets-react": "^0.14.1-next.1",
     "@rango-dev/wallets-shared": "^0.28.1-next.1",
     "bignumber.js": "^9.1.1",

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

@@ -9,6 +9,9 @@ import {
   type QuoteRequestFailed,
 } from '../../types';
 
+const SMALL_NO_ROUTE__ICON_SIZE = 24;
+const LARGE_NO_ROUTE_ICON_SIZE = 60;
+
 export function makeInfo(
   error: NoResultError | QuoteRequestFailed | null,
   disabledLiquiditySources: string[],
@@ -57,3 +60,13 @@ export function makeInfo(
     description: errorMessages().noResultError.description,
   };
 }
+
+export enum NoRouteIconSize {
+  small = SMALL_NO_ROUTE__ICON_SIZE,
+  large = LARGE_NO_ROUTE_ICON_SIZE,
+}
+
+export enum NoRouteTitleSize {
+  small = 'small',
+  large = 'medium',
+}

package/src/components/NoResult/NoResult.styles.ts

@@ -6,8 +6,26 @@ export const Container = styled('div', {
   alignItems: 'center',
 });
 
+export const ErrorDescription = styled('div', {
+  variants: {
+    size: {
+      small: {},
+      large: {
+        maxWidth: '316px',
+      },
+    },
+  },
+});
+
 export const Footer = styled('div', {
-  width: '100%',
+  variants: {
+    size: {
+      small: {
+        width: '100%',
+      },
+      large: {},
+    },
+  },
 });
 
 export const PrefixIcon = styled('div', {

package/src/components/NoResult/NoResult.tsx

@@ -13,16 +13,24 @@ import React from 'react';
 import { errorMessages } from '../../constants/errors';
 import { useAppStore } from '../../store/AppStore';
 
-import { makeInfo } from './NoResult.helpers';
-import { Container, Footer, PrefixIcon } from './NoResult.styles';
+import {
+  makeInfo,
+  NoRouteIconSize,
+  NoRouteTitleSize,
+} from './NoResult.helpers';
+import {
+  Container,
+  ErrorDescription,
+  Footer,
+  PrefixIcon,
+} from './NoResult.styles';
 
 export function NoResult(props: PropTypes) {
-  const { fetch, error } = props;
+  const { fetch, error, size = 'small' } = props;
   const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
   const toggleAllLiquiditySources = useAppStore().toggleAllLiquiditySources;
 
   const swappers = useAppStore().swappers();
-
   const info = makeInfo(
     error,
     disabledLiquiditySources,
@@ -32,27 +40,30 @@ export function NoResult(props: PropTypes) {
 
   return (
     <Container>
-      <NoRouteIcon size={24} color="gray" />
+      <NoRouteIcon size={NoRouteIconSize[size]} color="gray" />
       <Divider size={4} />
-      <Typography variant="title" size="small">
+      <Typography variant="title" size={NoRouteTitleSize[size]}>
         {errorMessages().noResultError.title}
       </Typography>
+      {size === 'large' && <Divider size={4} />}
       {!!info.description && (
-        <Typography
-          variant="body"
-          size="small"
-          align="center"
-          color="neutral700">
-          {info.description}
-        </Typography>
+        <ErrorDescription size={size}>
+          <Typography
+            variant="body"
+            size="small"
+            align="center"
+            color="neutral700">
+            {info.description}
+          </Typography>
+        </ErrorDescription>
       )}
-      <Divider size={4} />
+      <Divider size={size === 'large' ? '24' : '4'} />
       {!!info.alert && (
-        <Footer>
+        <Footer size={size}>
           <Alert
             type={info.alert.type}
             title={info.alert.text}
-            titleAlign={'center'}
+            titleAlign={'left'}
             action={
               info.alert.action && (
                 <Button

package/src/components/NoResult/NoResult.types.ts

@@ -3,6 +3,7 @@ import type { NoResultError, QuoteRequestFailed } from '../../types';
 export interface PropTypes {
   fetch: () => void;
   error: NoResultError | QuoteRequestFailed | null;
+  size?: 'small' | 'large';
 }
 
 type AlertAction = {

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,172 @@ 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}
-            />
+  return fullExpandedMode ? (
+    <FullExpandedQuote
+      selected={selected}
+      fee={fee}
+      time={totalTime}
+      tooltipContainer={getExpanded()}
+      steps={steps}
+      tags={sortedQuoteTags}
+      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 (
+                  <>
+                    <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}
+          />
 
-            {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>
+          {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}
+        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/Quotes/Quotes.tsx

@@ -2,7 +2,7 @@ import type { PropTypes } from './Quotes.types';
 import type { MultiRouteSimulationResult } from 'rango-sdk';
 
 import { i18n } from '@lingui/core';
-import { Divider, Typography } from '@rango-dev/ui';
+import { Divider, FullExpandedQuote, Typography } from '@rango-dev/ui';
 import React from 'react';
 
 import { QuoteInfo } from '../../containers/QuoteInfo';
@@ -26,6 +26,7 @@ export function Quotes(props: PropTypes) {
     fetch,
     showModalFee,
     hasSort = true,
+    fullExpandedMode = false,
   } = props;
   const {
     selectedQuote,
@@ -69,11 +70,15 @@ export function Quotes(props: PropTypes) {
       {loading &&
         Array.from({ length: ITEM_SKELETON_COUNT }, (_, index) => (
           <React.Fragment key={index}>
-            <QuoteSkeleton
-              tagHidden={false}
-              type="list-item"
-              expanded={false}
-            />
+            {fullExpandedMode ? (
+              <FullExpandedQuote loading />
+            ) : (
+              <QuoteSkeleton
+                tagHidden={false}
+                type="list-item"
+                expanded={false}
+              />
+            )}
             <Divider size={16} />
           </React.Fragment>
         ))}
@@ -106,6 +111,7 @@ export function Quotes(props: PropTypes) {
                       loading={loading}
                       error={quoteError?.options || null}
                       warning={quoteWarning}
+                      fullExpandedMode={fullExpandedMode}
                       onClick={(quote) => {
                         if (!quoteError) {
                           updateQuotePartialState('warning', quoteWarning);
@@ -124,7 +130,11 @@ export function Quotes(props: PropTypes) {
               })
             : showNoResultMessage && (
                 <ErrorsContainer>
-                  <NoResult error={error} fetch={fetch} />
+                  <NoResult
+                    size={fullExpandedMode ? 'large' : 'small'}
+                    error={error}
+                    fetch={fetch}
+                  />
                 </ErrorsContainer>
               )}
         </>

package/src/components/Quotes/Quotes.types.ts

@@ -6,4 +6,5 @@ export type PropTypes = {
   fetch: (shouldChangeSelectedQuote?: boolean) => void;
   showModalFee?: boolean;
   hasSort?: boolean;
+  fullExpandedMode?: boolean;
 };

package/src/containers/ExpandedQuotes/ExpandedQuotes.styles.ts

@@ -10,6 +10,18 @@ export const Container = styled('div', {
   [`.${darkTheme} &`]: {
     backgroundColor: '$neutral300',
   },
+
+  variants: {
+    expandMode: {
+      default: {
+        width: '390px',
+      },
+      full: {
+        width: '719px',
+      },
+    },
+  },
+
   '&.is-hidden': {
     width: 0,
     opacity: 0,