fix: Show an orange badge if mfa is not enabled

safe-global · Oct 31, 2023 · 356b40b · 356b40b
1 parent f69f536
commit 356b40b
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 8 deletions.
diff --git a/src/components/common/ConnectWallet/ConnectionCenter.tsx b/src/components/common/ConnectWallet/ConnectionCenter.tsx
@@ -7,11 +7,8 @@ import KeyholeIcon from '@/components/common/icons/KeyholeIcon'
 import WalletDetails from '@/components/common/ConnectWallet/WalletDetails'
 
 import css from '@/components/common/ConnectWallet/styles.module.css'
-import { useCurrentChain } from '@/hooks/useChains'
 
 const ConnectionCenter = (): ReactElement => {
-  const chain = useCurrentChain()
-
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
   const open = !!anchorEl
 

diff --git a/src/components/common/ConnectWallet/styles.module.css b/src/components/common/ConnectWallet/styles.module.css
@@ -8,6 +8,7 @@
   align-items: center;
   text-align: left;
   gap: var(--space-1);
+  padding: 0 var(--space-2);
 }
 
 .popoverContainer {

diff --git a/src/components/common/SocialLoginInfo/index.tsx b/src/components/common/SocialLoginInfo/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography } from '@mui/material'
+import { Badge, Box, Typography } from '@mui/material'
 import css from './styles.module.css'
 import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { type ConnectedWallet } from '@/services/onboard'
@@ -28,7 +28,10 @@ const SocialLoginInfo = ({
 
   return (
     <Box width="100%" display="flex" flexDirection="row" alignItems="center" gap={1}>
-      <img src={userInfo.profileImage} className={css.profileImg} alt="Profile Image" referrerPolicy="no-referrer" />
+      <Box position="relative">
+        <img src={userInfo.profileImage} className={css.profileImg} alt="Profile Image" referrerPolicy="no-referrer" />
+        {!socialWalletService?.isMFAEnabled() && <Badge variant="dot" color="warning" className={css.bubble} />}
+      </Box>
       <div className={css.profileData}>
         <Typography className={css.text} variant="body2" fontWeight={700}>
           {userInfo.name}

diff --git a/src/components/common/SocialLoginInfo/styles.module.css b/src/components/common/SocialLoginInfo/styles.module.css
@@ -1,7 +1,19 @@
 .profileImg {
   border-radius: var(--space-2);
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
+  display: block;
+}
+
+.bubble {
+  content: '';
+  position: absolute;
+  right: 3px;
+  bottom: 3px;
+}
+
+.bubble span {
+  outline: 1px solid var(--color-background-paper);
 }
 
 .profileData {

diff --git a/src/components/common/WalletOverview/styles.module.css b/src/components/common/WalletOverview/styles.module.css
@@ -32,7 +32,7 @@
     display: none;
   }
 
-  .socialLoginInfo > div > div {
+  .socialLoginInfo > div > div:last-child {
     display: none;
   }
 }