@ref-finance/ref-sdk 1.4.1 → 1.4.3

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

@@ -31,6 +31,7 @@ var TiWarning = require('@react-icons/all-files/ti/TiWarning');
 var CgArrowsExchangeAltV = require('@react-icons/all-files/cg/CgArrowsExchangeAltV');
 
 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';
@@ -3648,8 +3649,11 @@ function divide(numerator, denominator) {
     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);
@@ -4400,7 +4404,7 @@ var OrderNoRemainedAmount = /*#__PURE__*/formatError('No remained amount on this
 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) {
@@ -4465,24 +4469,9 @@ var instantSwap = /*#__PURE__*/function () {
                 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];
@@ -4540,7 +4529,7 @@ var instantSwap = /*#__PURE__*/function () {
               }]
             });
             return _context2.abrupt("return", transactions);
-          case 19:
+          case 12:
           case "end":
             return _context2.stop();
         }
@@ -4756,7 +4745,7 @@ var fetchAllPools = /*#__PURE__*/function () {
             });
           case 3:
             _pools = _context7.sent;
-            if (!(_pools.code !== 0 || !_pools.simplePools)) {
+            if (_pools.simplePools) {
               _context7.next = 6;
               break;
             }
@@ -5018,12 +5007,12 @@ var useSwap = function useSwap(params) {
   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;
               }
@@ -5036,14 +5025,32 @@ var useSwap = function useSwap(params) {
                 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);
@@ -5054,16 +5061,16 @@ var useSwap = function useSwap(params) {
                 _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();
           }
@@ -5607,7 +5614,8 @@ var TokenAmount = function TokenAmount(props) {
     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,
@@ -5627,14 +5635,14 @@ var TokenAmount = function TokenAmount(props) {
     }
   };
   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: {
@@ -5736,7 +5744,7 @@ var TokenAmount = function TokenAmount(props) {
     }
   }, 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
   })));
@@ -5744,7 +5752,6 @@ var TokenAmount = function TokenAmount(props) {
 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],
@@ -5755,30 +5762,26 @@ var SlippageSelector = function SlippageSelector(_ref8) {
     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();
     },
@@ -5797,33 +5800,21 @@ var SlippageSelector = function SlippageSelector(_ref8) {
     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", {
@@ -5838,7 +5829,7 @@ var SlippageSelector = function SlippageSelector(_ref8) {
     onClick: function onClick(e) {
       e.stopPropagation();
       e.preventDefault();
-      onChangeSlippageTolerance(0.5);
+      onChangeSlippageTolerance(DEFAULT_SLIPPAGE_TOLERANCE);
       setInValid(false);
     }
   }, "Auto")), invalid && React__default.createElement("div", {
@@ -5846,7 +5837,7 @@ var SlippageSelector = function SlippageSelector(_ref8) {
     style: {
       color: '#FF7575',
       fontSize: '12px',
-      padding: '10px 0px',
+      padding: '10px 0px 0px 0px',
       alignItems: 'start'
     }
   }, React__default.createElement(IoWarning.IoWarning, {
@@ -5857,11 +5848,11 @@ var SlippageSelector = function SlippageSelector(_ref8) {
     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,
@@ -5938,16 +5929,16 @@ var StarToken = function StarToken(_ref10) {
     }
   }, !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,
@@ -6063,14 +6054,14 @@ var Token = function Token(_ref11) {
     }
   })));
 };
-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];
@@ -6133,13 +6124,13 @@ var TokenListTable = function TokenListTable(_ref12) {
     });
   })));
 };
-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,
@@ -6241,9 +6232,9 @@ var TokenSelector = function TokenSelector(_ref13) {
     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];
@@ -6261,7 +6252,8 @@ var Slider = function Slider(_ref14) {
     },
     onClick: function onClick() {
       return setShowSlip(true);
-    }
+    },
+    className: "cursor-pointer"
   }, React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -6416,18 +6408,23 @@ var RouterIcon = function RouterIcon() {
     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: {
@@ -6436,18 +6433,18 @@ var Notification = function Notification(_ref15) {
     }
   }, 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",
@@ -6457,7 +6454,7 @@ var Notification = function Notification(_ref15) {
       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,
@@ -6467,8 +6464,7 @@ var Notification = function Notification(_ref15) {
     onClick: function onClick(e) {
       e.preventDefault();
       e.stopPropagation();
-      setOpen(false);
-      setState && setState(null);
+      setSwapState(null);
     }
   }, "Close"));
 };
@@ -6486,9 +6482,9 @@ var ArrowRight = function ArrowRight() {
     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];
@@ -6534,7 +6530,9 @@ var SwapWidget = function SwapWidget(props) {
     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);
@@ -6562,28 +6560,27 @@ var SwapWidget = function SwapWidget(props) {
   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
@@ -6594,9 +6591,9 @@ var SwapWidget = function SwapWidget(props) {
   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,
@@ -6654,7 +6651,7 @@ var SwapWidget = function SwapWidget(props) {
           return Number(p.shares_total_supply) > 0;
         })
       },
-      slippageTolerance: slippageTolerance,
+      slippageTolerance: formattedSlippageTolerance,
       onSwap: onSwap,
       AccountId: AccountId,
       refreshTrigger: refreshTrigger,
@@ -6687,10 +6684,10 @@ var SwapWidget = function SwapWidget(props) {
   }, [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]);
@@ -6723,10 +6720,9 @@ var SwapWidget = function SwapWidget(props) {
   }), 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,
@@ -6737,7 +6733,8 @@ var SwapWidget = function SwapWidget(props) {
     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: {
@@ -6767,7 +6764,8 @@ var SwapWidget = function SwapWidget(props) {
     onForceUpdate: function onForceUpdate() {
       setRreshTrigger(!refreshTrigger);
     },
-    poolFetchingState: poolFetchingState
+    poolFetchingState: poolFetchingState,
+    minNearAmountLeftForGasFees: minNearAmountLeftForGasFees
   }), !swapError && amountIn && amountOut && React__default.createElement(DetailView, {
     fee: fee,
     rate: rate,
@@ -6830,11 +6828,9 @@ var SwapWidget = function SwapWidget(props) {
     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, {
@@ -8284,6 +8280,7 @@ exports.DCLSwapByInputOnBestPool = DCLSwapByInputOnBestPool;
 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;
@@ -8385,6 +8382,7 @@ exports.instantSwap = instantSwap;
 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;