@rango-dev/widget-embedded 0.17.1-next.30 → 0.17.1-next.31

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

@@ -1 +1 @@
-{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAqD5E,wBAAgB,eAAe,sBA2S9B"}
+{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAyD5E,wBAAgB,eAAe,sBA2S9B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.17.1-next.30",
+  "version": "0.17.1-next.31",
   "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.17",
+    "@rango-dev/ui": "^0.22.1-next.18",
     "@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/BlockchainList/BlockchainList.styles.ts

@@ -1,4 +1,4 @@
-import { styled } from '@rango-dev/ui';
+import { ImageContainer, styled } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   display: 'flex',
@@ -12,7 +12,7 @@ export const List = styled('ul', {
   listStyle: 'none',
   overflowY: 'auto',
   paddingRight: '$5',
-  '.image-container': {
+  [`& ${ImageContainer}`]: {
     borderRadius: '$xm',
     overflow: 'hidden',
   },

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

@@ -1,6 +1,7 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
 import {
   Button,
+  css,
   darkTheme,
   IconButton,
   keyframes,
@@ -110,12 +111,13 @@ export const NavigateBack = styled(IconButton, {
 
 export const WalletsContainer = styled('div', {
   paddingTop: '$20',
-  '& .wallets-list': {
-    display: 'grid',
-    gap: '$10',
-    gridTemplateColumns: ' repeat(3, minmax(0, 1fr))',
-    alignContent: 'baseline',
-  },
+});
+
+export const walletsListStyles = css({
+  display: 'grid',
+  gap: '$10',
+  gridTemplateColumns: ' repeat(3, minmax(0, 1fr))',
+  alignContent: 'baseline',
 });
 
 export const CollapsibleRoot = styled(Collapsible.Root, {
@@ -171,6 +173,10 @@ export const CustomDestination = styled('div', {
   '& .alarms': { paddingTop: '5px' },
 });
 
+export const alarmsStyles = css({
+  paddingTop: '5px',
+});
+
 export const ExpandedIcon = styled('div', {
   transition: `all ${EXPANDABLE_TRANSITION_DURATION}ms ease`,
   variants: {

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -28,6 +28,7 @@ import { confirmSwapDisabled } from '../../utils/swap';
 
 import { getRequiredWallets, isValidAddress } from './ConfirmWallets.helpers';
 import {
+  alarmsStyles,
   CollapsibleContent,
   CollapsibleRoot,
   ConfirmButton,
@@ -43,6 +44,7 @@ import {
   Trigger,
   Wallets,
   WalletsContainer,
+  walletsListStyles,
 } from './ConfirmWallets.styles';
 import { WalletList } from './WalletList';
 
@@ -318,7 +320,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
       </Modal>
       {showMoreWalletFor && (
         <WalletsContainer>
-          <div className="wallets-list">
+          <div className={walletsListStyles()}>
             <WalletList
               chain={showMoreWalletFor}
               isSelected={isSelected}
@@ -458,7 +460,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                         </CollapsibleContent>
                       </CollapsibleRoot>
                       {isAddressMatched && (
-                        <div className="alarms">
+                        <div className={alarmsStyles()}>
                           <Alert
                             variant="alarm"
                             type="error"

package/src/components/LoadingSwapDetails/LoadingSwapDetailStep.tsx

@@ -3,35 +3,42 @@ import type { StepSkeletonPropsTypes } from './LoadingSwapDetails.types';
 import { ChainToken, Divider, NextIcon, Skeleton } from '@rango-dev/ui';
 import React from 'react';
 
-import { StepContainer } from './LoadingSwapDetails.styles';
+import {
+  extraInfoStyles,
+  StepContainer,
+  stepIconStyles,
+  stepInfoStyles,
+  stepTitleStyles,
+  stepTokensStyles,
+} from './LoadingSwapDetails.styles';
 
 export function LoadingSwapDetailStep(props: StepSkeletonPropsTypes) {
   const { extraInfo } = props;
   return (
     <StepContainer>
-      <div className="step-title">
+      <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="step-tokens">
+      <div className={stepTokensStyles()}>
         <Divider direction="horizontal" size={20} />
-        <div className="step-token-info">
+        <div className={stepInfoStyles()}>
           <ChainToken size="small" loading chainImage="" tokenImage="" />
           <Divider direction="horizontal" size={8} />
           <Skeleton height={12} width={76} variant="rounded" />
         </div>
-        <div className="step-icon-container">
+        <div className={stepIconStyles()}>
           <NextIcon color="gray" size={16} />
         </div>
-        <div className="step-token-info">
+        <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="extra-info">
+        <div className={extraInfoStyles()}>
           <Divider direction="horizontal" size={20} />
           <Skeleton height={22} width={297} variant="rectangular" />
         </div>

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

@@ -1,74 +1,15 @@
-import { styled } from '@rango-dev/ui';
+import { css, styled } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   width: '100%',
   height: '100%',
   padding: '$0 $20',
-
-  '.cost': {
-    paddingTop: '$15',
-    display: 'flex',
-  },
-
-  '.quote-summary': {
-    padding: '$15 $0',
-  },
-
-  '.quote-summary-item': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-
-  '.token-amount': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-
-  '.quote-summary-separator': {
-    width: '0px',
-    height: '$16',
-    borderLeft: '1px solid $neutral400',
-    marginLeft: '13px',
-  },
-
-  '.swaps-steps': {
-    paddingBottom: '$10',
-  },
 });
 
 export const StepContainer = styled('div', {
   backgroundColor: '$neutral100',
   borderRadius: '$xm',
   padding: '$10 $15',
-
-  '.step-title': {
-    display: 'flex',
-    justifyContent: 'start',
-    alignItems: 'center',
-  },
-  '.step-tokens': {
-    paddingTop: '$5',
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '.step-token-info': {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '.step-icon-container': {
-    padding: '$4 $6',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-
-  '.extra-info': {
-    display: 'flex',
-    paddingTop: '$10',
-    paddingBottom: '$5',
-  },
 });
 export const StepSeparator = styled('div', {
   width: '0px',
@@ -76,3 +17,65 @@ export const StepSeparator = styled('div', {
   borderLeft: '1px dashed $neutral700',
   marginLeft: '25px',
 });
+
+export const quoteSummaryItemStyles = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const tokenAmountStyles = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const costStyles = css({
+  paddingTop: '$15',
+  display: 'flex',
+});
+
+export const quoteSummaryStyles = css({
+  padding: '$15 $0',
+});
+
+export const quoteSummarySeparatorStyles = css({
+  width: '0px',
+  height: '$16',
+  borderLeft: '1px solid $neutral400',
+  marginLeft: '13px',
+});
+
+export const swapsStepsStyles = css({
+  paddingBottom: '$10',
+});
+
+export const stepTitleStyles = css({
+  display: 'flex',
+  justifyContent: 'start',
+  alignItems: 'center',
+});
+
+export const stepTokensStyles = css({
+  paddingTop: '$5',
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const stepInfoStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const stepIconStyles = css({
+  padding: '$4 $6',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const extraInfoStyles = css({
+  display: 'flex',
+  paddingTop: '$10',
+  paddingBottom: '$5',
+});

package/src/components/LoadingSwapDetails/LoadingSwapDetails.tsx

@@ -2,13 +2,22 @@ import { i18n } from '@lingui/core';
 import { ChainToken, Divider, Skeleton, Typography } from '@rango-dev/ui';
 import React from 'react';
 
-import { Container, StepSeparator } from './LoadingSwapDetails.styles';
+import {
+  Container,
+  costStyles,
+  quoteSummaryItemStyles,
+  quoteSummarySeparatorStyles,
+  quoteSummaryStyles,
+  StepSeparator,
+  swapsStepsStyles,
+  tokenAmountStyles,
+} from './LoadingSwapDetails.styles';
 import { LoadingSwapDetailStep } from './LoadingSwapDetailStep';
 
 export function LoadingSwapDetails() {
   const quoteSummary = (
-    <div className="quote-summary-item">
-      <div className="token-amount">
+    <div className={quoteSummaryItemStyles()}>
+      <div className={tokenAmountStyles()}>
         <ChainToken loading size="medium" chainImage="" tokenImage="" />
         <Divider size={8} direction="horizontal" />
         <Skeleton height={15} width={148} variant="rounded" />
@@ -19,7 +28,7 @@ export function LoadingSwapDetails() {
 
   return (
     <Container>
-      <div className="cost">
+      <div className={costStyles()}>
         <Skeleton width={60} height={10} variant="rounded" />
         <Divider size={4} direction="horizontal" />
         <Skeleton width={60} height={10} variant="rounded" />
@@ -27,19 +36,19 @@ export function LoadingSwapDetails() {
         <Skeleton width={60} height={10} variant="rounded" />
       </div>
 
-      <div className="quote-summary">
+      <div className={quoteSummaryStyles()}>
         {quoteSummary}
-        <div className="quote-summary-separator"></div>
+        <div className={quoteSummarySeparatorStyles()}></div>
         {quoteSummary}
       </div>
 
-      <div className="swaps-steps">
+      <div className={swapsStepsStyles()}>
         <Typography variant="title" size="small">
           {i18n.t('Swaps steps')}
         </Typography>
       </div>
 
-      <div className="step-container">
+      <div>
         <LoadingSwapDetailStep extraInfo />
         <StepSeparator />
         <LoadingSwapDetailStep />

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

@@ -1,5 +1,5 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { darkTheme, Image, styled } from '@rango-dev/ui';
+import { css, darkTheme, Image, styled } from '@rango-dev/ui';
 
 import { CollapsibleContent } from '../ConfirmWalletsModal/ConfirmWallets.styles';
 
@@ -32,9 +32,10 @@ export const QuoteContainer = styled(Collapsible.Root, {
       },
     },
   },
-  '& .steps-details': {
-    padding: '$10 $15',
-  },
+});
+
+export const stepsDetailsStyles = css({
+  padding: '$10 $15',
 });
 
 export const SummaryContainer = styled('div', {
@@ -105,22 +106,24 @@ export const SummaryContainer = styled('div', {
       },
     },
   ],
-  '& .summary': {
-    width: '100%',
-    padding: '$15 $15 $10 $15',
-    cursor: 'default',
-  },
-  '& .basic-info': {
-    paddingTop: '$10',
-    display: 'flex',
-    alignItems: 'center',
-    '.usd-value': {
-      $$color: '$colors$neutral600',
-      [`.${darkTheme} &`]: {
-        $$color: '$colors$neutral700',
-      },
-      color: '$$color',
+});
+
+export const summaryStyles = css({
+  width: '100%',
+  padding: '$15 $15 $10 $15',
+  cursor: 'default',
+});
+
+export const basicInfoStyles = css({
+  paddingTop: '$10',
+  display: 'flex',
+  alignItems: 'center',
+  '.usd-value': {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
     },
+    color: '$$color',
   },
 });
 

package/src/components/Quote/Quote.tsx

@@ -48,6 +48,7 @@ import { getPriceImpact, getPriceImpactLevel } from '../../utils/quote';
 import { getTotalFeeInUsd } from '../../utils/swap';
 
 import {
+  basicInfoStyles,
   ChainImageContainer,
   Chains,
   Content,
@@ -56,7 +57,9 @@ import {
   HorizontalSeparator,
   IconContainer,
   QuoteContainer,
+  stepsDetailsStyles,
   SummaryContainer,
+  summaryStyles,
 } from './Quote.styles';
 import { QuoteSummary } from './QuoteSummary';
 
@@ -280,10 +283,10 @@ export function Quote(props: QuoteProps) {
         recommended={recommended}
         listItem={type === 'list-item'}
         basic={type === 'basic'}>
-        <div className="summary">
+        <div className={summaryStyles()}>
           <QuoteCost fee={totalFee} time={totalTime} steps={numberOfSteps} />
           {type === 'basic' && (
-            <div className="basic-info">
+            <div className={basicInfoStyles()}>
               <FrameIcon>
                 <InfoIcon size={12} color="gray" />
               </FrameIcon>
@@ -391,7 +394,7 @@ export function Quote(props: QuoteProps) {
           </Chains>
           <Content open={expanded}>
             <HorizontalSeparator />
-            <div className="steps-details">
+            <div className={stepsDetailsStyles()}>
               {steps.map((step, index) => {
                 const key = `item-${index}`;
                 return (

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

@@ -1,15 +1,16 @@
-import { styled } from '@rango-dev/ui';
+import { css, styled } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   position: 'relative',
   display: 'flex',
   flexDirection: 'column',
   width: '100%',
-  '& .separator': {
-    height: '14px',
-    marginLeft: '14px',
-    position: 'absolute',
-    borderLeft: '1px solid $foreground',
-    top: '42%',
-  },
+});
+
+export const separatorStyles = css({
+  height: '14px',
+  marginLeft: '14px',
+  position: 'absolute',
+  borderLeft: '1px solid $foreground',
+  top: '42%',
 });

package/src/components/Quote/QuoteSummary.tsx

@@ -3,7 +3,7 @@ import type { PriceImpactWarningLevel, Step } from '@rango-dev/ui';
 import { TokenAmount } from '@rango-dev/ui';
 import React from 'react';
 
-import { Container } from './QuoteSummary.styles';
+import { Container, separatorStyles } from './QuoteSummary.styles';
 
 type PropTypes = {
   from: Step['from'];
@@ -27,7 +27,7 @@ export function QuoteSummary(props: PropTypes) {
         }}
         chain={{ image: from.chain.image }}
       />
-      <div className="separator" />
+      <div className={separatorStyles()} />
       <TokenAmount
         direction="horizontal"
         label="Estimated output"

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

@@ -18,6 +18,8 @@ import {
   Container,
   HeaderDetails,
   PlaceholderContainer,
+  requestIdStyles,
+  rowStyles,
 } from './SwapDetails.styles';
 
 export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
@@ -33,11 +35,11 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
       {showSkeleton && (
         <Container>
           <HeaderDetails>
-            <div className="row">
+            <div className={rowStyles()}>
               <Typography variant="label" size="large" color="neutral700">
                 {`${i18n.t('Request ID')}:`}
               </Typography>
-              <div className="request-id">
+              <div className={requestIdStyles()}>
                 <Typography variant="label" size="small" color="neutral700">
                   <Skeleton width={60} height={10} variant="rounded" />
                 </Typography>
@@ -46,7 +48,7 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
                 </IconButton>
               </div>
             </div>
-            <div className="row">
+            <div className={rowStyles()}>
               <Typography variant="label" size="large" color="neutral700">
                 {`${i18n.t('Created at')}:`}
               </Typography>

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

@@ -1,4 +1,4 @@
-import { darkTheme, styled } from '@rango-dev/ui';
+import { css, darkTheme, styled } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   display: 'flex',
@@ -7,38 +7,6 @@ export const Container = styled('div', {
   alignItems: 'center',
   height: '0',
   flexGrow: 1,
-  '& .row': {
-    display: 'flex',
-    width: '100%',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: '$10 $20',
-    borderBottom: '1px solid',
-    $$color: '$colors$neutral300',
-    [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral400',
-    },
-    borderColor: '$$color',
-    color: '$neutral500',
-  },
-  '& .request-id': {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: '$24',
-  },
-  '& .output': {
-    display: 'flex',
-    width: '100%',
-    padding: '$15 $20 $20',
-    flexDirection: 'column',
-    alignItems: 'start',
-  },
-  '& .title-steps': {
-    textAlign: 'left',
-    width: '100%',
-    padding: '0 $20 $10',
-  },
 });
 
 export const HeaderDetails = styled('div', {
@@ -70,3 +38,39 @@ export const LoaderContainer = styled('div', {
   paddingTop: '33%',
   flex: 1,
 });
+
+export const rowStyles = css({
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '$10 $20',
+  borderBottom: '1px solid',
+  $$color: '$colors$neutral300',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral400',
+  },
+  borderColor: '$$color',
+  color: '$neutral500',
+});
+
+export const requestIdStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '$24',
+});
+
+export const outputStyles = css({
+  display: 'flex',
+  width: '100%',
+  padding: '$15 $20 $20',
+  flexDirection: 'column',
+  alignItems: 'start',
+});
+
+export const titleStepsStyles = css({
+  textAlign: 'left',
+  width: '100%',
+  padding: '0 $20 $10',
+});

package/src/components/SwapDetails/SwapDetails.tsx

@@ -57,7 +57,15 @@ import {
 } from '../SwapDetailsModal';
 
 import { getSteps, getStepState, RESET_INTERVAL } from './SwapDetails.helpers';
-import { Container, HeaderDetails, StepsList } from './SwapDetails.styles';
+import {
+  Container,
+  HeaderDetails,
+  outputStyles,
+  requestIdStyles,
+  rowStyles,
+  StepsList,
+  titleStepsStyles,
+} from './SwapDetails.styles';
 
 export function SwapDetails(props: SwapDetailsProps) {
   const { swap, requestId, onDelete, onCancel: onCancelProps } = props;
@@ -255,11 +263,11 @@ export function SwapDetails(props: SwapDetailsProps) {
       }>
       <Container>
         <HeaderDetails>
-          <div className="row">
+          <div className={rowStyles()}>
             <Typography variant="label" size="large" color="neutral700">
               {`${i18n.t('Request ID')}:`}
             </Typography>
-            <div className="request-id">
+            <div className={requestIdStyles()}>
               <Typography variant="label" size="small" color="neutral700">
                 {requestId}
               </Typography>
@@ -270,7 +278,7 @@ export function SwapDetails(props: SwapDetailsProps) {
               </IconButton>
             </div>
           </div>
-          <div className="row">
+          <div className={rowStyles()}>
             <Typography variant="label" size="large" color="neutral700">
               {`${i18n.t('Created at')}:`}
             </Typography>
@@ -280,7 +288,7 @@ export function SwapDetails(props: SwapDetailsProps) {
           </div>
         </HeaderDetails>
 
-        <div className="output">
+        <div className={outputStyles()}>
           <QuoteCost
             fee={numberToString(
               String(totalFee),
@@ -335,7 +343,7 @@ export function SwapDetails(props: SwapDetailsProps) {
             warningLevel={getPriceImpactLevel(percentageChange ?? 0)}
           />
         </div>
-        <div className="title-steps">
+        <div className={titleStepsStyles()}>
           <Typography variant="title" size="small">
             {i18n.t('Swaps steps')}
           </Typography>