[TOOL-2990] Dashboard: Fix invalid form validation when updating custom chain (#5913)

---
title: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
---

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.

## How to test
Unit tests, playground, etc.

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refining the network selection and configuration logic in the dashboard, specifically improving how favorite and recent networks are displayed, enhancing the handling of deprecated chains, and simplifying error messages related to network slugs.

### Detailed summary
- Rearranged the `chainSections` to maintain the `Favorites` section at the top.
- Updated logic for `rpcUrl` to handle deprecated chains more clearly.
- Simplified error message when a slug is taken, removing specific references to existing chains.
- Enhanced validation logic for checking if a slug is unique, considering custom chains.

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

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx

@@ -93,14 +93,14 @@ export const CustomConnectWallet = (props: {
 
   const chainSections: NetworkSelectorProps["sections"] = useMemo(() => {
     return [
-      {
-        label: "Favorites",
-        chains: favoriteChainsWithMetadata,
-      },
       {
         label: "Recent",
         chains: recentlyUsedChainsWithMetadata,
       },
+      {
+        label: "Favorites",
+        chains: favoriteChainsWithMetadata,
+      },
       {
         label: "Popular",
         chains: popularChainsWithMetadata,

apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx

@@ -62,9 +62,12 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
     values: {
       name: editingChain?.name || prefillSlug || "",
       rpcUrl:
-        editingChain && editingChain?.status !== "deprecated"
-          ? getDashboardChainRpc(editingChain.chainId, editingChain)
-          : "",
+        (!editingChain || editingChain.status === "deprecated"
+          ? ""
+          : // if chain is custom or modified, show the rpc as is
+            editingChain.isCustom || editingChain.isModified
+            ? editingChain.rpc[0]
+            : getDashboardChainRpc(editingChain.chainId, editingChain)) || "",
       chainId: editingChain?.chainId
         ? `${editingChain?.chainId}`
         : prefillChainId || "",

apps/dashboard/src/components/configure-networks/Form/NetworkIdInput.tsx

@@ -8,9 +8,7 @@ export const NetworkIDInput: React.FC<{
   form: UseFormReturn<NetworkConfigFormData>;
   disabled?: boolean;
 }> = ({ form, disabled }) => {
-  const slug = form.watch("slug");
   const { slugToChain } = useAllChainsData();
-  const existingChain = slugToChain.get(slug);
 
   return (
     <FormFieldSetup
@@ -29,12 +27,7 @@ export const NetworkIDInput: React.FC<{
       }
       errorMessage={
         form.formState.errors.slug?.type === "taken" ? (
-          <>
-            Can not use {`"${slug}"`}.{" "}
-            {slug &&
-              existingChain &&
-              `It is being used by "${existingChain.name}"`}
-          </>
+          <>Slug is taken by other network</>
         ) : undefined
       }
     >
@@ -59,7 +52,13 @@ export const NetworkIDInput: React.FC<{
                 return true;
               }
 
-              return !slugToChain.has(_slug);
+              const chainForSlug = slugToChain.get(_slug);
+
+              if (chainForSlug && !chainForSlug.isCustom) {
+                return false;
+              }
+
+              return true;
             },
           },
         })}