@depay/widgets 6.16.5 → 6.17.2
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 +4 -0
- package/dist/esm/index.bundle.js +42 -37
- package/dist/esm/index.js +21 -23
- package/dist/umd/index.bundle.js +42 -37
- package/dist/umd/index.js +21 -23
- package/package.json +2 -2
package/README.md
CHANGED
package/dist/esm/index.bundle.js
CHANGED
|
@@ -1536,29 +1536,25 @@ function ReactDialogStyle (styles) {
|
|
|
1536
1536
|
return `
|
|
1537
1537
|
.ReactDialog {
|
|
1538
1538
|
bottom: 0;
|
|
1539
|
-
display:
|
|
1539
|
+
display: flex;
|
|
1540
1540
|
height: 100%;
|
|
1541
|
+
height: 100vh;
|
|
1541
1542
|
left: 0;
|
|
1543
|
+
min-height: 100%;
|
|
1544
|
+
min-height: 100vh;
|
|
1542
1545
|
overflow: hidden;
|
|
1543
|
-
position:
|
|
1546
|
+
position: fixed;
|
|
1544
1547
|
right: 0;
|
|
1545
1548
|
top: 0;
|
|
1546
|
-
user-select: none;
|
|
1547
1549
|
width: 100%;
|
|
1550
|
+
width: 100vw;
|
|
1548
1551
|
}
|
|
1549
1552
|
|
|
1550
|
-
.
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
.ReactDialogCell {
|
|
1557
|
-
display: table-cell;
|
|
1558
|
-
height: 100%;
|
|
1559
|
-
vertical-align: middle;
|
|
1560
|
-
width: 100%;
|
|
1561
|
-
text-align: center;
|
|
1553
|
+
.ReactDialogInner {
|
|
1554
|
+
align-items: center;
|
|
1555
|
+
display: flex;
|
|
1556
|
+
flex: 1;
|
|
1557
|
+
justify-content: center;
|
|
1562
1558
|
}
|
|
1563
1559
|
|
|
1564
1560
|
.ReactDialogBackground {
|
|
@@ -1647,11 +1643,9 @@ class Dialog$1 extends react.Component {
|
|
|
1647
1643
|
return (
|
|
1648
1644
|
react.createElement('div', { className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName$2, lineNumber: 56}}
|
|
1649
1645
|
, react.createElement('style', {__self: this, __source: {fileName: _jsxFileName$2, lineNumber: 57}}, style)
|
|
1650
|
-
, react.createElement('div', { className: "
|
|
1651
|
-
, react.createElement('div', { className: "
|
|
1652
|
-
|
|
1653
|
-
, this.props.children
|
|
1654
|
-
)
|
|
1646
|
+
, react.createElement('div', { className: "ReactDialogInner", __self: this, __source: {fileName: _jsxFileName$2, lineNumber: 58}}
|
|
1647
|
+
, react.createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName$2, lineNumber: 59}} )
|
|
1648
|
+
, this.props.children
|
|
1655
1649
|
)
|
|
1656
1650
|
)
|
|
1657
1651
|
)
|
|
@@ -1708,9 +1702,12 @@ function ReactDialogStackStyle () {
|
|
|
1708
1702
|
return `
|
|
1709
1703
|
|
|
1710
1704
|
.ReactDialogStack {
|
|
1705
|
+
align-items: center;
|
|
1711
1706
|
bottom: 0;
|
|
1712
|
-
display:
|
|
1707
|
+
display: flex;
|
|
1708
|
+
flex: 1;
|
|
1713
1709
|
height: 100%;
|
|
1710
|
+
justify-content: center;
|
|
1714
1711
|
position: absolute;
|
|
1715
1712
|
top: 0;
|
|
1716
1713
|
transition: left 0.1s ease, opacity 0.2s ease;
|
|
@@ -1887,17 +1884,17 @@ class ReactDialogStack extends react.Component {
|
|
|
1887
1884
|
this.classForDirection(),
|
|
1888
1885
|
];
|
|
1889
1886
|
return (
|
|
1890
|
-
react.createElement('div', {
|
|
1891
|
-
|
|
1892
|
-
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
)
|
|
1887
|
+
react.createElement('div', {
|
|
1888
|
+
key: index,
|
|
1889
|
+
className: ['ReactDialogStack'].concat(stackState).join(' '),
|
|
1890
|
+
onClick: this.onClick.bind(this), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 131}}
|
|
1891
|
+
|
|
1892
|
+
, react.createElement(NavigateStackContext.Provider, {
|
|
1893
|
+
value: { navigate: this.navigate.bind(this), set: this.set.bind(this) }, __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 136}}
|
|
1894
|
+
|
|
1895
|
+
, react.createElement(CloseStackContext.Provider, { value: this.close.bind(this), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 139}}
|
|
1896
|
+
, react.createElement(StackContext.Provider, { value: this.state.stack, __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 140}}
|
|
1897
|
+
, react.createElement('div', { className: "ReactDialogAnimation", __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 141}}, this.props.dialogs[route])
|
|
1901
1898
|
)
|
|
1902
1899
|
)
|
|
1903
1900
|
)
|
|
@@ -1912,7 +1909,7 @@ class ReactDialogStack extends react.Component {
|
|
|
1912
1909
|
event.target &&
|
|
1913
1910
|
event.target.className &&
|
|
1914
1911
|
event.target.className.match &&
|
|
1915
|
-
event.target.className.match('
|
|
1912
|
+
event.target.className.match('ReactDialogStack') // clicked background
|
|
1916
1913
|
) {
|
|
1917
1914
|
if (this.state.stack.length > 1) {
|
|
1918
1915
|
this.unstack();
|
|
@@ -2004,7 +2001,9 @@ var ConnectingWalletDialog = (function (props) {
|
|
|
2004
2001
|
if (props.pending) {
|
|
2005
2002
|
return /*#__PURE__*/react.createElement(Dialog, {
|
|
2006
2003
|
stacked: true,
|
|
2007
|
-
body: /*#__PURE__*/react.createElement("div",
|
|
2004
|
+
body: /*#__PURE__*/react.createElement("div", {
|
|
2005
|
+
className: "TextCenter"
|
|
2006
|
+
}, walletLogo && /*#__PURE__*/react.createElement("div", {
|
|
2008
2007
|
className: "GraphicWrapper PaddingTopS PaddingBottomS"
|
|
2009
2008
|
}, /*#__PURE__*/react.createElement("img", {
|
|
2010
2009
|
className: "Graphic",
|
|
@@ -49495,7 +49494,7 @@ var CardStyle = (function (style) {
|
|
|
49495
49494
|
});
|
|
49496
49495
|
|
|
49497
49496
|
var DialogStyle = (function (style) {
|
|
49498
|
-
return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 0.8rem;\n background: rgb(248,248,248);\n }\n\n @media
|
|
49497
|
+
return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 0.8rem;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n\n\n .DialogHeader {\n border-top-left-radius: 0 !important;\n border-top-right-radius: 0 !important;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 0.8rem;\n border-top-radius: 0.8rem;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n background: rgb(248,248,248);\n border-top-left-radius: 0.8rem;\n border-top-right-radius: 0.8rem;\n min-height: 3.4rem;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 3rem;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 3rem;\n }\n\n .DialogFooter {\n background: rgb(248,248,248);\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n line-height: 1.5rem;\n min-height: 2rem;\n position: relative;\n text-align: center;\n }\n\n ";
|
|
49499
49498
|
});
|
|
49500
49499
|
|
|
49501
49500
|
var FontStyle = (function (style) {
|
|
@@ -62334,10 +62333,14 @@ var timezoneToCurrency = {
|
|
|
62334
62333
|
class Currency {
|
|
62335
62334
|
constructor({ amount, code, timeZone = Currency.timeZone() }) {
|
|
62336
62335
|
this.amount = amount;
|
|
62337
|
-
this.code = code ||
|
|
62336
|
+
this.code = code || Currency.getCode(timeZone);
|
|
62338
62337
|
this.timeZone = timeZone;
|
|
62339
62338
|
}
|
|
62340
62339
|
|
|
62340
|
+
static getCode(timeZone) {
|
|
62341
|
+
return timezoneToCurrency[timeZone || Currency.timeZone()] || 'USD'
|
|
62342
|
+
}
|
|
62343
|
+
|
|
62341
62344
|
static async fromUSD({ amount, code, timeZone, apiKey }) {
|
|
62342
62345
|
let currency = new Currency({ amount, code, timeZone });
|
|
62343
62346
|
let rate = await fetch('https://api.depay.fi/v2/currencies/' + currency.code, {
|
|
@@ -71571,7 +71574,9 @@ var SignLoginDialog = (function (props) {
|
|
|
71571
71574
|
};
|
|
71572
71575
|
|
|
71573
71576
|
return /*#__PURE__*/react.createElement(Dialog, {
|
|
71574
|
-
body: /*#__PURE__*/react.createElement("div",
|
|
71577
|
+
body: /*#__PURE__*/react.createElement("div", {
|
|
71578
|
+
className: "TextCenter"
|
|
71579
|
+
}, walletLogo && /*#__PURE__*/react.createElement("div", {
|
|
71575
71580
|
className: "GraphicWrapper PaddingTopS PaddingBottomS"
|
|
71576
71581
|
}, /*#__PURE__*/react.createElement("img", {
|
|
71577
71582
|
className: "Graphic",
|
package/dist/esm/index.js
CHANGED
|
@@ -1018,7 +1018,9 @@ var ConnectingWalletDialog = (function (props) {
|
|
|
1018
1018
|
if (props.pending) {
|
|
1019
1019
|
return /*#__PURE__*/React.createElement(Dialog$1, {
|
|
1020
1020
|
stacked: true,
|
|
1021
|
-
body: /*#__PURE__*/React.createElement("div",
|
|
1021
|
+
body: /*#__PURE__*/React.createElement("div", {
|
|
1022
|
+
className: "TextCenter"
|
|
1023
|
+
}, walletLogo && /*#__PURE__*/React.createElement("div", {
|
|
1022
1024
|
className: "GraphicWrapper PaddingTopS PaddingBottomS"
|
|
1023
1025
|
}, /*#__PURE__*/React.createElement("img", {
|
|
1024
1026
|
className: "Graphic",
|
|
@@ -1394,29 +1396,25 @@ function ReactDialogStyle (styles) {
|
|
|
1394
1396
|
return `
|
|
1395
1397
|
.ReactDialog {
|
|
1396
1398
|
bottom: 0;
|
|
1397
|
-
display:
|
|
1399
|
+
display: flex;
|
|
1398
1400
|
height: 100%;
|
|
1401
|
+
height: 100vh;
|
|
1399
1402
|
left: 0;
|
|
1403
|
+
min-height: 100%;
|
|
1404
|
+
min-height: 100vh;
|
|
1400
1405
|
overflow: hidden;
|
|
1401
|
-
position:
|
|
1406
|
+
position: fixed;
|
|
1402
1407
|
right: 0;
|
|
1403
1408
|
top: 0;
|
|
1404
|
-
user-select: none;
|
|
1405
|
-
width: 100%;
|
|
1406
|
-
}
|
|
1407
|
-
|
|
1408
|
-
.ReactDialogRow {
|
|
1409
|
-
display: table-row;
|
|
1410
|
-
height: 100%;
|
|
1411
1409
|
width: 100%;
|
|
1410
|
+
width: 100vw;
|
|
1412
1411
|
}
|
|
1413
1412
|
|
|
1414
|
-
.
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
text-align: center;
|
|
1413
|
+
.ReactDialogInner {
|
|
1414
|
+
align-items: center;
|
|
1415
|
+
display: flex;
|
|
1416
|
+
flex: 1;
|
|
1417
|
+
justify-content: center;
|
|
1420
1418
|
}
|
|
1421
1419
|
|
|
1422
1420
|
.ReactDialogBackground {
|
|
@@ -1505,11 +1503,9 @@ class Dialog extends React.Component {
|
|
|
1505
1503
|
return (
|
|
1506
1504
|
React.createElement('div', { className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName, lineNumber: 56}}
|
|
1507
1505
|
, React.createElement('style', {__self: this, __source: {fileName: _jsxFileName, lineNumber: 57}}, style)
|
|
1508
|
-
, React.createElement('div', { className: "
|
|
1509
|
-
, React.createElement('div', { className: "
|
|
1510
|
-
|
|
1511
|
-
, this.props.children
|
|
1512
|
-
)
|
|
1506
|
+
, React.createElement('div', { className: "ReactDialogInner", __self: this, __source: {fileName: _jsxFileName, lineNumber: 58}}
|
|
1507
|
+
, React.createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName, lineNumber: 59}} )
|
|
1508
|
+
, this.props.children
|
|
1513
1509
|
)
|
|
1514
1510
|
)
|
|
1515
1511
|
)
|
|
@@ -1684,7 +1680,7 @@ var CardStyle = (function (style) {
|
|
|
1684
1680
|
});
|
|
1685
1681
|
|
|
1686
1682
|
var DialogStyle = (function (style) {
|
|
1687
|
-
return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 0.8rem;\n background: rgb(248,248,248);\n }\n\n @media
|
|
1683
|
+
return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 0.8rem;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n\n\n .DialogHeader {\n border-top-left-radius: 0 !important;\n border-top-right-radius: 0 !important;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 0.8rem;\n border-top-radius: 0.8rem;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n background: rgb(248,248,248);\n border-top-left-radius: 0.8rem;\n border-top-right-radius: 0.8rem;\n min-height: 3.4rem;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 3rem;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 3rem;\n }\n\n .DialogFooter {\n background: rgb(248,248,248);\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n line-height: 1.5rem;\n min-height: 2rem;\n position: relative;\n text-align: center;\n }\n\n ";
|
|
1688
1684
|
});
|
|
1689
1685
|
|
|
1690
1686
|
var FontStyle = (function (style) {
|
|
@@ -4388,7 +4384,9 @@ var SignLoginDialog = (function (props) {
|
|
|
4388
4384
|
};
|
|
4389
4385
|
|
|
4390
4386
|
return /*#__PURE__*/React.createElement(Dialog$1, {
|
|
4391
|
-
body: /*#__PURE__*/React.createElement("div",
|
|
4387
|
+
body: /*#__PURE__*/React.createElement("div", {
|
|
4388
|
+
className: "TextCenter"
|
|
4389
|
+
}, walletLogo && /*#__PURE__*/React.createElement("div", {
|
|
4392
4390
|
className: "GraphicWrapper PaddingTopS PaddingBottomS"
|
|
4393
4391
|
}, /*#__PURE__*/React.createElement("img", {
|
|
4394
4392
|
className: "Graphic",
|
package/dist/umd/index.bundle.js
CHANGED
|
@@ -1542,29 +1542,25 @@
|
|
|
1542
1542
|
return `
|
|
1543
1543
|
.ReactDialog {
|
|
1544
1544
|
bottom: 0;
|
|
1545
|
-
display:
|
|
1545
|
+
display: flex;
|
|
1546
1546
|
height: 100%;
|
|
1547
|
+
height: 100vh;
|
|
1547
1548
|
left: 0;
|
|
1549
|
+
min-height: 100%;
|
|
1550
|
+
min-height: 100vh;
|
|
1548
1551
|
overflow: hidden;
|
|
1549
|
-
position:
|
|
1552
|
+
position: fixed;
|
|
1550
1553
|
right: 0;
|
|
1551
1554
|
top: 0;
|
|
1552
|
-
user-select: none;
|
|
1553
1555
|
width: 100%;
|
|
1556
|
+
width: 100vw;
|
|
1554
1557
|
}
|
|
1555
1558
|
|
|
1556
|
-
.
|
|
1557
|
-
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
.ReactDialogCell {
|
|
1563
|
-
display: table-cell;
|
|
1564
|
-
height: 100%;
|
|
1565
|
-
vertical-align: middle;
|
|
1566
|
-
width: 100%;
|
|
1567
|
-
text-align: center;
|
|
1559
|
+
.ReactDialogInner {
|
|
1560
|
+
align-items: center;
|
|
1561
|
+
display: flex;
|
|
1562
|
+
flex: 1;
|
|
1563
|
+
justify-content: center;
|
|
1568
1564
|
}
|
|
1569
1565
|
|
|
1570
1566
|
.ReactDialogBackground {
|
|
@@ -1653,11 +1649,9 @@
|
|
|
1653
1649
|
return (
|
|
1654
1650
|
react.createElement('div', { className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName$2, lineNumber: 56}}
|
|
1655
1651
|
, react.createElement('style', {__self: this, __source: {fileName: _jsxFileName$2, lineNumber: 57}}, style)
|
|
1656
|
-
, react.createElement('div', { className: "
|
|
1657
|
-
, react.createElement('div', { className: "
|
|
1658
|
-
|
|
1659
|
-
, this.props.children
|
|
1660
|
-
)
|
|
1652
|
+
, react.createElement('div', { className: "ReactDialogInner", __self: this, __source: {fileName: _jsxFileName$2, lineNumber: 58}}
|
|
1653
|
+
, react.createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName$2, lineNumber: 59}} )
|
|
1654
|
+
, this.props.children
|
|
1661
1655
|
)
|
|
1662
1656
|
)
|
|
1663
1657
|
)
|
|
@@ -1714,9 +1708,12 @@
|
|
|
1714
1708
|
return `
|
|
1715
1709
|
|
|
1716
1710
|
.ReactDialogStack {
|
|
1711
|
+
align-items: center;
|
|
1717
1712
|
bottom: 0;
|
|
1718
|
-
display:
|
|
1713
|
+
display: flex;
|
|
1714
|
+
flex: 1;
|
|
1719
1715
|
height: 100%;
|
|
1716
|
+
justify-content: center;
|
|
1720
1717
|
position: absolute;
|
|
1721
1718
|
top: 0;
|
|
1722
1719
|
transition: left 0.1s ease, opacity 0.2s ease;
|
|
@@ -1893,17 +1890,17 @@
|
|
|
1893
1890
|
this.classForDirection(),
|
|
1894
1891
|
];
|
|
1895
1892
|
return (
|
|
1896
|
-
react.createElement('div', {
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
)
|
|
1893
|
+
react.createElement('div', {
|
|
1894
|
+
key: index,
|
|
1895
|
+
className: ['ReactDialogStack'].concat(stackState).join(' '),
|
|
1896
|
+
onClick: this.onClick.bind(this), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 131}}
|
|
1897
|
+
|
|
1898
|
+
, react.createElement(NavigateStackContext.Provider, {
|
|
1899
|
+
value: { navigate: this.navigate.bind(this), set: this.set.bind(this) }, __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 136}}
|
|
1900
|
+
|
|
1901
|
+
, react.createElement(CloseStackContext.Provider, { value: this.close.bind(this), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 139}}
|
|
1902
|
+
, react.createElement(StackContext.Provider, { value: this.state.stack, __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 140}}
|
|
1903
|
+
, react.createElement('div', { className: "ReactDialogAnimation", __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 141}}, this.props.dialogs[route])
|
|
1907
1904
|
)
|
|
1908
1905
|
)
|
|
1909
1906
|
)
|
|
@@ -1918,7 +1915,7 @@
|
|
|
1918
1915
|
event.target &&
|
|
1919
1916
|
event.target.className &&
|
|
1920
1917
|
event.target.className.match &&
|
|
1921
|
-
event.target.className.match('
|
|
1918
|
+
event.target.className.match('ReactDialogStack') // clicked background
|
|
1922
1919
|
) {
|
|
1923
1920
|
if (this.state.stack.length > 1) {
|
|
1924
1921
|
this.unstack();
|
|
@@ -2010,7 +2007,9 @@
|
|
|
2010
2007
|
if (props.pending) {
|
|
2011
2008
|
return /*#__PURE__*/react.createElement(Dialog, {
|
|
2012
2009
|
stacked: true,
|
|
2013
|
-
body: /*#__PURE__*/react.createElement("div",
|
|
2010
|
+
body: /*#__PURE__*/react.createElement("div", {
|
|
2011
|
+
className: "TextCenter"
|
|
2012
|
+
}, walletLogo && /*#__PURE__*/react.createElement("div", {
|
|
2014
2013
|
className: "GraphicWrapper PaddingTopS PaddingBottomS"
|
|
2015
2014
|
}, /*#__PURE__*/react.createElement("img", {
|
|
2016
2015
|
className: "Graphic",
|
|
@@ -49501,7 +49500,7 @@
|
|
|
49501
49500
|
});
|
|
49502
49501
|
|
|
49503
49502
|
var DialogStyle = (function (style) {
|
|
49504
|
-
return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 0.8rem;\n background: rgb(248,248,248);\n }\n\n @media
|
|
49503
|
+
return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 0.8rem;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n\n\n .DialogHeader {\n border-top-left-radius: 0 !important;\n border-top-right-radius: 0 !important;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 0.8rem;\n border-top-radius: 0.8rem;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n background: rgb(248,248,248);\n border-top-left-radius: 0.8rem;\n border-top-right-radius: 0.8rem;\n min-height: 3.4rem;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 3rem;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 3rem;\n }\n\n .DialogFooter {\n background: rgb(248,248,248);\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n line-height: 1.5rem;\n min-height: 2rem;\n position: relative;\n text-align: center;\n }\n\n ";
|
|
49505
49504
|
});
|
|
49506
49505
|
|
|
49507
49506
|
var FontStyle = (function (style) {
|
|
@@ -62340,10 +62339,14 @@
|
|
|
62340
62339
|
class Currency {
|
|
62341
62340
|
constructor({ amount, code, timeZone = Currency.timeZone() }) {
|
|
62342
62341
|
this.amount = amount;
|
|
62343
|
-
this.code = code ||
|
|
62342
|
+
this.code = code || Currency.getCode(timeZone);
|
|
62344
62343
|
this.timeZone = timeZone;
|
|
62345
62344
|
}
|
|
62346
62345
|
|
|
62346
|
+
static getCode(timeZone) {
|
|
62347
|
+
return timezoneToCurrency[timeZone || Currency.timeZone()] || 'USD'
|
|
62348
|
+
}
|
|
62349
|
+
|
|
62347
62350
|
static async fromUSD({ amount, code, timeZone, apiKey }) {
|
|
62348
62351
|
let currency = new Currency({ amount, code, timeZone });
|
|
62349
62352
|
let rate = await fetch('https://api.depay.fi/v2/currencies/' + currency.code, {
|
|
@@ -71577,7 +71580,9 @@
|
|
|
71577
71580
|
};
|
|
71578
71581
|
|
|
71579
71582
|
return /*#__PURE__*/react.createElement(Dialog, {
|
|
71580
|
-
body: /*#__PURE__*/react.createElement("div",
|
|
71583
|
+
body: /*#__PURE__*/react.createElement("div", {
|
|
71584
|
+
className: "TextCenter"
|
|
71585
|
+
}, walletLogo && /*#__PURE__*/react.createElement("div", {
|
|
71581
71586
|
className: "GraphicWrapper PaddingTopS PaddingBottomS"
|
|
71582
71587
|
}, /*#__PURE__*/react.createElement("img", {
|
|
71583
71588
|
className: "Graphic",
|
package/dist/umd/index.js
CHANGED
|
@@ -1013,7 +1013,9 @@
|
|
|
1013
1013
|
if (props.pending) {
|
|
1014
1014
|
return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
|
|
1015
1015
|
stacked: true,
|
|
1016
|
-
body: /*#__PURE__*/React__default["default"].createElement("div",
|
|
1016
|
+
body: /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1017
|
+
className: "TextCenter"
|
|
1018
|
+
}, walletLogo && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1017
1019
|
className: "GraphicWrapper PaddingTopS PaddingBottomS"
|
|
1018
1020
|
}, /*#__PURE__*/React__default["default"].createElement("img", {
|
|
1019
1021
|
className: "Graphic",
|
|
@@ -1389,29 +1391,25 @@
|
|
|
1389
1391
|
return `
|
|
1390
1392
|
.ReactDialog {
|
|
1391
1393
|
bottom: 0;
|
|
1392
|
-
display:
|
|
1394
|
+
display: flex;
|
|
1393
1395
|
height: 100%;
|
|
1396
|
+
height: 100vh;
|
|
1394
1397
|
left: 0;
|
|
1398
|
+
min-height: 100%;
|
|
1399
|
+
min-height: 100vh;
|
|
1395
1400
|
overflow: hidden;
|
|
1396
|
-
position:
|
|
1401
|
+
position: fixed;
|
|
1397
1402
|
right: 0;
|
|
1398
1403
|
top: 0;
|
|
1399
|
-
user-select: none;
|
|
1400
|
-
width: 100%;
|
|
1401
|
-
}
|
|
1402
|
-
|
|
1403
|
-
.ReactDialogRow {
|
|
1404
|
-
display: table-row;
|
|
1405
|
-
height: 100%;
|
|
1406
1404
|
width: 100%;
|
|
1405
|
+
width: 100vw;
|
|
1407
1406
|
}
|
|
1408
1407
|
|
|
1409
|
-
.
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
text-align: center;
|
|
1408
|
+
.ReactDialogInner {
|
|
1409
|
+
align-items: center;
|
|
1410
|
+
display: flex;
|
|
1411
|
+
flex: 1;
|
|
1412
|
+
justify-content: center;
|
|
1415
1413
|
}
|
|
1416
1414
|
|
|
1417
1415
|
.ReactDialogBackground {
|
|
@@ -1500,11 +1498,9 @@
|
|
|
1500
1498
|
return (
|
|
1501
1499
|
React__default["default"].createElement('div', { className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName, lineNumber: 56}}
|
|
1502
1500
|
, React__default["default"].createElement('style', {__self: this, __source: {fileName: _jsxFileName, lineNumber: 57}}, style)
|
|
1503
|
-
, React__default["default"].createElement('div', { className: "
|
|
1504
|
-
, React__default["default"].createElement('div', { className: "
|
|
1505
|
-
|
|
1506
|
-
, this.props.children
|
|
1507
|
-
)
|
|
1501
|
+
, React__default["default"].createElement('div', { className: "ReactDialogInner", __self: this, __source: {fileName: _jsxFileName, lineNumber: 58}}
|
|
1502
|
+
, React__default["default"].createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName, lineNumber: 59}} )
|
|
1503
|
+
, this.props.children
|
|
1508
1504
|
)
|
|
1509
1505
|
)
|
|
1510
1506
|
)
|
|
@@ -1679,7 +1675,7 @@
|
|
|
1679
1675
|
});
|
|
1680
1676
|
|
|
1681
1677
|
var DialogStyle = (function (style) {
|
|
1682
|
-
return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 0.8rem;\n background: rgb(248,248,248);\n }\n\n @media
|
|
1678
|
+
return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .Dialog {\n margin: 0 auto;\n position: relative;\n width: 420px;\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\n border-radius: 0.8rem;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n\n\n .DialogHeader {\n border-top-left-radius: 0 !important;\n border-top-right-radius: 0 !important;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 0.8rem;\n border-top-radius: 0.8rem;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n background: rgb(248,248,248);\n border-top-left-radius: 0.8rem;\n border-top-right-radius: 0.8rem;\n min-height: 3.4rem;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 3rem;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 3rem;\n }\n\n .DialogFooter {\n background: rgb(248,248,248);\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n line-height: 1.5rem;\n min-height: 2rem;\n position: relative;\n text-align: center;\n }\n\n ";
|
|
1683
1679
|
});
|
|
1684
1680
|
|
|
1685
1681
|
var FontStyle = (function (style) {
|
|
@@ -4383,7 +4379,9 @@
|
|
|
4383
4379
|
};
|
|
4384
4380
|
|
|
4385
4381
|
return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
|
|
4386
|
-
body: /*#__PURE__*/React__default["default"].createElement("div",
|
|
4382
|
+
body: /*#__PURE__*/React__default["default"].createElement("div", {
|
|
4383
|
+
className: "TextCenter"
|
|
4384
|
+
}, walletLogo && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
4387
4385
|
className: "GraphicWrapper PaddingTopS PaddingBottomS"
|
|
4388
4386
|
}, /*#__PURE__*/React__default["default"].createElement("img", {
|
|
4389
4387
|
className: "Graphic",
|
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.17.2",
|
|
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",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@depay/local-currency": "^3.0.0",
|
|
37
|
-
"@depay/react-dialog-stack": "^
|
|
37
|
+
"@depay/react-dialog-stack": "^5.0.1",
|
|
38
38
|
"@depay/react-shadow-dom": "^4.0.0",
|
|
39
39
|
"@depay/react-token-image": "^3.0.0",
|
|
40
40
|
"@depay/walletconnect-v1": "^1.1.0",
|