refactor: move functions

assets/components/LoginForm.tsx

@@ -4,7 +4,8 @@ import React, {useContext, useEffect} from "react";
 import {getUser, login} from "../utils/api";
 import {AuthenticatedContext} from "../pages/LoginPage";
 import {useNavigate} from "react-router-dom";
-import {showErrorAPI} from "../utils";
+
+import {showErrorAPI} from "../utils/functions/showErrorAPI";
 
 
 type FieldType = {

assets/components/RegisterForm.tsx

@@ -3,7 +3,8 @@ import {t} from "ttag";
 import React, {useState} from "react";
 import {register} from "../utils/api";
 import {useNavigate} from "react-router-dom";
-import {showErrorAPI} from "../utils";
+
+import {showErrorAPI} from "../utils/functions/showErrorAPI";
 
 
 type FieldType = {

assets/components/search/DomainResult.tsx

@@ -6,19 +6,30 @@ import {DomainDiagram} from "./DomainDiagram";
 import React from "react";
 import {Domain} from "../../utils/api";
 import {rdapStatusCodeDetailTranslation} from "./rdapTranslation";
+import {regionNames} from "../../i18n";
+
+import {getCountryCode} from "../../utils/functions/getCountryCode";
 
 export function DomainResult({domain}: { domain: Domain }) {
 
     const rdapStatusCodeDetailTranslated = rdapStatusCodeDetailTranslation()
+    const {tld} = domain
 
     return <Space direction="vertical" size="middle" style={{width: '100%'}}>
-        <Badge.Ribbon text={`.${domain.tld.tld.toUpperCase()} (${domain.tld.type})`}
+
+        <Badge.Ribbon text={
+            <Tooltip
+                title={tld.type === 'ccTLD' ? regionNames.of(getCountryCode(tld.tld)) : tld.type === 'gTLD' ? tld?.registryOperator : undefined}>
+                {`.${domain.tld.tld.toUpperCase()} (${tld.type})`}
+            </Tooltip>
+        }
                       color={
-                          domain.tld.type === 'ccTLD' ? 'purple' :
-                              (domain.tld.type === 'gTLD' && domain.tld.specification13) ? "volcano" :
-                                  domain.tld.type === 'gTLD' ? "green"
+                          tld.type === 'ccTLD' ? 'purple' :
+                              (tld.type === 'gTLD' && tld.specification13) ? "volcano" :
+                                  tld.type === 'gTLD' ? "green"
                                       : "cyan"
                       }>
+
             <Card title={<Space>
                 {domain.ldhName}{domain.handle && <Typography.Text code>{domain.handle}</Typography.Text>}
             </Space>}

assets/components/search/EntitiesList.tsx

@@ -2,7 +2,10 @@ import {List, Tag, Tooltip} from "antd";
 import React from "react";
 import {Domain} from "../../utils/api";
 import {rdapRoleDetailTranslation, rdapRoleTranslation} from "./rdapTranslation";
-import {entityToName, rolesToColor, roleToAvatar, sortDomainEntities} from "../../utils";
+import {roleToAvatar} from "../../utils/functions/roleToAvatar";
+import {rolesToColor} from "../../utils/functions/rolesToColor";
+import {entityToName} from "../../utils/functions/entityToName";
+import {sortDomainEntities} from "../../utils/functions/sortDomainEntities";
 
 
 export function EntitiesList({domain}: { domain: Domain }) {

assets/components/search/EventTimeline.tsx

@@ -3,7 +3,8 @@ import React from "react";
 import {Domain} from "../../utils/api";
 import useBreakpoint from "../../hooks/useBreakpoint";
 import {rdapEventDetailTranslation, rdapEventNameTranslation} from "./rdapTranslation";
-import {actionToColor, actionToIcon} from "../../utils";
+import {actionToColor} from "../../utils/functions/actionToColor";
+import {actionToIcon} from "../../utils/functions/actionToIcon";
 
 export function EventTimeline({domain}: { domain: Domain }) {
     const sm = useBreakpoint('sm')

assets/components/tracking/watchlist/WatchlistCard.tsx

@@ -11,7 +11,8 @@ import {Connector} from "../../../utils/api/connectors";
 import useBreakpoint from "../../../hooks/useBreakpoint";
 import {CalendarWatchlistButton} from "./CalendarWatchlistButton";
 import {rdapEventDetailTranslation, rdapEventNameTranslation} from "../../search/rdapTranslation";
-import {actionToColor} from "../../../utils";
+
+import {actionToColor} from "../../../utils/functions/actionToColor";
 
 export function WatchlistCard({watchlist, onUpdateWatchlist, connectors, onDelete}: {
     watchlist: Watchlist,

assets/components/tracking/watchlist/WatchlistForm.tsx

@@ -4,7 +4,8 @@ import {ApiOutlined, MinusCircleOutlined, PlusOutlined} from "@ant-design/icons"
 import React from "react";
 import {Connector} from "../../../utils/api/connectors";
 import {rdapEventDetailTranslation, rdapEventNameTranslation} from "../../search/rdapTranslation";
-import {actionToColor, actionToIcon} from "../../../utils";
+import {actionToColor} from "../../../utils/functions/actionToColor";
+import {actionToIcon} from "../../../utils/functions/actionToIcon";
 
 type TagRender = SelectProps['tagRender'];
 

assets/components/tracking/watchlist/diagram/ViewDiagramWatchlistButton.tsx

@@ -26,7 +26,7 @@ export function ViewDiagramWatchlistButton({token}: { token: string }) {
         if (!open) return
         setLoading(true)
         getWatchlist(token).then(w => {
-            const e = getLayoutedElements(watchlistToNodes(w), watchlistToEdges(w))
+            const e = getLayoutedElements(watchlistToNodes(w, true), watchlistToEdges(w, true))
             setNodes(e.nodes)
             setEdges(e.edges)
         }).catch(() => setOpen(false)).finally(() => setLoading(false))

assets/components/tracking/watchlist/diagram/watchlistToEdges.tsx

@@ -1,7 +1,8 @@
 import {Domain, Watchlist} from "../../../../utils/api";
 import {rdapRoleTranslation} from "../../../search/rdapTranslation";
 import {t} from "ttag";
-import {rolesToColor} from "../../../../utils";
+
+import {rolesToColor} from "../../../../utils/functions/rolesToColor";
 
 export function domainEntitiesToEdges(d: Domain, withRegistrar = false) {
     const rdapRoleTranslated = rdapRoleTranslation()

assets/components/tracking/watchlist/diagram/watchlistToNodes.tsx

@@ -1,7 +1,8 @@
 import {Domain, Nameserver, Tld, Watchlist} from "../../../../utils/api";
 import React from "react";
 import {t} from 'ttag'
-import {entityToName} from "../../../../utils";
+
+import {entityToName} from "../../../../utils/functions/entityToName";
 
 export const domainToNode = (d: Domain) => ({
     id: d.ldhName,