[MMI] Added code fencing in keyring-label component (#17993)

* Added code fencing in keyring-label component

* Updated tests

ui/components/app/account-menu/__snapshots__/account-menu.test.js.snap

@@ -0,0 +1,312 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Account Menu Render Content should not render keyring label if keyring tyoe is Custody - JSONRPC 1`] = `
+<div>
+  <div
+    class="account-menu"
+  >
+    <div
+      class="account-menu__close-area"
+    />
+    <div
+      class="account-menu__item account-menu__header"
+    >
+      My accounts
+      <button
+        class="button btn--rounded btn-secondary account-menu__lock-button"
+        role="button"
+        tabindex="0"
+      >
+        Lock
+      </button>
+    </div>
+    <div
+      class="account-menu__divider"
+    />
+    <div
+      class="account-menu__accounts-container"
+    >
+      <div
+        class="account-menu__accounts"
+      >
+        <button
+          class="account-menu__account account-menu__item--clickable"
+          data-testid="account-menu__account"
+        >
+          <div
+            class="account-menu__check-mark"
+          />
+          <div
+            class=""
+          >
+            <div
+              class="identicon"
+              style="height: 24px; width: 24px; border-radius: 12px;"
+            >
+              <div
+                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 24px; height: 24px; display: inline-block; background: rgb(24, 151, 242);"
+              >
+                <svg
+                  height="24"
+                  width="24"
+                  x="0"
+                  y="0"
+                >
+                  <rect
+                    fill="#2362E1"
+                    height="24"
+                    transform="translate(2.6919976385943882 -4.000732967425142) rotate(458.4 12 12)"
+                    width="24"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#F94301"
+                    height="24"
+                    transform="translate(-11.522594467237658 5.994263726614974) rotate(268.8 12 12)"
+                    width="24"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#FA7900"
+                    height="24"
+                    transform="translate(-6.8071905594760675 22.110011910512533) rotate(117.3 12 12)"
+                    width="24"
+                    x="0"
+                    y="0"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            class="account-menu__account-info"
+          >
+            <div
+              class="account-menu__name"
+            >
+              Account 1
+            </div>
+            <div
+              class="currency-display-component account-menu__balance"
+              data-testid="account-menu__balance"
+              title="0 ETH"
+            >
+              <span
+                class="currency-display-component__prefix"
+              />
+              <span
+                class="currency-display-component__text"
+              >
+                0
+              </span>
+              <span
+                class="currency-display-component__suffix"
+              >
+                ETH
+              </span>
+            </div>
+          </div>
+        </button>
+        <button
+          class="account-menu__account account-menu__item--clickable"
+          data-testid="account-menu__account"
+        >
+          <div
+            class="account-menu__check-mark"
+          />
+          <div
+            class=""
+          >
+            <div
+              class="identicon"
+              style="height: 24px; width: 24px; border-radius: 12px;"
+            >
+              <div
+                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 24px; height: 24px; display: inline-block; background: rgb(24, 162, 242);"
+              >
+                <svg
+                  height="24"
+                  width="24"
+                  x="0"
+                  y="0"
+                >
+                  <rect
+                    fill="#F29602"
+                    height="24"
+                    transform="translate(0.0008341139930255813 -0.00037625505634810975) rotate(358.8 12 12)"
+                    width="24"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#FA6C00"
+                    height="24"
+                    transform="translate(5.974289636227165 7.880005368393935) rotate(69.5 12 12)"
+                    width="24"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#236CE1"
+                    height="24"
+                    transform="translate(-14.300029938001572 12.149694281529626) rotate(260.2 12 12)"
+                    width="24"
+                    x="0"
+                    y="0"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            class="account-menu__account-info"
+          >
+            <div
+              class="account-menu__name"
+            >
+              Imported Account 1
+            </div>
+            <div
+              class="currency-display-component account-menu__balance"
+              data-testid="account-menu__balance"
+              title="0 ETH"
+            >
+              <span
+                class="currency-display-component__prefix"
+              />
+              <span
+                class="currency-display-component__text"
+              >
+                0
+              </span>
+              <span
+                class="currency-display-component__suffix"
+              >
+                ETH
+              </span>
+            </div>
+          </div>
+        </button>
+      </div>
+    </div>
+    <div
+      class="account-menu__divider"
+    />
+    <button
+      class="account-menu__item account-menu__item--clickable"
+    >
+      <div
+        class="account-menu__item__icon"
+      >
+        <span
+          class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-alternative"
+          style="mask-image: url('./images/icons/add.svg');"
+        />
+      </div>
+      <div
+        class="account-menu__item__text"
+      >
+        Create account
+      </div>
+    </button>
+    <button
+      class="account-menu__item account-menu__item--clickable"
+    >
+      <div
+        class="account-menu__item__icon"
+      >
+        <span
+          class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-alternative"
+          style="mask-image: url('./images/icons/import.svg');"
+        />
+      </div>
+      <div
+        class="account-menu__item__text"
+      >
+        Import account
+      </div>
+    </button>
+    <button
+      class="account-menu__item account-menu__item--clickable"
+    >
+      <div
+        class="account-menu__item__icon"
+      >
+        <span
+          class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-alternative"
+          style="mask-image: url('./images/icons/hardware.svg');"
+        />
+      </div>
+      <div
+        class="account-menu__item__text"
+      >
+        Connect hardware wallet
+      </div>
+    </button>
+    <div
+      class="account-menu__divider"
+    />
+    <button
+      class="account-menu__item account-menu__item--clickable"
+    >
+      <div
+        class="account-menu__item__icon"
+      >
+        <div
+          class="account-menu__notifications"
+        >
+          <span
+            class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-inherit"
+            style="mask-image: url('./images/icons/notification.svg');"
+          />
+        </div>
+      </div>
+      <div
+        class="account-menu__item__text"
+      >
+        Notifications
+      </div>
+    </button>
+    <div
+      class="account-menu__divider"
+    />
+    <button
+      class="account-menu__item account-menu__item--clickable"
+    >
+      <div
+        class="account-menu__item__icon"
+      >
+        <span
+          class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-alternative"
+          style="mask-image: url('./images/icons/messages.svg');"
+        />
+      </div>
+      <div
+        class="account-menu__item__text"
+      >
+        Submit a ticket
+      </div>
+    </button>
+    <button
+      class="account-menu__item account-menu__item--clickable"
+    >
+      <div
+        class="account-menu__item__icon"
+      >
+        <span
+          arialabel="Settings"
+          class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-alternative"
+          style="mask-image: url('./images/icons/setting.svg');"
+        />
+      </div>
+      <div
+        class="account-menu__item__text"
+      >
+        Settings
+      </div>
+    </button>
+  </div>
+</div>
+`;

ui/components/app/account-menu/account-menu.test.js

@@ -6,62 +6,63 @@ import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import { KeyringType } from '../../../../shared/constants/keyring';
 import AccountMenu from '.';
 
-describe('Account Menu', () => {
-  const mockStore = {
-    metamask: {
-      provider: {
-        type: 'test',
-      },
-      preferences: {
-        useNativeCurrencyAsPrimaryCurrency: true,
-      },
+const initialProps = {
+  isAccountMenuOpen: true,
+  addressConnectedSubjectMap: {},
+  accounts: [
+    {
+      address: '0x00',
+      name: 'Account 1',
+      balance: '0x0',
     },
-  };
+    {
+      address: '0x1',
+      name: 'Imported Account 1',
+      balance: '0x0',
+    },
+  ],
+  keyrings: [
+    {
+      type: KeyringType.hdKeyTree,
+      accounts: ['0xAdress'],
+    },
+    {
+      type: KeyringType.imported,
+      accounts: ['0x1'],
+    },
+  ],
+  prevIsAccountMenuOpen: false,
+  lockMetamask: sinon.spy(),
+  setSelectedAccount: sinon.spy(),
+  showRemoveAccountConfirmationModal: sinon.spy(),
+  toggleAccountMenu: sinon.spy(),
+  history: {
+    push: sinon.spy(),
+  },
+};
 
+const mockStore = {
+  metamask: {
+    provider: {
+      type: 'test',
+    },
+    preferences: {
+      useNativeCurrencyAsPrimaryCurrency: true,
+    },
+  },
+};
+
+const renderComponent = ({ props = initialProps } = {}) => {
   const store = configureMockStore()(mockStore);
+  return renderWithProvider(<AccountMenu.WrappedComponent {...props} />, store);
+};
 
-  const props = {
-    isAccountMenuOpen: true,
-    addressConnectedSubjectMap: {},
-    accounts: [
-      {
-        address: '0x00',
-        name: 'Account 1',
-        balance: '0x0',
-      },
-      {
-        address: '0x1',
-        name: 'Imported Account 1',
-        balance: '0x0',
-      },
-    ],
-    keyrings: [
-      {
-        type: KeyringType.hdKeyTree,
-        accounts: ['0xAdress'],
-      },
-      {
-        type: KeyringType.imported,
-        accounts: ['0x1'],
-      },
-    ],
-    prevIsAccountMenuOpen: false,
-    lockMetamask: sinon.spy(),
-    setSelectedAccount: sinon.spy(),
-    showRemoveAccountConfirmationModal: sinon.spy(),
-    toggleAccountMenu: sinon.spy(),
-    history: {
-      push: sinon.spy(),
-    },
-  };
-
-  beforeEach(() => {
-    renderWithProvider(<AccountMenu.WrappedComponent {...props} />, store);
-  });
+describe('Account Menu', () => {
+  beforeEach(() => renderComponent());
 
   afterEach(() => {
-    props.toggleAccountMenu.resetHistory();
-    props.history.push.resetHistory();
+    initialProps.toggleAccountMenu.resetHistory();
+    initialProps.history.push.resetHistory();
   });
 
   describe('Render Content', () => {
@@ -80,14 +81,36 @@ describe('Account Menu', () => {
       const click = screen.getAllByTestId('account-menu__account');
       fireEvent.click(click[0]);
 
-      expect(props.setSelectedAccount.calledOnce).toStrictEqual(true);
-      expect(props.setSelectedAccount.getCall(0).args[0]).toStrictEqual('0x00');
+      expect(initialProps.setSelectedAccount.calledOnce).toStrictEqual(true);
+      expect(initialProps.setSelectedAccount.getCall(0).args[0]).toStrictEqual(
+        '0x00',
+      );
     });
 
     it('render imported account label', () => {
       const importedAccount = screen.getByText('Imported');
       expect(importedAccount).toBeInTheDocument();
     });
+
+    it('should not render keyring label if keyring tyoe is Custody - JSONRPC', () => {
+      const props = {
+        ...initialProps,
+        keyrings: [
+          {
+            type: 'Custody - JSONRPC',
+            accounts: ['0xAdress'],
+          },
+          {
+            type: 'Custody - JSONRPC',
+            accounts: ['0x1'],
+          },
+        ],
+      };
+
+      const { container } = renderComponent({ props });
+
+      expect(container).toMatchSnapshot();
+    });
   });
 
   describe('Log Out', () => {
@@ -99,8 +122,8 @@ describe('Account Menu', () => {
     it('simulate click', () => {
       const logout = screen.getByText('Lock');
       fireEvent.click(logout);
-      expect(props.lockMetamask.calledOnce).toStrictEqual(true);
-      expect(props.history.push.getCall(0).args[0]).toStrictEqual('/');
+      expect(initialProps.lockMetamask.calledOnce).toStrictEqual(true);
+      expect(initialProps.history.push.getCall(0).args[0]).toStrictEqual('/');
     });
   });
 
@@ -113,8 +136,8 @@ describe('Account Menu', () => {
     it('calls toggle menu and push new-account route to history', () => {
       const createAccount = screen.getByText('Create account');
       fireEvent.click(createAccount);
-      expect(props.toggleAccountMenu.calledOnce).toStrictEqual(true);
-      expect(props.history.push.getCall(0).args[0]).toStrictEqual(
+      expect(initialProps.toggleAccountMenu.calledOnce).toStrictEqual(true);
+      expect(initialProps.history.push.getCall(0).args[0]).toStrictEqual(
         '/new-account',
       );
     });
@@ -129,8 +152,8 @@ describe('Account Menu', () => {
     it('calls toggle menu and push /new-account/import route to history', () => {
       const importAccount = screen.getByText('Import account');
       fireEvent.click(importAccount);
-      expect(props.toggleAccountMenu.calledOnce).toStrictEqual(true);
-      expect(props.history.push.getCall(0).args[0]).toStrictEqual(
+      expect(initialProps.toggleAccountMenu.calledOnce).toStrictEqual(true);
+      expect(initialProps.history.push.getCall(0).args[0]).toStrictEqual(
         '/new-account/import',
       );
     });
@@ -145,8 +168,8 @@ describe('Account Menu', () => {
     it('calls toggle menu and push /new-account/connect route to history', () => {
       const connectHardwareWallet = screen.getByText('Connect hardware wallet');
       fireEvent.click(connectHardwareWallet);
-      expect(props.toggleAccountMenu.calledOnce).toStrictEqual(true);
-      expect(props.history.push.getCall(0).args[0]).toStrictEqual(
+      expect(initialProps.toggleAccountMenu.calledOnce).toStrictEqual(true);
+      expect(initialProps.history.push.getCall(0).args[0]).toStrictEqual(
         '/new-account/connect',
       );
     });
@@ -176,8 +199,10 @@ describe('Account Menu', () => {
     it('calls toggle menu and push /new-account/connect route to history', () => {
       const settings = screen.getByText('Settings');
       fireEvent.click(settings);
-      expect(props.toggleAccountMenu.calledOnce).toStrictEqual(true);
-      expect(props.history.push.getCall(0).args[0]).toStrictEqual('/settings');
+      expect(initialProps.toggleAccountMenu.calledOnce).toStrictEqual(true);
+      expect(initialProps.history.push.getCall(0).args[0]).toStrictEqual(
+        '/settings',
+      );
     });
   });
 });

ui/components/app/account-menu/keyring-label.js

@@ -7,7 +7,6 @@ import { KeyringType } from '../../../../shared/constants/keyring';
 
 export default function KeyRingLabel({ keyring }) {
   const t = useI18nContext();
-
   let label = null;
 
   // Keyring value might take a while to get a value
@@ -33,7 +32,18 @@ export default function KeyRingLabel({ keyring }) {
       label = HardwareKeyringNames.lattice;
       break;
     default:
-      return null;
+      label = null;
+  }
+
+  ///: BEGIN:ONLY_INCLUDE_IN(mmi)
+  if (type.startsWith('Custody') && /JSONRPC/u.test(type)) {
+    label = type.split(' - ')[1];
+    return null;
+  }
+  ///: END:ONLY_INCLUDE_IN
+
+  if (label === null) {
+    return label;
   }
 
   return (