@stokr/components-library 0.5.6 → 0.5.7

package/dist/components/ROI/ROIScenarioBox.styles.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrap = exports.Title = exports.Subtitle = exports.Container = exports.CheckMark = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _theme = _interopRequireDefault(require("styles/theme"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var CheckMark = _styledComponents.default.div.withConfig({
+  displayName: "ROIScenarioBoxstyles__CheckMark",
+  componentId: "sc-1pccc5r-0"
+})(["position:absolute;display:block;width:14px;height:14px;top:50%;right:44px;margin-top:-7px;border:1px solid #9b9b9b;border-radius:7px;background-color:transparent;transition:border-color 0.2s,background-color 0.2s;&:before,&:after{content:'';display:block;position:absolute;top:50%;left:50%;opacity:0;transform:scale(0);transition:opacity 0.2s,transform 0.4s cubic-bezier(0.8,-0.5,0.6,0.6);}&:after{width:4px;height:4px;margin-top:-2px;margin-left:-2px;border-radius:2px;background-color:", ";box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);}"], function (props) {
+  return _theme.default.cPrimary;
+});
+exports.CheckMark = CheckMark;
+var Wrap = _styledComponents.default.div.withConfig({
+  displayName: "ROIScenarioBoxstyles__Wrap",
+  componentId: "sc-1pccc5r-1"
+})(["margin-bottom:12px;&:last-child{margin-bottom:0;}& > input{", ";z-index:-1;position:absolute;top:4px;left:4px;display:block;width:1px;height:0;opacity:0;border:0;& + label{display:block;position:relative;cursor:pointer;&:before{content:'';width:6px;position:absolute;top:0;left:0;height:100%;background-color:transparent;transition:background-color 0.2s;}}&:disabled + label{&:before{background-color:transparent !important;}", "{border-color:", "!important;background-color:", "!important;}}&:checked + label{&:before{background-color:", "!important;}", "{&:before,&:after{opacity:1;transform:scale(1);transition:opacity 0.2s,transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);}}}&:focus + label,&:hover + label,& + label:hover{&:before{background-color:", ";}", "{border-color:", ";}}}"], function (props) {
+  return props.hide && 'visibility: hidden';
+}, CheckMark, function (props) {
+  return _theme.default.cLightGrey;
+}, function (props) {
+  return _theme.default.cGrey;
+}, function (props) {
+  return _theme.default.cWarning;
+}, CheckMark, function (props) {
+  return _theme.default.cLightGrey;
+}, CheckMark, function (props) {
+  return _theme.default.cPrimary;
+});
+exports.Wrap = Wrap;
+var Container = _styledComponents.default.div.withConfig({
+  displayName: "ROIScenarioBoxstyles__Container",
+  componentId: "sc-1pccc5r-2"
+})(["padding:24px 44px;border:1px solid ", ";background:", ";"], function (props) {
+  return _theme.default.cLightGrey;
+}, function (props) {
+  return _theme.default.cWhite;
+});
+exports.Container = Container;
+var Title = _styledComponents.default.div.withConfig({
+  displayName: "ROIScenarioBoxstyles__Title",
+  componentId: "sc-1pccc5r-3"
+})(["font-size:22px;font-weight:300;line-height:28px;letter-spacing:0.8px;padding-bottom:4px;"]);
+exports.Title = Title;
+var Subtitle = _styledComponents.default.div.withConfig({
+  displayName: "ROIScenarioBoxstyles__Subtitle",
+  componentId: "sc-1pccc5r-4"
+})(["font-size:9px;font-style:italic;line-height:16px;letter-spacing:0.4px;"]);
+exports.Subtitle = Subtitle;

package/dist/components/Radio/Radio.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Radio = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Radio = require("./Radio.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Radio = function Radio(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    text = _ref.text,
+    label = _ref.label,
+    value = _ref.value,
+    checked = _ref.checked,
+    error = _ref.error,
+    touched = _ref.touched,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus;
+  return /*#__PURE__*/_react.default.createElement(_Radio.Wrapper, null, label && /*#__PURE__*/_react.default.createElement(_Radio.Label, {
+    error: error && touched,
+    htmlFor: id
+  }, label), /*#__PURE__*/_react.default.createElement(_Radio.Input, {
+    error: error && touched
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "radio",
+    id: id,
+    name: name || id,
+    value: value,
+    checked: checked,
+    onChange: onChange,
+    onBlur: onBlur,
+    onFocus: onFocus
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id
+  }, text)));
+};
+exports.Radio = Radio;
+Radio.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  name: _propTypes.default.string,
+  text: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  label: _propTypes.default.string,
+  value: _propTypes.default.string,
+  checked: _propTypes.default.bool,
+  error: _propTypes.default.bool,
+  touched: _propTypes.default.bool,
+  onChange: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func
+};
+Radio.defaultProps = {
+  name: '',
+  text: '',
+  label: '',
+  value: '',
+  checked: false,
+  error: false,
+  touched: false,
+  onChange: function onChange() {},
+  onBlur: function onBlur() {},
+  onFocus: function onFocus() {}
+};
+var _default = Radio;
+exports.default = _default;

package/dist/components/Radio/Radio.stories.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RadioChecked = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Radio = _interopRequireDefault(require("./Radio"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Radio',
+  component: _Radio.default,
+  argTypes: {
+    id: {
+      type: 'string',
+      required: true
+    },
+    name: {
+      type: 'string',
+      defaultValue: ''
+    },
+    text: {
+      type: 'string or node',
+      defaultValue: ''
+    },
+    label: {
+      type: 'string',
+      defaultValue: ''
+    },
+    value: {
+      type: 'string',
+      defaultValue: ''
+    },
+    checked: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    error: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    touched: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    onChange: {
+      type: 'function',
+      action: 'onChange'
+    },
+    onBlur: {
+      type: 'function',
+      action: 'onBlur'
+    },
+    onFocus: {
+      type: 'function',
+      action: 'onFocus'
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Radio.default, args));
+};
+var RadioChecked = Template.bind({});
+exports.RadioChecked = RadioChecked;
+RadioChecked.args = {
+  value: 'Value',
+  name: 'Name',
+  text: 'Text, or other Element',
+  label: 'Label',
+  checked: true
+};
+
+//doublecheck:
+// actions not working

package/dist/components/Radio/Radio.styles.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.Label = exports.Input = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Input = require("components/Input/Input.styles");
+var _theme = _interopRequireDefault(require("styles/theme"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Wrapper = _styledComponents.default.div.withConfig({
+  displayName: "Radiostyles__Wrapper",
+  componentId: "sc-bz07fp-0"
+})(["position:relative;display:block;"]);
+exports.Wrapper = Wrapper;
+var Label = (0, _styledComponents.default)(_Input.Label).withConfig({
+  displayName: "Radiostyles__Label",
+  componentId: "sc-bz07fp-1"
+})(["position:relative;top:0;transform:none;font-size:10px;margin-bottom:5px;"]);
+exports.Label = Label;
+var Input = _styledComponents.default.div.withConfig({
+  displayName: "Radiostyles__Input",
+  componentId: "sc-bz07fp-2"
+})(["position:relative;& > input{z-index:-1;position:absolute;top:4px;left:4px;display:block;width:1px;height:0;opacity:0;border:0;& + label{position:relative;display:inline-block;max-width:100%;padding-left:28px;font-family:'Open Sans';font-size:13px;line-height:16px;letter-spacing:0.4px;cursor:pointer;&:before,&:after{content:'';display:block;position:absolute;}&:before{top:0;left:0;width:16px;height:16px;border-radius:8px;border:1px solid #9b9b9b;box-shadow:none;transition:border-color 0.2s;}&:after{top:5px;left:5px;width:6px;height:6px;border-radius:3px;background-color:transparent;}}&:focus + label,&:hover + label{&:before{border-color:", ";}}&:checked + label{&:after{background-color:", ";}}}", ""], function (props) {
+  return _theme.default.cPrimary;
+}, function (props) {
+  return _theme.default.cPrimary;
+}, function (props) {
+  return props.error && "\n    & > input {\n\n      & + label {\n\n        &:before {\n          border-color: ".concat(_theme.default.cWarning, ";\n        }\n      }\n    }\n  ");
+});
+exports.Input = Input;

package/dist/components/RefreshButton/RefreshButton.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RefreshButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _SvgIcons = require("components/SvgIcons");
+var _RefreshButton = require("./RefreshButton.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var RefreshButton = function RefreshButton(props) {
+  var children = props.children;
+  return /*#__PURE__*/_react.default.createElement(_RefreshButton.StyledButton, props, /*#__PURE__*/_react.default.createElement(_RefreshButton.IconWrap, null, /*#__PURE__*/_react.default.createElement(_SvgIcons.RefreshSvg, null)), /*#__PURE__*/_react.default.createElement(_RefreshButton.Content, null, children));
+};
+exports.RefreshButton = RefreshButton;
+RefreshButton.propTypes = {
+  children: _propTypes.default.node.isRequired
+};
+var _default = RefreshButton;
+exports.default = _default;

package/dist/components/RefreshButton/RefreshButton.stories.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RefreshButtonDefault = exports.RefreshButtonChild1 = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = require("index");
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// import { TransactionDetails1 } from 'components/TransactionDetails/TransactionDetails.stories'
+var _default = {
+  title: 'Components Library/Buttons/RefreshButton',
+  component: _index.RefreshButton,
+  argTypes: {
+    children: {
+      type: 'node',
+      required: true
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_index.RefreshButton, args));
+};
+var RefreshButtonDefault = Template.bind({});
+exports.RefreshButtonDefault = RefreshButtonDefault;
+RefreshButtonDefault.args = {};
+var RefreshButtonChild1 = Template.bind({});
+exports.RefreshButtonChild1 = RefreshButtonChild1;
+RefreshButtonChild1.args = {
+  children: /*#__PURE__*/_react.default.createElement(_index.Number, null)
+};
+// export const RefreshButtonChild2 = Template.bind({})
+// RefreshButtonChild2.args = {
+//   children: <TransactionDetails1 />,
+// }
+
+// doublecheck:
+//children = node
+//try to get e.g. story of Transactiondetails in here as child - not working cause data not moved?

package/dist/components/RefreshButton/RefreshButton.styles.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledButton = exports.IconWrap = exports.Content = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Button = _interopRequireDefault(require("components/Button/Button.styles"));
+var _theme = _interopRequireDefault(require("styles/theme"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var IconWrap = _styledComponents.default.div.withConfig({
+  displayName: "RefreshButtonstyles__IconWrap",
+  componentId: "sc-6xdnj8-0"
+})(["display:block;width:24px;height:24px;position:absolute;top:50%;margin-top:-12px;left:0;border-radius:12px;& > svg{fill:", ";stroke:", ";display:block;width:16px;height:16px;position:absolute;top:50%;left:50%;margin-top:-8px;margin-left:-8px;transition:color 0.2s;}"], function (props) {
+  return _theme.default.cPrimary;
+}, function (props) {
+  return _theme.default.cPrimary;
+});
+exports.IconWrap = IconWrap;
+var StyledButton = (0, _styledComponents.default)(_Button.default).attrs(function (props) {
+  return {
+    type: props.type || 'button'
+  };
+}).withConfig({
+  displayName: "RefreshButtonstyles__StyledButton",
+  componentId: "sc-6xdnj8-1"
+})(["position:relative;color:", ";border:1px solid transparent;background-color:transparent;text-align:left;padding:11px 0;padding-left:34px;&:hover,&:focus,&:active{color:", ";border-color:transparent;background-color:transparent;", "{& > svg{fill:", ";transform:rotate(360deg);transition:color 0.2s,transform 0.3s ease-out;}}}"], function (props) {
+  return _theme.default.cBlack;
+}, function (props) {
+  return _theme.default.cBlack;
+}, IconWrap, function (props) {
+  return _theme.default.cPrimaryDark;
+});
+exports.StyledButton = StyledButton;
+var Content = _styledComponents.default.div.withConfig({
+  displayName: "RefreshButtonstyles__Content",
+  componentId: "sc-6xdnj8-2"
+})(["display:inline-block;"]);
+exports.Content = Content;

package/dist/components/RegisterAlgorand/AlgoAddressName.js

@@ -0,0 +1,138 @@
+"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 AlgoAdressName = /*#__PURE__*/function (_PureComponent) {
+  _inherits(AlgoAdressName, _PureComponent);
+  var _super = _createSuper(AlgoAdressName);
+  function AlgoAdressName() {
+    var _this;
+    _classCallCheck(this, AlgoAdressName);
+    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(AlgoAdressName, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props = this.props,
+        registeredAddress = _this$props.registeredAddress,
+        changeStep = _this$props.changeStep;
+      if (registeredAddress) {
+        changeStep();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props2 = this.props,
+        error = _this$props2.error,
+        isUpdatingUser = _this$props2.isUpdatingUser;
+      return /*#__PURE__*/_react.default.createElement(_Modal.ModalWrapper, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_SectionTitle.default, null, "Register Algorand 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 Algorand 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, 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-algo-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 Algorand 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 AlgoAdressName;
+}(_react.PureComponent);
+AlgoAdressName.propTypes = {
+  changeStep: _propTypes.default.func.isRequired
+};
+var _default = AlgoAdressName;
+exports.default = _default;