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

package/dist/ui.esm.js

@@ -1485,6 +1485,13 @@ var TypographyContainer = /*#__PURE__*/styled('span', {
           fontSize: '$18'
         }
       },
+      title: {
+        fontSize: '$14',
+        fontWeight: '$500',
+        '@md': {
+          fontSize: '$15'
+        }
+      },
       body1: {
         fontSize: '$14',
         fontWeight: '$400',
@@ -1709,13 +1716,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,
@@ -2644,6 +2651,7 @@ var InputContainer = /*#__PURE__*/styled('div', {
   position: 'relative',
   alignItems: 'center',
   color: '$foreground',
+  overflowX: 'hidden',
   transition: 'border-color ease .3s',
   '&:focus-within': {
     borderColor: '$success',
@@ -2994,7 +3002,7 @@ 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,
@@ -3225,7 +3233,8 @@ function TokenSelector(props) {
 }
 
 var ListContainer$1 = /*#__PURE__*/styled('div', {
-  overflowY: 'auto'
+  overflowY: 'auto',
+  padding: '0 $4'
 });
 var filterBlockchains = function filterBlockchains(list, searchedFor) {
   return list.filter(function (blockchain) {
@@ -3568,7 +3577,8 @@ var MainContainer$1 = /*#__PURE__*/styled('div', {
   variants: {
     loaded: {
       "true": {
-        overflowY: 'auto'
+        overflowY: 'auto',
+        padding: '0 $4'
       }
     }
   }
@@ -3940,13 +3950,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'
@@ -3957,7 +3967,7 @@ var LiquiditySourceNumber = /*#__PURE__*/styled('div', {
   justifyContent: 'center'
 });
 var ThemesContainer = /*#__PURE__*/styled(BaseContainer, {
-  marginTop: '$32'
+  marginTop: '$16'
 });
 var Head = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -4079,14 +4089,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'
@@ -4112,6 +4122,9 @@ var TokenContainer = /*#__PURE__*/styled('div', {
   width: '160px',
   '& .amount': {
     fontWeight: 'bold'
+  },
+  '& .estimated': {
+    color: '$neutrals600'
   }
 });
 var TokenImage = /*#__PURE__*/styled('div', {
@@ -4132,23 +4145,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', {
@@ -4167,12 +4187,6 @@ var Container$3 = /*#__PURE__*/styled('div', {
     fontWeight: 'bold',
     fontSize: '$12'
   },
-  '&.running': {
-    color: '$foreground'
-  },
-  '&.failed,&.success': {
-    color: '$neutrals600'
-  },
   '&.failed .status': {
     color: '$error'
   },
@@ -4202,7 +4216,6 @@ function SwapDetail(_ref) {
         symbol: firstStep.fromSymbol
       },
       blockchain: {
-        // @ts-ignore
         logo: firstStep.fromBlockchainLogo || '',
         name: firstStep.fromBlockchain
       },
@@ -4221,11 +4234,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"
@@ -4399,7 +4412,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
@@ -4476,17 +4489,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"
@@ -4506,7 +4527,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",
@@ -4550,7 +4571,6 @@ 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, {
@@ -4575,7 +4595,7 @@ function History(_ref) {
   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);
@@ -4629,21 +4649,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: "body2"
+    variant: "body3"
   }, 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: "body2"
+    variant: "body3"
   }, "Don't worry, your fund is\xA0"), React__default.createElement(SuccessText, {
-    variant: "body2"
+    variant: "body3"
   }, React__default.createElement("b", null, "Safe"))), React__default.createElement("p", null, React__default.createElement(Typography, {
-    variant: "body2"
+    variant: "body3"
   }, "It is converted to \xA0", React__default.createElement("u", null, lastConvertedTokenInFailedSwap.outputAmount), "\xA0"), React__default.createElement(SuccessText, {
-    variant: "body2"
+    variant: "body3"
   }, React__default.createElement("b", null, lastConvertedTokenInFailedSwap.symbol, "\xA0")), React__default.createElement(Typography, {
-    variant: "body2"
+    variant: "body3"
   }, "on your\xA0"), React__default.createElement(SuccessText, {
-    variant: "body2"
+    variant: "body3"
   }, React__default.createElement("b", null, lastConvertedTokenInFailedSwap.blockchain, "\xA0")), React__default.createElement(Typography, {
-    variant: "body2"
+    variant: "body3"
   }, "wallet"))));
 };
 
@@ -4666,7 +4686,7 @@ var SwapperContainer$1 = /*#__PURE__*/styled('div', {
   }
 });
 var FeeContainer = /*#__PURE__*/styled('div', {
-  paddingLeft: '$4'
+  paddingLeft: '$16'
 });
 var Fee = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -4692,8 +4712,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',
@@ -4702,11 +4721,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',
@@ -4714,7 +4736,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',
@@ -4735,7 +4757,8 @@ var Row$2 = /*#__PURE__*/styled('div', {
   '.value': {
     display: 'flex',
     alignItems: 'center',
-    color: '$neutrals800'
+    color: '$neutrals800',
+    justifyContent: 'flex-end'
   },
   '.status': {
     fontWeight: 'bold',
@@ -4749,7 +4772,6 @@ var Row$2 = /*#__PURE__*/styled('div', {
   }
 });
 var RequestId = /*#__PURE__*/styled('div', {
-  width: '150px',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -4758,13 +4780,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,
@@ -4795,7 +4817,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, {
@@ -4804,15 +4826,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
@@ -4831,29 +4853,33 @@ function SwapHistory(props) {
       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, {
+    }, step.swapperType === 'DEX' ? 'Swap' : 'Bridge', " via", ' ', step.swapperId), React__default.createElement(Fee, null, React__default.createElement(GasIcon, null), React__default.createElement(Typography, {
       variant: "caption"
     }, "\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, {
+        variant: "body3"
+      }, 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, {
-      variant: "body2",
+      variant: "body3",
       color: "$error500"
     }, "Step failed")))))), index + 1 === pendingSwap.steps.length && React__default.createElement(ArrowDown, null), React__default.createElement(StepDetail, {
       logo: step.toLogo,
@@ -4874,10 +4900,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',