@ref-finance/ref-sdk 1.3.9 → 1.3.11

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

@@ -5191,6 +5191,7 @@ var useTokenBalances = function useTokenBalances(tokens, AccountId) {
   };
 };
 
+var _ALLOWED_KEYS;
 var getPriceImpact$1 = function getPriceImpact(value, tokenIn, tokenInAmount) {
   var textColor = Number(value) <= 1 ? 'text-greenLight' : 1 < Number(value) && Number(value) <= 2 ? 'text-warn' : 'text-error';
   var displayValue = scientificNotationToString(multiply(tokenInAmount || '0', divide(value, '100')));
@@ -5501,6 +5502,34 @@ var HalfAndMaxAmount = function HalfAndMaxAmount(_ref6) {
     }
   }, "Max"));
 };
+var DECIMAL_POINT = '.';
+var ALLOWED_KEYS = (_ALLOWED_KEYS = {
+  '0': true,
+  '1': true,
+  '2': true,
+  '3': true,
+  '4': true,
+  '5': true,
+  '6': true,
+  '7': true,
+  '8': true,
+  '9': true
+}, _ALLOWED_KEYS[DECIMAL_POINT] = true, _ALLOWED_KEYS);
+var isValidInput = function isValidInput(value) {
+  var decimalPointsAmount = 0;
+  if (value === DECIMAL_POINT) return false;
+  for (var i = 0; i < value.length; i++) {
+    var _char = value[i];
+    if (!ALLOWED_KEYS[_char]) return false;
+    if (_char === DECIMAL_POINT) {
+      decimalPointsAmount++;
+      if (decimalPointsAmount === 2) {
+        return false;
+      }
+    }
+  }
+  return true;
+};
 var TokenAmount = function TokenAmount(props) {
   var _ref$current2;
   var balance = props.balance,
@@ -5566,7 +5595,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", {
@@ -5601,26 +5631,22 @@ 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",
     placeholder: !onChangeAmount ? '-' : '0.0',
     onChange: function onChange(_ref7) {
       var target = _ref7.target;
+      if (!isValidInput(target.value)) return;
       target.setCustomValidity('');
       handleChange(target.value);
     },
     disabled: !onChangeAmount,
-    onKeyDown: function onKeyDown(e) {
-      return symbolsArr.includes(e.key) && e.preventDefault();
-    },
     style: {
       color: primary,
       marginBottom: '8px',
@@ -6597,6 +6623,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", {
@@ -6638,6 +6667,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", {
@@ -6663,6 +6693,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() {
@@ -6699,7 +6730,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,