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 + + + )} ))}