@depay/widgets 5.1.0 → 6.1.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 +57 -5
- package/dist/{es → esm}/index.bundle.js +1448 -4382
- package/dist/{es → esm}/index.js +182 -5
- package/dist/umd/index.bundle.js +1448 -4382
- package/dist/umd/index.js +182 -5
- package/package.json +10 -9
- package/dist/cjs/index.bundle.js +0 -74205
- package/dist/cjs/index.js +0 -4496
package/dist/umd/index.js
CHANGED
|
@@ -991,12 +991,25 @@
|
|
|
991
991
|
});
|
|
992
992
|
|
|
993
993
|
var ConnectingWalletDialog = (function (props) {
|
|
994
|
+
var _useState = React.useState(false),
|
|
995
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
996
|
+
showConnectButton = _useState2[0],
|
|
997
|
+
setShowConnectButton = _useState2[1];
|
|
998
|
+
|
|
994
999
|
var _useContext = React.useContext(reactDialogStack.NavigateStackContext),
|
|
995
1000
|
navigate = _useContext.navigate;
|
|
996
1001
|
|
|
997
1002
|
var wallet = props.wallet;
|
|
998
1003
|
wallet !== null && wallet !== void 0 && wallet.name ? wallet.name : 'wallet';
|
|
999
1004
|
var walletLogo = wallet !== null && wallet !== void 0 && wallet.logo ? wallet.logo : undefined;
|
|
1005
|
+
React.useEffect(function () {
|
|
1006
|
+
var timeout = setTimeout(function () {
|
|
1007
|
+
return setShowConnectButton(true);
|
|
1008
|
+
}, 10000);
|
|
1009
|
+
return function () {
|
|
1010
|
+
return clearTimeout(timeout);
|
|
1011
|
+
};
|
|
1012
|
+
}, []);
|
|
1000
1013
|
|
|
1001
1014
|
if (props.pending) {
|
|
1002
1015
|
return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
|
|
@@ -1036,7 +1049,7 @@
|
|
|
1036
1049
|
},
|
|
1037
1050
|
className: "TextButton"
|
|
1038
1051
|
}, "Connect with another wallet")))),
|
|
1039
|
-
footer: /*#__PURE__*/React__default$1["default"].createElement("div", {
|
|
1052
|
+
footer: showConnectButton && /*#__PURE__*/React__default$1["default"].createElement("div", {
|
|
1040
1053
|
className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
|
|
1041
1054
|
}, /*#__PURE__*/React__default$1["default"].createElement("button", {
|
|
1042
1055
|
className: "ButtonPrimary",
|
|
@@ -1114,8 +1127,10 @@
|
|
|
1114
1127
|
}
|
|
1115
1128
|
|
|
1116
1129
|
var walletCards = availableWallets.map(function (wallet, index) {
|
|
1117
|
-
return /*#__PURE__*/React__default$1["default"].createElement("
|
|
1130
|
+
return /*#__PURE__*/React__default$1["default"].createElement("div", {
|
|
1118
1131
|
key: index,
|
|
1132
|
+
className: "PaddingBottomXS"
|
|
1133
|
+
}, /*#__PURE__*/React__default$1["default"].createElement("button", {
|
|
1119
1134
|
className: "Card small",
|
|
1120
1135
|
title: "Connect ".concat(wallet.name),
|
|
1121
1136
|
onClick: function onClick() {
|
|
@@ -1131,7 +1146,7 @@
|
|
|
1131
1146
|
className: "CardBodyWrapper PaddingLeftXS"
|
|
1132
1147
|
}, /*#__PURE__*/React__default$1["default"].createElement("h2", {
|
|
1133
1148
|
className: "CardText FontWeightBold"
|
|
1134
|
-
}, wallet.name))));
|
|
1149
|
+
}, wallet.name)))));
|
|
1135
1150
|
});
|
|
1136
1151
|
return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
|
|
1137
1152
|
header: /*#__PURE__*/React__default$1["default"].createElement("div", {
|
|
@@ -1663,7 +1678,7 @@
|
|
|
1663
1678
|
});
|
|
1664
1679
|
|
|
1665
1680
|
var DialogStyle = (function (style) {
|
|
1666
|
-
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 }\n\n @media screen and (max-width: 450px) {\n \n .Dialog, .ReactDialogAnimation {\n width: 100%;\n }\n\n }\n\n @media (orientation: portrait) and (max-width: 900px) {\n\n .Dialog {\n align-content: stretch;\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n max-height:
|
|
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 }\n\n @media screen and (max-width: 450px) {\n \n .Dialog, .ReactDialogAnimation {\n width: 100%;\n }\n\n }\n\n @media (orientation: portrait) and (max-width: 900px) {\n\n .Dialog {\n align-content: stretch;\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n max-height: 60vh !important;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogStackCell {\n vertical-align: bottom;\n }\n\n .ReactDialogAnimation {\n bottom: -100px !important;\n max-height: 66vh !important;\n top: inherit !important;\n transition: opacity 0.4s ease, bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.HeightAuto {\n height: auto;\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 display: flex;\n flex-direction: row;\n position: relative;\n }\n\n .DialogHeaderTitle {\n flex-basis: auto;\n flex-grow: 1;\n }\n \n .DialogHeaderAction {\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 .ReactShadowDOMInsideContainer > .ReactDialog {\n display: table;\n }\n\n ";
|
|
1667
1682
|
});
|
|
1668
1683
|
|
|
1669
1684
|
var FontStyle = (function (style) {
|
|
@@ -3766,6 +3781,167 @@
|
|
|
3766
3781
|
};
|
|
3767
3782
|
}();
|
|
3768
3783
|
|
|
3784
|
+
var SignLoginDialog = (function (props) {
|
|
3785
|
+
var _useContext = React.useContext(ErrorContext),
|
|
3786
|
+
setError = _useContext.setError;
|
|
3787
|
+
|
|
3788
|
+
var _useState = React.useState(false),
|
|
3789
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
3790
|
+
showSignButton = _useState2[0],
|
|
3791
|
+
setShowSignButton = _useState2[1];
|
|
3792
|
+
|
|
3793
|
+
var _useContext2 = React.useContext(ConfigurationContext),
|
|
3794
|
+
message = _useContext2.message,
|
|
3795
|
+
endpoint = _useContext2.endpoint;
|
|
3796
|
+
|
|
3797
|
+
var wallet = web3Wallets.getWallet();
|
|
3798
|
+
wallet !== null && wallet !== void 0 && wallet.name ? wallet.name : 'wallet';
|
|
3799
|
+
var walletLogo = wallet !== null && wallet !== void 0 && wallet.logo ? wallet.logo : undefined;
|
|
3800
|
+
|
|
3801
|
+
var login = function login() {
|
|
3802
|
+
wallet.sign(message).then(function (signature) {
|
|
3803
|
+
fetch(endpoint, {
|
|
3804
|
+
method: 'POST',
|
|
3805
|
+
body: JSON.stringify({
|
|
3806
|
+
message: message,
|
|
3807
|
+
signature: signature
|
|
3808
|
+
})
|
|
3809
|
+
}).then(function (response) {
|
|
3810
|
+
if (response.status == 200) {
|
|
3811
|
+
response.text().then(function (account) {
|
|
3812
|
+
props.resolve(account);
|
|
3813
|
+
})["catch"](setError);
|
|
3814
|
+
} else {
|
|
3815
|
+
response.text().then(function (text) {
|
|
3816
|
+
setError(text || 'Recovering login signature failed!');
|
|
3817
|
+
});
|
|
3818
|
+
}
|
|
3819
|
+
})["catch"](setError);
|
|
3820
|
+
})["catch"](setError);
|
|
3821
|
+
};
|
|
3822
|
+
|
|
3823
|
+
React.useEffect(login, []);
|
|
3824
|
+
React.useEffect(function () {
|
|
3825
|
+
var timeout = setTimeout(function () {
|
|
3826
|
+
return setShowSignButton(true);
|
|
3827
|
+
}, 10000);
|
|
3828
|
+
return function () {
|
|
3829
|
+
return clearTimeout(timeout);
|
|
3830
|
+
};
|
|
3831
|
+
}, []);
|
|
3832
|
+
return /*#__PURE__*/React__default$1["default"].createElement(Dialog$1, {
|
|
3833
|
+
stacked: true,
|
|
3834
|
+
body: /*#__PURE__*/React__default$1["default"].createElement("div", null, walletLogo && /*#__PURE__*/React__default$1["default"].createElement("div", {
|
|
3835
|
+
className: "GraphicWrapper PaddingTopS PaddingBottomS"
|
|
3836
|
+
}, /*#__PURE__*/React__default$1["default"].createElement("img", {
|
|
3837
|
+
className: "Graphic",
|
|
3838
|
+
src: walletLogo
|
|
3839
|
+
})), /*#__PURE__*/React__default$1["default"].createElement("h1", {
|
|
3840
|
+
className: "LineHeightL Text FontSizeL FontWeightBold PaddingTopS"
|
|
3841
|
+
}, "Wallet Login"), /*#__PURE__*/React__default$1["default"].createElement("div", {
|
|
3842
|
+
className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
|
|
3843
|
+
}, /*#__PURE__*/React__default$1["default"].createElement("p", {
|
|
3844
|
+
className: "FontSizeM PaddingLeftM PaddingRightM"
|
|
3845
|
+
}, "Please sign the login message with your connected wallet."))),
|
|
3846
|
+
footer: showSignButton && /*#__PURE__*/React__default$1["default"].createElement("div", {
|
|
3847
|
+
className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
|
|
3848
|
+
}, /*#__PURE__*/React__default$1["default"].createElement("button", {
|
|
3849
|
+
className: "ButtonPrimary",
|
|
3850
|
+
onClick: login
|
|
3851
|
+
}, "Log in"))
|
|
3852
|
+
});
|
|
3853
|
+
});
|
|
3854
|
+
|
|
3855
|
+
var LoginStack = (function (props) {
|
|
3856
|
+
var _useContext = React.useContext(ClosableContext),
|
|
3857
|
+
open = _useContext.open,
|
|
3858
|
+
close = _useContext.close;
|
|
3859
|
+
|
|
3860
|
+
var _useState = React.useState(true),
|
|
3861
|
+
_useState2 = _slicedToArray(_useState, 2);
|
|
3862
|
+
_useState2[0];
|
|
3863
|
+
_useState2[1];
|
|
3864
|
+
|
|
3865
|
+
return /*#__PURE__*/React__default$1["default"].createElement(reactDialogStack.ReactDialogStack, {
|
|
3866
|
+
open: open,
|
|
3867
|
+
close: close,
|
|
3868
|
+
start: "SignLogin",
|
|
3869
|
+
container: props.container,
|
|
3870
|
+
document: props.document,
|
|
3871
|
+
dialogs: {
|
|
3872
|
+
SignLogin: /*#__PURE__*/React__default$1["default"].createElement(SignLoginDialog, {
|
|
3873
|
+
resolve: props.resolve
|
|
3874
|
+
})
|
|
3875
|
+
}
|
|
3876
|
+
});
|
|
3877
|
+
});
|
|
3878
|
+
|
|
3879
|
+
var Login = function Login(options) {
|
|
3880
|
+
var style, error, document, message, endpoint;
|
|
3881
|
+
|
|
3882
|
+
if (_typeof(options) == 'object') {
|
|
3883
|
+
style = options.style;
|
|
3884
|
+
error = options.error;
|
|
3885
|
+
document = options.document;
|
|
3886
|
+
message = options.message;
|
|
3887
|
+
endpoint = options.endpoint;
|
|
3888
|
+
}
|
|
3889
|
+
|
|
3890
|
+
return new Promise( /*#__PURE__*/function () {
|
|
3891
|
+
var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(_resolve, reject) {
|
|
3892
|
+
return regenerator.wrap(function _callee$(_context) {
|
|
3893
|
+
while (1) {
|
|
3894
|
+
switch (_context.prev = _context.next) {
|
|
3895
|
+
case 0:
|
|
3896
|
+
Connect().then(function () {
|
|
3897
|
+
mount({
|
|
3898
|
+
style: style,
|
|
3899
|
+
document: ensureDocument(document)
|
|
3900
|
+
}, function (unmount) {
|
|
3901
|
+
var rejectBeforeUnmount = function rejectBeforeUnmount() {
|
|
3902
|
+
reject('USER_CLOSED_DIALOG');
|
|
3903
|
+
unmount();
|
|
3904
|
+
};
|
|
3905
|
+
|
|
3906
|
+
return function (container) {
|
|
3907
|
+
return /*#__PURE__*/React__default$1["default"].createElement(ErrorProvider, {
|
|
3908
|
+
error: error,
|
|
3909
|
+
container: container,
|
|
3910
|
+
unmount: unmount
|
|
3911
|
+
}, /*#__PURE__*/React__default$1["default"].createElement(ConfigurationProvider, {
|
|
3912
|
+
configuration: {
|
|
3913
|
+
message: message,
|
|
3914
|
+
endpoint: endpoint || '/login'
|
|
3915
|
+
}
|
|
3916
|
+
}, /*#__PURE__*/React__default$1["default"].createElement(UpdatableProvider, null, /*#__PURE__*/React__default$1["default"].createElement(ClosableProvider, {
|
|
3917
|
+
unmount: rejectBeforeUnmount
|
|
3918
|
+
}, /*#__PURE__*/React__default$1["default"].createElement(LoginStack, {
|
|
3919
|
+
document: document,
|
|
3920
|
+
container: container,
|
|
3921
|
+
resolve: function resolve(account) {
|
|
3922
|
+
unmount();
|
|
3923
|
+
|
|
3924
|
+
_resolve(account);
|
|
3925
|
+
}
|
|
3926
|
+
}), /*#__PURE__*/React__default$1["default"].createElement(PoweredBy, null)))));
|
|
3927
|
+
};
|
|
3928
|
+
});
|
|
3929
|
+
})["catch"](reject);
|
|
3930
|
+
|
|
3931
|
+
case 1:
|
|
3932
|
+
case "end":
|
|
3933
|
+
return _context.stop();
|
|
3934
|
+
}
|
|
3935
|
+
}
|
|
3936
|
+
}, _callee);
|
|
3937
|
+
}));
|
|
3938
|
+
|
|
3939
|
+
return function (_x, _x2) {
|
|
3940
|
+
return _ref.apply(this, arguments);
|
|
3941
|
+
};
|
|
3942
|
+
}());
|
|
3943
|
+
};
|
|
3944
|
+
|
|
3769
3945
|
var PaymentAmountRoutingContext = /*#__PURE__*/React__default$1["default"].createContext();
|
|
3770
3946
|
|
|
3771
3947
|
var PaymentAmountRoutingProvider = (function (props) {
|
|
@@ -4474,9 +4650,10 @@
|
|
|
4474
4650
|
|
|
4475
4651
|
var DePayWidgets = {
|
|
4476
4652
|
Connect: Connect,
|
|
4653
|
+
Donation: Donation,
|
|
4654
|
+
Login: Login,
|
|
4477
4655
|
Payment: Payment,
|
|
4478
4656
|
Sale: Sale,
|
|
4479
|
-
Donation: Donation,
|
|
4480
4657
|
provider: web3Client.provider
|
|
4481
4658
|
};
|
|
4482
4659
|
|
package/package.json
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@depay/widgets",
|
|
3
3
|
"moduleName": "DePayWidgets",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "6.1.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
|
-
"main": "./dist/
|
|
6
|
+
"main": "./dist/umd/index.js",
|
|
7
|
+
"module": "./dist/esm/index.js",
|
|
7
8
|
"files": [
|
|
8
9
|
"dist"
|
|
9
10
|
],
|
|
@@ -20,7 +21,7 @@
|
|
|
20
21
|
"author": "DePay",
|
|
21
22
|
"license": "MIT",
|
|
22
23
|
"scripts": {
|
|
23
|
-
"build": "npx rollup --config rollup.module.config.js && npx rollup --config rollup.bundle.config.js",
|
|
24
|
+
"build": "rm -rf dist && npx rollup --config rollup.module.config.js && npx rollup --config rollup.bundle.config.js",
|
|
24
25
|
"lint": "eslint \"src/**/*.{js,ts,tsx}\"",
|
|
25
26
|
"lint:fix": "eslint \"src/**/*.{js,ts,tsx}\" --fix",
|
|
26
27
|
"format": "prettier src --write",
|
|
@@ -36,15 +37,15 @@
|
|
|
36
37
|
"@depay/react-dialog-stack": "^3.0.1",
|
|
37
38
|
"@depay/react-shadow-dom": "^3.0.0",
|
|
38
39
|
"@depay/react-token-image": "^2.1.0",
|
|
39
|
-
"@depay/walletconnect-v1": "^1.0.
|
|
40
|
-
"@depay/web3-assets": "^
|
|
40
|
+
"@depay/walletconnect-v1": "^1.0.18",
|
|
41
|
+
"@depay/web3-assets": "^5.0.0",
|
|
41
42
|
"@depay/web3-blockchains": "^3.0.0",
|
|
42
43
|
"@depay/web3-client": "^7.2.0",
|
|
43
44
|
"@depay/web3-constants": "^4.0.1",
|
|
44
|
-
"@depay/web3-exchanges": "^
|
|
45
|
-
"@depay/web3-payments": "^
|
|
45
|
+
"@depay/web3-exchanges": "^8.0.0",
|
|
46
|
+
"@depay/web3-payments": "^9.0.2",
|
|
46
47
|
"@depay/web3-tokens": "^7.2.0",
|
|
47
|
-
"@depay/web3-wallets": "^
|
|
48
|
+
"@depay/web3-wallets": "^7.2.0",
|
|
48
49
|
"decimal.js": "^10.3.1",
|
|
49
50
|
"react-rangeslider": "^2.2.0"
|
|
50
51
|
},
|
|
@@ -59,7 +60,7 @@
|
|
|
59
60
|
"@babel/preset-env": "^7.12.7",
|
|
60
61
|
"@babel/preset-react": "^7.12.7",
|
|
61
62
|
"@cypress/react": "^5.9.1",
|
|
62
|
-
"@depay/web3-mock": "^9.
|
|
63
|
+
"@depay/web3-mock": "^9.6.0",
|
|
63
64
|
"@rollup/plugin-babel": "^5.3.0",
|
|
64
65
|
"@rollup/plugin-commonjs": "^17.1.0",
|
|
65
66
|
"@rollup/plugin-node-resolve": "^11.1.1",
|