From c4bed0891dc039c674e0d0af48196540f45b5d4d Mon Sep 17 00:00:00 2001
From: Corantin <corantin.noll@gmail.com>
Date: Mon, 23 Sep 2024 13:22:25 -0400
Subject: [PATCH] Add picture only connect button !ai

---
 apps/web/app/(app)/gardens/page.tsx         |   2 +-
 apps/web/components/ConnectWalletButton.tsx |  58 +++++-----
 apps/web/components/Modal.tsx               |   2 +-
 apps/web/components/NavBar.tsx              | 117 +++++++-------------
 4 files changed, 69 insertions(+), 110 deletions(-)

diff --git a/apps/web/app/(app)/gardens/page.tsx b/apps/web/app/(app)/gardens/page.tsx
index ccea2d846..5eec7e0f5 100644
--- a/apps/web/app/(app)/gardens/page.tsx
+++ b/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">
diff --git a/apps/web/components/ConnectWalletButton.tsx b/apps/web/components/ConnectWalletButton.tsx
index 8ed387c52..cbf22a5e2 100644
--- a/apps/web/components/ConnectWalletButton.tsx
+++ b/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()}
diff --git a/apps/web/components/Modal.tsx b/apps/web/components/Modal.tsx
index 0cd5cc53b..dc22f9d74 100644
--- a/apps/web/components/Modal.tsx
+++ b/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 && (
diff --git a/apps/web/components/NavBar.tsx b/apps/web/components/NavBar.tsx
index 2bfd2d8ea..25d2af4cc 100644
--- a/apps/web/components/NavBar.tsx
+++ b/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>
   );
 }