From 2bf9fc598a067489f0e582e35116d078adf5376e Mon Sep 17 00:00:00 2001 From: MananTank Date: Mon, 16 Sep 2024 16:14:49 +0000 Subject: [PATCH] Fix Empty Publish contract page (#4613) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Problem solved Short description of the bug fixed or feature added --- ## PR-Codex overview The focus of this PR is to replace the `useSingleQueryParam` hook with `useRouter` and `useSearchParams` for better navigation handling in different components. ### Detailed summary - Replaced `useSingleQueryParam` with `useRouter` and `useSearchParams` in multiple files for improved navigation handling. - Updated the usage of hooks for query parameter retrieval in several components. - Made changes to handle query parameters more efficiently in the codebase. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` --- .../tabs/code/components/code-overview.tsx | 138 +++++++++--------- .../tabs/events/components/events-feed.tsx | 5 +- apps/dashboard/src/hooks/useQueryParam.ts | 13 -- .../pages/contracts/publish/[contractId].tsx | 14 +- 4 files changed, 79 insertions(+), 91 deletions(-) delete mode 100644 apps/dashboard/src/hooks/useQueryParam.ts diff --git a/apps/dashboard/src/contract-ui/tabs/code/components/code-overview.tsx b/apps/dashboard/src/contract-ui/tabs/code/components/code-overview.tsx index 07b0b31b7..d41e89259 100644 --- a/apps/dashboard/src/contract-ui/tabs/code/components/code-overview.tsx +++ b/apps/dashboard/src/contract-ui/tabs/code/components/code-overview.tsx @@ -30,7 +30,7 @@ import { import { CodeSegment } from "components/contract-tabs/code/CodeSegment"; import type { CodeEnvironment } from "components/contract-tabs/code/types"; import { useSupportedChain } from "hooks/chains/configureChains"; -import { useSingleQueryParam } from "hooks/useQueryParam"; +import { useSearchParams } from "next/navigation"; import { useMemo, useState } from "react"; import { useActiveAccount } from "thirdweb/react"; import { Button, Card, Heading, Link, Text, TrackedLink } from "tw-components"; @@ -57,14 +57,14 @@ export const COMMANDS = { import { defineChain } from "thirdweb/chains"; // create the client with your clientId, or secretKey if in a server environment -const client = createThirdwebClient({ +const client = createThirdwebClient({ clientId: "YOUR_CLIENT_ID" }); // connect to your contract -const contract = getContract({ - client, - chain: defineChain({{chainId}}), +const contract = getContract({ + client, + chain: defineChain({{chainId}}), address: "{{contract_address}}" });`, react: `import { createThirdwebClient, getContract, resolveMethod } from "thirdweb"; @@ -72,14 +72,14 @@ import { defineChain } from "thirdweb/chains"; import { ThirdwebProvider } from "thirdweb/react"; // create the client with your clientId, or secretKey if in a server environment -export const client = createThirdwebClient({ - clientId: "YOUR_CLIENT_ID" +export const client = createThirdwebClient({ + clientId: "YOUR_CLIENT_ID" }); // connect to your contract -export const contract = getContract({ - client, - chain: defineChain({{chainId}}), +export const contract = getContract({ + client, + chain: defineChain({{chainId}}), address: "{{contract_address}}" }); @@ -95,14 +95,14 @@ import { defineChain } from "thirdweb/chains"; import { ThirdwebProvider } from "thirdweb/react"; // create the client with your clientId, or secretKey if in a server environment -export const client = createThirdwebClient({ - clientId: "YOUR_CLIENT_ID" +export const client = createThirdwebClient({ + clientId: "YOUR_CLIENT_ID" }); // connect to your contract -export const contract = getContract({ - client, - chain: defineChain({{chainId}}), +export const contract = getContract({ + client, + chain: defineChain({{chainId}}), address: "{{contract_address}}", }); @@ -125,41 +125,41 @@ var contract = sdk.GetContract("{{contract_address}}");`, read: { javascript: `import { readContract } from "thirdweb"; -const data = await readContract({ - contract, - method: "{{function}}", - params: [{{args}}] +const data = await readContract({ + contract, + method: "{{function}}", + params: [{{args}}] })`, react: `import { useReadContract } from "thirdweb/react"; export default function Component() { - const { data, isLoading } = useReadContract({ - contract, - method: "{{function}}", - params: [{{args}}] + const { data, isLoading } = useReadContract({ + contract, + method: "{{function}}", + params: [{{args}}] }); }`, "react-native": `import { useReadContract } from "thirdweb/react"; export default function Component() { - const { data, isLoading } = useReadContract({ - contract, - method: "{{function}}", - params: [{{args}}] + const { data, isLoading } = useReadContract({ + contract, + method: "{{function}}", + params: [{{args}}] }); }`, }, write: { javascript: `import { prepareContractCall, sendTransaction } from "thirdweb"; -const transaction = await prepareContractCall({ - contract, - method: "{{function}}", - params: [{{args}}] +const transaction = await prepareContractCall({ + contract, + method: "{{function}}", + params: [{{args}}] }); -const { transactionHash } = await sendTransaction({ - transaction, - account +const { transactionHash } = await sendTransaction({ + transaction, + account });`, react: `import { prepareContractCall } from "thirdweb" import { useSendTransaction } from "thirdweb/react"; @@ -168,25 +168,25 @@ export default function Component() { const { mutate: sendTransaction } = useSendTransaction(); const onClick = () => { - const transaction = prepareContractCall({ - contract, - method: "{{function}}", - params: [{{args}}] + const transaction = prepareContractCall({ + contract, + method: "{{function}}", + params: [{{args}}] }); sendTransaction(transaction); } }`, "react-native": `import { prepareContractCall } from "thirdweb" import { useSendTransaction } from "thirdweb/react"; - + export default function Component() { const { mutate: sendTransaction } = useSendTransaction(); - + const onClick = () => { - const transaction = prepareContractCall({ - contract, - method: "{{function}}", - params: [{{args}}] + const transaction = prepareContractCall({ + contract, + method: "{{function}}", + params: [{{args}}] }); sendTransaction(transaction); } @@ -195,40 +195,40 @@ export default function Component() { events: { javascript: `import { prepareEvent, getContractEvents } from "thirdweb"; -const preparedEvent = prepareEvent({ - contract, - signature: "{{function}}" +const preparedEvent = prepareEvent({ + contract, + signature: "{{function}}" }); -const events = await getContractEvents({ - contract, - events: [preparedEvent] +const events = await getContractEvents({ + contract, + events: [preparedEvent] });`, react: `import { prepareEvent } from "thirdweb"; import { useContractEvents } from "thirdweb/react"; -const preparedEvent = prepareEvent({ - contract, - signature: "{{function}}" +const preparedEvent = prepareEvent({ + contract, + signature: "{{function}}" }); export default function Component() { - const { data: event } = useContractEvents({ - contract, - events: [preparedEvent] + const { data: event } = useContractEvents({ + contract, + events: [preparedEvent] }); }`, "react-native": `import { prepareEvent } from "thirdweb"; import { useContractEvents } from "thirdweb/react"; - -const preparedEvent = prepareEvent({ - contract, - signature: "{{function}}" + +const preparedEvent = prepareEvent({ + contract, + signature: "{{function}}" }); - + export default function Component() { - const { data: event } = useContractEvents({ - contract, - events: [preparedEvent] + const { data: event } = useContractEvents({ + contract, + events: [preparedEvent] }); }`, }, @@ -272,7 +272,7 @@ import { ThirdwebProvider, ConnectButton } from "thirdweb/react"; export default function App() { return ( - = ({ noSidebar = false, chainId: chainIdProp, }) => { - const defaultEnvironment = useSingleQueryParam( - "environment", - ) as CodeEnvironment; + const searchParams = useSearchParams(); + const defaultEnvironment = searchParams?.get("environment") as + | CodeEnvironment + | undefined; + const [environment, setEnvironment] = useState( defaultEnvironment || "javascript", ); diff --git a/apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx b/apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx index c31a5e902..794ff8fe1 100644 --- a/apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx +++ b/apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx @@ -28,7 +28,7 @@ import { } from "@chakra-ui/react"; import { AiOutlineQuestionCircle } from "@react-icons/all-files/ai/AiOutlineQuestionCircle"; import { AnimatePresence, motion } from "framer-motion"; -import { useSingleQueryParam } from "hooks/useQueryParam"; +import { useSearchParams } from "next/navigation"; import { useRouter } from "next/router"; import { Fragment, useMemo, useState } from "react"; import { FiChevronDown, FiCopy } from "react-icons/fi"; @@ -50,7 +50,8 @@ interface EventsFeedProps { export const EventsFeed: React.FC = ({ contract }) => { const [autoUpdate, setAutoUpdate] = useState(true); const allEvents = useActivity(contract, autoUpdate); - const event = useSingleQueryParam("event"); + const searchParams = useSearchParams(); + const event = searchParams?.get("event"); const [selectedEvent, setSelectedEvent] = useState(event || "all"); const chainSlug = useEVMContractInfo()?.chainSlug; diff --git a/apps/dashboard/src/hooks/useQueryParam.ts b/apps/dashboard/src/hooks/useQueryParam.ts deleted file mode 100644 index 8dd2956eb..000000000 --- a/apps/dashboard/src/hooks/useQueryParam.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { useSearchParams } from "next/navigation"; -import {} from "next/router"; - -/** - * @deprecated use `useSearchParams` from `next/navigation` instead - */ -export function useSingleQueryParam( - key: string, -): T | undefined { - const searchParams = useSearchParams(); - - return searchParams?.get(key) as T | undefined; -} diff --git a/apps/dashboard/src/pages/contracts/publish/[contractId].tsx b/apps/dashboard/src/pages/contracts/publish/[contractId].tsx index 75ea0310c..a5485ae3c 100644 --- a/apps/dashboard/src/pages/contracts/publish/[contractId].tsx +++ b/apps/dashboard/src/pages/contracts/publish/[contractId].tsx @@ -1,20 +1,18 @@ import { Flex } from "@chakra-ui/react"; import { AppLayout } from "components/app-layouts/app"; import { ContractPublishForm } from "components/contract-components/contract-publish-form"; -import { useSingleQueryParam } from "hooks/useQueryParam"; -// import dynamic from "next/dynamic"; +import { useRouter } from "next/router"; import { PageId } from "page-id"; import type { ThirdwebNextPage } from "utils/types"; const ContractsPublishPage: ThirdwebNextPage = () => { - const contractId = useSingleQueryParam("contractId"); + const { query } = useRouter(); + const contractId = query.contractId as string | undefined; return ( - <> - - {contractId && } - - + + {contractId && } + ); };