Merge pull request #13 from hypercerts-org/feature/nav-menu

Feature/nav menu
hypercerts-org · Nov 6, 2023 · abd7250 · abd7250
2 parents 75622fb + d8f1d15
commit abd7250
Show file tree

Hide file tree

Showing 7 changed files with 305 additions and 18 deletions.
diff --git 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={"blackAndWhiteOutline"}
+                    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
@@ -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
@@ -4,37 +4,180 @@ import {
   Flex,
   Heading,
   HStack,
+  Image,
   Menu,
   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";
+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%"}
       height={headerHeight}
       alignItems={"center"}
-      paddingX={"40px"}
+      paddingX={[0, 0, "40px"]}
       backgroundColor={"grey.300"}
       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>
-        <BrowseMenu />
+        <Show above={"md"}>
+          <BrowseMenu />
+        </Show>
       </HStack>
-      <Box ml={"auto"}>
-        <ConnectButton />
-      </Box>
+      <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"}
+            height={"100%"}
+          >
+            <MobileMenuButton />
+          </Flex>
+        </Show>
+      </Flex>
+    </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 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>
   );
 };

diff --git a/fonts.tsx b/fonts.tsx
@@ -7,15 +7,15 @@ 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 {
   font-family: "Director-Variable";
   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
@@ -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",