From 331e53fd05fae36ed51332c2de218fb9821c86af Mon Sep 17 00:00:00 2001 From: Sebastian Pape Date: Fri, 14 May 2021 19:43:41 +0200 Subject: [PATCH] build --- dist/cjs/index.bundle.js | 136 ++++++++++++++++++++++----------------- dist/cjs/index.js | 2 - dist/es/index.bundle.js | 136 ++++++++++++++++++++++----------------- dist/es/index.js | 2 - dist/umd/index.bundle.js | 136 ++++++++++++++++++++++----------------- dist/umd/index.js | 2 - 6 files changed, 231 insertions(+), 183 deletions(-) diff --git a/dist/cjs/index.bundle.js b/dist/cjs/index.bundle.js index 1be7fbc4..fec5a024 100644 --- a/dist/cjs/index.bundle.js +++ b/dist/cjs/index.bundle.js @@ -49639,6 +49639,13 @@ class PaymentDialog extends react.Component {constructor(...args) { super(...arg this.setState({ paying: { transactionHash: transaction.hash } }); + if(typeof callbackContext.sent === 'function') { + callbackContext.sent({ + tx: transaction.hash, + amount: amountOut, + token: route[route.length-1] + }); + } dialogContext.setClosable(false); transaction.wait(1).then(function(transaction){ if(transaction.status === 1) { @@ -49651,7 +49658,14 @@ class PaymentDialog extends react.Component {constructor(...args) { super(...arg if(typeof callbackContext.callback === 'function') { callbackContext.callback({tx: transaction.transactionHash}); } - }, 1600); + if(typeof callbackContext.confirmed === 'function') { + callbackContext.confirmed({ + tx: transaction.transactionHash, + amount: amountOut, + token: route[route.length-1] + }); + } + }, 100); } }.bind(this)); } else { @@ -49674,73 +49688,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: 198}}) + react.createElement(PaymentDialogSkeleton, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 212}}) ) } if(!this.props.selected) { return( - react.createElement(NotEnoughFundsDialog, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 204}}) + react.createElement(NotEnoughFundsDialog, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 218}}) ) } return ( - react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 209}} + react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 223}} , dialogContext => ( - react.createElement(NavigateStackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 211}} + react.createElement(NavigateStackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 225}} , navigate => ( - react.createElement('div', { className: 'Dialog PaymentDialog ' + (this.isActionable(dialogContext) ? '' : 'unactionable'), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 213}} - , react.createElement('div', { className: "DialogHeader", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 214}} - , react.createElement(CloseDialogComponent, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 215}}) + react.createElement('div', { className: 'Dialog PaymentDialog ' + (this.isActionable(dialogContext) ? '' : 'unactionable'), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 227}} + , react.createElement('div', { className: "DialogHeader", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 228}} + , react.createElement(CloseDialogComponent, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 229}}) ) - , react.createElement('div', { className: "DialogBody HeightAuto" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 217}} - , react.createElement('div', { className: "Payment", key: this.props.selected.token.address , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 218}} - , react.createElement('div', { className: "PaymentRow ChangePaymentRow" , onClick: ()=> this.navigateIfActionable(navigate, 'ChangePaymentToken', dialogContext) , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 219}} - , react.createElement('div', { className: "PaymentColumn PaymentColumn1" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 220}} + , react.createElement('div', { className: "DialogBody HeightAuto" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 231}} + , react.createElement('div', { className: "Payment", key: this.props.selected.token.address , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 232}} + , react.createElement('div', { className: "PaymentRow ChangePaymentRow" , onClick: ()=> this.navigateIfActionable(navigate, 'ChangePaymentToken', dialogContext) , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 233}} + , react.createElement('div', { className: "PaymentColumn PaymentColumn1" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 234}} , react.createElement(TokenIconComponent, { title: this.props.selected.token.name , - src: this.props.selected.token.logoURI , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 221}} + src: this.props.selected.token.logoURI , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 235}} ) ) - , react.createElement('div', { className: "PaymentColumn PaymentColumn2" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 226}} - , react.createElement('div', { className: "PaymentDescription", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 227}}, "Payment" + , react.createElement('div', { className: "PaymentColumn PaymentColumn2" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 240}} + , react.createElement('div', { className: "PaymentDescription", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 241}}, "Payment" ) - , react.createElement('div', { className: "PaymentAmountRow1 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 230}} + , react.createElement('div', { className: "PaymentAmountRow1 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 244}} , this.props.paymentContext.token ) - , react.createElement('div', { className: "PaymentAmountRow2 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 233}} + , react.createElement('div', { className: "PaymentAmountRow2 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 247}} , this.props.paymentContext.local ) ) - , react.createElement('div', { className: "PaymentColumn PaymentColumn3" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 237}} - , react.createElement('span', { className: "PaymentAction", title: "Change payment" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 238}}, "Change" + , react.createElement('div', { className: "PaymentColumn PaymentColumn3" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 251}} + , react.createElement('span', { className: "PaymentAction", title: "Change payment" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 252}}, "Change" ) ) ) ) ) - , react.createElement('div', { className: "DialogFooter", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 245}} + , react.createElement('div', { className: "DialogFooter", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 259}} , this.renderCallToAction.bind(this)() - , react.createElement('div', { className: "PoweredBy", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 247}} + , react.createElement('div', { className: "PoweredBy", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 261}} , 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: 249}} + , 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: 263}} , react.createElement(TokenIconComponent, { src: this.props.receiverToken.logoURI , - className: 'tiny' , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 250}} + className: 'tiny' , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 264}} ) ) - , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 255}}, " • ") + , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 269}}, " • ") , this.paymentType() && - react.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 257}} - , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href: this.paymentTypeLink() , className: "PoweredByLink", title: this.paymentTypeTitle() , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 258}} + react.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 271}} + , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href: this.paymentTypeLink() , className: "PoweredByLink", title: this.paymentTypeTitle() , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 272}} , this.paymentTypeText() ) - , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 261}}, " • ") + , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 275}}, " • ") ) - , 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: 264}}, "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: 278}}, "by DePay" ) ) @@ -49757,11 +49771,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: 281}} - , 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: 282}}, "tx" + react.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 295}} + , 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: 296}}, "tx" ) - , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 285}}, " • ") + , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 299}}, " • ") ) ) } else { @@ -49774,14 +49788,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: 298}} - , react.createElement('div', { className: "TableRow", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 299}} - , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 300}} + react.createElement('div', { className: "Table", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 312}} + , react.createElement('div', { className: "TableRow", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 313}} + , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 314}} , this.renderApproveButton() ) - , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 303}} - , react.createElement('button', { className: "CallToAction MainAction disabled" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 304}} - , react.createElement('span', { className: "CallToActionName", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 305}}, "Pay"), " " , react.createElement('span', { className: "CallToActionPrice TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 305}}, this.props.paymentContext.total ) + , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 317}} + , react.createElement('button', { className: "CallToAction MainAction disabled" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 318}} + , react.createElement('span', { className: "CallToActionName", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 319}}, "Pay"), " " , react.createElement('span', { className: "CallToActionPrice TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 319}}, this.props.paymentContext.total ) ) ) ) @@ -49793,18 +49807,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: 317}}, "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: 331}}, "Approving" - , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 319}}, ".") - , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 320}}, ".") - , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 321}}, ".") + , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 333}}, ".") + , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 334}}, ".") + , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 335}}, ".") ) ) } else { return( - react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 326}} + react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 340}} , 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: 328}}, "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: 342}}, "Approve" ) ) @@ -49816,32 +49830,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: 340}} + react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 354}} , dialogContext => ( - react.createElement('span', { className: "CallToAction MainAction circular" , onClick: dialogContext.closeContainer , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 342}} - , react.createElement(CheckMarkComponent, { className: "large", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 343}}) + react.createElement('span', { className: "CallToAction MainAction circular" , onClick: dialogContext.closeContainer , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 356}} + , react.createElement(CheckMarkComponent, { className: "large", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 357}}) ) ) ) ) } 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: 350}}, "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: 364}}, "Paying" - , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 352}}, ".") - , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 353}}, ".") - , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 354}}, ".") + , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 366}}, ".") + , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 367}}, ".") + , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 368}}, ".") ) ) } else { return( - react.createElement(GasContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 359}} + react.createElement(GasContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 373}} , gasContext => ( - react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 361}} + react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 375}} , dialogContext => ( - react.createElement(CallbackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 363}} + react.createElement(CallbackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 377}} , callbackContext => ( - react.createElement('button', { className: "CallToAction MainAction" , onClick: ()=>this.pay.bind(this)(dialogContext, callbackContext, gasContext), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 365}}, "Pay " + react.createElement('button', { className: "CallToAction MainAction" , onClick: ()=>this.pay.bind(this)(dialogContext, callbackContext, gasContext), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 379}}, "Pay " , this.props.paymentContext.total ) ) @@ -50003,6 +50017,8 @@ function checkAndPrepOptions$1(input) { // callback if(options.callback !== undefined && typeof options.callback !== 'function') { throw 'callback needs to be a function' } + if(options.sent !== undefined && typeof options.sent !== 'function') { throw 'sent callback needs to be a function' } + if(options.confirmed !== undefined && typeof options.confirmed !== 'function') { throw 'confirmed callback needs to be a function' } return options; } @@ -50020,17 +50036,19 @@ function Payment() { return new Promise(() => { reactDom.render( react.createElement(CallbackContext.Provider, { value: { - callback: options.callback - }, __self: this, __source: {fileName: _jsxFileName$r, lineNumber: 71}} + callback: options.callback, + sent: options.sent, + confirmed: options.confirmed + }, __self: this, __source: {fileName: _jsxFileName$r, lineNumber: 73}} , react.createElement(DialogProvider, { closeContainer: unmountAndClose , - setClosable: setClosable , __self: this, __source: {fileName: _jsxFileName$r, lineNumber: 74}} + setClosable: setClosable , __self: this, __source: {fileName: _jsxFileName$r, lineNumber: 78}} - , react.createElement(WalletProvider, {__self: this, __source: {fileName: _jsxFileName$r, lineNumber: 78}} + , react.createElement(WalletProvider, {__self: this, __source: {fileName: _jsxFileName$r, lineNumber: 82}} , react.createElement(PaymentStack, { amount: options.amount, token: options.token, - receiver: options.receiver, __self: this, __source: {fileName: _jsxFileName$r, lineNumber: 79}} + receiver: options.receiver, __self: this, __source: {fileName: _jsxFileName$r, lineNumber: 83}} ) ) ) diff --git a/dist/cjs/index.js b/dist/cjs/index.js index 413b5306..40d12892 100644 --- a/dist/cjs/index.js +++ b/dist/cjs/index.js @@ -1,5 +1,3 @@ - -(function(l, r) { if (l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (window.location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.getElementsByTagName('head')[0].appendChild(r) })(window.document); 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); diff --git a/dist/es/index.bundle.js b/dist/es/index.bundle.js index eb47cd9d..65046665 100644 --- a/dist/es/index.bundle.js +++ b/dist/es/index.bundle.js @@ -49635,6 +49635,13 @@ class PaymentDialog extends react.Component {constructor(...args) { super(...arg this.setState({ paying: { transactionHash: transaction.hash } }); + if(typeof callbackContext.sent === 'function') { + callbackContext.sent({ + tx: transaction.hash, + amount: amountOut, + token: route[route.length-1] + }); + } dialogContext.setClosable(false); transaction.wait(1).then(function(transaction){ if(transaction.status === 1) { @@ -49647,7 +49654,14 @@ class PaymentDialog extends react.Component {constructor(...args) { super(...arg if(typeof callbackContext.callback === 'function') { callbackContext.callback({tx: transaction.transactionHash}); } - }, 1600); + if(typeof callbackContext.confirmed === 'function') { + callbackContext.confirmed({ + tx: transaction.transactionHash, + amount: amountOut, + token: route[route.length-1] + }); + } + }, 100); } }.bind(this)); } else { @@ -49670,73 +49684,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: 198}}) + react.createElement(PaymentDialogSkeleton, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 212}}) ) } if(!this.props.selected) { return( - react.createElement(NotEnoughFundsDialog, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 204}}) + react.createElement(NotEnoughFundsDialog, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 218}}) ) } return ( - react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 209}} + react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 223}} , dialogContext => ( - react.createElement(NavigateStackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 211}} + react.createElement(NavigateStackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 225}} , navigate => ( - react.createElement('div', { className: 'Dialog PaymentDialog ' + (this.isActionable(dialogContext) ? '' : 'unactionable'), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 213}} - , react.createElement('div', { className: "DialogHeader", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 214}} - , react.createElement(CloseDialogComponent, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 215}}) + react.createElement('div', { className: 'Dialog PaymentDialog ' + (this.isActionable(dialogContext) ? '' : 'unactionable'), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 227}} + , react.createElement('div', { className: "DialogHeader", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 228}} + , react.createElement(CloseDialogComponent, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 229}}) ) - , react.createElement('div', { className: "DialogBody HeightAuto" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 217}} - , react.createElement('div', { className: "Payment", key: this.props.selected.token.address , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 218}} - , react.createElement('div', { className: "PaymentRow ChangePaymentRow" , onClick: ()=> this.navigateIfActionable(navigate, 'ChangePaymentToken', dialogContext) , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 219}} - , react.createElement('div', { className: "PaymentColumn PaymentColumn1" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 220}} + , react.createElement('div', { className: "DialogBody HeightAuto" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 231}} + , react.createElement('div', { className: "Payment", key: this.props.selected.token.address , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 232}} + , react.createElement('div', { className: "PaymentRow ChangePaymentRow" , onClick: ()=> this.navigateIfActionable(navigate, 'ChangePaymentToken', dialogContext) , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 233}} + , react.createElement('div', { className: "PaymentColumn PaymentColumn1" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 234}} , react.createElement(TokenIconComponent, { title: this.props.selected.token.name , - src: this.props.selected.token.logoURI , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 221}} + src: this.props.selected.token.logoURI , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 235}} ) ) - , react.createElement('div', { className: "PaymentColumn PaymentColumn2" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 226}} - , react.createElement('div', { className: "PaymentDescription", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 227}}, "Payment" + , react.createElement('div', { className: "PaymentColumn PaymentColumn2" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 240}} + , react.createElement('div', { className: "PaymentDescription", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 241}}, "Payment" ) - , react.createElement('div', { className: "PaymentAmountRow1 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 230}} + , react.createElement('div', { className: "PaymentAmountRow1 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 244}} , this.props.paymentContext.token ) - , react.createElement('div', { className: "PaymentAmountRow2 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 233}} + , react.createElement('div', { className: "PaymentAmountRow2 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 247}} , this.props.paymentContext.local ) ) - , react.createElement('div', { className: "PaymentColumn PaymentColumn3" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 237}} - , react.createElement('span', { className: "PaymentAction", title: "Change payment" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 238}}, "Change" + , react.createElement('div', { className: "PaymentColumn PaymentColumn3" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 251}} + , react.createElement('span', { className: "PaymentAction", title: "Change payment" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 252}}, "Change" ) ) ) ) ) - , react.createElement('div', { className: "DialogFooter", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 245}} + , react.createElement('div', { className: "DialogFooter", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 259}} , this.renderCallToAction.bind(this)() - , react.createElement('div', { className: "PoweredBy", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 247}} + , react.createElement('div', { className: "PoweredBy", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 261}} , 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: 249}} + , 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: 263}} , react.createElement(TokenIconComponent, { src: this.props.receiverToken.logoURI , - className: 'tiny' , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 250}} + className: 'tiny' , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 264}} ) ) - , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 255}}, " • ") + , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 269}}, " • ") , this.paymentType() && - react.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 257}} - , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href: this.paymentTypeLink() , className: "PoweredByLink", title: this.paymentTypeTitle() , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 258}} + react.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 271}} + , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href: this.paymentTypeLink() , className: "PoweredByLink", title: this.paymentTypeTitle() , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 272}} , this.paymentTypeText() ) - , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 261}}, " • ") + , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 275}}, " • ") ) - , 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: 264}}, "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: 278}}, "by DePay" ) ) @@ -49753,11 +49767,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: 281}} - , 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: 282}}, "tx" + react.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 295}} + , 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: 296}}, "tx" ) - , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 285}}, " • ") + , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 299}}, " • ") ) ) } else { @@ -49770,14 +49784,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: 298}} - , react.createElement('div', { className: "TableRow", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 299}} - , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 300}} + react.createElement('div', { className: "Table", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 312}} + , react.createElement('div', { className: "TableRow", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 313}} + , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 314}} , this.renderApproveButton() ) - , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 303}} - , react.createElement('button', { className: "CallToAction MainAction disabled" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 304}} - , react.createElement('span', { className: "CallToActionName", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 305}}, "Pay"), " " , react.createElement('span', { className: "CallToActionPrice TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 305}}, this.props.paymentContext.total ) + , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 317}} + , react.createElement('button', { className: "CallToAction MainAction disabled" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 318}} + , react.createElement('span', { className: "CallToActionName", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 319}}, "Pay"), " " , react.createElement('span', { className: "CallToActionPrice TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 319}}, this.props.paymentContext.total ) ) ) ) @@ -49789,18 +49803,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: 317}}, "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: 331}}, "Approving" - , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 319}}, ".") - , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 320}}, ".") - , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 321}}, ".") + , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 333}}, ".") + , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 334}}, ".") + , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 335}}, ".") ) ) } else { return( - react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 326}} + react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 340}} , 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: 328}}, "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: 342}}, "Approve" ) ) @@ -49812,32 +49826,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: 340}} + react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 354}} , dialogContext => ( - react.createElement('span', { className: "CallToAction MainAction circular" , onClick: dialogContext.closeContainer , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 342}} - , react.createElement(CheckMarkComponent, { className: "large", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 343}}) + react.createElement('span', { className: "CallToAction MainAction circular" , onClick: dialogContext.closeContainer , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 356}} + , react.createElement(CheckMarkComponent, { className: "large", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 357}}) ) ) ) ) } 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: 350}}, "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: 364}}, "Paying" - , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 352}}, ".") - , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 353}}, ".") - , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 354}}, ".") + , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 366}}, ".") + , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 367}}, ".") + , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 368}}, ".") ) ) } else { return( - react.createElement(GasContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 359}} + react.createElement(GasContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 373}} , gasContext => ( - react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 361}} + react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 375}} , dialogContext => ( - react.createElement(CallbackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 363}} + react.createElement(CallbackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 377}} , callbackContext => ( - react.createElement('button', { className: "CallToAction MainAction" , onClick: ()=>this.pay.bind(this)(dialogContext, callbackContext, gasContext), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 365}}, "Pay " + react.createElement('button', { className: "CallToAction MainAction" , onClick: ()=>this.pay.bind(this)(dialogContext, callbackContext, gasContext), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 379}}, "Pay " , this.props.paymentContext.total ) ) @@ -49999,6 +50013,8 @@ function checkAndPrepOptions$1(input) { // callback if(options.callback !== undefined && typeof options.callback !== 'function') { throw 'callback needs to be a function' } + if(options.sent !== undefined && typeof options.sent !== 'function') { throw 'sent callback needs to be a function' } + if(options.confirmed !== undefined && typeof options.confirmed !== 'function') { throw 'confirmed callback needs to be a function' } return options; } @@ -50016,17 +50032,19 @@ function Payment() { return new Promise(() => { reactDom.render( react.createElement(CallbackContext.Provider, { value: { - callback: options.callback - }, __self: this, __source: {fileName: _jsxFileName$r, lineNumber: 71}} + callback: options.callback, + sent: options.sent, + confirmed: options.confirmed + }, __self: this, __source: {fileName: _jsxFileName$r, lineNumber: 73}} , react.createElement(DialogProvider, { closeContainer: unmountAndClose , - setClosable: setClosable , __self: this, __source: {fileName: _jsxFileName$r, lineNumber: 74}} + setClosable: setClosable , __self: this, __source: {fileName: _jsxFileName$r, lineNumber: 78}} - , react.createElement(WalletProvider, {__self: this, __source: {fileName: _jsxFileName$r, lineNumber: 78}} + , react.createElement(WalletProvider, {__self: this, __source: {fileName: _jsxFileName$r, lineNumber: 82}} , react.createElement(PaymentStack, { amount: options.amount, token: options.token, - receiver: options.receiver, __self: this, __source: {fileName: _jsxFileName$r, lineNumber: 79}} + receiver: options.receiver, __self: this, __source: {fileName: _jsxFileName$r, lineNumber: 83}} ) ) ) diff --git a/dist/es/index.js b/dist/es/index.js index 172e8294..bc111d85 100644 --- a/dist/es/index.js +++ b/dist/es/index.js @@ -1,5 +1,3 @@ - -(function(l, r) { if (l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (window.location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.getElementsByTagName('head')[0].appendChild(r) })(window.document); import _$1 from 'lodash'; import React from 'react'; import { ethers } from 'ethers'; diff --git a/dist/umd/index.bundle.js b/dist/umd/index.bundle.js index 9bb93f1b..9fe338c6 100644 --- a/dist/umd/index.bundle.js +++ b/dist/umd/index.bundle.js @@ -49641,6 +49641,13 @@ this.setState({ paying: { transactionHash: transaction.hash } }); + if(typeof callbackContext.sent === 'function') { + callbackContext.sent({ + tx: transaction.hash, + amount: amountOut, + token: route[route.length-1] + }); + } dialogContext.setClosable(false); transaction.wait(1).then(function(transaction){ if(transaction.status === 1) { @@ -49653,7 +49660,14 @@ if(typeof callbackContext.callback === 'function') { callbackContext.callback({tx: transaction.transactionHash}); } - }, 1600); + if(typeof callbackContext.confirmed === 'function') { + callbackContext.confirmed({ + tx: transaction.transactionHash, + amount: amountOut, + token: route[route.length-1] + }); + } + }, 100); } }.bind(this)); } else { @@ -49676,73 +49690,73 @@ render() { if(this.props.initializing) { return( - react.createElement(PaymentDialogSkeleton, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 198}}) + react.createElement(PaymentDialogSkeleton, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 212}}) ) } if(!this.props.selected) { return( - react.createElement(NotEnoughFundsDialog, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 204}}) + react.createElement(NotEnoughFundsDialog, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 218}}) ) } return ( - react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 209}} + react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 223}} , dialogContext => ( - react.createElement(NavigateStackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 211}} + react.createElement(NavigateStackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 225}} , navigate => ( - react.createElement('div', { className: 'Dialog PaymentDialog ' + (this.isActionable(dialogContext) ? '' : 'unactionable'), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 213}} - , react.createElement('div', { className: "DialogHeader", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 214}} - , react.createElement(CloseDialogComponent, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 215}}) + react.createElement('div', { className: 'Dialog PaymentDialog ' + (this.isActionable(dialogContext) ? '' : 'unactionable'), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 227}} + , react.createElement('div', { className: "DialogHeader", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 228}} + , react.createElement(CloseDialogComponent, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 229}}) ) - , react.createElement('div', { className: "DialogBody HeightAuto" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 217}} - , react.createElement('div', { className: "Payment", key: this.props.selected.token.address , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 218}} - , react.createElement('div', { className: "PaymentRow ChangePaymentRow" , onClick: ()=> this.navigateIfActionable(navigate, 'ChangePaymentToken', dialogContext) , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 219}} - , react.createElement('div', { className: "PaymentColumn PaymentColumn1" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 220}} + , react.createElement('div', { className: "DialogBody HeightAuto" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 231}} + , react.createElement('div', { className: "Payment", key: this.props.selected.token.address , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 232}} + , react.createElement('div', { className: "PaymentRow ChangePaymentRow" , onClick: ()=> this.navigateIfActionable(navigate, 'ChangePaymentToken', dialogContext) , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 233}} + , react.createElement('div', { className: "PaymentColumn PaymentColumn1" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 234}} , react.createElement(TokenIconComponent, { title: this.props.selected.token.name , - src: this.props.selected.token.logoURI , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 221}} + src: this.props.selected.token.logoURI , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 235}} ) ) - , react.createElement('div', { className: "PaymentColumn PaymentColumn2" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 226}} - , react.createElement('div', { className: "PaymentDescription", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 227}}, "Payment" + , react.createElement('div', { className: "PaymentColumn PaymentColumn2" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 240}} + , react.createElement('div', { className: "PaymentDescription", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 241}}, "Payment" ) - , react.createElement('div', { className: "PaymentAmountRow1 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 230}} + , react.createElement('div', { className: "PaymentAmountRow1 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 244}} , this.props.paymentContext.token ) - , react.createElement('div', { className: "PaymentAmountRow2 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 233}} + , react.createElement('div', { className: "PaymentAmountRow2 TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 247}} , this.props.paymentContext.local ) ) - , react.createElement('div', { className: "PaymentColumn PaymentColumn3" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 237}} - , react.createElement('span', { className: "PaymentAction", title: "Change payment" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 238}}, "Change" + , react.createElement('div', { className: "PaymentColumn PaymentColumn3" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 251}} + , react.createElement('span', { className: "PaymentAction", title: "Change payment" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 252}}, "Change" ) ) ) ) ) - , react.createElement('div', { className: "DialogFooter", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 245}} + , react.createElement('div', { className: "DialogFooter", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 259}} , this.renderCallToAction.bind(this)() - , react.createElement('div', { className: "PoweredBy", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 247}} + , react.createElement('div', { className: "PoweredBy", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 261}} , 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: 249}} + , 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: 263}} , react.createElement(TokenIconComponent, { src: this.props.receiverToken.logoURI , - className: 'tiny' , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 250}} + className: 'tiny' , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 264}} ) ) - , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 255}}, " • ") + , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 269}}, " • ") , this.paymentType() && - react.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 257}} - , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href: this.paymentTypeLink() , className: "PoweredByLink", title: this.paymentTypeTitle() , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 258}} + react.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 271}} + , react.createElement('a', { target: "_blank", rel: "noopener noreferrer" , href: this.paymentTypeLink() , className: "PoweredByLink", title: this.paymentTypeTitle() , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 272}} , this.paymentTypeText() ) - , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 261}}, " • ") + , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 275}}, " • ") ) - , 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: 264}}, "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: 278}}, "by DePay" ) ) @@ -49759,11 +49773,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: 281}} - , 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: 282}}, "tx" + react.createElement('span', {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 295}} + , 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: 296}}, "tx" ) - , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 285}}, " • ") + , react.createElement('span', { className: "PoweredByLink", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 299}}, " • ") ) ) } else { @@ -49776,14 +49790,14 @@ return(this.renderPaymentButton()) } else { return( - react.createElement('div', { className: "Table", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 298}} - , react.createElement('div', { className: "TableRow", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 299}} - , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 300}} + react.createElement('div', { className: "Table", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 312}} + , react.createElement('div', { className: "TableRow", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 313}} + , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 314}} , this.renderApproveButton() ) - , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 303}} - , react.createElement('button', { className: "CallToAction MainAction disabled" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 304}} - , react.createElement('span', { className: "CallToActionName", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 305}}, "Pay"), " " , react.createElement('span', { className: "CallToActionPrice TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 305}}, this.props.paymentContext.total ) + , react.createElement('div', { className: "TableCell", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 317}} + , react.createElement('button', { className: "CallToAction MainAction disabled" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 318}} + , react.createElement('span', { className: "CallToActionName", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 319}}, "Pay"), " " , react.createElement('span', { className: "CallToActionPrice TextEllipsis" , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 319}}, this.props.paymentContext.total ) ) ) ) @@ -49795,18 +49809,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: 317}}, "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: 331}}, "Approving" - , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 319}}, ".") - , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 320}}, ".") - , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 321}}, ".") + , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 333}}, ".") + , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 334}}, ".") + , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 335}}, ".") ) ) } else { return( - react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 326}} + react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 340}} , 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: 328}}, "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: 342}}, "Approve" ) ) @@ -49818,32 +49832,32 @@ renderPaymentButton() { if(this.state.payed) { return( - react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 340}} + react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 354}} , dialogContext => ( - react.createElement('span', { className: "CallToAction MainAction circular" , onClick: dialogContext.closeContainer , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 342}} - , react.createElement(CheckMarkComponent, { className: "large", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 343}}) + react.createElement('span', { className: "CallToAction MainAction circular" , onClick: dialogContext.closeContainer , __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 356}} + , react.createElement(CheckMarkComponent, { className: "large", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 357}}) ) ) ) ) } 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: 350}}, "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: 364}}, "Paying" - , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 352}}, ".") - , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 353}}, ".") - , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 354}}, ".") + , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 366}}, ".") + , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 367}}, ".") + , react.createElement('span', { className: "dot", __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 368}}, ".") ) ) } else { return( - react.createElement(GasContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 359}} + react.createElement(GasContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 373}} , gasContext => ( - react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 361}} + react.createElement(DialogContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 375}} , dialogContext => ( - react.createElement(CallbackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 363}} + react.createElement(CallbackContext.Consumer, {__self: this, __source: {fileName: _jsxFileName$p, lineNumber: 377}} , callbackContext => ( - react.createElement('button', { className: "CallToAction MainAction" , onClick: ()=>this.pay.bind(this)(dialogContext, callbackContext, gasContext), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 365}}, "Pay " + react.createElement('button', { className: "CallToAction MainAction" , onClick: ()=>this.pay.bind(this)(dialogContext, callbackContext, gasContext), __self: this, __source: {fileName: _jsxFileName$p, lineNumber: 379}}, "Pay " , this.props.paymentContext.total ) ) @@ -50005,6 +50019,8 @@ // callback if(options.callback !== undefined && typeof options.callback !== 'function') { throw 'callback needs to be a function' } + if(options.sent !== undefined && typeof options.sent !== 'function') { throw 'sent callback needs to be a function' } + if(options.confirmed !== undefined && typeof options.confirmed !== 'function') { throw 'confirmed callback needs to be a function' } return options; } @@ -50022,17 +50038,19 @@ return new Promise(() => { reactDom.render( react.createElement(CallbackContext.Provider, { value: { - callback: options.callback - }, __self: this, __source: {fileName: _jsxFileName$r, lineNumber: 71}} + callback: options.callback, + sent: options.sent, + confirmed: options.confirmed + }, __self: this, __source: {fileName: _jsxFileName$r, lineNumber: 73}} , react.createElement(DialogProvider, { closeContainer: unmountAndClose , - setClosable: setClosable , __self: this, __source: {fileName: _jsxFileName$r, lineNumber: 74}} + setClosable: setClosable , __self: this, __source: {fileName: _jsxFileName$r, lineNumber: 78}} - , react.createElement(WalletProvider, {__self: this, __source: {fileName: _jsxFileName$r, lineNumber: 78}} + , react.createElement(WalletProvider, {__self: this, __source: {fileName: _jsxFileName$r, lineNumber: 82}} , react.createElement(PaymentStack, { amount: options.amount, token: options.token, - receiver: options.receiver, __self: this, __source: {fileName: _jsxFileName$r, lineNumber: 79}} + receiver: options.receiver, __self: this, __source: {fileName: _jsxFileName$r, lineNumber: 83}} ) ) ) diff --git a/dist/umd/index.js b/dist/umd/index.js index 7d3002c3..21fdb064 100644 --- a/dist/umd/index.js +++ b/dist/umd/index.js @@ -1,5 +1,3 @@ - -(function(l, r) { if (l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (window.location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.getElementsByTagName('head')[0].appendChild(r) })(window.document); (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash'), require('react'), require('ethers'), require('react-rangeslider'), require('react-dom'), require('react-shadow-dom-retarget-events'), require('fuse.js')) : typeof define === 'function' && define.amd ? define(['exports', 'lodash', 'react', 'ethers', 'react-rangeslider', 'react-dom', 'react-shadow-dom-retarget-events', 'fuse.js'], factory) :