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

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

@@ -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.33",
+  "version": "0.17.1-next.35",
   "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.21",
     "@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' });

package/src/components/QuoteSkeleton/QuoteSummarySkeleton.tsx

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

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

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

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

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