@depay/widgets 6.31.1 → 7.0.2

package/dist/umd/index.js

@@ -1,14 +1,13 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@depay/react-dialog-stack'), require('@depay/web3-wallets'), require('react-dom'), require('@depay/react-shadow-dom'), require('ethers'), require('@depay/web3-constants'), require('decimal.js'), require('@depay/web3-exchanges'), require('@depay/web3-tokens'), require('@depay/local-currency'), require('@depay/web3-client'), require('@depay/web3-blockchains'), require('@depay/web3-payments'), require('react-rangeslider'), require('@depay/react-token-image')) :
-  typeof define === 'function' && define.amd ? define(['react', '@depay/react-dialog-stack', '@depay/web3-wallets', 'react-dom', '@depay/react-shadow-dom', 'ethers', '@depay/web3-constants', 'decimal.js', '@depay/web3-exchanges', '@depay/web3-tokens', '@depay/local-currency', '@depay/web3-client', '@depay/web3-blockchains', '@depay/web3-payments', 'react-rangeslider', '@depay/react-token-image'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DePayWidgets = factory(global.React, global.ReactDialogStack, global.Web3Wallets, global.ReactDOM, global.ReactShadowDOM, global.ethers, global.Web3Constants, global.Decimal, global.Web3Exchanges, global.Web3Tokens, global.LocalCurrency, global.Web3Client, global.Web3Blockchains, global.Web3Payments, global.ReactRangeslider, global.ReactTokenImage));
-})(this, (function (React, reactDialogStack, web3Wallets, ReactDOM, reactShadowDom, ethers, web3Constants, decimal_js, web3Exchanges, web3Tokens, localCurrency, web3Client, web3Blockchains, web3Payments, Slider, reactTokenImage) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@depay/react-dialog-stack'), require('@depay/web3-wallets'), require('react-dom'), require('@depay/react-shadow-dom'), require('ethers'), require('@depay/web3-constants'), require('decimal.js'), require('@depay/web3-exchanges'), require('@depay/web3-tokens'), require('@depay/local-currency'), require('@depay/web3-client'), require('@depay/web3-blockchains'), require('@depay/web3-payments'), require('@depay/react-token-image')) :
+  typeof define === 'function' && define.amd ? define(['react', '@depay/react-dialog-stack', '@depay/web3-wallets', 'react-dom', '@depay/react-shadow-dom', 'ethers', '@depay/web3-constants', 'decimal.js', '@depay/web3-exchanges', '@depay/web3-tokens', '@depay/local-currency', '@depay/web3-client', '@depay/web3-blockchains', '@depay/web3-payments', '@depay/react-token-image'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DePayWidgets = factory(global.React, global.ReactDialogStack, global.Web3Wallets, global.ReactDOM, global.ReactShadowDOM, global.ethers, global.Web3Constants, global.Decimal, global.Web3Exchanges, global.Web3Tokens, global.LocalCurrency, global.Web3Client, global.Web3Blockchains, global.Web3Payments, global.ReactTokenImage));
+})(this, (function (React, reactDialogStack, web3Wallets, ReactDOM, reactShadowDom, ethers, web3Constants, decimal_js, web3Exchanges, web3Tokens, localCurrency, web3Client, web3Blockchains, web3Payments, reactTokenImage) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
-  var Slider__default = /*#__PURE__*/_interopDefaultLegacy(Slider);
 
   function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -722,34 +721,37 @@
         navigate = _useContext.navigate;
 
     var wallet = web3Wallets.getWallet();
-    React.useEffect( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
-      var accounts;
-      return regenerator.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              if (!wallet) {
-                _context.next = 5;
-                break;
-              }
+    React.useEffect(function () {
+      _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
+        var accounts;
+        return regenerator.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (!wallet) {
+                  _context.next = 5;
+                  break;
+                }
 
-              _context.next = 3;
-              return wallet.accounts();
+                _context.next = 3;
+                return wallet.accounts();
 
-            case 3:
-              accounts = _context.sent;
+              case 3:
+                accounts = _context.sent;
 
-              if (accounts == undefined || accounts.length == 0) {
-                navigate('ConnectingWallet');
-              }
+                if (accounts == undefined || accounts.length == 0) {
+                  navigate('ConnectingWallet');
+                  props.connect(wallet);
+                }
 
-            case 5:
-            case "end":
-              return _context.stop();
+              case 5:
+              case "end":
+                return _context.stop();
+            }
           }
-        }
-      }, _callee);
-    })), [wallet]);
+        }, _callee);
+      }))();
+    }, [wallet]);
 
     var connect = function connect(walletClass) {
       var wallet = new walletClass();
@@ -833,6 +835,7 @@
         setWallet = _useState4[1];
 
     var connect = function connect(wallet) {
+      console.log('CONNECT');
       wallet.connect().then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
         var accounts;
         return regenerator.wrap(function _callee$(_context) {
@@ -883,40 +886,40 @@
         setWallet(wallet);
       }
     }, []);
-    React.useEffect( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2() {
-      var accounts;
-      return regenerator.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              if (!wallet) {
-                _context2.next = 5;
-                break;
-              }
+    React.useEffect(function () {
+      _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2() {
+        var accounts;
+        return regenerator.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                if (!wallet) {
+                  _context2.next = 5;
+                  break;
+                }
 
-              _context2.next = 3;
-              return wallet.accounts();
+                _context2.next = 3;
+                return wallet.accounts();
 
-            case 3:
-              accounts = _context2.sent;
+              case 3:
+                accounts = _context2.sent;
 
-              if (accounts instanceof Array && accounts.length > 0) {
-                if (props.resolve) props.resolve({
-                  wallet: wallet,
-                  account: accounts[0],
-                  accounts: accounts
-                });
-              } else {
-                connect(wallet);
-              }
+                if (accounts instanceof Array && accounts.length > 0) {
+                  if (props.resolve) props.resolve({
+                    wallet: wallet,
+                    account: accounts[0],
+                    accounts: accounts
+                  });
+                }
 
-            case 5:
-            case "end":
-              return _context2.stop();
+              case 5:
+              case "end":
+                return _context2.stop();
+            }
           }
-        }
-      }, _callee2);
-    })), [wallet]);
+        }, _callee2);
+      }))();
+    }, [wallet]);
     return /*#__PURE__*/React__default["default"].createElement(reactDialogStack.ReactDialogStack, {
       open: open,
       close: close,
@@ -1086,7 +1089,7 @@
   `
   }
 
-  const _jsxFileName = "/home/runner/work/react-dialog/react-dialog/src/components/Dialog.jsx";
+  const _jsxFileName$1 = "/home/runner/work/react-dialog/react-dialog/src/components/Dialog.jsx";
   class Dialog extends React__default["default"].Component {
     constructor(props) {
       super(props);
@@ -1137,10 +1140,10 @@
       const classNames = ['ReactDialog', this.state.open ? 'ReactDialogOpen' : ''];
       const style = ReactDialogStyle({ background: this.props.background });
       return (
-        React__default["default"].createElement('div', { className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName, lineNumber: 56}}
-          , React__default["default"].createElement('style', {__self: this, __source: {fileName: _jsxFileName, lineNumber: 57}}, style)
-          , React__default["default"].createElement('div', { className: "ReactDialogInner", __self: this, __source: {fileName: _jsxFileName, lineNumber: 58}}
-            , React__default["default"].createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName, lineNumber: 59}} )
+        React__default["default"].createElement('div', { className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 55}}
+          , React__default["default"].createElement('style', {__self: this, __source: {fileName: _jsxFileName$1, lineNumber: 56}}, style)
+          , React__default["default"].createElement('div', { className: "ReactDialogInner", __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 57}}
+            , React__default["default"].createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 58}} )
             , this.props.children
           )
         )
@@ -1148,7 +1151,7 @@
     }
   }
 
-  const _jsxFileName$1 = "/home/runner/work/react-dialog/react-dialog/src/index.jsx";
+  const _jsxFileName = "/home/runner/work/react-dialog/react-dialog/src/index.jsx";
   class ReactDialog extends React__default["default"].Component {
     constructor(props) {
       super(props);
@@ -1177,7 +1180,7 @@
             background: this.props.background,
             close: this.props.close,
             document: _document,
-            open: this.props.open, __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 29}}
+            open: this.props.open, __self: this, __source: {fileName: _jsxFileName, lineNumber: 29}}
           
             , this.props.children
           ),
@@ -1320,7 +1323,7 @@
   });
 
   var FontStyle = (function (style) {
-    return "\n\n    *, div, div * {\n      font-family: ".concat(style.fontFamily, ";\n    }\n\n    .FontSizeS {\n      font-size: 16px;\n    }\n\n    .FontSizeM {\n      font-size: 19px;\n    }\n\n    .FontSizeL {\n      font-size: 23px;\n    }\n\n    .FontSizeXL {\n      font-size: 32px;\n    }\n\n    .FontWeightBold {\n      font-weight: bold;\n    }\n\n    .FontItalic {\n      font-style: italic;\n    }\n  ");
+    return "\n\n    *, div, div * {\n      font-family: ".concat(style.fontFamily, ";\n    }\n\n    .FontSizeS {\n      font-size: 16px;\n    }\n\n    .FontSizeM {\n      font-size: 19px;\n    }\n\n    .FontSizeL {\n      font-size: 23px;\n    }\n\n    .FontSizeXL {\n      font-size: 32px;\n    }\n\n    .FontSizeXXL {\n      font-size: 42px;\n    }\n\n    .FontWeightBold {\n      font-weight: bold;\n    }\n\n    .FontItalic {\n      font-style: italic;\n    }\n  ");
   });
 
   var GraphicStyle = (function () {
@@ -1413,7 +1416,7 @@
       },
       fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
     }, style);
-    return [ResetStyle(), DialogStyle(style), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), FontStyle(style), IconStyle(style), OpacityStyle(style), PaddingStyle(), HeightStyle(), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(style), TextButtonStyle(style), ImageStyle(style), BlockchainLogoStyle(style), SearchStyle(style), TokenImageStyle(style), AlertStyle(style), TableStyle(style), LinkStyle(style), TooltipStyle(style)].join('');
+    return [ResetStyle(), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), FontStyle(style), IconStyle(style), OpacityStyle(), PaddingStyle(), HeightStyle(), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle(), BlockchainLogoStyle(), SearchStyle(style), TokenImageStyle(), AlertStyle(), TableStyle(), LinkStyle(style), TooltipStyle(style)].join('');
   });
 
   var mount = (function (_ref, content) {
@@ -2687,15 +2690,14 @@
         className: "PaddingLeftM PaddingRightM"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS TextCenter PaddingBottomL"
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "FontSizeL"
-      }, /*#__PURE__*/React__default["default"].createElement("input", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("input", {
         max: parseFloat(maxAmount),
         min: min,
         step: step,
-        className: "Input FontSizeXL TextAlignCenter",
+        className: "Input FontSizeXXL TextAlignCenter",
         type: "number",
         name: "amount",
+        autoFocus: true,
         value: parseFloat(inputAmount),
         onChange: function onChange(event) {
           changeAmount(event.target.value);
@@ -2703,18 +2705,7 @@
         onBlur: function onBlur(event) {
           setValidValue(event.target.value);
         }
-      })), /*#__PURE__*/React__default["default"].createElement(Slider__default["default"], {
-        max: parseFloat(maxAmount),
-        min: min,
-        step: step,
-        value: parseFloat(inputAmount),
-        onChange: function onChange(value) {
-          changeAmount(toValidStep(value));
-        },
-        onChangeComplete: function onChangeComplete() {
-          setValidValue(inputAmount);
-        }
-      }), /*#__PURE__*/React__default["default"].createElement("div", {
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
         style: {
           height: '40px'
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@depay/widgets",
   "moduleName": "DePayWidgets",
-  "version": "6.31.1",
+  "version": "7.0.2",
   "description": "Web3 Payments with any token. DePay simplifies and improves Web3 Payments with the power of DeFi. Accept any token with on-the-fly conversion.",
   "main": "./dist/umd/index.js",
   "module": "./dist/esm/index.js",
@@ -35,10 +35,10 @@
   "dependencies": {
     "@depay/coinbase-wallet-sdk": "^1.0.5",
     "@depay/local-currency": "^3.2.2",
-    "@depay/react-dialog-stack": "^5.0.1",
-    "@depay/react-shadow-dom": "^4.2.0",
+    "@depay/react-dialog-stack": "^6.0.0",
+    "@depay/react-shadow-dom": "^5.0.0",
     "@depay/react-token-image": "^4.0.0",
-    "@depay/walletconnect-v1": "^1.1.0",
+    "@depay/walletconnect-v1": "^1.7.8",
     "@depay/web3-assets": "^6.3.0",
     "@depay/web3-blockchains": "^4.5.1",
     "@depay/web3-client": "^8.2.1",
@@ -46,21 +46,20 @@
     "@depay/web3-exchanges": "^9.0.0",
     "@depay/web3-payments": "^10.3.1",
     "@depay/web3-tokens": "^8.1.0",
-    "@depay/web3-wallets": "^11.0.1",
-    "decimal.js": "^10.3.1",
-    "react-rangeslider": "^2.2.0"
+    "@depay/web3-wallets": "^11.0.2",
+    "decimal.js": "^10.3.1"
   },
   "peerDependencies": {
     "ethers": "^5.6.5",
-    "react": "^17",
-    "react-dom": "^17"
+    "react": "^18",
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "@babel/plugin-transform-runtime": "^7.14.5",
     "@babel/preset-env": "^7.12.7",
     "@babel/preset-react": "^7.12.7",
-    "@cypress/react": "^5.9.1",
+    "@cypress/react": "^5.12.5",
     "@depay/web3-mock": "^11.8.1",
     "@peculiar/webcrypto": "^1.3.3",
     "@rollup/plugin-babel": "^5.3.0",
@@ -72,7 +71,7 @@
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "cross-fetch": "^3.1.5",
-    "cypress": "^7.6.0",
+    "cypress": "^9.7.0",
     "eslint": "^7.15.0",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-import": "^2.22.1",
@@ -81,8 +80,8 @@
     "ethers": "^5.6.5",
     "fetch-mock": "^9.11.0",
     "mock-socket": "^9.0.8",
-    "react": "^17",
-    "react-dom": "^17",
+    "react": "^18",
+    "react-dom": "^18",
     "regenerator-runtime": "^0.13.7",
     "rollup": "^2.34.2",
     "rollup-plugin-delete": "^2.0.0",