Add DNS routes (#390)

* Fix http://localhost:3000/ url validation case

* adjust min regex occurrences

package.json

@@ -53,7 +53,7 @@
     "framer-motion": "^10.16.4",
     "ip-cidr": "^3.1.0",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.287.0",
+    "lucide-react": "^0.383.0",
     "next": "13.5.5",
     "next-themes": "^0.2.1",
     "punycode": "^2.3.1",

src/app/(dashboard)/peer/page.tsx

@@ -23,6 +23,7 @@ import Separator from "@components/Separator";
 import FullScreenLoading from "@components/ui/FullScreenLoading";
 import LoginExpiredBadge from "@components/ui/LoginExpiredBadge";
 import TextWithTooltip from "@components/ui/TextWithTooltip";
+import useRedirect from "@hooks/useRedirect";
 import { IconCloudLock, IconInfoCircle } from "@tabler/icons-react";
 import useFetchApi from "@utils/api";
 import dayjs from "dayjs";
@@ -66,8 +67,11 @@ import PeerRoutesTable from "@/modules/peer/PeerRoutesTable";
 export default function PeerPage() {
   const queryParameter = useSearchParams();
   const peerId = queryParameter.get("id");
-  const { data: peer } = useFetchApi<Peer>("/peers/" + peerId);
-  return peer ? (
+  const { data: peer, isLoading } = useFetchApi<Peer>("/peers/" + peerId, true);
+
+  useRedirect("/peers", false, !peerId);
+
+  return peer && !isLoading ? (
     <PeerProvider peer={peer}>
       <PeerOverview />
     </PeerProvider>

src/app/(dashboard)/team/user/page.tsx

@@ -10,6 +10,7 @@ import Paragraph from "@components/Paragraph";
 import { PeerGroupSelector } from "@components/PeerGroupSelector";
 import Separator from "@components/Separator";
 import FullScreenLoading from "@components/ui/FullScreenLoading";
+import useRedirect from "@hooks/useRedirect";
 import { IconCirclePlus, IconSettings2 } from "@tabler/icons-react";
 import useFetchApi, { useApiCall } from "@utils/api";
 import { generateColorFromString } from "@utils/helpers";
@@ -42,6 +43,8 @@ export default function UserPage() {
     return users?.find((u) => u.id === userId);
   }, [users, userId]);
 
+  useRedirect("/team/users", false, !userId);
+
   return !isLoading && user ? (
     <UserOverview user={user} />
   ) : (

src/app/not-found.tsx

@@ -35,6 +35,6 @@ export default function NotFound() {
 }
 
 const Redirect = ({ url, queryParams }: Props) => {
-  useRedirect(url == "/" ? "/peers" : url + (queryParams && `?${queryParams}`));
+  useRedirect("/peers" + (queryParams && `?${queryParams}`));
   return <FullScreenLoading />;
 };

src/components/NetworkRouteSelector.tsx

@@ -1,4 +1,5 @@
 import { CommandItem } from "@components/Command";
+import FullTooltip from "@components/FullTooltip";
 import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
 import { IconArrowBack } from "@tabler/icons-react";
 import useFetchApi from "@utils/api";
@@ -62,8 +63,13 @@ export function NetworkRouteSelector({
     const isSearching = search.length > 0;
     const found =
       dropdownOptions.filter((item) => {
+        const hasDomains = item?.domains ? item.domains.length > 0 : false;
+        const domains =
+          hasDomains && item?.domains ? item?.domains.join(" ") : "";
         return (
-          item.network_id.includes(search) || item.network.includes(search)
+          item.network_id.includes(search) ||
+          item.network?.includes(search) ||
+          domains.includes(search)
         );
       }).length > 0;
     return isSearching && !found;
@@ -117,6 +123,7 @@ export function NetworkRouteSelector({
                 >
                   {value.network}
                 </div>
+                <DomainList domains={value?.domains} />
               </div>
             ) : (
               <span>Select an existing network...</span>
@@ -208,7 +215,11 @@ export function NetworkRouteSelector({
                     return (
                       <CommandItem
                         key={option.network + option.network_id}
-                        value={option.network + option.network_id}
+                        value={
+                          option.network +
+                          option.network_id +
+                          option?.domains?.join(", ")
+                        }
                         onSelect={() => {
                           togglePeer(option);
                           setOpen(false);
@@ -226,6 +237,7 @@ export function NetworkRouteSelector({
                         >
                           {option.network}
                         </div>
+                        <DomainList domains={option?.domains} />
                       </CommandItem>
                     );
                   })}
@@ -238,3 +250,19 @@ export function NetworkRouteSelector({
     </Popover>
   );
 }
+
+function DomainList({ domains }: { domains?: string[] }) {
+  const firstDomain = domains ? domains[0] : "";
+  return (
+    domains &&
+    domains.length > 0 && (
+      <FullTooltip
+        content={<div className={"text-xs max-w-sm"}>{domains.join(", ")}</div>}
+      >
+        <div className={"text-xs text-nb-gray-300"}>
+          {firstDomain} {domains.length > 1 && "+" + (domains.length - 1)}
+        </div>
+      </FullTooltip>
+    )
+  );
+}

src/components/modal/ModalHeader.tsx

@@ -10,6 +10,7 @@ interface Props extends IconVariant {
   className?: string;
   margin?: string;
   truncate?: boolean;
+  children?: React.ReactNode;
 }
 export default function ModalHeader({
   icon,
@@ -19,6 +20,7 @@ export default function ModalHeader({
   className = "pb-6 px-8",
   margin = "mt-0",
   truncate = false,
+  children,
 }: Props) {
   return (
     <div className={cn(className, "min-w-0")}>
@@ -26,11 +28,15 @@ export default function ModalHeader({
         {icon && <SquareIcon color={color} icon={icon} />}
         <div className={"min-w-0"}>
           <h2 className={"text-lg my-0 leading-[1.5]"}>{title}</h2>
-          <Paragraph
-            className={cn("text-sm", margin, truncate && "!block truncate")}
-          >
-            {description}
-          </Paragraph>
+          {children ? (
+            <>{children}</>
+          ) : (
+            <Paragraph
+              className={cn("text-sm", margin, truncate && "!block truncate")}
+            >
+              {description}
+            </Paragraph>
+          )}
         </div>
       </div>
     </div>

src/components/ui/DomainListBadge.tsx

@@ -0,0 +1,70 @@
+import Badge from "@components/Badge";
+import FullTooltip from "@components/FullTooltip";
+import { GlobeIcon } from "lucide-react";
+import * as React from "react";
+
+type Props = {
+  domains: string[];
+};
+export const DomainListBadge = ({ domains }: Props) => {
+  const firstDomain = domains.length > 0 ? domains[0] : undefined;
+
+  return (
+    <DomainsTooltip domains={domains}>
+      <div className={"inline-flex items-center gap-2"}>
+        {firstDomain && (
+          <Badge variant={"gray"}>
+            <GlobeIcon size={10} />
+            {firstDomain}
+          </Badge>
+        )}
+        {domains && domains.length > 1 && (
+          <Badge variant={"gray"}>+ {domains.length - 1}</Badge>
+        )}
+      </div>
+    </DomainsTooltip>
+  );
+};
+
+export const DomainsTooltip = ({
+  domains,
+  children,
+  className,
+}: {
+  domains: string[];
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <FullTooltip
+      interactive={false}
+      className={className}
+      content={
+        <div className={"flex flex-col gap-2 items-start"}>
+          {domains.map((domain) => {
+            return (
+              domain && (
+                <div
+                  key={domain}
+                  className={"flex gap-2 items-center justify-between w-full"}
+                >
+                  <div
+                    className={
+                      "flex gap-2 items-center text-nb-gray-300 text-xs"
+                    }
+                  >
+                    <GlobeIcon size={11} />
+                    {domain}
+                  </div>
+                </div>
+              )
+            );
+          })}
+        </div>
+      }
+      disabled={domains.length <= 1}
+    >
+      {children}
+    </FullTooltip>
+  );
+};

src/components/ui/InputDomain.tsx

@@ -0,0 +1,88 @@
+import Button from "@components/Button";
+import { Input } from "@components/Input";
+import { validator } from "@utils/helpers";
+import { uniqueId } from "lodash";
+import { GlobeIcon, MinusCircleIcon } from "lucide-react";
+import * as React from "react";
+import { useEffect, useMemo, useState } from "react";
+import { Domain } from "@/interfaces/Domain";
+
+type Props = {
+  value: Domain;
+  onChange: (d: Domain) => void;
+  onRemove: () => void;
+  onError?: (error: boolean) => void;
+  error?: string;
+};
+enum ActionType {
+  ADD = "ADD",
+  REMOVE = "REMOVE",
+  UPDATE = "UPDATE",
+}
+
+export const domainReducer = (state: Domain[], action: any): Domain[] => {
+  switch (action.type) {
+    case ActionType.ADD:
+      return [...state, { name: "", id: uniqueId("domain") }];
+    case ActionType.REMOVE:
+      return state.filter((_, i) => i !== action.index);
+    case ActionType.UPDATE:
+      return state.map((n, i) => (i === action.index ? action.d : n));
+    default:
+      return state;
+  }
+};
+
+export default function InputDomain({
+  value,
+  onChange,
+  onRemove,
+  onError,
+}: Readonly<Props>) {
+  const [name, setName] = useState(value?.name || "");
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setName(e.target.value);
+    onChange({ ...value, name: e.target.value });
+  };
+
+  const domainError = useMemo(() => {
+    if (name == "") {
+      return "";
+    }
+    const valid = validator.isValidDomain(name);
+    if (!valid) {
+      return "Please enter a valid domain, e.g. example.com or intra.example.com";
+    }
+  }, [name]);
+
+  useEffect(() => {
+    const hasError = domainError !== "" && domainError !== undefined;
+    onError?.(hasError);
+    return () => onError?.(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [domainError]);
+
+  return (
+    <div className={"flex gap-2 w-full"}>
+      <div className={"w-full"}>
+        <Input
+          customPrefix={<GlobeIcon size={15} />}
+          placeholder={"e.g., example.com"}
+          maxWidthClass={"w-full"}
+          value={name}
+          error={domainError}
+          onChange={handleNameChange}
+        />
+      </div>
+
+      <Button
+        className={"h-[42px]"}
+        variant={"default-outline"}
+        onClick={onRemove}
+      >
+        <MinusCircleIcon size={15} />
+      </Button>
+    </div>
+  );
+}

src/contexts/RoutesProvider.tsx

@@ -34,6 +34,8 @@ export default function RoutesProvider({ children }: Props) {
     onSuccess?: (route: Route) => void,
     message?: string,
   ) => {
+    const hasDomains = route.domains ? route.domains.length > 0 : false;
+
     notify({
       title: "Network " + route.network_id + "-" + route.network,
       description: message
@@ -48,7 +50,9 @@ export default function RoutesProvider({ children }: Props) {
             peer: toUpdate.peer ?? (route.peer || undefined),
             peer_groups:
               toUpdate.peer_groups ?? (route.peer_groups || undefined),
-            network: route.network,
+            network: !hasDomains ? route.network : undefined,
+            domains: hasDomains ? route.domains : undefined,
+            keep_route: route.keep_route,
             metric: toUpdate.metric ?? route.metric ?? 9999,
             masquerade: toUpdate.masquerade ?? route.masquerade ?? true,
             groups: toUpdate.groups ?? route.groups ?? [],
@@ -80,7 +84,9 @@ export default function RoutesProvider({ children }: Props) {
           enabled: route.enabled,
           peer: route.peer || undefined,
           peer_groups: route.peer_groups || undefined,
-          network: route.network,
+          network: route?.network || undefined,
+          domains: route?.domains || undefined,
+          keep_route: route?.keep_route || false,
           metric: route.metric || 9999,
           masquerade: route.masquerade,
           groups: route.groups || [],

src/hooks/useOperatingSystem.ts

@@ -19,6 +19,8 @@ export const getOperatingSystem = (os: string) => {
   if (os.toLowerCase().includes("android"))
     return OperatingSystem.ANDROID as const;
   if (os.toLowerCase().includes("ios")) return OperatingSystem.IOS as const;
+  if (os.toLowerCase().includes("ipad")) return OperatingSystem.IOS as const;
+  if (os.toLowerCase().includes("iphone")) return OperatingSystem.IOS as const;
   if (os.toLowerCase().includes("windows"))
     return OperatingSystem.WINDOWS as const;
   return OperatingSystem.LINUX as const;

src/hooks/useRedirect.tsx

@@ -1,8 +1,9 @@
 import loadConfig from "@utils/config";
 import { usePathname, useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 
 const config = loadConfig();
+
 export const useRedirect = (
   url: string,
   replace: boolean = false,
@@ -10,24 +11,43 @@ export const useRedirect = (
 ) => {
   const router = useRouter();
   const currentPath = usePathname();
-  const callBackUrls = [config.redirectURI, config.silentRedirectURI];
+  const callBackUrls = useRef([config.redirectURI, config.silentRedirectURI]);
+  const isRedirecting = useRef(false);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
-    if (!enable) return;
-    if (callBackUrls.includes(url)) return; // Don't redirect to the callback urls to avoid infinite loop
-    if (url === currentPath) return; // Don't redirect to the current page
+    // If redirect is disabled or the url is already in the callback urls or the url is the current path then do not redirect
+    if (!enable || callBackUrls.current.includes(url) || url === currentPath)
+      return;
 
-    const redirect = replace ? router.replace : router.push; // Replace the current history or add a new one
+    const performRedirect = () => {
+      if (!isRedirecting.current) {
+        isRedirecting.current = true;
+        router.refresh();
+        if (replace) {
+          router.replace(url);
+        } else {
+          router.push(url);
+        }
+        isRedirecting.current = false;
+      }
+    };
 
-    router.refresh();
-    redirect(url);
+    performRedirect();
 
-    // Timer in case the user has his browser tab open but not focused
-    const interval = setInterval(() => {
-      router.refresh();
-      redirect(url);
-    }, 1000);
+    // Try to redirect after 1.25 seconds if for whatever reason the redirect did not happen (network change, browser tab open but not focused etc.)
+    intervalRef.current = setInterval(() => {
+      if (!isRedirecting.current) {
+        performRedirect();
+      }
+    }, 1250);
 
-    return () => clearInterval(interval);
-  }, [replace, router, url, enable]);
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [replace, router, url, enable, currentPath]);
 };
+
+export default useRedirect;

src/interfaces/Domain.ts

@@ -0,0 +1,4 @@
+export interface Domain {
+  id?: string;
+  name: string;
+}

src/interfaces/Nameserver.ts

@@ -17,11 +17,6 @@ export interface Nameserver {
   id?: string;
 }
 
-export interface Domain {
-  id?: string;
-  name: string;
-}
-
 export const NameserverPresets: Record<string, NameserverGroup> = {
   Default: {
     name: "",

src/interfaces/Route.ts

@@ -3,26 +3,34 @@ export interface Route {
   description: string;
   enabled: boolean;
   peer?: string;
-  network: string;
+  network?: string;
+  domains?: string[];
   network_id: string;
   network_type?: string;
   metric?: number;
   masquerade: boolean;
   groups: string[];
+  keep_route?: boolean;
+  // Frontend only
   peer_groups?: string[];
   routesGroups?: string[];
   groupedRoutes?: GroupedRoute[];
   group_names?: string[];
+  domain_search?: string;
 }
 
 export interface GroupedRoute {
   id: string;
   enabled: boolean;
-  network: string;
+  network?: string;
+  domains?: string[];
+  keep_route?: boolean;
   network_id: string;
   high_availability_count: number;
   is_using_route_groups: boolean;
   routes?: Route[];
   group_names?: string[];
   description?: string;
+  description_search?: string;
+  domain_search?: string;
 }

src/modules/activity/ActivityDescription.tsx

@@ -3,7 +3,11 @@ import { Label } from "@components/Label";
 import { IconInfoCircle } from "@tabler/icons-react";
 import { cn } from "@utils/helpers";
 import { isLocalDev, isProduction } from "@utils/netbird";
+import { isEmpty } from "lodash";
+import { GlobeIcon } from "lucide-react";
 import React, { useMemo } from "react";
+import RoundedFlag from "@/assets/countries/RoundedFlag";
+import { useCountries } from "@/contexts/CountryProvider";
 import { ActivityEvent } from "@/interfaces/ActivityEvent";
 
 type Props = {
@@ -54,7 +58,8 @@ export default function ActivityDescription({ event }: Props) {
   if (event.activity_code == "setupkey.peer.add")
     return (
       <div className={"inline"}>
-        Peer <Value>{m.name}</Value> with ip <Value>{m.ip}</Value> was added
+        Peer <Value>{m.name}</Value> <PeerConnectionInfo meta={m} /> was added
+        with the NetBird IP <Value>{m.ip}</Value>
       </div>
     );
 
@@ -113,29 +118,38 @@ export default function ActivityDescription({ event }: Props) {
    * Route
    */
 
-  if (event.activity_code == "route.delete")
+  if (event.activity_code == "route.delete") {
+    let hasDomains = m?.domains && m?.domains.length > 0;
     return (
       <div className={"inline"}>
-        Route <Value>{m.name}</Value> with the <Value>{m.network_range}</Value>{" "}
-        range was deleted
+        Route <Value>{m.name}</Value> with the {hasDomains ? "domain(s)" : ""}{" "}
+        <Value>{hasDomains ? m?.domains : m.network_range}</Value>{" "}
+        {hasDomains ? "" : "range"} was deleted
       </div>
     );
+  }
 
-  if (event.activity_code == "route.update")
+  if (event.activity_code == "route.update") {
+    let hasDomains = m?.domains && m?.domains.length > 0;
     return (
       <div className={"inline"}>
-        Route <Value>{m.name}</Value> with the <Value>{m.network_range}</Value>{" "}
-        range was updated
+        Route <Value>{m.name}</Value> with the {hasDomains ? "domain(s)" : ""}{" "}
+        <Value>{hasDomains ? m?.domains : m.network_range}</Value>{" "}
+        {hasDomains ? "" : "range"} was updated
       </div>
     );
+  }
 
-  if (event.activity_code == "route.add")
+  if (event.activity_code == "route.add") {
+    let hasDomains = m?.domains && m?.domains.length > 0;
     return (
       <div className={"inline"}>
-        Route <Value>{m.name}</Value> with the <Value>{m.network_range}</Value>{" "}
-        range was created
+        Route <Value>{m.name}</Value> with the {hasDomains ? "domain(s)" : ""}{" "}
+        <Value>{hasDomains ? m?.domains : m.network_range}</Value>{" "}
+        {hasDomains ? "" : "range"} was created
       </div>
     );
+  }
 
   /**
    * User
@@ -144,21 +158,24 @@ export default function ActivityDescription({ event }: Props) {
   if (event.activity_code == "user.peer.delete")
     return (
       <div className={"inline"}>
-        Peer <Value>{m.name}</Value> with ip <Value>{m.ip}</Value> was deleted
+        Peer <Value>{m.name}</Value> <PeerConnectionInfo meta={m} /> with
+        NetBird IP <Value>{m.ip}</Value> was deleted
       </div>
     );
 
   if (event.activity_code == "user.peer.add")
     return (
       <div className={"inline"}>
-        Peer <Value>{m.name}</Value> with ip <Value>{m.ip}</Value> was added
+        Peer <Value>{m.name}</Value> <PeerConnectionInfo meta={m} /> was added
+        with the NetBird IP <Value>{m.ip}</Value>
       </div>
     );
 
   if (event.activity_code == "user.peer.update")
     return (
       <div className={"inline"}>
-        Peer <Value>{m.name}</Value> with ip <Value>{m.ip}</Value> was updated
+        Peer <Value>{m.name}</Value> <PeerConnectionInfo meta={m} /> with
+        NetBird IP <Value>{m.ip}</Value> was updated
       </div>
     );
 
@@ -252,15 +269,15 @@ export default function ActivityDescription({ event }: Props) {
   if (event.activity_code == "peer.group.delete")
     return (
       <div className={"inline"}>
-        Group <Value>{m.group}</Value> was removed from the peer with the ip{" "}
-        <Value>{m.peer_ip}</Value>
+        Group <Value>{m.group}</Value> was removed from the peer with the
+        NetBird IP <Value>{m.peer_ip}</Value>
       </div>
     );
 
   if (event.activity_code == "peer.group.add")
     return (
       <div className={"inline"}>
-        Group <Value>{m.group}</Value> was added to the peer with the ip{" "}
+        Group <Value>{m.group}</Value> was added to the peer with the NetBird IP{" "}
         <Value>{m.peer_ip}</Value>
       </div>
     );
@@ -303,7 +320,7 @@ export default function ActivityDescription({ event }: Props) {
   if (event.activity_code == "peer.rename")
     return (
       <div className={"inline"}>
-        Peer with the ip <Value>{m.ip}</Value> was renamed to{" "}
+        Peer with the NetBird IP <Value>{m.ip}</Value> was renamed to{" "}
         <Value>{m.name}</Value>
       </div>
     );
@@ -311,7 +328,7 @@ export default function ActivityDescription({ event }: Props) {
   if (event.activity_code == "peer.approve")
     return (
       <div className={"inline"}>
-        Peer with the ip <Value>{m.ip}</Value> was approved
+        Peer with the NetBird IP <Value>{m.ip}</Value> was approved
       </div>
     );
 
@@ -559,7 +576,7 @@ function Value({
   return children ? (
     <span
       className={cn(
-        "text-nb-gray-200 inline font-medium bg-nb-gray-900 py-[3px] text-[11px] px-[5px] border border-nb-gray-800 rounded-[4px]",
+        "text-nb-gray-200 inline-flex gap-1 items-center max-h-[22px] font-medium bg-nb-gray-900 py-[3px] text-[11px] px-[5px] border border-nb-gray-800 rounded-[4px]",
         className,
       )}
     >
@@ -567,3 +584,40 @@ function Value({
     </span>
   ) : null;
 }
+
+function PeerConnectionInfo({ meta }: { meta: any }) {
+  const hasMeta =
+    !isEmpty(meta?.location_country_code) ||
+    !isEmpty(meta?.location_connection_ip);
+  const { countries } = useCountries();
+
+  const countryText = useMemo(() => {
+    if (!countries) return "Unknown";
+    const country = countries.find(
+      (c) => c.country_code === meta?.location_country_code,
+    );
+    if (!country) return "Unknown";
+    if (!meta?.location_city_name) return country.country_name;
+    return `${country.country_name}, ${meta?.location_city_name}`;
+  }, [countries, meta]);
+
+  return hasMeta ? (
+    <>
+      {" "}
+      from{" "}
+      {meta?.location_connection_ip && (
+        <Value>{meta?.location_connection_ip}</Value>
+      )}{" "}
+      {meta?.location_country_code && (
+        <Value>
+          {isEmpty(meta?.location_country_code) ? (
+            <GlobeIcon size={9} className={"text-nb-gray-300"} />
+          ) : (
+            <RoundedFlag country={meta?.location_country_code} size={9} />
+          )}
+          {countryText}
+        </Value>
+      )}
+    </>
+  ) : null;
+}

src/modules/dns-nameservers/NameserverModal.tsx

@@ -17,8 +17,9 @@ import Paragraph from "@components/Paragraph";
 import { PeerGroupSelector } from "@components/PeerGroupSelector";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
 import { Textarea } from "@components/Textarea";
+import InputDomain, { domainReducer } from "@components/ui/InputDomain";
 import { useApiCall } from "@utils/api";
-import { cn, validator } from "@utils/helpers";
+import { cn } from "@utils/helpers";
 import cidr from "ip-cidr";
 import { uniqueId } from "lodash";
 import {
@@ -35,7 +36,7 @@ import {
 import React, { useEffect, useMemo, useReducer, useState } from "react";
 import { useSWRConfig } from "swr";
 import DNSIcon from "@/assets/icons/DNSIcon";
-import { Domain, Nameserver, NameserverGroup } from "@/interfaces/Nameserver";
+import { Nameserver, NameserverGroup } from "@/interfaces/Nameserver";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
 
 type Props = {
@@ -97,19 +98,6 @@ enum ActionType {
   UPDATE = "UPDATE",
 }
 
-export const domainReducer = (state: Domain[], action: any) => {
-  switch (action.type) {
-    case ActionType.ADD:
-      return [...state, { name: "", id: uniqueId("ns") }];
-    case ActionType.REMOVE:
-      return state.filter((_, i) => i !== action.index);
-    case ActionType.UPDATE:
-      return state.map((n, i) => (i === action.index ? action.d : n));
-    default:
-      return state;
-  }
-};
-
 export function NameserverModalContent({
   onSuccess,
   preset,
@@ -199,7 +187,7 @@ export function NameserverModalContent({
   // Domains
   const [domains, setDomains] = useReducer(domainReducer, [], () => {
     if (preset?.domains?.length) {
-      return preset.domains.map((d) => ({ name: d, id: uniqueId("ns") }));
+      return preset.domains.map((d) => ({ name: d, id: uniqueId("domain") }));
     }
     return [];
   });
@@ -370,7 +358,7 @@ export function NameserverModalContent({
                     <div className={"flex flex-col gap-2 w-full"}>
                       {domains.map((domain, i) => {
                         return (
-                          <DomainInput
+                          <InputDomain
                             key={domain.id}
                             value={domain}
                             onChange={(d) =>
@@ -619,63 +607,3 @@ function NameserverInput({
     </div>
   );
 }
-
-function DomainInput({
-  value,
-  onChange,
-  onRemove,
-  onError,
-}: {
-  value: Domain;
-  onChange: (d: Domain) => void;
-  onRemove: () => void;
-  onError?: (error: boolean) => void;
-  error?: string;
-}) {
-  const [name, setName] = useState(value.name);
-
-  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setName(e.target.value);
-    onChange({ ...value, name: e.target.value });
-  };
-
-  const domainError = useMemo(() => {
-    if (name == "") {
-      return "";
-    }
-    const valid = validator.isValidDomain(name);
-    if (!valid) {
-      onError && onError(true);
-      return "Please enter a valid domain, e.g. example.com or intra.example.com";
-    }
-    onError && onError(false);
-  }, [name, onError]);
-
-  useEffect(() => {
-    return () => onError && onError(false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <div className={"flex gap-2 w-full"}>
-      <div className={"w-full"}>
-        <Input
-          customPrefix={<GlobeIcon size={15} />}
-          placeholder={"e.g., example.com"}
-          maxWidthClass={"w-full"}
-          value={name}
-          error={domainError}
-          onChange={handleNameChange}
-        />
-      </div>
-
-      <Button
-        className={"h-[42px]"}
-        variant={"default-outline"}
-        onClick={onRemove}
-      >
-        <MinusCircleIcon size={15} />
-      </Button>
-    </div>
-  );
-}

src/modules/exit-node/AddExitNodeButton.tsx

@@ -26,7 +26,7 @@ export const AddExitNodeButton = ({ peer, firstTime = false }: Props) => {
           ) : (
             <>
               <IconDirectionSign size={16} className={"text-yellow-400"} />
-              Setup Exit Node
+              Set Up Exit Node
             </>
           )}
         </Button>

src/modules/exit-node/ExitNodeDropdownButton.tsx

@@ -1,11 +1,13 @@
 import { DropdownMenuItem } from "@components/DropdownMenu";
 import { Modal } from "@components/modal/Modal";
 import { getOperatingSystem } from "@hooks/useOperatingSystem";
-import { IconDirectionSign } from "@tabler/icons-react";
+import { IconCirclePlus, IconDirectionSign } from "@tabler/icons-react";
 import * as React from "react";
 import { useState } from "react";
+import RoutesProvider from "@/contexts/RoutesProvider";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
 import { Peer } from "@/interfaces/Peer";
+import { useHasExitNodes } from "@/modules/exit-node/useHasExitNodes";
 import { RouteModalContent } from "@/modules/routes/RouteModal";
 
 type Props = {
@@ -15,24 +17,41 @@ type Props = {
 export const ExitNodeDropdownButton = ({ peer }: Props) => {
   const [modal, setModal] = useState(false);
   const isLinux = getOperatingSystem(peer.os) === OperatingSystem.LINUX;
+  const hasExitNodes = useHasExitNodes(peer);
 
   return isLinux ? (
     <>
       <DropdownMenuItem onClick={() => setModal(true)}>
         <div className={"flex gap-3 items-center w-full"}>
-          <IconDirectionSign size={14} className={"shrink-0"} />
-          <div className={"flex justify-between items-center w-full"}>
-            Add Exit Node
-          </div>
+          {hasExitNodes ? (
+            <>
+              <IconCirclePlus size={14} className={"shrink-0"} />
+              <div className={"flex justify-between items-center w-full"}>
+                Add Exit Node
+              </div>
+            </>
+          ) : (
+            <>
+              <IconDirectionSign
+                size={14}
+                className={"shrink-0 text-yellow-400"}
+              />
+              <div className={"flex justify-between items-center w-full"}>
+                Set Up Exit Node
+              </div>
+            </>
+          )}
         </div>
       </DropdownMenuItem>
       <Modal open={modal} onOpenChange={setModal}>
         {modal && (
-          <RouteModalContent
-            onSuccess={() => setModal(false)}
-            peer={peer}
-            exitNode={true}
-          />
+          <RoutesProvider>
+            <RouteModalContent
+              onSuccess={() => setModal(false)}
+              peer={peer}
+              exitNode={true}
+            />
+          </RoutesProvider>
         )}
       </Modal>
     </>

src/modules/peer/PeerRoutesTable.tsx

@@ -12,8 +12,8 @@ import { Route } from "@/interfaces/Route";
 import PeerRouteActionCell from "@/modules/peer/PeerRouteActionCell";
 import PeerRouteActiveCell from "@/modules/peer/PeerRouteActiveCell";
 import PeerRouteNameCell from "@/modules/peer/PeerRouteNameCell";
-import PeerRouteNetworkCell from "@/modules/peer/PeerRouteNetworkCell";
 import usePeerRoutes from "@/modules/peer/usePeerRoutes";
+import GroupedRouteNetworkRangeCell from "@/modules/route-group/GroupedRouteNetworkRangeCell";
 import RouteDistributionGroupsCell from "@/modules/routes/RouteDistributionGroupsCell";
 
 type Props = {
@@ -32,9 +32,14 @@ export const RouteTableColumns: ColumnDef<Route>[] = [
   {
     accessorKey: "network",
     header: ({ column }) => {
-      return <DataTableHeader column={column}>Network Range</DataTableHeader>;
+      return <DataTableHeader column={column}>Network</DataTableHeader>;
     },
-    cell: ({ row }) => <PeerRouteNetworkCell route={row.original} />,
+    cell: ({ row }) => (
+      <GroupedRouteNetworkRangeCell
+        domains={row.original?.domains}
+        network={row.original?.network}
+      />
+    ),
   },
   {
     id: "groups",

src/modules/route-group/GroupedRouteNetworkRangeCell.tsx

@@ -1,15 +1,23 @@
+import { DomainListBadge } from "@components/ui/DomainListBadge";
 import { IconDirectionSign } from "@tabler/icons-react";
 import { InfoIcon } from "lucide-react";
 import * as React from "react";
 import { ExitNodeHelpTooltip } from "@/modules/exit-node/ExitNodeHelpTooltip";
 
 type Props = {
-  network: string;
+  network?: string;
+  domains?: string[];
 };
-export default function GroupedRouteNetworkRangeCell({ network }: Props) {
+export default function GroupedRouteNetworkRangeCell({
+  network,
+  domains,
+}: Props) {
   const isExitNode = network === "0.0.0.0/0";
+  const hasDomains = domains ? domains.length > 0 : false;
 
-  return isExitNode ? (
+  return hasDomains && domains ? (
+    <DomainListBadge domains={domains} />
+  ) : isExitNode ? (
     <ExitNodeHelpTooltip>
       <div className={"flex gap-2 items-center dark:text-nb-gray-300 group"}>
         <IconDirectionSign size={16} className={"text-yellow-400"} />