@depay/widgets 6.23.0 → 6.25.0

package/dist/esm/index.js

@@ -1694,7 +1694,7 @@ var CardStyle = (function (style) {
 });
 
 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) {
@@ -2598,6 +2598,41 @@ function _defineProperty(obj, key, value) {
 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 route$1({
+    accept: accept.map(prepareAcceptedPayments),
+    from: mergeFromAccounts(accept, account),
+    whitelist: whitelist,
+    blacklist: blacklist,
+    event: event,
+    fee: fee
+  });
+});
+
 var PaymentRoutingProvider = (function (props) {
   var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -2609,10 +2644,15 @@ var PaymentRoutingProvider = (function (props) {
       selectedRoute = _useState4[0],
       setSelectedRoute = _useState4[1];
 
-  var _useState5 = useState(0),
+  var _useState5 = useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      reloadCount = _useState6[0],
-      setReloadCount = _useState6[1];
+      slowRouting = _useState6[0],
+      setSlowRouting = _useState6[1];
+
+  var _useState7 = useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      reloadCount = _useState8[0],
+      setReloadCount = _useState8[1];
 
   var _useContext = useContext(WalletContext),
       account = _useContext.account;
@@ -2623,49 +2663,54 @@ var PaymentRoutingProvider = (function (props) {
   var _useContext3 = 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;
     }
 
-    route$1({
-      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);
     });
   };
 
@@ -2764,7 +2809,8 @@ var PaymentRoutingProvider = (function (props) {
       setSelectedRoute: setSelectedRoute,
       getPaymentRoutes: getPaymentRoutes,
       allRoutes: allRoutes,
-      setAllRoutes: setAllRoutes
+      setAllRoutes: setAllRoutes,
+      slowRouting: slowRouting
     }
   }, props.children);
 });
@@ -3781,11 +3827,11 @@ var PaymentTrackingProvider = (function (props) {
       paymentRoute = _useState6[0],
       setPaymentRoute = _useState6[1];
 
-  var _useState7 = useState(!!(track && (track.endpoint || typeof track.method == 'function'))),
+  var _useState7 = useState(!!(track && (track.endpoint || typeof track.method == 'function') && track.async != true)),
       _useState8 = _slicedToArray(_useState7, 1),
       tracking = _useState8[0];
 
-  var _useState9 = useState(!!(track && track.poll && (track.poll.endpoint || typeof track.poll.method == 'function'))),
+  var _useState9 = useState(!!(track && track.poll && (track.poll.endpoint || typeof track.poll.method == 'function') && track.async != true)),
       _useState10 = _slicedToArray(_useState9, 1),
       polling = _useState10[0];
 
@@ -3951,6 +3997,10 @@ var PaymentTrackingProvider = (function (props) {
       return;
     }
 
+    if (!tracking) {
+      return;
+    }
+
     var pollingInterval = setInterval(function () {
       return pollStatus(polling, transaction, afterBlock, paymentRoute, pollingInterval);
     }, 5000);
@@ -4006,6 +4056,10 @@ var PaymentTrackingProvider = (function (props) {
   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;
     }
@@ -4014,7 +4068,6 @@ var PaymentTrackingProvider = (function (props) {
     setAfterBlock(afterBlock);
     setPaymentRoute(paymentRoute);
     openSocket(transaction);
-    startTracking(transaction, afterBlock, paymentRoute);
   };
 
   return /*#__PURE__*/React.createElement(PaymentTrackingContext.Provider, {
@@ -4205,7 +4258,7 @@ var WalletProvider = (function (props) {
     setWalletState('connected');
 
     if (props.connected) {
-      props.connected(accounts[0]);
+      props.connected(account);
     }
   };
 
@@ -4573,6 +4626,10 @@ var PaymentOverviewSkeleton = (function (props) {
   var _useContext = useContext(ChangableAmountContext),
       amountsMissing = _useContext.amountsMissing;
 
+  var _useContext2 = useContext(PaymentRoutingContext),
+      slowRouting = _useContext2.slowRouting,
+      selectedRoute = _useContext2.selectedRoute;
+
   return /*#__PURE__*/React.createElement(Dialog$1, {
     header: /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
@@ -4598,7 +4655,9 @@ var PaymentOverviewSkeleton = (function (props) {
       className: "ButtonPrimary Skeleton"
     }, /*#__PURE__*/React.createElement("div", {
       className: "SkeletonBackground"
-    }))))
+    }))), selectedRoute == undefined && slowRouting && /*#__PURE__*/React.createElement("div", {
+      className: "TextCenter Opacity05 PaddingTopS"
+    }, /*#__PURE__*/React.createElement("strong", null, "Still loading your wallet balances...")))
   });
 });
 
@@ -4872,6 +4931,23 @@ var Payment = /*#__PURE__*/function () {
   };
 }();
 
+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.createContext();
 
 var ToTokenContext = /*#__PURE__*/React.createContext();