@ref-finance/ref-sdk 1.3.9 → 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

@@ -5501,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,
@@ -5521,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);
@@ -5566,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", {
@@ -5601,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;
@@ -5618,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',
@@ -6597,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", {
@@ -6638,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", {
@@ -6663,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() {
@@ -6699,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,