Merge branch 'develop' into fix/23804-add-qr-connection-issue

Author: dawnseeker8

app/_locales/en/messages.json

@@ -52,165 +52,148 @@ exports[`Connections Content should render correctly 1`] = `
         class="mm-box multichain-page-content mm-box--padding-0 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--height-full"
       >
         <div
-          class="box tabs box--flex-direction-row"
+          class="mm-box"
         >
-          <ul
-            class="box tabs__list box--display-flex box--gap-1 box--flex-direction-row box--justify-content-flex-start box--background-color-background-default"
-          >
-            <li
-              class="box tab box--flex-direction-row"
-            >
-              <button
-                class="box box--padding-2 box--display-block box--flex-direction-row box--text-align-center box--width-full"
-              >
-                Connected accounts
-              </button>
-            </li>
-          </ul>
           <div
-            class="box tabs__content box--flex-direction-row"
+            class="mm-box multichain-account-list-item multichain-account-list-item--selected mm-box--padding-4 mm-box--display-flex mm-box--background-color-primary-muted"
           >
             <div
-              class="mm-box multichain-account-list-item multichain-account-list-item--selected mm-box--padding-4 mm-box--display-flex mm-box--background-color-primary-muted"
+              class="mm-box multichain-account-list-item__selected-indicator mm-box--background-color-primary-default mm-box--rounded-pill"
+            />
+            <div
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-account mm-text--body-sm mm-text--text-transform-uppercase mm-box--margin-inline-end-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
             >
               <div
-                class="mm-box multichain-account-list-item__selected-indicator mm-box--background-color-primary-default mm-box--rounded-pill"
-              />
-              <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-account mm-text--body-sm mm-text--text-transform-uppercase mm-box--margin-inline-end-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+                class="mm-avatar-account__jazzicon"
               >
                 <div
-                  class="mm-avatar-account__jazzicon"
+                  style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(250, 58, 0);"
                 >
-                  <div
-                    style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(250, 58, 0);"
+                  <svg
+                    height="32"
+                    width="32"
+                    x="0"
+                    y="0"
                   >
-                    <svg
+                    <rect
+                      fill="#18CDF2"
                       height="32"
+                      transform="translate(-1.04839350379394 -3.3042840694604987) rotate(328.9 16 16)"
                       width="32"
                       x="0"
                       y="0"
-                    >
-                      <rect
-                        fill="#18CDF2"
-                        height="32"
-                        transform="translate(-1.04839350379394 -3.3042840694604987) rotate(328.9 16 16)"
-                        width="32"
-                        x="0"
-                        y="0"
-                      />
-                      <rect
-                        fill="#035E56"
-                        height="32"
-                        transform="translate(-18.298461708832043 10.5924618717486) rotate(176.2 16 16)"
-                        width="32"
-                        x="0"
-                        y="0"
-                      />
-                      <rect
-                        fill="#F26602"
-                        height="32"
-                        transform="translate(16.667842018223922 -14.205139722997082) rotate(468.9 16 16)"
-                        width="32"
-                        x="0"
-                        y="0"
-                      />
-                    </svg>
-                  </div>
+                    />
+                    <rect
+                      fill="#035E56"
+                      height="32"
+                      transform="translate(-18.298461708832043 10.5924618717486) rotate(176.2 16 16)"
+                      width="32"
+                      x="0"
+                      y="0"
+                    />
+                    <rect
+                      fill="#F26602"
+                      height="32"
+                      transform="translate(16.667842018223922 -14.205139722997082) rotate(468.9 16 16)"
+                      width="32"
+                      x="0"
+                      y="0"
+                    />
+                  </svg>
                 </div>
               </div>
+            </div>
+            <div
+              class="mm-box multichain-account-list-item__content mm-box--display-flex mm-box--flex-direction-column"
+            >
               <div
-                class="mm-box multichain-account-list-item__content mm-box--display-flex mm-box--flex-direction-column"
+                class="mm-box mm-box--display-flex mm-box--flex-direction-column"
               >
                 <div
-                  class="mm-box mm-box--display-flex mm-box--flex-direction-column"
+                  class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
                 >
                   <div
-                    class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
+                    class="mm-box multichain-account-list-item__account-name mm-box--margin-inline-end-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
                   >
-                    <div
-                      class="mm-box multichain-account-list-item__account-name mm-box--margin-inline-end-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center"
+                    <button
+                      class="mm-box mm-text multichain-account-list-item__account-name__button mm-text--body-md-medium mm-text--ellipsis mm-text--text-align-left mm-box--padding-0 mm-box--width-full mm-box--color-text-default mm-box--background-color-transparent"
                     >
-                      <button
-                        class="mm-box mm-text multichain-account-list-item__account-name__button mm-text--body-md-medium mm-text--ellipsis mm-text--text-align-left mm-box--padding-0 mm-box--width-full mm-box--color-text-default mm-box--background-color-transparent"
-                      >
-                        Test Account
-                      </button>
-                    </div>
+                      Test Account
+                    </button>
+                  </div>
+                  <div
+                    class="mm-box mm-text multichain-account-list-item__asset mm-text--body-md mm-text--ellipsis mm-text--text-align-end mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-flex-end mm-box--align-items-center mm-box--color-text-default"
+                  >
                     <div
-                      class="mm-box mm-text multichain-account-list-item__asset mm-text--body-md mm-text--ellipsis mm-text--text-align-end mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-flex-end mm-box--align-items-center mm-box--color-text-default"
+                      class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
+                      title="$880.18 USD"
                     >
-                      <div
-                        class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
-                        title="$880.18 USD"
+                      <span
+                        class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
+                      >
+                        $880.18
+                      </span>
+                      <span
+                        class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
                       >
-                        <span
-                          class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
-                        >
-                          $880.18
-                        </span>
-                        <span
-                          class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
-                        >
-                          USD
-                        </span>
-                      </div>
+                        USD
+                      </span>
                     </div>
                   </div>
                 </div>
+              </div>
+              <div
+                class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
+              >
                 <div
-                  class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
+                  class="mm-box mm-box--display-flex mm-box--align-items-center"
+                >
+                  <p
+                    class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
+                  >
+                    0x0DCD5...3E7bc
+                  </p>
+                </div>
+                <div
+                  class="mm-box multichain-account-list-item__avatar-currency mm-box--display-flex mm-box--gap-1 mm-box--justify-content-center mm-box--align-items-center"
                 >
                   <div
-                    class="mm-box mm-box--display-flex mm-box--align-items-center"
+                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-token mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
                   >
-                    <p
-                      class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
-                    >
-                      0x0DCD5...3E7bc
-                    </p>
+                    E
                   </div>
                   <div
-                    class="mm-box multichain-account-list-item__avatar-currency mm-box--display-flex mm-box--gap-1 mm-box--justify-content-center mm-box--align-items-center"
+                    class="mm-box mm-text mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
                   >
                     <div
-                      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-token mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
-                    >
-                      E
-                    </div>
-                    <div
-                      class="mm-box mm-text mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
+                      class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
+                      title="966.988 ETH"
                     >
-                      <div
-                        class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
-                        title="966.988 ETH"
+                      <span
+                        class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
+                      >
+                        966.988
+                      </span>
+                      <span
+                        class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
                       >
-                        <span
-                          class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
-                        >
-                          966.988
-                        </span>
-                        <span
-                          class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
-                        >
-                          ETH
-                        </span>
-                      </div>
+                        ETH
+                      </span>
                     </div>
                   </div>
                 </div>
               </div>
-              <button
-                aria-label="Test Account Options"
-                class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
-                data-testid="account-list-item-menu-button"
-              >
-                <span
-                  class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
-                  style="mask-image: url('./images/icons/more-vertical.svg');"
-                />
-              </button>
             </div>
+            <button
+              aria-label="Test Account Options"
+              class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+              data-testid="account-list-item-menu-button"
+            >
+              <span
+                class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
+                style="mask-image: url('./images/icons/more-vertical.svg');"
+              />
+            </button>
           </div>
         </div>
       </div>

ui/components/multichain/pages/connections/__snapshots__/connections.test.tsx.snap

@@ -45,8 +45,6 @@ import {
   IconSize,
   Text,
 } from '../../../component-library';
-import { Tab } from '../../../ui/tabs';
-import Tabs from '../../../ui/tabs/tabs.component';
 import { mergeAccounts } from '../../account-list-menu/account-list-menu';
 import {
   AccountListItem,
@@ -89,7 +87,6 @@ export const Connections = () => {
     setShowDisconnectedAllAccountsUpdatedToast,
   ] = useState(false);
 
-  const CONNECTED_ACCOUNTS_TAB_KEY = 'connected-accounts';
   const activeTabOrigin: string = useSelector(getOriginOfCurrentTab);
   // TODO: Replace `any` with type
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -233,51 +230,41 @@ export const Connections = () => {
       </Header>
       <Content padding={0}>
         {connectedSubjectsMetadata && mergeAccounts.length > 0 ? (
-          <Tabs defaultActiveTabKey="connections">
-            {
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore
-              <Tab
-                tabKey={CONNECTED_ACCOUNTS_TAB_KEY}
-                name={t('connectedaccountsTabKey')}
-                padding={4}
-              >
-                {/* TODO: Replace `any` with type */}
-                {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-                {mergedAccounts.map((account: AccountType, index: any) => {
-                  const connectedSites: ConnectedSites = {};
-                  const connectedSite = connectedSites[account.address]?.find(
-                    ({ origin }) => origin === activeTabOrigin,
-                  );
-                  const isSelectedAccount =
-                    selectedAccount.address === account.address;
-                  // Match the index of latestSelected Account with the index of all the accounts and set the active status
-                  let mergedAccountsProps;
-                  if (index === latestSelected) {
-                    mergedAccountsProps = { ...account, isAccountActive: true };
-                  } else {
-                    mergedAccountsProps = { ...account };
+          <Box>
+            {/* TODO: Replace `any` with type */}
+            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+            {mergedAccounts.map((account: AccountType, index: any) => {
+              const connectedSites: ConnectedSites = {};
+              const connectedSite = connectedSites[account.address]?.find(
+                ({ origin }) => origin === activeTabOrigin,
+              );
+              const isSelectedAccount =
+                selectedAccount.address === account.address;
+              // Match the index of latestSelected Account with the index of all the accounts and set the active status
+              let mergedAccountsProps;
+              if (index === latestSelected) {
+                mergedAccountsProps = { ...account, isAccountActive: true };
+              } else {
+                mergedAccountsProps = { ...account };
+              }
+              return (
+                <AccountListItem
+                  identity={mergedAccountsProps}
+                  key={account.address}
+                  accountsCount={mergedAccounts.length}
+                  selected={isSelectedAccount}
+                  connectedAvatar={connectedSite?.iconUrl}
+                  connectedAvatarName={connectedSite?.name}
+                  menuType={AccountListItemMenuTypes.Connection}
+                  currentTabOrigin={activeTabOrigin}
+                  isActive={
+                    mergedAccountsProps.isAccountActive ? t('active') : null
                   }
-                  return (
-                    <AccountListItem
-                      identity={mergedAccountsProps}
-                      key={account.address}
-                      accountsCount={mergedAccounts.length}
-                      selected={isSelectedAccount}
-                      connectedAvatar={connectedSite?.iconUrl}
-                      connectedAvatarName={connectedSite?.name}
-                      menuType={AccountListItemMenuTypes.Connection}
-                      currentTabOrigin={activeTabOrigin}
-                      isActive={
-                        mergedAccountsProps.isAccountActive ? t('active') : null
-                      }
-                      onActionClick={setShowAccountDisconnectedToast}
-                    />
-                  );
-                })}
-              </Tab>
-            }
-          </Tabs>
+                  onActionClick={setShowAccountDisconnectedToast}
+                />
+              );
+            })}
+          </Box>
         ) : (
           <NoConnectionContent />
         )}