@foreverrbum/ethsign
Version:
This package will allow you to electronically sign documents within your application
350 lines (300 loc) • 17.2 kB
JavaScript
;
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Profile = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactIdenticons = _interopRequireDefault(require("react-identicons"));
var _reactCopyToClipboard = require("react-copy-to-clipboard");
var _email = require("../../../helpers/email");
var _chains = require("../../../helpers/chains");
var _network = require("../../../helpers/network");
var _bi_discord = _interopRequireDefault(require("../../../assets/bi_discord.svg"));
var _akarIcons_telegramFill = _interopRequireDefault(require("../../../assets/akar-icons_telegram-fill.svg"));
var _clarity_emailLine = _interopRequireDefault(require("../../../assets/clarity_email-line.svg"));
var _carret_down_black = _interopRequireDefault(require("../../../assets/carret_down_black.svg"));
var _reactIntl = require("react-intl");
var _wallets = require("../../../helpers/wallets/wallets");
var _dashboard = require("../../../helpers/dashboard");
var _this = void 0;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var Profile = function Profile(props) {
var _getMainNetChain, _getTestNetChain;
var web3 = props.web3,
fm = props.fm,
torus = props.torus,
changeNetwork = props.changeNetwork,
walletName = props.walletName;
var _useEmail = (0, _email.useEmail)(web3),
_useEmail2 = _slicedToArray(_useEmail, 2),
email = _useEmail2[0],
handleEmail = _useEmail2[1];
var _useUserInfo = (0, _email.useUserInfo)(web3),
ethAddress = _useUserInfo.ethAddress;
var _useState = (0, _react.useState)(null),
_useState2 = _slicedToArray(_useState, 2),
network = _useState2[0],
handleNetwork = _useState2[1];
var _useState3 = (0, _react.useState)(false),
_useState4 = _slicedToArray(_useState3, 2),
showNetworks = _useState4[0],
handleShowNetworks = _useState4[1];
var _useIntl = (0, _reactIntl.useIntl)(),
formatMessage = _useIntl.formatMessage;
(0, _react.useEffect)(function () {
var isSubscribed = true;
_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.prev = 0;
_context.t0 = handleNetwork;
_context.t1 = _chains.getChain;
_context.next = 5;
return web3.getNetwork();
case 5:
_context.t2 = _context.sent.chainId;
_context.t3 = (0, _context.t1)(_context.t2);
(0, _context.t0)(_context.t3);
handleShowNetworks(false);
_context.next = 14;
break;
case 11:
_context.prev = 11;
_context.t4 = _context["catch"](0);
console.log(_context.t4);
case 14:
case "end":
return _context.stop();
}
}
}, _callee, null, [[0, 11]]);
}))();
return function () {
return isSubscribed = false;
};
}, [web3]);
(0, _react.useEffect)(function () {
var networkDropdownListener = hideNetworkDropdown.bind(_this);
document.addEventListener('click', networkDropdownListener);
return function () {
return document.removeEventListener('click', networkDropdownListener);
};
}, [showNetworks]);
var hideNetworkDropdown = function hideNetworkDropdown(event) {
if (showNetworks) {
var networkDropdown = document.getElementById('network-dropdown');
if (!networkDropdown || event && !networkDropdown.contains(event.target)) {
handleShowNetworks(false);
}
}
};
var handleNetworkChange = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(chain) {
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
changeNetwork(chain);
case 1:
case "end":
return _context2.stop();
}
}
}, _callee2);
}));
return function handleNetworkChange(_x) {
return _ref2.apply(this, arguments);
};
}();
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
className: "px-4 w-full flex flex-col items-center justify-center max-w-5xl"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "flex flex-col sm:flex-row justify-around w-full mt-8"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "flex p-4 w-full sm:w-1/2 shadow rounded"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "identicon flex flex-col justify-center my-auto w-11 h-11 border border-orange-500 rounded-full"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "p-2"
}, /*#__PURE__*/_react.default.createElement(_reactIdenticons.default, {
string: ethAddress,
size: "25",
palette: ['#D7EEFF', '#eef2ff', '#991A1A', '#FFDECC', '#E98234', '#D98234', '#EE9F63', '#464648']
}))), /*#__PURE__*/_react.default.createElement("div", {
className: "flex flex-col justify-center ml-2"
}, /*#__PURE__*/_react.default.createElement("span", {
className: "font-bold mb-1"
}, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
id: "MY_ADDRESS"
})), /*#__PURE__*/_react.default.createElement("div", {
className: "flex"
}, /*#__PURE__*/_react.default.createElement("span", null, ethAddress), /*#__PURE__*/_react.default.createElement(_reactCopyToClipboard.CopyToClipboard, {
text: ethAddress
}, /*#__PURE__*/_react.default.createElement("div", {
className: "inline mb-1 cursor-pointer"
}, /*#__PURE__*/_react.default.createElement("svg", {
width: "15",
height: "17",
viewBox: "0 0 15 17",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/_react.default.createElement("path", {
d: "M13.4375 0.1875H3.49219C3.41055 0.1875 3.34375 0.254297 3.34375 0.335938V1.375C3.34375 1.45664 3.41055 1.52344 3.49219 1.52344H12.6953V14.2891C12.6953 14.3707 12.7621 14.4375 12.8438 14.4375H13.8828C13.9645 14.4375 14.0312 14.3707 14.0312 14.2891V0.78125C14.0312 0.452832 13.7659 0.1875 13.4375 0.1875ZM11.0625 2.5625H1.5625C1.23408 2.5625 0.96875 2.82783 0.96875 3.15625V13.0032C0.96875 13.1609 1.03184 13.3112 1.14316 13.4226L4.35869 16.6381C4.39951 16.6789 4.4459 16.7123 4.496 16.7401V16.7754H4.57393C4.63887 16.7995 4.70752 16.8125 4.77803 16.8125H11.0625C11.3909 16.8125 11.6562 16.5472 11.6562 16.2188V3.15625C11.6562 2.82783 11.3909 2.5625 11.0625 2.5625ZM4.49414 14.8865L2.89658 13.2871H4.49414V14.8865ZM10.3203 15.4766H5.68164V12.8418C5.68164 12.4317 5.34951 12.0996 4.93945 12.0996H2.30469V3.89844H10.3203V15.4766Z",
fill: "currentColor"
}))))))), /*#__PURE__*/_react.default.createElement("div", {
className: "flex flex-col p-4 w-full sm:w-2/5 shadow rounded mt-4 sm:mt-0"
}, /*#__PURE__*/_react.default.createElement("span", {
className: "font-bold"
}, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
id: "NETWORK_SELECTION"
})), /*#__PURE__*/_react.default.createElement("div", {
className: "select-none flex text-15 my-3 flex-wrap xs:flex-nowrap w-full"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "relative inline-block text-left flex-grow mb-2 xs:mb-0 mr-0 xs:mr-3 "
}, /*#__PURE__*/_react.default.createElement("div", {
onClick: function onClick() {
handleShowNetworks(!showNetworks);
}
}, /*#__PURE__*/_react.default.createElement("button", {
type: "button",
className: "cursor-pointer w-full bg-white flex inline-flex justify-center rounded-none border shadow-sm px-2 py-1.5 focus:outline-none",
id: "menu-button",
"aria-expanded": "true",
"aria-haspopup": "true"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "text-left"
}, network ? network.name : /*#__PURE__*/_react.default.createElement("span", {
className: "invisible"
}, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
id: "NO_NETWORK"
}))), /*#__PURE__*/_react.default.createElement("img", {
src: _carret_down_black.default,
className: "h-2 w-2 ml-auto my-auto"
}))), showNetworks && /*#__PURE__*/_react.default.createElement("div", {
id: "network-dropdown",
className: "origin-top-right absolute right-0 w-full rounded-sm shadow-lg bg-white ring-1 ring-gray-200 focus:outline-none",
role: "menu",
"aria-orientation": "vertical",
"aria-labelledby": "menu-button",
tabIndex: "-1"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "py-1",
role: "none"
}, /*#__PURE__*/_react.default.createElement("div", null, (_getMainNetChain = (0, _chains.getMainNetChain)()) === null || _getMainNetChain === void 0 ? void 0 : _getMainNetChain.map(function (chain, key) {
if (walletName === 'Fortmatic') {
if (!chain.fortmaticSupport) {
return null;
}
} else if (walletName === 'Torus') {
if (!chain.torusSupport) {
return null;
}
}
return /*#__PURE__*/_react.default.createElement("div", {
key: key,
onClick: function onClick() {
handleNetworkChange(chain);
},
className: "hover:bg-gray-25 cursor-pointer block px-4 py-2 text-sm",
role: "menuitem",
tabIndex: "-1"
}, chain.name);
})), /*#__PURE__*/_react.default.createElement("div", {
className: "border-t mx-4"
}), /*#__PURE__*/_react.default.createElement("div", null, (_getTestNetChain = (0, _chains.getTestNetChain)()) === null || _getTestNetChain === void 0 ? void 0 : _getTestNetChain.map(function (chain, key) {
if (walletName === 'Fortmatic') {
if (!chain.fortmaticSupport) {
return null;
}
} else if (walletName === 'Torus') {
if (!chain.torusSupport) {
return null;
}
}
return /*#__PURE__*/_react.default.createElement("div", {
key: key,
onClick: function onClick() {
handleNetworkChange(chain);
},
className: "hover:bg-gray-25 cursor-pointer block px-4 py-2 text-sm",
role: "menuitem",
tabIndex: "-1"
}, chain.name);
})))))))), /*#__PURE__*/_react.default.createElement("div", {
className: "border-t-2 border-gray-400 w-full my-16"
}), /*#__PURE__*/_react.default.createElement("div", {
className: "border-l-8 border-orange-500 shadow px-4 sm:px-8 py-4 w-full rounded flex flex-col"
}, /*#__PURE__*/_react.default.createElement("span", {
className: "font-bold"
}, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
id: "NOTIFICATION_MANAGEMENT"
})), /*#__PURE__*/_react.default.createElement("div", {
className: "my-8 flex flex-col "
}, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
id: "EMAIL_ADDRESS"
}), ":"), /*#__PURE__*/_react.default.createElement("div", {
className: "flex justify-between"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "flex flex-grow justify-center items-center border rounded focus:outline-none focus:border-orange-500 pl-1 w-full mt-2 mr-2 select-none"
}, /*#__PURE__*/_react.default.createElement("img", {
src: _clarity_emailLine.default,
alt: "Email",
className: "w-8 px-1"
}), /*#__PURE__*/_react.default.createElement("input", {
placeholder: formatMessage({
id: 'ENTER_YOUR_EMAIL'
}),
className: "py-1 pl-2 sm:pl-4 focus:outline-none w-full",
onChange: function onChange(evt) {
handleEmail(evt.target.value);
},
id: "email-input",
value: email
})), /*#__PURE__*/_react.default.createElement("button", {
className: "w-24 mt-2 font-bold flex-grow-0 bg-orange-500 focus:outline-none text-gray-40 py-3 rounded-sm hover:bg-orange-600 self-end select-none",
onClick: function onClick() {
if (!email || email.trim().length == 0) {
(0, _dashboard.storeNotif)(formatMessage({
id: 'INVALID_EMAIL'
}), formatMessage({
id: "INVALID_EMAIL_MESSAGE"
}), "danger");
return;
}
(0, _email.saveEmail)(web3, email.trim(), formatMessage).then(function (_ref3) {
var success = _ref3.success;
handleEmail(email);
});
}
}, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
id: "SAVE"
})))), /*#__PURE__*/_react.default.createElement("div", {
className: "my-8 flex items-center"
}, /*#__PURE__*/_react.default.createElement("span", {
className: "text-gray-200 self-center"
}, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
id: "MORE_NOTIFICATION_METHODS_COMING_SOON"
})), /*#__PURE__*/_react.default.createElement("img", {
src: _bi_discord.default,
alt: "discord",
className: "w-6 mx-4 self-center select-none"
}), /*#__PURE__*/_react.default.createElement("img", {
src: _akarIcons_telegramFill.default,
alt: "akar",
className: "w-6 self-center select-none"
})))));
};
exports.Profile = Profile;