@depay/widgets 6.24.0 → 6.27.1

package/README.md

@@ -563,6 +563,18 @@ DePayWidgets.Payment({
 })
 ```
 
+#### container (DePay Payments)
+
+`container`
+
+Allows you to pass a container element that is supposed to contain the widget:
+
+```javascript
+DePayWidgets.Payment({
+  container: document.getElementById('my-container')
+})
+```
+
 #### style (DePay Payments)
 
 `style`
@@ -1369,6 +1381,18 @@ DePayWidgets.Donation({
 })
 ```
 
+#### container (DePay Donations)
+
+`container`
+
+Allows you to pass a container element that is supposed to contain the widget:
+
+```javascript
+DePayWidgets.Dontaion({
+  container: document.getElementById('my-container')
+})
+```
+
 #### style (DePay Donations)
 
 `style`

package/dist/esm/index.bundle.js

@@ -49833,7 +49833,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    @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    .contained .ReactDialog {\n      position: absolute;\n      height: 100%;\n      min-height: 100%;\n      width: 100%;\n      min-width: 100%;\n    }\n\n    .contained .ReactDialogBackground {\n      position: absolute;\n    }\n\n    .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n      top: 0;\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) {
@@ -49939,9 +49939,9 @@ var styleRenderer = (function (style) {
 
 const insideContainerClass = 'ReactShadowDOMInsideContainer';
 
-function createInsideContainer({ document, shadow, style }) {
+function createInsideContainer({ document, shadow, style, classes = [] }) {
   const container = document.createElement('div');
-  container.setAttribute('class', insideContainerClass);
+  container.setAttribute('class', [insideContainerClass].concat(classes).join(' '));
   shadow.appendChild(container);
 
   if (style && style.length) {
@@ -49995,7 +49995,14 @@ function unmount(outsideContainer) {
   }
 }
 
-function ReactShadowDOM({ document, element, content, outsideStyle = '', insideStyle = '' }) {
+function ReactShadowDOM({
+  document,
+  element,
+  content,
+  outsideStyle = '',
+  insideStyle = '',
+  insideClasses = [],
+}) {
   const outsideContainer = createOutsideContainer({
     document,
     element,
@@ -50004,7 +50011,12 @@ function ReactShadowDOM({ document, element, content, outsideStyle = '', insideS
 
   const shadow = createShadow(outsideContainer);
 
-  const insideContainer = createInsideContainer({ document, shadow, style: trimStyle(insideStyle) });
+  const insideContainer = createInsideContainer({
+    document,
+    shadow,
+    style: trimStyle(insideStyle),
+    classes: insideClasses,
+  });
 
   if (typeof content === 'function') {
     content = content(insideContainer);
@@ -50017,6 +50029,7 @@ function ReactShadowDOM({ document, element, content, outsideStyle = '', insideS
 
 var mount = (function (_ref, content) {
   var style = _ref.style,
+      container = _ref.container,
       document = _ref.document,
       closed = _ref.closed;
   var insideStyle = styleRenderer(style);
@@ -50036,12 +50049,21 @@ var mount = (function (_ref, content) {
     }, 300);
   };
 
+  var outsideStyle;
+
+  if (container) {
+    outsideStyle = "\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      z-index: 99999;\n    ";
+  } else {
+    outsideStyle = "\n      position: fixed;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      z-index: 99999;\n    ";
+  }
+
   var _ReactShadowDOM = ReactShadowDOM({
     document: document,
-    element: document.body,
+    element: container || document.body,
     content: content(unmountShadowDOM),
+    outsideStyle: outsideStyle,
     insideStyle: insideStyle,
-    outsideStyle: "\n      position: fixed;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      z-index: 99999;\n    "
+    insideClasses: ['contained']
   }),
       unmount = _ReactShadowDOM.unmount;
 
@@ -63146,16 +63168,28 @@ var getAssets = async (options) => {
 
       return new Promise((resolve, reject)=>{
         const address = options.accounts[blockchain];
-        fetch(`https://public.depay.fi/accounts/${blockchain}/${address}/assets`)
+        const controller = new AbortController();
+        setTimeout(()=>controller.abort(), 10000);
+        fetch(`https://public.depay.fi/accounts/${blockchain}/${address}/assets`, { signal: controller.signal })
           .catch((error) => { console.log(error); resolve([]); })
-          .then((response) => response.json())
+          .then((response) => {
+            if(response && response.ok) {
+              return response.json()
+            } else {
+              resolve([]);
+            }
+          })
           .then(async (assets) => {
-            return await ensureNativeTokenAsset({
-              address,
-              options,
-              assets: filterAssets({ assets, blockchain, options }).map((asset) => Object.assign(asset, { blockchain })),
-              blockchain
-            })
+            if(assets && assets.length) {
+              return await ensureNativeTokenAsset({
+                address,
+                options,
+                assets: filterAssets({ assets, blockchain, options }).map((asset) => Object.assign(asset, { blockchain })),
+                blockchain
+              })
+            } else {
+              resolve([]);
+            }
           })
           .then(resolve)
           .catch((error) => { console.log(error); resolve([]); });
@@ -85756,10 +85790,15 @@ var PaymentRoutingProvider = (function (props) {
       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;
@@ -85810,9 +85849,15 @@ var PaymentRoutingProvider = (function (props) {
       return;
     }
 
+    var slowRoutingTimeout = setTimeout(function () {
+      setSlowRouting(true);
+    }, 4000);
     routePayments(Object.assign({}, props, {
       account: account
-    })).then(onRoutesUpdate);
+    })).then(function (routes) {
+      clearInterval(slowRoutingTimeout);
+      onRoutesUpdate(routes);
+    });
   };
 
   var roundAmounts = /*#__PURE__*/function () {
@@ -85910,7 +85955,8 @@ var PaymentRoutingProvider = (function (props) {
       setSelectedRoute: setSelectedRoute,
       getPaymentRoutes: getPaymentRoutes,
       allRoutes: allRoutes,
-      setAllRoutes: setAllRoutes
+      setAllRoutes: setAllRoutes,
+      slowRouting: slowRouting
     }
   }, props.children);
 });
@@ -89144,12 +89190,12 @@ var preflight$2 = /*#__PURE__*/function () {
 
 var Donation = /*#__PURE__*/function () {
   var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-    var amount, accept, event, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, closable, integration, document, unmount;
+    var amount, accept, event, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, closable, integration, container, document, unmount;
     return regenerator.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            amount = _ref3.amount, accept = _ref3.accept, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, closable = _ref3.closable, integration = _ref3.integration, document = _ref3.document;
+            amount = _ref3.amount, accept = _ref3.accept, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, closable = _ref3.closable, integration = _ref3.integration, container = _ref3.container, document = _ref3.document;
             requireReactVersion();
             _context2.prev = 2;
             _context2.next = 5;
@@ -89160,6 +89206,7 @@ var Donation = /*#__PURE__*/function () {
           case 5:
             unmount = mount({
               style: style,
+              container: container,
               document: ensureDocument(document),
               closed: closed
             }, function (unmount) {
@@ -89441,6 +89488,10 @@ var PaymentOverviewSkeleton = (function (props) {
   var _useContext = react.useContext(ChangableAmountContext),
       amountsMissing = _useContext.amountsMissing;
 
+  var _useContext2 = react.useContext(PaymentRoutingContext),
+      slowRouting = _useContext2.slowRouting,
+      selectedRoute = _useContext2.selectedRoute;
+
   return /*#__PURE__*/react.createElement(Dialog, {
     header: /*#__PURE__*/react.createElement("div", {
       className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
@@ -89466,7 +89517,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...")))
   });
 });
 
@@ -89644,12 +89697,12 @@ var preflight$1 = /*#__PURE__*/function () {
 
 var Payment = /*#__PURE__*/function () {
   var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-    var accept, amount, event, sent, confirmed, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, track, fee, recover, closable, integration, document, unmount;
+    var accept, amount, event, sent, confirmed, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, track, fee, recover, closable, integration, container, document, unmount;
     return regenerator.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            accept = _ref3.accept, amount = _ref3.amount, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, whitelist = _ref3.whitelist, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, track = _ref3.track, fee = _ref3.fee, recover = _ref3.recover, closable = _ref3.closable, integration = _ref3.integration, document = _ref3.document;
+            accept = _ref3.accept, amount = _ref3.amount, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, whitelist = _ref3.whitelist, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, track = _ref3.track, fee = _ref3.fee, recover = _ref3.recover, closable = _ref3.closable, integration = _ref3.integration, container = _ref3.container, document = _ref3.document;
             requireReactVersion();
             _context2.prev = 2;
             _context2.next = 5;
@@ -89661,6 +89714,7 @@ var Payment = /*#__PURE__*/function () {
           case 5:
             unmount = mount({
               style: style,
+              container: container,
               document: ensureDocument(document),
               closed: closed
             }, function (unmount) {

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    @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    .contained .ReactDialog {\n      position: absolute;\n      height: 100%;\n      min-height: 100%;\n      width: 100%;\n      min-width: 100%;\n    }\n\n    .contained .ReactDialogBackground {\n      position: absolute;\n    }\n\n    .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n      top: 0;\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) {
@@ -1800,6 +1800,7 @@ var styleRenderer = (function (style) {
 
 var mount = (function (_ref, content) {
   var style = _ref.style,
+      container = _ref.container,
       document = _ref.document,
       closed = _ref.closed;
   var insideStyle = styleRenderer(style);
@@ -1819,12 +1820,21 @@ var mount = (function (_ref, content) {
     }, 300);
   };
 
+  var outsideStyle;
+
+  if (container) {
+    outsideStyle = "\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      z-index: 99999;\n    ";
+  } else {
+    outsideStyle = "\n      position: fixed;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      z-index: 99999;\n    ";
+  }
+
   var _ReactShadowDOM = ReactShadowDOM({
     document: document,
-    element: document.body,
+    element: container || document.body,
     content: content(unmountShadowDOM),
+    outsideStyle: outsideStyle,
     insideStyle: insideStyle,
-    outsideStyle: "\n      position: fixed;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      z-index: 99999;\n    "
+    insideClasses: ['contained']
   }),
       unmount = _ReactShadowDOM.unmount;
 
@@ -2644,10 +2654,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;
@@ -2698,9 +2713,15 @@ var PaymentRoutingProvider = (function (props) {
       return;
     }
 
+    var slowRoutingTimeout = setTimeout(function () {
+      setSlowRouting(true);
+    }, 4000);
     routePayments(Object.assign({}, props, {
       account: account
-    })).then(onRoutesUpdate);
+    })).then(function (routes) {
+      clearInterval(slowRoutingTimeout);
+      onRoutesUpdate(routes);
+    });
   };
 
   var roundAmounts = /*#__PURE__*/function () {
@@ -2798,7 +2819,8 @@ var PaymentRoutingProvider = (function (props) {
       setSelectedRoute: setSelectedRoute,
       getPaymentRoutes: getPaymentRoutes,
       allRoutes: allRoutes,
-      setAllRoutes: setAllRoutes
+      setAllRoutes: setAllRoutes,
+      slowRouting: slowRouting
     }
   }, props.children);
 });
@@ -4317,12 +4339,12 @@ var preflight$2 = /*#__PURE__*/function () {
 
 var Donation = /*#__PURE__*/function () {
   var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-    var amount, accept, event, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, closable, integration, document, unmount;
+    var amount, accept, event, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, closable, integration, container, document, unmount;
     return regenerator.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            amount = _ref3.amount, accept = _ref3.accept, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, closable = _ref3.closable, integration = _ref3.integration, document = _ref3.document;
+            amount = _ref3.amount, accept = _ref3.accept, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, closable = _ref3.closable, integration = _ref3.integration, container = _ref3.container, document = _ref3.document;
             requireReactVersion();
             _context2.prev = 2;
             _context2.next = 5;
@@ -4333,6 +4355,7 @@ var Donation = /*#__PURE__*/function () {
           case 5:
             unmount = mount({
               style: style,
+              container: container,
               document: ensureDocument(document),
               closed: closed
             }, function (unmount) {
@@ -4614,6 +4637,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"
@@ -4639,7 +4666,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...")))
   });
 });
 
@@ -4817,12 +4846,12 @@ var preflight$1 = /*#__PURE__*/function () {
 
 var Payment = /*#__PURE__*/function () {
   var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-    var accept, amount, event, sent, confirmed, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, track, fee, recover, closable, integration, document, unmount;
+    var accept, amount, event, sent, confirmed, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, track, fee, recover, closable, integration, container, document, unmount;
     return regenerator.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            accept = _ref3.accept, amount = _ref3.amount, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, whitelist = _ref3.whitelist, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, track = _ref3.track, fee = _ref3.fee, recover = _ref3.recover, closable = _ref3.closable, integration = _ref3.integration, document = _ref3.document;
+            accept = _ref3.accept, amount = _ref3.amount, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, whitelist = _ref3.whitelist, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, track = _ref3.track, fee = _ref3.fee, recover = _ref3.recover, closable = _ref3.closable, integration = _ref3.integration, container = _ref3.container, document = _ref3.document;
             requireReactVersion();
             _context2.prev = 2;
             _context2.next = 5;
@@ -4834,6 +4863,7 @@ var Payment = /*#__PURE__*/function () {
           case 5:
             unmount = mount({
               style: style,
+              container: container,
               document: ensureDocument(document),
               closed: closed
             }, function (unmount) {

package/dist/umd/index.bundle.js

@@ -49839,7 +49839,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    @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    .contained .ReactDialog {\n      position: absolute;\n      height: 100%;\n      min-height: 100%;\n      width: 100%;\n      min-width: 100%;\n    }\n\n    .contained .ReactDialogBackground {\n      position: absolute;\n    }\n\n    .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n      top: 0;\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) {
@@ -49945,9 +49945,9 @@
 
   const insideContainerClass = 'ReactShadowDOMInsideContainer';
 
-  function createInsideContainer({ document, shadow, style }) {
+  function createInsideContainer({ document, shadow, style, classes = [] }) {
     const container = document.createElement('div');
-    container.setAttribute('class', insideContainerClass);
+    container.setAttribute('class', [insideContainerClass].concat(classes).join(' '));
     shadow.appendChild(container);
 
     if (style && style.length) {
@@ -50001,7 +50001,14 @@
     }
   }
 
-  function ReactShadowDOM({ document, element, content, outsideStyle = '', insideStyle = '' }) {
+  function ReactShadowDOM({
+    document,
+    element,
+    content,
+    outsideStyle = '',
+    insideStyle = '',
+    insideClasses = [],
+  }) {
     const outsideContainer = createOutsideContainer({
       document,
       element,
@@ -50010,7 +50017,12 @@
 
     const shadow = createShadow(outsideContainer);
 
-    const insideContainer = createInsideContainer({ document, shadow, style: trimStyle(insideStyle) });
+    const insideContainer = createInsideContainer({
+      document,
+      shadow,
+      style: trimStyle(insideStyle),
+      classes: insideClasses,
+    });
 
     if (typeof content === 'function') {
       content = content(insideContainer);
@@ -50023,6 +50035,7 @@
 
   var mount = (function (_ref, content) {
     var style = _ref.style,
+        container = _ref.container,
         document = _ref.document,
         closed = _ref.closed;
     var insideStyle = styleRenderer(style);
@@ -50042,12 +50055,21 @@
       }, 300);
     };
 
+    var outsideStyle;
+
+    if (container) {
+      outsideStyle = "\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      z-index: 99999;\n    ";
+    } else {
+      outsideStyle = "\n      position: fixed;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      z-index: 99999;\n    ";
+    }
+
     var _ReactShadowDOM = ReactShadowDOM({
       document: document,
-      element: document.body,
+      element: container || document.body,
       content: content(unmountShadowDOM),
+      outsideStyle: outsideStyle,
       insideStyle: insideStyle,
-      outsideStyle: "\n      position: fixed;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      z-index: 99999;\n    "
+      insideClasses: ['contained']
     }),
         unmount = _ReactShadowDOM.unmount;
 
@@ -63152,16 +63174,28 @@
 
         return new Promise((resolve, reject)=>{
           const address = options.accounts[blockchain];
-          fetch(`https://public.depay.fi/accounts/${blockchain}/${address}/assets`)
+          const controller = new AbortController();
+          setTimeout(()=>controller.abort(), 10000);
+          fetch(`https://public.depay.fi/accounts/${blockchain}/${address}/assets`, { signal: controller.signal })
             .catch((error) => { console.log(error); resolve([]); })
-            .then((response) => response.json())
+            .then((response) => {
+              if(response && response.ok) {
+                return response.json()
+              } else {
+                resolve([]);
+              }
+            })
             .then(async (assets) => {
-              return await ensureNativeTokenAsset({
-                address,
-                options,
-                assets: filterAssets({ assets, blockchain, options }).map((asset) => Object.assign(asset, { blockchain })),
-                blockchain
-              })
+              if(assets && assets.length) {
+                return await ensureNativeTokenAsset({
+                  address,
+                  options,
+                  assets: filterAssets({ assets, blockchain, options }).map((asset) => Object.assign(asset, { blockchain })),
+                  blockchain
+                })
+              } else {
+                resolve([]);
+              }
             })
             .then(resolve)
             .catch((error) => { console.log(error); resolve([]); });
@@ -85762,10 +85796,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;
@@ -85816,9 +85855,15 @@
         return;
       }
 
+      var slowRoutingTimeout = setTimeout(function () {
+        setSlowRouting(true);
+      }, 4000);
       routePayments(Object.assign({}, props, {
         account: account
-      })).then(onRoutesUpdate);
+      })).then(function (routes) {
+        clearInterval(slowRoutingTimeout);
+        onRoutesUpdate(routes);
+      });
     };
 
     var roundAmounts = /*#__PURE__*/function () {
@@ -85916,7 +85961,8 @@
         setSelectedRoute: setSelectedRoute,
         getPaymentRoutes: getPaymentRoutes,
         allRoutes: allRoutes,
-        setAllRoutes: setAllRoutes
+        setAllRoutes: setAllRoutes,
+        slowRouting: slowRouting
       }
     }, props.children);
   });
@@ -89150,12 +89196,12 @@
 
   var Donation = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-      var amount, accept, event, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, closable, integration, document, unmount;
+      var amount, accept, event, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, closable, integration, container, document, unmount;
       return regenerator.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              amount = _ref3.amount, accept = _ref3.accept, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, closable = _ref3.closable, integration = _ref3.integration, document = _ref3.document;
+              amount = _ref3.amount, accept = _ref3.accept, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, closable = _ref3.closable, integration = _ref3.integration, container = _ref3.container, document = _ref3.document;
               requireReactVersion();
               _context2.prev = 2;
               _context2.next = 5;
@@ -89166,6 +89212,7 @@
             case 5:
               unmount = mount({
                 style: style,
+                container: container,
                 document: ensureDocument(document),
                 closed: closed
               }, function (unmount) {
@@ -89447,6 +89494,10 @@
     var _useContext = react.useContext(ChangableAmountContext),
         amountsMissing = _useContext.amountsMissing;
 
+    var _useContext2 = react.useContext(PaymentRoutingContext),
+        slowRouting = _useContext2.slowRouting,
+        selectedRoute = _useContext2.selectedRoute;
+
     return /*#__PURE__*/react.createElement(Dialog, {
       header: /*#__PURE__*/react.createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
@@ -89472,7 +89523,9 @@
         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...")))
     });
   });
 
@@ -89650,12 +89703,12 @@
 
   var Payment = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-      var accept, amount, event, sent, confirmed, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, track, fee, recover, closable, integration, document, unmount;
+      var accept, amount, event, sent, confirmed, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, track, fee, recover, closable, integration, container, document, unmount;
       return regenerator.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              accept = _ref3.accept, amount = _ref3.amount, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, whitelist = _ref3.whitelist, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, track = _ref3.track, fee = _ref3.fee, recover = _ref3.recover, closable = _ref3.closable, integration = _ref3.integration, document = _ref3.document;
+              accept = _ref3.accept, amount = _ref3.amount, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, whitelist = _ref3.whitelist, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, track = _ref3.track, fee = _ref3.fee, recover = _ref3.recover, closable = _ref3.closable, integration = _ref3.integration, container = _ref3.container, document = _ref3.document;
               requireReactVersion();
               _context2.prev = 2;
               _context2.next = 5;
@@ -89667,6 +89720,7 @@
             case 5:
               unmount = mount({
                 style: style,
+                container: container,
                 document: ensureDocument(document),
                 closed: closed
               }, function (unmount) {

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    @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    .contained .ReactDialog {\n      position: absolute;\n      height: 100%;\n      min-height: 100%;\n      width: 100%;\n      min-width: 100%;\n    }\n\n    .contained .ReactDialogBackground {\n      position: absolute;\n    }\n\n    .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n      top: 0;\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) {
@@ -1795,6 +1795,7 @@
 
   var mount = (function (_ref, content) {
     var style = _ref.style,
+        container = _ref.container,
         document = _ref.document,
         closed = _ref.closed;
     var insideStyle = styleRenderer(style);
@@ -1814,12 +1815,21 @@
       }, 300);
     };
 
+    var outsideStyle;
+
+    if (container) {
+      outsideStyle = "\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      z-index: 99999;\n    ";
+    } else {
+      outsideStyle = "\n      position: fixed;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      z-index: 99999;\n    ";
+    }
+
     var _ReactShadowDOM = reactShadowDom.ReactShadowDOM({
       document: document,
-      element: document.body,
+      element: container || document.body,
       content: content(unmountShadowDOM),
+      outsideStyle: outsideStyle,
       insideStyle: insideStyle,
-      outsideStyle: "\n      position: fixed;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      z-index: 99999;\n    "
+      insideClasses: ['contained']
     }),
         unmount = _ReactShadowDOM.unmount;
 
@@ -2639,10 +2649,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;
@@ -2693,9 +2708,15 @@
         return;
       }
 
+      var slowRoutingTimeout = setTimeout(function () {
+        setSlowRouting(true);
+      }, 4000);
       routePayments(Object.assign({}, props, {
         account: account
-      })).then(onRoutesUpdate);
+      })).then(function (routes) {
+        clearInterval(slowRoutingTimeout);
+        onRoutesUpdate(routes);
+      });
     };
 
     var roundAmounts = /*#__PURE__*/function () {
@@ -2793,7 +2814,8 @@
         setSelectedRoute: setSelectedRoute,
         getPaymentRoutes: getPaymentRoutes,
         allRoutes: allRoutes,
-        setAllRoutes: setAllRoutes
+        setAllRoutes: setAllRoutes,
+        slowRouting: slowRouting
       }
     }, props.children);
   });
@@ -4312,12 +4334,12 @@
 
   var Donation = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-      var amount, accept, event, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, closable, integration, document, unmount;
+      var amount, accept, event, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, closable, integration, container, document, unmount;
       return regenerator.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              amount = _ref3.amount, accept = _ref3.accept, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, closable = _ref3.closable, integration = _ref3.integration, document = _ref3.document;
+              amount = _ref3.amount, accept = _ref3.accept, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, closable = _ref3.closable, integration = _ref3.integration, container = _ref3.container, document = _ref3.document;
               requireReactVersion();
               _context2.prev = 2;
               _context2.next = 5;
@@ -4328,6 +4350,7 @@
             case 5:
               unmount = mount({
                 style: style,
+                container: container,
                 document: ensureDocument(document),
                 closed: closed
               }, function (unmount) {
@@ -4609,6 +4632,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"
@@ -4634,7 +4661,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...")))
     });
   });
 
@@ -4812,12 +4841,12 @@
 
   var Payment = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-      var accept, amount, event, sent, confirmed, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, track, fee, recover, closable, integration, document, unmount;
+      var accept, amount, event, sent, confirmed, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, track, fee, recover, closable, integration, container, document, unmount;
       return regenerator.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              accept = _ref3.accept, amount = _ref3.amount, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, whitelist = _ref3.whitelist, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, track = _ref3.track, fee = _ref3.fee, recover = _ref3.recover, closable = _ref3.closable, integration = _ref3.integration, document = _ref3.document;
+              accept = _ref3.accept, amount = _ref3.amount, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, whitelist = _ref3.whitelist, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, track = _ref3.track, fee = _ref3.fee, recover = _ref3.recover, closable = _ref3.closable, integration = _ref3.integration, container = _ref3.container, document = _ref3.document;
               requireReactVersion();
               _context2.prev = 2;
               _context2.next = 5;
@@ -4829,6 +4858,7 @@
             case 5:
               unmount = mount({
                 style: style,
+                container: container,
                 document: ensureDocument(document),
                 closed: closed
               }, function (unmount) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@depay/widgets",
   "moduleName": "DePayWidgets",
-  "version": "6.24.0",
+  "version": "6.27.1",
   "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",
@@ -36,15 +36,15 @@
     "@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.0.0",
+    "@depay/react-shadow-dom": "^4.2.0",
     "@depay/react-token-image": "^3.0.0",
     "@depay/walletconnect-v1": "^1.1.0",
-    "@depay/web3-assets": "^6.1.5",
+    "@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.1",
-    "@depay/web3-payments": "^10.0.5",
+    "@depay/web3-payments": "^10.1.1",
     "@depay/web3-tokens": "^8.0.1",
     "@depay/web3-wallets": "^10.0.3",
     "decimal.js": "^10.3.1",