@rango-dev/ui 0.22.1-next.16 → 0.22.1-next.18

package/src/components/QuoteCost/QuoteCost.tsx

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

package/src/components/StepDetails/StepDetails.styles.ts

@@ -1,3 +1,5 @@
+import { css } from '@stitches/react';
+
 import { darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
@@ -31,34 +33,10 @@ export const Container = styled('div', {
       error: { borderColor: '$error500' },
     },
   },
-  '& .swapper': {
-    display: 'flex',
-    alignItems: 'center',
-  },
   '& .swapper__description': {
     fontWeight: '$medium',
   },
-  '& .step-info': {
-    display: 'flex',
-    flex: '1',
-    width: '100%',
-    alignItems: 'start',
-    variants: {
-      tx: {
-        true: {
-          paddingLeft: '36px',
-        },
-      },
-    },
-  },
   '& div:nth-child(3)': { display: 'flex', flexDirection: 'column', flex: 1 },
-  '& .tokens-container': { width: '100%' },
-  '& .tokens': {
-    display: 'flex',
-    paddingTop: '$5',
-    paddingBottom: '$10',
-    alignItems: 'center',
-  },
 });
 
 export const SwapperImage = styled('div', {
@@ -131,3 +109,33 @@ export const StepSeparator = styled('div', {
     },
   },
 });
+
+export const tokensContainerStyles = css({
+  width: '100%',
+});
+
+export const swapperStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const stepInfoStyles = css({
+  display: 'flex',
+  flex: '1',
+  width: '100%',
+  alignItems: 'start',
+  variants: {
+    tx: {
+      true: {
+        paddingLeft: '36px',
+      },
+    },
+  },
+});
+
+export const tokensStyles = css({
+  display: 'flex',
+  paddingTop: '$5',
+  paddingBottom: '$10',
+  alignItems: 'center',
+});

package/src/components/StepDetails/StepDetails.tsx

@@ -13,8 +13,12 @@ import {
   Alerts,
   Container,
   DashedLine,
+  stepInfoStyles,
   StepSeparator,
   SwapperImage,
+  swapperStyles,
+  tokensContainerStyles,
+  tokensStyles,
 } from './StepDetails.styles';
 
 const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
@@ -39,7 +43,7 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
         state={state}
         ref={containerRef}
         tabIndex={tabIndex}>
-        <div className="swapper">
+        <div className={swapperStyles()}>
           {type === 'swap-progress' && hasSeparator && (
             <StepSeparator state={state} />
           )}
@@ -60,10 +64,10 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
             })}
           </Typography>
         </div>
-        <div className="step-info">
+        <div className={stepInfoStyles()}>
           <DashedLine invisible={!hasSeparator || type === 'swap-progress'} />
-          <div className="tokens-container">
-            <div className="tokens">
+          <div className={tokensContainerStyles()}>
+            <div className={tokensStyles()}>
               <ChainToken
                 chainImage={step.from.chain.image}
                 tokenImage={step.from.token.image}

package/src/components/SwapListItem/mock.ts

@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
-// TODO: fix ts errors
-// eslint-disable-next-line
-// @ts-nocheck
 import type { SwapTokenData } from './SwapListItem.types';
-import type { PendingSwap } from '../../containers/History/types';
+import type { PendingSwap } from 'rango-types';
 
-import { RoutingResultType, TransactionType } from 'rango-sdk';
+import {
+  MessageSeverity,
+  RoutingResultType,
+  TransactionType,
+} from 'rango-types';
 
 export const swap: PendingSwap = {
   creationTime: '1673164511955',
@@ -21,7 +22,7 @@ export const swap: PendingSwap = {
   status: 'running',
   isPaused: false,
   extraMessage: null,
-  extraMessageSeverity: 'info',
+  extraMessageSeverity: MessageSeverity.info,
   extraMessageDetail: '',
   extraMessageErrorCode: null,
   networkStatusExtraMessage: null,
@@ -75,6 +76,7 @@ export const swap: PendingSwap = {
             expenseType: 'FROM_SOURCE_WALLET',
             name: 'Network Fee',
             amount: '0',
+            price: null,
           },
         ],
         estimatedTimeInSeconds: 45,
@@ -150,6 +152,7 @@ export const swap: PendingSwap = {
         includesDestinationTx: false,
         maxRequiredSign: 1,
         warnings: [],
+        internalSwaps: null,
       },
     ],
   },
@@ -164,16 +167,20 @@ export const swap: PendingSwap = {
         'ibc/46b44899322f3cd854d2d46deef881958467cdd4b3b10086da49296bbed94bed',
       fromDecimals: 6,
       fromAmountPrecision: null,
+      fromAmountRestrictionType: 'EXCLUSIVE',
+      estimatedTimeInSeconds: 5,
       fromAmountMinValue: null,
       fromAmountMaxValue: null,
       toBlockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
       fromBlockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
+      fromUsdPrice: null,
       toBlockchain: 'OSMOSIS',
       fromLogo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
       toSymbol: 'OSMO',
       toSymbolAddress: null,
       toDecimals: 6,
       toLogo: 'https://api.rango.exchange/i/mJQPS2',
+      toUsdPrice: null,
       startTransactionTime: 1673164519916,
       swapperId: 'Osmosis',
       swapperLogo: 'https://api.rango.exchange/swappers/osmosis.png',
@@ -189,6 +196,13 @@ export const swap: PendingSwap = {
           description: null,
         },
       ],
+      starknetApprovalTransaction: null,
+      starknetTransaction: null,
+      tronApprovalTransaction: null,
+      tonTransaction: null,
+      tronTransaction: null,
+      feeInUsd: null,
+      executedTransactionTime: null,
       cosmosTransaction: {
         type: TransactionType.COSMOS,
         fromWalletAddress: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
@@ -276,6 +290,7 @@ export const swap: PendingSwap = {
       transferTransaction: null,
       diagnosisUrl: null,
       internalSteps: null,
+      internalSwaps: null,
     },
   ],
 };

package/src/components/TokenAmount/TokenAmount.styles.ts

@@ -1,4 +1,4 @@
-import { styled } from '@stitches/react';
+import { css, styled } from '../../theme';
 
 export const Container = styled('div', {
   display: 'flex',
@@ -15,13 +15,15 @@ export const Container = styled('div', {
       true: { alignItems: 'center', justifyContent: 'center' },
     },
   },
-  '& .token-amount': {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  '& .usd-value': {
-    display: 'flex',
-    paddingTop: '$5',
-  },
+});
+
+export const tokenAmountStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const usdValueStyles = css({
+  display: 'flex',
+  paddingTop: '$5',
 });

package/src/components/TokenAmount/TokenAmount.tsx

@@ -6,12 +6,16 @@ import { ChainToken } from '../ChainToken';
 import { PriceImpact } from '../PriceImpact/PriceImpact';
 import { Typography } from '../Typography';
 
-import { Container } from './TokenAmount.styles';
+import {
+  Container,
+  tokenAmountStyles,
+  usdValueStyles,
+} from './TokenAmount.styles';
 
 export function TokenAmount(props: PropTypes) {
   return (
     <Container direction={props.direction} centerAlign={props.centerAlign}>
-      <div className="token-amount">
+      <div className={tokenAmountStyles()}>
         <ChainToken
           chainImage={props.chain.image}
           tokenImage={props.token.image}
@@ -41,21 +45,23 @@ export function TokenAmount(props: PropTypes) {
           </div>
         </div>
       </div>
-      <div className="usd-value">
-        {props.type === 'input' && (
-          <Typography mr={4} size="small" variant="body" color="$neutral700">
-            {`~$${props.price.usdValue}`}
-          </Typography>
-        )}
-        {props.type === 'output' && (
-          <PriceImpact
-            size="small"
-            outputUsdValue={props.price.usdValue}
-            percentageChange={props.percentageChange}
-            warningLevel={props.warningLevel}
-          />
-        )}
-      </div>
+      {props.price.usdValue && props.price.usdValue !== '0' && (
+        <div className={usdValueStyles()}>
+          {props.type === 'input' && (
+            <Typography mr={4} size="small" variant="body" color="$neutral700">
+              {`~$${props.price.usdValue}`}
+            </Typography>
+          )}
+          {props.type === 'output' && (
+            <PriceImpact
+              size="small"
+              outputUsdValue={props.price.usdValue}
+              percentageChange={props.percentageChange}
+              warningLevel={props.warningLevel}
+            />
+          )}
+        </div>
+      )}
     </Container>
   );
 }

package/src/components/common/Image.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { styled } from '../../theme';
 
-const ImageContainer = styled('div', {
+export const ImageContainer = styled('div', {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -37,7 +37,6 @@ export function Image(props: PropTypes) {
 
   return (
     <ImageContainer
-      className="image-container"
       css={{
         width: size + 'px',
         height: size + 'px',

package/src/components/common/index.ts

@@ -1,2 +1,2 @@
 export { FilledCircle } from './FilledCircle';
-export { Image } from './Image';
+export { Image, ImageContainer } from './Image';

package/src/containers/SwapHistory/SwapHistory.stories.tsx

@@ -1,7 +1,10 @@
+import type { PropTypes } from './SwapHistory';
+import type { Meta } from '@storybook/react';
+
 import React from 'react';
-import { Meta } from '@storybook/react';
-import { PropTypes, SwapHistory } from './SwapHistory';
+
 import { pendingSwap } from './mock';
+import { SwapHistory } from './SwapHistory';
 
 export default {
   title: 'Containers/Swap History',

package/src/containers/SwapHistory/SwapHistory.tsx

@@ -1,5 +1,5 @@
 import type { PropTypes as SwapMessagesPropTypes } from './SwapMessages';
-import type { PendingSwap } from '../History/types';
+import type { PendingSwap } from 'rango-types';
 
 import React, { useState } from 'react';
 

package/src/containers/SwapHistory/mock.ts

@@ -1,6 +1,8 @@
-// @ts-nocheck
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { PendingSwap } from 'rango-types';
+
 import { RoutingResultType, TransactionType } from 'rango-sdk';
-import { PendingSwap } from '../History/types';
+import { MessageSeverity } from 'rango-types';
 
 export const pendingSwap: PendingSwap = {
   creationTime: '1673164511955',
@@ -16,7 +18,7 @@ export const pendingSwap: PendingSwap = {
   status: 'running',
   isPaused: false,
   extraMessage: null,
-  extraMessageSeverity: 'info',
+  extraMessageSeverity: MessageSeverity.info,
   extraMessageDetail: '',
   extraMessageErrorCode: null,
   networkStatusExtraMessage: null,
@@ -34,14 +36,14 @@ export const pendingSwap: PendingSwap = {
       {
         swapperId: 'Osmosis',
         swapperType: 'DEX',
-        swapperLogo: 'https://api.rango.exchange/swappers/osmosis.png',
+        swapperLogo: '',
         from: {
           symbol: 'JUNO',
           logo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
           address:
             'ibc/46b44899322f3cd854d2d46deef881958467cdd4b3b10086da49296bbed94bed',
           blockchain: 'OSMOSIS',
-          blockchainLogo: '',
+          blockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
           decimals: 6,
           usdPrice: 1.1091996179668873,
         },
@@ -51,7 +53,7 @@ export const pendingSwap: PendingSwap = {
           address: null,
           blockchain: 'OSMOSIS',
           decimals: 6,
-          blockchainLogo: '',
+          blockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
           usdPrice: 0.7192435454440882,
         },
         fromAmount: '1.000000',
@@ -68,8 +70,9 @@ export const pendingSwap: PendingSwap = {
               address: null,
             },
             expenseType: 'FROM_SOURCE_WALLET',
-            amount: '0',
             name: 'Network Fee',
+            amount: '0',
+            price: null,
           },
         ],
         estimatedTimeInSeconds: 45,
@@ -145,6 +148,7 @@ export const pendingSwap: PendingSwap = {
         includesDestinationTx: false,
         maxRequiredSign: 1,
         warnings: [],
+        internalSwaps: null,
       },
     ],
   },
@@ -154,21 +158,25 @@ export const pendingSwap: PendingSwap = {
       id: 1,
       fromBlockchain: 'OSMOSIS',
       fromSymbol: 'JUNO',
+      swapperType: 'test',
       fromSymbolAddress:
         'ibc/46b44899322f3cd854d2d46deef881958467cdd4b3b10086da49296bbed94bed',
       fromDecimals: 6,
       fromAmountPrecision: null,
+      fromAmountRestrictionType: 'EXCLUSIVE',
+      estimatedTimeInSeconds: 5,
       fromAmountMinValue: null,
       fromAmountMaxValue: null,
+      fromUsdPrice: null,
       toBlockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
       fromBlockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
       toBlockchain: 'OSMOSIS',
       fromLogo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
       toSymbol: 'OSMO',
       toSymbolAddress: null,
-      swapperType: 'DEX',
       toDecimals: 6,
       toLogo: 'https://api.rango.exchange/i/mJQPS2',
+      toUsdPrice: null,
       startTransactionTime: 1673164519916,
       swapperId: 'Osmosis',
       swapperLogo: 'https://api.rango.exchange/swappers/osmosis.png',
@@ -184,6 +192,13 @@ export const pendingSwap: PendingSwap = {
           description: null,
         },
       ],
+      starknetApprovalTransaction: null,
+      starknetTransaction: null,
+      tronApprovalTransaction: null,
+      tonTransaction: null,
+      tronTransaction: null,
+      feeInUsd: null,
+      executedTransactionTime: null,
       cosmosTransaction: {
         type: TransactionType.COSMOS,
         fromWalletAddress: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
@@ -271,6 +286,7 @@ export const pendingSwap: PendingSwap = {
       transferTransaction: null,
       diagnosisUrl: null,
       internalSteps: null,
+      internalSwaps: null,
     },
   ],
 };

package/src/containers/SwapInput/SwapInput.styles.ts

@@ -1,5 +1,7 @@
 import { Button, TextField } from '../../components';
-import { darkTheme, styled } from '../../theme';
+import { css, darkTheme, styled } from '../../theme';
+
+export const textStyles = css();
 
 export const Container = styled('div', {
   $$color: '$colors$neutral100',
@@ -17,38 +19,13 @@ export const Container = styled('div', {
       },
     },
   },
-  '& .gray-text': {
+  [`& .${textStyles}`]: {
     $$color: '$colors$neutral600',
     [`.${darkTheme} &`]: {
       $$color: '$colors$neutral700',
     },
     color: '$$color',
   },
-  '& .label__container': {
-    paddingBottom: '$5',
-  },
-  '& .label': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  '& .balance': {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  '& .form': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  '& .amount': {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'end',
-    flexGrow: 1,
-  },
 });
 
 export const InputAmount = styled(TextField, {
@@ -95,3 +72,33 @@ export const ValueTypography = styled('div', {
     },
   },
 });
+
+export const formStyles = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const labelStyles = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const balanceStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const amountStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'end',
+  flexGrow: 1,
+});
+
+export const labelContainerStyles = css({
+  paddingBottom: '$5',
+});

package/src/containers/SwapInput/SwapInput.tsx

@@ -6,9 +6,15 @@ import React from 'react';
 import { Divider, PriceImpact, Skeleton, Typography } from '../../components';
 
 import {
+  amountStyles,
+  balanceStyles,
   Container,
+  formStyles,
   InputAmount,
+  labelContainerStyles,
+  labelStyles,
   MaxButton,
+  textStyles,
   ValueTypography,
 } from './SwapInput.styles';
 import { TokenSection } from './TokenSection';
@@ -16,15 +22,15 @@ import { TokenSection } from './TokenSection';
 export function SwapInput(props: SwapInputProps) {
   return (
     <Container sharpBottomStyle={props.sharpBottomStyle}>
-      <div className="label__container">
-        <div className="label">
-          <Typography variant="body" size="small" className="gray-text">
+      <div className={labelContainerStyles()}>
+        <div className={labelStyles()}>
+          <Typography variant="body" size="small" className={textStyles()}>
             {props.label}
           </Typography>
           {'balance' in props && !props.loading && (
-            <div className="balance">
+            <div className={balanceStyles()}>
               <Typography
-                className="gray-text"
+                className={textStyles()}
                 mr={4}
                 variant="body"
                 size="xsmall">
@@ -41,13 +47,13 @@ export function SwapInput(props: SwapInputProps) {
             </div>
           )}
           {props.loading && (
-            <div className="balance">
+            <div className={balanceStyles()}>
               <Skeleton variant="text" size="large" width={105} />
             </div>
           )}
         </div>
       </div>
-      <div className="form">
+      <div className={formStyles()}>
         <TokenSection
           chain={props.chain.displayName}
           tokenSymbol={props.token.displayName}
@@ -57,7 +63,7 @@ export function SwapInput(props: SwapInputProps) {
           onClick={props.onClickToken}
           loading={props.loading}
         />
-        <div className="amount">
+        <div className={amountStyles()}>
           {props.loading || (props.mode === 'To' && props.fetchingQuote) ? (
             <>
               <Skeleton variant="text" size="large" width={92} />

package/src/containers/SwapInput/TokenSection.styles.ts

@@ -1,5 +1,5 @@
 import { Button } from '../../components';
-import { darkTheme, styled } from '../../theme';
+import { css, darkTheme, styled } from '../../theme';
 
 export const Container = styled(Button, {
   maxWidth: '180px',
@@ -28,6 +28,8 @@ export const Container = styled(Button, {
   },
 });
 
+export const chainNameStyles = css();
+
 export const TokenSectionContainer = styled('div', {
   width: '10.625rem',
   padding: '$2 $5',
@@ -36,22 +38,23 @@ export const TokenSectionContainer = styled('div', {
   justifyContent: 'start',
   boxSizing: 'border-box',
   alignItems: 'center',
-
-  '& .blockchain-name': {
+  [`& .${chainNameStyles}`]: {
     $$color: '$colors$neutral600',
     [`.${darkTheme} &`]: {
       $$color: '$colors$neutral700',
     },
     color: '$$color',
   },
-  '& .token-chain-name': {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'start',
-    paddingLeft: '$10',
-  },
-  '& .token-chain-name__skeleton': {
-    padding: '$5 $0',
-  },
+});
+
+export const tokenChainStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'start',
+  paddingLeft: '$10',
+});
+
+export const skeletonStyles = css({
+  padding: '$5 $0',
 });