@depay/widgets 6.23.1 → 6.24.0

package/dist/umd/index.js

@@ -1689,7 +1689,7 @@
   });
 
   var DialogStyle = (function (style) {
-    return "\n\n    .ReactDialogBackground {\n      backdrop-filter: blur(5px);\n      background: rgba(0,0,0,0.7);\n    }\n\n    .Dialog {\n      margin: 0 auto;\n      position: relative;\n      width: 420px;\n      box-shadow: 0 0 20px rgba(0,0,0,0.1);\n      border-radius: 0.8rem;\n      background: rgb(248,248,248);\n    }\n\n    @media (max-width: 450px) {\n\n      .Dialog {\n        border-radius: 0;\n        width: 100%;\n      }\n\n\n      .DialogHeader {\n        border-top-left-radius: 0 !important;\n        border-top-right-radius: 0 !important;\n      }\n    }\n\n    @media (orientation: portrait) and (max-width: 800px) {\n\n      .ReactDialogAnimation {\n        width: 100%;\n      }\n\n      .ReactDialog {\n        height: 100%;\n        min-height: 100%;\n      }\n\n      .ReactDialogStack {\n        align-items: flex-end;\n      }\n\n      .Dialog {\n        align-content: stretch;\n        border-radius: 0.8rem;\n        border-top-radius: 0.8rem;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .DialogBody {\n        flex: 1;\n        align-items: flex-end;\n      }\n\n      .DialogFooter {\n        padding-bottom: 20px;\n      }\n\n      .ReactDialogAnimation {\n        margin-bottom: -100px !important;\n        top: inherit !important;\n        position: relative;\n        transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n      }\n\n      .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n        margin-bottom: 0px !important;\n      }\n\n      .DialogFooter {\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .ReactShadowDOMInsideContainer > .ReactDialog {\n        align-items: flex-end;\n      }\n    }\n\n    .DialogBody {\n      background: rgb(248,248,248);\n      overflow-x: hidden;\n      overflow-y: auto;\n    }\n\n    .DialogBody.ScrollHeight {\n      height: 30vh !important;\n      max-height: 30vh !important;\n    }\n\n    .DialogHeader {\n      background: rgb(248,248,248);\n      border-top-left-radius: 0.8rem;\n      border-top-right-radius: 0.8rem;\n      min-height: 3.4rem;\n      position: relative;\n      width: 100%;\n    }\n\n    .DialogHeaderActionRight {\n      position: absolute;\n      top: 0;\n      right: 0;\n      height: 3rem;\n    }\n\n    .DialogHeaderActionLeft {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 3rem;\n    }\n\n    .DialogFooter {\n      background: rgb(248,248,248);\n      border-bottom-left-radius: 0.8rem;\n      border-bottom-right-radius: 0.8rem;\n      line-height: 1.5rem;\n      min-height: 2rem;\n      position: relative;\n      text-align: center;\n    }\n\n  ";
+    return "\n\n    .ReactDialogBackground {\n      backdrop-filter: blur(5px);\n      background: rgba(0,0,0,0.7);\n    }\n\n    .Dialog {\n      margin: 0 auto;\n      position: relative;\n      width: 420px;\n      box-shadow: 0 0 20px rgba(0,0,0,0.1);\n      border-radius: 0.8rem;\n      background: rgb(248,248,248);\n    }\n\n    @media (max-width: 450px) {\n\n      .Dialog {\n        border-radius: 0;\n        width: 100%;\n      }\n    }\n\n    @media (orientation: portrait) and (max-width: 800px) {\n\n      .ReactDialogAnimation {\n        width: 100%;\n      }\n\n      .ReactDialog {\n        height: 100%;\n        min-height: 100%;\n      }\n\n      .ReactDialogStack {\n        align-items: flex-end;\n      }\n\n      .Dialog {\n        align-content: stretch;\n        border-radius: 0.8rem;\n        border-top-radius: 0.8rem;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .DialogBody {\n        flex: 1;\n        align-items: flex-end;\n      }\n\n      .DialogFooter {\n        padding-bottom: 20px;\n      }\n\n      .ReactDialogAnimation {\n        margin-bottom: -100px !important;\n        top: inherit !important;\n        position: relative;\n        transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n      }\n\n      .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n        margin-bottom: 0px !important;\n      }\n\n      .DialogFooter {\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .ReactShadowDOMInsideContainer > .ReactDialog {\n        align-items: flex-end;\n      }\n    }\n\n    .DialogBody {\n      background: rgb(248,248,248);\n      overflow-x: hidden;\n      overflow-y: auto;\n    }\n\n    .DialogBody.ScrollHeight {\n      height: 30vh !important;\n      max-height: 30vh !important;\n    }\n\n    .DialogHeader {\n      background: rgb(248,248,248);\n      border-top-left-radius: 0.8rem;\n      border-top-right-radius: 0.8rem;\n      min-height: 3.4rem;\n      position: relative;\n      width: 100%;\n    }\n\n    .DialogHeaderActionRight {\n      position: absolute;\n      top: 0;\n      right: 0;\n      height: 3rem;\n    }\n\n    .DialogHeaderActionLeft {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 3rem;\n    }\n\n    .DialogFooter {\n      background: rgb(248,248,248);\n      border-bottom-left-radius: 0.8rem;\n      border-bottom-right-radius: 0.8rem;\n      line-height: 1.5rem;\n      min-height: 2rem;\n      position: relative;\n      text-align: center;\n    }\n\n  ";
   });
 
   var FontStyle = (function (style) {
@@ -2593,6 +2593,41 @@
   function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
   function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+  var prepareAcceptedPayments = function prepareAcceptedPayments(accept) {
+    var toAddress = _typeof(accept.receiver) == 'object' ? accept.receiver.address : accept.receiver;
+    var toContract = _typeof(accept.receiver) == 'object' ? accept.receiver : undefined;
+    return _objectSpread(_objectSpread({}, accept), {}, {
+      toAddress: toAddress,
+      toContract: toContract
+    });
+  };
+
+  var mergeFromAccounts = function mergeFromAccounts(accept, account) {
+    var from = {};
+    accept.forEach(function (accept) {
+      from[accept.blockchain] = account;
+    });
+    return from;
+  };
+
+  var routePayments = (function (_ref) {
+    var accept = _ref.accept,
+        account = _ref.account,
+        whitelist = _ref.whitelist,
+        blacklist = _ref.blacklist,
+        event = _ref.event,
+        fee = _ref.fee;
+    return web3Payments.route({
+      accept: accept.map(prepareAcceptedPayments),
+      from: mergeFromAccounts(accept, account),
+      whitelist: whitelist,
+      blacklist: blacklist,
+      event: event,
+      fee: fee
+    });
+  });
+
   var PaymentRoutingProvider = (function (props) {
     var _useState = React.useState(),
         _useState2 = _slicedToArray(_useState, 2),
@@ -2618,50 +2653,49 @@
     var _useContext3 = React.useContext(ConfigurationContext),
         recover = _useContext3.recover;
 
-    var prepareAcceptedPayments = function prepareAcceptedPayments(accept) {
-      var toAddress = _typeof(accept.receiver) == 'object' ? accept.receiver.address : accept.receiver;
-      var toContract = _typeof(accept.receiver) == 'object' ? accept.receiver : undefined;
-      return _objectSpread(_objectSpread({}, accept), {}, {
-        toAddress: toAddress,
-        toContract: toContract,
-        fromAddress: account
-      });
+    var onRoutesUpdate = function onRoutesUpdate(routes) {
+      if (routes.length == 0) {
+        setAllRoutes([]);
+
+        if (props.setMaxRoute) {
+          props.setMaxRoute(null);
+        }
+      } else {
+        roundAmounts(routes).then(function (roundedRoutes) {
+          var selected;
+
+          if (selectedRoute) {
+            selected = roundedRoutes[allRoutes.findIndex(function (route) {
+              return route.fromToken == selectedRoute.fromToken && route.blockchain == selectedRoute.blockchain;
+            })];
+          }
+
+          if (selected == undefined) {
+            selected = roundedRoutes[0];
+          }
+
+          setSelectedRoute(selected);
+          setAllRoutes(roundedRoutes);
+
+          if (props.setMaxRoute) {
+            props.setMaxRoute(findMaxRoute(roundedRoutes));
+          }
+        });
+      }
     };
 
     var getPaymentRoutes = function getPaymentRoutes(_ref) {
-      var allRoutes = _ref.allRoutes,
-          selectedRoute = _ref.selectedRoute,
-          updatable = _ref.updatable;
+      _ref.allRoutes;
+          _ref.selectedRoute;
+          var updatable = _ref.updatable;
 
       if (updatable == false || !props.accept || !account) {
         return;
       }
 
-      web3Payments.route({
-        accept: props.accept.map(prepareAcceptedPayments),
-        whitelist: props.whitelist,
-        blacklist: props.blacklist,
-        event: props.event,
-        fee: props.fee
-      }).then(function (routes) {
-        if (routes.length == 0) {
-          setAllRoutes([]);
-
-          if (props.setMaxRoute) {
-            props.setMaxRoute(null);
-          }
-        } else {
-          roundAmounts(routes).then(function (roundedRoutes) {
-            var selected = selectedRoute ? roundedRoutes[allRoutes.indexOf(selectedRoute)] || roundedRoutes[0] : roundedRoutes[0];
-            setSelectedRoute(selected);
-            setAllRoutes(roundedRoutes);
-
-            if (props.setMaxRoute) {
-              props.setMaxRoute(findMaxRoute(roundedRoutes));
-            }
-          });
-        }
-      });
+      routePayments(Object.assign({}, props, {
+        account: account
+      })).then(onRoutesUpdate);
     };
 
     var roundAmounts = /*#__PURE__*/function () {
@@ -3776,11 +3810,11 @@
         paymentRoute = _useState6[0],
         setPaymentRoute = _useState6[1];
 
-    var _useState7 = React.useState(!!(track && (track.endpoint || typeof track.method == 'function'))),
+    var _useState7 = React.useState(!!(track && (track.endpoint || typeof track.method == 'function') && track.async != true)),
         _useState8 = _slicedToArray(_useState7, 1),
         tracking = _useState8[0];
 
-    var _useState9 = React.useState(!!(track && track.poll && (track.poll.endpoint || typeof track.poll.method == 'function'))),
+    var _useState9 = React.useState(!!(track && track.poll && (track.poll.endpoint || typeof track.poll.method == 'function') && track.async != true)),
         _useState10 = _slicedToArray(_useState9, 1),
         polling = _useState10[0];
 
@@ -3946,6 +3980,10 @@
         return;
       }
 
+      if (!tracking) {
+        return;
+      }
+
       var pollingInterval = setInterval(function () {
         return pollStatus(polling, transaction, afterBlock, paymentRoute, pollingInterval);
       }, 5000);
@@ -4001,6 +4039,10 @@
     var initializeTracking = function initializeTracking(transaction, afterBlock, paymentRoute) {
       storePayment(transaction, afterBlock, paymentRoute, 1);
 
+      if (tracking || track && track.async == true) {
+        startTracking(transaction, afterBlock, paymentRoute);
+      }
+
       if (tracking == false) {
         return;
       }
@@ -4009,7 +4051,6 @@
       setAfterBlock(afterBlock);
       setPaymentRoute(paymentRoute);
       openSocket(transaction);
-      startTracking(transaction, afterBlock, paymentRoute);
     };
 
     return /*#__PURE__*/React__default["default"].createElement(PaymentTrackingContext.Provider, {
@@ -4867,6 +4908,23 @@
     };
   }();
 
+  Payment.preload = function (_ref5) {
+    var account = _ref5.account,
+        accept = _ref5.accept,
+        whitelist = _ref5.whitelist,
+        blacklist = _ref5.blacklist,
+        event = _ref5.event,
+        fee = _ref5.fee;
+    routePayments({
+      account: account,
+      accept: accept,
+      whitelist: whitelist,
+      blacklist: blacklist,
+      event: event,
+      fee: fee
+    });
+  };
+
   var SaleRoutingContext = /*#__PURE__*/React__default["default"].createContext();
 
   var ToTokenContext = /*#__PURE__*/React__default["default"].createContext();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@depay/widgets",
   "moduleName": "DePayWidgets",
-  "version": "6.23.1",
+  "version": "6.24.0",
   "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",
@@ -39,12 +39,12 @@
     "@depay/react-shadow-dom": "^4.0.0",
     "@depay/react-token-image": "^3.0.0",
     "@depay/walletconnect-v1": "^1.1.0",
-    "@depay/web3-assets": "^5.4.0",
-    "@depay/web3-blockchains": "^4.2.0",
+    "@depay/web3-assets": "^6.1.5",
+    "@depay/web3-blockchains": "^4.3.0",
     "@depay/web3-client": "^8.0.0",
     "@depay/web3-constants": "^5.0.0",
-    "@depay/web3-exchanges": "^8.2.0",
-    "@depay/web3-payments": "^9.5.0",
+    "@depay/web3-exchanges": "^8.2.1",
+    "@depay/web3-payments": "^10.0.5",
     "@depay/web3-tokens": "^8.0.1",
     "@depay/web3-wallets": "^10.0.3",
     "decimal.js": "^10.3.1",