feat: Implement account center redesign

safe-global · Oct 10, 2023 · f603cd8 · f603cd8
1 parent 5ab369e
commit f603cd8
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 41 deletions.
diff --git a/public/images/common/lock.svg b/public/images/common/lock.svg
diff --git a/src/components/common/ConnectWallet/AccountCenter.tsx b/src/components/common/ConnectWallet/AccountCenter.tsx
@@ -1,18 +1,20 @@
 import type { MouseEvent } from 'react'
 import { useState } from 'react'
-import { Box, Button, ButtonBase, Paper, Popover, Typography } from '@mui/material'
+import { Box, Button, ButtonBase, Paper, Popover } from '@mui/material'
 import css from '@/components/common/ConnectWallet/styles.module.css'
 import EthHashInfo from '@/components/common/EthHashInfo'
 import ExpandLessIcon from '@mui/icons-material/ExpandLess'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import useOnboard, { switchWallet } from '@/hooks/wallets/useOnboard'
 import { useAppSelector } from '@/store'
 import { selectChainById } from '@/store/chainsSlice'
-import Identicon from '@/components/common/Identicon'
 import ChainSwitcher from '../ChainSwitcher'
 import useAddressBook from '@/hooks/useAddressBook'
 import { type ConnectedWallet } from '@/hooks/wallets/useOnboard'
-import WalletInfo, { UNKNOWN_CHAIN_NAME } from '../WalletInfo'
+import WalletInfo from '../WalletInfo'
+import ChainIndicator from '@/components/common/ChainIndicator'
+import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/module'
+import SocialLoginInfo from '@/components/common/SocialLoginInfo'
 
 const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
@@ -77,31 +79,21 @@ const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
         sx={{ marginTop: 1 }}
       >
         <Paper className={css.popoverContainer}>
-          <Identicon address={wallet.address} />
-
-          <Typography variant="h5" className={css.addressName}>
-            {addressBook[wallet.address] || wallet.ens}
-          </Typography>
-
-          <Box bgcolor="border.background" px={2} py={1} fontSize={14}>
-            <EthHashInfo
-              address={wallet.address}
-              showAvatar={false}
-              showName={false}
-              hasExplorer
-              showCopyButton
-              prefix={prefix}
-            />
-          </Box>
-
-          <Box className={css.rowContainer}>
-            <Box className={css.row}>
-              <Typography variant="caption">Wallet</Typography>
-              <Typography variant="body2">{wallet.label}</Typography>
-            </Box>
-            <Box className={css.row}>
-              <Typography variant="caption">Connected network</Typography>
-              <Typography variant="body2">{chainInfo?.chainName || UNKNOWN_CHAIN_NAME}</Typography>
+          <Box className={css.accountContainer}>
+            <ChainIndicator />
+            <Box className={css.addressContainer}>
+              {wallet.label === ONBOARD_MPC_MODULE_LABEL ? (
+                <SocialLoginInfo wallet={wallet} chainInfo={chainInfo} />
+              ) : (
+                <EthHashInfo
+                  address={wallet.address}
+                  name={addressBook[wallet.address] || wallet.ens}
+                  hasExplorer
+                  showCopyButton
+                  prefix={prefix}
+                  avatarSize={32}
+                />
+              )}
             </Box>
           </Box>
 

diff --git a/src/components/common/ConnectWallet/MPCLogin.tsx b/src/components/common/ConnectWallet/MPCLogin.tsx
@@ -34,7 +34,7 @@ const MPCLogin = ({ onLogin }: { onLogin?: () => void }) => {
         <>
           <Button
             variant="outlined"
-            sx={{ padding: '1 2' }}
+            sx={{ padding: '1 2', borderWidth: '1px !important' }}
             onClick={onLogin}
             size="small"
             disabled={loginPending}
@@ -65,7 +65,14 @@ const MPCLogin = ({ onLogin }: { onLogin?: () => void }) => {
           </Button>
         </>
       ) : (
-        <Button variant="outlined" onClick={login} size="small" disabled={loginPending} fullWidth>
+        <Button
+          variant="outlined"
+          onClick={login}
+          size="small"
+          disabled={loginPending}
+          fullWidth
+          sx={{ borderWidth: '1px !important' }}
+        >
           <Box display="flex" flexDirection="row" alignItems="center" gap={1}>
             <SvgIcon component={GoogleLogo} inheritViewBox fontSize="medium" /> Continue with Google
           </Box>

diff --git a/src/components/common/ConnectWallet/WalletDetails.tsx b/src/components/common/ConnectWallet/WalletDetails.tsx
@@ -1,9 +1,10 @@
-import { Button, Typography } from '@mui/material'
+import { Button, Divider, Typography } from '@mui/material'
 import type { ReactElement } from 'react'
 
-import KeyholeIcon from '@/components/common/icons/KeyholeIcon'
+import LockIcon from '@/public/images/common/lock.svg'
 import useConnectWallet from '@/components/common/ConnectWallet/useConnectWallet'
 import MPCLogin from './MPCLogin'
+import css from './styles.module.css'
 
 const WalletDetails = ({ onConnect }: { onConnect?: () => void }): ReactElement => {
   const connectWallet = useConnectWallet()
@@ -15,14 +16,26 @@ const WalletDetails = ({ onConnect }: { onConnect?: () => void }): ReactElement
 
   return (
     <>
-      <Typography variant="h5">Connect a wallet</Typography>
-
-      <KeyholeIcon />
-
-      <Button onClick={handleConnect} variant="contained" size="small" disableElevation fullWidth>
-        Connect
+      <LockIcon />
+
+      <Button
+        onClick={handleConnect}
+        className={css.loginButton}
+        variant="contained"
+        size="small"
+        disableElevation
+        fullWidth
+        sx={{ mt: 1 }}
+      >
+        Connect a wallet
       </Button>
 
+      <Divider sx={{ width: '100%' }}>
+        <Typography color="text.secondary" fontWeight={700} variant="overline">
+          or
+        </Typography>
+      </Divider>
+
       <MPCLogin />
     </>
   )

diff --git a/src/components/common/ConnectWallet/styles.module.css b/src/components/common/ConnectWallet/styles.module.css
@@ -12,11 +12,11 @@
 
 .popoverContainer {
   padding: var(--space-2);
-  width: 250px;
+  width: 300px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--space-2);
+  gap: var(--space-1);
   border: 1px solid var(--color-border-light);
 }
 
@@ -66,6 +66,27 @@
   gap: var(--space-2);
 }
 
+.loginButton {
+  min-height: 42px;
+}
+
+.accountContainer {
+  width: 100%;
+  margin-bottom: var(--space-1);
+}
+
+.accountContainer > span {
+  border-radius: 8px 8px 0 0;
+}
+
+.addressContainer {
+  border-radius: 0 0 8px 8px;
+  padding: 12px;
+  border: 1px solid var(--color-border-light);
+  border-top: 0;
+  font-size: 14px;
+}
+
 @media (max-width: 599.95px) {
   .buttonContainer {
     transform: scale(0.8);

diff --git a/src/components/common/SocialLoginInfo/index.tsx b/src/components/common/SocialLoginInfo/index.tsx
@@ -0,0 +1,42 @@
+import { Box, Typography } from '@mui/material'
+import css from './styles.module.css'
+import { useContext } from 'react'
+import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import { type ConnectedWallet } from '@/services/onboard'
+import { MpcWalletContext } from '@/components/common/ConnectWallet/MPCWalletProvider'
+import CopyAddressButton from '@/components/common/CopyAddressButton'
+import ExplorerButton from '@/components/common/ExplorerButton'
+import { getBlockExplorerLink } from '@/utils/chains'
+import { useAppSelector } from '@/store'
+import { selectSettings } from '@/store/settingsSlice'
+
+const SocialLoginInfo = ({ wallet, chainInfo }: { wallet: ConnectedWallet; chainInfo?: ChainInfo }) => {
+  const { userInfo } = useContext(MpcWalletContext)
+  const prefix = chainInfo?.shortName
+  const link = chainInfo ? getBlockExplorerLink(chainInfo, wallet.address) : undefined
+  const settings = useAppSelector(selectSettings)
+
+  if (!userInfo) return <></>
+
+  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" />
+      <div className={css.profileData}>
+        <Typography className={css.text} variant="body2" fontWeight={700}>
+          {userInfo.name}
+        </Typography>
+        <Typography className={css.text} variant="body2">
+          {userInfo.email}
+        </Typography>
+      </div>
+      <div className={css.actionButtons}>
+        <Box color="border.main">
+          <CopyAddressButton prefix={prefix} copyPrefix={settings.shortName.copy} address={wallet.address} />
+          <ExplorerButton title={link?.title || ''} href={link?.href || ''} />
+        </Box>
+      </div>
+    </Box>
+  )
+}
+
+export default SocialLoginInfo
diff --git a/src/components/common/SocialLoginInfo/styles.module.css b/src/components/common/SocialLoginInfo/styles.module.css
@@ -0,0 +1,23 @@
+.profileImg {
+  border-radius: var(--space-2);
+  width: 32px;
+  height: 32px;
+}
+
+.profileData {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+}
+
+.text {
+  font-size: 12px;
+  line-height: 14px;
+}
+
+.actionButtons {
+  display: flex;
+  justify-self: flex-end;
+  margin-left: auto;
+}
diff --git a/src/components/welcome/WelcomeLogin/WalletLogin.tsx b/src/components/welcome/WelcomeLogin/WalletLogin.tsx
@@ -47,7 +47,7 @@ const WalletLogin = ({ onLogin }: { onLogin?: () => void }) => {
   }
 
   return (
-    <Button onClick={login} sx={{ minHeight: '44px' }} variant="contained" size="small" disableElevation fullWidth>
+    <Button onClick={login} sx={{ minHeight: '42px' }} variant="contained" size="small" disableElevation fullWidth>
       Connect wallet
     </Button>
   )