integrating wallet connection with AAVE

src/sections/lending/components/UserDisplay.tsx

@@ -9,6 +9,7 @@ import shallow from "zustand/shallow"
 import { Avatar, AvatarProps } from "./Avatar"
 import { BadgeSize, ExclamationBadge } from "./badges/ExclamationBadge"
 import { UserNameText, UserNameTextProps } from "./UserNameText"
+import { MetaMaskAvatar } from "components/AccountAvatar/MetaMaskAvatar"
 
 type UserDisplayProps = {
   oneLiner?: boolean
@@ -21,7 +22,6 @@ type UserDisplayProps = {
 
 export const UserDisplay: React.FC<UserDisplayProps> = ({
   oneLiner = false,
-  avatarProps,
   titleProps,
   subtitleProps,
   withLink,
@@ -38,21 +38,27 @@ export const UserDisplay: React.FC<UserDisplayProps> = ({
       shallow,
     )
   const { readOnlyMode } = useWeb3Context()
-  const fallbackImage = useMemo(
-    () => (account ? blo(account as `0x${string}`) : undefined),
-    [account],
-  )
+
   const loading = domainsLoading || accountLoading
 
   return (
     <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
-      <Avatar
-        fallbackImage={fallbackImage}
-        loading={loading}
-        badge={<ExclamationBadge size={BadgeSize.SM} />}
-        invisibleBadge={!readOnlyMode}
-        {...avatarProps}
-      />
+      <Box sx={{ position: "relative" }}>
+        <MetaMaskAvatar address={account} size={20} />
+        {readOnlyMode && (
+          <Box
+            sx={{
+              display: "flex",
+              position: "absolute",
+              bottom: -6,
+              right: -6,
+            }}
+          >
+            <ExclamationBadge size={BadgeSize.SM} />
+          </Box>
+        )}
+      </Box>
+
       <Box sx={{ display: "flex", flexDirection: "column" }}>
         {!oneLiner && defaultDomain?.name ? (
           <>

src/sections/lending/components/WalletConnection/ConnectWalletButton.tsx

@@ -1,33 +1,10 @@
-import { Button } from "@mui/material"
-import React, { lazy, Suspense } from "react"
-import { useWalletModalContext } from "sections/lending/hooks/useWalletModal"
-
-const WalletModal = lazy(async () => ({
-  default: (await import("./WalletModal.js")).WalletModal,
-}))
+import React from "react"
+import { Web3ConnectModalButton } from "sections/web3-connect/modal/Web3ConnectModalButton"
 
 export interface ConnectWalletProps {
   funnel?: string
 }
 
-export const ConnectWalletButton: React.FC<ConnectWalletProps> = ({
-  funnel,
-}) => {
-  const { setWalletModalOpen } = useWalletModalContext()
-
-  return (
-    <>
-      <Button
-        variant="gradient"
-        onClick={() => {
-          setWalletModalOpen(true)
-        }}
-      >
-        <span>Connect wallet</span>
-      </Button>
-      <Suspense>
-        <WalletModal />
-      </Suspense>
-    </>
-  )
+export const ConnectWalletButton: React.FC<ConnectWalletProps> = () => {
+  return <Web3ConnectModalButton />
 }

src/sections/lending/components/lists/ListHeaderWrapper.tsx

@@ -22,7 +22,6 @@ export const ListHeaderWrapper = ({
         pb: 1,
         position: "sticky",
         top: 0,
-        zIndex: 100,
         bgcolor: "background.paper",
         borderBottom: "1px solid",
         borderColor: "divider",

src/sections/lending/layouts/AppHeader.tsx

@@ -212,7 +212,6 @@ export function AppHeader() {
           position: "sticky",
           top: 0,
           transition: theme.transitions.create("top"),
-          zIndex: theme.zIndex.appBar,
           bgcolor: theme.palette.background.header,
           padding: {
             xs:

src/sections/lending/layouts/MainLayout.tsx

@@ -4,11 +4,28 @@ import { ReactNode } from "react"
 import { AppHeader } from "./AppHeader"
 
 import { LendingPageProviders } from "sections/lending/providers/LendingPageProviders"
+import {
+  useAccount,
+  useEvmAccount,
+} from "sections/web3-connect/Web3Connect.utils"
 
 export function MainLayout({ children }: { children: ReactNode }) {
+  const { account } = useAccount()
+  const { account: evmAccount } = useEvmAccount()
   return (
     <LendingPageProviders>
       <AppHeader />
+      <Box
+        css={{
+          textAlign: "right",
+          background: "#1B2030",
+          color: "white",
+          padding: 10,
+          fontSize: 14,
+        }}
+      >
+        {account?.name}: {account?.displayAddress} {"->"} {evmAccount?.address}
+      </Box>
       <Box
         component="main"
         sx={{ display: "flex", flexDirection: "column", flex: 1 }}