@ref-finance/ref-sdk 1.3.8 → 1.3.10

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

@@ -512,18 +512,6 @@
     };
     return _extends.apply(this, arguments);
   }
-  function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-    for (i = 0; i < sourceKeys.length; i++) {
-      key = sourceKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      target[key] = source[key];
-    }
-    return target;
-  }
   function _unsupportedIterableToArray(o, minLen) {
     if (!o) return;
     if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -4729,7 +4717,6 @@
     };
   }();
 
-  var _excluded = ["slippageTolerance", "refreshTrigger", "onSwap", "AccountId", "poolFetchingState", "referralId"];
   var ThemeContext = /*#__PURE__*/React.createContext(defaultTheme);
   var ThemeContextProvider = function ThemeContextProvider(_ref) {
     var customTheme = _ref.customTheme,
@@ -4908,7 +4895,7 @@
       AccountId = params.AccountId,
       poolFetchingState = params.poolFetchingState,
       referralId = params.referralId,
-      swapParams = _objectWithoutPropertiesLoose(params, _excluded);
+      tokens = params.tokens;
     var tokenIn = params.tokenIn,
       tokenOut = params.tokenOut,
       amountIn = params.amountIn;
@@ -4930,6 +4917,15 @@
     var _useState14 = React.useState(false),
       forceEstimate = _useState14[0],
       setForceEstimate = _useState14[1];
+    var _useTokenBalances = useTokenBalances(tokens, AccountId),
+      balances = _useTokenBalances.balances,
+      updateTokenBalance = _useTokenBalances.updateTokenBalance;
+    var tokenInBalance = React.useMemo(function () {
+      return balances[tokenIn == null ? void 0 : tokenIn.id];
+    }, [tokenIn, balances]);
+    var tokenOutBalance = React.useMemo(function () {
+      return balances[tokenOut == null ? void 0 : tokenOut.id] || '';
+    }, [tokenOut, balances]);
     var minAmountOut = amountOut ? percentLess(slippageTolerance, amountOut) : '';
     var fee = !params.tokenOut || !params.tokenIn ? 0 : getAvgFee(estimates, params.tokenOut.id, toNonDivisibleNumber(params.tokenIn.decimals, params.amountIn));
     var rate = calculateExchangeRate(ONLY_ZEROS.test(params.amountIn) ? '1' : params.amountIn, amountOut || '1');
@@ -4971,8 +4967,16 @@
                   _minAmountOut = percentLess(slippageTolerance, scientificNotationToString(bigEstimate.toString()));
                   transactionsRef.push(nearWithdrawTransaction(_minAmountOut));
                 }
-                onSwap(transactionsRef);
-              case 8:
+                _context3.next = 9;
+                return onSwap(transactionsRef);
+              case 9:
+                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 "end":
                 return _context3.stop();
             }
@@ -5034,6 +5038,9 @@
     return {
       amountOut: amountOut,
       minAmountOut: minAmountOut,
+      balances: balances,
+      tokenInBalance: tokenInBalance,
+      tokenOutBalance: tokenOutBalance,
       fee: fee,
       rate: rate,
       estimates: estimates,
@@ -5061,30 +5068,108 @@
       value: tokenPriceList
     }, children);
   };
-  var useTokenBalnces = function useTokenBalnces(tokens, AccountId) {
+  var useTokenBalances = function useTokenBalances(tokens, AccountId) {
     var _useState16 = React.useState({}),
       balances = _useState16[0],
       setBalances = _useState16[1];
+    var updateTokenBalance = React.useCallback( /*#__PURE__*/function () {
+      var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(tokenIds, AccountId) {
+        var updatedTokensBalancesMap;
+        return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+          while (1) {
+            switch (_context5.prev = _context5.next) {
+              case 0:
+                updatedTokensBalancesMap = {};
+                _context5.next = 3;
+                return Promise.all(tokenIds.map( /*#__PURE__*/function () {
+                  var _ref9 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(tokenId) {
+                    var _tokens$find;
+                    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+                      while (1) {
+                        switch (_context4.prev = _context4.next) {
+                          case 0:
+                            _context4.t0 = toReadableNumber;
+                            _context4.t1 = ((_tokens$find = tokens.find(function (t) {
+                              return t.id === tokenId;
+                            })) == null ? void 0 : _tokens$find.decimals) || 0;
+                            _context4.next = 4;
+                            return ftGetBalance(tokenId === exports.WRAP_NEAR_CONTRACT_ID ? 'NEAR' : tokenId, AccountId);
+                          case 4:
+                            _context4.t2 = _context4.sent;
+                            updatedTokensBalancesMap[tokenId] = (0, _context4.t0)(_context4.t1, _context4.t2);
+                          case 6:
+                          case "end":
+                            return _context4.stop();
+                        }
+                      }
+                    }, _callee4);
+                  }));
+                  return function (_x3) {
+                    return _ref9.apply(this, arguments);
+                  };
+                }()));
+              case 3:
+                setBalances(function (prevState) {
+                  return _extends({}, prevState, updatedTokensBalancesMap);
+                });
+              case 4:
+              case "end":
+                return _context5.stop();
+            }
+          }
+        }, _callee5);
+      }));
+      return function (_x, _x2) {
+        return _ref8.apply(this, arguments);
+      };
+    }(), [tokens]);
     React.useEffect(function () {
-      var validTokens = tokens.filter(function (t) {
-        return !!(t != null && t.id);
-      });
-      var ids = validTokens.map(function (token) {
-        return token.id;
-      });
-      Promise.all(ids.map(function (id) {
-        return ftGetBalance(id === exports.WRAP_NEAR_CONTRACT_ID ? 'NEAR' : id, AccountId);
-      })).then(function (balances) {
-        var balancesMap = validTokens.reduce(function (acc, token, index) {
-          var _extends2;
-          return _extends({}, acc, (_extends2 = {}, _extends2[token.id] = toReadableNumber(token.decimals, balances[index]), _extends2));
-        }, {});
-        setBalances(balancesMap);
-      });
-    }, [tokens.map(function (t) {
+      // Initializes token balances
+      // Called in 1 minute intervals
+      var initTokenBalances = /*#__PURE__*/function () {
+        var _ref10 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+          var validTokens, ids;
+          return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+            while (1) {
+              switch (_context6.prev = _context6.next) {
+                case 0:
+                  if (AccountId) {
+                    _context6.next = 3;
+                    break;
+                  }
+                  setBalances({});
+                  return _context6.abrupt("return");
+                case 3:
+                  validTokens = tokens.filter(function (t) {
+                    return !!(t != null && t.id);
+                  });
+                  ids = validTokens.map(function (token) {
+                    return token.id;
+                  });
+                  updateTokenBalance(ids, AccountId);
+                case 6:
+                case "end":
+                  return _context6.stop();
+              }
+            }
+          }, _callee6);
+        }));
+        return function initTokenBalances() {
+          return _ref10.apply(this, arguments);
+        };
+      }();
+      initTokenBalances();
+      var interval = setInterval(initTokenBalances, 60000);
+      return function () {
+        return clearInterval(interval);
+      };
+    }, [AccountId, tokens.map(function (t) {
       return t == null ? void 0 : t.id;
     }).join('-')]);
-    return balances;
+    return {
+      balances: balances,
+      updateTokenBalance: updateTokenBalance
+    };
   };
 
   function styleInject(css, ref) {
@@ -5114,7 +5199,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  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.__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: 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 getPriceImpact$1 = function getPriceImpact(value, tokenIn, tokenInAmount) {
@@ -5427,6 +5512,8 @@
       }
     }, "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 TokenAmount = function TokenAmount(props) {
     var _ref$current2;
     var balance = props.balance,
@@ -5447,6 +5534,28 @@
     var _useState5 = React.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);
@@ -5492,7 +5601,8 @@
     }, !token ? React__default.createElement(React__default.Fragment, null, React__default.createElement("span", {
       style: {
         whiteSpace: 'nowrap',
-        height: '26px'
+        height: '26px',
+        userSelect: 'none'
       },
       className: "__ref-swap-widget-row-flex-center"
     }, "Select Token")) : React__default.createElement(React__default.Fragment, null, React__default.createElement("img", {
@@ -5527,16 +5637,16 @@
     }, React__default.createElement("input", {
       ref: ref,
       max: !!onChangeAmount ? curMax : undefined,
-      min: "0",
       onWheel: function onWheel() {
         if (ref.current) {
           ref.current.blur();
         }
       },
       className: "__ref-swap-widget-input-class",
-      step: "any",
       value: amount,
-      type: "number",
+      type: "text",
+      onKeyDown: handleKeyDown,
+      onPaste: handlePaste,
       placeholder: !onChangeAmount ? '-' : '0.0',
       onChange: function onChange(_ref7) {
         var target = _ref7.target;
@@ -5544,9 +5654,6 @@
         handleChange(target.value);
       },
       disabled: !onChangeAmount,
-      onKeyDown: function onKeyDown(e) {
-        return symbolsArr.includes(e.key) && e.preventDefault();
-      },
       style: {
         color: primary,
         marginBottom: '8px',
@@ -6394,15 +6501,9 @@
     var _useState2 = React.useState(),
       tokenOut = _useState2[0],
       setTokenOut = _useState2[1];
-    var _useState3 = React.useState(''),
-      tokenInBalance = _useState3[0],
-      setTokenInBalance = _useState3[1];
-    var _useState4 = React.useState(''),
-      tokenOutBalance = _useState4[0],
-      setTokenOutBalance = _useState4[1];
-    var _useState5 = React.useState(false),
-      notOpen = _useState5[0],
-      setNotOpen = _useState5[1];
+    var _useState3 = React.useState(false),
+      notOpen = _useState3[0],
+      setNotOpen = _useState3[1];
     React.useEffect(function () {
       if (!transactionState) return;
       if (transactionState && transactionState.state !== null) {
@@ -6410,18 +6511,18 @@
       }
       transactionState == null ? void 0 : transactionState.setState((transactionState == null ? void 0 : transactionState.state) || null);
     }, [transactionState]);
-    var _useState6 = React.useState('swap'),
-      widgetRoute = _useState6[0],
-      setWidgetRoute = _useState6[1];
-    var _useState7 = React.useState('1'),
-      amountIn = _useState7[0],
-      setAmountIn = _useState7[1];
-    var _useState8 = React.useState(false),
-      showSlip = _useState8[0],
-      setShowSlip = _useState8[1];
-    var _useState9 = React.useState(0.5),
-      slippageTolerance = _useState9[0],
-      setSlippageTolerance = _useState9[1];
+    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];
     var _useTokensIndexer = useTokensIndexer({
         defaultTokenList: defaultTokenList,
         AccountId: AccountId
@@ -6432,10 +6533,9 @@
     useAllTokens({
       reload: true
     });
-    var balances = useTokenBalnces(tokens, AccountId);
-    var _useState10 = React.useState(false),
-      refreshTrigger = _useState10[0],
-      setRreshTrigger = _useState10[1];
+    var _useState8 = React.useState(false),
+      refreshTrigger = _useState8[0],
+      setRreshTrigger = _useState8[1];
     var tokenPriceList = useTokenPriceList();
     var _useRefPools = useRefPools(refreshTrigger),
       allPools = _useRefPools.allPools,
@@ -6477,28 +6577,6 @@
         handleSetTokenOut(exports.REF_META_DATA);
       }
     }, [tokens, tokenLoading]);
-    React.useEffect(function () {
-      if (!tokenIn) return;
-      var wrapedId = tokenIn.id === exports.WRAP_NEAR_CONTRACT_ID ? 'NEAR' : tokenIn.id;
-      if (balances[wrapedId]) {
-        setTokenInBalance(balances[wrapedId]);
-        return;
-      }
-      ftGetBalance(wrapedId, AccountId).then(function (available) {
-        setTokenInBalance(toReadableNumber(tokenIn.decimals, available));
-      });
-    }, [tokenIn, AccountId, balances]);
-    React.useEffect(function () {
-      if (!tokenOut) return;
-      var wrapedId = tokenOut.id === exports.WRAP_NEAR_CONTRACT_ID ? 'NEAR' : tokenOut.id;
-      if (balances[wrapedId]) {
-        setTokenOutBalance(balances[wrapedId]);
-        return;
-      }
-      ftGetBalance(wrapedId, AccountId).then(function (available) {
-        setTokenOutBalance(toReadableNumber(tokenOut.decimals, available));
-      });
-    }, [tokenOut, AccountId, balances]);
     var _useSwap = useSwap({
         tokenIn: tokenIn,
         tokenOut: tokenOut,
@@ -6520,10 +6598,14 @@
         AccountId: AccountId,
         refreshTrigger: refreshTrigger,
         poolFetchingState: poolFetchingState,
-        referralId: referralId
+        referralId: referralId,
+        tokens: tokens
       }),
       amountOut = _useSwap.amountOut,
       minAmountOut = _useSwap.minAmountOut,
+      balances = _useSwap.balances,
+      tokenInBalance = _useSwap.tokenInBalance,
+      tokenOutBalance = _useSwap.tokenOutBalance,
       rate = _useSwap.rate,
       fee = _useSwap.fee,
       estimates = _useSwap.estimates,
@@ -6548,6 +6630,9 @@
       makeSwap();
     };
     var canSubmit = tokenIn && tokenOut && canSwap && !swapError && isSignedIn && new Big(tokenInBalance || '0').gte(amountIn || '0') && slippageTolerance > 0 && slippageTolerance < 100 && !ONLY_ZEROS.test(tokenInBalance);
+    var tokensLoaded = React.useMemo(function () {
+      return tokens.length > 0;
+    }, [tokens]);
     return React__default.createElement(ThemeContextProvider, {
       customTheme: curTheme
     }, React__default.createElement(TokenPriceContextProvider, null, widgetRoute === 'swap' && React__default.createElement("form", {
@@ -6589,6 +6674,7 @@
       price: !tokenIn ? null : tokenPriceList == null ? void 0 : (_tokenPriceList$token = tokenPriceList[tokenIn.id]) == null ? void 0 : _tokenPriceList$token.price,
       onChangeAmount: setAmountIn,
       onSelectToken: function onSelectToken() {
+        if (!tokensLoaded) return;
         setWidgetRoute('token-selector-in');
       }
     }), React__default.createElement("div", {
@@ -6614,6 +6700,7 @@
       token: tokenOut,
       price: !tokenOut ? null : tokenPriceList == null ? void 0 : (_tokenPriceList$token2 = tokenPriceList[tokenOut.id]) == null ? void 0 : _tokenPriceList$token2.price,
       onSelectToken: function onSelectToken() {
+        if (!tokensLoaded) return;
         setWidgetRoute('token-selector-out');
       },
       onForceUpdate: function onForceUpdate() {
@@ -6650,7 +6737,9 @@
         cursor: !canSubmit ? 'not-allowed' : 'pointer'
       },
       disabled: !canSubmit
-    }, 'Swap') : React__default.createElement("button", {
+    }, tokensLoaded ? 'Swap' : React__default.createElement("div", {
+      className: "__ref-swap-widget-submit-button-loader"
+    })) : React__default.createElement("button", {
       type: "button",
       className: "__ref-swap-widget-submit-button __ref-swap-widget-button",
       onClick: onConnect,