@ref-finance/ref-sdk 1.3.10 → 1.3.11

package/dist/ref-sdk.esm.js

@@ -5215,6 +5215,7 @@ function styleInject(css, ref) {
 var css_248z = ".__ref-swap-widget-container {\n  border-radius: 16px;\n  padding: 28px;\n  padding-bottom: 16px;\n  position: relative;\n  max-width: 90%;\n}\n\n.__ref-swap-widget-row-flex-center {\n  display: flex;\n  align-items: center;\n}\n\n.__ref-swap-widget-col-flex-start {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.__ref-swap-widget-header {\n  justify-content: space-between;\n  margin-bottom: 25px;\n}\n\n.__ref-swap-widget-header-title {\n  font-weight: 700;\n  font-size: 20px;\n}\n.__ref-swap-widget-header-button-account {\n  font-size: 14px;\n  margin-right: 8px;\n  padding: 4px 13px;\n  border-radius: 25px;\n  min-width: 120px;\n  justify-content: center;\n}\n\n.__ref-swap-widget-header-button-account:hover {\n  background: rgba(255, 104, 158, 0.2) !important;\n}\n\n.__ref-swap-widget_slippage_selector {\n  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.25);\n  border-radius: 12px;\n  position: absolute;\n  top: 30px;\n  right: 0px;\n  padding: 16px;\n  padding-right: 20px;\n  padding-left: 20px;\n  z-index: 100;\n  width: 230px;\n  font-size: 14px;\n}\n\n.__ref-swap-widget_slippage_selector_input_container {\n  width: 100%;\n  height: 26px;\n  margin-right: 4px;\n  padding: 2px 10px;\n}\n.__ref-swap-widget_slippage_selector_button {\n  font-size: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 6px 16px;\n}\n\n.__ref-swap-widget-opacity-hover:hover {\n  opacity: 0.5;\n}\n\n.__ref-swap-widget-opacity-active:active {\n  opacity: 0.5;\n}\n\n.__ref-swap-widger-token-amount {\n  padding: 14px;\n  padding-bottom: 8px;\n  border-radius: 8px;\n  display: flex;\n  align-items: flex-start;\n}\n\n.__ref-swap-widger-token-amount_input {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n}\n\n.__ref-swap-widget-token-amount_quick_selector {\n}\n\n.__ref-swap-widger-token-amount_balance {\n  margin-top: 7px;\n  justify-content: space-between;\n}\n\n.__ref-swap-widget-token-amount_quick_selector_item {\n  font-size: 12px;\n  padding: 6px;\n  padding-top: 3px;\n  padding-bottom: 3px;\n  cursor: pointer;\n}\n.__ref-swap-widget-select-token_input {\n  padding: 14px;\n  border-radius: 8px;\n}\n\n.__ref-swap-widget_star_token {\n  padding: 8px 10px 8px 8px;\n  margin: 0px 6px 10px 0px;\n  position: relative;\n  cursor: pointer;\n  border-radius: 8px;\n}\n\n.__ref-swap-widget_token_icon {\n  border-radius: 100%;\n  flex-shrink: 0;\n}\n\n.__ref-swap-widget_token_list_table {\n  table-layout: auto;\n  width: 100%;\n  font-size: 14px;\n}\n\n.__ref-swap-widget_token_list_table_header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 12px;\n  margin: 0px 6px;\n}\n\n.__ref-swap-widget_token-selector-star-tokens {\n  margin-top: 20px;\n  flex-wrap: wrap;\n}\n.__ref-swap-widget_token_list_table_content {\n  display: flex;\n  flex-direction: column;\n  max-height: 50vh;\n  min-height: 30vh;\n  overflow-y: auto;\n}\n\n.__ref-swap-widget_token-selector-token-list-item {\n  justify-content: space-between;\n  padding: 9px 20px;\n}\n.__ref-swap-widget-token-amount_token-select-button {\n  font-size: 16px;\n  border-radius: 18px;\n  padding: 6px 8px;\n  cursor: pointer;\n}\n\n.__ref-swap-widget-exchange-button {\n  width: 100%;\n  justify-content: center;\n  padding: 20px 0;\n}\n\n.__ref-swap-widget-submit-button {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  font-weight: 700;\n  border-radius: 8px;\n  padding: 14px 0 14px 0;\n  margin-top: 14px;\n  cursor: pointer;\n}\n\n.__ref-swap-widget-submit-button-loader {\n  width: 20px;\n  height: 20px;\n  border: 2px solid #fff;\n  border-bottom-color: rgb(255, 255, 255);\n  border-bottom-color: transparent;\n  border-radius: 50%;\n  display: inline-block;\n  box-sizing: border-box;\n  animation: rotation 1s linear infinite;\n}\n\n@keyframes rotation {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.__ref-widget-swap-detail-view {\n  justify-content: space-between;\n  width: 100%;\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.__ref-swap-widget-swap-detail-view-item {\n  justify-content: space-between;\n  margin-bottom: 12px;\n  width: 100%;\n}\n\n.__ref-swap-widget-loading {\n  animation: spin 2s linear infinite;\n}\n\n.__ref-swap-widget-notification {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 50%;\n  transform: translate(-50%, -50%);\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.25);\n  border-radius: 12px;\n  padding: 32px 20px;\n}\n\n.__ref-swap-widget-notification__button {\n  border-radius: 8px;\n  padding: 8px 20px;\n  margin-top: 14px;\n}\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\ninput.__ref-swap-widget-input-class {\n  margin: 0;\n  background-color: transparent;\n  display: block;\n  width: 100%;\n  padding: 0;\n  border-width: 0;\n}\n\ninput.__ref-swap-widget-input-class:focus {\n  outline: none;\n  border-width: 0;\n}\n\ninput.__ref-swap-widget-input-class::-webkit-outer-spin-button,\ninput.__ref-swap-widget-input-class::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\ninput.__ref-swap-widget-input-class[type='number'] {\n  -moz-appearance: textfield; /* Firefox */\n}\n\nbutton.__ref-swap-widget-button {\n  border: none;\n}\n\n.__ref-swap-widget-submit-button:hover {\n  opacity: 0.5;\n}\n\n.__ref-swap-widget-active:active {\n  color: #00c6a2;\n}\n\n.__ref-swap-widget-hover:hover {\n  color: #00c6a2;\n}\n\n.__ref-swap-widget_token_list_table_content::-webkit-scrollbar {\n  width: 4px;\n  height: 4px;\n  border-radius: 3px;\n}\n\n.__ref-swap-widget_token_list_table_content::-webkit-scrollbar-track {\n  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);\n}\n.__ref-swap-widget_token_list_table_content::-webkit-scrollbar-thumb {\n  background: #00c6a2;\n  border-radius: 8px;\n}\n\n.__ref-swap-widget-swap_routes {\n  border-radius: 12px;\n  padding: 8px 12px 8px 12px;\n  width: 100%;\n}\n\n.__ref-swap-widget-valueStyle {\n  background-image: -webkit-linear-gradient(left, #00ffd1, #00ffd1, #8c78ff);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.__ref-swap-widget-swap_route_row {\n  justify-content: space-between;\n  margin-bottom: 4px;\n}\n";
 styleInject(css_248z);
 
+var _ALLOWED_KEYS;
 var getPriceImpact$1 = function getPriceImpact(value, tokenIn, tokenInAmount) {
   var textColor = Number(value) <= 1 ? 'text-greenLight' : 1 < Number(value) && Number(value) <= 2 ? 'text-warn' : 'text-error';
   var displayValue = scientificNotationToString(multiply(tokenInAmount || '0', divide(value, '100')));
@@ -5526,7 +5527,33 @@ var HalfAndMaxAmount = function HalfAndMaxAmount(_ref6) {
   }, "Max"));
 };
 var DECIMAL_POINT = '.';
-var ALLOWED_KEYS = ['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight', 'Delete', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', DECIMAL_POINT];
+var ALLOWED_KEYS = (_ALLOWED_KEYS = {
+  '0': true,
+  '1': true,
+  '2': true,
+  '3': true,
+  '4': true,
+  '5': true,
+  '6': true,
+  '7': true,
+  '8': true,
+  '9': true
+}, _ALLOWED_KEYS[DECIMAL_POINT] = true, _ALLOWED_KEYS);
+var isValidInput = function isValidInput(value) {
+  var decimalPointsAmount = 0;
+  if (value === DECIMAL_POINT) return false;
+  for (var i = 0; i < value.length; i++) {
+    var _char = value[i];
+    if (!ALLOWED_KEYS[_char]) return false;
+    if (_char === DECIMAL_POINT) {
+      decimalPointsAmount++;
+      if (decimalPointsAmount === 2) {
+        return false;
+      }
+    }
+  }
+  return true;
+};
 var TokenAmount = function TokenAmount(props) {
   var _ref$current2;
   var balance = props.balance,
@@ -5547,28 +5574,6 @@ var TokenAmount = function TokenAmount(props) {
   var _useState5 = useState(false),
     hoverSelect = _useState5[0],
     setHoverSelect = _useState5[1];
-  var handleKeyDown = function handleKeyDown(event) {
-    if (!ALLOWED_KEYS.includes(event.key) && !event.ctrlKey) {
-      event.preventDefault();
-    }
-    var isDecimalPoint = event.key === DECIMAL_POINT;
-    if (!isDecimalPoint) return;
-    // Ensure only one dot is allowed
-    var inputValue = event.target.value;
-    if (inputValue.includes(DECIMAL_POINT)) {
-      event.preventDefault();
-    }
-    // prohibit only one dot
-    if (inputValue.length === 0) {
-      event.preventDefault();
-    }
-  };
-  var handlePaste = function handlePaste(event) {
-    var paste = event.clipboardData.getData('text');
-    if (!/^[0-9.]+$/.test(paste)) {
-      event.preventDefault();
-    }
-  };
   var handleChange = function handleChange(amount) {
     if (onChangeAmount) {
       onChangeAmount(amount);
@@ -5658,11 +5663,10 @@ var TokenAmount = function TokenAmount(props) {
     className: "__ref-swap-widget-input-class",
     value: amount,
     type: "text",
-    onKeyDown: handleKeyDown,
-    onPaste: handlePaste,
     placeholder: !onChangeAmount ? '-' : '0.0',
     onChange: function onChange(_ref7) {
       var target = _ref7.target;
+      if (!isValidInput(target.value)) return;
       target.setCustomValidity('');
       handleChange(target.value);
     },