@ref-finance/ref-sdk 1.4.1 → 1.4.2

package/dist/ref-sdk.umd.development.js

@@ -11,6 +11,7 @@
   var React__default = 'default' in React ? React['default'] : React;
 
   var FEE_DIVISOR = 10000;
+  var DEFAULT_SLIPPAGE_TOLERANCE = "0.5";
   var STABLE_LP_TOKEN_DECIMALS = 18;
   var RATED_POOL_LP_TOKEN_DECIMALS = 24;
   var STORAGE_TO_REGISTER_WITH_MFT = '0.1';
@@ -3628,8 +3629,11 @@
       notation: 'fixed'
     });
   }
-  var getMax = function getMax(id, amount) {
-    return id !== exports.WRAP_NEAR_CONTRACT_ID ? amount : Number(amount) <= 0.5 ? '0' : String(Number(amount) - 0.5);
+  var getMax = function getMax(id, amount, minNearAmountLeftForGasFees) {
+    return id !== exports.WRAP_NEAR_CONTRACT_ID ? amount : Number(amount) <= minNearAmountLeftForGasFees ? '0' : String(Number(amount) - minNearAmountLeftForGasFees);
+  };
+  var isValidSlippageTolerance = function isValidSlippageTolerance(value) {
+    return value > 0 && value < 100;
   };
   function getPointByPrice(pointDelta, price, decimalRate, noNeedSlot) {
     var point = Math.log(+price * decimalRate) / Math.log(CONSTANT_D);
@@ -4380,7 +4384,7 @@
   var instantSwap = /*#__PURE__*/function () {
     var _ref2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref) {
       var _swapTodos;
-      var tokenIn, tokenOut, amountIn, slippageTolerance, swapTodos, AccountId, referralId, transactions, registerToken, registered, actionsList, allSwapsTokens, i, swapTokens;
+      var tokenIn, tokenOut, amountIn, slippageTolerance, swapTodos, AccountId, referralId, transactions, registerToken, actionsList, allSwapsTokens, i, swapTokens;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
@@ -4445,24 +4449,9 @@
                   return _ref3.apply(this, arguments);
                 };
               }();
-              if (!(tokenIn.id === exports.config.WRAP_NEAR_CONTRACT_ID)) {
-                _context2.next = 12;
-                break;
-              }
-              _context2.next = 8;
-              return ftGetStorageBalance(exports.config.WRAP_NEAR_CONTRACT_ID, AccountId);
-            case 8:
-              registered = _context2.sent;
-              if (!(registered === null)) {
-                _context2.next = 12;
-                break;
-              }
-              _context2.next = 12;
-              return registerToken(tokenIn);
-            case 12:
-              _context2.next = 14;
+              _context2.next = 7;
               return registerToken(tokenOut);
-            case 14:
+            case 7:
               actionsList = [];
               allSwapsTokens = swapTodos.map(function (s) {
                 return [s.inputToken, s.outputToken];
@@ -4520,7 +4509,7 @@
                 }]
               });
               return _context2.abrupt("return", transactions);
-            case 19:
+            case 12:
             case "end":
               return _context2.stop();
           }
@@ -4998,12 +4987,12 @@
     var rate = calculateExchangeRate(ONLY_ZEROS.test(params.amountIn) ? '1' : params.amountIn, amountOut || '1');
     var makeSwap = /*#__PURE__*/function () {
       var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-        var transactionsRef, outEstimate, routes, bigEstimate, _minAmountOut;
+        var transactionsRef, tokenRegistered, nearDepositAmount, minStorageBalance, outEstimate, routes, bigEstimate, _minAmountOut;
         return _regeneratorRuntime().wrap(function _callee3$(_context3) {
           while (1) {
             switch (_context3.prev = _context3.next) {
               case 0:
-                if (!(!params.tokenIn || !params.tokenOut)) {
+                if (!(!params.tokenIn || !params.tokenOut || !AccountId)) {
                   _context3.next = 2;
                   break;
                 }
@@ -5016,14 +5005,32 @@
                   amountIn: params.amountIn,
                   swapTodos: estimates,
                   slippageTolerance: slippageTolerance,
-                  AccountId: AccountId || '',
+                  AccountId: AccountId,
                   referralId: referralId
                 });
               case 4:
                 transactionsRef = _context3.sent;
-                if (tokenIn && tokenIn.id === exports.WRAP_NEAR_CONTRACT_ID) {
-                  transactionsRef.splice(-1, 0, nearDepositTransaction(amountIn));
+                if (!(tokenIn && tokenIn.id === exports.WRAP_NEAR_CONTRACT_ID)) {
+                  _context3.next = 16;
+                  break;
                 }
+                _context3.next = 8;
+                return ftGetStorageBalance(tokenIn.id, AccountId);
+              case 8:
+                tokenRegistered = _context3.sent;
+                nearDepositAmount = amountIn;
+                if (!(tokenRegistered === null)) {
+                  _context3.next = 15;
+                  break;
+                }
+                _context3.next = 13;
+                return getMinStorageBalance(tokenIn.id);
+              case 13:
+                minStorageBalance = _context3.sent;
+                nearDepositAmount = format.formatNearAmount(String(BigInt(format.parseNearAmount(nearDepositAmount)) + BigInt(minStorageBalance)));
+              case 15:
+                transactionsRef.splice(-1, 0, nearDepositTransaction(nearDepositAmount));
+              case 16:
                 if (tokenOut && tokenOut.id === exports.WRAP_NEAR_CONTRACT_ID) {
                   outEstimate = new Big(0);
                   routes = separateRoutes(estimates, tokenOut.id);
@@ -5034,16 +5041,16 @@
                   _minAmountOut = percentLess(slippageTolerance, scientificNotationToString(bigEstimate.toString()));
                   transactionsRef.push(nearWithdrawTransaction(_minAmountOut));
                 }
-                _context3.next = 9;
+                _context3.next = 19;
                 return onSwap(transactionsRef);
-              case 9:
+              case 19:
                 setTimeout(function () {
                   var tokensToUpdate = [];
                   if (tokenIn) tokensToUpdate.push(tokenIn.id);
                   if (tokenOut) tokensToUpdate.push(tokenOut.id);
                   if (tokensToUpdate.length > 0 && AccountId) updateTokenBalance(tokensToUpdate, AccountId);
                 }, 3000);
-              case 10:
+              case 20:
               case "end":
                 return _context3.stop();
             }
@@ -5266,7 +5273,7 @@
     }
   }
 
-  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";
+  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: 5;\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: 5;\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;
@@ -5617,7 +5624,8 @@
       onChangeAmount = props.onChangeAmount,
       price = props.price,
       onForceUpdate = props.onForceUpdate,
-      poolFetchingState = props.poolFetchingState;
+      poolFetchingState = props.poolFetchingState,
+      minNearAmountLeftForGasFees = props.minNearAmountLeftForGasFees;
     var theme = React.useContext(ThemeContext);
     var primary = theme.primary,
       secondary = theme.secondary,
@@ -5637,14 +5645,14 @@
       }
     };
     React.useEffect(function () {
-      if (ref.current && onChangeAmount && token && balance && token.id === exports.WRAP_NEAR_CONTRACT_ID && Number(balance) - Number(ref.current.value) < 0.5) {
-        ref.current.setCustomValidity('Must have 0.5N or more left in wallet for gas fee.');
+      if (ref.current && onChangeAmount && token && balance && token.id === exports.WRAP_NEAR_CONTRACT_ID && Number(balance) - Number(ref.current.value) < minNearAmountLeftForGasFees) {
+        ref.current.setCustomValidity("Must have " + minNearAmountLeftForGasFees + "N or more left in wallet for gas fee.");
       } else {
         var _ref$current;
         (_ref$current = ref.current) == null ? void 0 : _ref$current.setCustomValidity('');
       }
     }, [ref, balance, ref.current, (_ref$current2 = ref.current) == null ? void 0 : _ref$current2.value, token, amount]);
-    var curMax = token ? getMax(token.id, balance || '0') : '0';
+    var curMax = token ? getMax(token.id, balance || '0', minNearAmountLeftForGasFees) : '0';
     return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
       className: "__ref-swap-widger-token-amount ",
       style: {
@@ -5746,7 +5754,7 @@
       }
     }, React__default.createElement("span", null, "Balance:\xA0", toPrecision(balance, 2)), token && React__default.createElement(HalfAndMaxAmount, {
       token: token,
-      max: getMax(token.id, balance),
+      max: getMax(token.id, balance, minNearAmountLeftForGasFees),
       onChangeAmount: handleChange,
       amount: amount
     })));
@@ -5754,7 +5762,6 @@
   var SlippageSelector = function SlippageSelector(_ref8) {
     var slippageTolerance = _ref8.slippageTolerance,
       onChangeSlippageTolerance = _ref8.onChangeSlippageTolerance,
-      showSlip = _ref8.showSlip,
       setShowSlip = _ref8.setShowSlip;
     var _useState6 = React.useState(false),
       invalid = _useState6[0],
@@ -5765,30 +5772,26 @@
       primary = theme.primary,
       borderRadius = theme.borderRadius,
       borderColor = theme.borderColor;
-    var ref = React.useRef(null);
     var handleChange = function handleChange(amount) {
-      onChangeSlippageTolerance(Number(amount));
-      if (Number(amount) > 0 && Number(amount) < 100) {
-        setInValid(false);
-      } else {
-        setInValid(true);
-      }
-      if (ref.current) {
-        ref.current.value = amount;
-      }
+      onChangeSlippageTolerance(amount);
+      setInValid(!isValidSlippageTolerance(Number(amount)));
     };
     React.useEffect(function () {
-      if (!showSlip) return;
-      document.onclick = function () {
-        return setShowSlip(false);
+      var onClick = function onClick(event) {
+        if (!event.target) return;
+        if (event.target.closest('#__ref-slippage-container') === null) {
+          setShowSlip(false);
+          if (invalid) onChangeSlippageTolerance(DEFAULT_SLIPPAGE_TOLERANCE);
+        }
       };
+      document.addEventListener('click', onClick);
       return function () {
-        document.onclick = null;
+        document.removeEventListener('click', onClick);
       };
-    }, [showSlip, setShowSlip]);
-    if (!showSlip) return null;
+    }, [invalid]);
     return React__default.createElement("div", {
       className: "__ref-swap-widget_slippage_selector __ref-swap-widget-col-flex-start",
+      id: "__ref-slippage-container",
       onClick: function onClick(e) {
         return e.stopPropagation();
       },
@@ -5807,33 +5810,21 @@
       className: "__ref-swap-widget-row-flex-center\n        __ref-swap-widget_slippage_selector_input_container",
       style: {
         border: "1px solid " + (invalid ? '#FF7575' : borderColor),
-        borderRadius: borderRadius
+        borderRadius: borderRadius,
+        color: invalid ? '#FF7575' : primary
       }
     }, React__default.createElement("input", {
-      ref: ref,
-      max: 99.99999,
-      min: 0.000001,
-      defaultValue: slippageTolerance ? slippageTolerance : 0.5,
-      onWheel: function onWheel() {
-        if (ref.current) {
-          ref.current.blur();
-        }
-      },
       value: slippageTolerance,
-      step: "any",
-      type: "number",
+      type: "text",
       required: true,
       placeholder: "",
-      onChange: function onChange(_ref9) {
-        var target = _ref9.target;
-        return handleChange(target.value);
-      },
-      onKeyDown: function onKeyDown(e) {
-        return symbolsArr.includes(e.key) && e.preventDefault();
+      onChange: function onChange(event) {
+        if (isValidInput(event.target.value)) {
+          handleChange(event.target.value);
+        }
       },
       style: {
-        width: '100%',
-        color: invalid ? '#FF7575' : primary
+        width: '100%'
       },
       className: "__ref-swap-widget-input-class"
     }), React__default.createElement("span", {
@@ -5848,7 +5839,7 @@
       onClick: function onClick(e) {
         e.stopPropagation();
         e.preventDefault();
-        onChangeSlippageTolerance(0.5);
+        onChangeSlippageTolerance(DEFAULT_SLIPPAGE_TOLERANCE);
         setInValid(false);
       }
     }, "Auto")), invalid && React__default.createElement("div", {
@@ -5856,7 +5847,7 @@
       style: {
         color: '#FF7575',
         fontSize: '12px',
-        padding: '10px 0px',
+        padding: '10px 0px 0px 0px',
         alignItems: 'start'
       }
     }, React__default.createElement(IoWarning.IoWarning, {
@@ -5867,11 +5858,11 @@
       size: 20
     }), React__default.createElement("div", null, 'The slippage tolerance is invalid.')));
   };
-  var StarToken = function StarToken(_ref10) {
-    var price = _ref10.price,
-      token = _ref10.token,
-      onDelete = _ref10.onDelete,
-      _onClick = _ref10.onClick;
+  var StarToken = function StarToken(_ref9) {
+    var price = _ref9.price,
+      token = _ref9.token,
+      onDelete = _ref9.onDelete,
+      _onClick = _ref9.onClick;
     var theme = React.useContext(ThemeContext);
     var primary = theme.primary,
       secondary = theme.secondary,
@@ -5948,16 +5939,16 @@
       }
     }, !price ? '$-' : '$' + toInternationalCurrencySystemLongString(price, 2))));
   };
-  var Token = function Token(_ref11) {
-    var token = _ref11.token,
-      _onClick2 = _ref11.onClick,
-      price = _ref11.price,
-      balance = _ref11.balance,
-      isSticky = _ref11.isSticky,
-      onClickPin = _ref11.onClickPin,
-      index = _ref11.index,
-      setHoverIndex = _ref11.setHoverIndex,
-      hoverIndex = _ref11.hoverIndex;
+  var Token = function Token(_ref10) {
+    var token = _ref10.token,
+      _onClick2 = _ref10.onClick,
+      price = _ref10.price,
+      balance = _ref10.balance,
+      isSticky = _ref10.isSticky,
+      onClickPin = _ref10.onClickPin,
+      index = _ref10.index,
+      setHoverIndex = _ref10.setHoverIndex,
+      hoverIndex = _ref10.hoverIndex;
     var theme = React.useContext(ThemeContext);
     var primary = theme.primary,
       secondary = theme.secondary,
@@ -6073,14 +6064,14 @@
       }
     })));
   };
-  var TokenListTable = function TokenListTable(_ref12) {
-    var tokens = _ref12.tokens,
-      onClick = _ref12.onClick,
-      balances = _ref12.balances,
-      tokenPriceList = _ref12.tokenPriceList,
-      starList = _ref12.starList,
-      setStarList = _ref12.setStarList,
-      onDelete = _ref12.onDelete;
+  var TokenListTable = function TokenListTable(_ref11) {
+    var tokens = _ref11.tokens,
+      onClick = _ref11.onClick,
+      balances = _ref11.balances,
+      tokenPriceList = _ref11.tokenPriceList,
+      starList = _ref11.starList,
+      setStarList = _ref11.setStarList,
+      onDelete = _ref11.onDelete;
     var _useState11 = React.useState('down'),
       currentSort = _useState11[0],
       setCurrentSort = _useState11[1];
@@ -6143,13 +6134,13 @@
       });
     })));
   };
-  var TokenSelector = function TokenSelector(_ref13) {
-    var onSelect = _ref13.onSelect,
-      width = _ref13.width,
-      tokens = _ref13.tokens,
-      onClose = _ref13.onClose,
-      balances = _ref13.balances,
-      className = _ref13.className;
+  var TokenSelector = function TokenSelector(_ref12) {
+    var onSelect = _ref12.onSelect,
+      width = _ref12.width,
+      tokens = _ref12.tokens,
+      onClose = _ref12.onClose,
+      balances = _ref12.balances,
+      className = _ref12.className;
     var theme = React.useContext(ThemeContext);
     var container = theme.container,
       buttonBg = theme.buttonBg,
@@ -6251,9 +6242,9 @@
       onDelete: onDelete
     }));
   };
-  var Slider = function Slider(_ref14) {
-    var showSlip = _ref14.showSlip,
-      setShowSlip = _ref14.setShowSlip;
+  var Slider = function Slider(_ref13) {
+    var showSlip = _ref13.showSlip,
+      setShowSlip = _ref13.setShowSlip;
     var _useState15 = React.useState(false),
       hover = _useState15[0],
       setHover = _useState15[1];
@@ -6271,7 +6262,8 @@
       },
       onClick: function onClick() {
         return setShowSlip(true);
-      }
+      },
+      className: "cursor-pointer"
     }, React__default.createElement("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
@@ -6426,18 +6418,23 @@
       stopColor: "#8C78FF"
     }))));
   };
-  var Notification = function Notification(_ref15) {
-    var state = _ref15.state,
-      tx = _ref15.tx,
-      detail = _ref15.detail,
-      open = _ref15.open,
-      setOpen = _ref15.setOpen,
-      setState = _ref15.setState;
+  var Notification = function Notification(_ref14) {
+    var state = _ref14.state,
+      tx = _ref14.tx,
+      detail = _ref14.detail,
+      setSwapState = _ref14.setSwapState;
     var theme = React.useContext(ThemeContext);
     var container = theme.container,
       buttonBg = theme.buttonBg,
       primary = theme.primary;
-    if (!open) return null;
+    var notificationStatus = React.useMemo(function () {
+      return {
+        isClosed: false,
+        isWaitingForConfirmation: state === 'waitingForConfirmation',
+        isFailure: state === 'fail',
+        isSuccess: state === 'success'
+      };
+    }, [state]);
     return React__default.createElement("div", {
       className: "__ref-swap-widget-notification",
       style: {
@@ -6446,18 +6443,18 @@
       }
     }, React__default.createElement("div", {
       className: "__ref-swap-widget-notification__icon"
-    }, state === null && React__default.createElement(Loading, null), state === 'fail' && React__default.createElement(Warning, null), state === 'success' && React__default.createElement(Success, null)), React__default.createElement("div", {
+    }, notificationStatus.isWaitingForConfirmation && React__default.createElement(Loading, null), notificationStatus.isFailure && React__default.createElement(Warning, null), notificationStatus.isSuccess && React__default.createElement(Success, null)), React__default.createElement("div", {
       style: {
         fontSize: '16px',
         marginTop: '10px',
         marginBottom: '6px'
       }
-    }, state === 'success' && React__default.createElement("p", null, "Success!"), state === 'fail' && React__default.createElement("p", null, "Swap Failed!")), React__default.createElement("div", {
-      className: "__ref-swap-widget-notification__text",
+    }, notificationStatus.isSuccess && React__default.createElement("p", null, "Success!"), notificationStatus.isFailure && React__default.createElement("p", null, "Swap Failed!")), React__default.createElement("div", {
+      className: "text-center",
       style: {
         color: primary
       }
-    }, (state === null || state === undefined) && React__default.createElement("p", null, "Waiting for confirmation"), state === 'success' && tx && React__default.createElement("a", {
+    }, notificationStatus.isWaitingForConfirmation && React__default.createElement("p", null, "Waiting for confirmation"), notificationStatus.isSuccess && tx && React__default.createElement("a", {
       className: "text-primary font-semibold",
       href: exports.config.explorerUrl + "/txns/" + tx,
       target: "_blank",
@@ -6467,7 +6464,7 @@
         color: primary
       },
       rel: "noreferrer"
-    }, "Click to view."), state === 'success' && detail), state !== null && React__default.createElement("button", {
+    }, "Click to view."), notificationStatus.isSuccess && detail), state !== null && React__default.createElement("button", {
       className: "__ref-swap-widget-notification__button __ref-swap-widget-button",
       style: {
         background: buttonBg,
@@ -6477,8 +6474,7 @@
       onClick: function onClick(e) {
         e.preventDefault();
         e.stopPropagation();
-        setOpen(false);
-        setState && setState(null);
+        setSwapState(null);
       }
     }, "Close"));
   };
@@ -6496,9 +6492,9 @@
       fill: "#7E8A93"
     })));
   };
-  var AccountButton = function AccountButton(_ref16) {
-    var AccountId = _ref16.AccountId,
-      onDisConnect = _ref16.onDisConnect;
+  var AccountButton = function AccountButton(_ref15) {
+    var AccountId = _ref15.AccountId,
+      onDisConnect = _ref15.onDisConnect;
     var _useState16 = React.useState(false),
       hoverAccount = _useState16[0],
       setHoverAccount = _useState16[1];
@@ -6544,7 +6540,9 @@
       defaultTokenOut = props.defaultTokenOut,
       onDisConnect = props.onDisConnect,
       darkMode = props.darkMode,
-      referralId = props.referralId;
+      referralId = props.referralId,
+      _props$minNearAmountL = props.minNearAmountLeftForGasFees,
+      minNearAmountLeftForGasFees = _props$minNearAmountL === void 0 ? 0.5 : _props$minNearAmountL;
     var curTheme = theme || (darkMode ? defaultDarkModeTheme : defaultTheme);
     var STORAGED_TOKEN_IN = localStorage.getItem(REF_WIDGET_SWAP_IN_KEY);
     var STORAGED_TOKEN_OUT = localStorage.getItem(REF_WIDGET_SWAP_OUT_KEY);
@@ -6572,28 +6570,27 @@
     var _useState2 = React.useState(),
       tokenOut = _useState2[0],
       setTokenOut = _useState2[1];
-    var _useState3 = React.useState(false),
-      notOpen = _useState3[0],
-      setNotOpen = _useState3[1];
-    React.useEffect(function () {
-      if (!transactionState) return;
-      if (transactionState && transactionState.state !== null) {
-        setNotOpen(true);
+    var _useState3 = React.useState('swap'),
+      widgetRoute = _useState3[0],
+      setWidgetRoute = _useState3[1];
+    var _useState4 = React.useState('1'),
+      amountIn = _useState4[0],
+      setAmountIn = _useState4[1];
+    var _useState5 = React.useState(false),
+      showSlip = _useState5[0],
+      setShowSlip = _useState5[1];
+    var _useState6 = React.useState(DEFAULT_SLIPPAGE_TOLERANCE),
+      slippageTolerance = _useState6[0],
+      setSlippageTolerance = _useState6[1];
+    var formattedSlippageTolerance = React.useMemo(function () {
+      try {
+        var formatted = Number(slippageTolerance);
+        if (Number.isNaN(formatted) || !isValidSlippageTolerance(formatted)) return +DEFAULT_SLIPPAGE_TOLERANCE;
+        return formatted;
+      } catch (_unused) {
+        return +DEFAULT_SLIPPAGE_TOLERANCE;
       }
-      transactionState == null ? void 0 : transactionState.setState((transactionState == null ? void 0 : transactionState.state) || null);
-    }, [transactionState]);
-    var _useState4 = React.useState('swap'),
-      widgetRoute = _useState4[0],
-      setWidgetRoute = _useState4[1];
-    var _useState5 = React.useState('1'),
-      amountIn = _useState5[0],
-      setAmountIn = _useState5[1];
-    var _useState6 = React.useState(false),
-      showSlip = _useState6[0],
-      setShowSlip = _useState6[1];
-    var _useState7 = React.useState(0.5),
-      slippageTolerance = _useState7[0],
-      setSlippageTolerance = _useState7[1];
+    }, [slippageTolerance]);
     var _useTokensIndexer = useTokensIndexer({
         defaultTokenList: defaultTokenList,
         AccountId: AccountId
@@ -6604,9 +6601,9 @@
     useAllTokens({
       reload: true
     });
-    var _useState8 = React.useState(false),
-      refreshTrigger = _useState8[0],
-      setRreshTrigger = _useState8[1];
+    var _useState7 = React.useState(false),
+      refreshTrigger = _useState7[0],
+      setRreshTrigger = _useState7[1];
     var tokenPriceList = useTokenPriceList();
     var _useRefPools = useRefPools(refreshTrigger),
       allPools = _useRefPools.allPools,
@@ -6664,7 +6661,7 @@
             return Number(p.shares_total_supply) > 0;
           })
         },
-        slippageTolerance: slippageTolerance,
+        slippageTolerance: formattedSlippageTolerance,
         onSwap: onSwap,
         AccountId: AccountId,
         refreshTrigger: refreshTrigger,
@@ -6697,10 +6694,10 @@
     }, [estimates, tokenIn, tokenOut, amountIn, amountOut, allStablePools]);
     var handleSubmit = function handleSubmit(e) {
       e.preventDefault();
-      setNotOpen(true);
+      transactionState.setState('waitingForConfirmation');
       makeSwap();
     };
-    var canSubmit = tokenIn && tokenOut && canSwap && !swapError && isSignedIn && new Big(tokenInBalance || '0').gte(amountIn || '0') && slippageTolerance > 0 && slippageTolerance < 100 && !ONLY_ZEROS.test(tokenInBalance);
+    var canSubmit = tokenIn && tokenOut && canSwap && !swapError && isSignedIn && new Big(tokenInBalance || '0').gte(amountIn || '0') && isValidSlippageTolerance(formattedSlippageTolerance) && !ONLY_ZEROS.test(tokenInBalance);
     var tokensLoaded = React.useMemo(function () {
       return tokens.length > 0;
     }, [tokens]);
@@ -6733,10 +6730,9 @@
     }), React__default.createElement(Slider, {
       showSlip: showSlip,
       setShowSlip: setShowSlip
-    }), React__default.createElement(SlippageSelector, {
+    }), showSlip && React__default.createElement(SlippageSelector, {
       slippageTolerance: slippageTolerance,
       onChangeSlippageTolerance: setSlippageTolerance,
-      showSlip: showSlip,
       setShowSlip: setShowSlip
     }))), React__default.createElement(TokenAmount, {
       amount: amountIn,
@@ -6747,7 +6743,8 @@
       onSelectToken: function onSelectToken() {
         if (!tokensLoaded) return;
         setWidgetRoute('token-selector-in');
-      }
+      },
+      minNearAmountLeftForGasFees: minNearAmountLeftForGasFees
     }), React__default.createElement("div", {
       className: "__ref-swap-widget-exchange-button __ref-swap-widget-row-flex-center ",
       style: {
@@ -6777,7 +6774,8 @@
       onForceUpdate: function onForceUpdate() {
         setRreshTrigger(!refreshTrigger);
       },
-      poolFetchingState: poolFetchingState
+      poolFetchingState: poolFetchingState,
+      minNearAmountLeftForGasFees: minNearAmountLeftForGasFees
     }), !swapError && amountIn && amountOut && React__default.createElement(DetailView, {
       fee: fee,
       rate: rate,
@@ -6840,11 +6838,9 @@
       style: {
         color: refIcon || 'black'
       }
-    }), "\xA0 Powered by Ref.finance")), React__default.createElement(Notification, {
-      state: transactionState == null ? void 0 : transactionState.state,
-      setState: transactionState == null ? void 0 : transactionState.setState,
-      open: notOpen,
-      setOpen: setNotOpen,
+    }), "\xA0 Powered by Ref.finance")), transactionState.state !== null && React__default.createElement(Notification, {
+      state: transactionState.state,
+      setSwapState: transactionState.setState,
       tx: transactionState == null ? void 0 : transactionState.tx,
       detail: transactionState == null ? void 0 : transactionState.detail
     })), widgetRoute === 'token-selector-in' && React__default.createElement(TokenSelector, {
@@ -8294,6 +8290,7 @@
   exports.DCLSwapGetStorageBalance = DCLSwapGetStorageBalance;
   exports.DCL_POOL_FEE_LIST = DCL_POOL_FEE_LIST;
   exports.DCL_POOL_SPLITER = DCL_POOL_SPLITER;
+  exports.DEFAULT_SLIPPAGE_TOLERANCE = DEFAULT_SLIPPAGE_TOLERANCE;
   exports.DefaultMainnetTokenList = DefaultMainnetTokenList;
   exports.DefaultTestnetTokenList = DefaultTestnetTokenList;
   exports.FEE_DIVISOR = FEE_DIVISOR;
@@ -8395,6 +8392,7 @@
   exports.isMobile = isMobile;
   exports.isStablePool = isStablePool;
   exports.isStablePoolToken = isStablePoolToken;
+  exports.isValidSlippageTolerance = isValidSlippageTolerance;
   exports.listDCLPools = listDCLPools;
   exports.list_active_orders = list_active_orders;
   exports.list_history_orders = list_history_orders;