@depay/widgets 6.16.3 → 6.17.1
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 +44 -41
- package/dist/esm/index.js +15 -21
- package/dist/umd/index.bundle.js +44 -41
- package/dist/umd/index.js +15 -21
- package/package.json +4 -4
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();
|
|
@@ -48841,10 +48838,12 @@ const submitSimpleTransfer = ({ transaction, wallet })=>{
|
|
|
48841
48838
|
};
|
|
48842
48839
|
|
|
48843
48840
|
function _optionalChain$6(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
|
|
48844
|
-
|
|
48841
|
+
const setConnectedInstance = (value)=>{
|
|
48842
|
+
window._connectedWalletConnectInstance = value;
|
|
48843
|
+
};
|
|
48845
48844
|
|
|
48846
48845
|
const getConnectedInstance = ()=>{
|
|
48847
|
-
return
|
|
48846
|
+
return window._connectedWalletConnectInstance
|
|
48848
48847
|
};
|
|
48849
48848
|
|
|
48850
48849
|
class WalletConnectWallet {
|
|
@@ -48895,12 +48894,12 @@ class WalletConnectWallet {
|
|
|
48895
48894
|
});
|
|
48896
48895
|
|
|
48897
48896
|
instance.on("disconnect", (error, payload) => {
|
|
48898
|
-
|
|
48897
|
+
setConnectedInstance(undefined);
|
|
48899
48898
|
if (error) { throw error }
|
|
48900
48899
|
});
|
|
48901
48900
|
|
|
48902
48901
|
instance.on("modal_closed", ()=>{
|
|
48903
|
-
|
|
48902
|
+
setConnectedInstance(undefined);
|
|
48904
48903
|
this.connector = undefined;
|
|
48905
48904
|
});
|
|
48906
48905
|
|
|
@@ -48925,14 +48924,14 @@ class WalletConnectWallet {
|
|
|
48925
48924
|
|
|
48926
48925
|
if(this.connector.connected) {
|
|
48927
48926
|
await this.connector.killSession();
|
|
48928
|
-
|
|
48927
|
+
setConnectedInstance(undefined);
|
|
48929
48928
|
this.connector = this.newWalletConnectInstance();
|
|
48930
48929
|
}
|
|
48931
48930
|
|
|
48932
48931
|
const { accounts, chainId } = await this.connector.connect({ chainId: _optionalChain$6([options, 'optionalAccess', _ => _.chainId]) });
|
|
48933
48932
|
|
|
48934
48933
|
if(accounts instanceof Array && accounts.length) {
|
|
48935
|
-
|
|
48934
|
+
setConnectedInstance(this);
|
|
48936
48935
|
}
|
|
48937
48936
|
|
|
48938
48937
|
this.connectedAccounts = accounts;
|
|
@@ -49493,7 +49492,7 @@ var CardStyle = (function (style) {
|
|
|
49493
49492
|
});
|
|
49494
49493
|
|
|
49495
49494
|
var DialogStyle = (function (style) {
|
|
49496
|
-
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
|
|
49495
|
+
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 ";
|
|
49497
49496
|
});
|
|
49498
49497
|
|
|
49499
49498
|
var FontStyle = (function (style) {
|
|
@@ -62332,10 +62331,14 @@ var timezoneToCurrency = {
|
|
|
62332
62331
|
class Currency {
|
|
62333
62332
|
constructor({ amount, code, timeZone = Currency.timeZone() }) {
|
|
62334
62333
|
this.amount = amount;
|
|
62335
|
-
this.code = code ||
|
|
62334
|
+
this.code = code || Currency.getCode(timeZone);
|
|
62336
62335
|
this.timeZone = timeZone;
|
|
62337
62336
|
}
|
|
62338
62337
|
|
|
62338
|
+
static getCode(timeZone) {
|
|
62339
|
+
return timezoneToCurrency[timeZone || Currency.timeZone()] || 'USD'
|
|
62340
|
+
}
|
|
62341
|
+
|
|
62339
62342
|
static async fromUSD({ amount, code, timeZone, apiKey }) {
|
|
62340
62343
|
let currency = new Currency({ amount, code, timeZone });
|
|
62341
62344
|
let rate = await fetch('https://api.depay.fi/v2/currencies/' + currency.code, {
|
package/dist/esm/index.js
CHANGED
|
@@ -1394,29 +1394,25 @@ function ReactDialogStyle (styles) {
|
|
|
1394
1394
|
return `
|
|
1395
1395
|
.ReactDialog {
|
|
1396
1396
|
bottom: 0;
|
|
1397
|
-
display:
|
|
1397
|
+
display: flex;
|
|
1398
1398
|
height: 100%;
|
|
1399
|
+
height: 100vh;
|
|
1399
1400
|
left: 0;
|
|
1401
|
+
min-height: 100%;
|
|
1402
|
+
min-height: 100vh;
|
|
1400
1403
|
overflow: hidden;
|
|
1401
|
-
position:
|
|
1404
|
+
position: fixed;
|
|
1402
1405
|
right: 0;
|
|
1403
1406
|
top: 0;
|
|
1404
|
-
user-select: none;
|
|
1405
|
-
width: 100%;
|
|
1406
|
-
}
|
|
1407
|
-
|
|
1408
|
-
.ReactDialogRow {
|
|
1409
|
-
display: table-row;
|
|
1410
|
-
height: 100%;
|
|
1411
1407
|
width: 100%;
|
|
1408
|
+
width: 100vw;
|
|
1412
1409
|
}
|
|
1413
1410
|
|
|
1414
|
-
.
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
text-align: center;
|
|
1411
|
+
.ReactDialogInner {
|
|
1412
|
+
align-items: center;
|
|
1413
|
+
display: flex;
|
|
1414
|
+
flex: 1;
|
|
1415
|
+
justify-content: center;
|
|
1420
1416
|
}
|
|
1421
1417
|
|
|
1422
1418
|
.ReactDialogBackground {
|
|
@@ -1505,11 +1501,9 @@ class Dialog extends React.Component {
|
|
|
1505
1501
|
return (
|
|
1506
1502
|
React.createElement('div', { className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName, lineNumber: 56}}
|
|
1507
1503
|
, 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
|
-
)
|
|
1504
|
+
, React.createElement('div', { className: "ReactDialogInner", __self: this, __source: {fileName: _jsxFileName, lineNumber: 58}}
|
|
1505
|
+
, React.createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName, lineNumber: 59}} )
|
|
1506
|
+
, this.props.children
|
|
1513
1507
|
)
|
|
1514
1508
|
)
|
|
1515
1509
|
)
|
|
@@ -1684,7 +1678,7 @@ var CardStyle = (function (style) {
|
|
|
1684
1678
|
});
|
|
1685
1679
|
|
|
1686
1680
|
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
|
|
1681
|
+
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
1682
|
});
|
|
1689
1683
|
|
|
1690
1684
|
var FontStyle = (function (style) {
|
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();
|
|
@@ -48847,10 +48844,12 @@
|
|
|
48847
48844
|
};
|
|
48848
48845
|
|
|
48849
48846
|
function _optionalChain$6(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
|
|
48850
|
-
|
|
48847
|
+
const setConnectedInstance = (value)=>{
|
|
48848
|
+
window._connectedWalletConnectInstance = value;
|
|
48849
|
+
};
|
|
48851
48850
|
|
|
48852
48851
|
const getConnectedInstance = ()=>{
|
|
48853
|
-
return
|
|
48852
|
+
return window._connectedWalletConnectInstance
|
|
48854
48853
|
};
|
|
48855
48854
|
|
|
48856
48855
|
class WalletConnectWallet {
|
|
@@ -48901,12 +48900,12 @@
|
|
|
48901
48900
|
});
|
|
48902
48901
|
|
|
48903
48902
|
instance.on("disconnect", (error, payload) => {
|
|
48904
|
-
|
|
48903
|
+
setConnectedInstance(undefined);
|
|
48905
48904
|
if (error) { throw error }
|
|
48906
48905
|
});
|
|
48907
48906
|
|
|
48908
48907
|
instance.on("modal_closed", ()=>{
|
|
48909
|
-
|
|
48908
|
+
setConnectedInstance(undefined);
|
|
48910
48909
|
this.connector = undefined;
|
|
48911
48910
|
});
|
|
48912
48911
|
|
|
@@ -48931,14 +48930,14 @@
|
|
|
48931
48930
|
|
|
48932
48931
|
if(this.connector.connected) {
|
|
48933
48932
|
await this.connector.killSession();
|
|
48934
|
-
|
|
48933
|
+
setConnectedInstance(undefined);
|
|
48935
48934
|
this.connector = this.newWalletConnectInstance();
|
|
48936
48935
|
}
|
|
48937
48936
|
|
|
48938
48937
|
const { accounts, chainId } = await this.connector.connect({ chainId: _optionalChain$6([options, 'optionalAccess', _ => _.chainId]) });
|
|
48939
48938
|
|
|
48940
48939
|
if(accounts instanceof Array && accounts.length) {
|
|
48941
|
-
|
|
48940
|
+
setConnectedInstance(this);
|
|
48942
48941
|
}
|
|
48943
48942
|
|
|
48944
48943
|
this.connectedAccounts = accounts;
|
|
@@ -49499,7 +49498,7 @@
|
|
|
49499
49498
|
});
|
|
49500
49499
|
|
|
49501
49500
|
var DialogStyle = (function (style) {
|
|
49502
|
-
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
|
|
49501
|
+
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 ";
|
|
49503
49502
|
});
|
|
49504
49503
|
|
|
49505
49504
|
var FontStyle = (function (style) {
|
|
@@ -62338,10 +62337,14 @@
|
|
|
62338
62337
|
class Currency {
|
|
62339
62338
|
constructor({ amount, code, timeZone = Currency.timeZone() }) {
|
|
62340
62339
|
this.amount = amount;
|
|
62341
|
-
this.code = code ||
|
|
62340
|
+
this.code = code || Currency.getCode(timeZone);
|
|
62342
62341
|
this.timeZone = timeZone;
|
|
62343
62342
|
}
|
|
62344
62343
|
|
|
62344
|
+
static getCode(timeZone) {
|
|
62345
|
+
return timezoneToCurrency[timeZone || Currency.timeZone()] || 'USD'
|
|
62346
|
+
}
|
|
62347
|
+
|
|
62345
62348
|
static async fromUSD({ amount, code, timeZone, apiKey }) {
|
|
62346
62349
|
let currency = new Currency({ amount, code, timeZone });
|
|
62347
62350
|
let rate = await fetch('https://api.depay.fi/v2/currencies/' + currency.code, {
|
package/dist/umd/index.js
CHANGED
|
@@ -1389,29 +1389,25 @@
|
|
|
1389
1389
|
return `
|
|
1390
1390
|
.ReactDialog {
|
|
1391
1391
|
bottom: 0;
|
|
1392
|
-
display:
|
|
1392
|
+
display: flex;
|
|
1393
1393
|
height: 100%;
|
|
1394
|
+
height: 100vh;
|
|
1394
1395
|
left: 0;
|
|
1396
|
+
min-height: 100%;
|
|
1397
|
+
min-height: 100vh;
|
|
1395
1398
|
overflow: hidden;
|
|
1396
|
-
position:
|
|
1399
|
+
position: fixed;
|
|
1397
1400
|
right: 0;
|
|
1398
1401
|
top: 0;
|
|
1399
|
-
user-select: none;
|
|
1400
|
-
width: 100%;
|
|
1401
|
-
}
|
|
1402
|
-
|
|
1403
|
-
.ReactDialogRow {
|
|
1404
|
-
display: table-row;
|
|
1405
|
-
height: 100%;
|
|
1406
1402
|
width: 100%;
|
|
1403
|
+
width: 100vw;
|
|
1407
1404
|
}
|
|
1408
1405
|
|
|
1409
|
-
.
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
text-align: center;
|
|
1406
|
+
.ReactDialogInner {
|
|
1407
|
+
align-items: center;
|
|
1408
|
+
display: flex;
|
|
1409
|
+
flex: 1;
|
|
1410
|
+
justify-content: center;
|
|
1415
1411
|
}
|
|
1416
1412
|
|
|
1417
1413
|
.ReactDialogBackground {
|
|
@@ -1500,11 +1496,9 @@
|
|
|
1500
1496
|
return (
|
|
1501
1497
|
React__default["default"].createElement('div', { className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName, lineNumber: 56}}
|
|
1502
1498
|
, 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
|
-
)
|
|
1499
|
+
, React__default["default"].createElement('div', { className: "ReactDialogInner", __self: this, __source: {fileName: _jsxFileName, lineNumber: 58}}
|
|
1500
|
+
, React__default["default"].createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName, lineNumber: 59}} )
|
|
1501
|
+
, this.props.children
|
|
1508
1502
|
)
|
|
1509
1503
|
)
|
|
1510
1504
|
)
|
|
@@ -1679,7 +1673,7 @@
|
|
|
1679
1673
|
});
|
|
1680
1674
|
|
|
1681
1675
|
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
|
|
1676
|
+
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
1677
|
});
|
|
1684
1678
|
|
|
1685
1679
|
var FontStyle = (function (style) {
|
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.1",
|
|
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,10 +34,10 @@
|
|
|
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
|
-
"@depay/walletconnect-v1": "^1.0
|
|
40
|
+
"@depay/walletconnect-v1": "^1.1.0",
|
|
41
41
|
"@depay/web3-assets": "^5.2.0",
|
|
42
42
|
"@depay/web3-blockchains": "^4.2.0",
|
|
43
43
|
"@depay/web3-client": "^8.0.0",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"@depay/web3-exchanges": "^8.1.0",
|
|
46
46
|
"@depay/web3-payments": "^9.3.3",
|
|
47
47
|
"@depay/web3-tokens": "^8.0.1",
|
|
48
|
-
"@depay/web3-wallets": "^9.0
|
|
48
|
+
"@depay/web3-wallets": "^9.1.0",
|
|
49
49
|
"decimal.js": "^10.3.1",
|
|
50
50
|
"react-rangeslider": "^2.2.0"
|
|
51
51
|
},
|