@rango-dev/ui 0.1.11-next.2 → 0.1.11-next.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.1.11-next.2",
+  "version": "0.1.11-next.4",
   "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

@@ -1,6 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import { styled } from '../../theme';
 import { Typography } from '../Typography';
+import { Image } from '../common';
 
 const StepLogoContainer = styled('div', {
   position: 'relative',
@@ -15,11 +16,6 @@ const StepLogoContainer = styled('div', {
     },
   },
 });
-const Logo = styled('img', {
-  width: '$28',
-  height: '$28',
-  borderRadius: '50%',
-});
 
 const ChainLogo = styled('div', {
   position: 'absolute',
@@ -27,15 +23,12 @@ const ChainLogo = styled('div', {
   bottom: -4,
   width: '$16',
   height: '$16',
-  padding: '$2',
   borderRadius: '50%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
   backgroundColor: '$background',
   border: '1px solid $neutrals400',
-
-  img: {
-    width: '100%',
-    display: 'block',
-  },
 });
 const StepContainer = styled('div', {
   display: 'flex',
@@ -91,9 +84,9 @@ export function StepDetail({
   return (
     <StepContainer direction={direction}>
       <StepLogoContainer direction={direction}>
-        <Logo src={logo} alt={symbol} />
+        <Image src={logo} alt={symbol} size={28} />
         <ChainLogo>
-          <img src={chainLogo} alt={blockchain} />
+          <Image src={chainLogo} alt={blockchain} size={12} />
         </ChainLogo>
       </StepLogoContainer>
       <Detail pl={direction === 'horizontal'}>

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',
@@ -75,7 +76,7 @@ export function SwapDetail({
                 logo: firstStep.fromBlockchainLogo || '',
                 name: firstStep.fromBlockchain,
               },
-              amount: swap.inputAmount,
+              amount: limitDecimalPlaces(swap.inputAmount),
             }}
           />
           <Spacer size={12} />
@@ -92,10 +93,11 @@ export function SwapDetail({
                 logo: lastStep.toBlockchainLogo,
                 name: lastStep.toBlockchain,
               },
-              amount:
+              amount: limitDecimalPlaces(
                 lastStep.outputAmount ||
-                lastStep.expectedOutputAmountHumanReadable ||
-                '',
+                  lastStep.expectedOutputAmountHumanReadable ||
+                  ''
+              ),
             }}
           />
         </div>

package/src/components/SwapDetail/Token.tsx

@@ -1,10 +1,12 @@
 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',
@@ -13,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',
@@ -29,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',
   },
@@ -51,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';
@@ -43,11 +44,6 @@ export const Fee = styled('div', {
   alignItems: 'center',
 });
 
-export const SwapperLogo = styled('img', {
-  width: '$16',
-  height: '$16',
-});
-
 export const RelativeContainer = styled('div', {
   position: 'relative',
 });
@@ -299,12 +295,11 @@ export function SwapHistory(props: PropTypes) {
             )}
             <Line />
             <SwapperContainer>
-              <SwapperLogo
-                src={
-                  // @ts-ignore
-                  step.swapperLogo || ''
-                }
+              <Image
+                // @ts-ignore
+                src={step.swapperLogo}
                 alt={step.swapperId}
+                size={16}
               />
               <div>
                 <Typography ml={4} variant="caption">

package/src/helper/index.ts

@@ -1,11 +1,12 @@
-export const containsText = (text: string, searchText: string) =>
-  text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+export function containsText(text: string, searchText: string): boolean {
+  return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+}
 
-export const getConciseAddress = (
+export function getConciseAddress(
   address: string | null,
   maxChars = 8,
   ellipsisLength = 3
-): string | null => {
+): string | null {
   if (!address) return null;
   if (address.length < 2 * maxChars + ellipsisLength) return address;
   const start = Math.ceil((address.length - maxChars) / 2);
@@ -13,4 +14,18 @@ export const getConciseAddress = (
   return `${address.substr(start, maxChars)}${'.'.repeat(
     ellipsisLength
   )}${address.substr(end)}`;
-};
+}
+
+export function limitDecimalPlaces(
+  numberString: string,
+  maxDecimalPlaces = 4
+): string {
+  const number = parseFloat(numberString);
+  if (isNaN(number))
+    return numberString; // Return the original string if it's not a valid number
+  else {
+    const multiplier = Math.pow(10, maxDecimalPlaces);
+    const roundedNumber = Math.round(number * multiplier) / multiplier;
+    return roundedNumber.toString();
+  }
+}