refactor: ♻️ use built in context over pointless abstraction

components/AnalyticsAndInsightsPanel.tsx

@@ -1,14 +1,13 @@
-import React from "react";
+import React, { useContext } from "react";
 import { Card, Typography } from "antd";
 import styles from "../styles/AnalyticsAndInsightsPanel.module.css";
-import { contractState } from "./Atoms";
-import { useRecoilState } from "recoil";
+import { GlobalContext } from "../pages/_app";
 
 const { Title } = Typography;
 
 const AnalyticsAndInsightsPanel = () => {
-  const [contract] = useRecoilState(contractState);
-  if (!contract.name) return null;
+  const { contractState } = useContext(GlobalContext);
+  if (!contractState.name) return null;
   const transactionVolume = "-";
   const tokenHoldings = "-";
 

components/ContractInformationPanel.tsx

@@ -1,36 +1,35 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { Card } from "antd";
-import { useRecoilState } from "recoil";
-import { contractState } from "./Atoms";
 import { chainIds } from "./chainIds";
 import { explorers } from "./explorers";
+import { GlobalContext } from "../pages/_app";
 
 const ContractInformationPanel = () => {
-  const [contract] = useRecoilState(contractState);
+  const { contractState } = useContext(GlobalContext);
   const [contractTransactionCount, setContractTransactionCount] = useState();
   useEffect(() => {
-    if (contract?.name === "") return;
+    if (contractState?.name === "") return;
     const fetchContract = async () => {
       const response = await fetch("/api/ethereum", {
         method: "POST",
         body: JSON.stringify({
           method: "eth_getTransactionCount",
-          params: [contract, "latest"],
+          params: [contractState, "latest"],
         }),
       });
       const json = await response.json();
       setContractTransactionCount(json?.result);
     };
     fetchContract();
-  }, [contract]);
-  if (contract?.name === "") return null;
+  }, [contractState]);
+  if (contractState?.name === "") return null;
   const explorer = explorers.find(
-    ({ chainId }) => chainId === parseInt(contract.chain)
+    ({ chainId }) => chainId === parseInt(contractState.chain)
   );
   return (
     <Card title="Contract Information" id="contract-information-panel">
       <p>
-        <strong>Contract Address:</strong> {contract?.name}
+        <strong>Contract Address:</strong> {contractState?.name}
       </p>
       {contractTransactionCount && (
         <p>
@@ -39,12 +38,12 @@ const ContractInformationPanel = () => {
         </p>
       )}
       <p>
-        <strong>{chainIds[contract.chain]}</strong>
+        <strong>{chainIds[contractState.chain]}</strong>
       </p>
 
       <p>
         <strong>
-          <a href={`${explorer?.baseUrl}/address/${contract?.name}`}>
+          <a href={`${explorer?.baseUrl}/address/${contractState?.name}`}>
             View on {explorer?.explorerName}
           </a>
         </strong>

components/ContractInteractionPanel.tsx

@@ -1,14 +1,15 @@
-import React from "react";
+import React, { useContext } from "react";
 import { Button, Card, Typography } from "antd";
-import { useRecoilState } from "recoil";
-import { contractState } from "./Atoms";
+
+import { GlobalContext } from "../pages/_app";
 
 const { Text } = Typography;
 
 const ContractInteractionPanel = () => {
-  const [contract] = useRecoilState(contractState);
-  if (contract?.name === "") return null;
-  if (!["100", "137", "10", "42161"].includes(contract?.chain)) return null;
+  const { contractState } = useContext(GlobalContext);
+  if (contractState?.name === "") return null;
+  if (!["100", "137", "10", "42161"].includes(contractState?.chain))
+    return null;
   const chainMapping: { [key: string]: string } = {
     "100": "gnosisChain",
     "137": "polygon",
@@ -22,8 +23,8 @@ const ContractInteractionPanel = () => {
     >
       <Button
         type="ghost"
-        href={`https://abi.ninja/${contract.name}/${
-          chainMapping[contract.chain]
+        href={`https://abi.ninja/${contractState.name}/${
+          chainMapping[contractState.chain]
         }`}
       >
         <Text>Interact with this contract on ABI.Ninja</Text>

components/ContractsDisplay.tsx

@@ -1,14 +1,13 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
 import ContractsPanel, { SplitContract } from "../components/ContractsPanel";
 import ContractInformationPanel from "../components/ContractInformationPanel";
 import ContractInteractionPanel from "../components/ContractInteractionPanel";
 import AnalyticsAndInsightsPanel from "../components/AnalyticsAndInsightsPanel";
 import { namehash } from "viem";
-import { useRecoilState } from "recoil";
-import { searchTermState } from "../components/Atoms";
 import { Alert, Col, Collapse, Row, Space, Typography } from "antd";
 import { chainIds } from "./chainIds";
 import ErinTweet from "./ErinTweet";
+import { GlobalContext } from "../pages/_app";
 import { usePublicClient } from "wagmi";
 import { normalize } from "viem/ens";
 
@@ -18,14 +17,14 @@ const { Text, Paragraph } = Typography;
 export default function ContractsDisplay() {
   const [texts, setTexts] = useState<string[]>();
   const [error, setError] = useState<string>();
-  const [searchValue] = useRecoilState(searchTermState);
+  const { searchTerm } = useContext(GlobalContext);
   const [nameHash, setNameHash] = useState<string>();
   const { getEnsResolver } = usePublicClient();
 
   useEffect(() => {
-    if (!searchValue) return;
+    if (!searchTerm) return;
     const fetchEnsText = async () => {
-      const address = namehash(searchValue);
+      const address = namehash(searchTerm);
       setNameHash(address);
       const response = await fetch(`/api/ens`, {
         method: "POST",
@@ -43,7 +42,7 @@ export default function ContractsDisplay() {
       }
     };
     fetchEnsText();
-  }, [searchValue, getEnsResolver]);
+  }, [searchTerm, getEnsResolver]);
   return (
     <div style={{ minHeight: 500 }}>
       {texts && (
@@ -57,7 +56,7 @@ export default function ContractsDisplay() {
                 <Panel key="wah" header="First, get the address to lookup">
                   <Space direction="vertical">
                     <Text>
-                      This takes the ENS domain {searchValue} and converts it to
+                      This takes the ENS domain {searchTerm} and converts it to
                       an address.
                     </Text>
                     <Text code>{nameHash}</Text>
@@ -93,7 +92,7 @@ export default function ContractsDisplay() {
                     <Paragraph>
                       <pre>
                         {`{
-  "id": "${namehash(searchValue)}"
+  "id": "${namehash(searchTerm)}"
 }`}
                       </pre>
                     </Paragraph>
@@ -171,8 +170,8 @@ export default function ContractsDisplay() {
               description={
                 <Space direction="vertical">
                   {error}
-                  <a href={`https://app.ens.domains/${searchValue}`}>
-                    View {searchValue} on ENS
+                  <a href={`https://app.ens.domains/${searchTerm}`}>
+                    View {searchTerm} on ENS
                   </a>
                 </Space>
               }

components/ContractsPanel.tsx

@@ -1,19 +1,18 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { Card, Button, Space, Select } from "antd";
 import styles from "../styles/ContractsPanel.module.css";
 import { usePublicClient } from "wagmi";
 import { normalize } from "viem/ens";
-import { useRecoilState } from "recoil";
-import { contractState, searchTermState } from "./Atoms";
 import { chainIds } from "./chainIds";
+import { GlobalContext } from "../pages/_app";
 
 const { Option } = Select;
 
 export const SplitContract = ({ chainKey }: { chainKey: string }) => {
   const { getEnsText } = usePublicClient();
 
   const [contracts, setContracts] = useState<string[]>();
-  const [searchTerm] = useRecoilState(searchTermState);
+  const { searchTerm } = useContext(GlobalContext);
   useEffect(() => {
     const fetchEnsText = async () => {
       if (!searchTerm) return;
@@ -42,10 +41,10 @@ export const SplitContract = ({ chainKey }: { chainKey: string }) => {
 };
 
 const Contract = ({ address, chain }: { address: string; chain: string }) => {
-  const [, setContract] = useRecoilState(contractState);
+  const { setContractState } = useContext(GlobalContext);
 
   return (
-    <Button onClick={() => setContract((c) => ({ chain, name: address }))}>
+    <Button onClick={() => setContractState(() => ({ chain, name: address }))}>
       {address}
     </Button>
   );

components/SearchBar.tsx

@@ -1,17 +1,16 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { Input, Button, Space, Divider } from "antd";
-import { useRecoilState, useResetRecoilState } from "recoil";
-import { contractState, searchTermState } from "./Atoms";
+import { GlobalContext } from "../pages/_app";
 
 const SearchBar = () => {
   const [localSearchValue, setLocalSearchValue] = useState(
     "v3deployments.uniswap.eth"
   );
-  const [, setSearchValue] = useRecoilState(searchTermState);
-  const resetContract = useResetRecoilState(contractState);
+  const { setContractState, setSearchTermState } = useContext(GlobalContext);
+
   const handleSearch = async () => {
-    setSearchValue(localSearchValue);
-    resetContract()
+    setSearchTermState(localSearchValue);
+    setContractState({ name: "", chain: "" });
   };
 
   return (

package.json

@@ -22,7 +22,6 @@
     "postcss": "8.4.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "recoil": "^0.7.7",
     "tailwindcss": "3.3.2",
     "typescript": "5.0.4",
     "viem": "^0.3.26",

pages/_app.tsx

@@ -5,9 +5,18 @@ import { mainnet } from "wagmi/chains";
 import { createPublicClient, http } from "viem";
 import CustomLayout from "../components/Layout";
 import React from "react";
-import { RecoilRoot } from "recoil";
 import Head from "next/head";
 import Meta from "../components/Meta";
+import { createContext, useContext } from "react";
+
+interface GlobalContextProps {
+  contractState: any;
+  setContractState: any;
+  searchTerm: any;
+  setSearchTermState: any;
+}
+
+export const GlobalContext = createContext({} as GlobalContextProps);
 
 const config = createConfig({
   autoConnect: true,
@@ -17,8 +26,18 @@ const config = createConfig({
   }),
 });
 function MyApp({ Component, pageProps }: { Component: any; pageProps: any }) {
+  const [contractState, setContractState] = React.useState(null);
+  const [searchTerm, setSearchTermState] = React.useState(null);
+
   return (
-    <RecoilRoot>
+    <GlobalContext.Provider
+      value={{
+        contractState,
+        setContractState,
+        searchTerm,
+        setSearchTermState,
+      }}
+    >
       <WagmiConfig config={config}>
         <Head>
           <meta
@@ -33,7 +52,7 @@ function MyApp({ Component, pageProps }: { Component: any; pageProps: any }) {
           <Component {...pageProps} />
         </CustomLayout>
       </WagmiConfig>
-    </RecoilRoot>
+    </GlobalContext.Provider>
   );
 }