diff --git a/dist/cjs/index.bundle.js b/dist/cjs/index.bundle.js
index c11fe01c..16db0bc2 100644
--- a/dist/cjs/index.bundle.js
+++ b/dist/cjs/index.bundle.js
@@ -49651,7 +49651,10 @@ class PaymentDialog extends react.Component {constructor(...args) { super(...arg
             token: route[route.length-1],
             from: from,
             nonce: transaction.nonce,
-            close: dialogContext.closeContainer
+            close: function(){
+              dialogContext.setClosable(true);
+              dialogContext.closeContainer();
+            }
           });
         }
         dialogContext.setClosable(false);
@@ -49672,7 +49675,10 @@ class PaymentDialog extends react.Component {constructor(...args) { super(...arg
                   amount: amountOut,
                   token: route[route.length-1],
                   from: from,
-                  close: dialogContext.closeContainer
+                  close: function(){
+                    dialogContext.setClosable(true);
+                    dialogContext.closeContainer();
+                  }
                 }); 
               }
             }, 100);
@@ -49698,73 +49704,73 @@ class PaymentDialog extends react.Component {constructor(...args) { super(...arg
   render() {
     if(this.props.initializing) { 
       return(
-        react.createElement(PaymentDialogSkeleton, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 218}})
+        react.createElement(PaymentDialogSkeleton, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 224}})
       ) 
     }
 
     if(!this.props.selected) {
       return(
-        react.createElement(NotEnoughFundsDialog, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 224}})
+        react.createElement(NotEnoughFundsDialog, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 230}})
       )
     }
 
     return (
-      react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 229}}
+      react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 235}}
         , dialogContext => (
-          react.createElement(NavigateStackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 231}}
+          react.createElement(NavigateStackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 237}}
             , navigate => (
-              react.createElement('div', { className: 'Dialog PaymentDialog ' + (this.isActionable(dialogContext) ? '' : 'unactionable'), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 233}}
-                , react.createElement('div', { className: "DialogHeader", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 234}}
-                  , react.createElement(CloseDialogComponent, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 235}})
+              react.createElement('div', { className: 'Dialog PaymentDialog ' + (this.isActionable(dialogContext) ? '' : 'unactionable'), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 239}}
+                , react.createElement('div', { className: "DialogHeader", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 240}}
+                  , react.createElement(CloseDialogComponent, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 241}})
                 )
-                , react.createElement('div', { className: "DialogBody HeightAuto" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 237}}
-                  , react.createElement('div', { className: "Payment", key:  this.props.selected.token.address , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 238}}
-                    , react.createElement('div', { className: "PaymentRow ChangePaymentRow" , onClick:  ()=> this.navigateIfActionable(navigate, 'ChangePaymentToken', dialogContext) , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 239}}
-                      , react.createElement('div', { className: "PaymentColumn PaymentColumn1" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 240}}
+                , react.createElement('div', { className: "DialogBody HeightAuto" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 243}}
+                  , react.createElement('div', { className: "Payment", key:  this.props.selected.token.address , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 244}}
+                    , react.createElement('div', { className: "PaymentRow ChangePaymentRow" , onClick:  ()=> this.navigateIfActionable(navigate, 'ChangePaymentToken', dialogContext) , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 245}}
+                      , react.createElement('div', { className: "PaymentColumn PaymentColumn1" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 246}}
                         , react.createElement(TokenIconComponent, {
                           title:  this.props.selected.token.name ,
-                          src:  this.props.selected.token.logoURI , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 241}}
+                          src:  this.props.selected.token.logoURI , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 247}}
                         )
                       )
-                      , react.createElement('div', { className: "PaymentColumn PaymentColumn2" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 246}}
-                        , react.createElement('div', { className: "PaymentDescription", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 247}}, "Payment"
+                      , react.createElement('div', { className: "PaymentColumn PaymentColumn2" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 252}}
+                        , react.createElement('div', { className: "PaymentDescription", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 253}}, "Payment"
 
                         )
-                        , react.createElement('div', { className: "PaymentAmountRow1 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 250}}
+                        , react.createElement('div', { className: "PaymentAmountRow1 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 256}}
                           ,  this.props.paymentContext.token 
                         )
-                        , react.createElement('div', { className: "PaymentAmountRow2 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 253}}
+                        , react.createElement('div', { className: "PaymentAmountRow2 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 259}}
                           ,  this.props.paymentContext.local 
                         )
                       )
-                      , react.createElement('div', { className: "PaymentColumn PaymentColumn3" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 257}}
-                        , react.createElement('span', { className: "PaymentAction", title: "Change payment" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 258}}, "Change"
+                      , react.createElement('div', { className: "PaymentColumn PaymentColumn3" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 263}}
+                        , react.createElement('span', { className: "PaymentAction", title: "Change payment" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 264}}, "Change"
 
                         )
                       )
                     )
                   )
                 )
-                , react.createElement('div', { className: "DialogFooter", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 265}}
+                , react.createElement('div', { className: "DialogFooter", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 271}}
                   ,  this.renderCallToAction.bind(this)() 
-                  , react.createElement('div', { className: "PoweredBy", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 267}}
+                  , react.createElement('div', { className: "PoweredBy", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 273}}
                     ,  this.renderTransaction.bind(this)() 
-                    , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/token/'+this.props.receiverToken.address , title: 'Sending '+DisplayTokenAmount(this.props.receiverAmount, this.props.receiverToken.decimals, this.props.receiverToken.symbol)+' to the receiver', __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 269}}
+                    , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/token/'+this.props.receiverToken.address , title: 'Sending '+DisplayTokenAmount(this.props.receiverAmount, this.props.receiverToken.decimals, this.props.receiverToken.symbol)+' to the receiver', __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 275}}
                       , react.createElement(TokenIconComponent, {
                         src:  this.props.receiverToken.logoURI ,
-                        className:  'tiny' , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 270}}
+                        className:  'tiny' , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 276}}
                       )
                     )
-                    , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 275}}, " • ")
+                    , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 281}}, " • ")
                     , this.paymentType() &&
-                      react.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 277}}
-                        , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  this.paymentTypeLink() , className: "PoweredByLink", title:  this.paymentTypeTitle() , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 278}}
+                      react.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 283}}
+                        , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  this.paymentTypeLink() , className: "PoweredByLink", title:  this.paymentTypeTitle() , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 284}}
                           ,  this.paymentTypeText() 
                         )
-                        , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 281}}, " • ")
+                        , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 287}}, " • ")
                       )
                     
-                    , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href: 'https://depay.fi?utm_source='+window.location.hostname+'&utm_medium=widget&utm_campaign=DePayPayment', className: "PoweredByLink", title: "Powered by DePay: Decentralized Payments"    , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 284}}, "by DePay"
+                    , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href: 'https://depay.fi?utm_source='+window.location.hostname+'&utm_medium=widget&utm_campaign=DePayPayment', className: "PoweredByLink", title: "Powered by DePay: Decentralized Payments"    , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 290}}, "by DePay"
 
                     )
                   )
@@ -49781,11 +49787,11 @@ class PaymentDialog extends react.Component {constructor(...args) { super(...arg
     if((this.state.paying && this.state.paying.transactionHash) || (this.state.payed && this.state.payed.transactionHash)) {
       let transactionHash = (this.state.paying && this.state.paying.transactionHash) || (this.state.payed && this.state.payed.transactionHash);
       return(
-        react.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 301}}
-          , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+transactionHash , className: "PoweredByLink", title: "Your transaction" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 302}}, "tx"
+        react.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 307}}
+          , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+transactionHash , className: "PoweredByLink", title: "Your transaction" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 308}}, "tx"
 
           )
-          , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 305}}, " • ")
+          , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 311}}, " • ")
         )
       )
     } else {
@@ -49798,14 +49804,14 @@ class PaymentDialog extends react.Component {constructor(...args) { super(...arg
       return(this.renderPaymentButton())
     } else {
       return(
-        react.createElement('div', { className: "Table", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 318}}
-          , react.createElement('div', { className: "TableRow", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 319}}
-            , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 320}}
+        react.createElement('div', { className: "Table", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 324}}
+          , react.createElement('div', { className: "TableRow", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 325}}
+            , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 326}}
               ,  this.renderApproveButton() 
             )
-            , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 323}}
-              , react.createElement('button', { className: "CallToAction MainAction disabled"  , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 324}}
-                , react.createElement('span', { className: "CallToActionName", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 325}}, "Pay"), " " , react.createElement('span', { className: "CallToActionPrice TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 325}},  this.props.paymentContext.total )
+            , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 329}}
+              , react.createElement('button', { className: "CallToAction MainAction disabled"  , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 330}}
+                , react.createElement('span', { className: "CallToActionName", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 331}}, "Pay"), " " , react.createElement('span', { className: "CallToActionPrice TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 331}},  this.props.paymentContext.total )
               )
             )
           )
@@ -49817,18 +49823,18 @@ class PaymentDialog extends react.Component {constructor(...args) { super(...arg
   renderApproveButton() {
     if(this.state.approving) {
       return(
-        react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.approving.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait for the approval transaction to be confirmed by the network. Click to open transaction on etherscan."                 , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 337}}, "Approving"
+        react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.approving.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait for the approval transaction to be confirmed by the network. Click to open transaction on etherscan."                 , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 343}}, "Approving"
 
-          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 339}}, ".")
-          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 340}}, ".")
-          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 341}}, ".")
+          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 345}}, ".")
+          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 346}}, ".")
+          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 347}}, ".")
         )
       )
     } else {
       return(
-        react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 346}}
+        react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 352}}
           , dialogContext => (
-            react.createElement('button', { key: "approve", className: "CallToAction MainAction" , onClick: ()=>this.approve.bind(this)(dialogContext), title: "Click to approve that the selected token is allowed to be swapped for performing this payment. This approval is only required the first time you pay with the selected token."                             , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 348}}, "Approve"
+            react.createElement('button', { key: "approve", className: "CallToAction MainAction" , onClick: ()=>this.approve.bind(this)(dialogContext), title: "Click to approve that the selected token is allowed to be swapped for performing this payment. This approval is only required the first time you pay with the selected token."                             , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 354}}, "Approve"
 
             )
           )
@@ -49840,32 +49846,32 @@ class PaymentDialog extends react.Component {constructor(...args) { super(...arg
   renderPaymentButton() {
     if(this.state.payed) {
       return(
-        react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 360}}
+        react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 366}}
           , dialogContext => (
-            react.createElement('span', { className: "CallToAction MainAction circular"  , onClick:  dialogContext.closeContainer , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 362}}
-              , react.createElement(CheckMarkComponent, { className: "large", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 363}})
+            react.createElement('span', { className: "CallToAction MainAction circular"  , onClick:  dialogContext.closeContainer , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 368}}
+              , react.createElement(CheckMarkComponent, { className: "large", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 369}})
             )
           )
         )
       )
     } else if(this.state.paying) {
       return(
-        react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.paying.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait payment transaction to be confirmed by the network. Click to open transaction on etherscan."               , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 370}}, "Paying"
+        react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.paying.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait payment transaction to be confirmed by the network. Click to open transaction on etherscan."               , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 376}}, "Paying"
 
-          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 372}}, ".")
-          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 373}}, ".")
-          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 374}}, ".")
+          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 378}}, ".")
+          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 379}}, ".")
+          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 380}}, ".")
         )
       )
     } else {
       return(
-        react.createElement(GasContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 379}}
+        react.createElement(GasContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 385}}
           , gasContext => (
-            react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 381}}
+            react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 387}}
               , dialogContext => (
-                react.createElement(CallbackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 383}}
+                react.createElement(CallbackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 389}}
                   , callbackContext => (
-                    react.createElement('button', { className: "CallToAction MainAction" , onClick: ()=>this.pay.bind(this)(dialogContext, callbackContext, gasContext), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 385}}, "Pay "
+                    react.createElement('button', { className: "CallToAction MainAction" , onClick: ()=>this.pay.bind(this)(dialogContext, callbackContext, gasContext), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 391}}, "Pay "
                        ,  this.props.paymentContext.total 
                     )
                   )
diff --git a/dist/cjs/index.js b/dist/cjs/index.js
index e3d43fb7..9108ab86 100644
--- a/dist/cjs/index.js
+++ b/dist/cjs/index.js
@@ -6409,7 +6409,10 @@ class PaymentDialog extends React__default['default'].Component {constructor(...
             token: route[route.length-1],
             from: from,
             nonce: transaction.nonce,
-            close: dialogContext.closeContainer
+            close: function(){
+              dialogContext.setClosable(true);
+              dialogContext.closeContainer();
+            }
           });
         }
         dialogContext.setClosable(false);
@@ -6430,7 +6433,10 @@ class PaymentDialog extends React__default['default'].Component {constructor(...
                   amount: amountOut,
                   token: route[route.length-1],
                   from: from,
-                  close: dialogContext.closeContainer
+                  close: function(){
+                    dialogContext.setClosable(true);
+                    dialogContext.closeContainer();
+                  }
                 }); 
               }
             }, 100);
@@ -6456,73 +6462,73 @@ class PaymentDialog extends React__default['default'].Component {constructor(...
   render() {
     if(this.props.initializing) { 
       return(
-        React__default['default'].createElement(PaymentDialogSkeleton, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 218}})
+        React__default['default'].createElement(PaymentDialogSkeleton, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 224}})
       ) 
     }
 
     if(!this.props.selected) {
       return(
-        React__default['default'].createElement(NotEnoughFundsDialog, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 224}})
+        React__default['default'].createElement(NotEnoughFundsDialog, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 230}})
       )
     }
 
     return (
-      React__default['default'].createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 229}}
+      React__default['default'].createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 235}}
         , dialogContext => (
-          React__default['default'].createElement(NavigateStackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 231}}
+          React__default['default'].createElement(NavigateStackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 237}}
             , navigate => (
-              React__default['default'].createElement('div', { className: 'Dialog PaymentDialog ' + (this.isActionable(dialogContext) ? '' : 'unactionable'), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 233}}
-                , React__default['default'].createElement('div', { className: "DialogHeader", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 234}}
-                  , React__default['default'].createElement(CloseDialogComponent, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 235}})
+              React__default['default'].createElement('div', { className: 'Dialog PaymentDialog ' + (this.isActionable(dialogContext) ? '' : 'unactionable'), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 239}}
+                , React__default['default'].createElement('div', { className: "DialogHeader", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 240}}
+                  , React__default['default'].createElement(CloseDialogComponent, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 241}})
                 )
-                , React__default['default'].createElement('div', { className: "DialogBody HeightAuto" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 237}}
-                  , React__default['default'].createElement('div', { className: "Payment", key:  this.props.selected.token.address , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 238}}
-                    , React__default['default'].createElement('div', { className: "PaymentRow ChangePaymentRow" , onClick:  ()=> this.navigateIfActionable(navigate, 'ChangePaymentToken', dialogContext) , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 239}}
-                      , React__default['default'].createElement('div', { className: "PaymentColumn PaymentColumn1" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 240}}
+                , React__default['default'].createElement('div', { className: "DialogBody HeightAuto" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 243}}
+                  , React__default['default'].createElement('div', { className: "Payment", key:  this.props.selected.token.address , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 244}}
+                    , React__default['default'].createElement('div', { className: "PaymentRow ChangePaymentRow" , onClick:  ()=> this.navigateIfActionable(navigate, 'ChangePaymentToken', dialogContext) , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 245}}
+                      , React__default['default'].createElement('div', { className: "PaymentColumn PaymentColumn1" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 246}}
                         , React__default['default'].createElement(TokenIconComponent, {
                           title:  this.props.selected.token.name ,
-                          src:  this.props.selected.token.logoURI , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 241}}
+                          src:  this.props.selected.token.logoURI , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 247}}
                         )
                       )
-                      , React__default['default'].createElement('div', { className: "PaymentColumn PaymentColumn2" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 246}}
-                        , React__default['default'].createElement('div', { className: "PaymentDescription", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 247}}, "Payment"
+                      , React__default['default'].createElement('div', { className: "PaymentColumn PaymentColumn2" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 252}}
+                        , React__default['default'].createElement('div', { className: "PaymentDescription", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 253}}, "Payment"
 
                         )
-                        , React__default['default'].createElement('div', { className: "PaymentAmountRow1 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 250}}
+                        , React__default['default'].createElement('div', { className: "PaymentAmountRow1 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 256}}
                           ,  this.props.paymentContext.token 
                         )
-                        , React__default['default'].createElement('div', { className: "PaymentAmountRow2 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 253}}
+                        , React__default['default'].createElement('div', { className: "PaymentAmountRow2 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 259}}
                           ,  this.props.paymentContext.local 
                         )
                       )
-                      , React__default['default'].createElement('div', { className: "PaymentColumn PaymentColumn3" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 257}}
-                        , React__default['default'].createElement('span', { className: "PaymentAction", title: "Change payment" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 258}}, "Change"
+                      , React__default['default'].createElement('div', { className: "PaymentColumn PaymentColumn3" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 263}}
+                        , React__default['default'].createElement('span', { className: "PaymentAction", title: "Change payment" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 264}}, "Change"
 
                         )
                       )
                     )
                   )
                 )
-                , React__default['default'].createElement('div', { className: "DialogFooter", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 265}}
+                , React__default['default'].createElement('div', { className: "DialogFooter", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 271}}
                   ,  this.renderCallToAction.bind(this)() 
-                  , React__default['default'].createElement('div', { className: "PoweredBy", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 267}}
+                  , React__default['default'].createElement('div', { className: "PoweredBy", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 273}}
                     ,  this.renderTransaction.bind(this)() 
-                    , React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/token/'+this.props.receiverToken.address , title: 'Sending '+DisplayTokenAmount(this.props.receiverAmount, this.props.receiverToken.decimals, this.props.receiverToken.symbol)+' to the receiver', __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 269}}
+                    , React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/token/'+this.props.receiverToken.address , title: 'Sending '+DisplayTokenAmount(this.props.receiverAmount, this.props.receiverToken.decimals, this.props.receiverToken.symbol)+' to the receiver', __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 275}}
                       , React__default['default'].createElement(TokenIconComponent, {
                         src:  this.props.receiverToken.logoURI ,
-                        className:  'tiny' , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 270}}
+                        className:  'tiny' , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 276}}
                       )
                     )
-                    , React__default['default'].createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 275}}, " • ")
+                    , React__default['default'].createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 281}}, " • ")
                     , this.paymentType() &&
-                      React__default['default'].createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 277}}
-                        , React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  this.paymentTypeLink() , className: "PoweredByLink", title:  this.paymentTypeTitle() , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 278}}
+                      React__default['default'].createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 283}}
+                        , React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  this.paymentTypeLink() , className: "PoweredByLink", title:  this.paymentTypeTitle() , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 284}}
                           ,  this.paymentTypeText() 
                         )
-                        , React__default['default'].createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 281}}, " • ")
+                        , React__default['default'].createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 287}}, " • ")
                       )
                     
-                    , React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href: 'https://depay.fi?utm_source='+window.location.hostname+'&utm_medium=widget&utm_campaign=DePayPayment', className: "PoweredByLink", title: "Powered by DePay: Decentralized Payments"    , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 284}}, "by DePay"
+                    , React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href: 'https://depay.fi?utm_source='+window.location.hostname+'&utm_medium=widget&utm_campaign=DePayPayment', className: "PoweredByLink", title: "Powered by DePay: Decentralized Payments"    , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 290}}, "by DePay"
 
                     )
                   )
@@ -6539,11 +6545,11 @@ class PaymentDialog extends React__default['default'].Component {constructor(...
     if((this.state.paying && this.state.paying.transactionHash) || (this.state.payed && this.state.payed.transactionHash)) {
       let transactionHash = (this.state.paying && this.state.paying.transactionHash) || (this.state.payed && this.state.payed.transactionHash);
       return(
-        React__default['default'].createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 301}}
-          , React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+transactionHash , className: "PoweredByLink", title: "Your transaction" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 302}}, "tx"
+        React__default['default'].createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 307}}
+          , React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+transactionHash , className: "PoweredByLink", title: "Your transaction" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 308}}, "tx"
 
           )
-          , React__default['default'].createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 305}}, " • ")
+          , React__default['default'].createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 311}}, " • ")
         )
       )
     } else {
@@ -6556,14 +6562,14 @@ class PaymentDialog extends React__default['default'].Component {constructor(...
       return(this.renderPaymentButton())
     } else {
       return(
-        React__default['default'].createElement('div', { className: "Table", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 318}}
-          , React__default['default'].createElement('div', { className: "TableRow", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 319}}
-            , React__default['default'].createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 320}}
+        React__default['default'].createElement('div', { className: "Table", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 324}}
+          , React__default['default'].createElement('div', { className: "TableRow", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 325}}
+            , React__default['default'].createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 326}}
               ,  this.renderApproveButton() 
             )
-            , React__default['default'].createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 323}}
-              , React__default['default'].createElement('button', { className: "CallToAction MainAction disabled"  , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 324}}
-                , React__default['default'].createElement('span', { className: "CallToActionName", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 325}}, "Pay"), " " , React__default['default'].createElement('span', { className: "CallToActionPrice TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 325}},  this.props.paymentContext.total )
+            , React__default['default'].createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 329}}
+              , React__default['default'].createElement('button', { className: "CallToAction MainAction disabled"  , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 330}}
+                , React__default['default'].createElement('span', { className: "CallToActionName", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 331}}, "Pay"), " " , React__default['default'].createElement('span', { className: "CallToActionPrice TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 331}},  this.props.paymentContext.total )
               )
             )
           )
@@ -6575,18 +6581,18 @@ class PaymentDialog extends React__default['default'].Component {constructor(...
   renderApproveButton() {
     if(this.state.approving) {
       return(
-        React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.approving.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait for the approval transaction to be confirmed by the network. Click to open transaction on etherscan."                 , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 337}}, "Approving"
+        React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.approving.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait for the approval transaction to be confirmed by the network. Click to open transaction on etherscan."                 , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 343}}, "Approving"
 
-          , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 339}}, ".")
-          , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 340}}, ".")
-          , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 341}}, ".")
+          , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 345}}, ".")
+          , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 346}}, ".")
+          , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 347}}, ".")
         )
       )
     } else {
       return(
-        React__default['default'].createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 346}}
+        React__default['default'].createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 352}}
           , dialogContext => (
-            React__default['default'].createElement('button', { key: "approve", className: "CallToAction MainAction" , onClick: ()=>this.approve.bind(this)(dialogContext), title: "Click to approve that the selected token is allowed to be swapped for performing this payment. This approval is only required the first time you pay with the selected token."                             , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 348}}, "Approve"
+            React__default['default'].createElement('button', { key: "approve", className: "CallToAction MainAction" , onClick: ()=>this.approve.bind(this)(dialogContext), title: "Click to approve that the selected token is allowed to be swapped for performing this payment. This approval is only required the first time you pay with the selected token."                             , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 354}}, "Approve"
 
             )
           )
@@ -6598,32 +6604,32 @@ class PaymentDialog extends React__default['default'].Component {constructor(...
   renderPaymentButton() {
     if(this.state.payed) {
       return(
-        React__default['default'].createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 360}}
+        React__default['default'].createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 366}}
           , dialogContext => (
-            React__default['default'].createElement('span', { className: "CallToAction MainAction circular"  , onClick:  dialogContext.closeContainer , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 362}}
-              , React__default['default'].createElement(CheckMarkComponent, { className: "large", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 363}})
+            React__default['default'].createElement('span', { className: "CallToAction MainAction circular"  , onClick:  dialogContext.closeContainer , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 368}}
+              , React__default['default'].createElement(CheckMarkComponent, { className: "large", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 369}})
             )
           )
         )
       )
     } else if(this.state.paying) {
       return(
-        React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.paying.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait payment transaction to be confirmed by the network. Click to open transaction on etherscan."               , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 370}}, "Paying"
+        React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.paying.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait payment transaction to be confirmed by the network. Click to open transaction on etherscan."               , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 376}}, "Paying"
 
-          , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 372}}, ".")
-          , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 373}}, ".")
-          , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 374}}, ".")
+          , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 378}}, ".")
+          , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 379}}, ".")
+          , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 380}}, ".")
         )
       )
     } else {
       return(
-        React__default['default'].createElement(GasContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 379}}
+        React__default['default'].createElement(GasContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 385}}
           , gasContext => (
-            React__default['default'].createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 381}}
+            React__default['default'].createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 387}}
               , dialogContext => (
-                React__default['default'].createElement(CallbackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 383}}
+                React__default['default'].createElement(CallbackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 389}}
                   , callbackContext => (
-                    React__default['default'].createElement('button', { className: "CallToAction MainAction" , onClick: ()=>this.pay.bind(this)(dialogContext, callbackContext, gasContext), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 385}}, "Pay "
+                    React__default['default'].createElement('button', { className: "CallToAction MainAction" , onClick: ()=>this.pay.bind(this)(dialogContext, callbackContext, gasContext), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 391}}, "Pay "
                        ,  this.props.paymentContext.total 
                     )
                   )
diff --git a/dist/es/index.bundle.js b/dist/es/index.bundle.js
index 3f985b0a..d536d67a 100644
--- a/dist/es/index.bundle.js
+++ b/dist/es/index.bundle.js
@@ -49647,7 +49647,10 @@ class PaymentDialog extends react.Component {constructor(...args) { super(...arg
             token: route[route.length-1],
             from: from,
             nonce: transaction.nonce,
-            close: dialogContext.closeContainer
+            close: function(){
+              dialogContext.setClosable(true);
+              dialogContext.closeContainer();
+            }
           });
         }
         dialogContext.setClosable(false);
@@ -49668,7 +49671,10 @@ class PaymentDialog extends react.Component {constructor(...args) { super(...arg
                   amount: amountOut,
                   token: route[route.length-1],
                   from: from,
-                  close: dialogContext.closeContainer
+                  close: function(){
+                    dialogContext.setClosable(true);
+                    dialogContext.closeContainer();
+                  }
                 }); 
               }
             }, 100);
@@ -49694,73 +49700,73 @@ class PaymentDialog extends react.Component {constructor(...args) { super(...arg
   render() {
     if(this.props.initializing) { 
       return(
-        react.createElement(PaymentDialogSkeleton, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 218}})
+        react.createElement(PaymentDialogSkeleton, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 224}})
       ) 
     }
 
     if(!this.props.selected) {
       return(
-        react.createElement(NotEnoughFundsDialog, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 224}})
+        react.createElement(NotEnoughFundsDialog, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 230}})
       )
     }
 
     return (
-      react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 229}}
+      react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 235}}
         , dialogContext => (
-          react.createElement(NavigateStackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 231}}
+          react.createElement(NavigateStackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 237}}
             , navigate => (
-              react.createElement('div', { className: 'Dialog PaymentDialog ' + (this.isActionable(dialogContext) ? '' : 'unactionable'), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 233}}
-                , react.createElement('div', { className: "DialogHeader", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 234}}
-                  , react.createElement(CloseDialogComponent, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 235}})
+              react.createElement('div', { className: 'Dialog PaymentDialog ' + (this.isActionable(dialogContext) ? '' : 'unactionable'), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 239}}
+                , react.createElement('div', { className: "DialogHeader", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 240}}
+                  , react.createElement(CloseDialogComponent, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 241}})
                 )
-                , react.createElement('div', { className: "DialogBody HeightAuto" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 237}}
-                  , react.createElement('div', { className: "Payment", key:  this.props.selected.token.address , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 238}}
-                    , react.createElement('div', { className: "PaymentRow ChangePaymentRow" , onClick:  ()=> this.navigateIfActionable(navigate, 'ChangePaymentToken', dialogContext) , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 239}}
-                      , react.createElement('div', { className: "PaymentColumn PaymentColumn1" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 240}}
+                , react.createElement('div', { className: "DialogBody HeightAuto" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 243}}
+                  , react.createElement('div', { className: "Payment", key:  this.props.selected.token.address , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 244}}
+                    , react.createElement('div', { className: "PaymentRow ChangePaymentRow" , onClick:  ()=> this.navigateIfActionable(navigate, 'ChangePaymentToken', dialogContext) , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 245}}
+                      , react.createElement('div', { className: "PaymentColumn PaymentColumn1" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 246}}
                         , react.createElement(TokenIconComponent, {
                           title:  this.props.selected.token.name ,
-                          src:  this.props.selected.token.logoURI , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 241}}
+                          src:  this.props.selected.token.logoURI , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 247}}
                         )
                       )
-                      , react.createElement('div', { className: "PaymentColumn PaymentColumn2" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 246}}
-                        , react.createElement('div', { className: "PaymentDescription", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 247}}, "Payment"
+                      , react.createElement('div', { className: "PaymentColumn PaymentColumn2" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 252}}
+                        , react.createElement('div', { className: "PaymentDescription", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 253}}, "Payment"
 
                         )
-                        , react.createElement('div', { className: "PaymentAmountRow1 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 250}}
+                        , react.createElement('div', { className: "PaymentAmountRow1 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 256}}
                           ,  this.props.paymentContext.token 
                         )
-                        , react.createElement('div', { className: "PaymentAmountRow2 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 253}}
+                        , react.createElement('div', { className: "PaymentAmountRow2 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 259}}
                           ,  this.props.paymentContext.local 
                         )
                       )
-                      , react.createElement('div', { className: "PaymentColumn PaymentColumn3" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 257}}
-                        , react.createElement('span', { className: "PaymentAction", title: "Change payment" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 258}}, "Change"
+                      , react.createElement('div', { className: "PaymentColumn PaymentColumn3" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 263}}
+                        , react.createElement('span', { className: "PaymentAction", title: "Change payment" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 264}}, "Change"
 
                         )
                       )
                     )
                   )
                 )
-                , react.createElement('div', { className: "DialogFooter", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 265}}
+                , react.createElement('div', { className: "DialogFooter", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 271}}
                   ,  this.renderCallToAction.bind(this)() 
-                  , react.createElement('div', { className: "PoweredBy", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 267}}
+                  , react.createElement('div', { className: "PoweredBy", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 273}}
                     ,  this.renderTransaction.bind(this)() 
-                    , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/token/'+this.props.receiverToken.address , title: 'Sending '+DisplayTokenAmount(this.props.receiverAmount, this.props.receiverToken.decimals, this.props.receiverToken.symbol)+' to the receiver', __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 269}}
+                    , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/token/'+this.props.receiverToken.address , title: 'Sending '+DisplayTokenAmount(this.props.receiverAmount, this.props.receiverToken.decimals, this.props.receiverToken.symbol)+' to the receiver', __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 275}}
                       , react.createElement(TokenIconComponent, {
                         src:  this.props.receiverToken.logoURI ,
-                        className:  'tiny' , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 270}}
+                        className:  'tiny' , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 276}}
                       )
                     )
-                    , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 275}}, " • ")
+                    , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 281}}, " • ")
                     , this.paymentType() &&
-                      react.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 277}}
-                        , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  this.paymentTypeLink() , className: "PoweredByLink", title:  this.paymentTypeTitle() , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 278}}
+                      react.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 283}}
+                        , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  this.paymentTypeLink() , className: "PoweredByLink", title:  this.paymentTypeTitle() , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 284}}
                           ,  this.paymentTypeText() 
                         )
-                        , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 281}}, " • ")
+                        , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 287}}, " • ")
                       )
                     
-                    , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href: 'https://depay.fi?utm_source='+window.location.hostname+'&utm_medium=widget&utm_campaign=DePayPayment', className: "PoweredByLink", title: "Powered by DePay: Decentralized Payments"    , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 284}}, "by DePay"
+                    , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href: 'https://depay.fi?utm_source='+window.location.hostname+'&utm_medium=widget&utm_campaign=DePayPayment', className: "PoweredByLink", title: "Powered by DePay: Decentralized Payments"    , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 290}}, "by DePay"
 
                     )
                   )
@@ -49777,11 +49783,11 @@ class PaymentDialog extends react.Component {constructor(...args) { super(...arg
     if((this.state.paying && this.state.paying.transactionHash) || (this.state.payed && this.state.payed.transactionHash)) {
       let transactionHash = (this.state.paying && this.state.paying.transactionHash) || (this.state.payed && this.state.payed.transactionHash);
       return(
-        react.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 301}}
-          , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+transactionHash , className: "PoweredByLink", title: "Your transaction" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 302}}, "tx"
+        react.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 307}}
+          , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+transactionHash , className: "PoweredByLink", title: "Your transaction" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 308}}, "tx"
 
           )
-          , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 305}}, " • ")
+          , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 311}}, " • ")
         )
       )
     } else {
@@ -49794,14 +49800,14 @@ class PaymentDialog extends react.Component {constructor(...args) { super(...arg
       return(this.renderPaymentButton())
     } else {
       return(
-        react.createElement('div', { className: "Table", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 318}}
-          , react.createElement('div', { className: "TableRow", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 319}}
-            , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 320}}
+        react.createElement('div', { className: "Table", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 324}}
+          , react.createElement('div', { className: "TableRow", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 325}}
+            , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 326}}
               ,  this.renderApproveButton() 
             )
-            , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 323}}
-              , react.createElement('button', { className: "CallToAction MainAction disabled"  , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 324}}
-                , react.createElement('span', { className: "CallToActionName", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 325}}, "Pay"), " " , react.createElement('span', { className: "CallToActionPrice TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 325}},  this.props.paymentContext.total )
+            , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 329}}
+              , react.createElement('button', { className: "CallToAction MainAction disabled"  , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 330}}
+                , react.createElement('span', { className: "CallToActionName", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 331}}, "Pay"), " " , react.createElement('span', { className: "CallToActionPrice TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 331}},  this.props.paymentContext.total )
               )
             )
           )
@@ -49813,18 +49819,18 @@ class PaymentDialog extends react.Component {constructor(...args) { super(...arg
   renderApproveButton() {
     if(this.state.approving) {
       return(
-        react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.approving.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait for the approval transaction to be confirmed by the network. Click to open transaction on etherscan."                 , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 337}}, "Approving"
+        react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.approving.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait for the approval transaction to be confirmed by the network. Click to open transaction on etherscan."                 , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 343}}, "Approving"
 
-          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 339}}, ".")
-          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 340}}, ".")
-          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 341}}, ".")
+          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 345}}, ".")
+          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 346}}, ".")
+          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 347}}, ".")
         )
       )
     } else {
       return(
-        react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 346}}
+        react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 352}}
           , dialogContext => (
-            react.createElement('button', { key: "approve", className: "CallToAction MainAction" , onClick: ()=>this.approve.bind(this)(dialogContext), title: "Click to approve that the selected token is allowed to be swapped for performing this payment. This approval is only required the first time you pay with the selected token."                             , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 348}}, "Approve"
+            react.createElement('button', { key: "approve", className: "CallToAction MainAction" , onClick: ()=>this.approve.bind(this)(dialogContext), title: "Click to approve that the selected token is allowed to be swapped for performing this payment. This approval is only required the first time you pay with the selected token."                             , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 354}}, "Approve"
 
             )
           )
@@ -49836,32 +49842,32 @@ class PaymentDialog extends react.Component {constructor(...args) { super(...arg
   renderPaymentButton() {
     if(this.state.payed) {
       return(
-        react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 360}}
+        react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 366}}
           , dialogContext => (
-            react.createElement('span', { className: "CallToAction MainAction circular"  , onClick:  dialogContext.closeContainer , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 362}}
-              , react.createElement(CheckMarkComponent, { className: "large", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 363}})
+            react.createElement('span', { className: "CallToAction MainAction circular"  , onClick:  dialogContext.closeContainer , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 368}}
+              , react.createElement(CheckMarkComponent, { className: "large", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 369}})
             )
           )
         )
       )
     } else if(this.state.paying) {
       return(
-        react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.paying.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait payment transaction to be confirmed by the network. Click to open transaction on etherscan."               , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 370}}, "Paying"
+        react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.paying.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait payment transaction to be confirmed by the network. Click to open transaction on etherscan."               , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 376}}, "Paying"
 
-          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 372}}, ".")
-          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 373}}, ".")
-          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 374}}, ".")
+          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 378}}, ".")
+          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 379}}, ".")
+          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 380}}, ".")
         )
       )
     } else {
       return(
-        react.createElement(GasContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 379}}
+        react.createElement(GasContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 385}}
           , gasContext => (
-            react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 381}}
+            react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 387}}
               , dialogContext => (
-                react.createElement(CallbackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 383}}
+                react.createElement(CallbackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 389}}
                   , callbackContext => (
-                    react.createElement('button', { className: "CallToAction MainAction" , onClick: ()=>this.pay.bind(this)(dialogContext, callbackContext, gasContext), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 385}}, "Pay "
+                    react.createElement('button', { className: "CallToAction MainAction" , onClick: ()=>this.pay.bind(this)(dialogContext, callbackContext, gasContext), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 391}}, "Pay "
                        ,  this.props.paymentContext.total 
                     )
                   )
diff --git a/dist/es/index.js b/dist/es/index.js
index 41fe26a5..90628770 100644
--- a/dist/es/index.js
+++ b/dist/es/index.js
@@ -6397,7 +6397,10 @@ class PaymentDialog extends React.Component {constructor(...args) { super(...arg
             token: route[route.length-1],
             from: from,
             nonce: transaction.nonce,
-            close: dialogContext.closeContainer
+            close: function(){
+              dialogContext.setClosable(true);
+              dialogContext.closeContainer();
+            }
           });
         }
         dialogContext.setClosable(false);
@@ -6418,7 +6421,10 @@ class PaymentDialog extends React.Component {constructor(...args) { super(...arg
                   amount: amountOut,
                   token: route[route.length-1],
                   from: from,
-                  close: dialogContext.closeContainer
+                  close: function(){
+                    dialogContext.setClosable(true);
+                    dialogContext.closeContainer();
+                  }
                 }); 
               }
             }, 100);
@@ -6444,73 +6450,73 @@ class PaymentDialog extends React.Component {constructor(...args) { super(...arg
   render() {
     if(this.props.initializing) { 
       return(
-        React.createElement(PaymentDialogSkeleton, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 218}})
+        React.createElement(PaymentDialogSkeleton, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 224}})
       ) 
     }
 
     if(!this.props.selected) {
       return(
-        React.createElement(NotEnoughFundsDialog, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 224}})
+        React.createElement(NotEnoughFundsDialog, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 230}})
       )
     }
 
     return (
-      React.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 229}}
+      React.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 235}}
         , dialogContext => (
-          React.createElement(NavigateStackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 231}}
+          React.createElement(NavigateStackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 237}}
             , navigate => (
-              React.createElement('div', { className: 'Dialog PaymentDialog ' + (this.isActionable(dialogContext) ? '' : 'unactionable'), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 233}}
-                , React.createElement('div', { className: "DialogHeader", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 234}}
-                  , React.createElement(CloseDialogComponent, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 235}})
+              React.createElement('div', { className: 'Dialog PaymentDialog ' + (this.isActionable(dialogContext) ? '' : 'unactionable'), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 239}}
+                , React.createElement('div', { className: "DialogHeader", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 240}}
+                  , React.createElement(CloseDialogComponent, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 241}})
                 )
-                , React.createElement('div', { className: "DialogBody HeightAuto" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 237}}
-                  , React.createElement('div', { className: "Payment", key:  this.props.selected.token.address , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 238}}
-                    , React.createElement('div', { className: "PaymentRow ChangePaymentRow" , onClick:  ()=> this.navigateIfActionable(navigate, 'ChangePaymentToken', dialogContext) , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 239}}
-                      , React.createElement('div', { className: "PaymentColumn PaymentColumn1" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 240}}
+                , React.createElement('div', { className: "DialogBody HeightAuto" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 243}}
+                  , React.createElement('div', { className: "Payment", key:  this.props.selected.token.address , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 244}}
+                    , React.createElement('div', { className: "PaymentRow ChangePaymentRow" , onClick:  ()=> this.navigateIfActionable(navigate, 'ChangePaymentToken', dialogContext) , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 245}}
+                      , React.createElement('div', { className: "PaymentColumn PaymentColumn1" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 246}}
                         , React.createElement(TokenIconComponent, {
                           title:  this.props.selected.token.name ,
-                          src:  this.props.selected.token.logoURI , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 241}}
+                          src:  this.props.selected.token.logoURI , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 247}}
                         )
                       )
-                      , React.createElement('div', { className: "PaymentColumn PaymentColumn2" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 246}}
-                        , React.createElement('div', { className: "PaymentDescription", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 247}}, "Payment"
+                      , React.createElement('div', { className: "PaymentColumn PaymentColumn2" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 252}}
+                        , React.createElement('div', { className: "PaymentDescription", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 253}}, "Payment"
 
                         )
-                        , React.createElement('div', { className: "PaymentAmountRow1 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 250}}
+                        , React.createElement('div', { className: "PaymentAmountRow1 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 256}}
                           ,  this.props.paymentContext.token 
                         )
-                        , React.createElement('div', { className: "PaymentAmountRow2 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 253}}
+                        , React.createElement('div', { className: "PaymentAmountRow2 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 259}}
                           ,  this.props.paymentContext.local 
                         )
                       )
-                      , React.createElement('div', { className: "PaymentColumn PaymentColumn3" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 257}}
-                        , React.createElement('span', { className: "PaymentAction", title: "Change payment" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 258}}, "Change"
+                      , React.createElement('div', { className: "PaymentColumn PaymentColumn3" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 263}}
+                        , React.createElement('span', { className: "PaymentAction", title: "Change payment" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 264}}, "Change"
 
                         )
                       )
                     )
                   )
                 )
-                , React.createElement('div', { className: "DialogFooter", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 265}}
+                , React.createElement('div', { className: "DialogFooter", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 271}}
                   ,  this.renderCallToAction.bind(this)() 
-                  , React.createElement('div', { className: "PoweredBy", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 267}}
+                  , React.createElement('div', { className: "PoweredBy", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 273}}
                     ,  this.renderTransaction.bind(this)() 
-                    , React.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/token/'+this.props.receiverToken.address , title: 'Sending '+DisplayTokenAmount(this.props.receiverAmount, this.props.receiverToken.decimals, this.props.receiverToken.symbol)+' to the receiver', __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 269}}
+                    , React.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/token/'+this.props.receiverToken.address , title: 'Sending '+DisplayTokenAmount(this.props.receiverAmount, this.props.receiverToken.decimals, this.props.receiverToken.symbol)+' to the receiver', __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 275}}
                       , React.createElement(TokenIconComponent, {
                         src:  this.props.receiverToken.logoURI ,
-                        className:  'tiny' , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 270}}
+                        className:  'tiny' , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 276}}
                       )
                     )
-                    , React.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 275}}, " • ")
+                    , React.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 281}}, " • ")
                     , this.paymentType() &&
-                      React.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 277}}
-                        , React.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  this.paymentTypeLink() , className: "PoweredByLink", title:  this.paymentTypeTitle() , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 278}}
+                      React.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 283}}
+                        , React.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  this.paymentTypeLink() , className: "PoweredByLink", title:  this.paymentTypeTitle() , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 284}}
                           ,  this.paymentTypeText() 
                         )
-                        , React.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 281}}, " • ")
+                        , React.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 287}}, " • ")
                       )
                     
-                    , React.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href: 'https://depay.fi?utm_source='+window.location.hostname+'&utm_medium=widget&utm_campaign=DePayPayment', className: "PoweredByLink", title: "Powered by DePay: Decentralized Payments"    , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 284}}, "by DePay"
+                    , React.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href: 'https://depay.fi?utm_source='+window.location.hostname+'&utm_medium=widget&utm_campaign=DePayPayment', className: "PoweredByLink", title: "Powered by DePay: Decentralized Payments"    , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 290}}, "by DePay"
 
                     )
                   )
@@ -6527,11 +6533,11 @@ class PaymentDialog extends React.Component {constructor(...args) { super(...arg
     if((this.state.paying && this.state.paying.transactionHash) || (this.state.payed && this.state.payed.transactionHash)) {
       let transactionHash = (this.state.paying && this.state.paying.transactionHash) || (this.state.payed && this.state.payed.transactionHash);
       return(
-        React.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 301}}
-          , React.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+transactionHash , className: "PoweredByLink", title: "Your transaction" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 302}}, "tx"
+        React.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 307}}
+          , React.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+transactionHash , className: "PoweredByLink", title: "Your transaction" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 308}}, "tx"
 
           )
-          , React.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 305}}, " • ")
+          , React.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 311}}, " • ")
         )
       )
     } else {
@@ -6544,14 +6550,14 @@ class PaymentDialog extends React.Component {constructor(...args) { super(...arg
       return(this.renderPaymentButton())
     } else {
       return(
-        React.createElement('div', { className: "Table", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 318}}
-          , React.createElement('div', { className: "TableRow", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 319}}
-            , React.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 320}}
+        React.createElement('div', { className: "Table", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 324}}
+          , React.createElement('div', { className: "TableRow", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 325}}
+            , React.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 326}}
               ,  this.renderApproveButton() 
             )
-            , React.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 323}}
-              , React.createElement('button', { className: "CallToAction MainAction disabled"  , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 324}}
-                , React.createElement('span', { className: "CallToActionName", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 325}}, "Pay"), " " , React.createElement('span', { className: "CallToActionPrice TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 325}},  this.props.paymentContext.total )
+            , React.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 329}}
+              , React.createElement('button', { className: "CallToAction MainAction disabled"  , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 330}}
+                , React.createElement('span', { className: "CallToActionName", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 331}}, "Pay"), " " , React.createElement('span', { className: "CallToActionPrice TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 331}},  this.props.paymentContext.total )
               )
             )
           )
@@ -6563,18 +6569,18 @@ class PaymentDialog extends React.Component {constructor(...args) { super(...arg
   renderApproveButton() {
     if(this.state.approving) {
       return(
-        React.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.approving.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait for the approval transaction to be confirmed by the network. Click to open transaction on etherscan."                 , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 337}}, "Approving"
+        React.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.approving.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait for the approval transaction to be confirmed by the network. Click to open transaction on etherscan."                 , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 343}}, "Approving"
 
-          , React.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 339}}, ".")
-          , React.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 340}}, ".")
-          , React.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 341}}, ".")
+          , React.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 345}}, ".")
+          , React.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 346}}, ".")
+          , React.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 347}}, ".")
         )
       )
     } else {
       return(
-        React.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 346}}
+        React.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 352}}
           , dialogContext => (
-            React.createElement('button', { key: "approve", className: "CallToAction MainAction" , onClick: ()=>this.approve.bind(this)(dialogContext), title: "Click to approve that the selected token is allowed to be swapped for performing this payment. This approval is only required the first time you pay with the selected token."                             , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 348}}, "Approve"
+            React.createElement('button', { key: "approve", className: "CallToAction MainAction" , onClick: ()=>this.approve.bind(this)(dialogContext), title: "Click to approve that the selected token is allowed to be swapped for performing this payment. This approval is only required the first time you pay with the selected token."                             , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 354}}, "Approve"
 
             )
           )
@@ -6586,32 +6592,32 @@ class PaymentDialog extends React.Component {constructor(...args) { super(...arg
   renderPaymentButton() {
     if(this.state.payed) {
       return(
-        React.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 360}}
+        React.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 366}}
           , dialogContext => (
-            React.createElement('span', { className: "CallToAction MainAction circular"  , onClick:  dialogContext.closeContainer , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 362}}
-              , React.createElement(CheckMarkComponent, { className: "large", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 363}})
+            React.createElement('span', { className: "CallToAction MainAction circular"  , onClick:  dialogContext.closeContainer , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 368}}
+              , React.createElement(CheckMarkComponent, { className: "large", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 369}})
             )
           )
         )
       )
     } else if(this.state.paying) {
       return(
-        React.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.paying.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait payment transaction to be confirmed by the network. Click to open transaction on etherscan."               , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 370}}, "Paying"
+        React.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.paying.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait payment transaction to be confirmed by the network. Click to open transaction on etherscan."               , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 376}}, "Paying"
 
-          , React.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 372}}, ".")
-          , React.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 373}}, ".")
-          , React.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 374}}, ".")
+          , React.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 378}}, ".")
+          , React.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 379}}, ".")
+          , React.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 380}}, ".")
         )
       )
     } else {
       return(
-        React.createElement(GasContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 379}}
+        React.createElement(GasContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 385}}
           , gasContext => (
-            React.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 381}}
+            React.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 387}}
               , dialogContext => (
-                React.createElement(CallbackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 383}}
+                React.createElement(CallbackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 389}}
                   , callbackContext => (
-                    React.createElement('button', { className: "CallToAction MainAction" , onClick: ()=>this.pay.bind(this)(dialogContext, callbackContext, gasContext), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 385}}, "Pay "
+                    React.createElement('button', { className: "CallToAction MainAction" , onClick: ()=>this.pay.bind(this)(dialogContext, callbackContext, gasContext), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 391}}, "Pay "
                        ,  this.props.paymentContext.total 
                     )
                   )
diff --git a/dist/umd/index.bundle.js b/dist/umd/index.bundle.js
index afdd5d84..19b8db24 100644
--- a/dist/umd/index.bundle.js
+++ b/dist/umd/index.bundle.js
@@ -49653,7 +49653,10 @@
 	            token: route[route.length-1],
 	            from: from,
 	            nonce: transaction.nonce,
-	            close: dialogContext.closeContainer
+	            close: function(){
+	              dialogContext.setClosable(true);
+	              dialogContext.closeContainer();
+	            }
 	          });
 	        }
 	        dialogContext.setClosable(false);
@@ -49674,7 +49677,10 @@
 	                  amount: amountOut,
 	                  token: route[route.length-1],
 	                  from: from,
-	                  close: dialogContext.closeContainer
+	                  close: function(){
+	                    dialogContext.setClosable(true);
+	                    dialogContext.closeContainer();
+	                  }
 	                }); 
 	              }
 	            }, 100);
@@ -49700,73 +49706,73 @@
 	  render() {
 	    if(this.props.initializing) { 
 	      return(
-	        react.createElement(PaymentDialogSkeleton, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 218}})
+	        react.createElement(PaymentDialogSkeleton, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 224}})
 	      ) 
 	    }
 
 	    if(!this.props.selected) {
 	      return(
-	        react.createElement(NotEnoughFundsDialog, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 224}})
+	        react.createElement(NotEnoughFundsDialog, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 230}})
 	      )
 	    }
 
 	    return (
-	      react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 229}}
+	      react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 235}}
 	        , dialogContext => (
-	          react.createElement(NavigateStackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 231}}
+	          react.createElement(NavigateStackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 237}}
 	            , navigate => (
-	              react.createElement('div', { className: 'Dialog PaymentDialog ' + (this.isActionable(dialogContext) ? '' : 'unactionable'), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 233}}
-	                , react.createElement('div', { className: "DialogHeader", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 234}}
-	                  , react.createElement(CloseDialogComponent, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 235}})
+	              react.createElement('div', { className: 'Dialog PaymentDialog ' + (this.isActionable(dialogContext) ? '' : 'unactionable'), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 239}}
+	                , react.createElement('div', { className: "DialogHeader", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 240}}
+	                  , react.createElement(CloseDialogComponent, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 241}})
 	                )
-	                , react.createElement('div', { className: "DialogBody HeightAuto" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 237}}
-	                  , react.createElement('div', { className: "Payment", key:  this.props.selected.token.address , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 238}}
-	                    , react.createElement('div', { className: "PaymentRow ChangePaymentRow" , onClick:  ()=> this.navigateIfActionable(navigate, 'ChangePaymentToken', dialogContext) , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 239}}
-	                      , react.createElement('div', { className: "PaymentColumn PaymentColumn1" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 240}}
+	                , react.createElement('div', { className: "DialogBody HeightAuto" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 243}}
+	                  , react.createElement('div', { className: "Payment", key:  this.props.selected.token.address , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 244}}
+	                    , react.createElement('div', { className: "PaymentRow ChangePaymentRow" , onClick:  ()=> this.navigateIfActionable(navigate, 'ChangePaymentToken', dialogContext) , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 245}}
+	                      , react.createElement('div', { className: "PaymentColumn PaymentColumn1" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 246}}
 	                        , react.createElement(TokenIconComponent, {
 	                          title:  this.props.selected.token.name ,
-	                          src:  this.props.selected.token.logoURI , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 241}}
+	                          src:  this.props.selected.token.logoURI , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 247}}
 	                        )
 	                      )
-	                      , react.createElement('div', { className: "PaymentColumn PaymentColumn2" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 246}}
-	                        , react.createElement('div', { className: "PaymentDescription", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 247}}, "Payment"
+	                      , react.createElement('div', { className: "PaymentColumn PaymentColumn2" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 252}}
+	                        , react.createElement('div', { className: "PaymentDescription", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 253}}, "Payment"
 
 	                        )
-	                        , react.createElement('div', { className: "PaymentAmountRow1 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 250}}
+	                        , react.createElement('div', { className: "PaymentAmountRow1 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 256}}
 	                          ,  this.props.paymentContext.token 
 	                        )
-	                        , react.createElement('div', { className: "PaymentAmountRow2 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 253}}
+	                        , react.createElement('div', { className: "PaymentAmountRow2 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 259}}
 	                          ,  this.props.paymentContext.local 
 	                        )
 	                      )
-	                      , react.createElement('div', { className: "PaymentColumn PaymentColumn3" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 257}}
-	                        , react.createElement('span', { className: "PaymentAction", title: "Change payment" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 258}}, "Change"
+	                      , react.createElement('div', { className: "PaymentColumn PaymentColumn3" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 263}}
+	                        , react.createElement('span', { className: "PaymentAction", title: "Change payment" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 264}}, "Change"
 
 	                        )
 	                      )
 	                    )
 	                  )
 	                )
-	                , react.createElement('div', { className: "DialogFooter", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 265}}
+	                , react.createElement('div', { className: "DialogFooter", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 271}}
 	                  ,  this.renderCallToAction.bind(this)() 
-	                  , react.createElement('div', { className: "PoweredBy", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 267}}
+	                  , react.createElement('div', { className: "PoweredBy", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 273}}
 	                    ,  this.renderTransaction.bind(this)() 
-	                    , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/token/'+this.props.receiverToken.address , title: 'Sending '+DisplayTokenAmount(this.props.receiverAmount, this.props.receiverToken.decimals, this.props.receiverToken.symbol)+' to the receiver', __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 269}}
+	                    , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/token/'+this.props.receiverToken.address , title: 'Sending '+DisplayTokenAmount(this.props.receiverAmount, this.props.receiverToken.decimals, this.props.receiverToken.symbol)+' to the receiver', __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 275}}
 	                      , react.createElement(TokenIconComponent, {
 	                        src:  this.props.receiverToken.logoURI ,
-	                        className:  'tiny' , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 270}}
+	                        className:  'tiny' , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 276}}
 	                      )
 	                    )
-	                    , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 275}}, " • ")
+	                    , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 281}}, " • ")
 	                    , this.paymentType() &&
-	                      react.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 277}}
-	                        , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  this.paymentTypeLink() , className: "PoweredByLink", title:  this.paymentTypeTitle() , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 278}}
+	                      react.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 283}}
+	                        , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  this.paymentTypeLink() , className: "PoweredByLink", title:  this.paymentTypeTitle() , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 284}}
 	                          ,  this.paymentTypeText() 
 	                        )
-	                        , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 281}}, " • ")
+	                        , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 287}}, " • ")
 	                      )
 	                    
-	                    , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href: 'https://depay.fi?utm_source='+window.location.hostname+'&utm_medium=widget&utm_campaign=DePayPayment', className: "PoweredByLink", title: "Powered by DePay: Decentralized Payments"    , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 284}}, "by DePay"
+	                    , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href: 'https://depay.fi?utm_source='+window.location.hostname+'&utm_medium=widget&utm_campaign=DePayPayment', className: "PoweredByLink", title: "Powered by DePay: Decentralized Payments"    , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 290}}, "by DePay"
 
 	                    )
 	                  )
@@ -49783,11 +49789,11 @@
 	    if((this.state.paying && this.state.paying.transactionHash) || (this.state.payed && this.state.payed.transactionHash)) {
 	      let transactionHash = (this.state.paying && this.state.paying.transactionHash) || (this.state.payed && this.state.payed.transactionHash);
 	      return(
-	        react.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 301}}
-	          , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+transactionHash , className: "PoweredByLink", title: "Your transaction" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 302}}, "tx"
+	        react.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 307}}
+	          , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+transactionHash , className: "PoweredByLink", title: "Your transaction" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 308}}, "tx"
 
 	          )
-	          , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 305}}, " • ")
+	          , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 311}}, " • ")
 	        )
 	      )
 	    } else {
@@ -49800,14 +49806,14 @@
 	      return(this.renderPaymentButton())
 	    } else {
 	      return(
-	        react.createElement('div', { className: "Table", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 318}}
-	          , react.createElement('div', { className: "TableRow", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 319}}
-	            , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 320}}
+	        react.createElement('div', { className: "Table", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 324}}
+	          , react.createElement('div', { className: "TableRow", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 325}}
+	            , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 326}}
 	              ,  this.renderApproveButton() 
 	            )
-	            , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 323}}
-	              , react.createElement('button', { className: "CallToAction MainAction disabled"  , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 324}}
-	                , react.createElement('span', { className: "CallToActionName", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 325}}, "Pay"), " " , react.createElement('span', { className: "CallToActionPrice TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 325}},  this.props.paymentContext.total )
+	            , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 329}}
+	              , react.createElement('button', { className: "CallToAction MainAction disabled"  , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 330}}
+	                , react.createElement('span', { className: "CallToActionName", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 331}}, "Pay"), " " , react.createElement('span', { className: "CallToActionPrice TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 331}},  this.props.paymentContext.total )
 	              )
 	            )
 	          )
@@ -49819,18 +49825,18 @@
 	  renderApproveButton() {
 	    if(this.state.approving) {
 	      return(
-	        react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.approving.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait for the approval transaction to be confirmed by the network. Click to open transaction on etherscan."                 , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 337}}, "Approving"
+	        react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.approving.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait for the approval transaction to be confirmed by the network. Click to open transaction on etherscan."                 , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 343}}, "Approving"
 
-	          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 339}}, ".")
-	          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 340}}, ".")
-	          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 341}}, ".")
+	          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 345}}, ".")
+	          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 346}}, ".")
+	          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 347}}, ".")
 	        )
 	      )
 	    } else {
 	      return(
-	        react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 346}}
+	        react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 352}}
 	          , dialogContext => (
-	            react.createElement('button', { key: "approve", className: "CallToAction MainAction" , onClick: ()=>this.approve.bind(this)(dialogContext), title: "Click to approve that the selected token is allowed to be swapped for performing this payment. This approval is only required the first time you pay with the selected token."                             , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 348}}, "Approve"
+	            react.createElement('button', { key: "approve", className: "CallToAction MainAction" , onClick: ()=>this.approve.bind(this)(dialogContext), title: "Click to approve that the selected token is allowed to be swapped for performing this payment. This approval is only required the first time you pay with the selected token."                             , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 354}}, "Approve"
 
 	            )
 	          )
@@ -49842,32 +49848,32 @@
 	  renderPaymentButton() {
 	    if(this.state.payed) {
 	      return(
-	        react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 360}}
+	        react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 366}}
 	          , dialogContext => (
-	            react.createElement('span', { className: "CallToAction MainAction circular"  , onClick:  dialogContext.closeContainer , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 362}}
-	              , react.createElement(CheckMarkComponent, { className: "large", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 363}})
+	            react.createElement('span', { className: "CallToAction MainAction circular"  , onClick:  dialogContext.closeContainer , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 368}}
+	              , react.createElement(CheckMarkComponent, { className: "large", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 369}})
 	            )
 	          )
 	        )
 	      )
 	    } else if(this.state.paying) {
 	      return(
-	        react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.paying.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait payment transaction to be confirmed by the network. Click to open transaction on etherscan."               , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 370}}, "Paying"
+	        react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.paying.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait payment transaction to be confirmed by the network. Click to open transaction on etherscan."               , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 376}}, "Paying"
 
-	          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 372}}, ".")
-	          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 373}}, ".")
-	          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 374}}, ".")
+	          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 378}}, ".")
+	          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 379}}, ".")
+	          , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 380}}, ".")
 	        )
 	      )
 	    } else {
 	      return(
-	        react.createElement(GasContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 379}}
+	        react.createElement(GasContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 385}}
 	          , gasContext => (
-	            react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 381}}
+	            react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 387}}
 	              , dialogContext => (
-	                react.createElement(CallbackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 383}}
+	                react.createElement(CallbackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 389}}
 	                  , callbackContext => (
-	                    react.createElement('button', { className: "CallToAction MainAction" , onClick: ()=>this.pay.bind(this)(dialogContext, callbackContext, gasContext), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 385}}, "Pay "
+	                    react.createElement('button', { className: "CallToAction MainAction" , onClick: ()=>this.pay.bind(this)(dialogContext, callbackContext, gasContext), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 391}}, "Pay "
 	                       ,  this.props.paymentContext.total 
 	                    )
 	                  )
diff --git a/dist/umd/index.js b/dist/umd/index.js
index 14a6981c..91f0a7e7 100644
--- a/dist/umd/index.js
+++ b/dist/umd/index.js
@@ -6403,7 +6403,10 @@
               token: route[route.length-1],
               from: from,
               nonce: transaction.nonce,
-              close: dialogContext.closeContainer
+              close: function(){
+                dialogContext.setClosable(true);
+                dialogContext.closeContainer();
+              }
             });
           }
           dialogContext.setClosable(false);
@@ -6424,7 +6427,10 @@
                     amount: amountOut,
                     token: route[route.length-1],
                     from: from,
-                    close: dialogContext.closeContainer
+                    close: function(){
+                      dialogContext.setClosable(true);
+                      dialogContext.closeContainer();
+                    }
                   }); 
                 }
               }, 100);
@@ -6450,73 +6456,73 @@
     render() {
       if(this.props.initializing) { 
         return(
-          React__default['default'].createElement(PaymentDialogSkeleton, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 218}})
+          React__default['default'].createElement(PaymentDialogSkeleton, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 224}})
         ) 
       }
 
       if(!this.props.selected) {
         return(
-          React__default['default'].createElement(NotEnoughFundsDialog, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 224}})
+          React__default['default'].createElement(NotEnoughFundsDialog, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 230}})
         )
       }
 
       return (
-        React__default['default'].createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 229}}
+        React__default['default'].createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 235}}
           , dialogContext => (
-            React__default['default'].createElement(NavigateStackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 231}}
+            React__default['default'].createElement(NavigateStackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 237}}
               , navigate => (
-                React__default['default'].createElement('div', { className: 'Dialog PaymentDialog ' + (this.isActionable(dialogContext) ? '' : 'unactionable'), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 233}}
-                  , React__default['default'].createElement('div', { className: "DialogHeader", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 234}}
-                    , React__default['default'].createElement(CloseDialogComponent, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 235}})
+                React__default['default'].createElement('div', { className: 'Dialog PaymentDialog ' + (this.isActionable(dialogContext) ? '' : 'unactionable'), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 239}}
+                  , React__default['default'].createElement('div', { className: "DialogHeader", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 240}}
+                    , React__default['default'].createElement(CloseDialogComponent, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 241}})
                   )
-                  , React__default['default'].createElement('div', { className: "DialogBody HeightAuto" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 237}}
-                    , React__default['default'].createElement('div', { className: "Payment", key:  this.props.selected.token.address , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 238}}
-                      , React__default['default'].createElement('div', { className: "PaymentRow ChangePaymentRow" , onClick:  ()=> this.navigateIfActionable(navigate, 'ChangePaymentToken', dialogContext) , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 239}}
-                        , React__default['default'].createElement('div', { className: "PaymentColumn PaymentColumn1" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 240}}
+                  , React__default['default'].createElement('div', { className: "DialogBody HeightAuto" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 243}}
+                    , React__default['default'].createElement('div', { className: "Payment", key:  this.props.selected.token.address , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 244}}
+                      , React__default['default'].createElement('div', { className: "PaymentRow ChangePaymentRow" , onClick:  ()=> this.navigateIfActionable(navigate, 'ChangePaymentToken', dialogContext) , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 245}}
+                        , React__default['default'].createElement('div', { className: "PaymentColumn PaymentColumn1" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 246}}
                           , React__default['default'].createElement(TokenIconComponent, {
                             title:  this.props.selected.token.name ,
-                            src:  this.props.selected.token.logoURI , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 241}}
+                            src:  this.props.selected.token.logoURI , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 247}}
                           )
                         )
-                        , React__default['default'].createElement('div', { className: "PaymentColumn PaymentColumn2" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 246}}
-                          , React__default['default'].createElement('div', { className: "PaymentDescription", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 247}}, "Payment"
+                        , React__default['default'].createElement('div', { className: "PaymentColumn PaymentColumn2" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 252}}
+                          , React__default['default'].createElement('div', { className: "PaymentDescription", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 253}}, "Payment"
 
                           )
-                          , React__default['default'].createElement('div', { className: "PaymentAmountRow1 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 250}}
+                          , React__default['default'].createElement('div', { className: "PaymentAmountRow1 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 256}}
                             ,  this.props.paymentContext.token 
                           )
-                          , React__default['default'].createElement('div', { className: "PaymentAmountRow2 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 253}}
+                          , React__default['default'].createElement('div', { className: "PaymentAmountRow2 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 259}}
                             ,  this.props.paymentContext.local 
                           )
                         )
-                        , React__default['default'].createElement('div', { className: "PaymentColumn PaymentColumn3" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 257}}
-                          , React__default['default'].createElement('span', { className: "PaymentAction", title: "Change payment" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 258}}, "Change"
+                        , React__default['default'].createElement('div', { className: "PaymentColumn PaymentColumn3" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 263}}
+                          , React__default['default'].createElement('span', { className: "PaymentAction", title: "Change payment" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 264}}, "Change"
 
                           )
                         )
                       )
                     )
                   )
-                  , React__default['default'].createElement('div', { className: "DialogFooter", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 265}}
+                  , React__default['default'].createElement('div', { className: "DialogFooter", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 271}}
                     ,  this.renderCallToAction.bind(this)() 
-                    , React__default['default'].createElement('div', { className: "PoweredBy", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 267}}
+                    , React__default['default'].createElement('div', { className: "PoweredBy", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 273}}
                       ,  this.renderTransaction.bind(this)() 
-                      , React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/token/'+this.props.receiverToken.address , title: 'Sending '+DisplayTokenAmount(this.props.receiverAmount, this.props.receiverToken.decimals, this.props.receiverToken.symbol)+' to the receiver', __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 269}}
+                      , React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/token/'+this.props.receiverToken.address , title: 'Sending '+DisplayTokenAmount(this.props.receiverAmount, this.props.receiverToken.decimals, this.props.receiverToken.symbol)+' to the receiver', __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 275}}
                         , React__default['default'].createElement(TokenIconComponent, {
                           src:  this.props.receiverToken.logoURI ,
-                          className:  'tiny' , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 270}}
+                          className:  'tiny' , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 276}}
                         )
                       )
-                      , React__default['default'].createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 275}}, " • ")
+                      , React__default['default'].createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 281}}, " • ")
                       , this.paymentType() &&
-                        React__default['default'].createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 277}}
-                          , React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  this.paymentTypeLink() , className: "PoweredByLink", title:  this.paymentTypeTitle() , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 278}}
+                        React__default['default'].createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 283}}
+                          , React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  this.paymentTypeLink() , className: "PoweredByLink", title:  this.paymentTypeTitle() , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 284}}
                             ,  this.paymentTypeText() 
                           )
-                          , React__default['default'].createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 281}}, " • ")
+                          , React__default['default'].createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 287}}, " • ")
                         )
                       
-                      , React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href: 'https://depay.fi?utm_source='+window.location.hostname+'&utm_medium=widget&utm_campaign=DePayPayment', className: "PoweredByLink", title: "Powered by DePay: Decentralized Payments"    , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 284}}, "by DePay"
+                      , React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href: 'https://depay.fi?utm_source='+window.location.hostname+'&utm_medium=widget&utm_campaign=DePayPayment', className: "PoweredByLink", title: "Powered by DePay: Decentralized Payments"    , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 290}}, "by DePay"
 
                       )
                     )
@@ -6533,11 +6539,11 @@
       if((this.state.paying && this.state.paying.transactionHash) || (this.state.payed && this.state.payed.transactionHash)) {
         let transactionHash = (this.state.paying && this.state.paying.transactionHash) || (this.state.payed && this.state.payed.transactionHash);
         return(
-          React__default['default'].createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 301}}
-            , React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+transactionHash , className: "PoweredByLink", title: "Your transaction" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 302}}, "tx"
+          React__default['default'].createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 307}}
+            , React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+transactionHash , className: "PoweredByLink", title: "Your transaction" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 308}}, "tx"
 
             )
-            , React__default['default'].createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 305}}, " • ")
+            , React__default['default'].createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 311}}, " • ")
           )
         )
       } else {
@@ -6550,14 +6556,14 @@
         return(this.renderPaymentButton())
       } else {
         return(
-          React__default['default'].createElement('div', { className: "Table", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 318}}
-            , React__default['default'].createElement('div', { className: "TableRow", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 319}}
-              , React__default['default'].createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 320}}
+          React__default['default'].createElement('div', { className: "Table", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 324}}
+            , React__default['default'].createElement('div', { className: "TableRow", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 325}}
+              , React__default['default'].createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 326}}
                 ,  this.renderApproveButton() 
               )
-              , React__default['default'].createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 323}}
-                , React__default['default'].createElement('button', { className: "CallToAction MainAction disabled"  , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 324}}
-                  , React__default['default'].createElement('span', { className: "CallToActionName", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 325}}, "Pay"), " " , React__default['default'].createElement('span', { className: "CallToActionPrice TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 325}},  this.props.paymentContext.total )
+              , React__default['default'].createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 329}}
+                , React__default['default'].createElement('button', { className: "CallToAction MainAction disabled"  , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 330}}
+                  , React__default['default'].createElement('span', { className: "CallToActionName", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 331}}, "Pay"), " " , React__default['default'].createElement('span', { className: "CallToActionPrice TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 331}},  this.props.paymentContext.total )
                 )
               )
             )
@@ -6569,18 +6575,18 @@
     renderApproveButton() {
       if(this.state.approving) {
         return(
-          React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.approving.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait for the approval transaction to be confirmed by the network. Click to open transaction on etherscan."                 , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 337}}, "Approving"
+          React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.approving.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait for the approval transaction to be confirmed by the network. Click to open transaction on etherscan."                 , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 343}}, "Approving"
 
-            , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 339}}, ".")
-            , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 340}}, ".")
-            , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 341}}, ".")
+            , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 345}}, ".")
+            , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 346}}, ".")
+            , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 347}}, ".")
           )
         )
       } else {
         return(
-          React__default['default'].createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 346}}
+          React__default['default'].createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 352}}
             , dialogContext => (
-              React__default['default'].createElement('button', { key: "approve", className: "CallToAction MainAction" , onClick: ()=>this.approve.bind(this)(dialogContext), title: "Click to approve that the selected token is allowed to be swapped for performing this payment. This approval is only required the first time you pay with the selected token."                             , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 348}}, "Approve"
+              React__default['default'].createElement('button', { key: "approve", className: "CallToAction MainAction" , onClick: ()=>this.approve.bind(this)(dialogContext), title: "Click to approve that the selected token is allowed to be swapped for performing this payment. This approval is only required the first time you pay with the selected token."                             , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 354}}, "Approve"
 
               )
             )
@@ -6592,32 +6598,32 @@
     renderPaymentButton() {
       if(this.state.payed) {
         return(
-          React__default['default'].createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 360}}
+          React__default['default'].createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 366}}
             , dialogContext => (
-              React__default['default'].createElement('span', { className: "CallToAction MainAction circular"  , onClick:  dialogContext.closeContainer , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 362}}
-                , React__default['default'].createElement(CheckMarkComponent, { className: "large", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 363}})
+              React__default['default'].createElement('span', { className: "CallToAction MainAction circular"  , onClick:  dialogContext.closeContainer , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 368}}
+                , React__default['default'].createElement(CheckMarkComponent, { className: "large", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 369}})
               )
             )
           )
         )
       } else if(this.state.paying) {
         return(
-          React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.paying.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait payment transaction to be confirmed by the network. Click to open transaction on etherscan."               , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 370}}, "Paying"
+          React__default['default'].createElement('a', { target: "_blank", rel: "noopener noreferrer" , href:  'https://etherscan.io/tx/'+this.state.paying.transactionHash , key: "approving", className: "CallToAction MainAction loading"  , title: "Please wait payment transaction to be confirmed by the network. Click to open transaction on etherscan."               , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 376}}, "Paying"
 
-            , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 372}}, ".")
-            , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 373}}, ".")
-            , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 374}}, ".")
+            , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 378}}, ".")
+            , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 379}}, ".")
+            , React__default['default'].createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 380}}, ".")
           )
         )
       } else {
         return(
-          React__default['default'].createElement(GasContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 379}}
+          React__default['default'].createElement(GasContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 385}}
             , gasContext => (
-              React__default['default'].createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 381}}
+              React__default['default'].createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 387}}
                 , dialogContext => (
-                  React__default['default'].createElement(CallbackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 383}}
+                  React__default['default'].createElement(CallbackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 389}}
                     , callbackContext => (
-                      React__default['default'].createElement('button', { className: "CallToAction MainAction" , onClick: ()=>this.pay.bind(this)(dialogContext, callbackContext, gasContext), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 385}}, "Pay "
+                      React__default['default'].createElement('button', { className: "CallToAction MainAction" , onClick: ()=>this.pay.bind(this)(dialogContext, callbackContext, gasContext), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 391}}, "Pay "
                          ,  this.props.paymentContext.total 
                       )
                     )
diff --git a/package.json b/package.json
index 73b763f9..9495075d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "depay-widgets",
   "moduleName": "DePayWidgets",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "Accept and perform crypto payments with DePay. Decentralized payment widgets that simplify crypto payments.",
   "main": "./dist/cjs/index.js",
   "files": [
diff --git a/src/dialogs/PaymentDialog.jsx b/src/dialogs/PaymentDialog.jsx
index 622627ed..7d133d9b 100644
--- a/src/dialogs/PaymentDialog.jsx
+++ b/src/dialogs/PaymentDialog.jsx
@@ -168,7 +168,10 @@ class PaymentDialog extends React.Component {
             token: route[route.length-1],
             from: from,
             nonce: transaction.nonce,
-            close: dialogContext.closeContainer
+            close: function(){
+              dialogContext.setClosable(true)
+              dialogContext.closeContainer()
+            }
           });
         }
         dialogContext.setClosable(false);
@@ -189,7 +192,10 @@ class PaymentDialog extends React.Component {
                   amount: amountOut,
                   token: route[route.length-1],
                   from: from,
-                  close: dialogContext.closeContainer
+                  close: function(){
+                    dialogContext.setClosable(true)
+                    dialogContext.closeContainer()
+                  }
                 }); 
               }
             }, 100)