remove unused code (#4247)

## PR-Codex overview The focus of this PR is to remove unused files, update dependencies, and refactor code structure. ### Detailed summary - Removed unused files related to maps, gas estimator, and components - Refactored `useHeightObserver` function - Updated dependencies like `@tanstack/react-query` and `@stripe/react-stripe-js` - Removed unused code related to contract code snippets and event handling - Updated package versions and removed `idb-keyval` dependency > The following files were skipped due to too many changes: `pnpm-lock.yaml` > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
2024-08-22 22:21:14 +00:00
parent 5d6b1e1d0a
commit 626072cc0d
13 changed files with 205 additions and 850 deletions
@@ -48,9 +48,7 @@
    "@sentry/nextjs": "^8.26.0",
    "@stripe/react-stripe-js": "^2.7.3",
    "@stripe/stripe-js": "^3.5.0",
-    "@tanstack/query-async-storage-persister": "^4.36.1",
    "@tanstack/react-query": "^4.36.1",
-    "@tanstack/react-query-persist-client": "^4.36.1",
    "@tanstack/react-table": "^8.17.3",
    "@thirdweb-dev/react": "workspace:*",
    "@thirdweb-dev/sdk": "workspace:*",
@@ -68,7 +66,6 @@
    "flat": "^6.0.1",
    "framer-motion": "^11.2.12",
    "fuse.js": "7.0.0",
-    "idb-keyval": "^6.2.1",
    "ioredis": "^5.4.1",
    "ipaddr.js": "^2.2.0",
    "lottie-react": "^2.4.0",
@@ -87,7 +84,6 @@
    "qrcode": "^1.5.3",
    "react": "18.3.1",
    "react-children-utilities": "^2.10.0",
-    "react-confetti": "^6.1.0",
    "react-day-picker": "^8.10.1",
    "react-dom": "18.3.1",
    "react-dropzone": "^14.2.3",
@@ -133,15 +129,11 @@
    "@typescript-eslint/parser": "7.14.1",
    "autoprefixer": "^10.4.19",
    "checkly": "^4.7.0",
-    "dotenv": "^16.4.5",
    "eslint": "8.57.0",
    "eslint-config-biome": "^1.7.3",
    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-inclusive-language": "^2.2.1",
    "eslint-plugin-promise": "^6.2.0",
-    "eslint-plugin-react": "7.34.3",
    "eslint-plugin-react-compiler": "0.0.0-experimental-51a85ea-20240601",
-    "eslint-plugin-react-hooks": "^4.6.2",
    "knip": "^5.23.1",
    "next-sitemap": "^4.2.3",
    "next-unused": "^0.0.6",
@@ -34,7 +34,7 @@ export function DynamicHeight(props: {
  );
 }

-export function useHeightObserver() {
+function useHeightObserver() {
  const elementRef = useRef<HTMLDivElement>(null);
  const [height, setHeight] = useState<number | undefined>();

@@ -1,16 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-
-export type GasEstimate = { gasPrice: number; ethPrice: number };
-
-export function useGas() {
-  return useQuery(
-    ["gas-price", "ethereum"],
-    async () => {
-      const res = await fetch("/api/gas");
-      return res.json() as Promise<GasEstimate>;
-    },
-    {
-      refetchInterval: 60_000,
-    },
-  );
-}
@@ -1,175 +0,0 @@
-import { useTheme } from "next-themes";
-import { useId, useMemo } from "react";
-import {
-  Bar,
-  BarChart as RechartsBarChart,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from "recharts";
-import { CustomToolTip } from "./custom-tooltip";
-
-type GenericDataType = Record<string, string | number>;
-
-type IndexType = "date";
-
-interface BarChartProps<
-  TData extends GenericDataType,
-  TIndexKey extends keyof TData,
-> {
-  data: TData[];
-  index: {
-    id: TIndexKey;
-    label?: string;
-    type?: IndexType;
-    format?: (index: TData[TIndexKey]) => string;
-  };
-
-  categories: Array<{
-    id: keyof TData;
-    label?: string;
-    color?: string;
-    format?: (value: number) => string;
-  }>;
-
-  showXAxis?: boolean;
-  showYAxis?: boolean;
-}
-
-export const BarChart = <
-  TData extends GenericDataType,
-  TIndexKey extends keyof TData,
->({
-  data,
-  index,
-  categories,
-  showXAxis,
-  showYAxis,
-}: BarChartProps<TData, TIndexKey>) => {
-  const { theme } = useTheme();
-  const id = useId();
-
-  const defaultBarColor = useMemo(() => {
-    if (theme === "light") {
-      return "#649CDD";
-    }
-
-    return "#3682DA";
-  }, [theme]);
-
-  if (!data.length) {
-    return null;
-  }
-
-  return (
-    <ResponsiveContainer width="100%" height="100%">
-      <RechartsBarChart data={data}>
-        <defs>
-          {categories.map((cat) => (
-            <linearGradient
-              key={`${cat.id as string}`}
-              id={`bar_color_${id}_${cat.id as string}`}
-              x1="0"
-              y1="0"
-              x2="0"
-              y2="100%"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop
-                offset="0"
-                stopColor={cat.color || defaultBarColor}
-                stopOpacity={1}
-              />
-              <stop
-                offset="1"
-                stopColor={cat.color || defaultBarColor}
-                stopOpacity={0.75}
-              />
-            </linearGradient>
-          ))}
-        </defs>
-
-        {categories.map((cat) => (
-          <Bar
-            key={`${cat.id as string}`}
-            dataKey={cat.id as string}
-            stackId="a"
-            stroke={cat.color || defaultBarColor}
-            fill={`url(#bar_color_${id}_${cat.id as string})`}
-            strokeWidth={0}
-          />
-        ))}
-        <Tooltip
-          wrapperStyle={{ outline: "none" }}
-          content={({ active, payload }) => {
-            const payloadKey = payload?.[0]?.dataKey;
-            const category = categories.find((cat) => cat.id === payloadKey);
-            return (
-              <CustomToolTip
-                active={active}
-                payload={payload}
-                valueLabel={category?.label || ""}
-                valueFormatter={category?.format}
-              />
-            );
-          }}
-          cursor={{
-            stroke: defaultBarColor,
-            fill: defaultBarColor,
-            opacity: 0.2,
-            strokeDasharray: 2,
-            strokeWidth: 0,
-          }}
-        />
-
-        <XAxis
-          hide={!showXAxis}
-          dataKey={index.id as string}
-          tickFormatter={(payload) =>
-            index.format
-              ? index.format(payload)
-              : new Date(payload).toLocaleDateString(undefined, {
-                  day: "2-digit",
-                  month: "2-digit",
-                  year: "2-digit",
-                })
-          }
-          style={{
-            fontSize: "12px",
-            fontFamily: "var(--chakra-fonts-body)",
-          }}
-          stroke="var(--chakra-colors-paragraph)"
-          tickLine={false}
-          axisLine={false}
-          interval="preserveStartEnd"
-          minTickGap={5}
-          domain={["dataMin - 86400000", "dataMax + 86400000"]}
-          type="number"
-          tick={{ transform: "translate(0, 6)" }}
-          ticks={[
-            data[0][index.id],
-            data[Math.floor(data.length / 2)][index.id],
-            data[data.length - 1][index.id],
-          ]}
-        />
-
-        <YAxis
-          hide={!showYAxis}
-          width={60}
-          tickFormatter={(payload) => {
-            const category = categories[0];
-            return category?.format
-              ? category.format(payload)
-              : payload.toLocaleString();
-          }}
-          className="font-sans text-xs"
-          stroke="hsl(var(--muted-foreground))"
-          type="number"
-          tickLine={false}
-          axisLine={false}
-        />
-      </RechartsBarChart>
-    </ResponsiveContainer>
-  );
-};
@@ -36,7 +36,6 @@ import {
  getZkTransactionsForDeploy,
  zkDeployContractFromUri,
 } from "@thirdweb-dev/sdk/evm/zksync";
-import type { SnippetApiResponse } from "components/contract-tabs/code/types";
 import type { ProfileMetadata, ProfileMetadataInput } from "constants/schemas";
 import type { providers } from "ethers";
 import { useSupportedChain } from "hooks/chains/configureChains";
@@ -1186,35 +1185,6 @@ export function useContractEvents(abi: Abi) {
  return abi ? extractEventsFromAbi(abi) : undefined;
 }

-// TODO: this points to very old snippets, we need to update this!
-export function useFeatureContractCodeSnippetQuery(language: string) {
-  if (language === "javascript") {
-    // biome-ignore lint/style/noParameterAssign: FIXME
-    language = "sdk";
-  }
-
-  if (language === "react-native") {
-    // biome-ignore lint/style/noParameterAssign: FIXME
-    language = "react";
-  }
-
-  return useQuery({
-    queryKey: ["feature-code-snippet", language],
-    queryFn: async () => {
-      // only allow specific languages
-      if (
-        ["go", "python", "react", "sdk", "unity"].includes(language) === false
-      ) {
-        throw new Error("Invalid language");
-      }
-      const res = await fetch(
-        `https://raw.githubusercontent.com/thirdweb-dev/docs/main/docs/feature_snippets_${language}.json`,
-      );
-      return (await res.json()) as SnippetApiResponse;
-    },
-  });
-}
-
 export function useCustomFactoryAbi(contractAddress: string, chainId: number) {
  const chain = useSupportedChain(chainId);
  return useQuery(
@@ -13,20 +13,3 @@ export interface SupportedEnvironment {
 }

 export type CodeSnippet = Partial<Record<CodeEnvironment, string>>;
-
-export interface SnippetSchema {
-  name: string;
-  summary: string | null;
-  remarks?: string | null;
-  examples: CodeSnippet;
-  reference: {
-    // biome-ignore lint/suspicious/noExplicitAny: FIXME
-    [key: string]: any;
-  };
-  methods?: SnippetSchema[];
-  properties?: SnippetSchema[];
-}
-
-export interface SnippetApiResponse {
-  [key: string]: SnippetSchema;
-}
@@ -1,94 +0,0 @@
-import type { GasEstimate } from "@3rdweb-sdk/react/hooks/useGas";
-import { Box, type BoxProps, Flex, Icon, Tooltip } from "@chakra-ui/react";
-import { AiOutlineInfoCircle } from "@react-icons/all-files/ai/AiOutlineInfoCircle";
-import { useTrack } from "hooks/analytics/useTrack";
-import { FiExternalLink } from "react-icons/fi";
-import { toTokens } from "thirdweb/utils";
-import { Heading, Link, Text } from "tw-components";
-import { contractSlugMapping } from "./contractSlugMapping";
-import { functionNameMapping } from "./functionNameMapping";
-
-interface GasEstimatorBoxProps extends BoxProps {
-  ethOrUsd: "eth" | "usd";
-  data: BenchmarkItem;
-  gasEstimate?: GasEstimate;
-}
-
-export type BenchmarkItem = {
-  contractName: string;
-  benchmarks: Array<{
-    functionName: string;
-    gasCost: string;
-  }>;
-};
-
-export const GasEstimatorBox: React.FC<GasEstimatorBoxProps> = ({
-  data,
-  ethOrUsd,
-  gasEstimate,
-  ...props
-}) => {
-  const formatPrice = (price: number | undefined) => {
-    if (price && ethOrUsd === "eth") {
-      return `~${Number(
-        toTokens(BigInt(((gasEstimate?.gasPrice as number) || 30) * price), 9),
-      ).toFixed(4)} ETH`;
-    }
-    if (price && ethOrUsd === "usd") {
-      return `~$${(
-        Number(
-          toTokens(
-            BigInt(((gasEstimate?.gasPrice as number) || 30) * price),
-            9,
-          ),
-        ) * (gasEstimate?.ethPrice || 3400)
-      ).toFixed(2)}`;
-    }
-  };
-  const trackEvent = useTrack();
-  const contractSlug = contractSlugMapping[data.contractName];
-  const tooltipContent = functionNameMapping[data.contractName] || {};
-  const externalLink = contractSlug
-    ? `https://portal.thirdweb.com/contracts/explore/pre-built-contracts/${contractSlug}`
-    : "https://portal.thirdweb.com/contracts/explore/overview";
-  return (
-    <Box p={6} border="1px solid" borderColor="borderColor" {...props}>
-      <Link
-        href={externalLink}
-        onClick={() =>
-          trackEvent({
-            category: "gas-estimator",
-            action: "click",
-            label: "portal-link",
-            contractType: data.contractName,
-          })
-        }
-        isExternal
-      >
-        <Heading size="title.sm" mb={1} mr={1} as={Flex} alignItems="center">
-          {beautifyContractName(data.contractName)}
-          <Icon as={FiExternalLink} ml={1} boxSize={4} />
-        </Heading>
-      </Link>
-      {data.benchmarks.map((item) => (
-        <Flex justifyContent="space-between" key={item.functionName}>
-          <Tooltip
-            label={tooltipContent[item.functionName] || item.functionName}
-          >
-            <Flex justifyContent="center" alignItems="center">
-              <Text noOfLines={1} maxW={"150px"} mr={1}>
-                {item.functionName}
-              </Text>
-              <Icon as={AiOutlineInfoCircle} boxSize={4} />
-            </Flex>
-          </Tooltip>
-          <Text>{formatPrice(Number(item.gasCost))}</Text>
-        </Flex>
-      ))}
-    </Box>
-  );
-};
-
-const beautifyContractName = (contractName: string): string => {
-  return contractName.charAt(0).toUpperCase() + contractName.slice(1);
-};
@@ -1,23 +0,0 @@
-// Used to map the contractName to this link: https://portal.thirdweb.com/contracts/explore/pre-built-contracts/<contract-slug>
-// some pages don't exist in docs-v2
-export const contractSlugMapping: Record<string, Lowercase<string>> = {
-  multiwrap: "multiwrap",
-  signatureDrop: "",
-  editionStake: "stake-erc1155",
-  nftStake: "stake-erc721",
-  airdropERC20: "airdrop-erc20",
-  airdropERC721: "airdrop-erc721",
-  pack: "pack",
-  tokenERC20: "token",
-  tokenERC721: "nft-collection",
-  tokenERC1155: "edition",
-  tokenStake: "stake-erc20",
-  airdropERC1155: "airdrop-erc1155",
-  packvrf: "",
-  dropERC1155: "edition-drop",
-  dropERC20: "token-drop",
-  airdropClaim: "",
-  airdropPush: "",
-  airdropSignature: "",
-  dropERC721: "nft-drop",
-};
@@ -1,117 +0,0 @@
-import type { contractSlugMapping } from "./contractSlugMapping";
-// Map the alias of the benchmark function to the operation it carries
-// eg. "erc20_100" -> "Claim 100 ERC20 token"
-export const functionNameMapping: Record<
-  keyof typeof contractSlugMapping,
-  Record<string, string>
-> = {
-  multiwrap: {
-    unwrap: "Unwrap one ERC20, one ERC721 and one ERC1155 token",
-    wrap: "Wrap one ERC20, one ERC721 and one ERC1155 token",
-  },
-  signatureDrop: {
-    claim_five_tokens: "Claim 5 tokens",
-    lazyMint: "Lazy mint 100 ERC721 tokens",
-    lazyMint_for_delayed_reveal:
-      "Lazy mint 100 ERC721 tokens for Delayed Reveal",
-    reveal: "Reveal a token",
-    setClaimConditions: "Set a claim condition",
-  },
-  editionStake: {
-    claimRewards: "Claim rewards",
-    stake: "Stake 50 ERC1155 tokens",
-    withdraw: "Withdraw 40 tokens",
-  },
-  nftStake: {
-    claimRewards: "Claim rewards",
-    stake_five_tokens: "Stake 5 tokens",
-    withdraw: "Withdraw a token",
-  },
-  airdropERC20: {
-    airdrop: "Airdrop to 1,000 recipients",
-  },
-  airdropERC721: {
-    airdrop: "Airdrop 1,000 ERC721 tokens",
-  },
-  pack: {
-    addPackContents: "Add 2 more tokens to the created pack",
-    createPack: "Create a pack with 10 different tokens",
-    openPack: "Open the created pack",
-  },
-  tokenERC20: {
-    mintTo: "Mint 100 tokens",
-    mintWithSignature_pay_with_ERC20: "",
-    mintWithSignature_pay_with_native_token: "",
-  },
-  tokenERC721: {
-    burn: "Burn a token",
-    mintTo: "Mint a token",
-    mintWithSignature_pay_with_ERC20: "",
-    mintWithSignature_pay_with_native_token: "",
-  },
-  tokenERC1155: {
-    burn: "Burn an ERC1155 token (quantity: 100)",
-    mintTo: "Mint an ERC1155 token (quantity: 100)",
-    mintWithSignature_pay_with_ERC20: "",
-    mintWithSignature_pay_with_native_token: "",
-  },
-  tokenStake: {
-    claimRewards: "Claim rewards",
-    stake: "Stake 400 tokens",
-    withdraw: "Withdraw 100 tokens",
-  },
-  airdropERC1155: {
-    airdrop: "Airdrop to 1,000 recipients (5 tokens each)",
-  },
-  packvrf: {
-    createPack: "Create a pack with 10 different tokens",
-    openPack: "Open the created pack",
-    openPackAndClaimRewards: "Open the created pack and claim rewards",
-  },
-  dropERC1155: {
-    claim: "Claim 100 tokens",
-    lazyMint: "Lazy mint 100 tokens",
-    setClaimConditions_five_conditions: "Set 5 conditions",
-  },
-  dropERC20: {
-    claim: "",
-    setClaimConditions_five_conditions: "Set 5 claim conditions",
-  },
-  airdropClaim: {
-    erc1155: "Claim 5 ERC1155 tokens",
-    erc20: "Claim 5 ERC20 tokens",
-    erc721: "Claim an ERC721 token",
-  },
-  airdropPush: {
-    erc1155ReceiverCompliant: "",
-    erc1155_10: "",
-    erc1155_100: "",
-    erc1155_1000: "",
-    erc20_10: "",
-    erc20_100: "",
-    erc20_1000: "",
-    erc721ReceiverCompliant: "",
-    erc721_10: "",
-    erc721_100: "",
-    erc721_1000: "",
-  },
-  airdropSignature: {
-    erc115_10: "",
-    erc115_100: "",
-    erc115_1000: "",
-    erc20_10: "",
-    erc20_100: "",
-    erc20_1000: "",
-    erc721_10: "",
-    erc721_100: "",
-    erc721_1000: "",
-  },
-  dropERC721: {
-    claim_five_tokens: "Claim 5 ERC721 tokens",
-    lazyMint: "Lazy mint 100 ERC721 tokens",
-    lazyMint_for_delayed_reveal:
-      "Lazy mint 100 ERC721 tokens for Delayed Reveal",
-    reveal: "Reveal a token",
-    setClaimConditions_five_conditions: "Set 5 claim conditions",
-  },
-};
@@ -1,23 +0,0 @@
-import { isBrowser } from "../utils/isBrowser";
-
-// EWS token shenaningans
-const GLOBAL_EWS_AUTH_TOKEN_KEY = "TW_EWS_AUTH_TOKEN";
-
-export function storeEWSToken(token: string): void {
-  if (!isBrowser()) {
-    return;
-  }
-  localStorage.setItem(GLOBAL_EWS_AUTH_TOKEN_KEY, token);
-}
-
-export function getLatestEWSToken(): string | undefined {
-  if (!isBrowser()) {
-    return;
-  }
-  const token = localStorage.getItem(GLOBAL_EWS_AUTH_TOKEN_KEY);
-  if (token) {
-    localStorage.removeItem(GLOBAL_EWS_AUTH_TOKEN_KEY);
-    return token;
-  }
-  return undefined;
-}
@@ -1,54 +0,0 @@
-export const apiKeyMap: Record<number, string> = {
-  1: process.env.ETHERSCAN_KEY as string,
-  5: process.env.ETHERSCAN_KEY as string,
-  11155111: process.env.ETHERSCAN_KEY as string,
-  137: process.env.POLYGONSCAN_KEY as string,
-  80001: process.env.POLYGONSCAN_KEY as string,
-  250: process.env.FANTOMSCAN_KEY as string,
-  4002: process.env.FANTOMSCAN_KEY as string,
-  43114: "",
-  43113: "",
-  42161: process.env.ARBITRUMSCAN_KEY as string,
-  421613: process.env.ARBITRUMSCAN_KEY as string,
-  10: process.env.OPTIMISMSCAN_KEY as string,
-  420: process.env.OPTIMISMSCAN_KEY as string,
-  56: process.env.BSCSCAN_KEY as string,
-  97: process.env.BSCSCAN_KEY as string,
-  8453: process.env.BASESCAN_KEY as string,
-  // no api key needed for these
-  84531: "" as string,
-  1442: "" as string,
-};
-
-export const apiMap: Record<number, string> = {
-  1: "https://api.etherscan.io/api",
-  3: "https://api-ropsten.etherscan.io/api",
-  5: "https://api-goerli.etherscan.io/api",
-  10: "https://api-optimistic.etherscan.io/api",
-  25: "https://api.cronoscan.com/api",
-  42: "https://api-kovan.etherscan.io/api",
-  56: "https://api.bscscan.com/api",
-  97: "https://api-testnet.bscscan.com/api",
-  128: "https://api.hecoinfo.com/api",
-  137: "https://api.polygonscan.com/api",
-  199: "https://api.bttcscan.com/api",
-  250: "https://api.ftmscan.com/api",
-  256: "https://api-testnet.hecoinfo.com/api",
-  420: "https://api-goerli-optimistic.etherscan.io/api",
-  1029: "https://api-testnet.bttcscan.com/api",
-  1284: "https://api-moonbeam.moonscan.io/api",
-  1285: "https://api-moonriver.moonscan.io/api",
-  1287: "https://api-moonbase.moonscan.io/api",
-  11155111: "https://api-sepolia.etherscan.io/api",
-  4002: "https://api-testnet.ftmscan.com/api",
-  42161: "https://api.arbiscan.io/api",
-  43113: "https://api.routescan.io/v2/network/testnet/evm/43113/etherscan/api",
-  43114: "https://api.routescan.io/v2/network/mainnet/evm/43114/etherscan/api",
-  421613: "https://api-goerli.arbiscan.io/api",
-  80001: "https://api-testnet.polygonscan.com/api",
-  1313161554: "https://api.aurorascan.dev/api",
-  1313161555: "https://api-testnet.aurorascan.dev/api",
-  84531: "https://api-goerli.basescan.org/api",
-  8453: "https://api.basescan.org/api",
-  1442: "https://api-testnet-zkevm.polygonscan.com/api",
-};
@@ -1,17 +0,0 @@
-import { BigNumber } from "ethers";
-
-// biome-ignore lint/suspicious/noExplicitAny: FIXME
-export function bigNumberReplacer(_key: string, value: any) {
-  // if we find a BigNumber then make it into a string (since that is safe)
-  if (
-    BigNumber.isBigNumber(value) ||
-    (typeof value === "object" &&
-      value !== null &&
-      value.type === "BigNumber" &&
-      "hex" in value)
-  ) {
-    return BigNumber.from(value).toString();
-  }
-
-  return value;
-}