Created a Nickname popover (#12632)

* Created a Nickname popover

* Fixing lines in index.scss

* Handle copy button and fix some paddings

* Added text to be editable in the storybook component

* Simplify nickname scss and html

* Delete harcoded address

* Change color usage with new color system

app/_locales/en/messages.json

@@ -3223,6 +3223,9 @@
   "viewMore": {
     "message": "View More"
   },
+  "viewOnBlockExplorer": {
+    "message": "View on block explorer"
+  },
   "viewOnCustomBlockExplorer": {
     "message": "View $1 at $2",
     "description": "$1 is the action type. e.g (Account, Transaction, Swap) and $2 is the Custom Block Exporer URL"

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

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

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

@@ -0,0 +1,67 @@
+.nickname-popover {
+  &__popover-wrap {
+    height: 232px;
+    border-radius: 8px;
+    background: $ui-white;
+    display: flex;
+    justify-content: center;
+
+    .popover-header {
+      padding: 16px 16px 0 0;
+    }
+
+    .popover-content {
+      margin-top: -15px;
+      align-items: center;
+    }
+  }
+
+  &__address {
+    @include H4;
+
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    color: $Black-100;
+    padding-top: 8px;
+  }
+
+  &__public-address {
+    @include H7;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-height: 25px;
+    background: $Grey-000;
+    border-radius: 40px;
+    padding-left: 8px;
+    padding-right: 2px;
+    margin-top: 8px;
+
+    button {
+      background: none;
+    }
+
+    &__constant {
+      @include H8;
+
+      color: $Grey-500;
+    }
+  }
+
+  &__view-on-block-explorer {
+    @include H7;
+
+    color: $primary-1;
+    margin-top: 12px;
+  }
+
+  &__footer-button {
+    margin-top: 16px;
+    width: 152px;
+    height: 40px;
+    border-radius: 100px;
+    background: $primary-1;
+  }
+}

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

@@ -0,0 +1,67 @@
+import React, { useCallback, useContext } from 'react';
+import PropTypes from 'prop-types';
+import { I18nContext } from '../../../contexts/i18n';
+import Popover from '../popover';
+import Button from '../button';
+import Identicon from '../identicon/identicon.component';
+import { shortenAddress } from '../../../helpers/utils/util';
+import CopyIcon from '../icon/copy-icon.component';
+import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
+
+const NicknamePopover = ({ address, onClose = null, onAdd = null }) => {
+  const t = useContext(I18nContext);
+
+  const onAddClick = useCallback(() => {
+    onAdd(address);
+    onClose();
+  }, [address, onClose, onAdd]);
+
+  const [copied, handleCopy] = useCopyToClipboard();
+
+  return (
+    <div className="nickname-popover">
+      <Popover onClose={onClose} className="nickname-popover__popover-wrap">
+        <Identicon
+          address={address}
+          diameter={36}
+          className="nickname-popover__identicon"
+        />
+        <div className="nickname-popover__address">
+          {shortenAddress(address)}
+        </div>
+        <div className="nickname-popover__public-address">
+          <div className="nickname-popover__public-address__constant">
+            {address}
+          </div>
+          <button
+            type="link"
+            onClick={() => {
+              handleCopy(address);
+            }}
+            title={copied ? t('copiedExclamation') : t('copyToClipboard')}
+          >
+            <CopyIcon size={11} color="#989a9b" />
+          </button>
+        </div>
+        <div className="nickname-popover__view-on-block-explorer">
+          {t('viewOnBlockExplorer')}
+        </div>
+        <Button
+          type="primary"
+          className="nickname-popover__footer-button"
+          onClick={onAddClick}
+        >
+          {t('addANickname')}
+        </Button>
+      </Popover>
+    </div>
+  );
+};
+
+NicknamePopover.propTypes = {
+  address: PropTypes.string,
+  onClose: PropTypes.func,
+  onAdd: PropTypes.func,
+};
+
+export default NicknamePopover;

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

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { text } from '@storybook/addon-knobs';
+import Button from '../button';
+import NicknamePopover from '.';
+
+export default {
+  title: 'NicknamePopover',
+  id: __filename,
+};
+
+export const Default = () => {
+  const [showNicknamePopover, setShowNicknamePopover] = useState(false);
+
+  return (
+    <div>
+      <Button onClick={() => setShowNicknamePopover(true)}>
+        Open Nickname Popover
+      </Button>
+      {showNicknamePopover && (
+        <NicknamePopover
+          address={text(
+            'Address',
+            '0x5e6DaAD1BE117e26590F9eEcD509336ABFBe5966',
+          )}
+          onClose={() => setShowNicknamePopover(false)}
+          onAdd={action('add NicknamePopover')}
+        />
+      )}
+    </div>
+  );
+};

ui/components/ui/ui-components.scss

@@ -35,6 +35,7 @@
 @import 'loading-screen/index';
 @import 'menu/menu';
 @import 'numeric-input/numeric-input';
+@import 'nickname-popover/index';
 @import 'form-field/index';
 @import 'page-container/index';
 @import 'popover/index';