@rango-dev/ui 0.1.11-next.3 → 0.1.11-next.5

package/package.json

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

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/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/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[]
@@ -44,10 +45,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 +184,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/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/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,28 @@ 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' : 'h6'}
+          >
+            {amount}
+          </Typography>
+        )}
+        {!amount && estimatedAmount && (
+          <Typography
+            noWrap
+            variant={direction === 'vertical' ? 'body2' : 'h6'}
+            color={'$neutrals500'}
+          >
+            {estimatedAmount}
+          </Typography>
+        )}
+        &nbsp;
+        <Typography variant={direction === 'vertical' ? 'body2' : 'h6'} noWrap>
+          {symbol}
         </Typography>
-        <SubTitle noWrap variant="caption" color="neutrals800">
+        <SubTitle noWrap variant="caption" color="$neutrals800">
           on {blockchain}
         </SubTitle>
       </Detail>

package/src/components/SwapDetail/Token.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { styled } from '../../theme';
 import { Spacer } from '../Spacer';
+import { Image } from '../common';
 
 const TokenContainer = styled('div', {
   display: 'flex',
@@ -14,13 +15,6 @@ const TokenContainer = styled('div', {
 
 const TokenImage = styled('div', {
   position: 'relative',
-  width: '$24',
-  height: '$24',
-
-  img: {
-    width: '100%',
-    display: 'block',
-  },
 
   '.overlay': {
     position: 'absolute',
@@ -30,6 +24,9 @@ const TokenImage = styled('div', {
     height: '$16',
     padding: '$2',
     borderRadius: '50%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
     backgroundColor: '$background',
     border: '1px solid $neutrals400',
   },
@@ -52,11 +49,12 @@ export function Token(props: PropTypes) {
   return (
     <TokenContainer>
       <TokenImage>
-        <img src={props.data.token.logo} alt="" />
+        <Image src={props.data.token.logo} alt="" size={24} />
         <div className="overlay">
-          <img
+          <Image
             src={props.data.blockchain.logo}
             alt={props.data.blockchain.name}
+            size={12}
           />
         </div>
       </TokenImage>

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/Wallet/Wallet.tsx

@@ -6,11 +6,10 @@ import { WalletInfo, WalletState } from '../../types/wallet';
 import { Button } from '../Button/Button';
 import { Typography } from '../Typography';
 import { State } from './State';
+import { Image } from '../common';
 
-const WalletImage = styled('img', {
-  width: '$24',
-  height: '$24',
-  marginRight: '$12',
+const WalletImageContainer = styled('div', {
+  paddingRight: '$12',
 });
 const Text = styled('div', {
   display: 'flex',
@@ -51,7 +50,11 @@ export function Wallet(props: PropTypes) {
       align="start"
       variant="outlined"
       size="large"
-      prefix={<WalletImage src={image} />}
+      prefix={
+        <WalletImageContainer>
+          <Image src={image} size={24} />
+        </WalletImageContainer>
+      }
       suffix={<State walletState={state} installLink={installLink} />}
     >
       <Text>

package/src/components/common/Image.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { styled } from '../../theme';
+
+const ImageContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  '.image': {
+    width: '100%',
+    height: '100%',
+    objectFit: 'contain',
+  },
+});
+
+type PropTypes = {
+  size: number;
+} & React.ImgHTMLAttributes<HTMLImageElement>;
+
+export function Image(props: PropTypes) {
+  const { size, ...otherProps } = props;
+
+  return (
+    <ImageContainer css={{ width: size + 'px', height: size + 'px' }}>
+      <img className="image" {...otherProps} />
+    </ImageContainer>
+  );
+}

package/src/components/common/index.ts

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

package/src/containers/History/History.tsx

@@ -91,7 +91,7 @@ export function History({
     <SecondaryPage
       onBack={onBack}
       textField={true}
-      textFieldPlaceholder="Search By Blockchain Or Token Or Request ID"
+      textFieldPlaceholder="Search by Blockchain/Token/Request Id"
       title="Swaps"
     >
       {(searchedFor) => {

package/src/containers/SwapHistory/SwapHistory.tsx

@@ -12,6 +12,7 @@ import {
   Drawer,
   Spinner,
   Divider,
+  Image,
 } from '../../components';
 import { styled } from '../../theme';
 import { PendingSwap } from '../History/types';
@@ -24,7 +25,19 @@ import {
 export const SwapperContainer = styled('div', {
   display: 'flex',
   alignItems: 'center',
-  marginLeft: '6px',
+  paddingLeft: '$4',
+  variants: {
+    created: {
+      true: {
+        filter: 'grayscale(100%)',
+      },
+    },
+    running: {
+      true: {
+        animation: `${pulse} 2s ease-in-out infinite`,
+      },
+    },
+  },
 });
 
 export const BodyError = styled('div', {
@@ -38,16 +51,15 @@ export const ErrorMsg = styled(Typography, {
   color: '$error',
 });
 
+export const FeeContainer = styled('div', {
+  paddingLeft: '$4',
+});
+
 export const Fee = styled('div', {
   display: 'flex',
   alignItems: 'center',
 });
 
-export const SwapperLogo = styled('img', {
-  width: '$16',
-  height: '$16',
-});
-
 export const RelativeContainer = styled('div', {
   position: 'relative',
 });
@@ -62,7 +74,7 @@ export const Dot = styled('div', {
   height: '$8',
   backgroundColor: '$foreground',
   borderRadius: '4px',
-  marginLeft: '$8',
+  marginLeft: '11px',
 });
 
 export const ArrowDown = styled('div', {
@@ -71,7 +83,7 @@ export const ArrowDown = styled('div', {
   borderLeft: '5px solid transparent',
   borderRight: '5px solid transparent',
   borderTop: '5px solid $foreground',
-  marginLeft: '$8',
+  marginLeft: '$10',
 });
 
 const StyledAnchor = styled('a', {
@@ -106,14 +118,10 @@ const Description = styled(Typography, {
   marginLeft: '$8',
 });
 
-const Error = styled(Description, {
-  color: '$error',
-});
-
 export const Line = styled('div', {
   width: '0',
   minHeight: '$16',
-  marginLeft: '$12',
+  marginLeft: '14px',
   border: '1px dashed $foreground',
   borderRadius: 'inherit',
 });
@@ -161,23 +169,9 @@ const ExtraDetails = styled('div', {
   fontSize: '$12',
 });
 
-const StepContainer = styled('div', {
-  variants: {
-    hasNotStarted: {
-      true: {
-        filter: 'grayscale(100%)',
-      },
-    },
-    isRunning: {
-      true: {
-        animation: `${pulse} 2s ease-in-out infinite`,
-      },
-    },
-  },
-});
-
 const SwapFlowContainer = styled('div', {
   overflowY: 'auto',
+  paddingTop: '$8',
 });
 
 export type PropTypes = {
@@ -275,21 +269,12 @@ export function SwapHistory(props: PropTypes) {
         <Divider size={32} />
 
         {pendingSwap?.steps.map((step, index) => (
-          <StepContainer
-            key={index}
-            hasNotStarted={step.status === 'created'}
-            isRunning={
-              step.status != 'failed' &&
-              step.status != 'success' &&
-              step.status != 'created'
-            }
-          >
+          <div key={index}>
             {index === 0 && (
               <RelativeContainer>
                 <StepDetail
                   logo={step.fromLogo}
                   symbol={step.fromSymbol}
-                  // @ts-ignore
                   chainLogo={step.fromBlockchainLogo || ''}
                   blockchain={step.fromBlockchain}
                   amount={pendingSwap.inputAmount}
@@ -298,36 +283,28 @@ export function SwapHistory(props: PropTypes) {
               </RelativeContainer>
             )}
             <Line />
-            <SwapperContainer>
-              <SwapperLogo
-                src={
-                  // @ts-ignore
-                  step.swapperLogo || ''
-                }
+            <SwapperContainer
+              created={step.status === 'created'}
+              running={!['created', 'success', 'failed'].includes(step.status)}
+            >
+              <Image
+                src={step.swapperLogo || ''}
                 alt={step.swapperId}
+                size={20}
               />
-              <div>
-                <Typography ml={4} variant="caption">
-                  {
-                    // @ts-ignore
-                    step.swapperType
-                  }{' '}
-                  from {step.fromSymbol} to {step.toSymbol}
-                  via {step.swapperId}
+
+              <FeeContainer>
+                <Typography variant="caption">
+                  {step.swapperType} from {step.fromSymbol} to {step.toSymbol}
+                  &nbsp; via {step.swapperId}
                 </Typography>
                 <Fee>
                   <GasIcon />
-                  <Typography ml={4} variant="caption">
-                    $
-                    {
-                      // @ts-ignore
-
-                      step.feeInUsd
-                    }{' '}
-                    estimated gas fee
+                  <Typography variant="caption">
+                    &nbsp; ${step.feeInUsd} estimated gas fee
                   </Typography>
                 </Fee>
-              </div>
+              </FeeContainer>
             </SwapperContainer>
             <div
               style={{
@@ -336,56 +313,62 @@ export function SwapHistory(props: PropTypes) {
             >
               <InternalDetailsContainer>
                 <Line />
-                {!!step.explorerUrl && (
-                  <div>
-                    {step.explorerUrl.map((item, index) => (
-                      <InternalDetail key={index}>
-                        <DescriptionContainer>
-                          <CheckCircleIcon color="success" />
-                          <Description variant="body2">
-                            {!item.description ? (
-                              <b>View transaction</b>
-                            ) : (
-                              <b>
-                                {item.description.substring(0, 1).toUpperCase()}
-                                {item.description.substring(1)}
-                              </b>
-                            )}
-                          </Description>
-                        </DescriptionContainer>
-                        <StyledAnchor
-                          href={item.url}
-                          target="_blank"
-                          rel="noreferrer"
-                          key={index}
-                        >
-                          TX-Link
-                        </StyledAnchor>
-                      </InternalDetail>
-                    ))}
-                    {step.status === 'failed' && (
-                      <InternalDetail>
-                        <DescriptionContainer>
-                          <InfoCircleIcon color="error" />
-                          <Error variant="body2">Step failed</Error>
-                        </DescriptionContainer>
-                      </InternalDetail>
-                    )}
-                  </div>
-                )}
+                <div>
+                  {!!step.explorerUrl && (
+                    <div>
+                      {step.explorerUrl.map((item, index) => (
+                        <InternalDetail key={index}>
+                          <DescriptionContainer>
+                            <CheckCircleIcon color="success" />
+                            <Description variant="body2">
+                              {!item.description ? (
+                                <b>View transaction</b>
+                              ) : (
+                                <b>
+                                  {item.description
+                                    .substring(0, 1)
+                                    .toUpperCase()}
+                                  {item.description.substring(1)}
+                                </b>
+                              )}
+                            </Description>
+                          </DescriptionContainer>
+                          <StyledAnchor
+                            href={item.url}
+                            target="_blank"
+                            rel="noreferrer"
+                            key={index}
+                          >
+                            TX-Link
+                          </StyledAnchor>
+                        </InternalDetail>
+                      ))}
+                    </div>
+                  )}
+                  {step.status === 'failed' && (
+                    <InternalDetail>
+                      <DescriptionContainer>
+                        <InfoCircleIcon color="error" />
+                        <Description variant="body2" color="$error500">
+                          Step failed
+                        </Description>
+                      </DescriptionContainer>
+                    </InternalDetail>
+                  )}
+                </div>
               </InternalDetailsContainer>
             </div>
             {index + 1 === pendingSwap.steps.length && <ArrowDown />}
             <StepDetail
               logo={step.toLogo}
               symbol={step.toSymbol}
-              // @ts-ignore
-
               chainLogo={step.toBlockchainLogo || ''}
               blockchain={step.toBlockchain}
               amount={step.outputAmount || ''}
+              estimatedAmount={step.expectedOutputAmountHumanReadable || ''}
+              success={step.status === 'success'}
             />
-          </StepContainer>
+          </div>
         ))}
 
         <Divider size={32} />