@rango-dev/ui 0.1.11-next.8 → 0.1.11

package/dist/ui.esm.js

@@ -1504,10 +1504,7 @@ var TypographyContainer = /*#__PURE__*/styled('span', {
       },
       body2: {
         fontSize: '$14',
-        fontWeight: '$400',
-        '@lg': {
-          fontSize: '$16'
-        }
+        fontWeight: '$400'
       },
       body3: {
         fontSize: '$12',
@@ -2712,6 +2709,13 @@ var Input = /*#__PURE__*/styled('input', {
   margin: 0,
   '&:disabled': {
     cursor: 'not-allowed'
+  },
+  '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+    '-webkit-appearance': 'none',
+    margin: 0
+  },
+  '&[type="number"]': {
+    '-moz-appearance': 'textfield'
   }
 });
 var Label = /*#__PURE__*/styled('label', {
@@ -2991,7 +2995,7 @@ function Alert(props) {
     color: type,
     size: 24
   }), React__default.createElement(Spacer, {
-    size: 8
+    size: 4
   }))), React__default.createElement("div", {
     style: {
       display: 'flex',
@@ -3005,7 +3009,7 @@ function Alert(props) {
     variant: "title",
     color: type
   }, title), !!children && React__default.createElement(Spacer, {
-    size: 8,
+    size: 4,
     direction: "vertical"
   })), children)), props.footer ? React__default.createElement("div", {
     className: "footer"
@@ -3194,7 +3198,7 @@ var LoaderContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
   justifyContent: 'center',
   width: '100%',
-  paddingTop: '5%',
+  paddingTop: '33%',
   flex: 1
 });
 var filterTokens = function filterTokens(list, searchedFor) {
@@ -3260,12 +3264,12 @@ function BlockchainSelector(props) {
     onBack: onBack
   }, function (searchedFor) {
     var filteredBlockchains = filterBlockchains(list, searchedFor);
-    return React__default.createElement(ListContainer$1, {
+    return React__default.createElement(React__default.Fragment, null, loadingStatus === 'loading' && React__default.createElement(LoaderContainer, null, React__default.createElement(Spinner, {
+      size: 24
+    })), React__default.createElement(ListContainer$1, {
       style: listContainerStyle,
       key: "1"
-    }, 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, filteredBlockchains.length ? React__default.createElement(BlockchainsList, {
+    }, loadingStatus === 'failed' && React__default.createElement(LoadingFailedAlert, null), loadingStatus === 'success' && React__default.createElement(React__default.Fragment, null, filteredBlockchains.length ? React__default.createElement(BlockchainsList, {
       list: filteredBlockchains,
       selected: selected,
       multiSelect: multiSelect,
@@ -3274,7 +3278,7 @@ function BlockchainSelector(props) {
     }) : React__default.createElement(NotFoundAlert, {
       catergory: "Blockchain",
       searchedFor: searchedFor
-    })));
+    }))));
   });
 }
 
@@ -3999,8 +4003,8 @@ function Settings(props) {
     onSlippageChange(slippage);
   };
   var PageContent = React__default.createElement(React__default.Fragment, null, React__default.createElement(BaseContainer, null, React__default.createElement(Head, null, React__default.createElement(Typography, {
-    variant: "body1"
-  }, "Slippage tolerance per swap"), customSlippage ? React__default.createElement(Typography, {
+    variant: "body2"
+  }, "Slippage tolerance"), customSlippage ? React__default.createElement(Typography, {
     variant: "caption",
     color: "error"
   }, customSlippage, "% Custom") : undefined), React__default.createElement(SlippageChipsContainer, null, slippages.map(function (slippage, index) {
@@ -4054,7 +4058,7 @@ function Settings(props) {
       marginTop: '$24'
     }
   })), React__default.createElement(InfiniteContainer, null, React__default.createElement(Typography, {
-    variant: "body1"
+    variant: "body2"
   }, "Infinite Approval"), React__default.createElement(Switch, {
     checked: infiniteApprove,
     onChange: toggleInfiniteApprove
@@ -4071,7 +4075,7 @@ function Settings(props) {
       color: "$error500"
     }, "Loading failed"), React__default.createElement(StyledAngleRight, null))
   }, React__default.createElement(Typography, {
-    variant: "body1"
+    variant: "body2"
   }, "Liquidity Sources"))));
   return React__default.createElement(SecondaryPage, {
     title: "Settings",
@@ -4546,17 +4550,7 @@ var Group = /*#__PURE__*/styled('div', {
     textTransform: 'uppercase'
   }
 });
-var Container$6 = /*#__PURE__*/styled('div', {
-  overflowY: 'auto'
-});
-var filteredHistory = function filteredHistory(list, searchedFor) {
-  return list.filter(function (swap) {
-    var firstStep = swap.steps[0];
-    var lastStep = swap.steps[swap.steps.length - 1];
-    return containsText(firstStep.fromBlockchain, searchedFor) || containsText(firstStep.fromSymbol, searchedFor) || containsText(lastStep.toBlockchain, searchedFor) || containsText(lastStep.toSymbol, searchedFor) || containsText(swap.requestId, searchedFor);
-  });
-};
-var SwapsGroup = function SwapsGroup(props) {
+function SwapsGroup(props) {
   var list = props.list,
     onSwapClick = props.onSwapClick,
     groupBy = props.groupBy;
@@ -4571,6 +4565,7 @@ var SwapsGroup = function SwapsGroup(props) {
       key: index
     }, React__default.createElement(Typography, {
       variant: "body2",
+      color: "neutrals600",
       className: "group-title"
     }, group.title), group.swaps.map(function (swap, index) {
       return React__default.createElement(React__default.Fragment, null, React__default.createElement(SwapDetail, {
@@ -4585,13 +4580,25 @@ var SwapsGroup = function SwapsGroup(props) {
       size: 24
     }));
   }));
+}
+
+var Container$6 = /*#__PURE__*/styled('div', {
+  overflowY: 'auto'
+});
+var filteredHistory = function filteredHistory(list, searchedFor) {
+  return list.filter(function (swap) {
+    var firstStep = swap.steps[0];
+    var lastStep = swap.steps[swap.steps.length - 1];
+    return containsText(firstStep.fromBlockchain, searchedFor) || containsText(firstStep.fromSymbol, searchedFor) || containsText(lastStep.toBlockchain, searchedFor) || containsText(lastStep.toSymbol, searchedFor) || containsText(swap.requestId, searchedFor);
+  });
 };
-function History(_ref) {
-  var _ref$list = _ref.list,
-    list = _ref$list === void 0 ? [] : _ref$list,
-    onBack = _ref.onBack,
-    onSwapClick = _ref.onSwapClick,
-    groupBy = _ref.groupBy;
+function History(props) {
+  var _props$list = props.list,
+    list = _props$list === void 0 ? [] : _props$list,
+    onBack = props.onBack,
+    onSwapClick = props.onSwapClick,
+    groupBy = props.groupBy,
+    loading = props.loading;
   return React__default.createElement(SecondaryPage, {
     onBack: onBack,
     textField: true,
@@ -4599,13 +4606,15 @@ function History(_ref) {
     title: "Swaps"
   }, function (searchedFor) {
     var filterSwaps = filteredHistory(list, searchedFor);
-    return React__default.createElement(Container$6, null, filterSwaps.length ? React__default.createElement(SwapsGroup, {
+    return React__default.createElement(React__default.Fragment, null, loading && React__default.createElement(LoaderContainer, null, React__default.createElement(Spinner, {
+      size: 24
+    })), React__default.createElement(Container$6, null, !loading && React__default.createElement(React__default.Fragment, null, filterSwaps.length ? React__default.createElement(SwapsGroup, {
       list: filterSwaps,
       onSwapClick: onSwapClick,
       groupBy: groupBy
     }) : React__default.createElement(NotFoundAlert, {
       catergory: "Swap"
-    }));
+    }))));
   });
 }
 
@@ -4649,21 +4658,21 @@ var SwapMessages = function SwapMessages(props) {
       onClick: props.switchNetwork
     }, "Change network to ", currentStepBlockchain)
   }), !!detailedMessage.content ? React__default.createElement(DetailedMessage, null, React__default.createElement(Typography, {
-    variant: "body3"
+    variant: "body2"
   }, shouldShowMoreDetailsButton && !expandedMessage ? detailedMessage.content.substring(0, allowedNumberOfChars) + (allowedNumberOfChars > 0 ? '...' : '') : detailedMessage.content)) : null, !!lastConvertedTokenInFailedSwap && React__default.createElement(React__default.Fragment, null, React__default.createElement("p", null, React__default.createElement(Typography, {
-    variant: "body3"
+    variant: "body2"
   }, "Don't worry, your fund is\xA0"), React__default.createElement(SuccessText, {
-    variant: "body3"
+    variant: "body2"
   }, React__default.createElement("b", null, "Safe"))), React__default.createElement("p", null, React__default.createElement(Typography, {
-    variant: "body3"
+    variant: "body2"
   }, "It is converted to \xA0", React__default.createElement("u", null, lastConvertedTokenInFailedSwap.outputAmount), "\xA0"), React__default.createElement(SuccessText, {
-    variant: "body3"
+    variant: "body2"
   }, React__default.createElement("b", null, lastConvertedTokenInFailedSwap.symbol, "\xA0")), React__default.createElement(Typography, {
-    variant: "body3"
+    variant: "body2"
   }, "on your\xA0"), React__default.createElement(SuccessText, {
-    variant: "body3"
+    variant: "body2"
   }, React__default.createElement("b", null, lastConvertedTokenInFailedSwap.blockchain, "\xA0")), React__default.createElement(Typography, {
-    variant: "body3"
+    variant: "body2"
   }, "wallet"))));
 };
 
@@ -4686,7 +4695,8 @@ var SwapperContainer$1 = /*#__PURE__*/styled('div', {
   }
 });
 var FeeContainer = /*#__PURE__*/styled('div', {
-  paddingLeft: '$16'
+  paddingLeft: '$16',
+  color: '$neutrals800'
 });
 var Fee = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -4772,6 +4782,7 @@ var Row$2 = /*#__PURE__*/styled('div', {
   }
 });
 var RequestId = /*#__PURE__*/styled('div', {
+  width: '150px',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -4852,9 +4863,9 @@ function SwapHistory(props) {
       alt: step.swapperId,
       size: 20
     }), React__default.createElement(FeeContainer, null, React__default.createElement(Typography, {
-      variant: "caption"
+      variant: "body2"
     }, step.swapperType === 'DEX' ? 'Swap' : 'Bridge', " via", ' ', step.swapperId), React__default.createElement(Fee, null, React__default.createElement(GasIcon, null), React__default.createElement(Typography, {
-      variant: "caption"
+      variant: "body2"
     }, "\xA0 $", step.feeInUsd, " estimated gas fee")))), React__default.createElement("div", {
       style: {
         display: 'flex'
@@ -4869,7 +4880,7 @@ function SwapHistory(props) {
       }), React__default.createElement(CheckCircleIcon, {
         color: "primary"
       }), React__default.createElement(Description, {
-        variant: "body3"
+        variant: "body2"
       }, React__default.createElement(StyledAnchor, {
         href: item.url,
         target: "_blank",
@@ -4879,7 +4890,7 @@ function SwapHistory(props) {
     })), step.status === 'failed' && React__default.createElement(InternalDetail, null, React__default.createElement(DescriptionContainer, null, React__default.createElement(InfoCircleIcon, {
       color: "error"
     }), React__default.createElement(Description, {
-      variant: "body3",
+      variant: "body2",
       color: "$error500"
     }, "Step failed")))))), index + 1 === pendingSwap.steps.length && React__default.createElement(ArrowDown, null), React__default.createElement(StepDetail, {
       logo: step.toLogo,
@@ -4927,5 +4938,5 @@ function SwapHistory(props) {
   }));
 }
 
-export { AddCircleIcon, AddIcon, AddWalletIcon, Alert, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, ArrowRightIcon, BagIcon, BanIcon, BestRoute, BlockchainSelector, Button, CheckCircleIcon, CheckIcon, CheckSquareIcon, CheckWalletIcon, Checkbox, ChevronRightIcon, Chip, CloseIcon, ColorPicker, ConfirmSwap, ConnectWalletsModal, CopyIcon, DeleteCircleIcon, DeleteWalletIcon, DisconnectIcon, Divider, DownloadIcon, Drawer, FilledCircle, GasIcon, Header, History, HistoryIcon, HorizontalSwapIcon, Image, InfoCircleIcon, LiquiditySourcesSelector, LoadingFailedAlert, MinusCircleIcon, Modal, Radio, RetryIcon, RetryLeftIcon, RetryRightIcon, SearchIcon, SearchMinusIcon, SecondaryPage, SelectableWalletList, Settings, SettingsIcon, SignatureIcon, Spacer, Spinner, StepDetail, SwapContainer, SwapDetail, SwapHistory, SwapWalletIcon, Switch, TextField, TimeIcon, TokenList, TokenSelector, Tooltip, TrashIcon, TryAgainIcon, Typography, VerticalSwapIcon, Wallet, WalletIcon, WalletState, WarningIcon, createTheme, css, darkTheme, globalCss, keyframes, lightTheme, styled };
+export { AddCircleIcon, AddIcon, AddWalletIcon, Alert, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, ArrowRightIcon, BagIcon, BanIcon, BestRoute, BlockchainSelector, Button, CheckCircleIcon, CheckIcon, CheckSquareIcon, CheckWalletIcon, Checkbox, ChevronRightIcon, Chip, CloseIcon, ColorPicker, ConfirmSwap, ConnectWalletsModal, CopyIcon, DeleteCircleIcon, DeleteWalletIcon, DisconnectIcon, Divider, DownloadIcon, Drawer, FilledCircle, GasIcon, Header, History, HistoryIcon, HorizontalSwapIcon, Image, InfoCircleIcon, LiquiditySourcesSelector, LoadingFailedAlert, MinusCircleIcon, Modal, Radio, RetryIcon, RetryLeftIcon, RetryRightIcon, SearchIcon, SearchMinusIcon, SecondaryPage, SelectableWalletList, Settings, SettingsIcon, SignatureIcon, Spacer, Spinner, StepDetail, SwapContainer, SwapDetail, SwapHistory, SwapWalletIcon, SwapsGroup, Switch, TextField, TimeIcon, TokenList, TokenSelector, Tooltip, TrashIcon, TryAgainIcon, Typography, VerticalSwapIcon, Wallet, WalletIcon, WalletState, WarningIcon, createTheme, css, darkTheme, globalCss, keyframes, lightTheme, styled };
 //# sourceMappingURL=ui.esm.js.map