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

package/package.json

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

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/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',
@@ -72,10 +73,10 @@ export function SwapDetail({
               },
               blockchain: {
                 // @ts-ignore
-                logo: firstStep.fromBlockchainLogo,
+                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

@@ -5,6 +5,7 @@ import { Spacer } from '../Spacer';
 const TokenContainer = styled('div', {
   display: 'flex',
   alignItems: 'center',
+  width: '160px',
 
   '& .amount': {
     fontWeight: 'bold',

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

package/src/components/TokenSelector/TokenSelector.tsx

@@ -9,27 +9,21 @@ import { LoadingFailedAlert } from '../Alert/LoadingFailedAlert';
 import { NotFoundAlert } from '../Alert/NotFoundAlert';
 import { styled } from '../../theme';
 
-const Container = styled('div', {
-  flex: '1',
-});
-
 export const LoaderContainer = styled('div', {
   display: 'flex',
   justifyContent: 'center',
   width: '100%',
-  position: 'absolute',
-  top: '50%',
+  paddingTop: '5%',
+  flex: 1,
 });
 export interface PropTypes {
   list: TokenWithAmount[];
   type?: 'Source' | 'Destination';
   selected: TokenWithAmount | null;
   onChange: (token: TokenWithAmount) => void;
-  hasHeader?: boolean;
-  multiSelect?: boolean;
   onBack?: () => void;
-  selectedList?: TokenWithAmount[] | 'all';
   loadingStatus: LoadingStatus;
+  hasHeader?: boolean;
 }
 
 const filterTokens = (list: TokenWithAmount[], searchedFor: string) =>
@@ -41,53 +35,35 @@ const filterTokens = (list: TokenWithAmount[], searchedFor: string) =>
   );
 
 export function TokenSelector(props: PropTypes) {
-  const {
-    list,
-    type,
-    selected,
-    onChange,
-    hasHeader,
-    multiSelect,
-    selectedList,
-    onBack,
-    loadingStatus,
-  } = props;
+  const { list, type, selected, hasHeader, onChange, onBack, loadingStatus } =
+    props;
 
   return (
     <SecondaryPage
       textField={true}
-      textFieldPlaceholder="Search Blockchain By Name"
-      title={`Select ${type} Token`}
       hasHeader={hasHeader}
+      title={`Select ${type} Token`}
       onBack={onBack}
+      textFieldPlaceholder="Search Token By Name"
     >
       {(searchedFor) => {
         const filteredTokens = filterTokens(list, searchedFor);
-        return (
-          <Container>
-            {loadingStatus === 'loading' && (
-              <LoaderContainer>
-                <Spinner size={24} />
-              </LoaderContainer>
-            )}
-            {loadingStatus === 'failed' && <LoadingFailedAlert />}
-            {loadingStatus === 'success' && (
-              <>
-                {filteredTokens.length ? (
-                  <TokenList
-                    searchedText={searchedFor}
-                    list={filteredTokens}
-                    selected={selected}
-                    selectedList={selectedList}
-                    multiSelect={multiSelect}
-                    onChange={onChange}
-                  />
-                ) : (
-                  <NotFoundAlert catergory="Token" searchedFor={searchedFor} />
-                )}
-              </>
-            )}
-          </Container>
+
+        return loadingStatus === 'loading' ? (
+          <LoaderContainer>
+            <Spinner size={24} />
+          </LoaderContainer>
+        ) : loadingStatus === 'failed' ? (
+          <LoadingFailedAlert />
+        ) : filteredTokens.length ? (
+          <TokenList
+            searchedText={searchedFor}
+            list={filteredTokens}
+            selected={selected}
+            onChange={onChange}
+          />
+        ) : (
+          <NotFoundAlert catergory="Token" searchedFor={searchedFor} />
         );
       }}
     </SecondaryPage>

package/src/containers/SwapHistory/SwapHistory.tsx

@@ -290,7 +290,7 @@ export function SwapHistory(props: PropTypes) {
                   logo={step.fromLogo}
                   symbol={step.fromSymbol}
                   // @ts-ignore
-                  chainLogo={step.fromBlockchainLogo}
+                  chainLogo={step.fromBlockchainLogo || ''}
                   blockchain={step.fromBlockchain}
                   amount={pendingSwap.inputAmount}
                 />
@@ -300,8 +300,10 @@ export function SwapHistory(props: PropTypes) {
             <Line />
             <SwapperContainer>
               <SwapperLogo
-                // @ts-ignore
-                src={step.swapperLogo}
+                src={
+                  // @ts-ignore
+                  step.swapperLogo || ''
+                }
                 alt={step.swapperId}
               />
               <div>
@@ -319,6 +321,7 @@ export function SwapHistory(props: PropTypes) {
                     $
                     {
                       // @ts-ignore
+
                       step.feeInUsd
                     }{' '}
                     estimated gas fee
@@ -377,7 +380,8 @@ export function SwapHistory(props: PropTypes) {
               logo={step.toLogo}
               symbol={step.toSymbol}
               // @ts-ignore
-              chainLogo={step.toBlockchainLogo}
+
+              chainLogo={step.toBlockchainLogo || ''}
               blockchain={step.toBlockchain}
               amount={step.outputAmount || ''}
             />

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();
+  }
+}