From b2e06dfe8817824aed1d793070ad55abbb40e8a0 Mon Sep 17 00:00:00 2001
From: Usame Algan <usame@safe.global>
Date: Fri, 20 Oct 2023 16:16:16 +0200
Subject: [PATCH] fix: Style component

---
 .../common/ConnectWallet/AccountCenter.tsx    | 13 ++++++--
 src/components/common/WalletBalance/index.tsx | 18 ++++++++++
 src/components/common/WalletInfo/index.tsx    | 33 +++++++++----------
 .../common/WalletInfo/styles.module.css       | 31 +++++++++++++++++
 4 files changed, 75 insertions(+), 20 deletions(-)
 create mode 100644 src/components/common/WalletBalance/index.tsx

diff --git a/src/components/common/ConnectWallet/AccountCenter.tsx b/src/components/common/ConnectWallet/AccountCenter.tsx
index d9d13a4e07..f4a86686e9 100644
--- a/src/components/common/ConnectWallet/AccountCenter.tsx
+++ b/src/components/common/ConnectWallet/AccountCenter.tsx
@@ -1,6 +1,6 @@
 import type { MouseEvent } from 'react'
 import { useState } from 'react'
-import { Box, Button, ButtonBase, Paper, Popover, Skeleton, Typography } from '@mui/material'
+import { Box, Button, ButtonBase, Paper, Popover, Typography } 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'
@@ -13,12 +13,15 @@ import ChainSwitcher from '../ChainSwitcher'
 import useAddressBook from '@/hooks/useAddressBook'
 import { type ConnectedWallet } from '@/hooks/wallets/useOnboard'
 import WalletInfo, { UNKNOWN_CHAIN_NAME } from '../WalletInfo'
+import useWalletBalance from '@/hooks/wallets/useWalletBalance'
+import WalletBalance from '@/components/common/WalletBalance'
 
 const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
   const onboard = useOnboard()
   const chainInfo = useAppSelector((state) => selectChainById(state, wallet.chainId))
   const addressBook = useAddressBook()
+  const [balance] = useWalletBalance()
   const prefix = chainInfo?.shortName
 
   const handleSwitchWallet = () => {
@@ -53,7 +56,7 @@ const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
     <>
       <ButtonBase onClick={handleClick} aria-describedby={id} disableRipple sx={{ alignSelf: 'stretch' }}>
         <Box className={css.buttonContainer}>
-          <WalletInfo wallet={wallet} />
+          <WalletInfo wallet={wallet} balance={balance} />
 
           <Box display="flex" alignItems="center" justifyContent="flex-end" marginLeft="auto">
             {open ? <ExpandLessIcon color="border" /> : <ExpandMoreIcon color="border" />}
@@ -103,6 +106,12 @@ const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
               <Typography variant="caption">Connected network</Typography>
               <Typography variant="body2">{chainInfo?.chainName || UNKNOWN_CHAIN_NAME}</Typography>
             </Box>
+            <Box className={css.row}>
+              <Typography variant="caption">Balance</Typography>
+              <Typography variant="body2">
+                <WalletBalance chainInfo={chainInfo} balance={balance} />
+              </Typography>
+            </Box>
           </Box>
 
           <ChainSwitcher fullWidth />
diff --git a/src/components/common/WalletBalance/index.tsx b/src/components/common/WalletBalance/index.tsx
new file mode 100644
index 0000000000..aa87361a2d
--- /dev/null
+++ b/src/components/common/WalletBalance/index.tsx
@@ -0,0 +1,18 @@
+import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import { formatVisualAmount } from '@/utils/formatters'
+import { Skeleton } from '@mui/material'
+
+const WalletBalance = ({ chainInfo, balance }: { chainInfo: ChainInfo | undefined; balance: BigInt | undefined }) => {
+  if (!balance) {
+    return <Skeleton width={30} />
+  }
+
+  return (
+    <>
+      {formatVisualAmount(balance.toString(10), chainInfo?.nativeCurrency.decimals ?? 18)}{' '}
+      {chainInfo?.nativeCurrency.symbol ?? 'ETH'}
+    </>
+  )
+}
+
+export default WalletBalance
diff --git a/src/components/common/WalletInfo/index.tsx b/src/components/common/WalletInfo/index.tsx
index 9d8da8c74e..ecea88cfdd 100644
--- a/src/components/common/WalletInfo/index.tsx
+++ b/src/components/common/WalletInfo/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Skeleton, Typography } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import { Suspense } from 'react'
 import type { ReactElement } from 'react'
 
@@ -9,26 +9,31 @@ import { useAppSelector } from '@/store'
 import { selectChainById } from '@/store/chainsSlice'
 
 import css from './styles.module.css'
-import useWalletBalance from '@/hooks/wallets/useWalletBalance'
-import { formatVisualAmount } from '@/utils/formatters'
+import Identicon from '@/components/common/Identicon'
+import classnames from 'classnames'
+import WalletBalance from '@/components/common/WalletBalance'
 
 export const UNKNOWN_CHAIN_NAME = 'Unknown'
 
-const WalletInfo = ({ wallet }: { wallet: ConnectedWallet }): ReactElement => {
+const WalletInfo = ({ wallet, balance }: { wallet: ConnectedWallet; balance: BigInt | undefined }): ReactElement => {
   const walletChain = useAppSelector((state) => selectChainById(state, wallet.chainId))
   const prefix = walletChain?.shortName
-  const [balance, balanceError, balanceLoading] = useWalletBalance()
+
+  const isMetaMask = wallet.label === 'MetaMask'
 
   return (
     <Box className={css.container}>
       <Box className={css.imageContainer}>
+        <Identicon address={wallet.address} size={34} />
         <Suspense>
-          <WalletIcon provider={wallet.label} icon={wallet.icon} />
-        </Suspense>{' '}
+          <Box className={classnames(css.walletIcon, { [css.animate]: isMetaMask })}>
+            <WalletIcon provider={wallet.label} icon={wallet.icon} width={16} height={16} />
+          </Box>
+        </Suspense>
       </Box>
 
       <Box className={css.walletDetails}>
-        <Typography variant="caption" fontWeight="bold" component="div">
+        <Typography variant="body2" component="div">
           {wallet.ens ? (
             <div>{wallet.ens}</div>
           ) : (
@@ -43,16 +48,8 @@ const WalletInfo = ({ wallet }: { wallet: ConnectedWallet }): ReactElement => {
         </Typography>
 
         <Box display="flex" flexDirection="row" alignItems="center" gap={1}>
-          <Typography variant="caption" component="div" className={css.balance}>
-            {balance !== undefined ? (
-              <>
-                {' '}
-                {formatVisualAmount(balance.toString(10), walletChain?.nativeCurrency.decimals ?? 18)}{' '}
-                {walletChain?.nativeCurrency.symbol ?? 'ETH'}
-              </>
-            ) : (
-              <Skeleton />
-            )}
+          <Typography variant="caption" component="div" fontWeight="bold" className={css.balance}>
+            <WalletBalance chainInfo={walletChain} balance={balance} />
           </Typography>
         </Box>
       </Box>
diff --git a/src/components/common/WalletInfo/styles.module.css b/src/components/common/WalletInfo/styles.module.css
index 62a9412e2d..eb603da552 100644
--- a/src/components/common/WalletInfo/styles.module.css
+++ b/src/components/common/WalletInfo/styles.module.css
@@ -8,6 +8,37 @@
 .imageContainer {
   display: flex;
   justify-content: center;
+  position: relative;
+}
+
+.walletIcon {
+  position: absolute;
+  display: flex;
+  -webkit-box-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  align-items: center;
+  bottom: -4px;
+  right: -4px;
+  border-radius: 50%;
+  outline: rgb(255, 255, 255) solid 2px;
+  outline-offset: -0.1px;
+  background-color: rgb(255, 255, 255);
+  overflow: hidden;
+}
+
+.animate img {
+  animation: 30s scale-up;
+}
+
+@keyframes scale-up {
+  from {
+    transform: scale(1) rotateZ(0deg);
+  }
+
+  to {
+    transform: scale(2) rotateZ(10deg);
+  }
 }
 
 [data-theme='dark'] .imageContainer img[alt*='Ledger'] {