From 4b1fb68b4274f65a3f061701383720d954dadc88 Mon Sep 17 00:00:00 2001
From: jipstavenuiter <jipstavenuiter@gmail.com>
Date: Mon, 6 Nov 2023 21:49:58 +0100
Subject: [PATCH] add profile info

---
 components/ConnectButton.tsx |  2 +-
 components/layout/header.tsx | 52 ++++++++++++++++++++++++++++++++++--
 theme.ts                     |  6 +++++
 3 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/components/ConnectButton.tsx b/components/ConnectButton.tsx
index 044db6e..6793ebe 100644
--- a/components/ConnectButton.tsx
+++ b/components/ConnectButton.tsx
@@ -64,7 +64,7 @@ export const ConnectButton = ({ ...buttonProps }: ButtonProps) => {
                 <div style={{ display: "flex", gap: 12 }}>
                   <Button
                     {...buttonProps}
-                    variant={"blackAndWhite"}
+                    variant={"blackAndWhiteOutline"}
                     onClick={openChainModal}
                     style={{ display: "flex", alignItems: "center" }}
                     type="button"
diff --git a/components/layout/header.tsx b/components/layout/header.tsx
index 7ee60ca..1210b33 100644
--- a/components/layout/header.tsx
+++ b/components/layout/header.tsx
@@ -4,6 +4,7 @@ import {
   Flex,
   Heading,
   HStack,
+  Image,
   Menu,
   MenuButton,
   MenuItem,
@@ -17,10 +18,13 @@ import React from "react";
 import { BiChevronDown, BiChevronUp } from "react-icons/bi";
 import { Pivot as Hamburger } from "hamburger-react";
 import Link from "next/link";
+import { useAccount, useEnsAvatar, useEnsName } from "wagmi";
+import { formatAddress } from "@/utils/formatting";
 
 export const headerHeight = "64px";
 
 export const Header = () => {
+  const { isConnected } = useAccount();
   return (
     <Flex
       width={"100%"}
@@ -38,11 +42,21 @@ export const Header = () => {
           <BrowseMenu />
         </Show>
       </HStack>
-      <HStack ml={"auto"} alignItems={"center"} height={"100%"}>
+      <Flex ml={"auto"} alignItems={"center"} height={"100%"}>
         <Show above={"md"}>
           <ConnectButton />
         </Show>
         <Show below={"md"}>
+          {isConnected && (
+            <Flex
+              px={4}
+              borderLeft={"1px solid black"}
+              backgroundColor={"white"}
+              height={"100%"}
+            >
+              <ProfileInfo />
+            </Flex>
+          )}
           <Flex
             alignItems={"center"}
             borderLeft={"1px solid black"}
@@ -51,7 +65,7 @@ export const Header = () => {
             <MobileMenuButton />
           </Flex>
         </Show>
-      </HStack>
+      </Flex>
     </Flex>
   );
 };
@@ -134,6 +148,40 @@ const MobileMenuLink = ({ href, text }: { href: string; text: string }) => {
   );
 };
 
+const ProfileInfo = () => {
+  const { address, isConnected } = useAccount();
+  const { data: avatarData } = useEnsAvatar();
+  const { data: ensName } = useEnsName();
+
+  if (!isConnected) {
+    return null;
+  }
+
+  return (
+    <Flex
+      height={"100%"}
+      width={"100%"}
+      alignItems={"center"}
+      justifyContent={"flex-start"}
+    >
+      {avatarData && (
+        <Image
+          alt={ensName ?? "Avatar"}
+          src={avatarData}
+          width={8}
+          height={8}
+          borderRadius={999}
+          mr={2}
+        />
+      )}
+      <VStack alignItems={"flex-start"} spacing={0}>
+        {ensName && <Text fontWeight={500}>{ensName}</Text>}
+        {address && <Text fontSize={"xs"}>{formatAddress(address)}</Text>}
+      </VStack>
+    </Flex>
+  );
+};
+
 const BrowseMenu = () => {
   const width = "250px";
   return (
diff --git a/theme.ts b/theme.ts
index e5a3dc5..f618acd 100644
--- a/theme.ts
+++ b/theme.ts
@@ -20,6 +20,12 @@ const Button = defineStyleConfig({
       background: "black",
       borderRadius: 16,
     },
+    blackAndWhiteOutline: {
+      color: "black",
+      background: "white",
+      border: "1px solid black",
+      borderRadius: 16,
+    },
   },
   defaultProps: {},
 });