UX: added badge status in account list

ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap

@@ -6,45 +6,49 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
     class="mm-box multichain-account-list-item mm-box--padding-4 mm-box--display-flex mm-box--background-color-transparent"
   >
     <div
-      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm 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-box mm-box--display-none mm-box--sm:display-flex"
     >
       <div
-        class="mm-avatar-account__jazzicon"
+        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
-          style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 24px; height: 24px; display: inline-block; background: rgb(250, 58, 0);"
+          class="mm-avatar-account__jazzicon"
         >
-          <svg
-            height="24"
-            width="24"
-            x="0"
-            y="0"
+          <div
+            style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(250, 58, 0);"
           >
-            <rect
-              fill="#18CDF2"
-              height="24"
-              transform="translate(-0.786295127845455 -2.478213052095374) rotate(328.9 12 12)"
-              width="24"
-              x="0"
-              y="0"
-            />
-            <rect
-              fill="#035E56"
-              height="24"
-              transform="translate(-13.723846281624033 7.94434640381145) rotate(176.2 12 12)"
-              width="24"
+            <svg
+              height="32"
+              width="32"
               x="0"
               y="0"
-            />
-            <rect
-              fill="#F26602"
-              height="24"
-              transform="translate(12.500881513667943 -10.653854792247811) rotate(468.9 12 12)"
-              width="24"
-              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="#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>

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

@@ -56,6 +56,7 @@ import {
 } from '../../../selectors';
 import { useAccountTotalFiatBalance } from '../../../hooks/useAccountTotalFiatBalance';
 import { TEST_NETWORKS } from '../../../../shared/constants/network';
+import { ConnectedStatus } from '../connected-status/connected-status';
 
 const MAXIMUM_CURRENCY_DECIMALS = 3;
 const MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP = 17;
@@ -71,14 +72,15 @@ export const AccountListItem = ({
   showOptions = false,
   isHidden = false,
   currentTabOrigin,
+  isActive = false,
 }) => {
   const t = useI18nContext();
   const [accountOptionsMenuOpen, setAccountOptionsMenuOpen] = useState(false);
   const [accountListItemMenuElement, setAccountListItemMenuElement] =
     useState();
+
   const useBlockie = useSelector(getUseBlockie);
   const currentNetwork = useSelector(getCurrentNetwork);
-
   const setAccountListItemMenuRef = (ref) => {
     setAccountListItemMenuElement(ref);
   };
@@ -140,17 +142,27 @@ export const AccountListItem = ({
           backgroundColor={Color.primaryDefault}
         />
       )}
-      <AvatarAccount
-        borderColor={BorderColor.transparent}
-        size={Size.SM}
-        address={identity.address}
-        variant={
-          useBlockie
-            ? AvatarAccountVariant.Blockies
-            : AvatarAccountVariant.Jazzicon
-        }
-        marginInlineEnd={2}
-      />
+      {process.env.MULTICHAIN && (
+        <Box
+          display={[Display.Flex, Display.None]}
+          data-testid="account-list-item-badge"
+        >
+          <ConnectedStatus address={identity.address} isActive={isActive} />
+        </Box>
+      )}
+      <Box display={[Display.None, Display.Flex]}>
+        <AvatarAccount
+          borderColor={BorderColor.transparent}
+          size={Size.MD}
+          address={identity.address}
+          variant={
+            useBlockie
+              ? AvatarAccountVariant.Blockies
+              : AvatarAccountVariant.Jazzicon
+          }
+          marginInlineEnd={2}
+        />
+      </Box>
       <Box
         display={Display.Flex}
         flexDirection={FlexDirection.Column}
@@ -380,6 +392,10 @@ AccountListItem.propTypes = {
    * Represents current tab origin
    */
   currentTabOrigin: PropTypes.string,
+  /**
+   * Represents active accounts
+   */
+  isActive: PropTypes.bool,
 };
 
 AccountListItem.displayName = 'AccountListItem';

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

@@ -29,7 +29,11 @@ const render = (props = {}) => {
       ...mockState.metamask,
     },
     activeTab: {
-      origin: 'https://uniswap.org/',
+      id: 113,
+      title: 'E2E Test Dapp',
+      origin: 'https://metamask.github.io',
+      protocol: 'https:',
+      url: 'https://metamask.github.io/test-dapp/',
     },
   });
   const allProps = { ...DEFAULT_PROPS, ...props };

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

@@ -423,6 +423,7 @@ export const AccountListMenu = ({
                       isPinned={Boolean(account.pinned)}
                       isHidden={Boolean(account.hidden)}
                       currentTabOrigin={currentTabOrigin}
+                      isActive={Boolean(account.active)}
                       {...accountListItemProps}
                     />
                   </Box>

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

@@ -23,13 +23,44 @@ jest.mock('../../../../app/scripts/lib/util', () => ({
 const render = (props = { onClose: () => jest.fn() }) => {
   const store = configureStore({
     ...mockState,
+    metamask: {
+      ...mockState.metamask,
+      permissionHistory: {
+        'https://test.dapp': {
+          eth_accounts: {
+            accounts: {
+              '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': 1596681857076,
+            },
+          },
+        },
+      },
+      subjects: {
+        'https://test.dapp': {
+          permissions: {
+            eth_accounts: {
+              caveats: [
+                {
+                  type: 'restrictReturnedAccounts',
+                  value: ['0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc'],
+                },
+              ],
+              invoker: 'https://test.dapp',
+              parentCapability: 'eth_accounts',
+            },
+          },
+        },
+      },
+    },
     activeTab: {
       id: 113,
       title: 'E2E Test Dapp',
       origin: 'https://metamask.github.io',
       protocol: 'https:',
       url: 'https://metamask.github.io/test-dapp/',
     },
+    unconnectedAccount: {
+      state: 'OPEN',
+    },
   });
   return renderWithProvider(<AccountListMenu {...props} />, store);
 };
@@ -96,8 +127,36 @@ describe('AccountListMenu', () => {
         protocol: 'https:',
         url: 'https://remix.ethereum.org/',
       },
+      unconnectedAccount: {
+        state: 'OPEN',
+      },
       metamask: {
         ...mockState.metamask,
+        permissionHistory: {
+          'https://test.dapp': {
+            eth_accounts: {
+              accounts: {
+                '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': 1596681857076,
+              },
+            },
+          },
+        },
+        subjects: {
+          'https://test.dapp': {
+            permissions: {
+              eth_accounts: {
+                caveats: [
+                  {
+                    type: 'restrictReturnedAccounts',
+                    value: ['0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc'],
+                  },
+                ],
+                invoker: 'https://test.dapp',
+                parentCapability: 'eth_accounts',
+              },
+            },
+          },
+        },
         accounts: {
           '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': {
             balance: '0x346ba7725f412cbfdb',
@@ -200,6 +259,31 @@ describe('AccountListMenu', () => {
           metamask: {
             ...mockState.metamask,
             ...state,
+            permissionHistory: {
+              'https://test.dapp': {
+                eth_accounts: {
+                  accounts: {
+                    '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': 1596681857076,
+                  },
+                },
+              },
+            },
+            subjects: {
+              'https://test.dapp': {
+                permissions: {
+                  eth_accounts: {
+                    caveats: [
+                      {
+                        type: 'restrictReturnedAccounts',
+                        value: ['0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc'],
+                      },
+                    ],
+                    invoker: 'https://test.dapp',
+                    parentCapability: 'eth_accounts',
+                  },
+                },
+              },
+            },
           },
         },
         activeTab: {
@@ -273,8 +357,36 @@ describe('AccountListMenu', () => {
         protocol: 'https:',
         url: 'https://remix.ethereum.org/',
       },
+      unconnectedAccount: {
+        state: 'OPEN',
+      },
       metamask: {
         ...mockState.metamask,
+        permissionHistory: {
+          'https://test.dapp': {
+            eth_accounts: {
+              accounts: {
+                '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': 1596681857076,
+              },
+            },
+          },
+        },
+        subjects: {
+          'https://test.dapp': {
+            permissions: {
+              eth_accounts: {
+                caveats: [
+                  {
+                    type: 'restrictReturnedAccounts',
+                    value: ['0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc'],
+                  },
+                ],
+                invoker: 'https://test.dapp',
+                parentCapability: 'eth_accounts',
+              },
+            },
+          },
+        },
         internalAccounts: {
           ...mockState.metamask.internalAccounts,
           accounts: {
@@ -312,6 +424,31 @@ describe('AccountListMenu', () => {
       },
       metamask: {
         ...mockState.metamask,
+        permissionHistory: {
+          'https://test.dapp': {
+            eth_accounts: {
+              accounts: {
+                '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': 1596681857076,
+              },
+            },
+          },
+        },
+        subjects: {
+          'https://test.dapp': {
+            permissions: {
+              eth_accounts: {
+                caveats: [
+                  {
+                    type: 'restrictReturnedAccounts',
+                    value: ['0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc'],
+                  },
+                ],
+                invoker: 'https://test.dapp',
+                parentCapability: 'eth_accounts',
+              },
+            },
+          },
+        },
         internalAccounts: {
           ...mockState.metamask.internalAccounts,
           accounts: {

ui/components/multichain/badge-status/__snapshots__/badge-status.test.js.snap

@@ -3,7 +3,7 @@
 exports[`Badge Status should render correctly 1`] = `
 <div>
   <button
-    class="mm-box multichain-badge-status mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--background-color-background-default"
+    class="mm-box multichain-badge-status mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--background-color-transparent"
     data-testid="multichain-badge-status"
   >
     <div>

ui/components/multichain/badge-status/badge-status.tsx

@@ -40,7 +40,7 @@ export const BadgeStatus: React.FC<BadgeStatusProps> = ({
       display={Display.Flex}
       alignItems={AlignItems.center}
       justifyContent={JustifyContent.center}
-      backgroundColor={BackgroundColor.backgroundDefault}
+      backgroundColor={BackgroundColor.transparent}
       {...(props as BoxProps<'div'>)}
     >
       <Tooltip

ui/components/multichain/badge-status/index.scss

@@ -7,7 +7,8 @@
     z-index: 1;
   }
 
-  .mm-badge-wrapper__badge-container { //Need to override the zIndex, can't do it with badgeProps.
+  .mm-badge-wrapper__badge-container {
+    //Need to override the zIndex, can't do it with badgeProps.
     z-index: 1;
   }