diff --git a/apps/dashboard/src/contract-ui/hooks/useRouteConfig.tsx b/apps/dashboard/src/contract-ui/hooks/useRouteConfig.tsx index 0b7c3cdfe74..dd35557b53d 100644 --- a/apps/dashboard/src/contract-ui/hooks/useRouteConfig.tsx +++ b/apps/dashboard/src/contract-ui/hooks/useRouteConfig.tsx @@ -1,4 +1,9 @@ -import { contractType, getErcs, useContract } from "@thirdweb-dev/react"; +import { + contractType, + getAllDetectedFeatureNames, + getErcs, + useContract, +} from "@thirdweb-dev/react"; import { extensionDetectedState } from "components/buttons/ExtensionDetectButton"; import { useEns } from "components/contract-components/hooks"; import { detectFeatures } from "components/contract-components/utils"; @@ -260,6 +265,10 @@ export function useContractRouteConfig( ["PermissionsEnumerable"], ); + const detectedFeatureNames = contractQuery.contract?.abi + ? getAllDetectedFeatureNames(contractQuery.contract.abi) + : []; + return { claimconditionExtensionDetection, detectedMetadata, @@ -285,6 +294,7 @@ export function useContractRouteConfig( detectedModularExtension, hasNewClaimConditions, detectedPermissionEnumerable, + detectedFeatureNames, }; }, [contractQuery]); diff --git a/apps/dashboard/src/contract-ui/tabs/overview/components/ContractChecklist.tsx b/apps/dashboard/src/contract-ui/tabs/overview/components/ContractChecklist.tsx index cb5e3da64c3..e2b078ba4ff 100644 --- a/apps/dashboard/src/contract-ui/tabs/overview/components/ContractChecklist.tsx +++ b/apps/dashboard/src/contract-ui/tabs/overview/components/ContractChecklist.tsx @@ -1,15 +1,15 @@ -import { thirdwebClient } from "@/constants/client"; import { useIsAdmin, useIsMinter, } from "@3rdweb-sdk/react/hooks/useContractRoles"; -import { useBatchesToReveal, useClaimConditions } from "@thirdweb-dev/react"; -import type { SmartContract } from "@thirdweb-dev/sdk"; +import { + useBatchesToReveal, + useClaimConditions, + useContract, +} from "@thirdweb-dev/react"; import { detectFeatures } from "components/contract-components/utils"; import { StepsCard } from "components/dashboard/StepsCard"; import { useTabHref } from "contract-ui/utils"; -import { useV5DashboardChain } from "lib/v5-adapter"; -import { getContract } from "thirdweb"; import { totalSupply } from "thirdweb/extensions/erc20"; import { getNFTs as erc721GetNfts, @@ -19,10 +19,12 @@ import { import { getNFTs as erc1155Nfts } from "thirdweb/extensions/erc1155"; import { getAccounts } from "thirdweb/extensions/erc4337"; import { useReadContract } from "thirdweb/react"; + +import type { ThirdwebContract } from "thirdweb"; import { Link, Text } from "tw-components"; interface ContractChecklistProps { - contract: SmartContract; + contract: ThirdwebContract; } type Step = { @@ -34,42 +36,37 @@ type Step = { export const ContractChecklist: React.FC = ({ contract, }) => { - const chain = useV5DashboardChain(contract.chainId); - const contractv5 = getContract({ - address: contract.getAddress(), - chain: chain, - client: thirdwebClient, - }); + const contractQuery = useContract(contract.address); const nftHref = useTabHref("nfts"); const tokenHref = useTabHref("tokens"); const accountsHref = useTabHref("accounts"); const claimConditionsHref = useTabHref("claim-conditions"); const erc721Claimed = useReadContract(getTotalClaimedSupply, { - contract: contractv5, + contract: contract, }); - const erc20Supply = useReadContract(totalSupply, { contract: contractv5 }); + const erc20Supply = useReadContract(totalSupply, { contract }); const accounts = useReadContract(getAccounts, { - contract: contractv5, + contract, start: 0n, end: 1n, }); const erc721NftQuery = useReadContract(erc721GetNfts, { - contract: contractv5, + contract, start: 0, count: 1, }); const erc1155NftQuery = useReadContract(erc1155Nfts, { - contract: contractv5, + contract, start: 0, count: 1, }); const sharedMetadataQuery = useReadContract(sharedMetadata, { - contract: contractv5, + contract, }); - const claimConditions = useClaimConditions(contract); - const batchesToReveal = useBatchesToReveal(contract); + const claimConditions = useClaimConditions(contractQuery.contract); + const batchesToReveal = useBatchesToReveal(contractQuery.contract); const steps: Step[] = [ { @@ -79,14 +76,14 @@ export const ContractChecklist: React.FC = ({ }, ]; - const isAdmin = useIsAdmin(contractv5); - const isMinter = useIsMinter(contractv5); + const isAdmin = useIsAdmin(contract); + const isMinter = useIsMinter(contract); if (!isAdmin) { return null; } - const isLazyMintable = detectFeatures(contract, [ + const isLazyMintable = detectFeatures(contractQuery.contract, [ "ERC721LazyMintable", "ERC1155LazyMintableV2", "ERC1155LazyMintableV1", @@ -109,7 +106,7 @@ export const ContractChecklist: React.FC = ({ }); } - const isErc721SharedMetadadata = detectFeatures(contract, [ + const isErc721SharedMetadadata = detectFeatures(contractQuery.contract, [ "ERC721SharedMetadata", ]); if (isErc721SharedMetadadata) { @@ -128,14 +125,14 @@ export const ContractChecklist: React.FC = ({ }); } - const erc721hasClaimConditions = detectFeatures(contract, [ + const erc721hasClaimConditions = detectFeatures(contractQuery.contract, [ "ERC721ClaimPhasesV1", "ERC721ClaimPhasesV2", "ERC721ClaimConditionsV1", "ERC721ClaimConditionsV2", "ERC721ClaimCustom", ]); - const erc20HasClaimConditions = detectFeatures(contract, [ + const erc20HasClaimConditions = detectFeatures(contractQuery.contract, [ "ERC20ClaimPhasesV1", "ERC20ClaimPhasesV2", "ERC20ClaimConditionsV1", @@ -178,7 +175,9 @@ export const ContractChecklist: React.FC = ({ }); } - const tokenIsMintable = detectFeatures(contract, ["ERC20Mintable"]); + const tokenIsMintable = detectFeatures(contractQuery.contract, [ + "ERC20Mintable", + ]); if (tokenIsMintable && isMinter) { steps.push({ title: "First token minted", @@ -195,7 +194,7 @@ export const ContractChecklist: React.FC = ({ }); } - const nftIsMintable = detectFeatures(contract, [ + const nftIsMintable = detectFeatures(contractQuery.contract, [ "ERC721Mintable", "ERC1155Mintable", ]); @@ -217,7 +216,9 @@ export const ContractChecklist: React.FC = ({ }); } - const isAccountFactory = detectFeatures(contract, ["AccountFactory"]); + const isAccountFactory = detectFeatures(contractQuery.contract, [ + "AccountFactory", + ]); if (isAccountFactory) { steps.push({ title: "First account created", @@ -234,7 +235,7 @@ export const ContractChecklist: React.FC = ({ }); } - const isRevealable = detectFeatures(contract, [ + const isRevealable = detectFeatures(contractQuery.contract, [ "ERC721Revealable", "ERC1155Revealable", ]); diff --git a/apps/dashboard/src/contract-ui/tabs/overview/components/NFTDetails.tsx b/apps/dashboard/src/contract-ui/tabs/overview/components/NFTDetails.tsx index f04960c07c3..db32462f4e6 100644 --- a/apps/dashboard/src/contract-ui/tabs/overview/components/NFTDetails.tsx +++ b/apps/dashboard/src/contract-ui/tabs/overview/components/NFTDetails.tsx @@ -1,41 +1,25 @@ -import { thirdwebClient } from "@/constants/client"; import { Flex, useBreakpointValue } from "@chakra-ui/react"; import { SupplyCards } from "contract-ui/tabs/nfts/components/supply-cards"; import { useTabHref } from "contract-ui/utils"; -import { useV5DashboardChain } from "lib/v5-adapter"; -import { useMemo } from "react"; -import { getContract } from "thirdweb"; +import type { ThirdwebContract } from "thirdweb"; import { getNFTs } from "thirdweb/extensions/erc721"; import { useReadContract } from "thirdweb/react"; import { Heading, TrackedLink, type TrackedLinkProps } from "tw-components"; import { NFTCards } from "./NFTCards"; interface NFTDetailsProps { - contractAddress: string; - chainId: number; + contract: ThirdwebContract; trackingCategory: TrackedLinkProps["category"]; features: string[]; } export const NFTDetails: React.FC = ({ - contractAddress, - chainId, + contract, trackingCategory, features, }) => { const isMobile = useBreakpointValue({ base: true, md: false }); const nftsHref = useTabHref("nfts"); - const chain = useV5DashboardChain(chainId); - - const contract = useMemo( - () => - getContract({ - client: thirdwebClient, - address: contractAddress, - chain, - }), - [contractAddress, chain], - ); const nftQuery = useReadContract(getNFTs, { contract, @@ -77,7 +61,7 @@ export const NFTDetails: React.FC = ({ {showSupplyCards && contract && } = ({ contract, trackingCategory, }) => { - const allRoleMembers = useAllRoleMembers(contract); + const contractQuery = useContract(contract.address); + const allRoleMembers = useAllRoleMembers(contractQuery.contract); const permissionsHref = useTabHref("permissions"); const members = useMemo(() => { diff --git a/apps/dashboard/src/contract-ui/tabs/overview/page.tsx b/apps/dashboard/src/contract-ui/tabs/overview/page.tsx index 142cabf1d0c..919ea9c099f 100644 --- a/apps/dashboard/src/contract-ui/tabs/overview/page.tsx +++ b/apps/dashboard/src/contract-ui/tabs/overview/page.tsx @@ -1,12 +1,9 @@ -import { thirdwebClient } from "@/constants/client"; import { Divider, Flex, GridItem, SimpleGrid } from "@chakra-ui/react"; -import { contractType, useContract } from "@thirdweb-dev/react"; -import { type Abi, getAllDetectedFeatureNames } from "@thirdweb-dev/sdk"; import { PublishedBy } from "components/contract-components/shared/published-by"; import { RelevantDataSection } from "components/dashboard/RelevantDataSection"; -import { useV5DashboardChain } from "lib/v5-adapter"; +import type { ContractType } from "constants/contracts"; import { useMemo } from "react"; -import { getContract } from "thirdweb"; +import type { ThirdwebContract } from "thirdweb"; import { AnalyticsOverview } from "./components/Analytics"; import { BuildYourApp } from "./components/BuildYourApp"; import { ContractChecklist } from "./components/ContractChecklist"; @@ -19,63 +16,41 @@ import { TokenDetails } from "./components/TokenDetails"; import { getGuidesAndTemplates } from "./helpers/getGuidesAndTemplates"; interface ContractOverviewPageProps { - contractAddress?: string; + contract: ThirdwebContract; + contractType: ContractType; + detectedFeatureNames: string[]; } const TRACKING_CATEGORY = "contract_overview"; export const ContractOverviewPage: React.FC = ({ - contractAddress, + contract, + contractType, + detectedFeatureNames, }) => { - const { contract } = useContract(contractAddress); - const contractTypeQuery = contractType.useQuery(contractAddress); - const contractTypeData = contractTypeQuery?.data || "custom"; - - const detectedFeatureNames = useMemo( - () => - contract?.abi ? getAllDetectedFeatureNames(contract.abi as Abi) : [], - [contract?.abi], - ); - const { guides, templates } = useMemo( - () => getGuidesAndTemplates(detectedFeatureNames, contractTypeData), - [detectedFeatureNames, contractTypeData], + () => getGuidesAndTemplates(detectedFeatureNames, contractType), + [detectedFeatureNames, contractType], ); - const chain = useV5DashboardChain(contract?.chainId); - - if (!contractAddress) { - return
No contract address provided
; - } - - const contractV5 = - contract && chain - ? getContract({ - address: contract.getAddress(), - chain, - client: thirdwebClient, - }) - : undefined; - return ( {contract && } {contract && ( )} {contract && - (contractTypeData === "marketplace" || + (contractType === "marketplace" || ["DirectListings", "EnglishAuctions"].some((type) => detectedFeatureNames.includes(type), - )) && - contractV5 && ( + )) && ( @@ -85,35 +60,30 @@ export const ContractOverviewPage: React.FC = ({ detectedFeatureNames.includes(type), ) && ( )} - {contractV5 && - ["ERC20"].some((type) => detectedFeatureNames.includes(type)) && ( - - )} - {contractV5 && ( - detectedFeatureNames.includes(type)) && ( + + )} + + {["PermissionsEnumerable"].some((type) => + detectedFeatureNames.includes(type), + ) && ( + )} - {contract && - ["PermissionsEnumerable"].some((type) => - detectedFeatureNames.includes(type), - ) && ( - - )} - + {contract?.abi && } {(guides.length > 0 || templates.length > 0) && }