@depay/widgets 6.27.0 → 6.28.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -0
- package/dist/esm/index.bundle.js +9 -6
- package/dist/esm/index.js +9 -6
- package/dist/umd/index.bundle.js +9 -6
- package/dist/umd/index.js +9 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1222,6 +1222,26 @@ DePayWidgets.Donation({
|
|
|
1222
1222
|
});
|
|
1223
1223
|
```
|
|
1224
1224
|
|
|
1225
|
+
#### fee (DePay Donations)
|
|
1226
|
+
|
|
1227
|
+
You can configure a fee which will be applied to every payment with it's own dedicated fee receiver address.
|
|
1228
|
+
|
|
1229
|
+
The fee will be taken from the target token and target amount (after swap, depending on your `accept` configuration).
|
|
1230
|
+
|
|
1231
|
+
`amount`: Either percentage (e.g. `5%`, or absolute amount as BigNumber string ('100000000000000000') or pure number (2.5)
|
|
1232
|
+
|
|
1233
|
+
`receiver`: The address that is supposed to receive the fee.
|
|
1234
|
+
|
|
1235
|
+
```javascript
|
|
1236
|
+
DePayWidgets.Donation({
|
|
1237
|
+
accept: [...],
|
|
1238
|
+
fee: {
|
|
1239
|
+
amount: '3%',
|
|
1240
|
+
receiver: '0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02'
|
|
1241
|
+
}
|
|
1242
|
+
});
|
|
1243
|
+
```
|
|
1244
|
+
|
|
1225
1245
|
#### closed (DePay Donations)
|
|
1226
1246
|
|
|
1227
1247
|
`closed`
|
package/dist/esm/index.bundle.js
CHANGED
|
@@ -49833,7 +49833,7 @@ var CardStyle = (function (style) {
|
|
|
49833
49833
|
});
|
|
49834
49834
|
|
|
49835
49835
|
var DialogStyle = (function (style) {
|
|
49836
|
-
return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 0.8rem;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 0.8rem;\n border-top-radius: 0.8rem;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n background: rgb(248,248,248);\n border-top-left-radius: 0.8rem;\n border-top-right-radius: 0.8rem;\n min-height: 3.4rem;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 3rem;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 3rem;\n }\n\n .DialogFooter {\n background: rgb(248,248,248);\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n line-height: 1.5rem;\n min-height: 2rem;\n position: relative;\n text-align: center;\n }\n\n ";
|
|
49836
|
+
return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n top: 0;\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 0.8rem;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 0.8rem;\n border-top-radius: 0.8rem;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n background: rgb(248,248,248);\n border-top-left-radius: 0.8rem;\n border-top-right-radius: 0.8rem;\n min-height: 3.4rem;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 3rem;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 3rem;\n }\n\n .DialogFooter {\n background: rgb(248,248,248);\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n line-height: 1.5rem;\n min-height: 2rem;\n position: relative;\n text-align: center;\n }\n\n ";
|
|
49837
49837
|
});
|
|
49838
49838
|
|
|
49839
49839
|
var FontStyle = (function (style) {
|
|
@@ -50063,7 +50063,7 @@ var mount = (function (_ref, content) {
|
|
|
50063
50063
|
content: content(unmountShadowDOM),
|
|
50064
50064
|
outsideStyle: outsideStyle,
|
|
50065
50065
|
insideStyle: insideStyle,
|
|
50066
|
-
insideClasses: ['contained']
|
|
50066
|
+
insideClasses: container ? ['contained'] : []
|
|
50067
50067
|
}),
|
|
50068
50068
|
unmount = _ReactShadowDOM.unmount;
|
|
50069
50069
|
|
|
@@ -86092,14 +86092,16 @@ var DonationRoutingProvider = (function (props) {
|
|
|
86092
86092
|
setMaxRoute = _useContext.setMaxRoute;
|
|
86093
86093
|
|
|
86094
86094
|
var _useContext2 = react.useContext(ConfigurationContext),
|
|
86095
|
-
blacklist = _useContext2.blacklist
|
|
86095
|
+
blacklist = _useContext2.blacklist,
|
|
86096
|
+
fee = _useContext2.fee;
|
|
86096
86097
|
|
|
86097
86098
|
return /*#__PURE__*/react.createElement(DonationRoutingContext.Provider, {
|
|
86098
86099
|
value: {}
|
|
86099
86100
|
}, /*#__PURE__*/react.createElement(PaymentRoutingProvider, {
|
|
86100
86101
|
accept: acceptWithAmount,
|
|
86101
86102
|
blacklist: blacklist,
|
|
86102
|
-
setMaxRoute: setMaxRoute
|
|
86103
|
+
setMaxRoute: setMaxRoute,
|
|
86104
|
+
fee: fee
|
|
86103
86105
|
}, /*#__PURE__*/react.createElement(PaymentProvider, {
|
|
86104
86106
|
container: props.container,
|
|
86105
86107
|
document: props.document
|
|
@@ -89190,12 +89192,12 @@ var preflight$2 = /*#__PURE__*/function () {
|
|
|
89190
89192
|
|
|
89191
89193
|
var Donation = /*#__PURE__*/function () {
|
|
89192
89194
|
var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
|
|
89193
|
-
var amount, accept, event, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, closable, integration, container, document, unmount;
|
|
89195
|
+
var amount, accept, event, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, fee, closable, integration, container, document, unmount;
|
|
89194
89196
|
return regenerator.wrap(function _callee2$(_context2) {
|
|
89195
89197
|
while (1) {
|
|
89196
89198
|
switch (_context2.prev = _context2.next) {
|
|
89197
89199
|
case 0:
|
|
89198
|
-
amount = _ref3.amount, accept = _ref3.accept, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, closable = _ref3.closable, integration = _ref3.integration, container = _ref3.container, document = _ref3.document;
|
|
89200
|
+
amount = _ref3.amount, accept = _ref3.accept, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, fee = _ref3.fee, closable = _ref3.closable, integration = _ref3.integration, container = _ref3.container, document = _ref3.document;
|
|
89199
89201
|
requireReactVersion();
|
|
89200
89202
|
_context2.prev = 2;
|
|
89201
89203
|
_context2.next = 5;
|
|
@@ -89222,6 +89224,7 @@ var Donation = /*#__PURE__*/function () {
|
|
|
89222
89224
|
accept: accept,
|
|
89223
89225
|
currency: currency,
|
|
89224
89226
|
event: event,
|
|
89227
|
+
fee: fee,
|
|
89225
89228
|
sent: sent,
|
|
89226
89229
|
confirmed: confirmed,
|
|
89227
89230
|
failed: failed,
|
package/dist/esm/index.js
CHANGED
|
@@ -1694,7 +1694,7 @@ var CardStyle = (function (style) {
|
|
|
1694
1694
|
});
|
|
1695
1695
|
|
|
1696
1696
|
var DialogStyle = (function (style) {
|
|
1697
|
-
return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 0.8rem;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 0.8rem;\n border-top-radius: 0.8rem;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n background: rgb(248,248,248);\n border-top-left-radius: 0.8rem;\n border-top-right-radius: 0.8rem;\n min-height: 3.4rem;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 3rem;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 3rem;\n }\n\n .DialogFooter {\n background: rgb(248,248,248);\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n line-height: 1.5rem;\n min-height: 2rem;\n position: relative;\n text-align: center;\n }\n\n ";
|
|
1697
|
+
return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n top: 0;\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 0.8rem;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 0.8rem;\n border-top-radius: 0.8rem;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n background: rgb(248,248,248);\n border-top-left-radius: 0.8rem;\n border-top-right-radius: 0.8rem;\n min-height: 3.4rem;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 3rem;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 3rem;\n }\n\n .DialogFooter {\n background: rgb(248,248,248);\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n line-height: 1.5rem;\n min-height: 2rem;\n position: relative;\n text-align: center;\n }\n\n ";
|
|
1698
1698
|
});
|
|
1699
1699
|
|
|
1700
1700
|
var FontStyle = (function (style) {
|
|
@@ -1834,7 +1834,7 @@ var mount = (function (_ref, content) {
|
|
|
1834
1834
|
content: content(unmountShadowDOM),
|
|
1835
1835
|
outsideStyle: outsideStyle,
|
|
1836
1836
|
insideStyle: insideStyle,
|
|
1837
|
-
insideClasses: ['contained']
|
|
1837
|
+
insideClasses: container ? ['contained'] : []
|
|
1838
1838
|
}),
|
|
1839
1839
|
unmount = _ReactShadowDOM.unmount;
|
|
1840
1840
|
|
|
@@ -2956,14 +2956,16 @@ var DonationRoutingProvider = (function (props) {
|
|
|
2956
2956
|
setMaxRoute = _useContext.setMaxRoute;
|
|
2957
2957
|
|
|
2958
2958
|
var _useContext2 = useContext(ConfigurationContext),
|
|
2959
|
-
blacklist = _useContext2.blacklist
|
|
2959
|
+
blacklist = _useContext2.blacklist,
|
|
2960
|
+
fee = _useContext2.fee;
|
|
2960
2961
|
|
|
2961
2962
|
return /*#__PURE__*/React.createElement(DonationRoutingContext.Provider, {
|
|
2962
2963
|
value: {}
|
|
2963
2964
|
}, /*#__PURE__*/React.createElement(PaymentRoutingProvider, {
|
|
2964
2965
|
accept: acceptWithAmount,
|
|
2965
2966
|
blacklist: blacklist,
|
|
2966
|
-
setMaxRoute: setMaxRoute
|
|
2967
|
+
setMaxRoute: setMaxRoute,
|
|
2968
|
+
fee: fee
|
|
2967
2969
|
}, /*#__PURE__*/React.createElement(PaymentProvider, {
|
|
2968
2970
|
container: props.container,
|
|
2969
2971
|
document: props.document
|
|
@@ -4339,12 +4341,12 @@ var preflight$2 = /*#__PURE__*/function () {
|
|
|
4339
4341
|
|
|
4340
4342
|
var Donation = /*#__PURE__*/function () {
|
|
4341
4343
|
var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
|
|
4342
|
-
var amount, accept, event, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, closable, integration, container, document, unmount;
|
|
4344
|
+
var amount, accept, event, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, fee, closable, integration, container, document, unmount;
|
|
4343
4345
|
return regenerator.wrap(function _callee2$(_context2) {
|
|
4344
4346
|
while (1) {
|
|
4345
4347
|
switch (_context2.prev = _context2.next) {
|
|
4346
4348
|
case 0:
|
|
4347
|
-
amount = _ref3.amount, accept = _ref3.accept, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, closable = _ref3.closable, integration = _ref3.integration, container = _ref3.container, document = _ref3.document;
|
|
4349
|
+
amount = _ref3.amount, accept = _ref3.accept, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, fee = _ref3.fee, closable = _ref3.closable, integration = _ref3.integration, container = _ref3.container, document = _ref3.document;
|
|
4348
4350
|
requireReactVersion();
|
|
4349
4351
|
_context2.prev = 2;
|
|
4350
4352
|
_context2.next = 5;
|
|
@@ -4371,6 +4373,7 @@ var Donation = /*#__PURE__*/function () {
|
|
|
4371
4373
|
accept: accept,
|
|
4372
4374
|
currency: currency,
|
|
4373
4375
|
event: event,
|
|
4376
|
+
fee: fee,
|
|
4374
4377
|
sent: sent,
|
|
4375
4378
|
confirmed: confirmed,
|
|
4376
4379
|
failed: failed,
|
package/dist/umd/index.bundle.js
CHANGED
|
@@ -49839,7 +49839,7 @@
|
|
|
49839
49839
|
});
|
|
49840
49840
|
|
|
49841
49841
|
var DialogStyle = (function (style) {
|
|
49842
|
-
return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 0.8rem;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 0.8rem;\n border-top-radius: 0.8rem;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n background: rgb(248,248,248);\n border-top-left-radius: 0.8rem;\n border-top-right-radius: 0.8rem;\n min-height: 3.4rem;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 3rem;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 3rem;\n }\n\n .DialogFooter {\n background: rgb(248,248,248);\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n line-height: 1.5rem;\n min-height: 2rem;\n position: relative;\n text-align: center;\n }\n\n ";
|
|
49842
|
+
return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n top: 0;\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 0.8rem;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 0.8rem;\n border-top-radius: 0.8rem;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n background: rgb(248,248,248);\n border-top-left-radius: 0.8rem;\n border-top-right-radius: 0.8rem;\n min-height: 3.4rem;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 3rem;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 3rem;\n }\n\n .DialogFooter {\n background: rgb(248,248,248);\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n line-height: 1.5rem;\n min-height: 2rem;\n position: relative;\n text-align: center;\n }\n\n ";
|
|
49843
49843
|
});
|
|
49844
49844
|
|
|
49845
49845
|
var FontStyle = (function (style) {
|
|
@@ -50069,7 +50069,7 @@
|
|
|
50069
50069
|
content: content(unmountShadowDOM),
|
|
50070
50070
|
outsideStyle: outsideStyle,
|
|
50071
50071
|
insideStyle: insideStyle,
|
|
50072
|
-
insideClasses: ['contained']
|
|
50072
|
+
insideClasses: container ? ['contained'] : []
|
|
50073
50073
|
}),
|
|
50074
50074
|
unmount = _ReactShadowDOM.unmount;
|
|
50075
50075
|
|
|
@@ -86098,14 +86098,16 @@
|
|
|
86098
86098
|
setMaxRoute = _useContext.setMaxRoute;
|
|
86099
86099
|
|
|
86100
86100
|
var _useContext2 = react.useContext(ConfigurationContext),
|
|
86101
|
-
blacklist = _useContext2.blacklist
|
|
86101
|
+
blacklist = _useContext2.blacklist,
|
|
86102
|
+
fee = _useContext2.fee;
|
|
86102
86103
|
|
|
86103
86104
|
return /*#__PURE__*/react.createElement(DonationRoutingContext.Provider, {
|
|
86104
86105
|
value: {}
|
|
86105
86106
|
}, /*#__PURE__*/react.createElement(PaymentRoutingProvider, {
|
|
86106
86107
|
accept: acceptWithAmount,
|
|
86107
86108
|
blacklist: blacklist,
|
|
86108
|
-
setMaxRoute: setMaxRoute
|
|
86109
|
+
setMaxRoute: setMaxRoute,
|
|
86110
|
+
fee: fee
|
|
86109
86111
|
}, /*#__PURE__*/react.createElement(PaymentProvider, {
|
|
86110
86112
|
container: props.container,
|
|
86111
86113
|
document: props.document
|
|
@@ -89196,12 +89198,12 @@
|
|
|
89196
89198
|
|
|
89197
89199
|
var Donation = /*#__PURE__*/function () {
|
|
89198
89200
|
var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
|
|
89199
|
-
var amount, accept, event, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, closable, integration, container, document, unmount;
|
|
89201
|
+
var amount, accept, event, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, fee, closable, integration, container, document, unmount;
|
|
89200
89202
|
return regenerator.wrap(function _callee2$(_context2) {
|
|
89201
89203
|
while (1) {
|
|
89202
89204
|
switch (_context2.prev = _context2.next) {
|
|
89203
89205
|
case 0:
|
|
89204
|
-
amount = _ref3.amount, accept = _ref3.accept, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, closable = _ref3.closable, integration = _ref3.integration, container = _ref3.container, document = _ref3.document;
|
|
89206
|
+
amount = _ref3.amount, accept = _ref3.accept, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, fee = _ref3.fee, closable = _ref3.closable, integration = _ref3.integration, container = _ref3.container, document = _ref3.document;
|
|
89205
89207
|
requireReactVersion();
|
|
89206
89208
|
_context2.prev = 2;
|
|
89207
89209
|
_context2.next = 5;
|
|
@@ -89228,6 +89230,7 @@
|
|
|
89228
89230
|
accept: accept,
|
|
89229
89231
|
currency: currency,
|
|
89230
89232
|
event: event,
|
|
89233
|
+
fee: fee,
|
|
89231
89234
|
sent: sent,
|
|
89232
89235
|
confirmed: confirmed,
|
|
89233
89236
|
failed: failed,
|
package/dist/umd/index.js
CHANGED
|
@@ -1689,7 +1689,7 @@
|
|
|
1689
1689
|
});
|
|
1690
1690
|
|
|
1691
1691
|
var DialogStyle = (function (style) {
|
|
1692
|
-
return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 0.8rem;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 0.8rem;\n border-top-radius: 0.8rem;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n background: rgb(248,248,248);\n border-top-left-radius: 0.8rem;\n border-top-right-radius: 0.8rem;\n min-height: 3.4rem;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 3rem;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 3rem;\n }\n\n .DialogFooter {\n background: rgb(248,248,248);\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n line-height: 1.5rem;\n min-height: 2rem;\n position: relative;\n text-align: center;\n }\n\n ";
|
|
1692
|
+
return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n top: 0;\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 0.8rem;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 0.8rem;\n border-top-radius: 0.8rem;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n background: rgb(248,248,248);\n border-top-left-radius: 0.8rem;\n border-top-right-radius: 0.8rem;\n min-height: 3.4rem;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 3rem;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 3rem;\n }\n\n .DialogFooter {\n background: rgb(248,248,248);\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n line-height: 1.5rem;\n min-height: 2rem;\n position: relative;\n text-align: center;\n }\n\n ";
|
|
1693
1693
|
});
|
|
1694
1694
|
|
|
1695
1695
|
var FontStyle = (function (style) {
|
|
@@ -1829,7 +1829,7 @@
|
|
|
1829
1829
|
content: content(unmountShadowDOM),
|
|
1830
1830
|
outsideStyle: outsideStyle,
|
|
1831
1831
|
insideStyle: insideStyle,
|
|
1832
|
-
insideClasses: ['contained']
|
|
1832
|
+
insideClasses: container ? ['contained'] : []
|
|
1833
1833
|
}),
|
|
1834
1834
|
unmount = _ReactShadowDOM.unmount;
|
|
1835
1835
|
|
|
@@ -2951,14 +2951,16 @@
|
|
|
2951
2951
|
setMaxRoute = _useContext.setMaxRoute;
|
|
2952
2952
|
|
|
2953
2953
|
var _useContext2 = React.useContext(ConfigurationContext),
|
|
2954
|
-
blacklist = _useContext2.blacklist
|
|
2954
|
+
blacklist = _useContext2.blacklist,
|
|
2955
|
+
fee = _useContext2.fee;
|
|
2955
2956
|
|
|
2956
2957
|
return /*#__PURE__*/React__default["default"].createElement(DonationRoutingContext.Provider, {
|
|
2957
2958
|
value: {}
|
|
2958
2959
|
}, /*#__PURE__*/React__default["default"].createElement(PaymentRoutingProvider, {
|
|
2959
2960
|
accept: acceptWithAmount,
|
|
2960
2961
|
blacklist: blacklist,
|
|
2961
|
-
setMaxRoute: setMaxRoute
|
|
2962
|
+
setMaxRoute: setMaxRoute,
|
|
2963
|
+
fee: fee
|
|
2962
2964
|
}, /*#__PURE__*/React__default["default"].createElement(PaymentProvider, {
|
|
2963
2965
|
container: props.container,
|
|
2964
2966
|
document: props.document
|
|
@@ -4334,12 +4336,12 @@
|
|
|
4334
4336
|
|
|
4335
4337
|
var Donation = /*#__PURE__*/function () {
|
|
4336
4338
|
var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
|
|
4337
|
-
var amount, accept, event, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, closable, integration, container, document, unmount;
|
|
4339
|
+
var amount, accept, event, sent, confirmed, failed, error, critical, style, blacklist, providers, currency, connected, closed, fee, closable, integration, container, document, unmount;
|
|
4338
4340
|
return regenerator.wrap(function _callee2$(_context2) {
|
|
4339
4341
|
while (1) {
|
|
4340
4342
|
switch (_context2.prev = _context2.next) {
|
|
4341
4343
|
case 0:
|
|
4342
|
-
amount = _ref3.amount, accept = _ref3.accept, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, closable = _ref3.closable, integration = _ref3.integration, container = _ref3.container, document = _ref3.document;
|
|
4344
|
+
amount = _ref3.amount, accept = _ref3.accept, event = _ref3.event, sent = _ref3.sent, confirmed = _ref3.confirmed, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, fee = _ref3.fee, closable = _ref3.closable, integration = _ref3.integration, container = _ref3.container, document = _ref3.document;
|
|
4343
4345
|
requireReactVersion();
|
|
4344
4346
|
_context2.prev = 2;
|
|
4345
4347
|
_context2.next = 5;
|
|
@@ -4366,6 +4368,7 @@
|
|
|
4366
4368
|
accept: accept,
|
|
4367
4369
|
currency: currency,
|
|
4368
4370
|
event: event,
|
|
4371
|
+
fee: fee,
|
|
4369
4372
|
sent: sent,
|
|
4370
4373
|
confirmed: confirmed,
|
|
4371
4374
|
failed: failed,
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@depay/widgets",
|
|
3
3
|
"moduleName": "DePayWidgets",
|
|
4
|
-
"version": "6.
|
|
4
|
+
"version": "6.28.0",
|
|
5
5
|
"description": "Web3 Payments with any token. DePay simplifies and improves Web3 Payments with the power of DeFi. Accept any token with on-the-fly conversion.",
|
|
6
6
|
"main": "./dist/umd/index.js",
|
|
7
7
|
"module": "./dist/esm/index.js",
|