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

package/dist/ui.cjs.development.js

@@ -1492,6 +1492,13 @@ var TypographyContainer = /*#__PURE__*/styled('span', {
           fontSize: '$18'
         }
       },
+      title: {
+        fontSize: '$14',
+        fontWeight: '$500',
+        '@md': {
+          fontSize: '$15'
+        }
+      },
       body1: {
         fontSize: '$14',
         fontWeight: '$400',
@@ -1504,10 +1511,7 @@ var TypographyContainer = /*#__PURE__*/styled('span', {
       },
       body2: {
         fontSize: '$14',
-        fontWeight: '$400',
-        '@lg': {
-          fontSize: '$16'
-        }
+        fontWeight: '$400'
       },
       body3: {
         fontSize: '$12',
@@ -1716,13 +1720,13 @@ function StepDetail(props) {
     pl: direction === 'horizontal'
   }, amount && React__default.createElement(Typography, {
     noWrap: true,
-    variant: direction === 'vertical' ? 'body2' : 'h6'
+    variant: direction === 'vertical' ? 'body2' : 'title'
   }, amount), !amount && estimatedAmount && React__default.createElement(Typography, {
     noWrap: true,
-    variant: direction === 'vertical' ? 'body2' : 'h6',
-    color: '$neutrals500'
+    variant: direction === 'vertical' ? 'body2' : 'title',
+    color: '$neutrals600'
   }, estimatedAmount), "\xA0", React__default.createElement(Typography, {
-    variant: direction === 'vertical' ? 'body2' : 'h6',
+    variant: direction === 'vertical' ? 'body2' : 'title',
     noWrap: true
   }, symbol), React__default.createElement(SubTitle, {
     noWrap: true,
@@ -2651,6 +2655,7 @@ var InputContainer = /*#__PURE__*/styled('div', {
   position: 'relative',
   alignItems: 'center',
   color: '$foreground',
+  overflowX: 'hidden',
   transition: 'border-color ease .3s',
   '&:focus-within': {
     borderColor: '$success',
@@ -2711,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', {
@@ -2990,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',
@@ -3001,10 +3013,10 @@ function Alert(props) {
     }
   }, title && React__default.createElement(React__default.Fragment, null, React__default.createElement(Typography, {
     className: "title",
-    variant: "h6",
+    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"
@@ -3193,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) {
@@ -3259,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,
@@ -3273,7 +3285,7 @@ function BlockchainSelector(props) {
     }) : React__default.createElement(NotFoundAlert, {
       catergory: "Blockchain",
       searchedFor: searchedFor
-    })));
+    }))));
   });
 }
 
@@ -3948,13 +3960,13 @@ var SlippageChipsContainer = /*#__PURE__*/styled('div', {
 var LiquiditySourceContainer = /*#__PURE__*/styled(BaseContainer, {
   display: 'flex',
   justifyContent: 'space-between',
-  marginTop: '$32',
+  marginTop: '$16',
   cursor: 'pointer'
 });
 var InfiniteContainer = /*#__PURE__*/styled(BaseContainer, {
   display: 'flex',
   justifyContent: 'space-between',
-  marginTop: '$32'
+  marginTop: '$16'
 });
 var StyledAngleRight = /*#__PURE__*/styled(AngleRightIcon, {
   marginLeft: '$8'
@@ -3965,7 +3977,7 @@ var LiquiditySourceNumber = /*#__PURE__*/styled('div', {
   justifyContent: 'center'
 });
 var ThemesContainer = /*#__PURE__*/styled(BaseContainer, {
-  marginTop: '$32'
+  marginTop: '$16'
 });
 var Head = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -3997,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) {
@@ -4052,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
@@ -4069,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",
@@ -4087,14 +4099,14 @@ var MainContainer$2 = /*#__PURE__*/styled('div', {
   width: '100%',
   minWidth: '375px',
   maxWidth: '512px',
-  maxHeight: '595px',
   padding: '$16',
   boxSizing: 'border-box',
   backgroundColor: '$background',
   variants: {
     fixedHeight: {
       "true": {
-        height: '595px'
+        height: '595px',
+        maxHeight: '595px'
       },
       "false": {
         height: 'auto'
@@ -4120,6 +4132,9 @@ var TokenContainer = /*#__PURE__*/styled('div', {
   width: '160px',
   '& .amount': {
     fontWeight: 'bold'
+  },
+  '& .estimated': {
+    color: '$neutrals600'
   }
 });
 var TokenImage = /*#__PURE__*/styled('div', {
@@ -4140,23 +4155,30 @@ var TokenImage = /*#__PURE__*/styled('div', {
   }
 });
 function Token(props) {
+  var _props$data = props.data,
+    token = _props$data.token,
+    blockchain = _props$data.blockchain,
+    amount = _props$data.amount,
+    estimatedAmount = _props$data.estimatedAmount;
   return React__default.createElement(TokenContainer, null, React__default.createElement(TokenImage, null, React__default.createElement(Image, {
-    src: props.data.token.logo,
+    src: token.logo,
     alt: "",
     size: 24
   }), React__default.createElement("div", {
     className: "overlay"
   }, React__default.createElement(Image, {
-    src: props.data.blockchain.logo,
-    alt: props.data.blockchain.name,
+    src: blockchain.logo,
+    alt: blockchain.name,
     size: 12
   }))), React__default.createElement(Spacer, {
     size: 8
-  }), React__default.createElement("span", {
+  }), !!amount && React__default.createElement("span", {
     className: "amount"
-  }, props.data.amount), React__default.createElement(Spacer, {
+  }, props.data.amount), !amount && estimatedAmount && React__default.createElement("span", {
+    className: "amount estimated"
+  }, props.data.estimatedAmount), React__default.createElement(Spacer, {
     size: 4
-  }), props.data.token.symbol);
+  }), token.symbol);
 }
 
 var Container$3 = /*#__PURE__*/styled('div', {
@@ -4175,12 +4197,6 @@ var Container$3 = /*#__PURE__*/styled('div', {
     fontWeight: 'bold',
     fontSize: '$12'
   },
-  '&.running': {
-    color: '$foreground'
-  },
-  '&.failed,&.success': {
-    color: '$neutrals600'
-  },
   '&.failed .status': {
     color: '$error'
   },
@@ -4210,7 +4226,6 @@ function SwapDetail(_ref) {
         symbol: firstStep.fromSymbol
       },
       blockchain: {
-        // @ts-ignore
         logo: firstStep.fromBlockchainLogo || '',
         name: firstStep.fromBlockchain
       },
@@ -4229,11 +4244,11 @@ function SwapDetail(_ref) {
         symbol: lastStep.toSymbol
       },
       blockchain: {
-        // @ts-ignore
-        logo: lastStep.toBlockchainLogo,
+        logo: lastStep.toBlockchainLogo || '',
         name: lastStep.toBlockchain
       },
-      amount: limitDecimalPlaces(lastStep.outputAmount || lastStep.expectedOutputAmountHumanReadable || '')
+      amount: limitDecimalPlaces(lastStep.outputAmount || ''),
+      estimatedAmount: limitDecimalPlaces(lastStep.expectedOutputAmountHumanReadable || '')
     }
   })), React__default.createElement("div", {
     className: "status"
@@ -4407,7 +4422,7 @@ function Drawer(props) {
     anchor: anchor,
     style: containerStyle
   }, React__default.createElement(DrawerHeader, null, React__default.createElement(Typography, {
-    variant: "h4"
+    variant: "h6"
   }, title), showClose && React__default.createElement(CloseIcon, {
     size: 24,
     onClick: onClose
@@ -4484,17 +4499,25 @@ function ConfirmSwap(props) {
   }, React__default.createElement(MainContainer$3, null, React__default.createElement("div", null, extraMessages || null, React__default.createElement(Alerts, null, errors == null ? void 0 : errors.map(function (error, index) {
     return React__default.createElement(React__default.Fragment, null, React__default.createElement(Spacer, {
       direction: "vertical"
-    }), React__default.createElement(Alert, {
+    }), React__default.createElement(Alert, Object.assign({
       type: "error",
       key: index
-    }, error));
+    }, typeof error === 'string' ? {
+      title: error
+    } : {
+      children: error
+    })));
   }), warnings == null ? void 0 : warnings.map(function (warning, index) {
     return React__default.createElement(React__default.Fragment, null, React__default.createElement(Spacer, {
       direction: "vertical"
-    }), React__default.createElement(Alert, {
+    }), React__default.createElement(Alert, Object.assign({
       type: "warning",
       key: index
-    }, warning));
+    }, typeof warning === 'string' ? {
+      title: warning
+    } : {
+      children: warning
+    })));
   }))), props.previewInputs || props.previewRoutes ? React__default.createElement(Section, null, props.previewInputs, !!props.previewRoutes ? React__default.createElement(Spacer, {
     size: 16,
     direction: "vertical"
@@ -4514,7 +4537,7 @@ function ConfirmSwap(props) {
       variant: "body2"
     }, "Your ", wallet, " Wallet")), list.length === 0 && React__default.createElement(React__default.Fragment, null, React__default.createElement(AlertContainer, null, React__default.createElement(Alert, {
       type: "error"
-    }, "You need to connect a compatible wallet with ", wallet)), (isExperimentalChain == null ? void 0 : isExperimentalChain(wallet)) && React__default.createElement(Button, {
+    }, "You need to connect a compatible wallet with ", wallet, ".")), (isExperimentalChain == null ? void 0 : isExperimentalChain(wallet)) && React__default.createElement(Button, {
       variant: "contained",
       type: "primary",
       align: "grow",
@@ -4533,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;
@@ -4573,27 +4586,41 @@ 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,
-    textFieldPlaceholder: "Search by Blockchain/Token/Request Id",
+    textFieldPlaceholder: "Search by Network, Token or Request ID",
     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"
-    }));
+    }))));
   });
 }
 
@@ -4674,7 +4701,8 @@ var SwapperContainer$1 = /*#__PURE__*/styled('div', {
   }
 });
 var FeeContainer = /*#__PURE__*/styled('div', {
-  paddingLeft: '$4'
+  paddingLeft: '$16',
+  color: '$neutrals800'
 });
 var Fee = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -4700,8 +4728,7 @@ var ArrowDown = /*#__PURE__*/styled('div', {
 });
 var StyledAnchor = /*#__PURE__*/styled('a', {
   color: '$primary',
-  fontWeight: '$600',
-  marginLeft: '$12'
+  fontWeight: '$600'
 });
 var SwapInfoContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -4710,11 +4737,14 @@ var SwapInfoContainer = /*#__PURE__*/styled('div', {
   borderBottom: '1px solid $neutrals300'
 });
 var InternalDetailsContainer = /*#__PURE__*/styled('div', {
-  display: 'flex'
+  display: 'flex',
+  '.details': {
+    padding: '$8 0'
+  }
 });
 var InternalDetail = /*#__PURE__*/styled('div', {
   display: 'flex',
-  padding: '$10'
+  margin: '$12 0 $12 $20'
 });
 var DescriptionContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -4722,7 +4752,7 @@ var DescriptionContainer = /*#__PURE__*/styled('div', {
 });
 var Description = /*#__PURE__*/styled(Typography, {
   color: '$success',
-  marginLeft: '$8'
+  paddingLeft: '$4'
 });
 var Line$1 = /*#__PURE__*/styled('div', {
   width: '0',
@@ -4743,7 +4773,8 @@ var Row$2 = /*#__PURE__*/styled('div', {
   '.value': {
     display: 'flex',
     alignItems: 'center',
-    color: '$neutrals800'
+    color: '$neutrals800',
+    justifyContent: 'flex-end'
   },
   '.status': {
     fontWeight: 'bold',
@@ -4766,13 +4797,13 @@ var RequestId = /*#__PURE__*/styled('div', {
   }
 });
 var ExtraDetails = /*#__PURE__*/styled('div', {
-  padding: '$8 0',
+  padding: '0',
   color: '$neutrals600',
-  fontSize: '$12'
+  fontSize: '$10'
 });
 var SwapFlowContainer = /*#__PURE__*/styled('div', {
   overflowY: 'auto',
-  paddingTop: '$8'
+  padding: '$8 $4 $2 $4'
 });
 function SwapHistory(props) {
   var pendingSwap = props.pendingSwap,
@@ -4803,7 +4834,7 @@ function SwapHistory(props) {
     }, "Try again"))
   }, React__default.createElement("div", null, React__default.createElement(SwapInfoContainer, null, React__default.createElement(Row$2, null, React__default.createElement("div", {
     className: "name"
-  }, "Request ID:"), React__default.createElement("div", {
+  }, "Request Id:", React__default.createElement("span", {
     className: "value requestId",
     onClick: onCopy.bind(null, pendingSwap == null ? void 0 : pendingSwap.requestId)
   }, React__default.createElement(RequestId, null, pendingSwap == null ? void 0 : pendingSwap.requestId), React__default.createElement(Spacer, {
@@ -4812,15 +4843,15 @@ function SwapHistory(props) {
     type: "primary",
     variant: "ghost",
     size: "compact"
-  }, isCopied ? 'Copied!' : 'Copy'))), React__default.createElement(Row$2, null, React__default.createElement("div", {
+  }, isCopied ? 'Copied!' : 'Copy'))), React__default.createElement("div", {
     className: "name"
-  }, "Status:"), React__default.createElement("div", {
+  }, React__default.createElement("span", {
     className: "value status " + ((pendingSwap == null ? void 0 : pendingSwap.status) || '')
   }, pendingSwap == null ? void 0 : pendingSwap.status, (pendingSwap == null ? void 0 : pendingSwap.status) === 'running' && React__default.createElement(Spinner, {
     size: 16,
     color: "primary"
-  }))), React__default.createElement(ExtraDetails, null, date))), React__default.createElement(SwapFlowContainer, null, extraMessageProps.shortMessage && React__default.createElement(SwapMessages, Object.assign({}, extraMessageProps)), React__default.createElement(Divider, {
-    size: 32
+  })), React__default.createElement(ExtraDetails, null, date))))), React__default.createElement(SwapFlowContainer, null, extraMessageProps.shortMessage && React__default.createElement(SwapMessages, Object.assign({}, extraMessageProps)), React__default.createElement(Divider, {
+    size: 16
   }), pendingSwap == null ? void 0 : pendingSwap.steps.map(function (step, index) {
     return React__default.createElement("div", {
       key: index
@@ -4838,26 +4869,30 @@ function SwapHistory(props) {
       alt: step.swapperId,
       size: 20
     }), React__default.createElement(FeeContainer, null, React__default.createElement(Typography, {
-      variant: "caption"
-    }, step.swapperType, " from ", step.fromSymbol, " to ", step.toSymbol, "\xA0 via ", step.swapperId), React__default.createElement(Fee, null, React__default.createElement(GasIcon, 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: "body2"
     }, "\xA0 $", step.feeInUsd, " estimated gas fee")))), React__default.createElement("div", {
       style: {
         display: 'flex'
       }
-    }, React__default.createElement(InternalDetailsContainer, null, React__default.createElement(Line$1, null), React__default.createElement("div", null, !!step.explorerUrl && React__default.createElement("div", null, step.explorerUrl.map(function (item, index) {
+    }, React__default.createElement(InternalDetailsContainer, null, React__default.createElement(Line$1, null), React__default.createElement("div", {
+      className: "details"
+    }, !!step.explorerUrl && React__default.createElement("div", null, step.explorerUrl.map(function (item, index) {
       return React__default.createElement(InternalDetail, {
         key: index
-      }, React__default.createElement(DescriptionContainer, null, React__default.createElement(CheckCircleIcon, {
-        color: "success"
+      }, React__default.createElement(DescriptionContainer, null, React__default.createElement(Divider, {
+        size: 4
+      }), React__default.createElement(CheckCircleIcon, {
+        color: "primary"
       }), React__default.createElement(Description, {
         variant: "body2"
-      }, !item.description ? React__default.createElement("b", null, "View transaction") : React__default.createElement("b", null, item.description.substring(0, 1).toUpperCase(), item.description.substring(1)))), React__default.createElement(StyledAnchor, {
+      }, React__default.createElement(StyledAnchor, {
         href: item.url,
         target: "_blank",
         rel: "noreferrer",
         key: index
-      }, "TX-Link"));
+      }, !item.description ? React__default.createElement("b", null, "View transaction") : React__default.createElement("b", null, item.description.substring(0, 1).toUpperCase(), item.description.substring(1), " Tx")))));
     })), step.status === 'failed' && React__default.createElement(InternalDetail, null, React__default.createElement(DescriptionContainer, null, React__default.createElement(InfoCircleIcon, {
       color: "error"
     }), React__default.createElement(Description, {
@@ -4882,10 +4917,9 @@ function SwapHistory(props) {
     title: "Cancel Progress",
     content: React__default.createElement(Alert, {
       type: "warning"
-    }, React__default.createElement("p", null, "Warning: Rango ", React__default.createElement("u", null, "neither reverts"), " your transaction\xA0", React__default.createElement("u", null, "nor refunds"), " you if you've already signed and sent a transaction to the blockchain since it's out of Rango's control. Beware that \"Cancel\" only stops next steps from being executed."), React__default.createElement(Spacer, {
-      size: 12,
-      direction: "vertical"
-    }), React__default.createElement("p", null, "If you have already signed your transaction to blockchain, you should wait for that to complete or rollback")),
+    }, React__default.createElement(Typography, {
+      variant: "body2"
+    }, "Warning: Cancel ", React__default.createElement("u", null, "doesn't revert"), " your transaction if you've already signed and sent a transaction to the blockchain. It only stops next steps from being executed.")),
     footer: React__default.createElement("div", {
       style: {
         display: 'flex',
@@ -4972,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;