@depay/widgets 6.23.0 → 6.25.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),
@@ -2604,10 +2639,15 @@
         selectedRoute = _useState4[0],
         setSelectedRoute = _useState4[1];
 
-    var _useState5 = React.useState(0),
+    var _useState5 = React.useState(false),
         _useState6 = _slicedToArray(_useState5, 2),
-        reloadCount = _useState6[0],
-        setReloadCount = _useState6[1];
+        slowRouting = _useState6[0],
+        setSlowRouting = _useState6[1];
+
+    var _useState7 = React.useState(0),
+        _useState8 = _slicedToArray(_useState7, 2),
+        reloadCount = _useState8[0],
+        setReloadCount = _useState8[1];
 
     var _useContext = React.useContext(WalletContext),
         account = _useContext.account;
@@ -2618,49 +2658,54 @@
     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));
-            }
-          });
-        }
+      var slowRoutingTimeout = setTimeout(function () {
+        setSlowRouting(true);
+      }, 4000);
+      routePayments(Object.assign({}, props, {
+        account: account
+      })).then(function (routes) {
+        clearInterval(slowRoutingTimeout);
+        onRoutesUpdate(routes);
       });
     };
 
@@ -2759,7 +2804,8 @@
         setSelectedRoute: setSelectedRoute,
         getPaymentRoutes: getPaymentRoutes,
         allRoutes: allRoutes,
-        setAllRoutes: setAllRoutes
+        setAllRoutes: setAllRoutes,
+        slowRouting: slowRouting
       }
     }, props.children);
   });
@@ -3776,11 +3822,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 +3992,10 @@
         return;
       }
 
+      if (!tracking) {
+        return;
+      }
+
       var pollingInterval = setInterval(function () {
         return pollStatus(polling, transaction, afterBlock, paymentRoute, pollingInterval);
       }, 5000);
@@ -4001,6 +4051,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 +4063,6 @@
       setAfterBlock(afterBlock);
       setPaymentRoute(paymentRoute);
       openSocket(transaction);
-      startTracking(transaction, afterBlock, paymentRoute);
     };
 
     return /*#__PURE__*/React__default["default"].createElement(PaymentTrackingContext.Provider, {
@@ -4200,7 +4253,7 @@
       setWalletState('connected');
 
       if (props.connected) {
-        props.connected(accounts[0]);
+        props.connected(account);
       }
     };
 
@@ -4568,6 +4621,10 @@
     var _useContext = React.useContext(ChangableAmountContext),
         amountsMissing = _useContext.amountsMissing;
 
+    var _useContext2 = React.useContext(PaymentRoutingContext),
+        slowRouting = _useContext2.slowRouting,
+        selectedRoute = _useContext2.selectedRoute;
+
     return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
       header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
@@ -4593,7 +4650,9 @@
         className: "ButtonPrimary Skeleton"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "SkeletonBackground"
-      }))))
+      }))), selectedRoute == undefined && slowRouting && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "TextCenter Opacity05 PaddingTopS"
+      }, /*#__PURE__*/React__default["default"].createElement("strong", null, "Still loading your wallet balances...")))
     });
   });
 
@@ -4867,6 +4926,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.0",
+  "version": "6.25.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.2.1",
+    "@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.1.1",
     "@depay/web3-tokens": "^8.0.1",
     "@depay/web3-wallets": "^10.0.3",
     "decimal.js": "^10.3.1",
@@ -86,6 +86,7 @@
     "regenerator-runtime": "^0.13.7",
     "rollup": "^2.34.2",
     "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-dev": "^2.0.3",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-polyfill-node": "^0.7.0",
     "rollup-plugin-serve": "^1.1.0",