From a9a6dd05f2e271e62ca1333a4471a7e72c45cb03 Mon Sep 17 00:00:00 2001
From: Harpal Jadeja <jadejaharpal14@gmail.com>
Date: Thu, 16 Nov 2023 12:09:54 +0300
Subject: [PATCH] fix: useEffect slowing down MiniPay site tester

---
 packages/react-app/components/Header.tsx | 159 ++++++++++++-----------
 1 file changed, 85 insertions(+), 74 deletions(-)

diff --git a/packages/react-app/components/Header.tsx b/packages/react-app/components/Header.tsx
index f3a75be1..5f0e4c8e 100644
--- a/packages/react-app/components/Header.tsx
+++ b/packages/react-app/components/Header.tsx
@@ -7,84 +7,95 @@ import { useConnect } from "wagmi";
 import { InjectedConnector } from "wagmi/connectors/injected";
 
 export default function Header() {
-  const [hideConnectBtn, setHideConnectBtn] = useState(false);
-  const { connect } = useConnect({
-    connector: new InjectedConnector(),
-  });
+    const [hideConnectBtn, setHideConnectBtn] = useState(false);
+    const { connect } = useConnect({
+        connector: new InjectedConnector(),
+    });
 
-  useEffect(() => {
-    if (window.ethereum && window.ethereum.isMiniPay) {
-      setHideConnectBtn(true);
-      connect();
-    }
-  }, [connect]);
+    useEffect(() => {
+        if (window.ethereum && window.ethereum.isMiniPay) {
+            setHideConnectBtn(true);
+            connect();
+        }
+    }, []);
 
-  return (
-    <Disclosure as="nav" className="bg-prosperity border-b border-black">
-      {({ open }) => (
-        <>
-          <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
-            <div className="relative flex h-16 justify-between">
-              <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
-                {/* Mobile menu button */}
-                <Disclosure.Button className="inline-flex items-center justify-center rounded-md p-2 text-black focus:outline-none focus:ring-1 focus:ring-inset focus:rounded-none focus:ring-black">
-                  <span className="sr-only">Open main menu</span>
-                  {open ? (
-                    <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
-                  ) : (
-                    <Bars3Icon className="block h-6 w-6" aria-hidden="true" />
-                  )}
-                </Disclosure.Button>
-              </div>
-              <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
-                <div className="flex flex-shrink-0 items-center">
-                  <Image
-                    className="block h-8 w-auto sm:block lg:block"
-                    src="/logo.svg"
-                    width="24"
-                    height="24"
-                    alt="Celo Logo"
-                  />
-                </div>
-                <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
-                  <a
-                    href="#"
-                    className="inline-flex items-center border-b-2 border-black px-1 pt-1 text-sm font-medium text-gray-900"
-                  >
-                    Home
-                  </a>
-                </div>
-              </div>
-              <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
-                {!hideConnectBtn && (
-                  <ConnectButton
-                    showBalance={{ smallScreen: true, largeScreen: false }}
-                  />
-                )}
-              </div>
-            </div>
-          </div>
+    return (
+        <Disclosure as="nav" className="bg-prosperity border-b border-black">
+            {({ open }) => (
+                <>
+                    <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
+                        <div className="relative flex h-16 justify-between">
+                            <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
+                                {/* Mobile menu button */}
+                                <Disclosure.Button className="inline-flex items-center justify-center rounded-md p-2 text-black focus:outline-none focus:ring-1 focus:ring-inset focus:rounded-none focus:ring-black">
+                                    <span className="sr-only">
+                                        Open main menu
+                                    </span>
+                                    {open ? (
+                                        <XMarkIcon
+                                            className="block h-6 w-6"
+                                            aria-hidden="true"
+                                        />
+                                    ) : (
+                                        <Bars3Icon
+                                            className="block h-6 w-6"
+                                            aria-hidden="true"
+                                        />
+                                    )}
+                                </Disclosure.Button>
+                            </div>
+                            <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
+                                <div className="flex flex-shrink-0 items-center">
+                                    <Image
+                                        className="block h-8 w-auto sm:block lg:block"
+                                        src="/logo.svg"
+                                        width="24"
+                                        height="24"
+                                        alt="Celo Logo"
+                                    />
+                                </div>
+                                <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
+                                    <a
+                                        href="#"
+                                        className="inline-flex items-center border-b-2 border-black px-1 pt-1 text-sm font-medium text-gray-900"
+                                    >
+                                        Home
+                                    </a>
+                                </div>
+                            </div>
+                            <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+                                {!hideConnectBtn && (
+                                    <ConnectButton
+                                        showBalance={{
+                                            smallScreen: true,
+                                            largeScreen: false,
+                                        }}
+                                    />
+                                )}
+                            </div>
+                        </div>
+                    </div>
 
-          <Disclosure.Panel className="sm:hidden">
-            <div className="space-y-1 pt-2 pb-4">
-              <Disclosure.Button
-                as="a"
-                href="#"
-                className="block border-l-4 border-black py-2 pl-3 pr-4 text-base font-medium text-black"
-              >
-                Home
-              </Disclosure.Button>
-              {/* Add here your custom menu elements */}
-            </div>
-          </Disclosure.Panel>
-        </>
-      )}
-    </Disclosure>
-  );
+                    <Disclosure.Panel className="sm:hidden">
+                        <div className="space-y-1 pt-2 pb-4">
+                            <Disclosure.Button
+                                as="a"
+                                href="#"
+                                className="block border-l-4 border-black py-2 pl-3 pr-4 text-base font-medium text-black"
+                            >
+                                Home
+                            </Disclosure.Button>
+                            {/* Add here your custom menu elements */}
+                        </div>
+                    </Disclosure.Panel>
+                </>
+            )}
+        </Disclosure>
+    );
 }
 
 declare global {
-  interface Window {
-    ethereum: any;
-  }
+    interface Window {
+        ethereum: any;
+    }
 }