@rango-dev/widget-embedded 0.17.1-next.33 → 0.17.1-next.34

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/Slippage/Slippage.styles.ts

@@ -1,14 +1,19 @@
-import { styled } from '@rango-dev/ui';
+import { Chip, styled, TextField } from '@rango-dev/ui';
 
 export const BaseContainer = styled('div', {
   paddingTop: '$5',
-  paddingBottom: '30px',
+  padding: '$10 $5',
 });
 
 export const SlippageChipsContainer = styled('div', {
   display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'start',
+  flexWrap: 'wrap',
+  gap: '$10',
+  [`& ${TextField}`]: {
+    flex: '1 1 0',
+    maxWidth: '127px',
+    minWidth: '85px',
+  },
 });
 
 export const Head = styled('div', {
@@ -19,6 +24,11 @@ export const Head = styled('div', {
 });
 
 export const SlippageTooltipContainer = styled('div', {
-  maxWidth: '300px',
+  maxWidth: '280px',
   padding: '$10',
 });
+
+export const SlippageChip = styled(Chip, {
+  width: '61px',
+  flexShrink: 0,
+});

package/src/components/Slippage/Slippage.tsx

@@ -1,6 +1,5 @@
 import { i18n } from '@lingui/core';
 import {
-  Chip,
   Divider,
   InfoIcon,
   TextField,
@@ -17,7 +16,12 @@ import {
 import { useAppStore } from '../../store/AppStore';
 import { getContainer } from '../../utils/common';
 
-import { BaseContainer, Head, SlippageChipsContainer } from './Slippage.styles';
+import {
+  BaseContainer,
+  Head,
+  SlippageChip,
+  SlippageChipsContainer,
+} from './Slippage.styles';
 import { SlippageTooltipContent } from './SlippageTooltipContent';
 
 export function Slippage() {
@@ -34,6 +38,7 @@ export function Slippage() {
         <Tooltip
           container={getContainer()}
           side="top"
+          sideOffset={4}
           content={<SlippageTooltipContent />}>
           <InfoIcon color="gray" />
         </Tooltip>
@@ -43,8 +48,7 @@ export function Slippage() {
           const key = `slippage-${index}`;
           return (
             <>
-              <Chip
-                style={{ width: '64px', flexShrink: 0 }}
+              <SlippageChip
                 key={key}
                 onClick={() => {
                   if (customSlippage) {
@@ -55,7 +59,6 @@ export function Slippage() {
                 selected={!customSlippage && slippageItem === slippage}
                 label={`${slippageItem.toString()}%`}
               />
-              <Divider direction="horizontal" size={8} />
             </>
           );
         })}

package/src/components/SwapDetails/SwapDetails.Placeholder.tsx

@@ -24,7 +24,6 @@ import {
 
 export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
   const { requestId, showSkeleton } = props;
-
   return (
     <Layout
       noPadding

package/src/components/SwapDetails/SwapDetails.styles.ts

@@ -70,7 +70,6 @@ export const outputStyles = css({
 });
 
 export const titleStepsStyles = css({
-  textAlign: 'left',
   width: '100%',
   padding: '0 $20 $10',
 });

package/src/components/TokenList/TokenList.styles.ts

@@ -18,7 +18,8 @@ export const tokenNameStyles = css({
 export const descriptionStyles = css({
   position: 'relative',
   height: 12,
-  width: 150,
+  width: '30%',
+  maxWidth: '150px',
 });
 export const tokenTitleStyles = css({
   position: 'absolute',
@@ -30,6 +31,9 @@ export const tokenAddressStyles = css({
   transform: 'translateY(12px)',
   visibility: 'hidden',
   '& a': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
     fontSize: '$12',
     lineHeight: '$16',
     $$color: '$colors$neutral600',
@@ -106,6 +110,10 @@ export const TagTitle = styled(Typography, {});
 
 export const BalanceContainer = styled('div', {
   textAlign: 'right',
+  width: '100%',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
   [`& .${usdValueStyles}`]: {
     $$color: '$colors$neutral600',
     [`.${darkTheme} &`]: {
@@ -115,7 +123,7 @@ export const BalanceContainer = styled('div', {
   },
 });
 
-export const End = styled('ul', {
+export const End = styled('div', {
   display: 'flex',
   alignItems: 'end',
   flexDirection: 'column',
@@ -140,3 +148,10 @@ export const Pin = styled('div', {
   bottom: -6,
   right: -6,
 });
+
+export const TokenBalance = styled(Typography, {
+  width: '100%',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});

package/src/components/TokenList/TokenList.tsx

@@ -36,6 +36,7 @@ import {
   TagTitle,
   Title,
   tokenAddressStyles,
+  TokenBalance,
   tokenNameStyles,
   tokenTitleStyles,
   tokenWithoutNameStyles,
@@ -80,6 +81,7 @@ const renderDesc = (props: RenderDescProps) => {
             {length > 10
               ? `${address.slice(0, 5)}...${address.slice(length - 6, length)}`
               : address}{' '}
+            <Divider size={4} direction="horizontal" />
             <ExternalLinkIcon color="gray" size={12} />
           </a>
         </div>
@@ -175,6 +177,8 @@ export function TokenList(props: PropTypes) {
               <ListItemButton
                 style={{
                   height: style?.height,
+                  width: '100%',
+                  overflow: 'hidden',
                 }}
                 tab-index={index}
                 key={`${token.symbol}${token.address}`}
@@ -237,9 +241,9 @@ export function TokenList(props: PropTypes) {
                   ) : (
                     tokenBalance && (
                       <BalanceContainer>
-                        <Typography variant="title" size="small">
+                        <TokenBalance variant="title" size="small">
                           {tokenBalance.amount}
-                        </Typography>
+                        </TokenBalance>
                         <div />
                         {tokenBalance.usdValue && (
                           <Typography

package/src/containers/QuoteInfo/QuoteInfo.tsx

@@ -3,7 +3,8 @@ import type { PropTypes } from './QuoteInfo.types';
 import { Divider } from '@rango-dev/ui';
 import React from 'react';
 
-import { Quote, QuoteSkeleton } from '../../components/Quote';
+import { Quote } from '../../components/Quote';
+import { QuoteSkeleton } from '../../components/QuoteSkeleton';
 import { QuoteWarningsAndErrors } from '../../components/QuoteWarningsAndErrors';
 import { useQuoteStore } from '../../store/quote';
 import { QuoteErrorType } from '../../types';

package/src/pages/Home.tsx

@@ -25,7 +25,7 @@ import { useWalletsStore } from '../store/wallets';
 import { numberToString } from '../utils/numbers';
 import { getPriceImpact, getPriceImpactLevel } from '../utils/quote';
 import { canComputePriceImpact, getSwapButtonState } from '../utils/swap';
-import { formatBalance } from '../utils/wallets';
+import { formatBalance, isFetchingBalance } from '../utils/wallets';
 
 const Container = styled('div', {
   display: 'flex',
@@ -75,6 +75,9 @@ export function Home() {
   const setCurrentPage = useUiStore.use.setCurrentPage();
   const [showQuoteWarningModal, setShowQuoteWarningModal] = useState(false);
   const layoutRef = useRef<HTMLDivElement>(null);
+  const fetchingBalance =
+    !!fromBlockchain &&
+    isFetchingBalance(connectedWallets, fromBlockchain.name);
 
   const needsToWarnEthOnPath = false;
 
@@ -195,6 +198,7 @@ export function Home() {
               }}
               disabled={fetchMetaStatus === 'failed'}
               loading={fetchMetaStatus === 'loading'}
+              loadingBalance={fetchingBalance}
               onSelectMaxBalance={() => {
                 if (fromTokenFormattedBalance !== '0') {
                   setInputAmount(tokenBalanceReal.split(',').join(''));

package/src/pages/SettingsPage.tsx

@@ -144,17 +144,18 @@ export function SettingsPage() {
     title: (
       <>
         <Typography variant="title" size="xmedium">
-          {i18n.t('Infinite Approval')}
+          {i18n.t('Infinite approval')}
         </Typography>
         <Divider direction="horizontal" size={4} />
         <Tooltip
           side="top"
+          sideOffset={4}
           container={getContainer()}
           content={
             <TooltipContainer>
               <Typography variant="label" size="medium" color="neutral700">
                 {i18n.t(
-                  "Enabling the 'Infinite Approval' mode grants unrestricted access to smart contracts of DEXes/Bridges, allowing them to utilize the approved token amount without limitations."
+                  "Enabling the 'Infinite approval' mode grants unrestricted access to smart contracts of DEXes/Bridges, allowing them to utilize the approved token amount without limitations."
                 )}
               </Typography>
             </TooltipContainer>
@@ -180,7 +181,7 @@ export function SettingsPage() {
   return (
     <Layout
       header={{
-        title: i18n.t('Setting'),
+        title: i18n.t('Settings'),
       }}>
       <SettingsContainer>
         <Slippage />

package/src/pages/WalletsPage.tsx

@@ -11,11 +11,12 @@ import { useAppStore } from '../store/AppStore';
 import { getContainer } from '../utils/common';
 
 const ListContainer = styled('div', {
-  display: 'grid',
+  display: 'flex',
+  justifyContent: 'space-evenly',
+  alignItems: 'center',
   gap: '$10',
-  gridTemplateColumns: ' repeat(3, minmax(0, 1fr))',
-  alignContent: 'baseline',
-  paddingTop: '$15',
+  flexWrap: 'wrap',
+  paddingTop: '$5',
   height: '100%',
 });
 

package/src/store/slices/config.ts

@@ -5,6 +5,7 @@ export const DEFAULT_CONFIG: WidgetConfig = {
   apiKey: '',
   multiWallets: true,
   enableNewLiquiditySources: true,
+  customDestination: true,
 };
 
 export type ConfigSlice = {

package/src/utils/wallets.ts

@@ -543,3 +543,11 @@ export function makeTokensBalance(connectedWallets: ConnectedWallet[]) {
       return balances;
     }, {});
 }
+
+export const isFetchingBalance = (
+  connectedWallets: ConnectedWallet[],
+  blockchain: string
+) =>
+  !!connectedWallets.find(
+    (wallet) => wallet.chain === blockchain && wallet.loading
+  );

package/dist/components/LoadingSwapDetails/LoadingSwapDetailStep.d.ts

@@ -1,4 +0,0 @@
-import type { StepSkeletonPropsTypes } from './LoadingSwapDetails.types';
-import React from 'react';
-export declare function LoadingSwapDetailStep(props: StepSkeletonPropsTypes): React.JSX.Element;
-//# sourceMappingURL=LoadingSwapDetailStep.d.ts.map

package/dist/components/LoadingSwapDetails/LoadingSwapDetailStep.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LoadingSwapDetailStep.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingSwapDetails/LoadingSwapDetailStep.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAGzE,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,sBAAsB,qBAiClE"}

package/dist/components/LoadingSwapDetails/LoadingSwapDetails.types.d.ts

@@ -1,4 +0,0 @@
-export interface StepSkeletonPropsTypes {
-    extraInfo?: boolean;
-}
-//# sourceMappingURL=LoadingSwapDetails.types.d.ts.map

package/dist/components/LoadingSwapDetails/LoadingSwapDetails.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LoadingSwapDetails.types.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingSwapDetails/LoadingSwapDetails.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,sBAAsB;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/components/Quote/QuoteSkeleton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"QuoteSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Quote/QuoteSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAmC1B,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,qBAqE7C"}

package/dist/components/Quote/QuoteSkeleton.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"QuoteSkeleton.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Quote/QuoteSkeleton.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA4FpB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAaxB,CAAC"}

package/dist/components/Quote/QuoteSkeleton.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"QuoteSkeleton.types.d.ts","sourceRoot":"","sources":["../../../src/components/Quote/QuoteSkeleton.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,OAAO,GAAG,WAAW,GAAG,cAAc,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC"}

package/src/components/LoadingSwapDetails/LoadingSwapDetailStep.tsx

@@ -1,48 +0,0 @@
-import type { StepSkeletonPropsTypes } from './LoadingSwapDetails.types';
-
-import { ChainToken, Divider, NextIcon, Skeleton } from '@rango-dev/ui';
-import React from 'react';
-
-import {
-  extraInfoStyles,
-  StepContainer,
-  stepIconStyles,
-  stepInfoStyles,
-  stepTitleStyles,
-  stepTokensStyles,
-} from './LoadingSwapDetails.styles';
-
-export function LoadingSwapDetailStep(props: StepSkeletonPropsTypes) {
-  const { extraInfo } = props;
-  return (
-    <StepContainer>
-      <div className={stepTitleStyles()}>
-        <Skeleton height={28} width={28} variant="circular" />
-        <Divider direction="horizontal" size={8} />
-        <Skeleton height={15} width={148} variant="rounded" />
-      </div>
-      <div className={stepTokensStyles()}>
-        <Divider direction="horizontal" size={20} />
-        <div className={stepInfoStyles()}>
-          <ChainToken size="small" loading chainImage="" tokenImage="" />
-          <Divider direction="horizontal" size={8} />
-          <Skeleton height={12} width={76} variant="rounded" />
-        </div>
-        <div className={stepIconStyles()}>
-          <NextIcon color="gray" size={16} />
-        </div>
-        <div className={stepInfoStyles()}>
-          <ChainToken size="small" loading chainImage="" tokenImage="" />
-          <Divider direction="horizontal" size={8} />
-          <Skeleton height={12} width={76} variant="rounded" />
-        </div>
-      </div>
-      {extraInfo && (
-        <div className={extraInfoStyles()}>
-          <Divider direction="horizontal" size={20} />
-          <Skeleton height={22} width={297} variant="rectangular" />
-        </div>
-      )}
-    </StepContainer>
-  );
-}

package/src/components/LoadingSwapDetails/LoadingSwapDetails.types.ts

@@ -1,3 +0,0 @@
-export interface StepSkeletonPropsTypes {
-  extraInfo?: boolean;
-}

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

@@ -1,110 +0,0 @@
-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 ',
-  '& .cost-and-tag': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    height: '22px',
-  },
-  variants: {
-    rounded: {
-      true: {
-        borderRadius: '$xm',
-      },
-    },
-  },
-  '& .cost': {
-    display: 'flex',
-  },
-  '& .basic-summary': {
-    padding: '$15 $0 14px $0',
-  },
-  '& .output': {
-    padding: '$6 $0 $15 $0',
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  '& .output__token-info': {
-    display: 'flex',
-    justifyContent: 'start',
-    alignItems: 'center',
-    paddingBottom: '$5',
-  },
-  '& .quote-summary': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'end',
-  },
-  '& .quote-summary__separator': {
-    height: '$28',
-    marginLeft: '13px',
-    borderLeft: '1px solid $neutral700',
-  },
-  '& .token-amount': {
-    display: 'flex',
-    justifyContent: 'space-between',
-  },
-  '& .token-amount__label': {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'start',
-  },
-  '& .chains': {
-    paddingTop: '$2',
-  },
-  '& .swap-preview': {
-    padding: '$15 $0 $15 $0',
-  },
-  '& .steps': {
-    paddingLeft: '$8',
-  },
-  '& .step__title': {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '& .step__content': {
-    display: 'flex',
-    alignItems: 'start',
-  },
-  '& .step__tokens': {
-    paddingTop: '$5',
-    paddingBottom: '$10',
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '& .step__token-info': {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '& .step__icon-container': {
-    margin: '$0 $2',
-    padding: '$4',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export const StepSeparator = styled('div', {
-  borderLeft: '1px dashed black',
-  minHeight: ' 64px',
-  margin: '0px 11.5px',
-  alignSelf: 'stretch',
-  variants: {
-    hideSeparator: {
-      true: {
-        minHeight: 'unset',
-        height: '0',
-      },
-    },
-  },
-});

package/src/components/Quote/QuoteSkeleton.tsx

@@ -1,108 +0,0 @@
-import type { PropTypes } from './QuoteSkeleton.types';
-
-import { ChainToken, Divider, NextIcon, Skeleton } from '@rango-dev/ui';
-import React from 'react';
-
-import { Container, StepSeparator } from './QuoteSkeleton.styles';
-
-function StepSkeleton(props: { separator?: boolean }) {
-  const { separator = true } = props;
-  return (
-    <>
-      <div className="step__title">
-        <Skeleton height={22} width={22} variant="circular" />
-        <Divider direction="horizontal" size={8} />
-        <Skeleton height={15} width={148} variant="rounded" />
-      </div>
-      <div className="step__content">
-        <StepSeparator hideSeparator={!separator} />
-        <div className="step__tokens">
-          <div className="step__token-info">
-            <ChainToken size="small" loading chainImage="" tokenImage="" />
-            <Divider direction="horizontal" size={8} />
-            <Skeleton height={12} width={76} variant="rounded" />
-          </div>
-          <div className="step__icon-container">
-            <NextIcon color="gray" size={16} />
-          </div>
-          <div className="step__token-info">
-            <ChainToken size="small" loading chainImage="" tokenImage="" />
-            <Divider direction="horizontal" size={8} />
-            <Skeleton height={12} width={76} variant="rounded" />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
-
-export function QuoteSkeleton(props: PropTypes) {
-  const { type, expanded, tag = false } = props;
-  const quoteSummary = (
-    <div className="quote-summary">
-      <div className="token-amount">
-        <ChainToken loading size="medium" chainImage="" tokenImage="" />
-        <Divider size={8} direction="horizontal" />
-        <div className="token-amount__label">
-          <Skeleton height={10} width={60} variant="rounded" />
-          <Divider size={4} />
-          <Skeleton height={15} width={148} variant="rounded" />
-        </div>
-      </div>
-      <Skeleton height={12} width={64} variant="rounded" />
-    </div>
-  );
-
-  return (
-    <Container rounded={type !== 'basic'}>
-      <div className="cost-and-tag">
-        <div className="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" />
-        </div>
-        {tag && <Skeleton height={22} width={100} variant="rounded" />}
-      </div>
-      {type === 'basic' && (
-        <div className="basic-summary">
-          <Skeleton height={15} width={148} variant="rounded" />
-        </div>
-      )}
-      {type === 'list-item' && (
-        <div className="output">
-          <div className="output__token-info">
-            <ChainToken loading size="medium" chainImage="" tokenImage="" />
-            <Divider direction="horizontal" size={4} />
-            <Skeleton height={15} width={150} variant="rounded" />
-          </div>
-          <Divider size={4} />
-          <Skeleton height={10} width={184} variant="rounded" />
-        </div>
-      )}
-      {type === 'swap-preview' && (
-        <>
-          <Divider size={4} />
-          <div className="swap-preview">
-            {quoteSummary}
-            <div className="quote-summary__separator" />
-            {quoteSummary}
-          </div>
-        </>
-      )}
-      <div className="chains">
-        <Skeleton height={15} width={321} variant="rounded" />
-      </div>
-
-      {expanded && (
-        <div className="steps">
-          <Divider size={20} />
-          <StepSkeleton />
-          <StepSkeleton />
-          <StepSkeleton separator={false} />
-        </div>
-      )}
-    </Container>
-  );
-}