Create an "Add a Nickname" popover (also support edit) #12528 (#12644)

* added update nickname popover

* fixed style errors

* styling changes

* fixed prettier error

* added header

* updates

app/_locales/en/messages.json

@@ -49,6 +49,9 @@
   "addANetwork": {
     "message": "Add a network"
   },
+  "addANickname": {
+    "message": "Add a nickname"
+  },
   "addAcquiredTokens": {
     "message": "Add the tokens you've acquired using MetaMask"
   },
@@ -85,6 +88,9 @@
   "addFriendsAndAddresses": {
     "message": "Add friends and addresses you trust"
   },
+  "addMemo": {
+    "message": "Add memo"
+  },
   "addNFT": {
     "message": "Add NFT"
   },
@@ -692,6 +698,9 @@
   "edit": {
     "message": "Edit"
   },
+  "editAddressNickname": {
+    "message": "Edit address nickname"
+  },
   "editContact": {
     "message": "Edit Contact"
   },
@@ -1638,6 +1647,9 @@
   "nfts": {
     "message": "NFTs"
   },
+  "nickname": {
+    "message": "Nickname"
+  },
   "noAccountsFound": {
     "message": "No accounts found for the given search query"
   },

ui/components/ui/ui-components.scss

@@ -53,3 +53,4 @@
 @import 'typography/typography';
 @import 'unit-input/index';
 @import 'url-icon/index';
+@import 'update-nickname-popover/index';

ui/components/ui/update-nickname-popover/index.js

@@ -0,0 +1 @@
+export { default } from './update-nickname-popover';

ui/components/ui/update-nickname-popover/index.scss

@@ -0,0 +1,56 @@
+
+.update-nickname {
+  &__wrapper {
+    height: 620px;
+    width: 360px;
+    border-radius: 0;
+
+    .popover-header {
+      border-bottom: 1px solid #d2d8dd;
+      margin-bottom: 16px;
+      border-radius: 0;
+    }
+  }
+
+  &__cancel {
+    margin-right: 16px;
+  }
+
+  &__content {
+    padding: 0 20px 20px 20px;
+    position: relative;
+
+    &__indenticon {
+      margin-bottom: 16px;
+    }
+
+    &__text-area-wrapper {
+      height: 96px !important;
+    }
+
+    &__text-area {
+      line-height: initial !important;
+    }
+
+    &__address {
+      margin-top: 8px;
+      font-size: 13px;
+      color: #bbc0c5;
+      margin-bottom: 16px;
+    }
+
+    &__label,
+    &__label--capitalized {
+      text-transform: capitalize;
+      margin-top: 16px;
+      color: #24292e;
+      font-size: 14px;
+    }
+
+    &__nickname-label {
+      margin-bottom: 8px;
+      color: #24292e;
+      font-size: 14px;
+    }
+  }
+}

ui/components/ui/update-nickname-popover/update-nickname-popover.js

@@ -0,0 +1,119 @@
+import React, { useCallback, useContext, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import Popover from '../popover';
+import Button from '../button';
+import TextField from '../text-field';
+
+import { I18nContext } from '../../../contexts/i18n';
+
+import Identicon from '../identicon/identicon.component';
+
+export default function UpdateNicknamePopover({
+  nickname,
+  address,
+  onAdd,
+  memo,
+  onClose,
+}) {
+  const t = useContext(I18nContext);
+
+  const [nicknameInput, setNicknameInput] = useState(nickname);
+  const [memoInput, setMemoInput] = useState(memo);
+
+  const handleNicknameChange = (event) => {
+    setNicknameInput(event.target.value);
+  };
+
+  const handleMemoChange = (event) => {
+    setMemoInput(event.target.value);
+  };
+
+  const closePopover = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
+  const onCancel = () => {
+    onClose();
+  };
+
+  const onSubmit = () => {
+    onAdd(address, nicknameInput, memoInput);
+    onClose();
+  };
+
+  let title = t('addANickname');
+  if (nickname) {
+    title = t('editAddressNickname');
+  }
+
+  return (
+    <Popover
+      title={title}
+      onClose={closePopover}
+      className="update-nickname__wrapper"
+      footer={
+        <>
+          <Button
+            className="update-nickname__cancel"
+            type="secondary"
+            onClick={onCancel}
+          >
+            {t('cancel')}
+          </Button>
+          <Button type="primary" onClick={onSubmit} disabled={!nickname}>
+            {t('save')}
+          </Button>
+        </>
+      }
+    >
+      <div className="update-nickname__content">
+        <Identicon
+          className="update-nickname__content__indenticon"
+          address={address}
+          diameter={36}
+        />
+        <label className="update-nickname__content__label--capitalized">
+          {t('address')}
+        </label>
+        <div className="update-nickname__content__address">{address}</div>
+        <div className="update-nickname__content__nickname-label">
+          {t('nickname')}
+        </div>
+        <TextField
+          className="update-nickname__content__text-field"
+          value={nicknameInput}
+          onChange={handleNicknameChange}
+          placeholder={t('addANickname')}
+          fullWidth
+        />
+        <div className="update-nickname__content__label--capitalized">
+          {t('memo')}
+        </div>
+        <TextField
+          type="text"
+          id="memo"
+          value={memoInput}
+          onChange={handleMemoChange}
+          placeholder={t('addMemo')}
+          fullWidth
+          margin="dense"
+          multiline
+          rows={3}
+          classes={{
+            inputMultiline: 'update-nickname__content__text-area',
+            inputRoot: 'update-nickname__content__text-area-wrapper',
+          }}
+        />
+      </div>
+    </Popover>
+  );
+}
+
+UpdateNicknamePopover.propTypes = {
+  nickname: PropTypes.string,
+  address: PropTypes.string,
+  memo: PropTypes.string,
+  onAdd: PropTypes.func,
+  onClose: PropTypes.func,
+};

ui/components/ui/update-nickname-popover/update-nickname-popover.stories.js

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { text } from '@storybook/addon-knobs';
+import Button from '../button';
+import UpdateNicknamePopover from '.';
+
+export default {
+  title: 'UpdateNickname',
+  id: __filename,
+};
+
+export const AddNickname = () => {
+  const [showPopover, setShowPopover] = useState(false);
+  return (
+    <div style={{ width: '600px' }}>
+      <Button onClick={() => setShowPopover(true)}>
+        Open Add Nickname Popover
+      </Button>
+      {showPopover && (
+        <UpdateNicknamePopover
+          address={text('address', '0x0011244f50ff4')}
+          onClose={() => action(`Close Update Nickname Popover`)()}
+        />
+      )}
+    </div>
+  );
+};
+
+export const UpdateNickname = () => {
+  const [showPopover, setShowPopover] = useState(false);
+  return (
+    <div style={{ width: '600px' }}>
+      <Button onClick={() => setShowPopover(true)}>
+        Open Update Nickname Popover
+      </Button>
+      {showPopover && (
+        <UpdateNicknamePopover
+          address={text('address', '0x0011244f50ff4')}
+          nickname={text('nickname', 'user_nickname')}
+          onClose={() => action(`Close Update Nickname Popover`)()}
+        />
+      )}
+    </div>
+  );
+};