@rango-dev/ui 0.1.10-next.83 → 0.1.10-next.86

package/dist/ui.esm.js

@@ -1276,7 +1276,38 @@ SignatureIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$z = ["children"];
+var _excluded$z = ["size", "color"];
+var CopyIcon = function CopyIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+  return createElement(SvgWithFillColor, Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 64 64",
+    color: color,
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "_icon"
+  }, props), createElement("g", {
+    id: "Text-files"
+  }, createElement("path", {
+    d: "M53.9791489,9.1429005H50.010849c-0.0826988,0-0.1562004,0.0283995-0.2331009,0.0469999V5.0228\n\t\tC49.7777481,2.253,47.4731483,0,44.6398468,0h-34.422596C7.3839517,0,5.0793519,2.253,5.0793519,5.0228v46.8432999\n\t\tc0,2.7697983,2.3045998,5.0228004,5.1378999,5.0228004h6.0367002v2.2678986C16.253952,61.8274002,18.4702511,64,21.1954517,64\n\t\th32.783699c2.7252007,0,4.9414978-2.1725998,4.9414978-4.8432007V13.9861002\n\t\tC58.9206467,11.3155003,56.7043495,9.1429005,53.9791489,9.1429005z M7.1110516,51.8661003V5.0228\n\t\tc0-1.6487999,1.3938999-2.9909999,3.1062002-2.9909999h34.422596c1.7123032,0,3.1062012,1.3422,3.1062012,2.9909999v46.8432999\n\t\tc0,1.6487999-1.393898,2.9911003-3.1062012,2.9911003h-34.422596C8.5049515,54.8572006,7.1110516,53.5149002,7.1110516,51.8661003z\n\t\t M56.8888474,59.1567993c0,1.550602-1.3055,2.8115005-2.9096985,2.8115005h-32.783699\n\t\tc-1.6042004,0-2.9097996-1.2608986-2.9097996-2.8115005v-2.2678986h26.3541946\n\t\tc2.8333015,0,5.1379013-2.2530022,5.1379013-5.0228004V11.1275997c0.0769005,0.0186005,0.1504021,0.0469999,0.2331009,0.0469999\n\t\th3.9682999c1.6041985,0,2.9096985,1.2609005,2.9096985,2.8115005V59.1567993z"
+  }), createElement("path", {
+    d: "M38.6031494,13.2063999H16.253952c-0.5615005,0-1.0159006,0.4542999-1.0159006,1.0158005\n\t\tc0,0.5615997,0.4544001,1.0158997,1.0159006,1.0158997h22.3491974c0.5615005,0,1.0158997-0.4542999,1.0158997-1.0158997\n\t\tC39.6190491,13.6606998,39.16465,13.2063999,38.6031494,13.2063999z"
+  }), createElement("path", {
+    d: "M38.6031494,21.3334007H16.253952c-0.5615005,0-1.0159006,0.4542999-1.0159006,1.0157986\n\t\tc0,0.5615005,0.4544001,1.0159016,1.0159006,1.0159016h22.3491974c0.5615005,0,1.0158997-0.454401,1.0158997-1.0159016\n\t\tC39.6190491,21.7877007,39.16465,21.3334007,38.6031494,21.3334007z"
+  }), createElement("path", {
+    d: "M38.6031494,29.4603004H16.253952c-0.5615005,0-1.0159006,0.4543991-1.0159006,1.0158997\n\t\ts0.4544001,1.0158997,1.0159006,1.0158997h22.3491974c0.5615005,0,1.0158997-0.4543991,1.0158997-1.0158997\n\t\tS39.16465,29.4603004,38.6031494,29.4603004z"
+  }), createElement("path", {
+    d: "M28.4444485,37.5872993H16.253952c-0.5615005,0-1.0159006,0.4543991-1.0159006,1.0158997\n\t\ts0.4544001,1.0158997,1.0159006,1.0158997h12.1904964c0.5615025,0,1.0158005-0.4543991,1.0158005-1.0158997\n\t\tS29.0059509,37.5872993,28.4444485,37.5872993z"
+  })));
+};
+CopyIcon.toString = function () {
+  return '._icon';
+};
+
+var _excluded$A = ["children"];
 var TypographyContainer = /*#__PURE__*/styled('span', {
   margin: 0,
   color: '$foreground',
@@ -1444,7 +1475,7 @@ var TypographyContainer = /*#__PURE__*/styled('span', {
 });
 function Typography(_ref) {
   var children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   return React__default.createElement(TypographyContainer, Object.assign({
     className: "_typography"
   }, props), children);
@@ -1534,7 +1565,7 @@ function StepDetail(_ref) {
   }, React__default.createElement(Typography, {
     noWrap: true,
     variant: direction === 'vertical' ? 'body2' : 'h6'
-  }, parseFloat(amount).toFixed(2), " ", symbol), React__default.createElement(SubTitle, {
+  }, amount ? parseFloat(amount).toFixed(2) : '?', " ", symbol), React__default.createElement(SubTitle, {
     noWrap: true,
     variant: "caption"
   }, "on ", blockchain)));
@@ -1847,7 +1878,7 @@ function BestRoute(props) {
   }, "No routes found")));
 }
 
-var _excluded$A = ["children", "loading", "disabled", "prefix", "suffix", "align", "flexContent"];
+var _excluded$B = ["children", "loading", "disabled", "prefix", "suffix", "align", "flexContent"];
 var _ghost, _css, _css2, _css3, _css4;
 var ButtonContainer = /*#__PURE__*/styled('button', {
   borderRadius: '$5',
@@ -2177,7 +2208,7 @@ function Button(_ref) {
     suffix = _ref.suffix,
     align = _ref.align,
     flexContent = _ref.flexContent,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
   var isDisabled = loading || disabled;
   return React__default.createElement(ButtonContainer, Object.assign({
     disabled: isDisabled
@@ -2252,7 +2283,7 @@ function BlockchainsList(props) {
   }));
 }
 
-var _excluded$B = ["label", "prefix", "suffix", "children", "size", "style"];
+var _excluded$C = ["label", "prefix", "suffix", "children", "size", "style"];
 var InputContainer = /*#__PURE__*/styled('div', {
   backgroundColor: '$background',
   boxSizing: 'border-box',
@@ -2336,7 +2367,7 @@ var TextField = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     suffix = props.suffix,
     size = props.size,
     style = props.style,
-    inputAttributes = _objectWithoutPropertiesLoose(props, _excluded$B);
+    inputAttributes = _objectWithoutPropertiesLoose(props, _excluded$C);
   return React__default.createElement(React__default.Fragment, null, label && React__default.createElement(Label, Object.assign({}, inputAttributes.id && {
     htmlFor: inputAttributes.id
   }), label), React__default.createElement(InputContainer, {
@@ -2357,6 +2388,7 @@ var Container$1 = /*#__PURE__*/styled('div', {
   height: '100%',
   width: '100%',
   padding: '$12 0',
+  position: 'relative',
   '@lg': {
     padding: '$16 0'
   }
@@ -2524,7 +2556,7 @@ function BlockchainSelector(props) {
   });
 }
 
-var _excluded$C = ["label", "id"];
+var _excluded$D = ["label", "id"];
 var CheckboxContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
   alignItems: 'center'
@@ -2549,7 +2581,7 @@ var Label$1 = /*#__PURE__*/styled('label', {
 function Checkbox(_ref) {
   var label = _ref.label,
     id = _ref.id,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
   return React__default.createElement(CheckboxContainer, null, React__default.createElement(CheckboxRoot, Object.assign({
     id: id
   }, props), React__default.createElement(Indicator, null, React__default.createElement(CheckIcon, {
@@ -3349,7 +3381,8 @@ var MainContainer$1 = /*#__PURE__*/styled('div', {
   flexDirection: 'column',
   alignItems: 'end',
   padding: '$16 $24',
-  boxSizing: 'border-box'
+  boxSizing: 'border-box',
+  position: 'relative'
 });
 var ContentContainer$3 = /*#__PURE__*/styled('div', {
   width: '100%'
@@ -3358,7 +3391,8 @@ function SwapContainer(props) {
   var children = props.children,
     style = props.style;
   return React__default.createElement(MainContainer$1, {
-    style: style
+    style: style,
+    id: "swap-box"
   }, React__default.createElement(ContentContainer$3, null, children));
 }
 
@@ -3458,10 +3492,10 @@ function SwapDetail(_ref) {
     blockchain: firstStep.fromBlockchain,
     amount: swap.inputAmount
   }), React__default.createElement(Arrow, null, React__default.createElement(Dot$1, null), React__default.createElement(Line$1, null), React__default.createElement(ArrowRight$1, null)), React__default.createElement(StepDetail, {
-    logo: lastStep.fromLogo,
-    symbol: lastStep.fromSymbol,
-    chainLogo: lastStep.fromBlockchainLogo,
-    blockchain: lastStep.fromBlockchain,
+    logo: lastStep.toLogo,
+    symbol: lastStep.toSymbol,
+    chainLogo: lastStep.toBlockchainLogo,
+    blockchain: lastStep.toBlockchain,
     amount: lastStep.outputAmount
   })))), React__default.createElement(StatusContainer, null, status === 'running' ? React__default.createElement(TryAgainIcon, {
     size: 16
@@ -3502,8 +3536,8 @@ function VirtualizedList(props) {
           return size;
         },
         itemCount: itemCount,
-        height: height,
-        width: width,
+        height: height || 0,
+        width: width || 0,
         onItemsRendered: onItemsRendered
       }, function (_ref3) {
         var index = _ref3.index,
@@ -3567,7 +3601,7 @@ function TokenItem(props) {
   }, token.name))));
 }
 
-var _excluded$D = ["style"];
+var _excluded$E = ["style"];
 var PAGE_SIZE = 20;
 function TokenList(props) {
   var list = props.list,
@@ -3607,7 +3641,7 @@ function TokenList(props) {
   }, [tokens.length]);
   var innerElementType = forwardRef(function (_ref, ref) {
     var style = _ref.style,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$E);
     return React__default.createElement("div", Object.assign({
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ref: ref,
@@ -3838,6 +3872,98 @@ function ColorPicker(_ref) {
   })));
 }
 
+var BackDrop$1 = /*#__PURE__*/styled('div', {
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  width: '100%',
+  height: '100%',
+  zIndex: 9999999,
+  backgroundColor: 'rgba(0,0,0,.1)',
+  borderRadius: '$10'
+});
+var DrawerContainer = /*#__PURE__*/styled('div', {
+  position: 'absolute',
+  boxShadow: '$s',
+  background: '$background',
+  padding: '$20',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  zIndex: 9999999,
+  borderRadius: '$10',
+  variants: {
+    anchor: {
+      left: {
+        top: 0,
+        left: 0,
+        height: '100%',
+        minWidth: '300px',
+        maxWidth: '90%'
+      },
+      right: {
+        top: 0,
+        right: 0,
+        height: '100%',
+        minWidth: '300px',
+        maxWidth: '90%'
+      },
+      bottom: {
+        bottom: 0,
+        width: '100%',
+        maxHeight: '90%'
+      },
+      top: {
+        top: 0,
+        width: '100%',
+        maxHeight: '90%'
+      }
+    }
+  }
+});
+var DrawerHeader = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  position: 'relative',
+  marginBottom: '$16'
+});
+var Body = /*#__PURE__*/styled('div', {
+  overflowY: 'auto',
+  height: '100%'
+});
+var Footer = /*#__PURE__*/styled('footer', {
+  width: '100%',
+  marginTop: '$28'
+});
+function Drawer(props) {
+  var title = props.title,
+    content = props.content,
+    open = props.open,
+    onClose = props.onClose,
+    containerStyle = props.containerStyle,
+    _props$anchor = props.anchor,
+    anchor = _props$anchor === void 0 ? 'bottom' : _props$anchor,
+    _props$showClose = props.showClose,
+    showClose = _props$showClose === void 0 ? false : _props$showClose,
+    footer = props.footer,
+    container = props.container;
+  var handleBackDropClick = function handleBackDropClick(event) {
+    if (event.target === event.currentTarget) onClose();
+  };
+  return React__default.createElement(React__default.Fragment, null, open && container && createPortal(React__default.createElement(BackDrop$1, {
+    onClick: handleBackDropClick
+  }, React__default.createElement(DrawerContainer, {
+    anchor: anchor,
+    style: containerStyle
+  }, React__default.createElement(DrawerHeader, null, React__default.createElement(Typography, {
+    variant: "h4"
+  }, title), showClose && React__default.createElement(CloseIcon, {
+    size: 24,
+    onClick: onClose
+  })), React__default.createElement(Body, null, content), React__default.createElement(Footer, null, footer))), container));
+}
+
 var MainContainer$2 = /*#__PURE__*/styled('div', {
   overflow: 'hidden'
 });
@@ -3864,7 +3990,7 @@ var SwapperLogo$1 = /*#__PURE__*/styled('img', {
 var RelativeContainer$1 = /*#__PURE__*/styled('div', {
   position: 'relative'
 });
-var Footer = /*#__PURE__*/styled('div', {
+var Footer$1 = /*#__PURE__*/styled('div', {
   display: 'flex',
   alignItems: 'center'
 });
@@ -3912,7 +4038,7 @@ function ConfirmSwap(props) {
     textField: false,
     title: "Swap",
     onBack: onBack,
-    Footer: React__default.createElement(Footer, null, React__default.createElement(Button, {
+    Footer: React__default.createElement(Footer$1, null, React__default.createElement(Button, {
       type: "primary",
       fullWidth: true,
       loading: loading,
@@ -3963,7 +4089,7 @@ function ConfirmSwap(props) {
   }))));
 }
 
-var Footer$1 = /*#__PURE__*/styled('div', {
+var Footer$2 = /*#__PURE__*/styled('div', {
   display: 'flex',
   alignItems: 'center'
 });
@@ -3993,7 +4119,7 @@ function ConfirmWallets(props) {
     textField: false,
     title: "Confirm Swap",
     onBack: onBack,
-    Footer: React__default.createElement(Footer$1, null, React__default.createElement(ConfirmButton, {
+    Footer: React__default.createElement(Footer$2, null, React__default.createElement(ConfirmButton, {
       fullWidth: true,
       loading: loading,
       type: "primary",
@@ -4067,7 +4193,8 @@ var filteredHistory = function filteredHistory(list, searchedFor) {
 };
 var Group = /*#__PURE__*/styled('div', {
   marginBottom: '$24',
-  paddingRight: '$8'
+  paddingRight: '$8',
+  maxHeight: '600px'
 });
 var GroupTitle = /*#__PURE__*/styled(Typography, {
   color: '$neutrals500'
@@ -4100,7 +4227,7 @@ function History(_ref) {
     onBack: onBack,
     textField: true,
     textFieldPlaceholder: "Search By Blockchain Or Token",
-    title: "History"
+    title: "Swaps"
   }, function (searchedFor) {
     var filterSwaps = filteredHistory(list, searchedFor);
     return filterSwaps.length ? React__default.createElement(SwapsGroup, {
@@ -4137,20 +4264,84 @@ var Error = /*#__PURE__*/styled(Description, {
 });
 var Line$3 = /*#__PURE__*/styled('div', {
   width: '0',
+  minHeight: '$16',
   marginLeft: '$12',
   border: '1px dashed $foreground',
   borderRadius: 'inherit'
 });
+var RequestIdContainer = /*#__PURE__*/styled('div', {
+  cursor: 'pointer',
+  backgroundColor: '$neutrals200',
+  padding: '$4',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '$5',
+  marginBottom: '$16'
+});
+var RequestId = /*#__PURE__*/styled(Typography, {
+  color: '$warning500'
+});
+var CancelButtonContainer = /*#__PURE__*/styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+var StepContainer$1 = /*#__PURE__*/styled('div', {
+  variants: {
+    hasNotStarted: {
+      "true": {
+        filter: 'grayscale(100%)'
+      }
+    },
+    isRunning: {
+      "true": {
+        animation: pulse + " 2s ease-in-out infinite"
+      }
+    }
+  }
+});
 function SwapHistory(props) {
   var pendingSwap = props.pendingSwap,
-    onBack = props.onBack;
+    onBack = props.onBack,
+    onCopy = props.onCopy,
+    isCopied = props.isCopied,
+    onCancel = props.onCancel;
+  var _useState = useState(false),
+    showDrawer = _useState[0],
+    setShowDrawer = _useState[1];
   return React__default.createElement(SecondaryPage, {
-    title: "History",
+    title: "Swap Details",
     textField: false,
     onBack: onBack
-  }, React__default.createElement(React__default.Fragment, null, pendingSwap == null ? void 0 : pendingSwap.steps.map(function (step, index) {
-    return React__default.createElement(Fragment, {
-      key: index
+  }, React__default.createElement("div", {
+    style: {
+      overflow: 'hidden'
+    }
+  }, React__default.createElement("div", null, React__default.createElement(Typography, {
+    variant: "body1"
+  }, " request ID :"), React__default.createElement(RequestIdContainer, {
+    onClick: onCopy.bind(null, pendingSwap == null ? void 0 : pendingSwap.requestId)
+  }, React__default.createElement(RequestId, {
+    variant: "body1"
+  }, pendingSwap == null ? void 0 : pendingSwap.requestId), React__default.createElement(Spacer, {
+    size: 12
+  }), isCopied ? React__default.createElement(CheckSquareIcon, {
+    color: "success",
+    size: 18
+  }) : React__default.createElement(CopyIcon, {
+    color: "warning",
+    size: 18
+  }))), React__default.createElement("div", {
+    style: {
+      overflow: 'auto',
+      position: 'relative'
+    }
+  }, pendingSwap == null ? void 0 : pendingSwap.steps.map(function (step, index) {
+    return React__default.createElement(StepContainer$1, {
+      key: index,
+      hasNotStarted: step.status === 'created',
+      isRunning: step.status != 'failed' && step.status != 'success' && step.status != 'created'
     }, index === 0 && React__default.createElement(RelativeContainer$1, null, React__default.createElement(StepDetail, {
       logo: step.fromLogo,
       symbol: step.fromSymbol,
@@ -4194,8 +4385,47 @@ function SwapHistory(props) {
       blockchain: step.toBlockchain,
       amount: step.outputAmount
     }));
-  })));
+  }), (pendingSwap == null ? void 0 : pendingSwap.status) === 'running' && React__default.createElement(CancelButtonContainer, null, React__default.createElement(Button, {
+    variant: "contained",
+    type: "error",
+    onClick: setShowDrawer.bind(null, true)
+  }, "Cancel")))), React__default.createElement(Drawer, {
+    onClose: setShowDrawer.bind(null, false),
+    open: showDrawer,
+    showClose: true,
+    anchor: "bottom",
+    title: "Cancel Progress",
+    content: React__default.createElement(React__default.Fragment, null, React__default.createElement(Alert, {
+      type: "warning"
+    }, React__default.createElement(Typography, {
+      variant: "body2"
+    }, React__default.createElement("p", null, "Warning: Rango ", React__default.createElement("u", null, "neither reverts"), " your transaction", 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")))),
+    footer: React__default.createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }
+    }, React__default.createElement(Button, {
+      variant: "contained",
+      type: "success",
+      onClick: setShowDrawer.bind(null, false)
+    }, "Skip"), React__default.createElement(Spacer, {
+      size: 16
+    }), React__default.createElement(Button, {
+      variant: "contained",
+      type: "error",
+      onClick: function onClick() {
+        onCancel(pendingSwap.requestId);
+        setShowDrawer(false);
+      }
+    }, "Cancel progress")),
+    container: document.getElementById('swap-box')
+  }));
 }
 
-export { AddCircleIcon, AddIcon, AddWalletIcon, Alert, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, BagIcon, BanIcon, BestRoute, BlockchainSelector, Button, CheckCircleIcon, CheckIcon, CheckSquareIcon, CheckWalletIcon, Checkbox, Chip, CloseIcon, ColorPicker, ConfirmSwap, ConfirmWallets, ConnectWalletsModal, DeleteCircleIcon, DeleteWalletIcon, DownloadIcon, FilledCircle, GasIcon, History, HistoryIcon, HorizontalSwapIcon, InfoCircleIcon, LiquiditySourcesSelector, 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, BagIcon, BanIcon, BestRoute, BlockchainSelector, Button, CheckCircleIcon, CheckIcon, CheckSquareIcon, CheckWalletIcon, Checkbox, Chip, CloseIcon, ColorPicker, ConfirmSwap, ConfirmWallets, ConnectWalletsModal, CopyIcon, DeleteCircleIcon, DeleteWalletIcon, DownloadIcon, Drawer, FilledCircle, GasIcon, History, HistoryIcon, HorizontalSwapIcon, InfoCircleIcon, LiquiditySourcesSelector, 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 };
 //# sourceMappingURL=ui.esm.js.map