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

package/dist/containers/History/History.d.ts

@@ -1,13 +1,6 @@
 import { PropsWithChildren } from 'react';
-import { PendingSwap } from './types';
-export declare type GroupBy = (list: PendingSwap[]) => {
-    title: string;
-    swaps: PendingSwap[];
-}[];
-export interface PropTypes {
-    list: PendingSwap[];
-    onBack: () => void;
-    onSwapClick: (requestId: string) => void;
-    groupBy?: GroupBy;
-}
-export declare function History({ list, onBack, onSwapClick, groupBy, }: PropsWithChildren<PropTypes>): JSX.Element;
+import { PropTypes as SwapsGroupPropTypes } from './SwapsGroup';
+export declare type PropTypes = SwapsGroupPropTypes & {
+    loading: boolean;
+};
+export declare function History(props: PropsWithChildren<PropTypes>): JSX.Element;

package/dist/containers/History/SwapsGroup.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+export declare type GroupBy = (list: PendingSwap[]) => {
+    title: string;
+    swaps: PendingSwap[];
+}[];
+export interface PropTypes {
+    list: PendingSwap[];
+    onBack: () => void;
+    onSwapClick: (requestId: string) => void;
+    groupBy?: GroupBy;
+}
+export declare function SwapsGroup(props: Omit<PropTypes, 'onBack'>): JSX.Element;

package/dist/containers/History/index.d.ts

@@ -1 +1,2 @@
-export { History, GroupBy } from './History';
+export { History } from './History';
+export { SwapsGroup, GroupBy } from './SwapsGroup';

package/dist/ui.cjs.development.js

@@ -1511,10 +1511,7 @@ var TypographyContainer = /*#__PURE__*/styled('span', {
       },
       body2: {
         fontSize: '$14',
-        fontWeight: '$400',
-        '@lg': {
-          fontSize: '$16'
-        }
+        fontWeight: '$400'
       },
       body3: {
         fontSize: '$12',
@@ -2719,6 +2716,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', {
@@ -2998,7 +3002,7 @@ function Alert(props) {
     color: type,
     size: 24
   }), React__default.createElement(Spacer, {
-    size: 8
+    size: 4
   }))), React__default.createElement("div", {
     style: {
       display: 'flex',
@@ -3012,7 +3016,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"
@@ -3201,7 +3205,7 @@ var LoaderContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
   justifyContent: 'center',
   width: '100%',
-  paddingTop: '5%',
+  paddingTop: '33%',
   flex: 1
 });
 var filterTokens = function filterTokens(list, searchedFor) {
@@ -3267,12 +3271,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,
@@ -3281,7 +3285,7 @@ function BlockchainSelector(props) {
     }) : React__default.createElement(NotFoundAlert, {
       catergory: "Blockchain",
       searchedFor: searchedFor
-    })));
+    }))));
   });
 }
 
@@ -4005,8 +4009,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) {
@@ -4060,7 +4064,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
@@ -4077,7 +4081,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",
@@ -4552,17 +4556,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;
@@ -4577,6 +4571,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, {
@@ -4591,13 +4586,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,
@@ -4605,13 +4612,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"
-    }));
+    }))));
   });
 }
 
@@ -4655,21 +4664,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"))));
 };
 
@@ -4692,7 +4701,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',
@@ -4778,6 +4788,7 @@ var Row$2 = /*#__PURE__*/styled('div', {
   }
 });
 var RequestId = /*#__PURE__*/styled('div', {
+  width: '150px',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -4858,9 +4869,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'
@@ -4875,7 +4886,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",
@@ -4885,7 +4896,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,
@@ -4995,6 +5006,7 @@ exports.SwapContainer = SwapContainer;
 exports.SwapDetail = SwapDetail;
 exports.SwapHistory = SwapHistory;
 exports.SwapWalletIcon = SwapWalletIcon;
+exports.SwapsGroup = SwapsGroup;
 exports.Switch = Switch;
 exports.TextField = TextField;
 exports.TimeIcon = TimeIcon;