Mobile connect button

apps/web/app/(app)/gardens/page.tsx

@@ -80,7 +80,7 @@ export default function Page() {
 
  return (
  <>
- <div className="flex flex-col items-center justify-center gap-8 relative z-10">
+ <div className="flex flex-col items-center justify-center gap-8 relative">
  <header className="flex flex-col items-center gap-8 2xl:mt-20">
  <div className="flex items-center text-center">
  <div className="relative flex-1">

apps/web/components/ConnectWalletButton.tsx

@@ -2,6 +2,7 @@
 
 import React, { Fragment } from "react";
 import { Menu, Transition } from "@headlessui/react";
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import { ChevronUpIcon, PowerIcon } from "@heroicons/react/24/solid";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import cn from "classnames";
@@ -42,14 +43,12 @@ export function ConnectWallet() {
 
  return (
  <ConnectButton.Custom>
- {({
- account: accountAddress,
- chain,
- openConnectModal,
- mounted,
- }) => {
+ {({ account: accountAddress, chain, openConnectModal, mounted }) => {
  const ready = mounted;
  const connected = ready && accountAddress && chain;
+ const isWrongNetwork =
+ chain?.id != urlChainId && urlChainId && !isNaN(urlChainId);
+
  return (
  <>
  {(() => {
@@ -64,7 +63,7 @@ export function ConnectWallet() {
  width={20}
  loading="lazy"
  />
- Connect wallet
+ <span className="hidden sm:block">Connect wallet</span>
  </Button>
  );
  }
@@ -89,19 +88,22 @@ export function ConnectWallet() {
  <>
  <Menu.Button>
  <div
- className={`flex w-fit cursor-pointer items-center gap-4 rounded-2xl px-4 py-2 hover:opacity-85 
+ className={`flex w-fit cursor-pointer items-center gap-4 rounded-2xl pl-4 py-2 hover:opacity-85 pr-2 
  ${cn({ "bg-danger-soft": urlChainId && urlChainId !== chain.id }, { "bg-primary": !urlChainId || urlChainId === chain.id })} 
  `}
  >
- <Image
- alt={"Chain icon"}
- src={`https://effigy.im/a/${accountAddress.address}.png`}
- className="rounded-full "
- width={34}
- height={34}
- loading="lazy"
- />
- <div className="flex flex-col">
+ {isWrongNetwork ?
+ <ExclamationTriangleIcon className="text-danger-content w-6" />
+ : <Image
+ alt={"Chain icon"}
+ src={`https://effigy.im/a/${accountAddress.address}.png`}
+ className="rounded-full"
+ width={34}
+ height={34}
+ loading="lazy"
+ />
+ }
+ <div className="hidden sm:flex flex-col">
  <h5 className="text-left">
  {formatAddress(accountAddress.address)}
  </h5>
@@ -160,18 +162,16 @@ export function ConnectWallet() {
 
  {/* Switch network and Disconnect buttons */}
  <Menu.Item as="div" className="flex flex-col gap-2">
- {chain.id !== urlChainId &&
- urlChainId &&
- !isNaN(urlChainId) && (
- <Button
- className="overflow-hidden truncate"
- onClick={() =>
- switchNetwork && switchNetwork(urlChainId)
- }
- >
- Switch to {chainFromPath?.name ?? ""}
- </Button>
- )}
+ {isWrongNetwork && (
+ <Button
+ className="overflow-hidden truncate"
+ onClick={() =>
+ switchNetwork && switchNetwork(urlChainId)
+ }
+ >
+ Switch to {chainFromPath?.name ?? ""}
+ </Button>
+ )}
 
  <Button
  onClick={() => disconnect()}

apps/web/components/Modal.tsx

@@ -53,7 +53,7 @@ export function Modal({
  className={`modal max-sm:modal-bottom ${className}`}
  ref={dialogRef}
  >
- <div className="modal-box overflow-auto sm:overflow-visible max-w-5xl w-fit flex flex-col gap-8 rounded-3xl bg-primary p-8">
+ <div className="modal-box overflow-auto max-w-5xl w-fit flex flex-col gap-8 rounded-3xl bg-primary p-8">
  <div className="flex items-center justify-between gap-6">
  <div className="flex gap-4 items-center">
  {icon && (

apps/web/components/NavBar.tsx

@@ -1,97 +1,56 @@
 "use client";
 
 import React from "react";
-import { Disclosure } from "@headlessui/react";
-import {
- ArrowTopRightOnSquareIcon,
- Bars3Icon,
- XMarkIcon,
-} from "@heroicons/react/24/outline";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import Image from "next/image";
 import Link from "next/link";
 import { newLogo } from "@/assets";
 import { ConnectWallet } from "@/components";
-import { navItems } from "@/constants/navigation";
 
 export function NavBar() {
  return (
- <Disclosure
- as="nav"
- className="sticky top-0 z-20 max-w-7xl mx-auto lg:px-8 bg-primary pt-3"
- >
- {({ open }) => (
- <>
- <div className="p-2 sm:py-3 sm:px-4 bg-neutral rounded-2xl border1">
- <div className="flex justify-between">
- <div className="flex gap-8">
- <div className="flex flex-shrink-0 items-center gap-3 text-sm">
- <Link
- href="/gardens"
- className="flex items-center gap-3 text-sm"
- >
- <Image
- src={newLogo}
- alt="logo"
- height={40}
- width={40}
- loading="lazy"
- />
- <h4 className="">Gardens</h4>
- </Link>
+ <div className="sm:sticky top-0 z-20 max-w-7xl mx-auto lg:px-8 bg-primary">
+ <div className="p-2 sm:py-3 sm:px-4 bg-neutral sm:rounded-2xl border1 sm:mt-3">
+ <div className="flex justify-between">
+ <div className="flex gap-8">
+ <div className="flex flex-shrink-0 items-center gap-3 text-sm">
+ <Link href="/gardens" className="flex items-center gap-3 text-sm">
+ <Image
+ src={newLogo}
+ alt="logo"
+ height={40}
+ width={40}
+ loading="lazy"
+ />
+ <div className="flex flex-col">
+ <h4 className="">Gardens</h4>
  <p className="italic text-primary-content text-sm">
- pre-beta release{" "}
+ pre-beta
  </p>
  </div>
- </div>
- <div className="hidden sm:ml-6 sm:flex sm:items-center gap-4">
- <a
- href="https://docs.gardens.fund"
- target="_blank"
- rel="noreferrer"
- className="text-primary-content subtitle2 flex items-center gap-1 hover:opacity-90"
- >
- Docs
- <ArrowTopRightOnSquareIcon
- width={16}
- height={16}
- className="text-primary-content"
- />
- </a>
- <ConnectWallet />
- </div>
- <div className="-mr-2 flex items-center sm:hidden">
- {/* Mobile menu button */}
- <Disclosure.Button className="bg-surface hover:bg-surface relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
- <span className="sr-only">Open main menu</span>
- {open ?
- <XMarkIcon
- className="bg-surface block h-6 w-6"
- aria-hidden="true"
- />
- : <Bars3Icon
- className="bg-surface block h-6 w-6"
- aria-hidden="true"
- />
- }
- </Disclosure.Button>
- </div>
+ </Link>
  </div>
  </div>
- <Disclosure.Panel className="sm:hidden">
- <div className="space-y-1 pb-3 pt-2">
- {navItems.map(({ name, href }) => (
- <Link
- key={href}
- href={href}
- className="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700"
- >
- {name}
- </Link>
- ))}
+ <div className="flex gap-2">
+ <div className="sm:ml-6 flex sm:items-center gap-4">
+ <a
+ href="https://docs.gardens.fund"
+ target="_blank"
+ rel="noreferrer"
+ className="text-primary-content subtitle2 flex items-center gap-1 hover:opacity-90"
+ >
+ Docs
+ <ArrowTopRightOnSquareIcon
+ width={16}
+ height={16}
+ className="text-primary-content"
+ />
+ </a>
  </div>
- </Disclosure.Panel>
- </>
- )}
- </Disclosure>
+ <ConnectWallet />
+ </div>
+ </div>
+ </div>
+ </div>
  );
 }