From 559c44f09da08d2dcc4de5e84c562b1be344626a Mon Sep 17 00:00:00 2001 From: jnsdls Date: Sat, 15 Jun 2024 05:09:00 +0000 Subject: [PATCH] refactor: clean up imports and unused code in CodeOverview component (#2674) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## PR-Codex overview The focus of this PR is to optimize imports, remove unused code, and refactor UI components in the `CodeOverview` component. ### Detailed summary - Removed unused imports and variables - Refactored UI structure for better organization - Updated code snippet rendering logic - Improved tab functionality for functions and events > The following files were skipped due to too many changes: `src/contract-ui/tabs/code/components/code-overview.tsx` > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` --- .../tabs/code/components/code-overview.tsx | 591 ++++++------------ 1 file changed, 201 insertions(+), 390 deletions(-) diff --git a/src/contract-ui/tabs/code/components/code-overview.tsx b/src/contract-ui/tabs/code/components/code-overview.tsx index fb07497f64..a63dddb9a2 100644 --- a/src/contract-ui/tabs/code/components/code-overview.tsx +++ b/src/contract-ui/tabs/code/components/code-overview.tsx @@ -1,22 +1,13 @@ import { useDashboardEVMChainId } from "@3rdweb-sdk/react"; import { - Accordion, - AccordionButton, - AccordionIcon, - AccordionItem, - AccordionPanel, Alert, AlertDescription, AlertIcon, AlertTitle, - Box, - Divider, Flex, GridItem, - Image, List, ListItem, - Select, SimpleGrid, Tab, TabList, @@ -26,27 +17,17 @@ import { useBreakpointValue, } from "@chakra-ui/react"; import { useAddress } from "@thirdweb-dev/react"; -import { - Abi, - AbiEvent, - AbiFunction, - FeatureWithEnabled, -} from "@thirdweb-dev/sdk"; +import type { Abi, AbiEvent, AbiFunction } from "@thirdweb-dev/sdk"; import { formatAbiItem } from "abitype"; import { useContractEnabledExtensions, useContractEvents, useContractFunctions, - useFeatureContractCodeSnippetQuery, } from "components/contract-components/hooks"; import { CodeSegment } from "components/contract-tabs/code/CodeSegment"; -import { - CodeEnvironment, - SnippetApiResponse, -} from "components/contract-tabs/code/types"; +import { CodeEnvironment } from "components/contract-tabs/code/types"; import { useSupportedChain } from "hooks/chains/configureChains"; import { useSingleQueryParam } from "hooks/useQueryParam"; -import { useRouter } from "next/router"; import { useMemo, useState } from "react"; import { Button, Card, Heading, Link, Text, TrackedLink } from "tw-components"; @@ -379,10 +360,9 @@ export const CodeOverview: React.FC = ({ const [environment, setEnvironment] = useState( defaultEnvironment || "javascript", ); - const router = useRouter(); const [tab, setTab] = useState("write"); - const { data } = useFeatureContractCodeSnippetQuery(environment); + const enabledExtensions = useContractEnabledExtensions(abi); const address = useAddress(); const isMobile = useBreakpointValue({ base: true, md: false }); @@ -391,17 +371,6 @@ export const CodeOverview: React.FC = ({ (extension) => extension.name === "AccountFactory", ); - const filteredData = useMemo(() => { - if (!data) { - return {}; - } - return filterData(data, enabledExtensions); - }, [data, enabledExtensions]); - - const foundExtensions = useMemo(() => { - return Object.keys(filteredData || {}).sort(); - }, [filteredData]); - const chainId = useDashboardEVMChainId() || chainIdProp || 1; const chainInfo = useSupportedChain(chainId || -1); @@ -437,12 +406,7 @@ export const CodeOverview: React.FC = ({ overflowX={{ base: "scroll", md: "hidden" }} display={{ base: "block", md: "grid" }} > - + {isAccountFactory && ( @@ -568,360 +532,207 @@ export const CodeOverview: React.FC = ({ - {!onlyInstall ? ( - <> - {foundExtensions.length > 0 ? ( - - {foundExtensions.map((extension) => { - const extensionData: any[] = filteredData[ - extension - ] as unknown as any[]; - return ( - + All Functions & Events + + + + {((writeFunctions || []).length > 0 || + (readFunctions || []).length > 0) && ( + - - - Extension detected - - Extension - - - {extension} - - - - {extensionData?.map((ext) => { - return ( - - + {(writeFunctions || []).length > 0 && ( + + + Write + + + )} + {(readFunctions || []).length > 0 && ( + + + Read + + + )} + {(events || []).length > 0 && ( + + + Events + + + )} + + + + {writeFunctions?.map((fn) => ( + + - - ))} - - - {readFunctions?.map((fn) => ( - - - - ))} - - - {events?.map((ev) => ( - - - - ))} - - - - )} - - - - + + ))} + + + {readFunctions?.map((fn) => ( + + + + ))} + + + {events?.map((ev) => ( + + + + ))} + + + + )} + + + + + f.name === + (tab === "read" + ? read?.name + : tab === "write" + ? write?.name + : event?.name), ) - ?.find( - (f) => - f.name === - (tab === "read" - ? read?.name - : tab === "write" - ? write?.name - : event?.name), - ) - ?.inputs?.map((i) => i.name), - - chainId, - }, - )} - /> - - - - - ) : null} - - {noSidebar || isMobile ? null : ( - - - Choose a language: - - - - - Getting Started - - - {foundExtensions.map((ext) => ( - - - Extension detected i.name), + + chainId, + }, + )} /> - {ext} - - - ))} - - - All Functions & Events - - - )} + + + + )} + ); }; - -function isValidEnvironment(env: string): env is CodeEnvironment { - return ["javascript", "react", "react-native", "unity"].includes(env); -} - -function filterData( - data: SnippetApiResponse, - enabledExtensions: FeatureWithEnabled[], -) { - const allowedKeys = enabledExtensions - .filter((extension) => extension.enabled) - .map((extension) => extension.name as keyof SnippetApiResponse); - const filteredData: Partial = {}; - - for (const key in data) { - if (allowedKeys.includes(key as keyof SnippetApiResponse)) { - filteredData[key as keyof SnippetApiResponse] = data[key]; - } - } - - return filteredData; -}