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

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,KAAsC,MAAM,OAAO,CAAC;AA8C3D,wBAAgB,IAAI,sBA4NnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA8C3D,wBAAgB,IAAI,sBAgOnB"}

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

@@ -1 +1 @@
-{"version":3,"file":"SelectSwapItemsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SelectSwapItemsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,UAAU,SAAS;IACjB,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC;CAChC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,qBA2FnD"}
+{"version":3,"file":"SelectSwapItemsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SelectSwapItemsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,UAAU,SAAS;IACjB,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC;CAChC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,qBA+FnD"}

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

@@ -1 +1 @@
-{"version":3,"file":"SettingsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SettingsPage.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,wBAAgB,YAAY,sBA2K3B"}
+{"version":3,"file":"SettingsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SettingsPage.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,wBAAgB,YAAY,sBA4K3B"}

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

@@ -1 +1 @@
-{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAqBlD,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBAmE1B"}
+{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAsBlD,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBAmE1B"}

package/dist/store/slices/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/store/slices/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,QAAQ,CAAC;AAE1D,eAAO,MAAM,cAAc,EAAE,YAI5B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,YAAY,CAAC;IAErB,YAAY,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,2BAA2B,CACzD,YAAY,EACZ,WAAW,EACX,WAAW,CAiBZ,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/store/slices/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,QAAQ,CAAC;AAE1D,eAAO,MAAM,cAAc,EAAE,YAK5B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,YAAY,CAAC;IAErB,YAAY,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,2BAA2B,CACzD,YAAY,EACZ,WAAW,EACX,WAAW,CAiBZ,CAAC"}

package/dist/store/slices/data.d.ts

@@ -5,7 +5,7 @@ type BlockchainOptions = {
     type?: 'source' | 'destination';
 };
 type TokenOptions = {
-    type?: 'source' | 'destination';
+    type: 'source' | 'destination';
     blockchain?: string;
     searchFor?: string;
 };
@@ -19,7 +19,7 @@ export interface DataSlice {
     blockchains: (options?: BlockchainOptions) => BlockchainMeta[];
     tokens: (options?: TokenOptions) => Token[];
     swappers: () => SwapperMeta[];
-    isTokenPinned: (token: Token) => boolean;
+    isTokenPinned: (token: Token, type: 'source' | 'destination') => boolean;
     fetch: () => Promise<void>;
 }
 export declare const createDataSlice: StateCreator<DataSlice & ConfigSlice, [

package/dist/store/slices/data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../src/store/slices/data.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AACpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAO5C,KAAK,iBAAiB,GAAG;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;CACjC,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAEhC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AACF,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC3D,MAAM,WAAW,SAAS;IACxB,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,OAAO,EAAE,KAAK,EAAE,CAAC;IACjB,cAAc,EAAE,KAAK,EAAE,CAAC;IACxB,SAAS,EAAE,WAAW,EAAE,CAAC;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,iBAAiB,KAAK,cAAc,EAAE,CAAC;IAC/D,MAAM,EAAE,CAAC,OAAO,CAAC,EAAE,YAAY,KAAK,KAAK,EAAE,CAAC;IAC5C,QAAQ,EAAE,MAAM,WAAW,EAAE,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC;IAEzC,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,EAAE,YAAY,CACxC,SAAS,GAAG,WAAW,EACvB;CAAE,EACF;CAAE,EACF,SAAS,CAqMT,CAAC"}
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../src/store/slices/data.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AACpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAO5C,KAAK,iBAAiB,GAAG;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;CACjC,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC;IAE/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AACF,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC3D,MAAM,WAAW,SAAS;IACxB,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,OAAO,EAAE,KAAK,EAAE,CAAC;IACjB,cAAc,EAAE,KAAK,EAAE,CAAC;IACxB,SAAS,EAAE,WAAW,EAAE,CAAC;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,iBAAiB,KAAK,cAAc,EAAE,CAAC;IAC/D,MAAM,EAAE,CAAC,OAAO,CAAC,EAAE,YAAY,KAAK,KAAK,EAAE,CAAC;IAC5C,QAAQ,EAAE,MAAM,WAAW,EAAE,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,GAAG,aAAa,KAAK,OAAO,CAAC;IAEzE,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,EAAE,YAAY,CACxC,SAAS,GAAG,WAAW,EACvB;CAAE,EACF;CAAE,EACF,SAAS,CAyMT,CAAC"}

package/dist/types/config.d.ts

@@ -78,12 +78,15 @@ export type WidgetAffiliate = {
  * blockchains. e.g. ['BSC','ETHEREUM']
  * @property {Asset[]} tokens - The `tokens` property is an optional array of `Asset` objects that
  * you could use that to limit tokens to some limited ones.
+ * @property {Asset} pinnedTokens - The `pinnedTokens` property is an optional array of `Asset` objects that
+ * you could use to pin tokens of your choice to the top of the token list.
  */
 export type BlockchainAndTokenConfig = {
     blockchain?: string;
     token?: Asset;
     blockchains?: string[];
     tokens?: Asset[];
+    pinnedTokens?: Asset[];
 };
 /**
  * `Features`
@@ -142,8 +145,6 @@ export type Features = Partial<Record<'theme' | 'language' | 'connectWalletButto
  * that defines the various properties of the theme, such as colors, fonts, and others.
  * @property {boolean} externalWallets
  * If `externalWallets` is `true`, you should add `WidgetWallets` to your app.
- * @property {Asset} pinnedTokens - The `pinnedTokens` property is an optional array of `Asset` objects that
- * you could use to pin tokens of your choice to the top of the token list.
  * @property {boolean} enableNewLiquiditySources - The `enableNewLiquiditySources` property is a boolean value that when you
  * set it to true, whenever a new liquidity source is added, it will be added to your list as well.
  * @property {Features} features - An optional object for configuring the visibility or enablement of various features.
@@ -170,7 +171,6 @@ export type WidgetConfig = {
     language?: Language;
     theme?: WidgetTheme;
     externalWallets?: boolean;
-    pinnedTokens?: Asset[];
     enableNewLiquiditySources?: boolean;
     features?: Features;
 };

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/wallets.d.ts

@@ -17,7 +17,7 @@ export declare const getUsdPrice: (blockchain: string, symbol: string, address:
 export declare const isExperimentalChain: (blockchains: BlockchainMeta[], wallet: string) => boolean;
 export declare const getKeplrCompatibleConnectedWallets: (selectableWallets: Wallet[]) => WalletType[];
 export declare function formatBalance(balance: Balance | null): Balance | null;
-export declare function sortTokensByBalance(tokens: Token[], getBalanceFor: (token: Token) => Balance | null): Token[];
+export declare function sortTokens(tokens: Token[], getBalanceFor: (token: Token) => Balance | null, isTokenPinned: (token: Token) => boolean): Token[];
 export declare function tokensAreEqual(tokenA: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null, tokenB: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null): boolean;
 export declare function sortWalletsBasedOnConnectionState(wallets: ModalWalletInfo[]): ModalWalletInfo[];
 export declare function getConciseAddress(address: string, maxChars?: number, ellipsisLength?: number): string;
@@ -28,4 +28,5 @@ export declare function getAddress({ chain, connectedWallets, walletType, }: {
 }): string | undefined;
 export declare function createTokenHash(token: Asset): TokenHash;
 export declare function makeTokensBalance(connectedWallets: ConnectedWallet[]): TokensBalance;
+export declare const isFetchingBalance: (connectedWallets: ConnectedWallet[], blockchain: string) => boolean;
 //# sourceMappingURL=wallets.d.ts.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.17.1-next.32",
+  "version": "0.17.1-next.34",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,7 +25,7 @@
     "@rango-dev/queue-manager-core": "^0.22.1-next.3",
     "@rango-dev/queue-manager-rango-preset": "^0.22.1-next.12",
     "@rango-dev/queue-manager-react": "^0.22.1-next.3",
-    "@rango-dev/ui": "^0.22.1-next.19",
+    "@rango-dev/ui": "^0.22.1-next.20",
     "@rango-dev/wallets-react": "^0.8.1-next.6",
     "@rango-dev/wallets-shared": "^0.21.1-next.6",
     "bignumber.js": "^9.1.1",

package/src/components/BlockchainsSection/BlockchainsSection.styles.ts

@@ -1,6 +1,6 @@
 import { styled } from '@rango-dev/ui';
 
-export const Container = styled('div', {
+export const Blockchains = styled('div', {
   display: 'grid',
   gap: '$10',
   gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',

package/src/components/BlockchainsSection/BlockchainsSection.tsx

@@ -7,6 +7,7 @@ import {
   Divider,
   Image,
   Skeleton,
+  Tooltip,
   Typography,
 } from '@rango-dev/ui';
 import React from 'react';
@@ -15,8 +16,9 @@ import { BLOCKCHAIN_LIST_SIZE } from '../../constants/configs';
 import { usePrepareBlockchainList } from '../../hooks/usePrepareBlockchainList';
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
+import { getContainer } from '../../utils/common';
 
-import { Container } from './BlockchainsSection.styles';
+import { Blockchains } from './BlockchainsSection.styles';
 
 const NUMBER_OF_LOADING = 12;
 
@@ -38,13 +40,13 @@ export function BlockchainsSection(props: PropTypes) {
   const showMoreButton = !onlyOneItemInList && hasMoreItemsInList;
 
   return (
-    <div>
+    <>
       <Divider size={12} />
       <Typography variant="label" size="large">
         {i18n.t('Select Blockchain')}
       </Typography>
       <Divider size={12} />
-      <Container>
+      <Blockchains>
         {fetchStatus === 'loading' &&
           Array.from(Array(NUMBER_OF_LOADING), (e) => (
             <Skeleton key={e} variant="rounded" height={50} />
@@ -65,12 +67,19 @@ export function BlockchainsSection(props: PropTypes) {
               </Typography>
             </BlockchainsChip>
             {blockchainsList.list.map((item) => (
-              <BlockchainsChip
+              <Tooltip
                 key={item.name}
-                selected={!!blockchain && blockchain.name === item.name}
-                onClick={() => onChange(item)}>
-                <Image src={item.logo} size={30} />
-              </BlockchainsChip>
+                content={item.shortName}
+                side="bottom"
+                sideOffset={2}
+                container={getContainer()}>
+                <BlockchainsChip
+                  key={item.name}
+                  selected={!!blockchain && blockchain.name === item.name}
+                  onClick={() => onChange(item)}>
+                  <Image src={item.logo} size={30} />
+                </BlockchainsChip>
+              </Tooltip>
             ))}
 
             {onlyOneItemInList ? (
@@ -96,7 +105,7 @@ export function BlockchainsSection(props: PropTypes) {
             ) : null}
           </>
         )}
-      </Container>
-    </div>
+      </Blockchains>
+    </>
   );
 }

package/src/components/ConfirmWalletsModal/ConfirmWallets.styles.ts

@@ -37,10 +37,13 @@ export const Title = styled('div', {
 });
 
 export const ListContainer = styled('div', {
-  display: 'grid',
+  display: 'flex',
+  justifyContent: 'space-evenly',
+  alignItems: 'center',
   gap: '$10',
-  gridTemplateColumns: ' repeat(3, minmax(0, 1fr))',
-  alignContent: 'baseline',
+  flexWrap: 'wrap',
+  paddingTop: '$5',
+  height: '100%',
 });
 
 export const WalletButton = styled('button', {
@@ -85,6 +88,12 @@ export const WalletButton = styled('button', {
     },
   },
 });
+
+export const ShowMoreWallets = styled(WalletButton, {
+  alignSelf: 'stretch',
+  minHeight: '93px',
+});
+
 export const Trigger = styled(Collapsible.Trigger, {
   padding: '$0',
   border: 'none',
@@ -114,10 +123,13 @@ export const WalletsContainer = styled('div', {
 });
 
 export const walletsListStyles = css({
-  display: 'grid',
+  display: 'flex',
+  justifyContent: 'space-evenly',
+  alignItems: 'center',
   gap: '$10',
-  gridTemplateColumns: ' repeat(3, minmax(0, 1fr))',
-  alignContent: 'baseline',
+  flexWrap: 'wrap',
+  paddingTop: '$5',
+  height: '100%',
 });
 
 export const CollapsibleRoot = styled(Collapsible.Root, {
@@ -167,7 +179,6 @@ export const CustomDestination = styled('div', {
   padding: '$10 $0',
   '& .button__content': {
     display: 'flex',
-    justifyContent: 'center',
     alignItems: 'center',
   },
   '& .alarms': { paddingTop: '5px' },
@@ -196,10 +207,12 @@ export const ConfirmButton = styled('div', {
 });
 
 export const StyledTextField = styled(TextField, {
+  backgroundColor: '$neutral100',
   padding: '$0 $15 $15 $15',
 });
 
 export const CollapsibleContent = styled(Collapsible.Content, {
+  backgroundColor: '$neutral100',
   overflow: 'hidden',
   variants: {
     open: {

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -33,7 +33,7 @@ import {
 } from '../../utils/wallets';
 import { WalletModal } from '../WalletModal';
 
-import { WalletButton } from './ConfirmWallets.styles';
+import { ShowMoreWallets } from './ConfirmWallets.styles';
 import {
   LogoContainer,
   Spinner,
@@ -292,14 +292,14 @@ export function WalletList(props: PropTypes) {
         );
       })}
       {shouldShowMoreWallets && (
-        <WalletButton selected={false} onClick={onShowMore.bind(null)}>
+        <ShowMoreWallets selected={false} onClick={onShowMore}>
           <Typography variant="label" size="medium">
             {i18n.t('Show more wallets')}
             <Typography variant="label" size="medium" color="$primary">
               &nbsp;+{numberOfSupportedWallets - (limit ?? 0)}
             </Typography>
           </Typography>
-        </WalletButton>
+        </ShowMoreWallets>
       )}
     </>
   );

package/src/components/Layout/Layout.styles.ts

@@ -8,8 +8,10 @@ export const Container = styled('div', {
   overflow: 'hidden !important',
   boxShadow: '15px 15px 15px 0px rgba(0, 0, 0, 0.05)',
   width: '95vw',
+  minWidth: '300px',
   maxWidth: '390px',
   maxHeight: '700px',
+  textAlign: 'left',
   $$color: '$colors$neutral100',
   [`.${darkTheme} &`]: {
     $$color: '$colors$neutral300',

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

@@ -3,7 +3,7 @@ import { css, styled } from '@rango-dev/ui';
 export const Container = styled('div', {
   width: '100%',
   height: '100%',
-  padding: '$0 $20',
+  padding: '$10 $20',
 });
 
 export const StepContainer = styled('div', {
@@ -11,6 +11,7 @@ export const StepContainer = styled('div', {
   borderRadius: '$xm',
   padding: '$10 $15',
 });
+
 export const StepSeparator = styled('div', {
   width: '0px',
   height: '$20',

package/src/components/LoadingSwapDetails/LoadingSwapDetails.tsx

@@ -1,62 +1,47 @@
 import { i18n } from '@lingui/core';
-import { ChainToken, Divider, Skeleton, Typography } from '@rango-dev/ui';
+import { Divider, Skeleton, Typography } from '@rango-dev/ui';
 import React from 'react';
 
+import { QuoteSummarySkeleton, StepSkeleton } from '../QuoteSkeleton';
+
 import {
   Container,
-  costStyles,
-  quoteSummaryItemStyles,
-  quoteSummarySeparatorStyles,
-  quoteSummaryStyles,
+  extraInfoStyles,
+  StepContainer,
   StepSeparator,
-  swapsStepsStyles,
-  tokenAmountStyles,
 } from './LoadingSwapDetails.styles';
-import { LoadingSwapDetailStep } from './LoadingSwapDetailStep';
 
 export function LoadingSwapDetails() {
-  const quoteSummary = (
-    <div className={quoteSummaryItemStyles()}>
-      <div className={tokenAmountStyles()}>
-        <ChainToken loading size="medium" chainImage="" tokenImage="" />
-        <Divider size={8} direction="horizontal" />
-        <Skeleton height={15} width={148} variant="rounded" />
-      </div>
-      <Skeleton height={12} width={64} variant="rounded" />
-    </div>
-  );
-
   return (
     <Container>
-      <div className={costStyles()}>
-        <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>
-
-      <div className={quoteSummaryStyles()}>
-        {quoteSummary}
-        <div className={quoteSummarySeparatorStyles()}></div>
-        {quoteSummary}
-      </div>
-
-      <div className={swapsStepsStyles()}>
+      <QuoteSummarySkeleton type="swap-preview" />
+      <div className="swaps-steps">
         <Typography variant="title" size="small">
           {i18n.t('Swaps steps')}
         </Typography>
       </div>
 
-      <div>
-        <LoadingSwapDetailStep extraInfo />
+      <>
+        <StepContainer>
+          <StepSkeleton separator={false} />
+          <div className={extraInfoStyles()}>
+            <Divider direction="horizontal" size={20} />
+            <Skeleton height={22} variant="rectangular" />
+          </div>
+        </StepContainer>
         <StepSeparator />
-        <LoadingSwapDetailStep />
+        <StepContainer>
+          <StepSkeleton separator={false} />
+        </StepContainer>
         <StepSeparator />
-        <LoadingSwapDetailStep />
+        <StepContainer>
+          <StepSkeleton separator={false} />
+        </StepContainer>
         <StepSeparator />
-        <LoadingSwapDetailStep />
-      </div>
+        <StepContainer>
+          <StepSkeleton separator={false} />
+        </StepContainer>
+      </>
     </Container>
   );
 }

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

@@ -1,5 +1,5 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { css, darkTheme, Image, styled } from '@rango-dev/ui';
+import { css, darkTheme, Image, styled, Typography } from '@rango-dev/ui';
 
 import { CollapsibleContent } from '../ConfirmWalletsModal/ConfirmWallets.styles';
 
@@ -109,7 +109,6 @@ export const SummaryContainer = styled('div', {
 });
 
 export const summaryStyles = css({
-  width: '100%',
   padding: '$15 $15 $10 $15',
   cursor: 'default',
 });
@@ -194,6 +193,7 @@ export const ChainImageContainer = styled('div', {
 
 export const Content = styled(CollapsibleContent, {
   width: '100%',
+  background: 'inherit',
 });
 
 export const IconContainer = styled('div', {
@@ -240,3 +240,10 @@ export const FrameIcon = styled('div', {
   alignItems: 'center',
   display: 'flex',
 });
+
+export const BasicInfoOutput = styled(Typography, {
+  width: '100%',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  letterSpacing: 0.4,
+});

package/src/components/Quote/Quote.tsx

@@ -48,6 +48,7 @@ import { getPriceImpact, getPriceImpactLevel } from '../../utils/quote';
 import { getTotalFeeInUsd } from '../../utils/swap';
 
 import {
+  BasicInfoOutput,
   basicInfoStyles,
   ChainImageContainer,
   Chains,
@@ -290,16 +291,13 @@ export function Quote(props: QuoteProps) {
               <FrameIcon>
                 <InfoIcon size={12} color="gray" />
               </FrameIcon>
-              <Typography
-                size="small"
-                variant="body"
-                style={{ letterSpacing: 0.4 }}>
+              <BasicInfoOutput size="small" variant="body">
                 {`${roundedInput} ${
                   steps[0].from.token.displayName
                 } = ${roundedOutput} ${
                   steps[steps.length - 1].to.token.displayName
                 }`}
-              </Typography>
+              </BasicInfoOutput>
               <Typography
                 color="$neutral600"
                 ml={2}

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