From 9a4d68e836e11d5c1d326252f7b7ba873f3d061a Mon Sep 17 00:00:00 2001
From: jipstavenuiter <jipstavenuiter@gmail.com>
Date: Mon, 6 Nov 2023 21:31:25 +0100
Subject: [PATCH 1/3] add mobile nav

---
 components/ConnectButton.tsx              | 116 +++++++++++++++++++++-
 components/hyperboard/ownership-table.tsx |   8 +-
 components/layout/header.tsx              | 105 +++++++++++++++++++-
 fonts.tsx                                 |   4 +-
 package.json                              |   1 +
 theme.ts                                  |  28 ++++--
 yarn.lock                                 |   5 +
 7 files changed, 250 insertions(+), 17 deletions(-)

diff --git a/components/ConnectButton.tsx b/components/ConnectButton.tsx
index ee3ce3b..044db6e 100644
--- a/components/ConnectButton.tsx
+++ b/components/ConnectButton.tsx
@@ -1,4 +1,114 @@
-import { ConnectButton as RainbowKitConnectButton } from "@rainbow-me/rainbowkit";
-export const ConnectButton = () => {
-  return <RainbowKitConnectButton />;
+import { ConnectButton as ConnectButtonInternal } from "@rainbow-me/rainbowkit";
+import { Button, ButtonProps } from "@chakra-ui/react";
+
+export const ConnectButton = ({ ...buttonProps }: ButtonProps) => {
+  return (
+    <ConnectButtonInternal.Custom>
+      {({
+        account,
+        chain,
+        openAccountModal,
+        openChainModal,
+        openConnectModal,
+        authenticationStatus,
+        mounted,
+      }) => {
+        // Note: If your app doesn't use authentication, you
+        // can remove all 'authenticationStatus' checks
+        const ready = mounted && authenticationStatus !== "loading";
+        const connected =
+          ready &&
+          account &&
+          chain &&
+          (!authenticationStatus || authenticationStatus === "authenticated");
+
+        return (
+          <div
+            {...(!ready && {
+              "aria-hidden": true,
+              style: {
+                opacity: 0,
+                pointerEvents: "none",
+                userSelect: "none",
+              },
+            })}
+          >
+            {(() => {
+              if (!connected) {
+                return (
+                  <Button
+                    {...buttonProps}
+                    variant={"blackAndWhite"}
+                    onClick={openConnectModal}
+                    type="button"
+                  >
+                    Connect wallet
+                  </Button>
+                );
+              }
+
+              if (chain.unsupported) {
+                return (
+                  <Button
+                    {...buttonProps}
+                    variant={"blackAndWhite"}
+                    onClick={openChainModal}
+                    type="button"
+                  >
+                    Wrong network
+                  </Button>
+                );
+              }
+
+              return (
+                <div style={{ display: "flex", gap: 12 }}>
+                  <Button
+                    {...buttonProps}
+                    variant={"blackAndWhite"}
+                    onClick={openChainModal}
+                    style={{ display: "flex", alignItems: "center" }}
+                    type="button"
+                  >
+                    {chain.hasIcon && (
+                      <div
+                        style={{
+                          background: chain.iconBackground,
+                          width: 12,
+                          height: 12,
+                          borderRadius: 999,
+                          overflow: "hidden",
+                          marginRight: 4,
+                        }}
+                      >
+                        {chain.iconUrl && (
+                          <img
+                            alt={chain.name ?? "Chain icon"}
+                            src={chain.iconUrl}
+                            style={{ width: 12, height: 12 }}
+                          />
+                        )}
+                      </div>
+                    )}
+                    {chain.name}
+                  </Button>
+
+                  <Button
+                    {...buttonProps}
+                    onClick={openAccountModal}
+                    type="button"
+                    variant={"blackAndWhite"}
+                  >
+                    {account.displayName}
+                    {account.displayBalance
+                      ? ` (${account.displayBalance})`
+                      : ""}
+                  </Button>
+                </div>
+              );
+            })()}
+          </div>
+        );
+      }}
+    </ConnectButtonInternal.Custom>
+  );
 };
diff --git a/components/hyperboard/ownership-table.tsx b/components/hyperboard/ownership-table.tsx
index ce274f4..372a85b 100644
--- a/components/hyperboard/ownership-table.tsx
+++ b/components/hyperboard/ownership-table.tsx
@@ -124,7 +124,7 @@ export const OwnershipTable = ({
           py={10}
         >
           <Text textStyle={"secondary"} textTransform={"uppercase"}>
-            hyperboard ownership
+            {selectedClaim ? "hypercert ownership" : "hyperboard ownership"}
           </Text>
         </Center>
       )}
@@ -139,6 +139,7 @@ export const OwnershipTable = ({
           border={"1px solid black"}
           borderRight={"none"}
           overflowY={"auto"}
+          className={"custom-scrollbar"}
         >
           {data.map((registry, index) => {
             const isRegistrySelected =
@@ -213,6 +214,7 @@ export const OwnershipTable = ({
           border={"1px solid black"}
           borderLeft={"none"}
           overflowY={"auto"}
+          className={"custom-scrollbar"}
         >
           <ClaimOwnershipOverview claimIds={claimIds} />
         </Flex>
@@ -243,9 +245,11 @@ const RegistryRow = ({
 }) => {
   return (
     <Flex
+      cursor={"pointer"}
       onClick={onClick}
       pl={"20px"}
       backgroundColor={isSelected ? "white" : undefined}
+      _hover={{ backgroundColor: "white" }}
     >
       <Flex
         width={"100%"}
@@ -279,9 +283,11 @@ const ClaimRow = ({
 }: SelectionRowProps & { isLast?: boolean }) => {
   return (
     <Flex
+      cursor={"pointer"}
       onClick={onClick}
       pl={"20px"}
       backgroundColor={isSelected ? "white" : undefined}
+      _hover={{ backgroundColor: "white" }}
     >
       <Flex
         width={"100%"}
diff --git a/components/layout/header.tsx b/components/layout/header.tsx
index 8bc32b3..7ee60ca 100644
--- a/components/layout/header.tsx
+++ b/components/layout/header.tsx
@@ -8,11 +8,15 @@ import {
   MenuButton,
   MenuItem,
   MenuList,
+  Show,
   Text,
+  VStack,
 } from "@chakra-ui/react";
 import { ConnectButton } from "@/components/ConnectButton";
 import React from "react";
 import { BiChevronDown, BiChevronUp } from "react-icons/bi";
+import { Pivot as Hamburger } from "hamburger-react";
+import Link from "next/link";
 
 export const headerHeight = "64px";
 
@@ -22,7 +26,7 @@ export const Header = () => {
       width={"100%"}
       height={headerHeight}
       alignItems={"center"}
-      paddingX={"40px"}
+      paddingX={[0, 0, "40px"]}
       backgroundColor={"grey.300"}
       borderBottom={"1px solid"}
     >
@@ -30,15 +34,106 @@ export const Header = () => {
         <Heading fontFamily="Switzer" size={"md"} mr={4}>
           Hyperboards
         </Heading>
-        <BrowseMenu />
+        <Show above={"md"}>
+          <BrowseMenu />
+        </Show>
       </HStack>
-      <Box ml={"auto"}>
-        <ConnectButton />
-      </Box>
+      <HStack ml={"auto"} alignItems={"center"} height={"100%"}>
+        <Show above={"md"}>
+          <ConnectButton />
+        </Show>
+        <Show below={"md"}>
+          <Flex
+            alignItems={"center"}
+            borderLeft={"1px solid black"}
+            height={"100%"}
+          >
+            <MobileMenuButton />
+          </Flex>
+        </Show>
+      </HStack>
+    </Flex>
+  );
+};
+
+const MobileMenuButton = () => {
+  const [isOpen, setOpen] = React.useState(true);
+  return (
+    <Flex
+      backgroundColor={isOpen ? "white" : undefined}
+      width={"100%"}
+      height={"100%"}
+      alignItems={"center"}
+      justifyContent={"center"}
+      px={2}
+    >
+      <Hamburger onToggle={(toggled) => setOpen(toggled)} toggled={isOpen} />
+      {isOpen && (
+        <Box
+          position={"absolute"}
+          width={"100vw"}
+          left={0}
+          top={`calc(${headerHeight} - 1px)`}
+        >
+          <MobileMenuContent onClickOutside={() => setOpen(false)} />
+        </Box>
+      )}
     </Flex>
   );
 };
 
+const MobileMenuContent = ({
+  onClickOutside,
+}: {
+  onClickOutside: () => void;
+}) => {
+  return (
+    <Box
+      onClick={(e) => {
+        e.stopPropagation();
+        onClickOutside();
+      }}
+      minHeight={`calc(100vh - ${headerHeight})`}
+      backgroundColor={"rgba(0, 0, 0, 0.2)"}
+      position={"relative"}
+      top={0}
+      zIndex={1}
+    >
+      <Flex height={"fit-content"} width={"100%"} backgroundColor={"black"}>
+        <VStack
+          py={12}
+          alignItems={"center"}
+          flexDirection={"column"}
+          width={"100%"}
+          border={"1px solid black"}
+          backgroundColor={"white"}
+          borderRadius={4}
+        >
+          <VStack>
+            <MobileMenuLink href="/" text="hypercerts" />
+            <MobileMenuLink href="/" text="hyperboards" />
+          </VStack>
+          <ConnectButton mt={12} borderRadius={6} />
+        </VStack>
+      </Flex>
+    </Box>
+  );
+};
+
+const MobileMenuLink = ({ href, text }: { href: string; text: string }) => {
+  return (
+    <Link href={href}>
+      <Heading
+        textTransform={"uppercase"}
+        textStyle={"secondary"}
+        fontWeight={"100"}
+      >
+        {text}
+      </Heading>
+    </Link>
+  );
+};
+
 const BrowseMenu = () => {
   const width = "250px";
   return (
diff --git a/fonts.tsx b/fonts.tsx
index db0454d..cd43172 100644
--- a/fonts.tsx
+++ b/fonts.tsx
@@ -7,7 +7,7 @@ const Fonts = () => (
   font-style: normal;
   font-weight: 100 900;
   font-display: optional;
-  src: url(./fonts/Director-Regular.woff2) format("woff2");
+  src: url(/fonts/Director-Regular.woff2) format("woff2");
 }
 
 @font-face {
@@ -15,7 +15,7 @@ const Fonts = () => (
   font-style: normal;
   font-weight: 100 900;
   font-display: optional;
-  src: url(./fonts/Director-Variable.woff2) format("woff2");
+  src: url(/fonts/Director-Variable.woff2) format("woff2");
 }
       `}
   />
diff --git a/package.json b/package.json
index df8d950..ebc3072 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "eslint": "8.48.0",
     "eslint-config-next": "13.4.19",
     "framer-motion": "^10.16.2",
+    "hamburger-react": "^2.5.0",
     "html2canvas": "^1.4.1",
     "jsonwebtoken": "^9.0.2",
     "lodash": "^4.17.21",
diff --git a/theme.ts b/theme.ts
index 06ff844..e5a3dc5 100644
--- a/theme.ts
+++ b/theme.ts
@@ -1,9 +1,29 @@
-import { extendTheme, ThemeOverride } from "@chakra-ui/react";
+import {
+  defineStyleConfig,
+  extendTheme,
+  ThemeOverride,
+} from "@chakra-ui/react";
 
 export const colors = {
   background: "#F1F1F1",
 };
 
+const Button = defineStyleConfig({
+  baseStyle: {
+    borderRadius: "0",
+    color: "white",
+    background: "none",
+  },
+  variants: {
+    blackAndWhite: {
+      color: "white",
+      background: "black",
+      borderRadius: 16,
+    },
+  },
+  defaultProps: {},
+});
+
 export const theme: ThemeOverride = extendTheme({
   fonts: {
     heading: `'Director-Variable', sans-serif`,
@@ -25,11 +45,7 @@ export const theme: ThemeOverride = extendTheme({
   },
   lineHeights: {},
   components: {
-    Button: {
-      baseStyle: {
-        borderRadius: "0",
-      },
-    },
+    Button,
     Input: {
       baseStyle: {
         field: {
diff --git a/yarn.lock b/yarn.lock
index 6c9977c..d8295d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10216,6 +10216,11 @@ graphql@^16.6.0:
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.8.0.tgz#374478b7f27b2dc6153c8f42c1b80157f79d79d4"
   integrity sha512-0oKGaR+y3qcS5mCu1vb7KG+a89vjn06C7Ihq/dDl3jA+A8B3TKomvi3CiEcVLJQGalbu8F52LxkOym7U5sSfbg==
 
+hamburger-react@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/hamburger-react/-/hamburger-react-2.5.0.tgz#7c0148af8f02f3b693564d69e590d02db8ffc221"
+  integrity sha512-5GSXe+ucxTPJ0SkhIsPQ/PRDweZPIKya1lfahAuExx31SdheeUA4uOPfQIAirbKona8hvo79VDr5LJQzPXsdpw==
+
 hamt-sharding@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/hamt-sharding/-/hamt-sharding-2.0.1.tgz#f45686d0339e74b03b233bee1bde9587727129b6"

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 2/3] 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: {},
 });

From d8f1d15256745af675c4353dd97a3622d6db70b4 Mon Sep 17 00:00:00 2001
From: jipstavenuiter <jipstavenuiter@gmail.com>
Date: Mon, 6 Nov 2023 21:51:56 +0100
Subject: [PATCH 3/3] add margin to logo

---
 components/layout/header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/layout/header.tsx b/components/layout/header.tsx
index 1210b33..2465c29 100644
--- a/components/layout/header.tsx
+++ b/components/layout/header.tsx
@@ -35,7 +35,7 @@ export const Header = () => {
       borderBottom={"1px solid"}
     >
       <HStack height={"100%"}>
-        <Heading fontFamily="Switzer" size={"md"} mr={4}>
+        <Heading fontFamily="Switzer" size={"md"} mr={4} ml={[4, 4, 0]}>
           Hyperboards
         </Heading>
         <Show above={"md"}>