Skip to content

Commit

Permalink
fix: useEffect slowing down MiniPay site tester
Browse files Browse the repository at this point in the history
  • Loading branch information
@therealharpaljadeja
therealharpaljadeja committed Nov 16, 2023
1 parent c2e6695 commit a9a6dd0
Showing 1 changed file with 85 additions and 74 deletions.
159 changes: 85 additions & 74 deletions packages/react-app/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

0 comments on commit a9a6dd0

Please sign in to comment.