diff --git a/src/contract-ui/hooks/useRouteConfig.tsx b/src/contract-ui/hooks/useRouteConfig.tsx
index 688fe512d9..da6cf316ea 100644
--- a/src/contract-ui/hooks/useRouteConfig.tsx
+++ b/src/contract-ui/hooks/useRouteConfig.tsx
@@ -173,6 +173,7 @@ export function useContractRouteConfig(
path: "payments",
component: LazyContractPaymentsPage,
isDefault: true,
+ isDeprecated: true,
},
{
title: "NFTs",
diff --git a/src/contract-ui/tabs/code/components/code-overview.tsx b/src/contract-ui/tabs/code/components/code-overview.tsx
index 256d775ef0..e25d1c130b 100644
--- a/src/contract-ui/tabs/code/components/code-overview.tsx
+++ b/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",
diff --git a/src/contract-ui/tabs/payments/page.tsx b/src/contract-ui/tabs/payments/page.tsx
index 4b22a2cefe..6e5c1295f8 100644
--- a/src/contract-ui/tabs/payments/page.tsx
+++ b/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 (
+
+
+
+ Contract payments are deprecated.{" "}
+
+ Learn how to migrate to thirdweb pay.
+
+
+
+ );
+};
+
export const ContractPaymentsPage: React.FC = ({
contractAddress,
}) => {
@@ -56,6 +82,7 @@ export const ContractPaymentsPage: React.FC = ({
}
return (
+
{isLoading ? (
diff --git a/src/contract-ui/types/types.ts b/src/contract-ui/types/types.ts
index 4bbce44c3b..2601753d35 100644
--- a/src/contract-ui/types/types.ts
+++ b/src/contract-ui/types/types.ts
@@ -6,6 +6,7 @@ export type EnhancedRoute = {
path: string;
isDefault?: true;
isBeta?: true;
+ isDeprecated?: true;
isEnabled?: ExtensionDetectedState;
component: ComponentType;
};
diff --git a/src/core-ui/sidebar/detail-page.tsx b/src/core-ui/sidebar/detail-page.tsx
index b7014e8b90..906ca536df 100644
--- a/src/core-ui/sidebar/detail-page.tsx
+++ b/src/core-ui/sidebar/detail-page.tsx
@@ -61,6 +61,7 @@ export const ContractSidebar: React.FC = ({
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 = ({
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) => void;
}>;
@@ -136,6 +139,13 @@ const NavLinkSection: React.FC = ({
)}
+ {link.isDeprecated && (
+
+
+ Deprecated
+
+
+ )}
))}