@depay/widgets 6.17.0 → 6.18.0

package/README.md

@@ -632,6 +632,19 @@ A recovered payment still results in a confirmed or failed payment, and also cal
 
 ```
 
+#### closable
+
+`closable`
+
+Makes the widget unclosable:
+
+```javascript
+DePayWidgets.Payment({
+  closable: false
+})
+
+```
+
 ## DePay Sales
 
 DePay Sales allows you to sell tokens directly from your website or dApp with automatic any-to-any payment conversion (so people can use any token when buying your token directly off your website or dApp).
@@ -1000,11 +1013,24 @@ DePayWidgets.Sale({
 Allows you to unmount (the React safe way) the entire widget from the outside:
 
 ```javascript
-let { unmount } = await DePayWidgets.Payment({})
+let { unmount } = await DePayWidgets.Sale({})
 
 unmount()
 ```
 
+#### closable
+
+`closable`
+
+Makes the widget unclosable:
+
+```javascript
+DePayWidgets.Sale({
+  closable: false
+})
+
+```
+
 ## DePay Donations
 
 DePay Donations allows you to accept donation payments made with thousands of different crypto currencies.
@@ -1361,11 +1387,24 @@ DePayWidgets.Donation({
 Allows you to unmount (the React safe way) the entire widget from the outside:
 
 ```javascript
-let { unmount } = await DePayWidgets.Payment({})
+let { unmount } = await DePayWidgets.Donation({})
 
 unmount()
 ```
 
+#### closable
+
+`closable`
+
+Makes the widget unclosable:
+
+```javascript
+DePayWidgets.Donation({
+  closable: false
+})
+
+```
+
 ## DePay Connect
 
 DePay Connect allows you to have your users connect their crypto wallet to your dApp or website.

package/dist/esm/index.bundle.js

@@ -1039,6 +1039,10 @@ var ClosableProvider = (function (props) {
       setUpdatable = _useContext.setUpdatable;
 
   var close = function close() {
+    if (props.closable === false) {
+      return;
+    }
+
     if (!closable) {
       return;
     }
@@ -2001,7 +2005,9 @@ var ConnectingWalletDialog = (function (props) {
   if (props.pending) {
     return /*#__PURE__*/react.createElement(Dialog, {
       stacked: true,
-      body: /*#__PURE__*/react.createElement("div", null, walletLogo && /*#__PURE__*/react.createElement("div", {
+      body: /*#__PURE__*/react.createElement("div", {
+        className: "TextCenter"
+      }, walletLogo && /*#__PURE__*/react.createElement("div", {
         className: "GraphicWrapper PaddingTopS PaddingBottomS"
       }, /*#__PURE__*/react.createElement("img", {
         className: "Graphic",
@@ -2017,7 +2023,9 @@ var ConnectingWalletDialog = (function (props) {
   } else {
     return /*#__PURE__*/react.createElement(Dialog, {
       stacked: true,
-      body: /*#__PURE__*/react.createElement("div", null, walletLogo && /*#__PURE__*/react.createElement("div", {
+      body: /*#__PURE__*/react.createElement("div", {
+        className: "TextCenter"
+      }, walletLogo && /*#__PURE__*/react.createElement("div", {
         className: "GraphicWrapper PaddingTopS PaddingBottomS"
       }, /*#__PURE__*/react.createElement("img", {
         className: "Graphic",
@@ -49492,7 +49500,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 screen and (max-width: 450px) {\n      .Dialog, .ReactDialogAnimation {\n        width: 100%;\n      }\n    }\n\n    @media (orientation: portrait) and (max-width: 900px) {\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        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      .DialogHeader {\n        border-top-left-radius: 0 !important;\n        border-top-right-radius: 0 !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      .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  ";
 });
 
 var FontStyle = (function (style) {
@@ -62331,10 +62339,14 @@ var timezoneToCurrency = {
 class Currency {
   constructor({ amount, code, timeZone = Currency.timeZone() }) {
     this.amount = amount;
-    this.code = code || timezoneToCurrency[timeZone] || 'USD';
+    this.code = code || Currency.getCode(timeZone);
     this.timeZone = timeZone;
   }
 
+  static getCode(timeZone) {
+    return timezoneToCurrency[timeZone || Currency.timeZone()] || 'USD'
+  }
+
   static async fromUSD({ amount, code, timeZone, apiKey }) {
     let currency = new Currency({ amount, code, timeZone });
     let rate = await fetch('https://api.depay.fi/v2/currencies/' + currency.code, {
@@ -62420,7 +62432,9 @@ var NoPaymentMethodFoundDialog = (function () {
     header: /*#__PURE__*/react.createElement("div", {
       className: "PaddingTopS PaddingLeftM PaddingRightM"
     }),
-    body: /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
+    body: /*#__PURE__*/react.createElement("div", {
+      className: "TextCenter"
+    }, /*#__PURE__*/react.createElement("div", {
       className: "GraphicWrapper"
     }, /*#__PURE__*/react.createElement("img", {
       className: "Graphic",
@@ -70794,7 +70808,9 @@ var PaymentErrorDialog = (function () {
     header: /*#__PURE__*/react.createElement("div", {
       className: "PaddingTopS PaddingLeftM PaddingRightM"
     }),
-    body: /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
+    body: /*#__PURE__*/react.createElement("div", {
+      className: "TextCenter"
+    }, /*#__PURE__*/react.createElement("div", {
       className: "GraphicWrapper"
     }, /*#__PURE__*/react.createElement("img", {
       className: "Graphic",
@@ -71430,12 +71446,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, document, unmount;
+    var amount, accept, event, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, closable, 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, 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, document = _ref3.document;
             _context2.prev = 1;
             _context2.next = 4;
             return preflight$2({
@@ -71466,7 +71482,8 @@ var Donation = /*#__PURE__*/function () {
                     providers: providers
                   }
                 }, /*#__PURE__*/react.createElement(UpdatableProvider, null, /*#__PURE__*/react.createElement(ClosableProvider, {
-                  unmount: unmount
+                  unmount: unmount,
+                  closable: closable
                 }, /*#__PURE__*/react.createElement(WalletProvider, {
                   container: container,
                   connected: connected,
@@ -71568,7 +71585,9 @@ var SignLoginDialog = (function (props) {
   };
 
   return /*#__PURE__*/react.createElement(Dialog, {
-    body: /*#__PURE__*/react.createElement("div", null, walletLogo && /*#__PURE__*/react.createElement("div", {
+    body: /*#__PURE__*/react.createElement("div", {
+      className: "TextCenter"
+    }, walletLogo && /*#__PURE__*/react.createElement("div", {
       className: "GraphicWrapper PaddingTopS PaddingBottomS"
     }, /*#__PURE__*/react.createElement("img", {
       className: "Graphic",
@@ -71923,12 +71942,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, document, unmount;
+    var accept, amount, event, sent, confirmed, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, track, fee, recover, closable, 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, 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, document = _ref3.document;
             _context2.prev = 1;
             _context2.next = 4;
             return preflight$1({
@@ -71964,7 +71983,8 @@ var Payment = /*#__PURE__*/function () {
                     recover: recover
                   }
                 }, /*#__PURE__*/react.createElement(UpdatableProvider, null, /*#__PURE__*/react.createElement(ClosableProvider, {
-                  unmount: unmount
+                  unmount: unmount,
+                  closable: closable
                 }, /*#__PURE__*/react.createElement(WalletProvider, {
                   document: document,
                   container: container,
@@ -72330,12 +72350,12 @@ var preflight = /*#__PURE__*/function () {
 
 var Sale = /*#__PURE__*/function () {
   var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-    var amount, sell, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, tokenImage, document, accept, unmount;
+    var amount, sell, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, tokenImage, closable, document, accept, unmount;
     return regenerator.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            amount = _ref3.amount, sell = _ref3.sell, 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, tokenImage = _ref3.tokenImage, document = _ref3.document;
+            amount = _ref3.amount, sell = _ref3.sell, 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, tokenImage = _ref3.tokenImage, closable = _ref3.closable, document = _ref3.document;
             _context2.prev = 1;
             _context2.next = 4;
             return preflight({
@@ -72372,7 +72392,8 @@ var Sale = /*#__PURE__*/function () {
                     providers: providers
                   }
                 }, /*#__PURE__*/react.createElement(UpdatableProvider, null, /*#__PURE__*/react.createElement(ClosableProvider, {
-                  unmount: unmount
+                  unmount: unmount,
+                  closable: closable
                 }, /*#__PURE__*/react.createElement(WalletProvider, {
                   container: container,
                   connected: connected,
@@ -72513,22 +72534,22 @@ var ConfirmTokenSelectionDialog = (function (props) {
     body: /*#__PURE__*/react.createElement("div", {
       className: "PaddingTopS PaddingLeftM PaddingRightM"
     }, /*#__PURE__*/react.createElement("div", {
-      className: "TokenImage medium"
+      className: "TokenImage medium TextCenter"
     }, logo && /*#__PURE__*/react.createElement("img", {
       src: logo
     }), !logo && /*#__PURE__*/react.createElement(TokenImage, {
       blockchain: token.blockchain,
       address: address
     })), /*#__PURE__*/react.createElement("div", {
-      className: "PaddingTopS"
+      className: "PaddingTopS TextCenter"
     }, /*#__PURE__*/react.createElement("div", {
       className: "Alert"
     }, /*#__PURE__*/react.createElement("strong", null, "Please review this information"))), /*#__PURE__*/react.createElement("div", {
       className: "PaddingTopXS"
     }, /*#__PURE__*/react.createElement("table", {
-      className: "Table"
+      className: "Table TextLeft"
     }, /*#__PURE__*/react.createElement("tbody", null, /*#__PURE__*/react.createElement("tr", {
-      className: "small"
+      className: "small TextCenter"
     }, /*#__PURE__*/react.createElement("td", {
       colSpan: "2"
     }, /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("a", {

package/dist/esm/index.js

@@ -904,6 +904,10 @@ var ClosableProvider = (function (props) {
       setUpdatable = _useContext.setUpdatable;
 
   var close = function close() {
+    if (props.closable === false) {
+      return;
+    }
+
     if (!closable) {
       return;
     }
@@ -1018,7 +1022,9 @@ var ConnectingWalletDialog = (function (props) {
   if (props.pending) {
     return /*#__PURE__*/React.createElement(Dialog$1, {
       stacked: true,
-      body: /*#__PURE__*/React.createElement("div", null, walletLogo && /*#__PURE__*/React.createElement("div", {
+      body: /*#__PURE__*/React.createElement("div", {
+        className: "TextCenter"
+      }, walletLogo && /*#__PURE__*/React.createElement("div", {
         className: "GraphicWrapper PaddingTopS PaddingBottomS"
       }, /*#__PURE__*/React.createElement("img", {
         className: "Graphic",
@@ -1034,7 +1040,9 @@ var ConnectingWalletDialog = (function (props) {
   } else {
     return /*#__PURE__*/React.createElement(Dialog$1, {
       stacked: true,
-      body: /*#__PURE__*/React.createElement("div", null, walletLogo && /*#__PURE__*/React.createElement("div", {
+      body: /*#__PURE__*/React.createElement("div", {
+        className: "TextCenter"
+      }, walletLogo && /*#__PURE__*/React.createElement("div", {
         className: "GraphicWrapper PaddingTopS PaddingBottomS"
       }, /*#__PURE__*/React.createElement("img", {
         className: "Graphic",
@@ -1678,7 +1686,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 screen and (max-width: 450px) {\n      .Dialog, .ReactDialogAnimation {\n        width: 100%;\n      }\n    }\n\n    @media (orientation: portrait) and (max-width: 900px) {\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        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      .DialogHeader {\n        border-top-left-radius: 0 !important;\n        border-top-right-radius: 0 !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      .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  ";
 });
 
 var FontStyle = (function (style) {
@@ -2248,7 +2256,9 @@ var NoPaymentMethodFoundDialog = (function () {
     header: /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopS PaddingLeftM PaddingRightM"
     }),
-    body: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    body: /*#__PURE__*/React.createElement("div", {
+      className: "TextCenter"
+    }, /*#__PURE__*/React.createElement("div", {
       className: "GraphicWrapper"
     }, /*#__PURE__*/React.createElement("img", {
       className: "Graphic",
@@ -3608,7 +3618,9 @@ var PaymentErrorDialog = (function () {
     header: /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopS PaddingLeftM PaddingRightM"
     }),
-    body: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    body: /*#__PURE__*/React.createElement("div", {
+      className: "TextCenter"
+    }, /*#__PURE__*/React.createElement("div", {
       className: "GraphicWrapper"
     }, /*#__PURE__*/React.createElement("img", {
       className: "Graphic",
@@ -4244,12 +4256,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, document, unmount;
+    var amount, accept, event, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, closable, 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, 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, document = _ref3.document;
             _context2.prev = 1;
             _context2.next = 4;
             return preflight$2({
@@ -4280,7 +4292,8 @@ var Donation = /*#__PURE__*/function () {
                     providers: providers
                   }
                 }, /*#__PURE__*/React.createElement(UpdatableProvider, null, /*#__PURE__*/React.createElement(ClosableProvider, {
-                  unmount: unmount
+                  unmount: unmount,
+                  closable: closable
                 }, /*#__PURE__*/React.createElement(WalletProvider, {
                   container: container,
                   connected: connected,
@@ -4382,7 +4395,9 @@ var SignLoginDialog = (function (props) {
   };
 
   return /*#__PURE__*/React.createElement(Dialog$1, {
-    body: /*#__PURE__*/React.createElement("div", null, walletLogo && /*#__PURE__*/React.createElement("div", {
+    body: /*#__PURE__*/React.createElement("div", {
+      className: "TextCenter"
+    }, walletLogo && /*#__PURE__*/React.createElement("div", {
       className: "GraphicWrapper PaddingTopS PaddingBottomS"
     }, /*#__PURE__*/React.createElement("img", {
       className: "Graphic",
@@ -4737,12 +4752,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, document, unmount;
+    var accept, amount, event, sent, confirmed, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, track, fee, recover, closable, 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, 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, document = _ref3.document;
             _context2.prev = 1;
             _context2.next = 4;
             return preflight$1({
@@ -4778,7 +4793,8 @@ var Payment = /*#__PURE__*/function () {
                     recover: recover
                   }
                 }, /*#__PURE__*/React.createElement(UpdatableProvider, null, /*#__PURE__*/React.createElement(ClosableProvider, {
-                  unmount: unmount
+                  unmount: unmount,
+                  closable: closable
                 }, /*#__PURE__*/React.createElement(WalletProvider, {
                   document: document,
                   container: container,
@@ -5144,12 +5160,12 @@ var preflight = /*#__PURE__*/function () {
 
 var Sale = /*#__PURE__*/function () {
   var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-    var amount, sell, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, tokenImage, document, accept, unmount;
+    var amount, sell, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, tokenImage, closable, document, accept, unmount;
     return regenerator.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            amount = _ref3.amount, sell = _ref3.sell, 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, tokenImage = _ref3.tokenImage, document = _ref3.document;
+            amount = _ref3.amount, sell = _ref3.sell, 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, tokenImage = _ref3.tokenImage, closable = _ref3.closable, document = _ref3.document;
             _context2.prev = 1;
             _context2.next = 4;
             return preflight({
@@ -5186,7 +5202,8 @@ var Sale = /*#__PURE__*/function () {
                     providers: providers
                   }
                 }, /*#__PURE__*/React.createElement(UpdatableProvider, null, /*#__PURE__*/React.createElement(ClosableProvider, {
-                  unmount: unmount
+                  unmount: unmount,
+                  closable: closable
                 }, /*#__PURE__*/React.createElement(WalletProvider, {
                   container: container,
                   connected: connected,
@@ -5327,22 +5344,22 @@ var ConfirmTokenSelectionDialog = (function (props) {
     body: /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopS PaddingLeftM PaddingRightM"
     }, /*#__PURE__*/React.createElement("div", {
-      className: "TokenImage medium"
+      className: "TokenImage medium TextCenter"
     }, logo && /*#__PURE__*/React.createElement("img", {
       src: logo
     }), !logo && /*#__PURE__*/React.createElement(TokenImage, {
       blockchain: token.blockchain,
       address: address
     })), /*#__PURE__*/React.createElement("div", {
-      className: "PaddingTopS"
+      className: "PaddingTopS TextCenter"
     }, /*#__PURE__*/React.createElement("div", {
       className: "Alert"
     }, /*#__PURE__*/React.createElement("strong", null, "Please review this information"))), /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopXS"
     }, /*#__PURE__*/React.createElement("table", {
-      className: "Table"
+      className: "Table TextLeft"
     }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", {
-      className: "small"
+      className: "small TextCenter"
     }, /*#__PURE__*/React.createElement("td", {
       colSpan: "2"
     }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {

package/dist/umd/index.bundle.js

@@ -1045,6 +1045,10 @@
         setUpdatable = _useContext.setUpdatable;
 
     var close = function close() {
+      if (props.closable === false) {
+        return;
+      }
+
       if (!closable) {
         return;
       }
@@ -2007,7 +2011,9 @@
     if (props.pending) {
       return /*#__PURE__*/react.createElement(Dialog, {
         stacked: true,
-        body: /*#__PURE__*/react.createElement("div", null, walletLogo && /*#__PURE__*/react.createElement("div", {
+        body: /*#__PURE__*/react.createElement("div", {
+          className: "TextCenter"
+        }, walletLogo && /*#__PURE__*/react.createElement("div", {
           className: "GraphicWrapper PaddingTopS PaddingBottomS"
         }, /*#__PURE__*/react.createElement("img", {
           className: "Graphic",
@@ -2023,7 +2029,9 @@
     } else {
       return /*#__PURE__*/react.createElement(Dialog, {
         stacked: true,
-        body: /*#__PURE__*/react.createElement("div", null, walletLogo && /*#__PURE__*/react.createElement("div", {
+        body: /*#__PURE__*/react.createElement("div", {
+          className: "TextCenter"
+        }, walletLogo && /*#__PURE__*/react.createElement("div", {
           className: "GraphicWrapper PaddingTopS PaddingBottomS"
         }, /*#__PURE__*/react.createElement("img", {
           className: "Graphic",
@@ -49498,7 +49506,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 screen and (max-width: 450px) {\n      .Dialog, .ReactDialogAnimation {\n        width: 100%;\n      }\n    }\n\n    @media (orientation: portrait) and (max-width: 900px) {\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        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      .DialogHeader {\n        border-top-left-radius: 0 !important;\n        border-top-right-radius: 0 !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      .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  ";
   });
 
   var FontStyle = (function (style) {
@@ -62337,10 +62345,14 @@
   class Currency {
     constructor({ amount, code, timeZone = Currency.timeZone() }) {
       this.amount = amount;
-      this.code = code || timezoneToCurrency[timeZone] || 'USD';
+      this.code = code || Currency.getCode(timeZone);
       this.timeZone = timeZone;
     }
 
+    static getCode(timeZone) {
+      return timezoneToCurrency[timeZone || Currency.timeZone()] || 'USD'
+    }
+
     static async fromUSD({ amount, code, timeZone, apiKey }) {
       let currency = new Currency({ amount, code, timeZone });
       let rate = await fetch('https://api.depay.fi/v2/currencies/' + currency.code, {
@@ -62426,7 +62438,9 @@
       header: /*#__PURE__*/react.createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM"
       }),
-      body: /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
+      body: /*#__PURE__*/react.createElement("div", {
+        className: "TextCenter"
+      }, /*#__PURE__*/react.createElement("div", {
         className: "GraphicWrapper"
       }, /*#__PURE__*/react.createElement("img", {
         className: "Graphic",
@@ -70800,7 +70814,9 @@
       header: /*#__PURE__*/react.createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM"
       }),
-      body: /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
+      body: /*#__PURE__*/react.createElement("div", {
+        className: "TextCenter"
+      }, /*#__PURE__*/react.createElement("div", {
         className: "GraphicWrapper"
       }, /*#__PURE__*/react.createElement("img", {
         className: "Graphic",
@@ -71436,12 +71452,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, document, unmount;
+      var amount, accept, event, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, closable, 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, 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, document = _ref3.document;
               _context2.prev = 1;
               _context2.next = 4;
               return preflight$2({
@@ -71472,7 +71488,8 @@
                       providers: providers
                     }
                   }, /*#__PURE__*/react.createElement(UpdatableProvider, null, /*#__PURE__*/react.createElement(ClosableProvider, {
-                    unmount: unmount
+                    unmount: unmount,
+                    closable: closable
                   }, /*#__PURE__*/react.createElement(WalletProvider, {
                     container: container,
                     connected: connected,
@@ -71574,7 +71591,9 @@
     };
 
     return /*#__PURE__*/react.createElement(Dialog, {
-      body: /*#__PURE__*/react.createElement("div", null, walletLogo && /*#__PURE__*/react.createElement("div", {
+      body: /*#__PURE__*/react.createElement("div", {
+        className: "TextCenter"
+      }, walletLogo && /*#__PURE__*/react.createElement("div", {
         className: "GraphicWrapper PaddingTopS PaddingBottomS"
       }, /*#__PURE__*/react.createElement("img", {
         className: "Graphic",
@@ -71929,12 +71948,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, document, unmount;
+      var accept, amount, event, sent, confirmed, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, track, fee, recover, closable, 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, 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, document = _ref3.document;
               _context2.prev = 1;
               _context2.next = 4;
               return preflight$1({
@@ -71970,7 +71989,8 @@
                       recover: recover
                     }
                   }, /*#__PURE__*/react.createElement(UpdatableProvider, null, /*#__PURE__*/react.createElement(ClosableProvider, {
-                    unmount: unmount
+                    unmount: unmount,
+                    closable: closable
                   }, /*#__PURE__*/react.createElement(WalletProvider, {
                     document: document,
                     container: container,
@@ -72336,12 +72356,12 @@
 
   var Sale = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-      var amount, sell, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, tokenImage, document, accept, unmount;
+      var amount, sell, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, tokenImage, closable, document, accept, unmount;
       return regenerator.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              amount = _ref3.amount, sell = _ref3.sell, 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, tokenImage = _ref3.tokenImage, document = _ref3.document;
+              amount = _ref3.amount, sell = _ref3.sell, 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, tokenImage = _ref3.tokenImage, closable = _ref3.closable, document = _ref3.document;
               _context2.prev = 1;
               _context2.next = 4;
               return preflight({
@@ -72378,7 +72398,8 @@
                       providers: providers
                     }
                   }, /*#__PURE__*/react.createElement(UpdatableProvider, null, /*#__PURE__*/react.createElement(ClosableProvider, {
-                    unmount: unmount
+                    unmount: unmount,
+                    closable: closable
                   }, /*#__PURE__*/react.createElement(WalletProvider, {
                     container: container,
                     connected: connected,
@@ -72519,22 +72540,22 @@
       body: /*#__PURE__*/react.createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM"
       }, /*#__PURE__*/react.createElement("div", {
-        className: "TokenImage medium"
+        className: "TokenImage medium TextCenter"
       }, logo && /*#__PURE__*/react.createElement("img", {
         src: logo
       }), !logo && /*#__PURE__*/react.createElement(TokenImage, {
         blockchain: token.blockchain,
         address: address
       })), /*#__PURE__*/react.createElement("div", {
-        className: "PaddingTopS"
+        className: "PaddingTopS TextCenter"
       }, /*#__PURE__*/react.createElement("div", {
         className: "Alert"
       }, /*#__PURE__*/react.createElement("strong", null, "Please review this information"))), /*#__PURE__*/react.createElement("div", {
         className: "PaddingTopXS"
       }, /*#__PURE__*/react.createElement("table", {
-        className: "Table"
+        className: "Table TextLeft"
       }, /*#__PURE__*/react.createElement("tbody", null, /*#__PURE__*/react.createElement("tr", {
-        className: "small"
+        className: "small TextCenter"
       }, /*#__PURE__*/react.createElement("td", {
         colSpan: "2"
       }, /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("a", {

package/dist/umd/index.js

@@ -899,6 +899,10 @@
         setUpdatable = _useContext.setUpdatable;
 
     var close = function close() {
+      if (props.closable === false) {
+        return;
+      }
+
       if (!closable) {
         return;
       }
@@ -1013,7 +1017,9 @@
     if (props.pending) {
       return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
         stacked: true,
-        body: /*#__PURE__*/React__default["default"].createElement("div", null, walletLogo && /*#__PURE__*/React__default["default"].createElement("div", {
+        body: /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "TextCenter"
+        }, walletLogo && /*#__PURE__*/React__default["default"].createElement("div", {
           className: "GraphicWrapper PaddingTopS PaddingBottomS"
         }, /*#__PURE__*/React__default["default"].createElement("img", {
           className: "Graphic",
@@ -1029,7 +1035,9 @@
     } else {
       return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
         stacked: true,
-        body: /*#__PURE__*/React__default["default"].createElement("div", null, walletLogo && /*#__PURE__*/React__default["default"].createElement("div", {
+        body: /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "TextCenter"
+        }, walletLogo && /*#__PURE__*/React__default["default"].createElement("div", {
           className: "GraphicWrapper PaddingTopS PaddingBottomS"
         }, /*#__PURE__*/React__default["default"].createElement("img", {
           className: "Graphic",
@@ -1673,7 +1681,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 screen and (max-width: 450px) {\n      .Dialog, .ReactDialogAnimation {\n        width: 100%;\n      }\n    }\n\n    @media (orientation: portrait) and (max-width: 900px) {\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        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      .DialogHeader {\n        border-top-left-radius: 0 !important;\n        border-top-right-radius: 0 !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      .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  ";
   });
 
   var FontStyle = (function (style) {
@@ -2243,7 +2251,9 @@
       header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM"
       }),
-      body: /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
+      body: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "TextCenter"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "GraphicWrapper"
       }, /*#__PURE__*/React__default["default"].createElement("img", {
         className: "Graphic",
@@ -3603,7 +3613,9 @@
       header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM"
       }),
-      body: /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
+      body: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "TextCenter"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "GraphicWrapper"
       }, /*#__PURE__*/React__default["default"].createElement("img", {
         className: "Graphic",
@@ -4239,12 +4251,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, document, unmount;
+      var amount, accept, event, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, closable, 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, 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, document = _ref3.document;
               _context2.prev = 1;
               _context2.next = 4;
               return preflight$2({
@@ -4275,7 +4287,8 @@
                       providers: providers
                     }
                   }, /*#__PURE__*/React__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
-                    unmount: unmount
+                    unmount: unmount,
+                    closable: closable
                   }, /*#__PURE__*/React__default["default"].createElement(WalletProvider, {
                     container: container,
                     connected: connected,
@@ -4377,7 +4390,9 @@
     };
 
     return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
-      body: /*#__PURE__*/React__default["default"].createElement("div", null, walletLogo && /*#__PURE__*/React__default["default"].createElement("div", {
+      body: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "TextCenter"
+      }, walletLogo && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "GraphicWrapper PaddingTopS PaddingBottomS"
       }, /*#__PURE__*/React__default["default"].createElement("img", {
         className: "Graphic",
@@ -4732,12 +4747,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, document, unmount;
+      var accept, amount, event, sent, confirmed, failed, error, critical, style, whitelist, blacklist, providers, currency, connected, closed, track, fee, recover, closable, 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, 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, document = _ref3.document;
               _context2.prev = 1;
               _context2.next = 4;
               return preflight$1({
@@ -4773,7 +4788,8 @@
                       recover: recover
                     }
                   }, /*#__PURE__*/React__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
-                    unmount: unmount
+                    unmount: unmount,
+                    closable: closable
                   }, /*#__PURE__*/React__default["default"].createElement(WalletProvider, {
                     document: document,
                     container: container,
@@ -5139,12 +5155,12 @@
 
   var Sale = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-      var amount, sell, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, tokenImage, document, accept, unmount;
+      var amount, sell, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, tokenImage, closable, document, accept, unmount;
       return regenerator.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              amount = _ref3.amount, sell = _ref3.sell, 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, tokenImage = _ref3.tokenImage, document = _ref3.document;
+              amount = _ref3.amount, sell = _ref3.sell, 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, tokenImage = _ref3.tokenImage, closable = _ref3.closable, document = _ref3.document;
               _context2.prev = 1;
               _context2.next = 4;
               return preflight({
@@ -5181,7 +5197,8 @@
                       providers: providers
                     }
                   }, /*#__PURE__*/React__default["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default["default"].createElement(ClosableProvider, {
-                    unmount: unmount
+                    unmount: unmount,
+                    closable: closable
                   }, /*#__PURE__*/React__default["default"].createElement(WalletProvider, {
                     container: container,
                     connected: connected,
@@ -5322,22 +5339,22 @@
       body: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "TokenImage medium"
+        className: "TokenImage medium TextCenter"
       }, logo && /*#__PURE__*/React__default["default"].createElement("img", {
         src: logo
       }), !logo && /*#__PURE__*/React__default["default"].createElement(reactTokenImage.TokenImage, {
         blockchain: token.blockchain,
         address: address
       })), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "PaddingTopS"
+        className: "PaddingTopS TextCenter"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "Alert"
       }, /*#__PURE__*/React__default["default"].createElement("strong", null, "Please review this information"))), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopXS"
       }, /*#__PURE__*/React__default["default"].createElement("table", {
-        className: "Table"
+        className: "Table TextLeft"
       }, /*#__PURE__*/React__default["default"].createElement("tbody", null, /*#__PURE__*/React__default["default"].createElement("tr", {
-        className: "small"
+        className: "small TextCenter"
       }, /*#__PURE__*/React__default["default"].createElement("td", {
         colSpan: "2"
       }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("a", {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@depay/widgets",
   "moduleName": "DePayWidgets",
-  "version": "6.17.0",
+  "version": "6.18.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",