feat: add deprecation notices and update components (#2681)

- Added `isDeprecated` flag to route configurations in `useRouteConfig`.
- Displayed deprecation alert in `ContractPaymentsPage`.
- Updated imports in `page.tsx` to include `Alert`, `AlertDescription`, `AlertIcon`, and `Link`.
- Added deprecation badge to navigation links in `detail-page.tsx`.

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to deprecate certain features and provide migration guidance for contract payments.

### Detailed summary
- Deprecated `isDeprecated` flag added to components and tabs
- Deprecated status displayed in UI elements
- Added `DeprecatedTab` component with migration guidance
- Updated imports in `page.tsx` for Chakra UI components and `tw-components`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

src/contract-ui/hooks/useRouteConfig.tsx

@@ -173,6 +173,7 @@ export function useContractRouteConfig(
       path: "payments",
       component: LazyContractPaymentsPage,
       isDefault: true,
+      isDeprecated: true,
     },
     {
       title: "NFTs",

src/contract-ui/tabs/code/components/code-overview.tsx

@@ -39,8 +39,6 @@ interface CodeOverviewProps {
   noSidebar?: boolean;
 }
 
-// TODO replace `resolveMethod` with the fn actual signatures
-
 export const COMMANDS = {
   install: {
     javascript: "npm i thirdweb",

src/contract-ui/tabs/payments/page.tsx

@@ -3,11 +3,19 @@ import {
   PaperChainToChainId,
   usePaymentsEnabledContracts,
 } from "@3rdweb-sdk/react/hooks/usePayments";
-import { Center, Flex, Spinner, Stack } from "@chakra-ui/react";
+import {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  Center,
+  Flex,
+  Spinner,
+  Stack,
+} from "@chakra-ui/react";
 import { useLayoutEffect, useMemo } from "react";
 import { PaymentsAnalytics } from "./components/payments-analytics";
 import { PaymentCheckouts } from "./components/payments-checkouts";
-import { Card, Heading, Text } from "tw-components";
+import { Card, Heading, Link, Text } from "tw-components";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
 import { NoWalletConnectedPayments } from "./components/no-wallet-connected-payments";
 import { NoPaymentsEnabled } from "./components/no-payments-enabled";
@@ -18,6 +26,24 @@ interface ContractPaymentsPageProps {
   contractAddress?: string;
 }
 
+const DeprecatedTab: React.FC = () => {
+  return (
+    <Alert status="warning" borderRadius="lg">
+      <AlertIcon />
+      <AlertDescription>
+        Contract payments are deprecated.{" "}
+        <Link
+          fontWeight={600}
+          isExternal
+          href="https://blog.thirdweb.com/guides/how-to-migrate-from-papers-nft-checkout-to-thirdweb-pay/"
+        >
+          Learn how to migrate to thirdweb pay.
+        </Link>
+      </AlertDescription>
+    </Alert>
+  );
+};
+
 export const ContractPaymentsPage: React.FC<ContractPaymentsPageProps> = ({
   contractAddress,
 }) => {
@@ -56,6 +82,7 @@ export const ContractPaymentsPage: React.FC<ContractPaymentsPageProps> = ({
   }
   return (
     <Flex direction="column" gap={6}>
+      <DeprecatedTab />
       {isLoading ? (
         <Center pb={16}>
           <Spinner size="sm" />

src/contract-ui/types/types.ts

@@ -6,6 +6,7 @@ export type EnhancedRoute<T = any> = {
   path: string;
   isDefault?: true;
   isBeta?: true;
+  isDeprecated?: true;
   isEnabled?: ExtensionDetectedState;
   component: ComponentType<T>;
 };

src/core-ui/sidebar/detail-page.tsx

@@ -61,6 +61,7 @@ export const ContractSidebar: React.FC<ContractSidebarProps> = ({
                 title: r.title,
                 href: `/${r.path.replace("overview", "")}`,
                 isBeta: r.isBeta,
+                isDeprecated: r.isDeprecated,
                 onClick: () => {
                   openState.onClose();
                 },
@@ -81,6 +82,7 @@ export const ContractSidebar: React.FC<ContractSidebarProps> = ({
                 title: r.title,
                 href: `/${r.path}`,
                 isBeta: r.isBeta,
+                isDeprecated: r.isDeprecated,
                 extensionDetectedState: r.isEnabled,
                 onClick: () => {
                   openState.onClose();
@@ -100,6 +102,7 @@ type NavLinkSectionProps = {
     href: string;
     title: string;
     isBeta?: true;
+    isDeprecated?: true;
     extensionDetectedState?: ExtensionDetectedState;
     onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
   }>;
@@ -136,6 +139,13 @@ const NavLinkSection: React.FC<NavLinkSectionProps> = ({
               </Badge>
             </Box>
           )}
+          {link.isDeprecated && (
+            <Box>
+              <Badge colorScheme="orange" variant="subtle">
+                Deprecated
+              </Badge>
+            </Box>
+          )}
         </Flex>
       ))}
     </Flex>