Add name component (#20798)

Add the Name component to display a saved petname or a proposed name, for raw values such as Ethereum account addresses.

Add the nested NameDetails component when the Name component is clicked, which includes a modal containing a text field and dropdown of all available proposed names.

Add the FormComboField component to provide a free entry text field with a dropdown of suggested options including both primary and secondary text.

lavamoat/browserify/beta/policy.json

@@ -1677,6 +1677,14 @@
         "browserify>url": true
       }
     },
+    "@metamask/name-controller": {
+      "globals": {
+        "fetch": true
+      },
+      "packages": {
+        "@metamask/base-controller": true
+      }
+    },
     "@metamask/network-controller": {
       "globals": {
         "URL": true,

lavamoat/browserify/desktop/policy.json

@@ -1828,6 +1828,14 @@
         "browserify>url": true
       }
     },
+    "@metamask/name-controller": {
+      "globals": {
+        "fetch": true
+      },
+      "packages": {
+        "@metamask/base-controller": true
+      }
+    },
     "@metamask/network-controller": {
       "globals": {
         "URL": true,

lavamoat/browserify/flask/policy.json

@@ -1828,6 +1828,14 @@
         "browserify>url": true
       }
     },
+    "@metamask/name-controller": {
+      "globals": {
+        "fetch": true
+      },
+      "packages": {
+        "@metamask/base-controller": true
+      }
+    },
     "@metamask/network-controller": {
       "globals": {
         "URL": true,

lavamoat/browserify/main/policy.json

@@ -1677,6 +1677,14 @@
         "browserify>url": true
       }
     },
+    "@metamask/name-controller": {
+      "globals": {
+        "fetch": true
+      },
+      "packages": {
+        "@metamask/base-controller": true
+      }
+    },
     "@metamask/network-controller": {
       "globals": {
         "URL": true,

lavamoat/browserify/mmi/policy.json

@@ -1818,6 +1818,14 @@
         "browserify>url": true
       }
     },
+    "@metamask/name-controller": {
+      "globals": {
+        "fetch": true
+      },
+      "packages": {
+        "@metamask/base-controller": true
+      }
+    },
     "@metamask/network-controller": {
       "globals": {
         "URL": true,

package.json

@@ -256,6 +256,7 @@
     "@metamask/logo": "^3.1.1",
     "@metamask/message-manager": "^7.3.0",
     "@metamask/metamask-eth-abis": "^3.0.0",
+    "@metamask/name-controller": "^1.0.0",
     "@metamask/network-controller": "^12.1.1",
     "@metamask/notification-controller": "^3.0.0",
     "@metamask/obs-store": "^8.1.0",

ui/components/app/app-components.scss

@@ -95,6 +95,8 @@
 @import 'network-account-balance-header/index';
 @import 'approve-content-card/index';
 @import 'transaction-alerts/transaction-alerts';
+@import 'name/index';
+@import 'name/name-details/index';
 ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
 @import '../institutional/interactive-replacement-token-notification/index';
 @import '../institutional/confirm-remove-jwt-modal/index';

ui/components/app/name/__snapshots__/name.test.tsx.snap

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Name renders address with proposed name 1`] = `
+<div>
+  <div>
+    <div
+      class="name name__missing"
+    >
+      <span
+        class="mm-box name__icon mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
+        style="mask-image: url('./images/icons/warning.svg');"
+      />
+      <span
+        class="name__value"
+      >
+        0xc0f...4978
+      </span>
+      <span
+        class="name__proposed"
+      >
+        “
+        TestProposedName
+        ”
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Name renders address with proposed name according to source priority 1`] = `
+<div>
+  <div>
+    <div
+      class="name name__missing"
+    >
+      <span
+        class="mm-box name__icon mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
+        style="mask-image: url('./images/icons/warning.svg');"
+      />
+      <span
+        class="name__value"
+      >
+        0xc0f...4978
+      </span>
+      <span
+        class="name__proposed"
+      >
+        “
+        TestProposedName
+        ”
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Name renders address with saved name 1`] = `
+<div>
+  <div>
+    <div
+      class="name name__saved"
+    >
+      <span
+        class="mm-box name__icon mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
+        style="mask-image: url('./images/icons/save.svg');"
+      />
+      <span
+        class="name__name"
+      >
+        TestName
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Name renders address without proposed name 1`] = `
+<div>
+  <div>
+    <div
+      class="name name__missing"
+    >
+      <span
+        class="mm-box name__icon mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
+        style="mask-image: url('./images/icons/warning.svg');"
+      />
+      <span
+        class="name__value"
+      >
+        0xc0f...4979
+      </span>
+    </div>
+  </div>
+</div>
+`;

ui/components/app/name/index.scss

@@ -0,0 +1,37 @@
+.name {
+  border-radius: 36px;
+  padding: 6px 9px 6px 9px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+
+  &__missing {
+    background-color: var(--color-warning-muted);
+  }
+
+  &__saved {
+    background-color: var(--color-info-muted);
+  }
+
+  &__missing &__icon {
+    color: var(--color-warning-default);
+  }
+
+  &__saved &__icon {
+    color: var(--color-info-default);
+  }
+
+  &__value,
+  &__proposed {
+    color: var(--color-warning-default);
+  }
+
+  &__name {
+    color: var(--color-info-default);
+  }
+
+  &__proposed {
+    font-style: italic;
+  }
+}

ui/components/app/name/index.ts

@@ -0,0 +1 @@
+export { default } from './name';