@depay/widgets 6.30.2 → 7.0.0

package/dist/esm/index.js

@@ -12,7 +12,6 @@ import { Currency } from '@depay/local-currency';
 import { setProviderEndpoints, request, provider } from '@depay/web3-client';
 import { Blockchain } from '@depay/web3-blockchains';
 import { route as route$1 } from '@depay/web3-payments';
-import Slider from 'react-rangeslider';
 import { TokenImage } from '@depay/react-token-image';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -82,7 +81,7 @@ function _typeof(obj) {
 module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports;
 });
 
-var regeneratorRuntime = createCommonjsModule(function (module) {
+var regeneratorRuntime$1 = createCommonjsModule(function (module) {
 var _typeof = _typeof_1["default"];
 
 function _regeneratorRuntime() {
@@ -438,7 +437,21 @@ function _regeneratorRuntime() {
 module.exports = _regeneratorRuntime, module.exports.__esModule = true, module.exports["default"] = module.exports;
 });
 
-var regenerator = regeneratorRuntime();
+// TODO(Babel 8): Remove this file.
+
+var runtime = regeneratorRuntime$1();
+var regenerator = runtime;
+
+// Copied from https://github.com/facebook/regenerator/blob/main/packages/runtime/runtime.js#L736=
+try {
+  regeneratorRuntime = runtime;
+} catch (accidentalStrictMode) {
+  if (typeof globalThis === "object") {
+    globalThis.regeneratorRuntime = runtime;
+  } else {
+    Function("r", "regeneratorRuntime = r")(runtime);
+  }
+}
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -713,34 +726,36 @@ var SelectWalletDialog = (function (props) {
       navigate = _useContext.navigate;
 
   var wallet = getWallet();
-  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;
-            }
+  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');
+              }
 
-          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();
@@ -874,40 +889,42 @@ var ConnectStack = (function (props) {
       setWallet(wallet);
     }
   }, []);
-  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;
-            }
+  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
+                });
+              } else {
+                connect(wallet);
+              }
 
-          case 5:
-          case "end":
-            return _context2.stop();
+            case 5:
+            case "end":
+              return _context2.stop();
+          }
         }
-      }
-    }, _callee2);
-  })), [wallet]);
+      }, _callee2);
+    }))();
+  }, [wallet]);
   return /*#__PURE__*/React.createElement(ReactDialogStack, {
     open: open,
     close: close,
@@ -962,11 +979,10 @@ function _createClass(Constructor, protoProps, staticProps) {
 }
 
 function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
     return o;
   };
-
   return _setPrototypeOf(o, p);
 }
 
@@ -1007,7 +1023,7 @@ function _possibleConstructorReturn(self, call) {
 }
 
 function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
     return o.__proto__ || Object.getPrototypeOf(o);
   };
   return _getPrototypeOf(o);
@@ -1078,7 +1094,7 @@ function ReactDialogStyle (styles) {
   `
 }
 
-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.Component {
   constructor(props) {
     super(props);
@@ -1129,10 +1145,10 @@ class Dialog extends React.Component {
     const classNames = ['ReactDialog', this.state.open ? 'ReactDialogOpen' : ''];
     const style = ReactDialogStyle({ background: this.props.background });
     return (
-      React.createElement('div', { className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName, lineNumber: 56}}
-        , React.createElement('style', {__self: this, __source: {fileName: _jsxFileName, lineNumber: 57}}, style)
-        , React.createElement('div', { className: "ReactDialogInner", __self: this, __source: {fileName: _jsxFileName, lineNumber: 58}}
-          , React.createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName, lineNumber: 59}} )
+      React.createElement('div', { className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 55}}
+        , React.createElement('style', {__self: this, __source: {fileName: _jsxFileName$1, lineNumber: 56}}, style)
+        , React.createElement('div', { className: "ReactDialogInner", __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 57}}
+          , React.createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 58}} )
           , this.props.children
         )
       )
@@ -1140,7 +1156,7 @@ class Dialog extends React.Component {
   }
 }
 
-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.Component {
   constructor(props) {
     super(props);
@@ -1169,7 +1185,7 @@ class ReactDialog extends React.Component {
           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
         ),
@@ -1312,7 +1328,7 @@ var DialogStyle = (function (style) {
 });
 
 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 () {
@@ -1405,7 +1421,7 @@ var styleRenderer = (function (style) {
     },
     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(), 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('');
+  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('');
 });
 
 var mount = (function (_ref, content) {
@@ -1718,7 +1734,7 @@ var ChangableAmountProvider = (function (props) {
       } else {
         Promise.all(props.accept.map(function (configuration) {
           if (CONSTANTS[configuration.blockchain].USD.toLowerCase() == configuration.token.toLowerCase()) {
-            return 1.00 / conversionRate;
+            return 1.00 / conversionRate * amount;
           }
 
           return route({
@@ -2679,15 +2695,14 @@ var ChangeAmountDialog = (function (props) {
       className: "PaddingLeftM PaddingRightM"
     }, /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopS TextCenter PaddingBottomL"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "FontSizeL"
-    }, /*#__PURE__*/React.createElement("input", {
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.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);
@@ -2695,18 +2710,7 @@ var ChangeAmountDialog = (function (props) {
       onBlur: function onBlur(event) {
         setValidValue(event.target.value);
       }
-    })), /*#__PURE__*/React.createElement(Slider, {
-      max: parseFloat(maxAmount),
-      min: min,
-      step: step,
-      value: parseFloat(inputAmount),
-      onChange: function onChange(value) {
-        changeAmount(toValidStep(value));
-      },
-      onChangeComplete: function onChangeComplete() {
-        setValidValue(inputAmount);
-      }
-    }), /*#__PURE__*/React.createElement("div", {
+    })), /*#__PURE__*/React.createElement("div", {
       style: {
         height: '40px'
       }
@@ -3225,6 +3229,7 @@ var DonationOverviewDialog = (function (props) {
     return /*#__PURE__*/React.createElement(DonationOverviewSkeleton, null);
   }
 
+  var blockchain = Blockchain.findByName(payment.blockchain);
   return /*#__PURE__*/React.createElement(Dialog$1, {
     header: /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
@@ -3274,6 +3279,11 @@ var DonationOverviewDialog = (function (props) {
     }, /*#__PURE__*/React.createElement(TokenImage, {
       blockchain: payment.route.blockchain,
       address: payment.token
+    }), /*#__PURE__*/React.createElement("img", {
+      className: "BlockchainLogo small",
+      src: blockchain.logo,
+      alt: blockchain.label,
+      title: blockchain.label
     })), /*#__PURE__*/React.createElement("div", {
       className: "CardBody"
     }, /*#__PURE__*/React.createElement("div", {
@@ -3931,7 +3941,7 @@ var preflight$2 = /*#__PURE__*/function () {
                 throw 'You need to set the blockchain you want to receive the donation on!';
               }
 
-              if (!['ethereum', 'bsc'].includes(configuration.blockchain)) {
+              if (!['ethereum', 'bsc', 'polygon'].includes(configuration.blockchain)) {
                 throw 'You need to set a supported blockchain!';
               }
 
@@ -4316,6 +4326,7 @@ var PaymentOverviewDialog = (function (props) {
     return /*#__PURE__*/React.createElement(PaymentOverviewSkeleton, null);
   }
 
+  var blockchain = Blockchain.findByName(payment.blockchain);
   return /*#__PURE__*/React.createElement(Dialog$1, {
     header: /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
@@ -4365,6 +4376,11 @@ var PaymentOverviewDialog = (function (props) {
     }, /*#__PURE__*/React.createElement(TokenImage, {
       blockchain: payment.blockchain,
       address: payment.token
+    }), /*#__PURE__*/React.createElement("img", {
+      className: "BlockchainLogo small",
+      src: blockchain.logo,
+      alt: blockchain.label,
+      title: blockchain.label
     })), /*#__PURE__*/React.createElement("div", {
       className: "CardBody"
     }, /*#__PURE__*/React.createElement("div", {
@@ -4435,7 +4451,7 @@ var preflight$1 = /*#__PURE__*/function () {
                 throw 'You need to set the blockchain your want to receive the payment on!';
               }
 
-              if (!['ethereum', 'bsc'].includes(configuration.blockchain)) {
+              if (!['ethereum', 'bsc', 'polygon'].includes(configuration.blockchain)) {
                 throw 'You need to set a supported blockchain!';
               }
 
@@ -4754,6 +4770,7 @@ var SaleOverviewDialog = (function (props) {
     });
   }
 
+  var blockchain = Blockchain.findByName(payment.blockchain);
   return /*#__PURE__*/React.createElement(Dialog$1, {
     header: /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
@@ -4775,7 +4792,12 @@ var SaleOverviewDialog = (function (props) {
     }, /*#__PURE__*/React.createElement("div", {
       className: "CardImage",
       title: payment.name
-    }, tokenImageElement), /*#__PURE__*/React.createElement("div", {
+    }, tokenImageElement, /*#__PURE__*/React.createElement("img", {
+      className: "BlockchainLogo small",
+      src: blockchain.logo,
+      alt: blockchain.label,
+      title: blockchain.label
+    })), /*#__PURE__*/React.createElement("div", {
       className: "CardBody"
     }, /*#__PURE__*/React.createElement("div", {
       className: "CardBodyWrapper"
@@ -5145,7 +5167,7 @@ var SelectBlockchainDialog = (function (props) {
       navigate = _useContext2.navigate;
 
   var stacked = Object.keys(props.selection).length > 1;
-  var blockchains = [Blockchain.findByName('ethereum'), Blockchain.findByName('bsc')];
+  var blockchains = [Blockchain.findByName('ethereum'), Blockchain.findByName('bsc'), Blockchain.findByName('polygon')];
 
   var selectBlockchain = function selectBlockchain(blockchain) {
     setSelection(Object.assign(props.selection, {