@stokr/components-library 0.5.6 → 0.5.7

package/dist/components/RegisterEthereum/EthAddressLedger.js

@@ -0,0 +1,215 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactCollapse = require("react-collapse");
+var _Text = _interopRequireDefault(require("components/Text/Text.styles"));
+var _Button = _interopRequireDefault(require("components/Button/Button.styles"));
+var _TextLink = _interopRequireDefault(require("components/TextLink/TextLink.styles"));
+var _CryptoAddress = _interopRequireDefault(require("components/CryptoAddress/CryptoAddress"));
+var _FAQ = _interopRequireDefault(require("components/FAQ/FAQ"));
+var _SectionTitle = _interopRequireDefault(require("components/SectionTitle/SectionTitle.styles"));
+var _ComponentWrapper = _interopRequireDefault(require("components/ComponentWrapper/ComponentWrapper.styles"));
+var _ComponentScroll = _interopRequireDefault(require("components/ComponentScroll/ComponentScroll"));
+var _CryptoAddressWrapper = _interopRequireDefault(require("components/CryptoAddressWrapper/CryptoAddressWrapper"));
+var _Modal = require("components/Modal/Modal.styles");
+var _StokrWeb3Config = _interopRequireDefault(require("api/StokrWeb3Config"));
+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 _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = Object.defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) keys.push(key); return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, catch: function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var getLedgerAddresses = function getLedgerAddresses() {};
+var EthAddressLedger = /*#__PURE__*/function (_PureComponent) {
+  _inherits(EthAddressLedger, _PureComponent);
+  var _super = _createSuper(EthAddressLedger);
+  function EthAddressLedger() {
+    var _this;
+    _classCallCheck(this, EthAddressLedger);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      selectedAddress: null,
+      showAll: false,
+      addressPool: undefined
+    });
+    _defineProperty(_assertThisInitialized(_this), "onAddressChange", function (e) {
+      _this.setState({
+        selectedAddress: e.target.value
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "onRegisterClick", function () {
+      var _this$state = _this.state,
+        addressPool = _this$state.addressPool,
+        selectedAddress = _this$state.selectedAddress;
+      var _this$props = _this.props,
+        changeStep = _this$props.changeStep,
+        setAddressToRegister = _this$props.setAddressToRegister;
+      for (var i in addressPool) {
+        if (addressPool[i].radioId === selectedAddress) {
+          setAddressToRegister(addressPool[i].address);
+        }
+      }
+      selectedAddress && changeStep && changeStep();
+    });
+    _defineProperty(_assertThisInitialized(_this), "toggleShowAll", function () {
+      var showAll = _this.state.showAll;
+      _this.setState({
+        showAll: !showAll
+      });
+    });
+    return _this;
+  }
+  _createClass(EthAddressLedger, [{
+    key: "componentDidMount",
+    value: function () {
+      var _componentDidMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.t0 = this;
+              _context.next = 3;
+              return getLedgerAddresses();
+            case 3:
+              _context.t1 = _context.sent;
+              _context.t2 = {
+                addressPool: _context.t1
+              };
+              _context.t0.setState.call(_context.t0, _context.t2);
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function componentDidMount() {
+        return _componentDidMount.apply(this, arguments);
+      }
+      return componentDidMount;
+    }()
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$state2 = this.state,
+        selectedAddress = _this$state2.selectedAddress,
+        showAll = _this$state2.showAll,
+        addressPool = _this$state2.addressPool;
+      return /*#__PURE__*/_react.default.createElement(_Modal.ModalWrapper, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_SectionTitle.default, null, "Register Ethereum address")), /*#__PURE__*/_react.default.createElement(_ComponentScroll.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPaddingTop: true
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "Select an ethereum address"), /*#__PURE__*/_react.default.createElement("p", null, 'On this address you will receive your security tokens. You can also use it to purchase security tokens using Ether, Gemini or Tether. '))), addressPool ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPadding: true
+      }, addressPool.slice(_StokrWeb3Config.default.ledger.showAccountSlice[0], _StokrWeb3Config.default.ledger.showAccountSlice[1]).map(function (account, i) {
+        return /*#__PURE__*/_react.default.createElement(_CryptoAddress.default, {
+          key: account + i,
+          title: account.title,
+          address: account.address,
+          data: {
+            value: account.ether,
+            unit: 'ETH',
+            eqValue: account.euro,
+            eqUnit: '€'
+          },
+          radio: {
+            id: account.id,
+            name: 'address',
+            value: account.radioId,
+            checked: selectedAddress === account.radioId,
+            onChange: _this2.onAddressChange,
+            onBlur: function onBlur() {}
+          },
+          wrapped: true,
+          borderTop: true
+        });
+      })), /*#__PURE__*/_react.default.createElement(_reactCollapse.Collapse, {
+        isOpened: showAll
+      }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPadding: true
+      }, addressPool.slice(_StokrWeb3Config.default.ledger.showAdditionalSlice[0], _StokrWeb3Config.default.ledger.showAdditionalSlice[1]).map(function (account, i) {
+        return /*#__PURE__*/_react.default.createElement(_CryptoAddress.default, {
+          key: account + i,
+          title: account.title,
+          address: account.address,
+          data: {
+            value: account.ether,
+            unit: 'ETH',
+            eqValue: account.euro,
+            eqUnit: '€'
+          },
+          radio: {
+            id: account.id,
+            name: 'address',
+            value: account.radioId,
+            checked: selectedAddress === account.radioId,
+            onChange: _this2.onAddressChange,
+            onBlur: function onBlur() {}
+          },
+          wrapped: true,
+          borderTop: true
+        });
+      }))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPaddingHorizontal: true,
+        noPaddingBottom: true,
+        borderTop: true
+      }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPaddingBottom: true,
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_TextLink.default, {
+        as: "button",
+        onClick: this.toggleShowAll
+      }, showAll ? 'view less' : 'view more')), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+        minWidth: "240px",
+        onClick: this.onRegisterClick,
+        disabled: selectedAddress === null
+      }, "Register selected address")))) : /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        borderTop: true,
+        borderBottom: true,
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_CryptoAddressWrapper.default, {
+        refresh: 'Please wait while we connect to your Ledger'
+      }, /*#__PURE__*/_react.default.createElement(_CryptoAddress.default, {
+        title: "ethereum address",
+        address: '',
+        data: {
+          value: ''
+        }
+      }))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPaddingBottom: true
+      }, /*#__PURE__*/_react.default.createElement(_SectionTitle.default, null, "Frequently Asked Questions")), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_FAQ.default, {
+        items: [{
+          title: 'Which address should I choose?',
+          content: "If you're planning to use the address to purchase tokens, choose one with sufficient funds or that you plan to top up. For your security and privacy, it's considered best practice to use more than one address for your crypto investments."
+        }]
+      }))));
+    }
+  }]);
+  return EthAddressLedger;
+}(_react.PureComponent);
+EthAddressLedger.propTypes = {
+  changeStep: _propTypes.default.func.isRequired
+};
+var _default = EthAddressLedger;
+exports.default = _default;

package/dist/components/RegisterEthereum/EthAddressMetamask.js

@@ -0,0 +1,205 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _RegisterEthereum = require("components/RegisterEthereum");
+var _Text = _interopRequireDefault(require("components/Text/Text.styles"));
+var _Button = _interopRequireDefault(require("components/Button/Button.styles"));
+var _RefreshButton = _interopRequireDefault(require("components/RefreshButton/RefreshButton"));
+var _CryptoAddress = _interopRequireDefault(require("components/CryptoAddress/CryptoAddress"));
+var _CryptoAddressWrapper = _interopRequireDefault(require("components/CryptoAddressWrapper/CryptoAddressWrapper"));
+var _FAQ = _interopRequireDefault(require("components/FAQ/FAQ"));
+var _SectionTitle = _interopRequireDefault(require("components/SectionTitle/SectionTitle.styles"));
+var _ComponentWrapper = _interopRequireDefault(require("components/ComponentWrapper/ComponentWrapper.styles"));
+var _ComponentScroll = _interopRequireDefault(require("components/ComponentScroll/ComponentScroll"));
+var _Modal = require("components/Modal/Modal.styles");
+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 _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+// import {
+//   getBalance,
+//   getBalanceInEther,
+//   getEtherInEuro,
+//   isMetamaskInstalled,
+//   getMetamaskAddress,
+// } from 'api/StokrWeb3'
+var EthAddressMetamask = /*#__PURE__*/function (_PureComponent) {
+  _inherits(EthAddressMetamask, _PureComponent);
+  var _super = _createSuper(EthAddressMetamask);
+  function EthAddressMetamask() {
+    var _this;
+    _classCallCheck(this, EthAddressMetamask);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      correct: false,
+      refresh: false,
+      failed: false,
+      address: '0x0000000000000000000000000000000000000000',
+      data: {
+        value: '0',
+        unit: 'ETH',
+        eqValue: '0',
+        eqUnit: '€'
+      }
+    });
+    return _this;
+  }
+  _createClass(EthAddressMetamask, [{
+    key: "render",
+    value:
+    // async getBalanceData() {
+    //   const mmAddress = await getMetamaskAddress()
+    //   const wei = await getBalance(mmAddress)
+
+    //   const ether = getBalanceInEther(wei, 4)
+    //   const euro = await getEtherInEuro(ether, 2)
+
+    //   const data = {
+    //     value: ether,
+    //     unit: 'ETH',
+    //     eqValue: euro,
+    //     eqUnit: '€',
+    //   }
+
+    //   this.setState({ data: data })
+    // }
+
+    // async initMetamask() {
+    //   if (isMetamaskInstalled()) {
+    //     try {
+    //       const address = await getMetamaskAddress()
+    //       if (address) {
+    //         await this.getBalanceData()
+
+    //         this.setState({ failed: false, correct: true, address: address })
+
+    //         window.ethereum.on('accountsChanged', async (accounts) => {
+    //           const address = await getMetamaskAddress()
+    //           this.setState({ address: address })
+    //           await this.getBalanceData()
+
+    //           this.setState({ refresh: true }, () => {
+    //             this.setStateDelayed({ refresh: false }, 2000)
+    //           })
+    //         })
+    //       }
+    //     } catch (error) {
+    //       console.log(error)
+    //       this.setState({ failed: true, correct: false })
+    //     }
+    //   }
+    // }
+
+    // async componentDidMount() {
+    //   await this.initMetamask()
+    // }
+
+    // setStateDelayed = (newState, time) => {
+    //   this.timeout = setTimeout(() => {
+    //     this.setState(newState)
+    //   }, time)
+    // }
+
+    // onRefreshClick = async () => {
+    //   await this.initMetamask()
+
+    //   this.setState(
+    //     {
+    //       //correct: false,
+    //       refresh: true,
+    //       //failed: false
+    //     },
+    //     () => {
+    //       this.setStateDelayed({ refresh: false }, 2000)
+    //     },
+    //   )
+    // }
+
+    // onRegisterClick = () => {
+    //   const { correct, address } = this.state
+    //   const { changeStep, setAddressToRegister } = this.props
+
+    //   setAddressToRegister(address)
+
+    //   correct && changeStep()
+    // }
+
+    function render() {
+      var _this$state = this.state,
+        correct = _this$state.correct,
+        refresh = _this$state.refresh,
+        failed = _this$state.failed,
+        address = _this$state.address,
+        data = _this$state.data;
+      return /*#__PURE__*/_react.default.createElement(_Modal.ModalWrapper, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_SectionTitle.default, null, "Register Ethereum address")), /*#__PURE__*/_react.default.createElement(_ComponentScroll.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPaddingVertical: true
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "Select an ethereum address"), /*#__PURE__*/_react.default.createElement("p", null, 'On this address you will receive your security tokens. You can also use it to purchase security tokens using Ether, Gemini or Tether.'))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_SectionTitle.default, null, "YOUR CURRENT ADDRESS")), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        borderTop: true,
+        borderBottom: true
+      }, correct ? /*#__PURE__*/_react.default.createElement(_CryptoAddressWrapper.default, {
+        refresh: refresh ? 'Refreshing' : '',
+        failed: failed ? 'NO DICE. PLEASE CHECK METAMASK IS CONNECTED, THEN HIT REFRESH.' : ''
+      }, /*#__PURE__*/_react.default.createElement(_CryptoAddress.default, {
+        title: "ethereum address",
+        address: address,
+        data: data
+      })) : /*#__PURE__*/_react.default.createElement(_CryptoAddressWrapper.default, {
+        refresh: !correct && !failed ? "We're fetching your registered address from your MetaMask." : '',
+        failed: failed ? "Our interface couldn't connect to MetaMask because you need to give permission to do so. Try again?" : ''
+      }, /*#__PURE__*/_react.default.createElement(_CryptoAddress.default, {
+        title: "ethereum address",
+        address: address,
+        data: data
+      }))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPaddingBottom: true
+      }, /*#__PURE__*/_react.default.createElement(_RegisterEthereum.EthInfo, {
+        center: true
+      }, 'To use a different MetaMask address, select one from the MetaMask extension on your browser and press the refresh button below.')), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_RefreshButton.default, {
+        onClick: this.onRefreshClick
+      }, "TRY AGAIN")), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPaddingTop: true,
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+        minWidth: "300px",
+        onClick: this.onRegisterClick,
+        disabled: !correct
+      }, "REGISTER THIS ADDRESS")), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPaddingBottom: true
+      }, /*#__PURE__*/_react.default.createElement(_SectionTitle.default, null, "Frequently Asked Questions")), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_FAQ.default, {
+        items: [{
+          title: 'Which address should I choose?',
+          content: "If you're planning to use the address to purchase tokens, choose one with sufficient funds or that you plan to top up. For your security and privacy, it's considered best practice to use more than one address for your crypto investments."
+        }]
+      }))));
+    }
+  }]);
+  return EthAddressMetamask;
+}(_react.PureComponent);
+EthAddressMetamask.propTypes = {
+  changeStep: _propTypes.default.func.isRequired
+};
+var _default = EthAddressMetamask;
+exports.default = _default;

package/dist/components/RegisterEthereum/EthAddressName.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _formik = require("formik");
+var Yup = _interopRequireWildcard(require("yup"));
+var _Text = _interopRequireDefault(require("components/Text/Text.styles"));
+var _Button = _interopRequireDefault(require("components/Button/Button.styles"));
+var _Form = _interopRequireWildcard(require("components/Form/Form"));
+var _Input = _interopRequireDefault(require("components/Input/Input"));
+var _FAQ = _interopRequireDefault(require("components/FAQ/FAQ"));
+var _SectionTitle = _interopRequireDefault(require("components/SectionTitle/SectionTitle.styles"));
+var _ComponentWrapper = _interopRequireDefault(require("components/ComponentWrapper/ComponentWrapper.styles"));
+var _ComponentScroll = _interopRequireDefault(require("components/ComponentScroll/ComponentScroll"));
+var _Modal = require("components/Modal/Modal.styles");
+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 _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var EthAddressName = /*#__PURE__*/function (_PureComponent) {
+  _inherits(EthAddressName, _PureComponent);
+  var _super = _createSuper(EthAddressName);
+  function EthAddressName() {
+    var _this;
+    _classCallCheck(this, EthAddressName);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "initialValues", {
+      name: ''
+    });
+    _defineProperty(_assertThisInitialized(_this), "validationSchema", Yup.object().shape({
+      name: Yup.string().required('Address name is required')
+    }));
+    _defineProperty(_assertThisInitialized(_this), "onSubmit", function () {
+      var changeStep = _this.props.changeStep;
+      changeStep();
+    });
+    return _this;
+  }
+  _createClass(EthAddressName, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        error = _this$props.error,
+        isUpdatingUser = _this$props.isUpdatingUser;
+      return /*#__PURE__*/_react.default.createElement(_Modal.ModalWrapper, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_SectionTitle.default, null, "Register Ethereum address")), /*#__PURE__*/_react.default.createElement(_ComponentScroll.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPaddingVertical: true
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "Name your ethereum address"), /*#__PURE__*/_react.default.createElement("p", null, "Give your address a name that reflects what it will store. Remember Satoshi's recommendation to spread your crypto investments over different addresses. "))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPaddingBottom: true
+      }, /*#__PURE__*/_react.default.createElement(_FAQ.default, {
+        items: [{
+          title: 'Why should I name my Ethereum address?',
+          content: "If you're following best practice and spreading your crypto investments over different addresses, a name makes it easier to manage your portfolio."
+        }]
+      })), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_formik.Formik, {
+        initialValues: this.initialValues,
+        validationSchema: this.validationSchema,
+        onSubmit: this.onSubmit
+      }, function (_ref) {
+        var values = _ref.values,
+          errors = _ref.errors,
+          touched = _ref.touched,
+          handleBlur = _ref.handleBlur,
+          setFieldValue = _ref.setFieldValue,
+          setFieldTouched = _ref.setFieldTouched;
+        var onChangeWithTouch = function onChangeWithTouch(e) {
+          var setNameToRegister = _this2.props.setNameToRegister;
+          var field = e.target;
+          setFieldValue(field.name, field.value, false);
+          setFieldTouched(field.name);
+          setNameToRegister(field.value);
+        };
+        var submitDisabled = !touched.name || !!errors.name || isUpdatingUser;
+        return /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+          noPadding: true
+        }, /*#__PURE__*/_react.default.createElement(_Form.FormField, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+          id: "register-eth-name",
+          name: "name",
+          label: "Address name",
+          value: values.name,
+          onChange: onChangeWithTouch,
+          onBlur: handleBlur,
+          error: !!errors.name,
+          touched: !!touched.name
+        }), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
+          show: errors.name && touched.name
+        }, errors.name))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+          noPaddingHorizontal: true,
+          noPaddingBottom: true,
+          center: true
+        }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+          type: "submit",
+          minWidth: "240px",
+          disabled: submitDisabled
+        }, "Use this name"), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
+          withTopSpacing: true,
+          show: error
+        }, error), "`"));
+      })), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPaddingBottom: true
+      }, /*#__PURE__*/_react.default.createElement(_SectionTitle.default, null, "Frequently Asked Questions")), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_FAQ.default, {
+        items: [{
+          title: 'Why should I name my Ethereum address?',
+          content: "If you're following best practice and spreading your crypto investments over different addresses, a name makes it easier to manage your portfolio."
+        }]
+      }))));
+    }
+  }]);
+  return EthAddressName;
+}(_react.PureComponent);
+EthAddressName.propTypes = {
+  changeStep: _propTypes.default.func.isRequired
+};
+var _default = EthAddressName;
+exports.default = _default;