@rango-dev/ui 0.23.0 → 0.24.0

package/src/components/BestRoute/BestRouteSkeleton.styles.ts

@@ -0,0 +1,110 @@
+import { darkTheme, styled } from '../../theme';
+
+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',
+  },
+  '& .route-summary': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'end',
+  },
+  '& .route-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/BestRoute/BestRouteSkeleton.tsx

@@ -0,0 +1,112 @@
+import type { PropTypes } from './BestRouteSkeleton.types';
+
+import React from 'react';
+
+import { NextIcon } from '../../icons';
+import { ChainToken } from '../ChainToken';
+import { Divider } from '../Divider';
+import { Skeleton } from '../Skeleton';
+
+import { Container, StepSeparator } from './BestRouteSkeleton.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 BestRouteSkeleton(props: PropTypes) {
+  const { type, expanded, tag = false } = props;
+  const routeSummary = (
+    <div className="route-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>
+      <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">
+            {routeSummary}
+            <div className="route-summary__separator" />
+            {routeSummary}
+          </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>
+  );
+}

package/src/components/BestRoute/BestRouteSkeleton.types.ts

@@ -0,0 +1,5 @@
+export type PropTypes = {
+  type: 'basic' | 'list-item' | 'swap-preview';
+  expanded?: boolean;
+  tag?: boolean;
+};

package/src/components/BestRoute/RouteSummary.styles.ts

@@ -0,0 +1,15 @@
+import { styled } from '../../theme';
+
+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%',
+  },
+});

package/src/components/BestRoute/RouteSummary.tsx

@@ -0,0 +1,48 @@
+import type { Step } from './BestRoute.types';
+import type { PriceImpactWarningLevel } from '../PriceImpact';
+
+import React from 'react';
+
+import { TokenAmount } from '../TokenAmount';
+
+import { Container } from './RouteSummary.styles';
+
+type PropTypes = {
+  from: Step['from'];
+  to: Step['to'];
+  percentageChange?: string | null;
+  warningLevel: PriceImpactWarningLevel;
+};
+
+export function RouteSummary(props: PropTypes) {
+  const { from, to, percentageChange, warningLevel } = props;
+  return (
+    <Container>
+      <TokenAmount
+        direction="horizontal"
+        label="Swap input"
+        type="input"
+        price={{ value: from.price.value, usdValue: from.price.usdValue }}
+        token={{
+          displayName: from.token.displayName,
+          image: from.token.image,
+        }}
+        chain={{ image: from.chain.image }}
+      />
+      <div className="separator" />
+      <TokenAmount
+        direction="horizontal"
+        label="Estimated output"
+        type="output"
+        price={{ value: to.price.value, usdValue: to.price.usdValue }}
+        token={{
+          displayName: to.token.displayName,
+          image: to.token.image,
+        }}
+        chain={{ image: to.chain.image }}
+        percentageChange={percentageChange}
+        warningLevel={warningLevel}
+      />
+    </Container>
+  );
+}

package/src/components/BestRoute/index.ts

@@ -0,0 +1,4 @@
+export { BestRoute } from './BestRoute';
+export type { Step } from './BestRoute.types';
+export { BestRouteSkeleton } from './BestRouteSkeleton';
+export { RouteSummary } from './RouteSummary';

package/src/components/BestRoute/mock.ts

@@ -0,0 +1,142 @@
+import type { BestRouteProps } from './BestRoute.types';
+
+export const route1: BestRouteProps = {
+  type: 'list-item',
+  recommended: true,
+  input: { value: '1', usdValue: '30000' },
+  output: { value: '3161.441024', usdValue: '26.890' },
+  steps: [
+    {
+      swapper: {
+        displayName: 'MayaProtocol',
+        image: 'https://api.rango.exchange/swappers/maya.jpg',
+      },
+      from: {
+        token: {
+          displayName: 'BTC',
+          image: 'https://api.rango.exchange/tokens/BTC/BTC.png',
+        },
+        chain: {
+          displayName: 'BTC',
+          image: 'https://api.rango.exchange/tokens/BTC/BTC.png',
+        },
+        price: {
+          value: '1.00000000',
+        },
+      },
+      to: {
+        chain: {
+          displayName: 'ETH',
+          image: 'https://api.rango.exchange/blockchains/ethereum.svg',
+        },
+        token: {
+          displayName: 'ETH',
+
+          image: 'https://api.rango.exchange/tokens/ETH/ETH.png',
+        },
+        price: {
+          value: '14.863736725876758517',
+        },
+      },
+    },
+    {
+      swapper: {
+        displayName: 'Satellite',
+        image: 'https://api.rango.exchange/swappers/satellite.png',
+      },
+      from: {
+        token: {
+          displayName: 'ETH',
+          image: 'https://api.rango.exchange/tokens/ETH/ETH.png',
+        },
+        chain: {
+          displayName: 'ETH',
+          image: 'https://api.rango.exchange/blockchains/ethereum.svg',
+        },
+        price: { value: '14.863736725876758517' },
+      },
+      to: {
+        token: {
+          displayName: 'ETH',
+          image: 'https://api.rango.exchange/tokens/COSMOS/ETH.png',
+        },
+        chain: {
+          displayName: 'OSMOSIS',
+          image: 'https://api.rango.exchange/blockchains/osmosis.svg',
+        },
+        price: {
+          value: '14.825674725876758517',
+        },
+      },
+    },
+    {
+      swapper: {
+        displayName: 'Osmosis',
+        image: 'https://api.rango.exchange/swappers/osmosis.png',
+      },
+      from: {
+        token: {
+          displayName: 'ETH',
+          image: 'https://api.rango.exchange/tokens/COSMOS/ETH.png',
+        },
+        chain: {
+          displayName: 'OSMOSIS',
+          image: 'https://api.rango.exchange/blockchains/osmosis.svg',
+        },
+        price: {
+          value: '14.825674725876758517',
+        },
+      },
+      to: {
+        token: {
+          displayName: 'ATOM',
+          image: 'https://api.rango.exchange/tokens/COSMOS/ATOM.png',
+        },
+        chain: {
+          displayName: 'OSMOSIS',
+          image: 'https://api.rango.exchange/blockchains/osmosis.svg',
+        },
+        price: {
+          value: '3161.441024',
+        },
+      },
+    },
+    {
+      swapper: {
+        displayName: 'IBC',
+        image: 'https://api.rango.exchange/swappers/IBC.png',
+      },
+      from: {
+        token: {
+          displayName: 'ATOM',
+          image: 'https://api.rango.exchange/tokens/COSMOS/ATOM.png',
+        },
+        chain: {
+          displayName: 'OSMOSIS',
+          image: 'https://api.rango.exchange/blockchains/osmosis.svg',
+        },
+        price: {
+          value: '3161.441024',
+        },
+      },
+      to: {
+        token: {
+          displayName: 'ATOM',
+          image: 'https://api.rango.exchange/tokens/COSMOS/ATOM.png',
+        },
+        chain: {
+          displayName: 'COSMOS',
+          image: 'https://api.rango.exchange/blockchains/cosmos.svg',
+        },
+        price: {
+          value: '3161.441024',
+        },
+      },
+    },
+  ],
+
+  percentageChange: '7.51',
+  warningLevel: 'high',
+  totalFee: '9.90',
+  totalTime: '23:00',
+};

package/src/components/BlockchainsChip/BlockchainsChip.styles.ts

@@ -1,5 +1,4 @@
 import { darkTheme, styled } from '../../theme';
-import { ImageContainer } from '../common';
 
 export const Chip = styled('button', {
   padding: '$10',
@@ -16,7 +15,7 @@ export const Chip = styled('button', {
   cursor: 'pointer',
   border: 0,
   fontFamily: 'inherit',
-  [`& ${ImageContainer}`]: {
+  '.image-container': {
     borderRadius: '$xm',
     overflow: 'hidden',
   },

package/src/components/Button/Button.styles.tsx

@@ -524,7 +524,6 @@ export const ButtonBase = styled('button', {
 });
 
 export const Content = styled('span', {
-  flexGrow: 1,
   display: 'inline-block',
   variants: {
     pl: {

package/src/components/Checkbox/Checkbox.styles.ts

@@ -13,11 +13,7 @@ export const CheckboxRoot = styled(RadixCheckbox.Root, {
   width: '1rem',
   height: '1rem',
   padding: 0,
-  $$borderColor: '$colors$neutral600',
-  [`.${darkTheme} &`]: {
-    $$borderColor: '$colors$neutral700',
-  },
-  border: '1px solid $$borderColor',
+  border: '1px solid $neutral600',
   backgroundColor: 'transparent',
   cursor: 'pointer',
   '&[data-state="checked"]': {

package/src/components/ListItem/ListItem.styles.ts

@@ -2,7 +2,6 @@ import { darkTheme, styled } from '../../theme';
 
 export const BaseListItem = styled('li', {
   width: '100%',
-  overflow: 'hidden',
   borderRadius: '$xs',
   display: 'flex',
   alignItems: 'center',
@@ -23,13 +22,6 @@ export const BaseListItem = styled('li', {
     flexShrink: 1,
     flexBasis: 'auto',
     textAlign: 'left',
-    '._description': {
-      $$color: '$colors$neutral600',
-      [`.${darkTheme} &`]: {
-        $$color: '$colors$neutral700',
-      },
-      color: '$$color',
-    },
 
     '.item-text-title': {
       fontWeight: 'bold',
@@ -42,7 +34,6 @@ export const BaseListItem = styled('li', {
     justifyContent: 'center',
     alignItems: 'center',
     paddingLeft: '$10',
-    overflow: 'hidden',
   },
   variants: {
     hasDivider: {

package/src/components/ListItem/ListItem.tsx

@@ -16,7 +16,7 @@ function ListItem(props: ListItemProps) {
       <div className="item-text-container">
         {title && <div className="item-text-title">{title}</div>}
         {description && (
-          <Typography variant="body" className="_description" size="small">
+          <Typography variant="body" size="small" color="neutral600">
             {description}
           </Typography>
         )}

package/src/components/ListItemButton/ListItemButton.styles.ts

@@ -6,7 +6,6 @@ export const BaseListItemButton = styled('button', {
   width: '100%',
   backgroundColor: 'transparent',
   fontFamily: 'inherit',
-  padding: 'unset',
   '&:focus-visible': {
     borderRadius: '$xs',
 

package/src/components/PriceImpact/PriceImpact.styles.ts

@@ -1,15 +1,7 @@
 import { styled } from '../../theme';
-import { Typography } from '../Typography';
 
 export const Container = styled('div', {
-  width: '100%',
   display: 'flex',
-  justifyContent: 'end',
+  justifyContent: 'center',
   alignItems: 'center',
 });
-
-export const OutputUsdValue = styled(Typography, {
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-});

package/src/components/PriceImpact/PriceImpact.tsx

@@ -4,12 +4,12 @@ import React from 'react';
 
 import { Typography } from '..';
 
-import { Container, OutputUsdValue } from './PriceImpact.styles';
+import { Container } from './PriceImpact.styles';
 
 export function PriceImpact(props: PriceImpactProps) {
   const { size, outputUsdValue, percentageChange, warningLevel, error } = props;
 
-  let percentageChangeColor = '$neutral600';
+  let percentageChangeColor = '$neutral700';
   if (!outputUsdValue || warningLevel === 'low') {
     percentageChangeColor = '$warning500';
   } else if (warningLevel === 'high') {
@@ -19,12 +19,12 @@ export function PriceImpact(props: PriceImpactProps) {
   return (
     <Container>
       {outputUsdValue && (
-        <OutputUsdValue
+        <Typography
           size={size === 'small' ? 'small' : 'medium'}
           variant="body"
-          color="$neutral600">
+          color={size !== 'small' ? '$neutral600' : '$neutral700'}>
           {`~$${outputUsdValue}`}
-        </OutputUsdValue>
+        </Typography>
       )}
       {((outputUsdValue && percentageChange) || !outputUsdValue) && (
         <Typography

package/src/components/Radio/Radio.styles.tsx

@@ -9,11 +9,8 @@ export const StyledItem = styled(Radio.Item, {
   borderRadius: '100%',
   cursor: 'pointer',
   backgroundColor: 'transparent',
-  $$borderColor: '$colors$neutral600',
-  [`.${darkTheme} &`]: {
-    $$borderColor: '$colors$neutral700',
-  },
-  border: '1px solid $$borderColor',
+  border: '1px solid $neutral600',
+
   '&[data-state="checked"]': {
     $$color: '$colors$secondary500',
     [`.${darkTheme} &`]: {

package/src/components/RouteCost/RouteCost.styles.ts

@@ -0,0 +1,20 @@
+import { styled } from '../../theme';
+
+export const Container = styled('div', {
+  borderRadius: '$xs',
+  display: 'flex',
+  justifyContent: 'start',
+  alignItems: 'center',
+  paddingBottom: '$10',
+  '& .item': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '& .icon': {
+    width: '$16',
+    height: '$16',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/components/{QuoteCost/QuoteCost.tsx → RouteCost/RouteCost.tsx}

@@ -1,23 +1,19 @@
-import type { PropTypes } from './QuoteCost.types';
+import type { PropTypes } from './RouteCost.types';
 
 import React from 'react';
 
 import { GasIcon, NumberIcon, TimeIcon } from '../../icons';
+import { Separator } from '../BestRoute/BestRoute.styles';
 import { Typography } from '../Typography';
 
-import {
-  Container,
-  iconStyles,
-  itemStyles,
-  Separator,
-} from './QuoteCost.styles';
+import { Container } from './RouteCost.styles';
 
-export function QuoteCost(props: PropTypes) {
+export function RouteCost(props: PropTypes) {
   const { fee, time, steps } = props;
   return (
     <Container>
-      <div className={itemStyles()}>
-        <div className={iconStyles()}>
+      <div className="item">
+        <div className="icon">
           <GasIcon size={12} color={'gray'} />
         </div>
         <Typography ml={2} align="center" variant="body" size="small">
@@ -25,8 +21,8 @@ export function QuoteCost(props: PropTypes) {
         </Typography>
       </div>
       <Separator />
-      <div className={itemStyles()}>
-        <div className={iconStyles()}>
+      <div className="item">
+        <div className="icon">
           <TimeIcon size={12} color="gray" />
         </div>
         <Typography ml={2} align="center" variant="body" size="small">
@@ -34,8 +30,8 @@ export function QuoteCost(props: PropTypes) {
         </Typography>
       </div>
       <Separator />
-      <div className={itemStyles()}>
-        <div className={iconStyles()}>
+      <div className="item">
+        <div className="icon">
           <NumberIcon size={16} color="gray" />
         </div>
         <Typography ml={2} align="center" variant="body" size="small">

package/src/components/RouteCost/index.ts

@@ -0,0 +1 @@
+export { RouteCost } from './RouteCost';