feat: add walletconnect icon badge to session avatars

src/extension/components/ManageSessionModal/ManageSessionModal.tsx

@@ -21,42 +21,43 @@ import React, { ChangeEvent, FC, ReactNode, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
-// Components
+// components
 import Button from '@extension/components/Button';
 import ChainBadge from '@extension/components/ChainBadge';
 import EmptyState from '@extension/components/EmptyState';
+import SessionAvatar from '@extension/components/SessionAvatar';
 import Warning from '@extension/components/Warning';
 
-// Constants
+// constants
 import { DEFAULT_GAP } from '@extension/constants';
 
-// Features
+// features
 import {
   removeSessionByIdThunk,
   setSessionThunk,
 } from '@extension/features/sessions';
 
-// Hooks
+// hooks
 import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
 import usePrimaryColorScheme from '@extension/hooks/usePrimaryColorScheme';
 import useSubTextColor from '@extension/hooks/useSubTextColor';
 import useTextBackgroundColor from '@extension/hooks/useTextBackgroundColor';
 
-// Selectors
+// selectors
 import {
   useSelectAccounts,
   useSelectFetchingAccounts,
   useSelectNetworks,
   useSelectSavingSessions,
 } from '@extension/selectors';
 
-// Services
+// services
 import { AccountService } from '@extension/services';
 
-// Theme
+// theme
 import { theme } from '@extension/theme';
 
-// Types
+// types
 import {
   IAccount,
   IAccountInformation,
@@ -65,7 +66,7 @@ import {
   ISession,
 } from '@extension/types';
 
-// Utils
+// utils
 import { ellipseAddress } from '@extension/utils';
 
 interface IProps {
@@ -241,6 +242,7 @@ const ManageSessionModal: FC<IProps> = ({ onClose, session }: IProps) => {
       return (
         <VStack alignItems="center" spacing={5} w="full">
           <SkeletonCircle size="12" />
+
           <VStack
             alignItems="center"
             justifyContent="flex-start"
@@ -252,11 +254,13 @@ const ManageSessionModal: FC<IProps> = ({ onClose, session }: IProps) => {
                 {faker.animal.cetacean()}
               </Text>
             </Skeleton>
+
             <Skeleton w="full">
               <Text color={defaultTextColor} fontSize="xs" textAlign="center">
                 {faker.animal.cetacean()}
               </Text>
             </Skeleton>
+
             <Skeleton w="full">
               <Text color={defaultTextColor} fontSize="xs" textAlign="center">
                 {faker.animal.cetacean()}
@@ -269,25 +273,33 @@ const ManageSessionModal: FC<IProps> = ({ onClose, session }: IProps) => {
 
     return (
       <VStack alignItems="center" spacing={5} w="full">
-        {/* App icon */}
-        <Avatar name={session.appName} src={session.iconUrl || undefined} />
+        {/*app icon*/}
+        <SessionAvatar
+          iconUrl={session.iconUrl || undefined}
+          name={session.appName}
+          isWalletConnect={!!session.walletConnectMetadata}
+        />
+        {/*<Avatar name={session.appName} src={session.iconUrl || undefined} />*/}
+
         <VStack
           alignItems="center"
           justifyContent="flex-start"
           spacing={2}
           w="full"
         >
-          {/* App name */}
+          {/*app name*/}
           <Heading color={defaultTextColor} size="md" textAlign="center">
             {session.appName}
           </Heading>
-          {/* App description */}
+
+          {/*app description*/}
           {session.description && (
             <Text color={defaultTextColor} fontSize="sm" textAlign="center">
               {session.description}
             </Text>
           )}
-          {/* App host */}
+
+          {/*app host*/}
           <Box
             backgroundColor={textBackgroundColor}
             borderRadius={theme.radii['3xl']}
@@ -298,13 +310,16 @@ const ManageSessionModal: FC<IProps> = ({ onClose, session }: IProps) => {
               {session.host}
             </Text>
           </Box>
-          {/* Network */}
+
+          {/*network*/}
           {network && <ChainBadge network={network} />}
-          {/* Creation date */}
+
+          {/*creation date*/}
           <Text color={defaultTextColor} fontSize="xs" textAlign="center">
             {new Date(session.createdAt).toLocaleString()}
           </Text>
-          {/* Remove warning */}
+
+          {/*remove warning*/}
           {authorizedAddresses.length <= 0 && (
             <Warning
               message={t<string>('captions.removeAllAccountsWarning')}
@@ -342,7 +357,9 @@ const ManageSessionModal: FC<IProps> = ({ onClose, session }: IProps) => {
         <ModalHeader justifyContent="center" px={DEFAULT_GAP}>
           {renderHeader()}
         </ModalHeader>
+
         <ModalBody px={DEFAULT_GAP}>{renderContent()}</ModalBody>
+
         <ModalFooter p={DEFAULT_GAP}>
           <HStack spacing={4} w="full">
             <Button
@@ -353,6 +370,7 @@ const ManageSessionModal: FC<IProps> = ({ onClose, session }: IProps) => {
             >
               {t<string>('buttons.cancel')}
             </Button>
+
             <Button
               isLoading={saving}
               onClick={handleSaveClick}

src/extension/components/SessionAvatar/SessionAvatar.tsx

@@ -0,0 +1,61 @@
+import { Avatar, Box, Flex } from '@chakra-ui/react';
+import React, { FC } from 'react';
+
+// components
+import WalletConnectIcon from '@extension/components/WalletConnectIcon';
+
+interface IProps {
+  iconUrl?: string;
+  isWalletConnect?: boolean;
+  name: string;
+  size?: 'sm' | 'md';
+}
+
+const SessionAvatar: FC<IProps> = ({
+  iconUrl,
+  isWalletConnect = false,
+  name,
+  size = 'md',
+}: IProps) => {
+  let walletConnectContainerSize: number = 5;
+  let walletConnectIconSize: number = 4;
+
+  switch (size) {
+    case 'sm':
+      walletConnectContainerSize = 4;
+      walletConnectIconSize = 3;
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <Box position="relative" p={1}>
+      {/*app icon */}
+      <Avatar name={name} size={size} src={iconUrl} />
+
+      {/*walletconnect badge*/}
+      {isWalletConnect && (
+        <Flex
+          alignItems="center"
+          bg="walletConnect.500"
+          borderRadius="var(--chakra-radii-full)"
+          bottom={0}
+          h={walletConnectContainerSize}
+          justifyContent="center"
+          position="absolute"
+          right={0}
+          w={walletConnectContainerSize}
+        >
+          <WalletConnectIcon
+            color="white"
+            h={walletConnectIconSize}
+            w={walletConnectIconSize}
+          />
+        </Flex>
+      )}
+    </Box>
+  );
+};
+
+export default SessionAvatar;

src/extension/components/SessionAvatar/index.ts

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

src/extension/components/SessionRequestHeader/SessionRequestHeader.tsx

@@ -1,25 +1,27 @@
 import { Avatar, Box, Heading, HStack, Text, VStack } from '@chakra-ui/react';
 import React, { FC } from 'react';
 
-// Components
+// components
 import ChainBadge from '@extension/components/ChainBadge';
+import SessionAvatar from '@extension/components/SessionAvatar';
 
-// Hooks
+// hooks
 import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
 import useSubTextColor from '@extension/hooks/useSubTextColor';
 import useTextBackgroundColor from '@extension/hooks/useTextBackgroundColor';
 
-// Theme
+// theme
 import { theme } from '@extension/theme';
 
-// Types
+// types
 import { INetwork } from '@extension/types';
 
 interface IProps {
   caption: string;
   description?: string;
   host: string;
   iconUrl?: string;
+  isWalletConnect?: boolean;
   name: string;
   network?: INetwork;
 }
@@ -29,6 +31,7 @@ const SessionRequestHeader: FC<IProps> = ({
   description,
   host,
   iconUrl,
+  isWalletConnect = false,
   name,
   network,
 }: IProps) => {
@@ -41,7 +44,12 @@ const SessionRequestHeader: FC<IProps> = ({
     <VStack alignItems="center" spacing={5} w="full">
       <HStack alignItems="center" justifyContent="center" spacing={4} w="full">
         {/*app icon */}
-        <Avatar name={name} size="sm" src={iconUrl || undefined} />
+        {/*<Avatar name={name} size="sm" src={iconUrl} />*/}
+        <SessionAvatar
+          iconUrl={iconUrl}
+          name={name}
+          isWalletConnect={isWalletConnect}
+        />
 
         {/*app name*/}
         <Heading color={defaultTextColor} size="md" textAlign="center">

src/extension/components/SettingsSessionItem/SettingsSessionItem.tsx

@@ -1,5 +1,4 @@
 import {
-  Avatar,
   HStack,
   Icon,
   Menu,
@@ -18,18 +17,19 @@ import {
   IoUnlinkOutline,
 } from 'react-icons/io5';
 
-// Components
+// components
 import ChainBadge from '@extension/components/ChainBadge';
 import IconButton from '@extension/components/IconButton';
+import SessionAvatar from '@extension/components/SessionAvatar';
 
-// Hooks
+// hooks
 import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
 import useSubTextColor from '@extension/hooks/useSubTextColor';
 
-// Selectors
+// selectors
 import { useSelectNetworkByGenesisHash } from '@extension/selectors';
 
-// Types
+// types
 import { INetwork, ISession } from '@extension/types';
 
 interface IProps {
@@ -54,20 +54,22 @@ const SettingsSessionItem: FC<IProps> = ({
 
   return (
     <HStack m={0} pt={2} px={4} spacing={2} w="full">
-      {/* App icon */}
-      {session.iconUrl ? (
-        <Avatar name={session.appName} size="sm" src={session.iconUrl} />
-      ) : (
-        <Avatar name={session.appName} size="sm" />
-      )}
-      {/* App name/description/creation date */}
+      {/*app icon*/}
+      <SessionAvatar
+        name={session.appName}
+        iconUrl={session.iconUrl || undefined}
+        isWalletConnect={!!session.walletConnectMetadata}
+        size="sm"
+      />
+
+      {/*app name/description/creation date*/}
       <VStack
         alignItems="flex-start"
         flexGrow={1}
         justifyContent="space-evenly"
         spacing={0}
       >
-        {/* App name */}
+        {/*app name*/}
         <Tooltip label={session.appName}>
           <Text
             color={defaultTextColor}
@@ -79,7 +81,8 @@ const SettingsSessionItem: FC<IProps> = ({
             {session.appName}
           </Text>
         </Tooltip>
-        {/* App description */}
+
+        {/*app description*/}
         {session.description && (
           <Tooltip label={session.description}>
             <Text
@@ -93,7 +96,8 @@ const SettingsSessionItem: FC<IProps> = ({
             </Text>
           </Tooltip>
         )}
-        {/* Chain badge and creation date */}
+
+        {/*chain badge and creation date*/}
         <HStack
           alignItems="center"
           justifyContent="space-between"
@@ -112,7 +116,8 @@ const SettingsSessionItem: FC<IProps> = ({
           {network && <ChainBadge network={network} size="xs" />}
         </HStack>
       </VStack>
-      {/* Overflow menu */}
+
+      {/*overflow menu*/}
       <Menu>
         <MenuButton
           as={IconButton}