@rango-dev/ui 0.22.1-next.2 → 0.22.1-next.21

package/src/containers/BlockchainSelector/BlockchainSelector.tsx

@@ -1,14 +1,16 @@
+import type { LoadingStatus } from '../../types/meta';
+import type { CSSProperties } from '@stitches/react';
+import type { BlockchainMeta } from 'rango-sdk';
+
 import React from 'react';
-import { BlockchainMeta } from 'rango-sdk';
+
+import { LoadingFailedAlert } from '../../components/Alert/LoadingFailedAlert';
+import { NotFoundAlert } from '../../components/Alert/NotFoundAlert';
 import { BlockchainsList } from '../../components/BlockchainsList';
 import { SecondaryPage } from '../../components/SecondaryPage/SecondaryPage';
 import { Spinner } from '../../components/Spinner';
 import { styled } from '../../theme';
-import { CSSProperties } from '@stitches/react';
-import { containsText } from '../../helper';
-import { LoadingStatus } from '../../types/meta';
-import { LoadingFailedAlert } from '../../components/Alert/LoadingFailedAlert';
-import { NotFoundAlert } from '../../components/Alert/NotFoundAlert';
+import { containsText } from '../../utils';
 import { LoaderContainer } from '../TokenSelector/TokenSelector';
 
 const ListContainer = styled('div', {
@@ -56,8 +58,7 @@ export function BlockchainSelector(props: PropTypes) {
       hasHeader={hasHeader}
       textFieldPlaceholder="Search blockchains by name"
       title={`Select ${type} Blockchain`}
-      onBack={onBack}
-    >
+      onBack={onBack}>
       {(searchedFor) => {
         const filteredBlockchains = filterBlockchains(list, searchedFor);
         return (

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 { Button, TextField, Typography } from '../../components';
+import { css, darkTheme, styled } from '../../theme';
+
+export const textStyles = css();
 
 export const Container = styled('div', {
   $$color: '$colors$neutral100',
@@ -17,40 +19,22 @@ export const Container = styled('div', {
       },
     },
   },
-  '& .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,
+  [`& .${textStyles}`]: {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
   },
 });
 
 export const InputAmount = styled(TextField, {
+  width: '100%',
   padding: '0',
   fontSize: '$18',
   lineHeight: '$26',
   fontWeight: '$medium',
   textAlign: 'right',
-  width: 140,
   '&:disabled': {
     cursor: 'unset',
   },
@@ -62,3 +46,70 @@ export const MaxButton = styled(Button, {
   },
   backgroundColor: '$$color',
 });
+
+export const ValueTypography = styled('div', {
+  display: 'flex',
+  width: '100%',
+  textAlign: 'right',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  variants: {
+    hasWarning: {
+      true: {
+        '& ._typography': {
+          color: '$warning500',
+        },
+      },
+      false: {
+        '& ._typography': {
+          $$color: '$colors$neutral600',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$neutral700',
+          },
+          color: '$$color',
+        },
+      },
+    },
+  },
+});
+
+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({
+  width: '45%',
+  maxWidth: '170px',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'end',
+  flexGrow: 1,
+});
+
+export const labelContainerStyles = css({
+  paddingBottom: '$5',
+});
+
+export const UsdPrice = styled(Typography, {
+  width: '100%',
+  textAlign: 'right',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});

package/src/containers/SwapInput/SwapInput.tsx

@@ -5,21 +5,37 @@ import React from 'react';
 
 import { Divider, PriceImpact, Skeleton, Typography } from '../../components';
 
-import { Container, InputAmount, MaxButton } from './SwapInput.styles';
+import {
+  amountStyles,
+  balanceStyles,
+  Container,
+  formStyles,
+  InputAmount,
+  labelContainerStyles,
+  labelStyles,
+  MaxButton,
+  textStyles,
+  UsdPrice,
+  ValueTypography,
+} from './SwapInput.styles';
 import { TokenSection } from './TokenSection';
 
 export function SwapInput(props: SwapInputProps) {
+  const showBalance =
+    'balance' in props && !props.loading && !props.loadingBalance;
+  const showBalanceSkeleton =
+    'balance' in props && (props.loading || props.loadingBalance);
   return (
     <Container sharpBottomStyle={props.sharpBottomStyle}>
-      <div className="label__container">
-        <div className="label">
-          <Typography variant="body" size="small" color="$neutral600">
+      <div className={labelContainerStyles()}>
+        <div className={labelStyles()}>
+          <Typography variant="body" size="small" className={textStyles()}>
             {props.label}
           </Typography>
-          {'balance' in props && !props.loading && (
-            <div className="balance">
+          {showBalance && (
+            <div className={balanceStyles()}>
               <Typography
-                color="$neutral600"
+                className={textStyles()}
                 mr={4}
                 variant="body"
                 size="xsmall">
@@ -35,14 +51,14 @@ export function SwapInput(props: SwapInputProps) {
               </MaxButton>
             </div>
           )}
-          {props.loading && (
-            <div className="balance">
+          {showBalanceSkeleton && (
+            <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}
@@ -52,12 +68,12 @@ export function SwapInput(props: SwapInputProps) {
           onClick={props.onClickToken}
           loading={props.loading}
         />
-        <div className="amount">
-          {props.loading ? (
+        <div className={amountStyles()}>
+          {props.loading || (props.mode === 'To' && props.fetchingQuote) ? (
             <>
-              <Skeleton variant="text" size="large" width={92} />
+              <Skeleton variant="text" size="large" />
               <Divider size={8} />
-              <Skeleton variant="text" size="medium" width={92} />
+              <Skeleton variant="text" size="medium" />
             </>
           ) : (
             <>
@@ -84,21 +100,13 @@ export function SwapInput(props: SwapInputProps) {
                   warningLevel={props.warningLevel}
                 />
               ) : (
-                <Typography
-                  variant="body"
-                  size="medium"
-                  color={!props.price.error ? '$neutral600' : '$warning500'}
-                  style={{
-                    width: 140,
-                    textAlign: 'right',
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                  }}>
-                  {props.price.usdValue
-                    ? `~$${props.price.usdValue}`
-                    : props.price.error}
-                </Typography>
+                <ValueTypography hasWarning={!!props.price.error}>
+                  <UsdPrice variant="body" size="medium">
+                    {props.price.usdValue
+                      ? `~$${props.price.usdValue}`
+                      : props.price.error}
+                  </UsdPrice>
+                </ValueTypography>
               )}
             </>
           )}

package/src/containers/SwapInput/SwapInput.types.ts

@@ -25,12 +25,14 @@ export type BaseProps = {
 type FromProps = {
   mode: 'From';
   balance?: string;
+  loadingBalance: boolean;
   onSelectMaxBalance: () => void;
   onInputChange: (inputAmount: string) => void;
 };
 
 type ToProps = {
   mode: 'To';
+  fetchingQuote?: boolean;
   percentageChange: string | null;
   warningLevel: PriceImpactWarningLevel;
 };

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

@@ -1,7 +1,10 @@
 import { Button } from '../../components';
-import { darkTheme, styled } from '../../theme';
+import { css, darkTheme, styled } from '../../theme';
 
 export const Container = styled(Button, {
+  maxWidth: '180px',
+  minWidth: '130px',
+  flexGrow: 1,
   backgroundColor: 'transparent',
   color: '$neutral700',
   '&:disabled': {
@@ -27,23 +30,35 @@ export const Container = styled(Button, {
   },
 });
 
+export const chainNameStyles = css();
+
 export const TokenSectionContainer = styled('div', {
-  width: '10.625rem',
+  maxWidth: '170px',
   padding: '$2 $5',
   display: 'flex',
   borderRadius: '$xs',
   justifyContent: 'start',
   boxSizing: 'border-box',
   alignItems: 'center',
-
-  '& .token-chain-name': {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'start',
-    paddingLeft: '$10',
-  },
-  '& .token-chain-name__skeleton': {
-    padding: '$5 $0',
+  [`& .${chainNameStyles}`]: {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
   },
 });
+
+export const tokenChainStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'start',
+  paddingLeft: '$10',
+  flexGrow: 1,
+});
+
+export const skeletonStyles = css({
+  width: '100%',
+  padding: '$5 $0',
+});

package/src/containers/SwapInput/TokenSection.tsx

@@ -5,7 +5,13 @@ import React from 'react';
 
 import { ChainToken, Divider, Skeleton, Typography } from '../../components';
 
-import { Container, TokenSectionContainer } from './TokenSection.styles';
+import {
+  chainNameStyles,
+  Container,
+  skeletonStyles,
+  tokenChainStyles,
+  TokenSectionContainer,
+} from './TokenSection.styles';
 
 export function TokenSection(props: TokenSectionProps) {
   const {
@@ -27,12 +33,12 @@ export function TokenSection(props: TokenSectionProps) {
           tokenImage={tokenImage}
           loading={loading}
         />
-        <div className="token-chain-name">
+        <div className={tokenChainStyles()}>
           {loading ? (
-            <div className="token-chain-name__skeleton">
-              <Skeleton variant="text" size="large" width={92} />
+            <div className={skeletonStyles()}>
+              <Skeleton variant="text" size="large" />
               <Divider size={8} />
-              <Skeleton variant="text" size="medium" width={92} />
+              <Skeleton variant="text" size="medium" />
             </div>
           ) : (
             <>
@@ -41,7 +47,10 @@ export function TokenSection(props: TokenSectionProps) {
                   ? i18n.t('Token')
                   : tokenSymbol}
               </Typography>
-              <Typography variant="body" size="medium" color="$neutral600">
+              <Typography
+                variant="body"
+                size="medium"
+                className={chainNameStyles()}>
                 {error || (!loading && !chain) ? i18n.t('Chain') : chain}
               </Typography>
             </>

package/src/containers/TokenSelector/TokenSelector.tsx

@@ -1,14 +1,13 @@
+import type { TokenWithAmount } from '../../components/TokenList/TokenList';
+import type { LoadingStatus } from '../../types/meta';
+
 import React from 'react';
-import { containsText } from '../../helper';
 
-import { LoadingStatus } from '../../types/meta';
-import { styled } from '../../theme';
-import { NotFoundAlert } from '../../components/Alert/NotFoundAlert';
 import { LoadingFailedAlert, SecondaryPage, Spinner } from '../../components';
-import {
-  TokenList,
-  TokenWithAmount,
-} from '../../components/TokenList/TokenList';
+import { NotFoundAlert } from '../../components/Alert/NotFoundAlert';
+import { TokenList } from '../../components/TokenList/TokenList';
+import { styled } from '../../theme';
+import { containsText } from '../../utils';
 
 export const LoaderContainer = styled('div', {
   display: 'flex',
@@ -45,8 +44,7 @@ export function TokenSelector(props: PropTypes) {
       hasHeader={hasHeader}
       title={`Select ${type} token`}
       onBack={onBack}
-      textFieldPlaceholder="Search tokens by name"
-    >
+      textFieldPlaceholder="Search tokens by name">
       {(searchedFor) => {
         const filteredTokens = filterTokens(list, searchedFor);