From d0ecef46aeccc98af339c76940f7e8b936e230f5 Mon Sep 17 00:00:00 2001 From: bookland Date: Sun, 21 May 2023 09:44:19 -0500 Subject: [PATCH] refactor: :recycle: use built in context over pointless abstraction --- components/AnalyticsAndInsightsPanel.tsx | 9 ++++----- components/Atoms.tsx | 14 ------------- components/ContractInformationPanel.tsx | 23 +++++++++++----------- components/ContractInteractionPanel.tsx | 17 ++++++++-------- components/ContractsDisplay.tsx | 21 ++++++++++---------- components/ContractsPanel.tsx | 11 +++++------ components/SearchBar.tsx | 13 ++++++------ package-lock.json | 25 ------------------------ package.json | 1 - pages/_app.tsx | 25 +++++++++++++++++++++--- 10 files changed, 67 insertions(+), 92 deletions(-) delete mode 100644 components/Atoms.tsx diff --git a/components/AnalyticsAndInsightsPanel.tsx b/components/AnalyticsAndInsightsPanel.tsx index d954bdd..bfe2fd6 100644 --- a/components/AnalyticsAndInsightsPanel.tsx +++ b/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 = "-"; diff --git a/components/Atoms.tsx b/components/Atoms.tsx deleted file mode 100644 index 9da8f0f..0000000 --- a/components/Atoms.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { atom } from "recoil"; - -export const contractState = atom<{ name: string; chain: string }>({ - key: "contract", - default: { - name: "", - chain: "", - }, -}); - -export const searchTermState = atom({ - key: "searchTerm", - default: "", -}); diff --git a/components/ContractInformationPanel.tsx b/components/ContractInformationPanel.tsx index 9c116e1..d4683f7 100644 --- a/components/ContractInformationPanel.tsx +++ b/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 (

- Contract Address: {contract?.name} + Contract Address: {contractState?.name}

{contractTransactionCount && (

@@ -39,12 +38,12 @@ const ContractInformationPanel = () => {

)}

- {chainIds[contract.chain]} + {chainIds[contractState.chain]}

- + View on {explorer?.explorerName} diff --git a/components/ContractInteractionPanel.tsx b/components/ContractInteractionPanel.tsx index 5c96642..646987b 100644 --- a/components/ContractInteractionPanel.tsx +++ b/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 = () => { > ); diff --git a/components/SearchBar.tsx b/components/SearchBar.tsx index e6c1267..81cee42 100644 --- a/components/SearchBar.tsx +++ b/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 ( diff --git a/package-lock.json b/package-lock.json index 4621c8f..a3a3b35 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,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", @@ -5114,11 +5113,6 @@ "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz", "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==" }, - "node_modules/hamt_plus": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz", - "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==" - }, "node_modules/has": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", @@ -7657,25 +7651,6 @@ "node": ">= 12.13.0" } }, - "node_modules/recoil": { - "version": "0.7.7", - "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.7.tgz", - "integrity": "sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==", - "dependencies": { - "hamt_plus": "1.0.2" - }, - "peerDependencies": { - "react": ">=16.13.1" - }, - "peerDependenciesMeta": { - "react-dom": { - "optional": true - }, - "react-native": { - "optional": true - } - } - }, "node_modules/regenerator-runtime": { "version": "0.13.11", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", diff --git a/package.json b/package.json index a6abdee..a8d5397 100644 --- a/package.json +++ b/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", diff --git a/pages/_app.tsx b/pages/_app.tsx index fa04d8a..75f383b 100644 --- a/pages/_app.tsx +++ b/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 ( - + - + ); }