Revert "add useIsMobile hook and udpate copy"

This reverts commit 03dab8d.
BuidlGuidl · Apr 10, 2024 · 65ef2c8 · 65ef2c8
1 parent 2e6376a
commit 65ef2c8
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 32 deletions.
diff --git a/packages/nextjs/components/NetworksDropdown.tsx b/packages/nextjs/components/NetworksDropdown.tsx
@@ -1,6 +1,6 @@
+import { useEffect, useState } from "react";
 import Image from "next/image";
 import Select, { OptionProps, components } from "react-select";
-import { useIsMobile } from "~~/hooks/useIsMobile";
 import { getTargetNetworks } from "~~/utils/scaffold-eth";
 
 type Options = {
@@ -57,7 +57,18 @@ const IconOption = (props: OptionProps<Options>) => (
 );
 
 export const NetworksDropdown = ({ onChange }: { onChange: (options: any) => any }) => {
-  const isMobile = useIsMobile();
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const mediaQuery = window.matchMedia("(max-width: 640px)");
+      setIsMobile(mediaQuery.matches);
+
+      const handleResize = () => setIsMobile(mediaQuery.matches);
+      mediaQuery.addEventListener("change", handleResize);
+      return () => mediaQuery.removeEventListener("change", handleResize);
+    }
+  }, []);
 
   return (
     <Select

diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx
@@ -2,7 +2,6 @@ import { AugmentedAbiFunction } from "./ContractUI";
 import { ReadOnlyFunctionForm } from "./ReadOnlyFunctionForm";
 import { Abi } from "abitype";
 import { XMarkIcon } from "@heroicons/react/24/outline";
-import { useIsMobile } from "~~/hooks/useIsMobile";
 import { Contract, ContractName, GenericContract, InheritedFunctions } from "~~/utils/scaffold-eth/contract";
 
 export const ContractReadMethods = ({
@@ -12,8 +11,6 @@ export const ContractReadMethods = ({
   deployedContractData: Contract<ContractName>;
   removeMethod: (methodName: string) => void;
 }) => {
-  const isMobile = useIsMobile();
-
   if (!deployedContractData) {
     return null;
   }
@@ -37,9 +34,7 @@ export const ContractReadMethods = ({
   if (!functionsToDisplay.length) {
     return (
       <div className="py-5">
-        <span className="font-light text-gray-500 my-5">
-          Please select read methods from the {isMobile ? "hamburger menu" : "sidebar"}.
-        </span>
+        <span className="font-light text-gray-500 my-5">Please select read methods from the sidebar.</span>
       </div>
     );
   }

diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx
@@ -2,7 +2,6 @@ import { AugmentedAbiFunction } from "./ContractUI";
 import { WriteOnlyFunctionForm } from "./WriteOnlyFunctionForm";
 import { Abi } from "abitype";
 import { XMarkIcon } from "@heroicons/react/24/outline";
-import { useIsMobile } from "~~/hooks/useIsMobile";
 import { Contract, ContractName, GenericContract, InheritedFunctions } from "~~/utils/scaffold-eth/contract";
 
 export const ContractWriteMethods = ({
@@ -14,8 +13,6 @@ export const ContractWriteMethods = ({
   deployedContractData: Contract<ContractName>;
   removeMethod: (methodName: string) => void;
 }) => {
-  const isMobile = useIsMobile();
-
   if (!deployedContractData) {
     return null;
   }
@@ -38,9 +35,7 @@ export const ContractWriteMethods = ({
   if (!functionsToDisplay.length) {
     return (
       <div className="py-5">
-        <span className="font-light text-gray-500">
-          Please select read methods from the {isMobile ? "hamburger menu" : "sidebar"}.
-        </span>
+        <span className="font-light text-gray-500">Please select write methods from the sidebar.</span>
       </div>
     );
   }

diff --git a/packages/nextjs/hooks/useIsMobile.ts b/packages/nextjs/hooks/useIsMobile.ts