Merge remote-tracking branch 'upstream/develop' into feature/17670-ca…

…ncel-speedup-popover

.github/CODEOWNERS

@@ -1,20 +1,22 @@
 # Lines starting with '#' are comments.
 # Each line is a file pattern followed by one or more owners.
 # Owners bear a responsibility to the organization and the users of this
-# application. Repository administrators have the ability to merge pull 
-# requests that have not yet received the requisite reviews as outlined 
-# in this file. Do not force merge any PR without confidence that it 
-# follows all policies or without full understanding of the impact of 
+# application. Repository administrators have the ability to merge pull
+# requests that have not yet received the requisite reviews as outlined
+# in this file. Do not force merge any PR without confidence that it
+# follows all policies or without full understanding of the impact of
 # those changes on build, release and publishing outcomes.
 
 *                                    @MetaMask/extension-devs
 development/                         @MetaMask/extension-devs @kumavis
 lavamoat/                            @MetaMask/supply-chain
+**/snaps/**                          @MetaMask/snaps-devs
+**/flask/**                          @MetaMask/snaps-devs
 
 # The .circleci/ folder instructs Circle CI on the process by which it
 # should test, build and publish releases of our application. Due to the
 # impact that changes to the files contained within this folder may have
-# on our releases, only those with the knowledge and responsibility to 
+# on our releases, only those with the knowledge and responsibility to
 # publish libraries under the MetaMask name may approve those changes.
 # Note to reviewers: We employ the use of CircleCI "Orbs", which are
 # remotely hosted sections of CircleCI configuration and scripts, to

ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.js

@@ -6,14 +6,14 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
 import Box from '../../ui/box';
 import Button from '../../ui/button';
 import Popover from '../../ui/popover';
-import Typography from '../../ui/typography';
+import { Text } from '../../component-library';
 // Helpers
 import {
   DISPLAY,
   TEXT_ALIGN,
-  TypographyVariant,
+  TextVariant,
   BLOCK_SIZES,
-  FONT_WEIGHT,
+  FontWeight,
   JustifyContent,
   TextColor,
 } from '../../../helpers/constants/design-system';
@@ -35,27 +35,25 @@ export default function RecoveryPhraseReminder({ onConfirm, hasBackedUp }) {
         paddingLeft={4}
         className="recovery-phrase-reminder"
       >
-        <Typography
+        <Text
           color={TextColor.textDefault}
           align={TEXT_ALIGN.CENTER}
-          variant={TypographyVariant.paragraph}
-          boxProps={{ marginTop: 0, marginBottom: 4 }}
+          variant={TextVariant.bodyMd}
+          marginBottom={4}
         >
           {t('recoveryPhraseReminderSubText')}
-        </Typography>
+        </Text>
         <Box marginTop={4} marginBottom={8}>
           <ul className="recovery-phrase-reminder__list">
-            <li>
-              <Typography
-                as="span"
-                color={TextColor.textDefault}
-                fontWeight={FONT_WEIGHT.BOLD}
-              >
-                {t('recoveryPhraseReminderItemOne')}
-              </Typography>
-            </li>
-            <li>{t('recoveryPhraseReminderItemTwo')}</li>
-            <li>
+            <Text
+              as="li"
+              color={TextColor.textDefault}
+              fontWeight={FontWeight.Bold}
+            >
+              {t('recoveryPhraseReminderItemOne')}
+            </Text>
+            <Text as="li">{t('recoveryPhraseReminderItemTwo')}</Text>
+            <Text as="li">
               {hasBackedUp ? (
                 t('recoveryPhraseReminderHasBackedUp')
               ) : (
@@ -75,7 +73,7 @@ export default function RecoveryPhraseReminder({ onConfirm, hasBackedUp }) {
                   </Box>
                 </>
               )}
-            </li>
+            </Text>
           </ul>
         </Box>
         <Box justifyContent={JustifyContent.center}>

ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.stories.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import RecoveryPhraseReminder from '.';
+
+export default {
+  title: 'Components/App/RecoveryPhraseReminder',
+
+  argTypes: {
+    hasBackedUp: {
+      control: 'boolean',
+    },
+    onConfirm: {
+      action: 'onConfirm',
+    },
+  },
+  args: {
+    hasBackedUp: false,
+    onConfirm: () => console.log('onConfirm fired'),
+  },
+};
+
+export const DefaultStory = (args) => <RecoveryPhraseReminder {...args} />;
+
+DefaultStory.storyName = 'Default';

ui/components/multichain/account-list-menu/account-list-menu.js

@@ -79,15 +79,22 @@ export const AccountListMenu = ({ onClose }) => {
     >
       <Box className="multichain-account-menu">
         {/* Search box */}
-        <Box paddingLeft={4} paddingRight={4} paddingBottom={4} paddingTop={0}>
-          <TextFieldSearch
-            size={Size.SM}
-            width={BLOCK_SIZES.FULL}
-            placeholder={t('searchAccounts')}
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-          />
-        </Box>
+        {accounts.length > 1 ? (
+          <Box
+            paddingLeft={4}
+            paddingRight={4}
+            paddingBottom={4}
+            paddingTop={0}
+          >
+            <TextFieldSearch
+              size={Size.SM}
+              width={BLOCK_SIZES.FULL}
+              placeholder={t('searchAccounts')}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </Box>
+        ) : null}
         {/* Account list block */}
         <Box className="multichain-account-menu__list">
           {searchResults.length === 0 && searchQuery !== '' ? (

ui/components/multichain/account-list-menu/account-list-menu.test.js

@@ -100,4 +100,37 @@ describe('AccountListMenu', () => {
       getByTestId('multichain-account-menu-no-results'),
     ).toBeInTheDocument();
   });
+
+  it('should not render search bar when there is only one account', () => {
+    const mockStore = configureStore({
+      activeTab: {
+        title: 'Eth Sign Tests',
+        origin: 'https://remix.ethereum.org',
+        protocol: 'https:',
+        url: 'https://remix.ethereum.org/',
+      },
+      metamask: {
+        ...mockState.metamask,
+        accounts: {
+          '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': {
+            balance: '0x346ba7725f412cbfdb',
+            address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+          },
+        },
+      },
+    });
+    const props = { onClose: () => jest.fn() };
+    const { container } = renderWithProvider(
+      <AccountListMenu {...props} />,
+      mockStore,
+    );
+    const searchBox = container.querySelector('input[type=search]');
+    expect(searchBox).not.toBeInTheDocument();
+  });
+
+  it('should render search bar when there is more than one account', () => {
+    render();
+    const searchBox = document.querySelector('input[type=search]');
+    expect(searchBox).toBeInTheDocument();
+  });
 });