UNPKG

@foreverrbum/ethsign

Version:

This package will allow you to electronically sign documents within your application

670 lines (550 loc) 29.7 kB
"use strict"; 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.default = void 0; var _react = _interopRequireWildcard(require("react")); var _reactRouterDom = require("react-router-dom"); var _ethers = require("ethers"); var _reactIntl = require("react-intl"); var _VerificationForm = _interopRequireDefault(require("./VerificationForm")); var _verification = _interopRequireDefault(require("../assets/verification.svg")); var _graphql = require("../helpers/graphql"); var _VerificationDetails = _interopRequireDefault(require("./VerificationDetails")); var _dashboard = require("../helpers/dashboard"); var _History = _interopRequireDefault(require("./History")); 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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; } 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; } function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure undefined"); } var VerifyContract = function VerifyContract(props) { _objectDestructuringEmpty(props); var _useState = (0, _react.useState)(false), _useState2 = _slicedToArray(_useState, 2), showContractVerification = _useState2[0], handleShowContractVerification = _useState2[1]; var _useState3 = (0, _react.useState)(false), _useState4 = _slicedToArray(_useState3, 2), showContractHistory = _useState4[0], handleShowContractHistory = _useState4[1]; var _useState5 = (0, _react.useState)(false), _useState6 = _slicedToArray(_useState5, 2), loading = _useState6[0], handleLoading = _useState6[1]; var _useState7 = (0, _react.useState)(null), _useState8 = _slicedToArray(_useState7, 2), gqlResult = _useState8[0], handleGqlResult = _useState8[1]; var _useState9 = (0, _react.useState)(null), _useState10 = _slicedToArray(_useState9, 2), docKey = _useState10[0], handleDocKey = _useState10[1]; var _useState11 = (0, _react.useState)(null), _useState12 = _slicedToArray(_useState11, 2), signersAddress = _useState12[0], handleSignersAddress = _useState12[1]; var _useState13 = (0, _react.useState)(1), _useState14 = _slicedToArray(_useState13, 2), networkId = _useState14[0], handleNetworkId = _useState14[1]; var _useState15 = (0, _react.useState)(null), _useState16 = _slicedToArray(_useState15, 2), verifyData = _useState16[0], handleVerifyData = _useState16[1]; var _useState17 = (0, _react.useState)(false), _useState18 = _slicedToArray(_useState17, 2), ensEnabled = _useState18[0], handleEnsEnabled = _useState18[1]; var _useState19 = (0, _react.useState)(null), _useState20 = _slicedToArray(_useState19, 2), historySave = _useState20[0], handleHistorySave = _useState20[1]; var _useState21 = (0, _react.useState)(null), _useState22 = _slicedToArray(_useState21, 2), historySavedCards = _useState22[0], handleHistorySavedCards = _useState22[1]; var _useState23 = (0, _react.useState)(null), _useState24 = _slicedToArray(_useState23, 2), previousHistoryDocKey = _useState24[0], handlePreviousHistoryDocKey = _useState24[1]; var _useState25 = (0, _react.useState)(null), _useState26 = _slicedToArray(_useState25, 2), provider = _useState26[0], handleProvider = _useState26[1]; var _useState27 = (0, _react.useState)(null), _useState28 = _slicedToArray(_useState27, 2), contract = _useState28[0], handleContract = _useState28[1]; // 0 = Verification Form // 1 = Verification Details // 2 = Document History - unreachable at the moment var _useState29 = (0, _react.useState)(0), _useState30 = _slicedToArray(_useState29, 2), lastMenu = _useState30[0], handleLastMenu = _useState30[1]; var _useIntl = (0, _reactIntl.useIntl)(), formatMessage = _useIntl.formatMessage; // NOTE: I'm keeping this here for reference if we decide to re-implement it in the future. // useEffect(() => { // // Detect the current network and update the network dropdown menu // if (typeof window !== "undefined" && typeof window.ethereum !== "undefined" ) { // if (window.ethereum.isMetaMask || window.ethereum.isTorus || window.ethereum.isImToken){ // window.ethereum.request({ method: 'eth_requestAccounts' }).then(async()=>{ // const provider = new ethers.providers.Web3Provider(window.ethereum); // const network = await provider.getNetwork(); // handleNetworkId(network.chainId); // }); // } // } // }, []); (0, _react.useEffect)(function () { if (networkId == 1 || networkId == 3) { handleEnsEnabled(true); } else { handleEnsEnabled(false); } }, [networkId]); var goBack = function goBack() { switch (lastMenu) { case 0: // Verification Form handleShowContractVerification(false); handleShowContractHistory(false); break; case 1: // Verification Details handleLastMenu(0); handleShowContractVerification(true); handleShowContractHistory(false); break; case 2: // Document History // This is the final step, and is unreachable. break; } }; var verifySignature = /*#__PURE__*/function () { var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(chainId, docKey, signerAddress) { return regeneratorRuntime.wrap(function _callee3$(_context3) { while (1) { switch (_context3.prev = _context3.next) { case 0: handleLoading(true); handleDocKey(docKey); handleSignersAddress(signerAddress); handleNetworkId(chainId); _context3.next = 6; return (0, _dashboard.getLoggedOutWeb3Credentials)(chainId).then( /*#__PURE__*/function () { var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(result) { var _result2; return regeneratorRuntime.wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { case 0: handleProvider(result.provider); handleContract(result.contract); if (!(chainId == 1 || chainId == 3)) { _context2.next = 7; break; } _context2.next = 5; return result.provider.resolveName(signerAddress).then( /*#__PURE__*/function () { var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(address) { var _result; return regeneratorRuntime.wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { case 0: if (address) { _context.next = 5; break; } (0, _dashboard.storeNotif)(formatMessage({ id: 'SIGNATURE_INVALID' }), formatMessage({ id: 'ENTERED_SIGNERS_ADDRESS_NO_MATCH' }), "warning"); handleGqlResult(null); _context.next = 14; break; case 5: address = address.toLowerCase(); if (!_ethers.ethers.utils.isAddress(address)) { _context.next = 13; break; } _context.next = 9; return (0, _graphql.validateSignature)(chainId, docKey, address); case 9: _result = _context.sent; if ((_result === null || _result === void 0 ? void 0 : _result.status) > 0) { handleGqlResult(_result); handleLastMenu(0); handleShowContractVerification(true); // We may want to provide users with an option to enter another address rather than just clearing the data // handleDocKey(null); // handleSignersAddress(null); // handleNetworkId(1); } else { (0, _dashboard.storeNotif)(formatMessage({ id: 'SIGNATURE_INVALID' }), formatMessage({ id: 'ENTERED_SIGNERS_ADDRESS_NO_MATCH' }), "warning"); handleGqlResult(null); } _context.next = 14; break; case 13: (0, _dashboard.storeNotif)(formatMessage({ id: 'ERROR' }), formatMessage({ id: 'THE_ADDRESS_YOU_ENTER_IS_INVALID' }), "warning"); case 14: case "end": return _context.stop(); } } }, _callee); })); return function (_x5) { return _ref3.apply(this, arguments); }; }()); case 5: _context2.next = 11; break; case 7: _context2.next = 9; return (0, _graphql.validateSignature)(chainId, docKey, signerAddress); case 9: _result2 = _context2.sent; if ((_result2 === null || _result2 === void 0 ? void 0 : _result2.status) > 0) { handleGqlResult(_result2); handleLastMenu(0); handleShowContractVerification(true); // We may want to provide users with an option to enter another address rather than just clearing the data // handleDocKey(null); // handleSignersAddress(null); // handleNetworkId(1); } else { (0, _dashboard.storeNotif)(formatMessage({ id: 'SIGNATURE_INVALID' }), formatMessage({ id: 'ENTERED_SIGNERS_ADDRESS_NO_MATCH' }), "warning"); handleGqlResult(null); } case 11: case "end": return _context2.stop(); } } }, _callee2); })); return function (_x4) { return _ref2.apply(this, arguments); }; }()); case 6: handleLoading(false); case 7: case "end": return _context3.stop(); } } }, _callee3); })); return function verifySignature(_x, _x2, _x3) { return _ref.apply(this, arguments); }; }(); var loadContractHistory = /*#__PURE__*/function () { var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(chainId, signerAddress, docKey, lastMenu) { var doc, initiatorIndex, initiator, verifyData; return regeneratorRuntime.wrap(function _callee5$(_context5) { while (1) { switch (_context5.prev = _context5.next) { case 0: if (!(historySave && historySavedCards && previousHistoryDocKey == docKey)) { _context5.next = 9; break; } handleLastMenu(lastMenu); handleSignersAddress(signerAddress); handleShowContractHistory(true); handleShowContractVerification(false); handleLoading(false); return _context5.abrupt("return"); case 9: if (historySave) { handleHistorySave(null); } if (historySavedCards) { handleHistorySavedCards(null); } case 11: handleDocKey(docKey); handleSignersAddress(signerAddress); handleNetworkId(chainId); // Show the loading animation until the document history data can be loaded and sent to the component if ((docKey === null || docKey === void 0 ? void 0 : docKey.length) > 0) { _context5.next = 17; break; } (0, _dashboard.storeNotif)(formatMessage({ id: 'INVALID_DOCUMENT_KEY' }), formatMessage({ id: 'PLEASE_ENTER_DOC_KEY' }), "danger"); return _context5.abrupt("return"); case 17: handleLoading(true); doc = null; _context5.next = 21; return (0, _dashboard.getLoggedOutWeb3Credentials)(chainId).then( /*#__PURE__*/function () { var _ref5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(result) { var _iterator, _step, signer, alias, resolver; return regeneratorRuntime.wrap(function _callee4$(_context4) { while (1) { switch (_context4.prev = _context4.next) { case 0: handleProvider(result.provider); handleContract(result.contract); _context4.next = 4; return (0, _graphql.loadContractDetails)(chainId, docKey, result.provider, null); case 4: doc = _context4.sent; if (!(doc == null)) { _context4.next = 11; break; } (0, _dashboard.storeNotif)(formatMessage({ id: 'INVALID_DOCUMENT_KEY' }), formatMessage({ id: 'DOC_KEY_NETWORK_SELECTION_INVALID' }), "warning"); handleGqlResult(null); handleShowContractHistory(false); handleLoading(false); return _context4.abrupt("return"); case 11: if (!ensEnabled) { _context4.next = 44; break; } _context4.prev = 12; _iterator = _createForOfIteratorHelper(doc.signers); _context4.prev = 14; _iterator.s(); case 16: if ((_step = _iterator.n()).done) { _context4.next = 31; break; } signer = _step.value; _context4.next = 20; return result.provider.lookupAddress(signer.address); case 20: alias = _context4.sent; if (alias) { signer.alias = alias; } _context4.next = 24; return result.provider.getResolver(alias); case 24: resolver = _context4.sent; if (!resolver) { _context4.next = 29; break; } _context4.next = 28; return resolver.getText("avatar"); case 28: signer.avatar = _context4.sent; case 29: _context4.next = 16; break; case 31: _context4.next = 36; break; case 33: _context4.prev = 33; _context4.t0 = _context4["catch"](14); _iterator.e(_context4.t0); case 36: _context4.prev = 36; _iterator.f(); return _context4.finish(36); case 39: _context4.next = 44; break; case 41: _context4.prev = 41; _context4.t1 = _context4["catch"](12); console.log(_context4.t1); case 44: case "end": return _context4.stop(); } } }, _callee4, null, [[12, 41], [14, 33, 36, 39]]); })); return function (_x10) { return _ref5.apply(this, arguments); }; }()).catch(function (e) { console.log(e); }); case 21: if (!(doc == null)) { _context5.next = 23; break; } return _context5.abrupt("return"); case 23: initiatorIndex = _.findIndex(doc.signers, function (o) { return o.address == doc.initiator; }); initiator = null; if (initiatorIndex > -1) { initiator = doc.signers[initiatorIndex]; } else { initiator = { address: doc.initiator, avatar: null, alias: null }; } verifyData = { doc: doc, networkId: chainId, initiator: initiator }; handleVerifyData(verifyData); // Once everything has been loaded, we will handleShowContractHistory(true); handlePreviousHistoryDocKey(docKey); handleLastMenu(lastMenu); handleShowContractHistory(true); handleShowContractVerification(false); handleLoading(false); case 33: case "end": return _context5.stop(); } } }, _callee5); })); return function loadContractHistory(_x6, _x7, _x8, _x9) { return _ref4.apply(this, arguments); }; }(); if (showContractVerification) { return /*#__PURE__*/_react.default.createElement("div", { className: "bg-gray-400" }, /*#__PURE__*/_react.default.createElement("div", { className: "flex flex-col-reverse sm:flex-row section-2" }, /*#__PURE__*/_react.default.createElement("div", { className: "w-full sm:w-1/2 py-8 px-8 sm:px-0 sm:py-8 sm:pl-8 md:py-12 md:pl-12 lg:py-24 lg:pl-24" }, /*#__PURE__*/_react.default.createElement("h1", { className: "heading" }, formatMessage({ id: 'DIGITAL_SIGNATURE_VALIDATION' })), /*#__PURE__*/_react.default.createElement("p", null, formatMessage({ id: 'VALIDATE_AND_AUDIT' }))), /*#__PURE__*/_react.default.createElement("div", { className: "flex ml-auto sm:w-1/2" }, /*#__PURE__*/_react.default.createElement("img", { src: _verification.default, className: "select-none w-full max-w-xs sm:max-w-md ml-auto" }))), /*#__PURE__*/_react.default.createElement("div", { className: "px-4 sm:px-8 md:px-12 lg:px-24 pb-4 sm:pb-8 md:pb-12 lg:pb-24" }, /*#__PURE__*/_react.default.createElement(_VerificationDetails.default, { loading: loading, gqlResult: gqlResult, loadContractHistory: loadContractHistory, goBack: goBack }))); } if (showContractHistory) { return /*#__PURE__*/_react.default.createElement("div", { className: "bg-gray-400" }, /*#__PURE__*/_react.default.createElement("div", { className: "flex flex-col-reverse sm:flex-row section-2" }, /*#__PURE__*/_react.default.createElement("div", { className: "w-full sm:w-1/2 py-8 px-8 sm:px-0 sm:py-8 sm:pl-8 md:py-12 md:pl-12 lg:py-24 lg:pl-24" }, /*#__PURE__*/_react.default.createElement("h1", { className: "heading" }, formatMessage({ id: 'DIGITAL_SIGNATURE_VALIDATION' })), /*#__PURE__*/_react.default.createElement("p", null, formatMessage({ id: 'VALIDATE_AND_AUDIT' }))), /*#__PURE__*/_react.default.createElement("div", { className: "flex ml-auto sm:w-1/2" }, /*#__PURE__*/_react.default.createElement("img", { src: _verification.default, className: "select-none w-full max-w-xs sm:max-w-md ml-auto" }))), /*#__PURE__*/_react.default.createElement("div", { className: "px-4 sm:px-8 md:px-12 lg:px-24 pb-4 sm:pb-8 md:pb-12 lg:pb-24" }, /*#__PURE__*/_react.default.createElement("div", { className: "flex" }, /*#__PURE__*/_react.default.createElement("div", { className: "m-auto w-full flex justify-center" }, /*#__PURE__*/_react.default.createElement("div", { onClick: function onClick(event) { return event.stopPropagation(); }, className: "w-full bg-gray-45 sm:border-t-4 border-t-8 border-orange-500 sm:rounded-none rounded-lg shadow-md sm:shadow-none" }, /*#__PURE__*/_react.default.createElement(_History.default, { fromVerify: true, verifyData: verifyData, web3: provider, contract: contract, ensEnabled: ensEnabled, goBack: goBack, shouldSave: true, fromSave: historySave !== null, save: historySave, handleSave: handleHistorySave, savedCards: historySavedCards, handleSavedCards: handleHistorySavedCards })))))); } return /*#__PURE__*/_react.default.createElement("div", { className: "bg-gray-400" }, /*#__PURE__*/_react.default.createElement("div", { className: "flex flex-col-reverse sm:flex-row section-2" }, /*#__PURE__*/_react.default.createElement("div", { className: "w-full sm:w-1/2 py-8 px-8 sm:px-0 sm:py-8 sm:pl-8 md:py-12 md:pl-12 lg:py-24 lg:pl-24" }, /*#__PURE__*/_react.default.createElement("h1", { className: "heading" }, formatMessage({ id: 'DIGITAL_SIGNATURE_VALIDATION' })), /*#__PURE__*/_react.default.createElement("p", null, formatMessage({ id: 'VALIDATE_AND_AUDIT' }))), /*#__PURE__*/_react.default.createElement("div", { className: "flex ml-auto sm:w-1/2", onDragStart: function onDragStart(e) { return e.preventDefault(); } }, /*#__PURE__*/_react.default.createElement("img", { src: _verification.default, className: "select-none w-full max-w-xs sm:max-w-md ml-auto" }))), /*#__PURE__*/_react.default.createElement("div", { className: "px-4 sm:px-8 md:px-12 lg:px-24 pb-4 sm:pb-8 md:pb-12 lg:pb-24" }, /*#__PURE__*/_react.default.createElement(_VerificationForm.default, { loading: loading, verifySignature: verifySignature, loadContractHistory: loadContractHistory, startingDocKey: docKey, startingSignersAddress: signersAddress, startingNetworkId: networkId }))); }; var _default = (0, _reactRouterDom.withRouter)(VerifyContract); exports.default = _default;