Add deprecation notices to chains (#2211)

* Add deprecation alert warning to ChainPage

* Add deprecation alert to contracts pages

* Add deprecation notice to chainlist and rpc-edge list

* chain id -> chain ID

* Add deprecation notice to chain selection

* Save status

* Remove log

* Fix feedback

* Disable txn button, add alert to deployment form

Author: nachoiacovino

@3rdweb-sdk/react/components/popularChains.ts

@@ -1,31 +1,31 @@
 import {
   Arbitrum,
-  ArbitrumGoerli,
+  ArbitrumSepolia,
   Avalanche,
   AvalancheFuji,
-  BaseGoerli,
+  BaseSepoliaTestnet,
   Binance,
   Ethereum,
   Fantom,
   FantomTestnet,
-  Goerli,
   Localhost,
   Mumbai,
+  OpSepoliaTestnet,
   Optimism,
-  OptimismGoerli,
   Polygon,
+  Sepolia,
 } from "@thirdweb-dev/chains";
 
 export const popularChains = [
   Ethereum,
-  Goerli,
+  Sepolia,
   Polygon,
   Mumbai,
-  BaseGoerli,
+  BaseSepoliaTestnet,
   Arbitrum,
-  ArbitrumGoerli,
+  ArbitrumSepolia,
   Optimism,
-  OptimismGoerli,
+  OpSepoliaTestnet,
   Binance,
   Fantom,
   FantomTestnet,

components/buttons/TransactionButton.tsx

@@ -16,6 +16,7 @@ import {
 
 import {
   useAddress,
+  useChain,
   useChainId,
   useInstalledWallets,
   useWallet,
@@ -68,6 +69,12 @@ export const TransactionButton: React.FC<TransactionButtonProps> = ({
   const walletRequiresExternalConfirmation = useWalletRequiresConfirmation();
   const initialFocusRef = useRef<HTMLButtonElement>(null);
 
+  const chain = useChain();
+  const isChainDeprecated = useMemo(
+    () => chain?.status === "deprecated",
+    [chain],
+  );
+
   const ColorModeComp =
     colorMode.colorMode === "dark" ? DarkMode : React.Fragment;
 
@@ -114,6 +121,7 @@ export const TransactionButton: React.FC<TransactionButtonProps> = ({
                   size === "sm" ? 3 : size === "lg" ? 6 : size === "xs" ? 2 : 4
                 }))`
           }
+          isDisabled={isChainDeprecated}
         >
           {children}
           <Tooltip
@@ -122,14 +130,25 @@ export const TransactionButton: React.FC<TransactionButtonProps> = ({
             p={0}
             w="auto"
             label={
-              <ColorModeComp>
-                <Card w="auto" py={2} bgColor="backgroundHighlight">
-                  <Text>
-                    This action will trigger {transactionCount}{" "}
-                    {transactionCount > 1 ? "transactions" : "transaction"}.
-                  </Text>
-                </Card>
-              </ColorModeComp>
+              isChainDeprecated ? (
+                <ColorModeComp>
+                  <Card w="auto" py={2} bgColor="backgroundHighlight">
+                    <Text>
+                      This chain is deprecated so you cannot execute
+                      transactions on it.
+                    </Text>
+                  </Card>
+                </ColorModeComp>
+              ) : (
+                <ColorModeComp>
+                  <Card w="auto" py={2} bgColor="backgroundHighlight">
+                    <Text>
+                      This action will trigger {transactionCount}{" "}
+                      {transactionCount > 1 ? "transactions" : "transaction"}.
+                    </Text>
+                  </Card>
+                </ColorModeComp>
+              )
             }
           >
             <Center

components/configure-networks/ConfigureNetworkForm.tsx

@@ -21,7 +21,7 @@ import { useAllChainsData } from "hooks/chains/allChains";
 import { useSupportedChainsNameRecord } from "hooks/chains/configureChains";
 import { useRemoveChainModification } from "hooks/chains/useModifyChain";
 import { getDashboardChainRpc } from "lib/rpc";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { Button, FormErrorMessage, FormLabel, Text } from "tw-components";
 
@@ -33,6 +33,7 @@ export type NetworkConfigFormData = {
   type: "testnet" | "mainnet";
   icon: string;
   slug: string;
+  status: string;
 };
 
 // lowercase it, replace all spaces with hyphens, and then strip all non-alphanumeric characters
@@ -64,14 +65,18 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
   const form = useForm<NetworkConfigFormData>({
     values: {
       name: editingChain?.name || "",
-      rpcUrl: editingChain ? getDashboardChainRpc(editingChain) : "" || "",
+      rpcUrl:
+        editingChain && editingChain?.status !== "deprecated"
+          ? getDashboardChainRpc(editingChain)
+          : "" || "",
       chainId: editingChain?.chainId
         ? `${editingChain?.chainId}`
         : "" || prefillChainId || "",
       currencySymbol: editingChain?.nativeCurrency.symbol || "",
       type: editingChain?.testnet ? "testnet" : "mainnet",
       icon: editingChain?.icon?.url || "",
       slug: editingChain?.slug || "",
+      status: editingChain?.status === "deprecated" ? "deprecated" : "active",
     },
     mode: "onChange",
   });
@@ -148,6 +153,7 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
               format: "",
             },
         testnet: data.type === "testnet",
+        status: data.status,
       };
     } else {
       configuredNetwork = {
@@ -172,6 +178,7 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
               format: "",
             }
           : undefined,
+        status: data.status,
       };
     }
 
@@ -347,6 +354,29 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
           </FormControl>
         </SimpleGrid>
 
+        {editingChain?.status === "deprecated" && (
+          <SimpleGrid columns={{ md: 2, base: 1 }} gap={4}>
+            {/* Active / Deprecated */}
+            <FormControl>
+              <FormLabel display="flex">Network status</FormLabel>
+              <RadioGroup
+                onChange={(value: "active" | "deprecated") => {
+                  form.setValue("status", value, {
+                    shouldValidate: true,
+                    shouldDirty: true,
+                  });
+                }}
+                value={form.watch("status")}
+              >
+                <Stack direction="row" gap={4} mt={3}>
+                  <Radio value="active">Live</Radio>
+                  <Radio value="deprecated">Deprecated</Radio>
+                </Stack>
+              </RadioGroup>
+            </FormControl>
+          </SimpleGrid>
+        )}
+
         {/* RPC URL */}
         <RpcInput form={form} />
 

components/configure-networks/Form/RpcInput.tsx

@@ -22,7 +22,11 @@ export const RpcInput: React.FC<{
   });
 
   return (
-    <FormControl isRequired isInvalid={!!form.formState.errors.rpcUrl}>
+    <FormControl
+      isRequired
+      isInvalid={!!form.formState.errors.rpcUrl}
+      isDisabled={form.watch("status") !== "active"}
+    >
       <FormLabel>RPC URL</FormLabel>
       <Input
         autoComplete="off"

components/contract-components/contract-deploy-form/custom-contract.tsx

@@ -50,6 +50,7 @@ import {
   TrackedLink,
 } from "tw-components";
 import { TrustedForwardersFieldset } from "./trusted-forwarders-fieldset";
+import { DeprecatedAlert } from "components/shared/DeprecatedAlert";
 
 interface CustomContractFormProps {
   ipfsHash: string;
@@ -69,7 +70,6 @@ const CustomContractForm: React.FC<CustomContractFormProps> = ({
   walletAddress,
 }) => {
   const { data: transactions } = useTransactionsForDeploy(ipfsHash);
-
   const networkInfo = useSupportedChain(selectedChain || -1);
   const ensQuery = useEns(walletAddress);
   const connectedWallet = ensQuery.data?.address || walletAddress;
@@ -585,6 +585,9 @@ const CustomContractForm: React.FC<CustomContractFormProps> = ({
             Deploy Now
           </TransactionButton>
         </Flex>
+        {networkInfo?.status === "deprecated" && networkInfo?.name && (
+          <DeprecatedAlert chainName={networkInfo?.name} />
+        )}
       </Flex>
     </FormProvider>
   );

components/contract-components/import-contract/modal.tsx

@@ -51,7 +51,7 @@ export const ImportModal: React.FC<ImportModalProps> = (props) => {
         as="form"
         onSubmit={form.handleSubmit(async (data) => {
           if (!chainId) {
-            throw new Error("No chain id");
+            throw new Error("No chain ID");
           }
 
           try {

components/selects/CustomChainRenderer.tsx

@@ -7,7 +7,7 @@ import {
   useSetIsNetworkConfigModalOpen,
 } from "hooks/networkConfigModal";
 import { RxGear } from "react-icons/rx";
-import { Text } from "tw-components";
+import { Heading, Text } from "tw-components";
 
 export const CustomChainRenderer: NetworkSelectorProps["renderChain"] = ({
   chain,
@@ -20,6 +20,8 @@ export const CustomChainRenderer: NetworkSelectorProps["renderChain"] = ({
   const addRecentlyUsedChain = useAddRecentlyUsedChainId();
   const setEditChain = useSetEditChain();
 
+  const isDeprecated = chain.status === "deprecated";
+
   return (
     <Flex
       w="100%"
@@ -35,15 +37,42 @@ export const CustomChainRenderer: NetworkSelectorProps["renderChain"] = ({
       <Flex role="group" flexGrow={1} alignItems="center">
         <Flex
           onClick={() => {
-            switchChain();
+            if (!isDeprecated) {
+              switchChain();
+            }
           }}
           flexGrow={1}
           gap={4}
           alignItems="center"
+          cursor={isDeprecated ? "not-allowed" : "pointer"}
         >
           <ChainIcon ipfsSrc={chain.icon?.url} size={32} />
           <Flex gap={1} flexDir="column" alignItems="start">
-            <Text fontWeight={500}>{chain.name}</Text>
+            <Flex gap={2}>
+              <Text fontWeight={500} color={isDeprecated ? "faded" : "inherit"}>
+                {chain.name}
+              </Text>
+              {isDeprecated && (
+                <Flex alignItems="center">
+                  <Flex
+                    borderRadius="full"
+                    align="center"
+                    border="1px solid"
+                    borderColor="borderColor"
+                    overflow="hidden"
+                    flexShrink={0}
+                    py={{ base: 1.5, md: 1 }}
+                    px={{ base: 1.5, md: 2 }}
+                    gap={3}
+                    cursor="not-allowed"
+                  >
+                    <Heading size="label.sm" as="label" cursor="not-allowed">
+                      Deprecated
+                    </Heading>
+                  </Flex>
+                </Flex>
+              )}
+            </Flex>
             {switching && (
               <Flex
                 color="blue.500"

components/shared/DeprecatedAlert.tsx

@@ -0,0 +1,51 @@
+import {
+  Alert,
+  AlertIcon,
+  Flex,
+  AlertTitle,
+  AlertDescription,
+} from "@chakra-ui/react";
+import { getChainByChainId } from "@thirdweb-dev/chains";
+import { Text } from "tw-components";
+
+interface DeprecatedAlertProps {
+  chainName: string;
+  description?: string;
+  recommendedChainId?: number;
+}
+
+export const DeprecatedAlert: React.FC<DeprecatedAlertProps> = ({
+  chainName,
+  description = "thirdweb services are not available on this network.",
+  recommendedChainId,
+}) => {
+  const recommendedChainName = recommendedChainId
+    ? getChainByChainId(recommendedChainId).name
+    : undefined;
+
+  return (
+    <Alert
+      status="error"
+      borderRadius="lg"
+      backgroundColor="backgroundCardHighlight"
+      borderLeftColor="red.500"
+      borderLeftWidth={4}
+      as={Flex}
+      gap={1}
+    >
+      <AlertIcon />
+      <Flex flexDir="column">
+        <AlertTitle>{chainName} is deprecated</AlertTitle>
+        <AlertDescription as={Text}>
+          {description}{" "}
+          {recommendedChainId && (
+            <>
+              We recommend switching to <strong>{recommendedChainName}</strong>{" "}
+              to continue testing your smart contracts.
+            </>
+          )}
+        </AlertDescription>
+      </Flex>
+    </Alert>
+  );
+};

pages/[chainSlug]/[...paths].tsx

@@ -41,6 +41,7 @@ import { shortenIfAddress } from "utils/usedapp-external";
 import { ClientOnly } from "../../components/ClientOnly/ClientOnly";
 import { THIRDWEB_DOMAIN } from "constants/urls";
 import { getAddress } from "ethers/lib/utils";
+import { DeprecatedAlert } from "components/shared/DeprecatedAlert";
 
 type EVMContractProps = {
   contractInfo?: EVMContractInfo;
@@ -217,7 +218,7 @@ const EVMContractPage: ThirdwebNextPage = () => {
     >
       <Box borderColor="borderColor" borderBottomWidth={1} w="full" pb={8}>
         <Container maxW="container.page">
-          <Flex direction="column">
+          <Flex direction="column" gap={4}>
             <Flex
               justify="space-between"
               align={{ base: "inherit", md: "center" }}
@@ -231,6 +232,12 @@ const EVMContractPage: ThirdwebNextPage = () => {
               />
               <PrimaryDashboardButton contractAddress={contractAddress} />
             </Flex>
+            {chain?.name && (
+              <DeprecatedAlert
+                chainName={chain.name}
+                description="You can't interact with this contract through the dashboard as this chain has been deprecated."
+              />
+            )}
           </Flex>
         </Container>
       </Box>