@rango-dev/ui 0.1.10 → 0.1.11-next.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.1.10",
+  "version": "0.1.11-next.10",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Alert/Alert.tsx

@@ -87,7 +87,7 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
         >
           {title && (
             <>
-              <Typography className="title" variant="h6" color={type}>
+              <Typography className="title" variant="title" color={type}>
                 {title}
               </Typography>
               {!!children && <Spacer size={8} direction="vertical" />}

package/src/components/BestRoute/BestRoute.tsx

@@ -7,6 +7,7 @@ import { Skeleton } from '../Skeleton';
 import { Spinner } from '../Spinner';
 import { BestRouteResponse } from 'rango-sdk';
 import { Tooltip } from '../Tooltip';
+import { Image } from '../common';
 
 const Container = styled('div', {
   borderRadius: '$5',
@@ -48,10 +49,6 @@ const HR = styled('hr', {
   margin: '$8 0',
 });
 
-const SwapperLogo = styled('img', {
-  width: '$16',
-  height: '$16',
-});
 const RelativeContainer = styled('div', {
   position: 'relative',
 });
@@ -208,7 +205,7 @@ export function BestRoute(props: PropsWithChildren<PropTypes>) {
               )}
               <SwapperContainer>
                 <Line />
-                <SwapperLogo src={swap.swapperLogo} alt={swap.swapperId} />
+                <Image src={swap.swapperLogo} alt={swap.swapperId} size={20} />
                 <Line />
               </SwapperContainer>
 

package/src/components/BlockchainSelector/BlockchainSelector.tsx

@@ -13,6 +13,7 @@ import { LoaderContainer } from '../TokenSelector/TokenSelector';
 
 const ListContainer = styled('div', {
   overflowY: 'auto',
+  padding: '0 $4',
 });
 
 const filterBlockchains = (list: BlockchainMeta[], searchedFor: string) =>
@@ -60,32 +61,34 @@ export function BlockchainSelector(props: PropTypes) {
       {(searchedFor) => {
         const filteredBlockchains = filterBlockchains(list, searchedFor);
         return (
-          <ListContainer style={listContainerStyle} key="1">
+          <>
             {loadingStatus === 'loading' && (
               <LoaderContainer>
                 <Spinner size={24} />
               </LoaderContainer>
             )}
-            {loadingStatus === 'failed' && <LoadingFailedAlert />}
-            {loadingStatus === 'success' && (
-              <>
-                {filteredBlockchains.length ? (
-                  <BlockchainsList
-                    list={filteredBlockchains}
-                    selected={selected}
-                    multiSelect={multiSelect}
-                    selectedList={selectedList}
-                    onChange={onChange}
-                  />
-                ) : (
-                  <NotFoundAlert
-                    catergory="Blockchain"
-                    searchedFor={searchedFor}
-                  />
-                )}
-              </>
-            )}
-          </ListContainer>
+            <ListContainer style={listContainerStyle} key="1">
+              {loadingStatus === 'failed' && <LoadingFailedAlert />}
+              {loadingStatus === 'success' && (
+                <>
+                  {filteredBlockchains.length ? (
+                    <BlockchainsList
+                      list={filteredBlockchains}
+                      selected={selected}
+                      multiSelect={multiSelect}
+                      selectedList={selectedList}
+                      onChange={onChange}
+                    />
+                  ) : (
+                    <NotFoundAlert
+                      catergory="Blockchain"
+                      searchedFor={searchedFor}
+                    />
+                  )}
+                </>
+              )}
+            </ListContainer>
+          </>
         );
       }}
     </SecondaryPage>

package/src/components/BlockchainsList/BlockchainsList.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { styled } from '../../theme';
 import { BlockchainMeta } from 'rango-sdk';
 import { Button } from '../Button/Button';
-import { FilledCircle } from '../common';
+import { FilledCircle, Image } from '../common';
 import { Typography } from '../Typography';
 
 export interface PropTypes {
@@ -22,10 +22,8 @@ const ListContainer = styled('div', {
   height: '100%',
 });
 
-const Image = styled('img', {
-  width: '1.5rem',
-  maxHeight: '1.5rem',
-  marginRight: '$4',
+const ImageContainer = styled('div', {
+  paddingRight: '$4',
 });
 
 export function BlockchainsList(props: PropTypes) {
@@ -55,7 +53,11 @@ export function BlockchainsList(props: PropTypes) {
             type={isSelect(blockchain.name) ? 'primary' : undefined}
             variant="outlined"
             size="large"
-            prefix={<Image src={blockchain.logo} />}
+            prefix={
+              <ImageContainer>
+                <Image size={24} src={blockchain.logo} />
+              </ImageContainer>
+            }
             suffix={isSelect(blockchain.name) ? <FilledCircle /> : undefined}
             align="start"
             onClick={changeSelectedBlockchain.bind(null, blockchain)}

package/src/components/Drawer/Drawer.tsx

@@ -110,7 +110,7 @@ export function Drawer(props: PropTypes) {
           <BackDrop onClick={handleBackDropClick}>
             <DrawerContainer anchor={anchor} style={containerStyle}>
               <DrawerHeader>
-                <Typography variant="h4">{title}</Typography>
+                <Typography variant="h6">{title}</Typography>
                 {showClose && <CloseIcon size={24} onClick={onClose} />}
               </DrawerHeader>
               <Body>{content}</Body>

package/src/components/Icon/common.ts

@@ -31,6 +31,11 @@ export const SvgWithStrokeColor = styled('svg', {
         stroke: '$$color',
       },
     },
+    disabled: {
+      true: {
+        stroke: '$neutrals400',
+      },
+    },
   },
 });
 
@@ -65,5 +70,10 @@ export const SvgWithFillColor = styled('svg', {
         fill: '$$color',
       },
     },
+    disabled: {
+      true: {
+        stroke: '$neutrals400',
+      },
+    },
   },
 });

package/src/components/Icon/types.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 export interface IconProps extends React.SVGAttributes<SVGElement> {
   size?: 12 | 16 | 18 | 20 | 24 | 28 | 32 | 36 | 40;
   color?: 'primary' | 'error' | 'warning' | 'success' | 'black' | 'white';
+  disabled?: boolean;
 }
 
 export type Icon =

package/src/components/LiquiditySourceList/LiquiditySourceList.tsx

@@ -9,6 +9,7 @@ import { Typography } from '../Typography';
 import { Spinner } from '../Spinner';
 import { LoadingFailedAlert } from '../Alert/LoadingFailedAlert';
 import { NotFoundAlert } from '../Alert/NotFoundAlert';
+import { Image } from '../common';
 
 const groupLiquiditySources = (
   liquiditySources: LiquiditySource[]
@@ -27,6 +28,7 @@ const MainContainer = styled('div', {
     loaded: {
       true: {
         overflowY: 'auto',
+        padding: '0 $4',
       },
     },
   },
@@ -44,10 +46,8 @@ const LiquiditySourceType = styled('div', {
   paddingBottom: '$8',
 });
 
-const LiquidityImage = styled('img', {
-  width: '$20',
-  maxHeight: '$20',
-  marginRight: '$16',
+const LiquidityImageContainer = styled('div', {
+  paddingRight: '$16',
 });
 
 const LoaderContainer = styled('div', {
@@ -185,7 +185,11 @@ const LiquiditySourceItem = ({
     size="large"
     align="start"
     variant="outlined"
-    prefix={<LiquidityImage src={liquiditySource.logo} />}
+    prefix={
+      <LiquidityImageContainer>
+        <Image src={liquiditySource.logo} size={20} />
+      </LiquidityImageContainer>
+    }
     suffix={<Switch checked={selected} />}
     style={{ marginBottom: '12px' }}
     onClick={onChange.bind(null, liquiditySource)}

package/src/components/Modal/Modal.tsx

@@ -12,7 +12,6 @@ export interface PropTypes {
   content: React.ReactNode;
   action?: React.ReactNode;
   containerStyle?: CSSProperties;
-  contentStyle?: CSSProperties;
 }
 
 const BackDrop = styled('div', {
@@ -48,7 +47,6 @@ const ModalHeader = styled('div', {
   marginBottom: '$16',
 });
 
-const ContentContainer = styled('div', {});
 
 export function Modal(props: PropTypes) {
   const {
@@ -58,7 +56,6 @@ export function Modal(props: PropTypes) {
     onClose,
     containerStyle,
     action,
-    contentStyle,
   } = props;
 
   const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -81,9 +78,7 @@ export function Modal(props: PropTypes) {
                   <CloseIcon size={24} onClick={onClose} />
                 </Row>
               </ModalHeader>
-              <ContentContainer style={contentStyle}>
-                {content}
-              </ContentContainer>
+              {content}
             </ModalContainer>
           </BackDrop>,
           document.body

package/src/components/SelectableWalletList/SelectableWalletList.tsx

@@ -3,6 +3,7 @@ import { styled } from '../../theme';
 import { SelectableWallet } from '../../types';
 import { Typography } from '../Typography';
 import { getConciseAddress } from '../../helper';
+import { Image } from '../common';
 
 const Row = styled('div', {
   display: 'flex',
@@ -102,7 +103,7 @@ export function SelectableWalletList({
             onClick={onClick.bind(null, w)}
             key={index}
           >
-            <img src={w.image} alt={w.walletType} width={24} height={24} />
+            <Image src={w.image} alt={w.walletType} size={24} />
             <Typography variant="body2">{w.name}</Typography>
             <Typography variant="caption">
               {getConciseAddress(w.address)}

package/src/components/Settings/Settings.tsx

@@ -27,13 +27,13 @@ const SlippageChipsContainer = styled('div', {
 const LiquiditySourceContainer = styled(BaseContainer, {
   display: 'flex',
   justifyContent: 'space-between',
-  marginTop: '$32',
+  marginTop: '$16',
   cursor: 'pointer',
 });
 const InfiniteContainer = styled(BaseContainer, {
   display: 'flex',
   justifyContent: 'space-between',
-  marginTop: '$32',
+  marginTop: '$16',
 });
 
 const StyledAngleRight = styled(AngleRightIcon, { marginLeft: '$8' });
@@ -45,8 +45,9 @@ const LiquiditySourceNumber = styled('div', {
 });
 
 const ThemesContainer = styled(BaseContainer, {
-  marginTop: '$32',
+  marginTop: '$16',
 });
+
 const Head = styled('div', {
   display: 'flex',
   justifyContent: 'space-between',

package/src/components/StepDetail/StepDetail.tsx

@@ -50,6 +50,12 @@ const StepContainer = styled('div', {
         justifyContent: 'center',
       },
     },
+    success: {
+      true: { filter: 'none' },
+      false: {
+        filter: 'grayscale(100%)',
+      },
+    },
   },
 });
 const Detail = styled('div', {
@@ -70,6 +76,7 @@ const Detail = styled('div', {
 const SubTitle = styled(Typography, {
   color: '$neutrals600',
   display: 'block',
+  paddingLeft: '$8',
 });
 export interface PropTypes {
   logo: string;
@@ -77,19 +84,24 @@ export interface PropTypes {
   amount: string;
   symbol: string;
   blockchain: string;
+  estimatedAmount?: string;
   direction?: 'horizontal' | 'vertical';
+  success?: boolean;
 }
 
-export function StepDetail({
-  logo,
-  chainLogo,
-  amount,
-  symbol,
-  blockchain,
-  direction = 'horizontal',
-}: PropsWithChildren<PropTypes>) {
+export function StepDetail(props: PropsWithChildren<PropTypes>) {
+  const {
+    logo,
+    chainLogo,
+    amount,
+    symbol,
+    blockchain,
+    estimatedAmount,
+    success = true,
+    direction = 'horizontal',
+  } = props;
   return (
-    <StepContainer direction={direction}>
+    <StepContainer direction={direction} success={success}>
       <StepLogoContainer direction={direction}>
         <Logo src={logo} alt={symbol} />
         <ChainLogo>
@@ -97,10 +109,31 @@ export function StepDetail({
         </ChainLogo>
       </StepLogoContainer>
       <Detail pl={direction === 'horizontal'}>
-        <Typography noWrap variant={direction === 'vertical' ? 'body2' : 'h6'}>
-          {amount ? parseFloat(amount).toFixed(2) : '?'} {symbol}
+        {amount && (
+          <Typography
+            noWrap
+            variant={direction === 'vertical' ? 'body2' : 'title'}
+          >
+            {amount}
+          </Typography>
+        )}
+        {!amount && estimatedAmount && (
+          <Typography
+            noWrap
+            variant={direction === 'vertical' ? 'body2' : 'title'}
+            color={'$neutrals600'}
+          >
+            {estimatedAmount}
+          </Typography>
+        )}
+        &nbsp;
+        <Typography
+          variant={direction === 'vertical' ? 'body2' : 'title'}
+          noWrap
+        >
+          {symbol}
         </Typography>
-        <SubTitle noWrap variant="caption" color="neutrals800">
+        <SubTitle noWrap variant="caption" color="$neutrals800">
           on {blockchain}
         </SubTitle>
       </Detail>

package/src/components/SwapContainer/SwapContainer.tsx

@@ -11,7 +11,6 @@ const MainContainer = styled('div', {
   width: '100%',
   minWidth: '375px',
   maxWidth: '512px',
-  maxHeight: '595px',
   padding: '$16',
   boxSizing: 'border-box',
   backgroundColor: '$background',
@@ -19,6 +18,7 @@ const MainContainer = styled('div', {
     fixedHeight: {
       true: {
         height: '595px',
+        maxHeight: '595px',
       },
       false: {
         height: 'auto',
@@ -34,7 +34,6 @@ export interface PropTypes {
 
 export function SwapContainer(props: PropsWithChildren<PropTypes>) {
   const { children, style, fixedHeight = true } = props;
-
   return (
     <MainContainer style={style} id="swap-box" fixedHeight={fixedHeight}>
       {children}

package/src/components/SwapDetail/SwapDetail.tsx

@@ -6,6 +6,7 @@ import { ArrowRightIcon } from '../Icon';
 import { Spacer } from '../Spacer';
 import { Spinner } from '../Spinner';
 import { Token } from './Token';
+import { limitDecimalPlaces } from '../../helper';
 
 const Container = styled('div', {
   position: 'relative',
@@ -26,13 +27,6 @@ const Container = styled('div', {
     fontSize: '$12',
   },
 
-  '&.running': {
-    color: '$foreground',
-  },
-  '&.failed,&.success': {
-    color: '$neutrals600',
-  },
-
   '&.failed .status': {
     color: '$error',
   },
@@ -71,11 +65,10 @@ export function SwapDetail({
                 symbol: firstStep.fromSymbol,
               },
               blockchain: {
-                // @ts-ignore
-                logo: firstStep.fromBlockchainLogo,
+                logo: firstStep.fromBlockchainLogo || '',
                 name: firstStep.fromBlockchain,
               },
-              amount: swap.inputAmount,
+              amount: limitDecimalPlaces(swap.inputAmount),
             }}
           />
           <Spacer size={12} />
@@ -88,14 +81,13 @@ export function SwapDetail({
                 symbol: lastStep.toSymbol,
               },
               blockchain: {
-                // @ts-ignore
-                logo: lastStep.toBlockchainLogo,
+                logo: lastStep.toBlockchainLogo || '',
                 name: lastStep.toBlockchain,
               },
-              amount:
-                lastStep.outputAmount ||
-                lastStep.expectedOutputAmountHumanReadable ||
-                '',
+              amount: limitDecimalPlaces(lastStep.outputAmount || ''),
+              estimatedAmount: limitDecimalPlaces(
+                lastStep.expectedOutputAmountHumanReadable || ''
+              ),
             }}
           />
         </div>

package/src/components/SwapDetail/Token.tsx

@@ -1,25 +1,23 @@
 import React from 'react';
 import { styled } from '../../theme';
 import { Spacer } from '../Spacer';
+import { Image } from '../common';
 
 const TokenContainer = styled('div', {
   display: 'flex',
   alignItems: 'center',
+  width: '160px',
 
   '& .amount': {
     fontWeight: 'bold',
   },
+  '& .estimated': {
+    color: '$neutrals600',
+  },
 });
 
 const TokenImage = styled('div', {
   position: 'relative',
-  width: '$24',
-  height: '$24',
-
-  img: {
-    width: '100%',
-    display: 'block',
-  },
 
   '.overlay': {
     position: 'absolute',
@@ -29,6 +27,9 @@ const TokenImage = styled('div', {
     height: '$16',
     padding: '$2',
     borderRadius: '50%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
     backgroundColor: '$background',
     border: '1px solid $neutrals400',
   },
@@ -45,24 +46,28 @@ interface PropTypes {
       name: string;
     };
     amount: string;
+    estimatedAmount?: string;
   };
 }
 export function Token(props: PropTypes) {
+  const {
+    data: { token, blockchain, amount, estimatedAmount },
+  } = props;
   return (
     <TokenContainer>
       <TokenImage>
-        <img src={props.data.token.logo} alt="" />
+        <Image src={token.logo} alt="" size={24} />
         <div className="overlay">
-          <img
-            src={props.data.blockchain.logo}
-            alt={props.data.blockchain.name}
-          />
+          <Image src={blockchain.logo} alt={blockchain.name} size={12} />
         </div>
       </TokenImage>
       <Spacer size={8} />
-      <span className="amount">{props.data.amount}</span>
+      {!!amount && <span className="amount">{props.data.amount}</span>}
+      {!amount && estimatedAmount && (
+        <span className="amount estimated">{props.data.estimatedAmount}</span>
+      )}
       <Spacer size={4} />
-      {props.data.token.symbol}
+      {token.symbol}
     </TokenContainer>
   );
 }

package/src/components/TextField/TextField.tsx

@@ -14,6 +14,7 @@ const InputContainer = styled('div', {
   position: 'relative',
   alignItems: 'center',
   color: '$foreground',
+  overflowX: 'hidden',
   transition: 'border-color ease .3s',
   '&:focus-within': {
     borderColor: '$success',
@@ -76,6 +77,13 @@ const Input = styled('input', {
   '&:disabled': {
     cursor: 'not-allowed',
   },
+  '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+    '-webkit-appearance': 'none',
+    margin: 0,
+  },
+  '&[type="number"]': {
+    '-moz-appearance': 'textfield',
+  },
 });
 const Label = styled('label', {
   display: 'inline-block',

package/src/components/TokenList/TokenItem.tsx

@@ -4,11 +4,10 @@ import { styled } from '../../theme';
 import { Button } from '../Button';
 import { Typography } from '../Typography';
 import { TokenWithAmount } from './TokenList';
+import { Image } from '../common';
 
-const TokenImage = styled('img', {
-  width: '$32',
-  maxHeight: '$32',
-  marginRight: '$16',
+const TokenImageContainer = styled('div', {
+  paddingRight: '$16',
 });
 
 const TokenNameContainer = styled('div', {
@@ -49,7 +48,11 @@ export function TokenItem(props: PropTypes) {
         align="start"
         onClick={onClick.bind(null, token)}
         type={selected ? 'primary' : undefined}
-        prefix={<TokenImage src={token.image} />}
+        prefix={
+          <TokenImageContainer>
+            <Image src={token.image} size={32} />
+          </TokenImageContainer>
+        }
         suffix={
           token.balance?.amount && (
             <TokenAmountContainer>

package/src/components/TokenList/TokenList.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useEffect, useState } from 'react';
 import { CommonProps } from 'react-window';
-import { Token } from 'rango-sdk';
+import { Asset, Token } from 'rango-sdk';
 import { VirtualizedList } from '../VirtualizedList/VirtualizedList';
 import { TokenItem } from './TokenItem';
 
@@ -18,7 +18,7 @@ export interface PropTypes {
   searchedText: string;
   onChange: (token: TokenWithAmount) => void;
   multiSelect?: boolean;
-  selectedList?: TokenWithAmount[] | 'all';
+  selectedList?: Asset[];
 }
 
 export function TokenList(props: PropTypes) {
@@ -33,7 +33,6 @@ export function TokenList(props: PropTypes) {
   const isSelected = (token: Token) => {
     if (multiSelect && selectedList) {
       return (
-        selectedList === 'all' ||
         selectedList
           .map((item) => item.symbol + item.address)
           .indexOf(token.symbol + token.address) > -1