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

package/README.md

@@ -1 +1 @@
-# @rango-dev/ui
+# @rango-dev/ui

package/dist/components/Modal/Modal.d.ts

@@ -7,6 +7,5 @@ export interface PropTypes {
     content: React.ReactNode;
     action?: React.ReactNode;
     containerStyle?: CSSProperties;
-    contentStyle?: CSSProperties;
 }
 export declare function Modal(props: PropTypes): JSX.Element;

package/dist/components/TokenList/TokenList.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Token } from 'rango-sdk';
+import { Asset, Token } from 'rango-sdk';
 export interface TokenWithAmount extends Token {
     balance?: {
         amount: string;
@@ -12,6 +12,6 @@ export interface PropTypes {
     searchedText: string;
     onChange: (token: TokenWithAmount) => void;
     multiSelect?: boolean;
-    selectedList?: TokenWithAmount[] | 'all';
+    selectedList?: Asset[];
 }
 export declare function TokenList(props: PropTypes): JSX.Element;

package/dist/components/TokenSelector/TokenSelector.d.ts

@@ -7,10 +7,8 @@ export interface PropTypes {
     type?: 'Source' | 'Destination';
     selected: TokenWithAmount | null;
     onChange: (token: TokenWithAmount) => void;
-    hasHeader?: boolean;
-    multiSelect?: boolean;
     onBack?: () => void;
-    selectedList?: TokenWithAmount[] | 'all';
     loadingStatus: LoadingStatus;
+    hasHeader?: boolean;
 }
 export declare function TokenSelector(props: PropTypes): JSX.Element;

package/dist/helper/index.d.ts

@@ -1,2 +1,3 @@
-export declare const containsText: (text: string, searchText: string) => boolean;
-export declare const getConciseAddress: (address: string | null, maxChars?: number, ellipsisLength?: number) => string | null;
+export declare function containsText(text: string, searchText: string): boolean;
+export declare function getConciseAddress(address: string | null, maxChars?: number, ellipsisLength?: number): string | null;
+export declare function limitDecimalPlaces(numberString: string, maxDecimalPlaces?: number): string;

package/dist/ui.cjs.development.js

@@ -2735,10 +2735,10 @@ function SecondaryPage(props) {
   })), props.textField && (props.children == null ? void 0 : props.children(searchedFor)), !props.textField && props.children), Footer);
 }
 
-var containsText = function containsText(text, searchText) {
+function containsText(text, searchText) {
   return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
-};
-var getConciseAddress = function getConciseAddress(address, maxChars, ellipsisLength) {
+}
+function getConciseAddress(address, maxChars, ellipsisLength) {
   if (maxChars === void 0) {
     maxChars = 8;
   }
@@ -2750,7 +2750,19 @@ var getConciseAddress = function getConciseAddress(address, maxChars, ellipsisLe
   var start = Math.ceil((address.length - maxChars) / 2);
   var end = address.length - maxChars;
   return "" + address.substr(start, maxChars) + '.'.repeat(ellipsisLength) + address.substr(end);
-};
+}
+function limitDecimalPlaces(numberString, maxDecimalPlaces) {
+  if (maxDecimalPlaces === void 0) {
+    maxDecimalPlaces = 4;
+  }
+  var number = parseFloat(numberString);
+  if (isNaN(number)) return numberString; // Return the original string if it's not a valid number
+  else {
+    var multiplier = Math.pow(10, maxDecimalPlaces);
+    var roundedNumber = Math.round(number * multiplier) / multiplier;
+    return roundedNumber.toString();
+  }
+}
 
 var SpacerContainer = /*#__PURE__*/styled('div', {
   variants: {
@@ -3077,7 +3089,7 @@ function TokenList(props) {
   };
   var isSelected = function isSelected(token) {
     if (multiSelect && selectedList) {
-      return selectedList === 'all' || selectedList.map(function (item) {
+      return selectedList.map(function (item) {
         return item.symbol + item.address;
       }).indexOf(token.symbol + token.address) > -1;
     }
@@ -3128,15 +3140,12 @@ function TokenList(props) {
   });
 }
 
-var Container$1 = /*#__PURE__*/styled('div', {
-  flex: '1'
-});
 var LoaderContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
   justifyContent: 'center',
   width: '100%',
-  position: 'absolute',
-  top: '50%'
+  paddingTop: '5%',
+  flex: 1
 });
 var filterTokens = function filterTokens(list, searchedFor) {
   return list.filter(function (token) {
@@ -3147,33 +3156,29 @@ function TokenSelector(props) {
   var list = props.list,
     type = props.type,
     selected = props.selected,
-    onChange = props.onChange,
     hasHeader = props.hasHeader,
-    multiSelect = props.multiSelect,
-    selectedList = props.selectedList,
+    onChange = props.onChange,
     onBack = props.onBack,
     loadingStatus = props.loadingStatus;
   return React__default.createElement(SecondaryPage, {
     textField: true,
-    textFieldPlaceholder: "Search Blockchain By Name",
-    title: "Select " + type + " Token",
     hasHeader: hasHeader,
-    onBack: onBack
+    title: "Select " + type + " Token",
+    onBack: onBack,
+    textFieldPlaceholder: "Search Token By Name"
   }, function (searchedFor) {
     var filteredTokens = filterTokens(list, searchedFor);
-    return React__default.createElement(Container$1, null, loadingStatus === 'loading' && React__default.createElement(LoaderContainer, null, React__default.createElement(Spinner, {
+    return loadingStatus === 'loading' ? React__default.createElement(LoaderContainer, null, React__default.createElement(Spinner, {
       size: 24
-    })), loadingStatus === 'failed' && React__default.createElement(LoadingFailedAlert, null), loadingStatus === 'success' && React__default.createElement(React__default.Fragment, null, filteredTokens.length ? React__default.createElement(TokenList, {
+    })) : loadingStatus === 'failed' ? React__default.createElement(LoadingFailedAlert, null) : filteredTokens.length ? React__default.createElement(TokenList, {
       searchedText: searchedFor,
       list: filteredTokens,
       selected: selected,
-      selectedList: selectedList,
-      multiSelect: multiSelect,
       onChange: onChange
     }) : React__default.createElement(NotFoundAlert, {
       catergory: "Token",
       searchedFor: searchedFor
-    })));
+    });
   });
 }
 
@@ -3330,15 +3335,13 @@ var ModalHeader = /*#__PURE__*/styled('div', {
   position: 'relative',
   marginBottom: '$16'
 });
-var ContentContainer$1 = /*#__PURE__*/styled('div', {});
 function Modal(props) {
   var title = props.title,
     content = props.content,
     open = props.open,
     onClose = props.onClose,
     containerStyle = props.containerStyle,
-    action = props.action,
-    contentStyle = props.contentStyle;
+    action = props.action;
   var handleBackDropClick = function handleBackDropClick(event) {
     if (event.target === event.currentTarget) onClose();
   };
@@ -3354,9 +3357,7 @@ function Modal(props) {
   }, title), React__default.createElement(Row, null, action, React__default.createElement(CloseIcon, {
     size: 24,
     onClick: onClose
-  }))), React__default.createElement(ContentContainer$1, {
-    style: contentStyle
-  }, content))), document.body));
+  }))), content)), document.body));
 }
 
 (function (WalletState) {
@@ -3733,7 +3734,7 @@ var SolidCircle = /*#__PURE__*/styled('div', {
     }
   }
 });
-var Container$2 = /*#__PURE__*/styled('div', {
+var Container$1 = /*#__PURE__*/styled('div', {
   border: '1.5px solid',
   borderRadius: '$5',
   padding: '$12',
@@ -3780,7 +3781,7 @@ function SelectableWalletList(_ref) {
   }, [list]);
   return React__default.createElement(Row$1, null, list.map(function (w, index) {
     var checked = active === w.walletType;
-    return React__default.createElement(Container$2, {
+    return React__default.createElement(Container$1, {
       checked: checked,
       onClick: onClick.bind(null, w),
       key: index
@@ -3833,7 +3834,7 @@ var StyledItem = /*#__PURE__*/styled(RadioGroup.Item, {
     borderColor: '$neutrals600'
   }
 });
-var Container$3 = /*#__PURE__*/styled('div', {
+var Container$2 = /*#__PURE__*/styled('div', {
   display: 'flex'
 });
 var StyledIndicator = /*#__PURE__*/styled(RadioGroup.Indicator, {
@@ -3863,7 +3864,7 @@ function Radio(props) {
     _props$direction = props.direction,
     direction = _props$direction === void 0 ? 'vertical' : _props$direction,
     style = props.style;
-  return React__default.createElement(Container$3, null, React__default.createElement(StyledRoot, {
+  return React__default.createElement(Container$2, null, React__default.createElement(StyledRoot, {
     onValueChange: onChange,
     value: value,
     direction: direction,
@@ -4068,6 +4069,7 @@ function SwapContainer(props) {
 var TokenContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
   alignItems: 'center',
+  width: '160px',
   '& .amount': {
     fontWeight: 'bold'
   }
@@ -4110,7 +4112,7 @@ function Token(props) {
   }), props.data.token.symbol);
 }
 
-var Container$4 = /*#__PURE__*/styled('div', {
+var Container$3 = /*#__PURE__*/styled('div', {
   position: 'relative',
   display: 'flex',
   justifyContent: 'space-between',
@@ -4150,7 +4152,7 @@ function SwapDetail(_ref) {
     size: "free",
     fullWidth: true,
     onClick: onClick.bind(null, swap.requestId)
-  }, React__default.createElement(Container$4, {
+  }, React__default.createElement(Container$3, {
     className: "" + status
   }, React__default.createElement("div", {
     className: "info"
@@ -4162,10 +4164,10 @@ function SwapDetail(_ref) {
       },
       blockchain: {
         // @ts-ignore
-        logo: firstStep.fromBlockchainLogo,
+        logo: firstStep.fromBlockchainLogo || '',
         name: firstStep.fromBlockchain
       },
-      amount: swap.inputAmount
+      amount: limitDecimalPlaces(swap.inputAmount)
     }
   }), React__default.createElement(Spacer, {
     size: 12
@@ -4184,7 +4186,7 @@ function SwapDetail(_ref) {
         logo: lastStep.toBlockchainLogo,
         name: lastStep.toBlockchain
       },
-      amount: lastStep.outputAmount || lastStep.expectedOutputAmountHumanReadable || ''
+      amount: limitDecimalPlaces(lastStep.outputAmount || lastStep.expectedOutputAmountHumanReadable || '')
     }
   })), React__default.createElement("div", {
     className: "status"
@@ -4194,7 +4196,7 @@ function SwapDetail(_ref) {
   }) : status)));
 }
 
-var Container$5 = /*#__PURE__*/styled('div', {
+var Container$4 = /*#__PURE__*/styled('div', {
   position: 'relative'
 });
 var Color = /*#__PURE__*/styled('div', {
@@ -4244,7 +4246,7 @@ function ColorPicker(_ref) {
   var _useState = React.useState(false),
     displayColorPicker = _useState[0],
     setDisplayColorPicker = _useState[1];
-  return React__default.createElement(Container$5, null, React__default.createElement(Label$3, {
+  return React__default.createElement(Container$4, null, React__default.createElement(Label$3, {
     className: "_text"
   }, label), React__default.createElement(Button, {
     variant: "outlined",
@@ -4383,7 +4385,7 @@ var AlertContainer = /*#__PURE__*/styled('div', {
 var ConfirmButton = /*#__PURE__*/styled(Button, {
   marginTop: '$16'
 });
-var Container$6 = /*#__PURE__*/styled('div', {
+var Container$5 = /*#__PURE__*/styled('div', {
   paddingBottom: '$24',
   '.title': {
     paddingBottom: '$8',
@@ -4453,7 +4455,7 @@ function ConfirmSwap(props) {
     var list = selectableWallets.filter(function (w) {
       return wallet === w.chain;
     });
-    return React__default.createElement(Container$6, {
+    return React__default.createElement(Container$5, {
       key: index
     }, React__default.createElement("div", {
       className: "title"
@@ -4484,7 +4486,7 @@ var Group = /*#__PURE__*/styled('div', {
     textTransform: 'uppercase'
   }
 });
-var Container$7 = /*#__PURE__*/styled('div', {
+var Container$6 = /*#__PURE__*/styled('div', {
   overflowY: 'auto'
 });
 var filteredHistory = function filteredHistory(list, searchedFor) {
@@ -4538,7 +4540,7 @@ function History(_ref) {
     title: "Swaps"
   }, function (searchedFor) {
     var filterSwaps = filteredHistory(list, searchedFor);
-    return React__default.createElement(Container$7, null, filterSwaps.length ? React__default.createElement(SwapsGroup, {
+    return React__default.createElement(Container$6, null, filterSwaps.length ? React__default.createElement(SwapsGroup, {
       list: filterSwaps,
       onSwapClick: onSwapClick,
       groupBy: groupBy
@@ -4786,14 +4788,13 @@ function SwapHistory(props) {
       logo: step.fromLogo,
       symbol: step.fromSymbol,
       // @ts-ignore
-      chainLogo: step.fromBlockchainLogo,
+      chainLogo: step.fromBlockchainLogo || '',
       blockchain: step.fromBlockchain,
       amount: pendingSwap.inputAmount
-    }), React__default.createElement(Dot$1, null)), React__default.createElement(Line$1, null), React__default.createElement(SwapperContainer$1, null, React__default.createElement(SwapperLogo$1
-    // @ts-ignore
-    , {
+    }), React__default.createElement(Dot$1, null)), React__default.createElement(Line$1, null), React__default.createElement(SwapperContainer$1, null, React__default.createElement(SwapperLogo$1, {
+      src:
       // @ts-ignore
-      src: step.swapperLogo,
+      step.swapperLogo || '',
       alt: step.swapperId
     }), React__default.createElement("div", null, React__default.createElement(Typography, {
       ml: 4,
@@ -4830,7 +4831,7 @@ function SwapHistory(props) {
       logo: step.toLogo,
       symbol: step.toSymbol,
       // @ts-ignore
-      chainLogo: step.toBlockchainLogo,
+      chainLogo: step.toBlockchainLogo || '',
       blockchain: step.toBlockchain,
       amount: step.outputAmount || ''
     }));