@ref-finance/ref-sdk 1.3.8 → 1.3.10

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

@@ -168,6 +168,8 @@
 
 .__ref-swap-widget-submit-button {
   width: 100%;
+  display: flex;
+  align-items: center;
   justify-content: center;
   font-size: 18px;
   font-weight: 700;
@@ -176,6 +178,28 @@
   margin-top: 14px;
   cursor: pointer;
 }
+
+.__ref-swap-widget-submit-button-loader {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #fff;
+  border-bottom-color: rgb(255, 255, 255);
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 .__ref-widget-swap-detail-view {
   justify-content: space-between;
   width: 100%;

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

@@ -531,18 +531,6 @@ function _extends() {
   };
   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);
@@ -4748,7 +4736,6 @@ var fetchAllPools = /*#__PURE__*/function () {
   };
 }();
 
-var _excluded = ["slippageTolerance", "refreshTrigger", "onSwap", "AccountId", "poolFetchingState", "referralId"];
 var ThemeContext = /*#__PURE__*/React.createContext(defaultTheme);
 var ThemeContextProvider = function ThemeContextProvider(_ref) {
   var customTheme = _ref.customTheme,
@@ -4927,7 +4914,7 @@ var useSwap = function useSwap(params) {
     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;
@@ -4949,6 +4936,15 @@ var useSwap = function useSwap(params) {
   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');
@@ -4990,8 +4986,16 @@ var useSwap = function useSwap(params) {
                 _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();
           }
@@ -5053,6 +5057,9 @@ var useSwap = function useSwap(params) {
   return {
     amountOut: amountOut,
     minAmountOut: minAmountOut,
+    balances: balances,
+    tokenInBalance: tokenInBalance,
+    tokenOutBalance: tokenOutBalance,
     fee: fee,
     rate: rate,
     estimates: estimates,
@@ -5080,30 +5087,108 @@ var TokenPriceContextProvider = function TokenPriceContextProvider(_ref7) {
     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
+  };
 };
 
 var getPriceImpact$1 = function getPriceImpact(value, tokenIn, tokenInAmount) {
@@ -5416,6 +5501,8 @@ var HalfAndMaxAmount = function HalfAndMaxAmount(_ref6) {
     }
   }, "Max"));
 };
+var DECIMAL_POINT = '.';
+var ALLOWED_KEYS = ['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight', 'Delete', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', DECIMAL_POINT];
 var TokenAmount = function TokenAmount(props) {
   var _ref$current2;
   var balance = props.balance,
@@ -5436,6 +5523,28 @@ var TokenAmount = function TokenAmount(props) {
   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);
@@ -5481,7 +5590,8 @@ var TokenAmount = function TokenAmount(props) {
   }, !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", {
@@ -5516,16 +5626,16 @@ var TokenAmount = function TokenAmount(props) {
   }, 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;
@@ -5533,9 +5643,6 @@ var TokenAmount = function TokenAmount(props) {
       handleChange(target.value);
     },
     disabled: !onChangeAmount,
-    onKeyDown: function onKeyDown(e) {
-      return symbolsArr.includes(e.key) && e.preventDefault();
-    },
     style: {
       color: primary,
       marginBottom: '8px',
@@ -6383,15 +6490,9 @@ var SwapWidget = function SwapWidget(props) {
   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) {
@@ -6399,18 +6500,18 @@ var SwapWidget = function SwapWidget(props) {
     }
     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
@@ -6421,10 +6522,9 @@ var SwapWidget = function SwapWidget(props) {
   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,
@@ -6466,28 +6566,6 @@ var SwapWidget = function SwapWidget(props) {
       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,
@@ -6509,10 +6587,14 @@ var SwapWidget = function SwapWidget(props) {
       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,
@@ -6537,6 +6619,9 @@ var SwapWidget = function SwapWidget(props) {
     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", {
@@ -6578,6 +6663,7 @@ var SwapWidget = function SwapWidget(props) {
     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", {
@@ -6603,6 +6689,7 @@ var SwapWidget = function SwapWidget(props) {
     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() {
@@ -6639,7 +6726,9 @@ var SwapWidget = function SwapWidget(props) {
       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,