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,

assets/pages/info/TldPage.tsx

@@ -6,28 +6,14 @@ import {regionNames} from "../../i18n";
 import useBreakpoint from "../../hooks/useBreakpoint";
 import {ColumnType} from "antd/es/table";
 import punycode from "punycode/punycode";
+import {getCountryCode} from "../../utils/functions/getCountryCode";
+import {tldToEmoji} from "../../utils/functions/tldToEmoji";
 
 const {Text, Paragraph} = Typography
 
 type TldType = 'iTLD' | 'sTLD' | 'gTLD' | 'ccTLD'
 type FiltersType = { type: TldType, contractTerminated?: boolean, specification13?: boolean }
 
-const toEmoji = (tld: string) => {
-    if (tld.startsWith('xn--')) return '-'
-
-    return String.fromCodePoint(
-        ...getCountryCode(tld)
-            .toUpperCase()
-            .split('')
-            .map((char) => 127397 + char.charCodeAt(0))
-    )
-}
-
-const getCountryCode = (tld: string): string => {
-    const exceptions = {uk: 'gb', su: 'ru', tp: 'tl'}
-    if (tld in exceptions) return exceptions[tld as keyof typeof exceptions]
-    return tld.toUpperCase()
-}
 
 function TldTable(filters: FiltersType) {
     const sm = useBreakpoint('sm')
@@ -55,7 +41,7 @@ function TldTable(filters: FiltersType) {
 
                         return {
                             ...rowData,
-                            Flag: toEmoji(tld.tld),
+                            Flag: tldToEmoji(tld.tld),
                             Country: countryName
                         }
                     case 'gTLD':

assets/pages/search/DomainSearchPage.tsx

@@ -4,8 +4,8 @@ import {Domain, getDomain} from "../../utils/api";
 import {AxiosError} from "axios"
 import {t} from 'ttag'
 import {DomainSearchBar, FieldType} from "../../components/search/DomainSearchBar";
-import {showErrorAPI} from "../../utils";
 import {DomainResult} from "../../components/search/DomainResult";
+import {showErrorAPI} from "../../utils/functions/showErrorAPI";
 
 export default function DomainSearchPage() {
     const [domain, setDomain] = useState<Domain | null>()

assets/pages/tracking/ConnectorsPage.tsx

@@ -5,7 +5,8 @@ import {Connector, getConnectors, postConnector} from "../../utils/api/connector
 import {ConnectorForm} from "../../components/tracking/connector/ConnectorForm";
 import {AxiosError} from "axios";
 import {ConnectorElement, ConnectorsList} from "../../components/tracking/connector/ConnectorsList";
-import {showErrorAPI} from "../../utils";
+
+import {showErrorAPI} from "../../utils/functions/showErrorAPI";
 
 export default function ConnectorsPage() {
     const [form] = Form.useForm()

assets/pages/tracking/WatchlistPage.tsx

@@ -6,7 +6,8 @@ import {t} from 'ttag'
 import {WatchlistForm} from "../../components/tracking/watchlist/WatchlistForm";
 import {WatchlistsList} from "../../components/tracking/watchlist/WatchlistsList";
 import {Connector, getConnectors} from "../../utils/api/connectors";
-import {showErrorAPI} from "../../utils";
+
+import {showErrorAPI} from "../../utils/functions/showErrorAPI";
 
 
 export type Watchlist = {

assets/utils/functions/actionToColor.tsx

@@ -0,0 +1,11 @@
+import {EventAction} from "../api";
+
+export const actionToColor = (a: EventAction) => a === 'registration' ? 'green' :
+    a === 'reregistration' ? 'cyan' :
+        a === 'expiration' ? 'red' :
+            a === 'deletion' ? 'magenta' :
+                a === 'transfer' ? 'orange' :
+                    a === 'last changed' ? 'blue' :
+                        a === 'registrar expiration' ? 'red' :
+                            a === 'reinstantiation' ? 'purple' :
+                                a === 'enum validation expiration' ? 'red' : 'default'

assets/utils/functions/actionToIcon.tsx

@@ -0,0 +1,26 @@
+import {EventAction} from "../api";
+import {
+    ClockCircleOutlined,
+    DeleteOutlined,
+    LockOutlined,
+    ReloadOutlined,
+    ShareAltOutlined,
+    SignatureOutlined,
+    SyncOutlined,
+    UnlockOutlined
+} from "@ant-design/icons";
+import React from "react";
+
+export const actionToIcon = (a: EventAction) => a === 'registration' ?
+    <SignatureOutlined style={{fontSize: '16px'}}/> : a === 'expiration' ?
+        <ClockCircleOutlined style={{fontSize: '16px'}}/> : a === 'transfer' ?
+            <ShareAltOutlined style={{fontSize: '16px'}}/> : a === 'last changed' ?
+                <SyncOutlined style={{fontSize: '16px'}}/> : a === 'deletion' ?
+                    <DeleteOutlined style={{fontSize: '16px'}}/> : a === 'reregistration' ?
+                        <ReloadOutlined style={{fontSize: '16px'}}/> : a === 'locked' ?
+                            <LockOutlined style={{fontSize: '16px'}}/> : a === 'unlocked' ?
+                                <UnlockOutlined style={{fontSize: '16px'}}/> : a === 'registrar expiration' ?
+                                    <ClockCircleOutlined
+                                        style={{fontSize: '16px'}}/> : a === 'enum validation expiration' ?
+                                        <ClockCircleOutlined style={{fontSize: '16px'}}/> : a === 'reinstantiation' ?
+                                            <ReloadOutlined style={{fontSize: '16px'}}/> : undefined

assets/utils/functions/entityToName.tsx

@@ -0,0 +1,11 @@
+import {Entity} from "../api";
+import vCard from "vcf";
+
+export const entityToName = (e: { entity: Entity }): string => {
+    if (e.entity.jCard.length === 0) return e.entity.handle
+
+    const jCard = vCard.fromJSON(e.entity.jCard)
+    let name = e.entity.handle
+    if (jCard.data.fn && !Array.isArray(jCard.data.fn) && jCard.data.fn.valueOf() !== '') name = jCard.data.fn.valueOf()
+    return name
+}

assets/utils/functions/getCountryCode.tsx

@@ -0,0 +1,5 @@
+export const getCountryCode = (tld: string): string => {
+    const exceptions = {uk: 'gb', su: 'ru', tp: 'tl'}
+    if (tld in exceptions) return exceptions[tld as keyof typeof exceptions]
+    return tld.toUpperCase()
+}

assets/utils/functions/roleToAvatar.tsx

@@ -0,0 +1,24 @@
+import {Avatar} from "antd";
+import {
+    BankOutlined,
+    DollarOutlined,
+    IdcardOutlined,
+    SignatureOutlined,
+    ToolOutlined,
+    UserOutlined
+} from "@ant-design/icons";
+import React from "react";
+
+import {rolesToColor} from "./rolesToColor";
+
+export const roleToAvatar = (e: { roles: string[] }) => <Avatar style={{backgroundColor: rolesToColor(e.roles)}}
+                                                                icon={e.roles.includes('registrant') ?
+                                                                    <SignatureOutlined/> : e.roles.includes('registrar') ?
+                                                                        <BankOutlined/> :
+                                                                        e.roles.includes('technical') ?
+                                                                            <ToolOutlined/> :
+                                                                            e.roles.includes('administrative') ?
+                                                                                <IdcardOutlined/> :
+                                                                                e.roles.includes('billing') ?
+                                                                                    <DollarOutlined/> :
+                                                                                    <UserOutlined/>}/>

assets/utils/functions/rolesToColor.tsx

@@ -0,0 +1,6 @@
+export const rolesToColor = (roles: string[]) => roles.includes('registrant') ? 'green' :
+    roles.includes('administrative') ? 'blue' :
+        roles.includes('technical') ? 'orange' :
+            roles.includes('registrar') ? 'purple' :
+                roles.includes('sponsor') ? 'magenta' :
+                    roles.includes('billing') ? 'cyan' : 'default'

assets/utils/functions/showErrorAPI.tsx

@@ -0,0 +1,27 @@
+import {AxiosError, AxiosResponse} from "axios";
+import {MessageInstance, MessageType} from "antd/lib/message/interface";
+import {t} from "ttag";
+
+export function showErrorAPI(e: AxiosError, messageApi: MessageInstance): MessageType | undefined {
+
+    const response = e.response as AxiosResponse
+    const data = response.data
+
+    if ('message' in data) {
+        return messageApi.error(data.message as string)
+    }
+
+    if (!('detail' in data)) return
+    const detail = data.detail as string
+
+    if (response.status === 429) {
+        const duration = response.headers['retry-after']
+        return messageApi.error(t`Please retry after ${duration} seconds`)
+    }
+
+    if (response.status.toString()[0] === '4') {
+        return messageApi.warning(detail !== '' ? detail : t`An error occurred`)
+    }
+
+    return messageApi.error(detail !== '' ? detail : t`An error occurred`)
+}

assets/utils/functions/sortDomainEntities.tsx

@@ -0,0 +1,9 @@
+import {Domain} from "../api";
+
+export const sortDomainEntities = (domain: Domain) => domain.entities.sort((e1, e2) => {
+    const p = (r: string[]) => r.includes('registrant') ? 5 :
+        r.includes('administrative') ? 4 :
+            r.includes('billing') ? 3 :
+                r.includes('registrar') ? 2 : 1
+    return p(e2.roles) - p(e1.roles)
+})

assets/utils/functions/tldToEmoji.tsx

@@ -0,0 +1,12 @@
+import {getCountryCode} from "./getCountryCode";
+
+export const tldToEmoji = (tld: string) => {
+    if (tld.startsWith('xn--')) return '-'
+
+    return String.fromCodePoint(
+        ...getCountryCode(tld)
+            .toUpperCase()
+            .split('')
+            .map((char) => 127397 + char.charCodeAt(0))
+    )
+}

assets/utils/index.tsx

@@ -1,111 +0,0 @@
-import {MessageInstance, MessageType} from "antd/lib/message/interface";
-import {AxiosError, AxiosResponse} from "axios";
-import {t} from "ttag";
-import {Avatar} from "antd";
-import {
-    BankOutlined,
-    ClockCircleOutlined,
-    DeleteOutlined,
-    DollarOutlined,
-    IdcardOutlined,
-    LockOutlined,
-    ReloadOutlined,
-    ShareAltOutlined,
-    SignatureOutlined,
-    SyncOutlined,
-    ToolOutlined,
-    UnlockOutlined,
-    UserOutlined
-} from "@ant-design/icons";
-import {Domain, Entity, EventAction} from "./api";
-import vCard from "vcf";
-import React from "react";
-
-
-export const roleToAvatar = (e: { roles: string[] }) => <Avatar style={{backgroundColor: rolesToColor(e.roles)}}
-                                                                icon={e.roles.includes('registrant') ?
-                                                                    <SignatureOutlined/> : e.roles.includes('registrar') ?
-                                                                        <BankOutlined/> :
-                                                                        e.roles.includes('technical') ?
-                                                                            <ToolOutlined/> :
-                                                                            e.roles.includes('administrative') ?
-                                                                                <IdcardOutlined/> :
-                                                                                e.roles.includes('billing') ?
-                                                                                    <DollarOutlined/> :
-                                                                                    <UserOutlined/>}/>
-
-
-export const rolesToColor = (roles: string[]) => roles.includes('registrant') ? 'green' :
-    roles.includes('administrative') ? 'blue' :
-        roles.includes('technical') ? 'orange' :
-            roles.includes('registrar') ? 'purple' :
-                roles.includes('sponsor') ? 'magenta' :
-                    roles.includes('billing') ? 'cyan' : 'default'
-
-
-export const actionToColor = (a: EventAction) => a === 'registration' ? 'green' :
-    a === 'reregistration' ? 'cyan' :
-        a === 'expiration' ? 'red' :
-            a === 'deletion' ? 'magenta' :
-                a === 'transfer' ? 'orange' :
-                    a === 'last changed' ? 'blue' :
-                        a === 'registrar expiration' ? 'red' :
-                            a === 'reinstantiation' ? 'purple' :
-                                a === 'enum validation expiration' ? 'red' : 'default'
-
-export const actionToIcon = (a: EventAction) => a === 'registration' ?
-    <SignatureOutlined style={{fontSize: '16px'}}/> : a === 'expiration' ?
-        <ClockCircleOutlined style={{fontSize: '16px'}}/> : a === 'transfer' ?
-            <ShareAltOutlined style={{fontSize: '16px'}}/> : a === 'last changed' ?
-                <SyncOutlined style={{fontSize: '16px'}}/> : a === 'deletion' ?
-                    <DeleteOutlined style={{fontSize: '16px'}}/> : a === 'reregistration' ?
-                        <ReloadOutlined style={{fontSize: '16px'}}/> : a === 'locked' ?
-                            <LockOutlined style={{fontSize: '16px'}}/> : a === 'unlocked' ?
-                                <UnlockOutlined style={{fontSize: '16px'}}/> : a === 'registrar expiration' ?
-                                    <ClockCircleOutlined
-                                        style={{fontSize: '16px'}}/> : a === 'enum validation expiration' ?
-                                        <ClockCircleOutlined style={{fontSize: '16px'}}/> : a === 'reinstantiation' ?
-                                            <ReloadOutlined style={{fontSize: '16px'}}/> : undefined
-
-
-export const entityToName = (e: { entity: Entity }): string => {
-    if (e.entity.jCard.length === 0) return e.entity.handle
-
-    const jCard = vCard.fromJSON(e.entity.jCard)
-    let name = e.entity.handle
-    if (jCard.data.fn && !Array.isArray(jCard.data.fn) && jCard.data.fn.valueOf() !== '') name = jCard.data.fn.valueOf()
-    return name
-}
-
-export const sortDomainEntities = (domain: Domain) => domain.entities.sort((e1, e2) => {
-    const p = (r: string[]) => r.includes('registrant') ? 5 :
-        r.includes('administrative') ? 4 :
-            r.includes('billing') ? 3 :
-                r.includes('registrar') ? 2 : 1
-    return p(e2.roles) - p(e1.roles)
-})
-
-
-export function showErrorAPI(e: AxiosError, messageApi: MessageInstance): MessageType | undefined {
-
-    const response = e.response as AxiosResponse
-    const data = response.data
-
-    if ('message' in data) {
-        return messageApi.error(data.message as string)
-    }
-
-    if (!('detail' in data)) return
-    const detail = data.detail as string
-
-    if (response.status === 429) {
-        const duration = response.headers['retry-after']
-        return messageApi.error(t`Please retry after ${duration} seconds`)
-    }
-
-    if (response.status.toString()[0] === '4') {
-        return messageApi.warning(detail !== '' ? detail : t`An error occurred`)
-    }
-
-    return messageApi.error(detail !== '' ? detail : t`An error occurred`)
-}

translations/translations.pot

@@ -3,15 +3,15 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Plural-Forms: nplurals=2; plural=(n!=1);\n"
 
-#: assets/components/LoginForm.tsx:51
-#: assets/components/RegisterForm.tsx:38
+#: assets/components/LoginForm.tsx:52
+#: assets/components/RegisterForm.tsx:39
 msgid "Email address"
 msgstr ""
 
-#: assets/components/LoginForm.tsx:53
-#: assets/components/LoginForm.tsx:61
-#: assets/components/RegisterForm.tsx:40
-#: assets/components/RegisterForm.tsx:48
+#: assets/components/LoginForm.tsx:54
+#: assets/components/LoginForm.tsx:62
+#: assets/components/RegisterForm.tsx:41
+#: assets/components/RegisterForm.tsx:49
 #: assets/components/search/DomainSearchBar.tsx:22
 #: assets/components/tracking/connector/ConnectorForm.tsx:43
 #: assets/components/tracking/connector/ConnectorForm.tsx:69
@@ -22,21 +22,21 @@ msgstr ""
 #: assets/components/tracking/connector/ConnectorForm.tsx:142
 #: assets/components/tracking/connector/ConnectorForm.tsx:156
 #: assets/components/tracking/connector/ConnectorForm.tsx:165
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:114
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:211
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:115
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:212
 msgid "Required"
 msgstr ""
 
-#: assets/components/LoginForm.tsx:59
-#: assets/components/RegisterForm.tsx:46
+#: assets/components/LoginForm.tsx:60
+#: assets/components/RegisterForm.tsx:47
 msgid "Password"
 msgstr ""
 
-#: assets/components/LoginForm.tsx:69
+#: assets/components/LoginForm.tsx:70
 msgid "Submit"
 msgstr ""
 
-#: assets/components/LoginForm.tsx:74
+#: assets/components/LoginForm.tsx:75
 msgid "Log in with SSO"
 msgstr ""
 
@@ -456,20 +456,20 @@ msgid ""
 "registry."
 msgstr ""
 
-#: assets/components/search/DomainResult.tsx:28
+#: assets/components/search/DomainResult.tsx:39
 msgid "EPP Status Codes"
 msgstr ""
 
-#: assets/components/search/DomainResult.tsx:42
+#: assets/components/search/DomainResult.tsx:53
 msgid "Timeline"
 msgstr ""
 
-#: assets/components/search/DomainResult.tsx:47
+#: assets/components/search/DomainResult.tsx:58
 msgid "Entities"
 msgstr ""
 
 #: assets/components/search/DomainSearchBar.tsx:25
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:117
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:118
 msgid "This domain name does not appear to be valid"
 msgstr ""
 
@@ -544,12 +544,12 @@ msgid ""
 msgstr ""
 
 #: assets/components/tracking/connector/ConnectorForm.tsx:176
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:251
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:252
 msgid "Create"
 msgstr ""
 
 #: assets/components/tracking/connector/ConnectorForm.tsx:179
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:254
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:255
 msgid "Reset"
 msgstr ""
 
@@ -582,72 +582,72 @@ msgstr ""
 msgid "No"
 msgstr ""
 
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:71
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:72
 msgid "Name"
 msgstr ""
 
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:82
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:83
 msgid "Watchlist Name"
 msgstr ""
 
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:83
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:84
 msgid "Naming the Watchlist makes it easier to find in the list below."
 msgstr ""
 
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:94
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:95
 msgid "At least one domain name"
 msgstr ""
 
-#: assets/components/tracking/watchlist/WatchlistCard.tsx:28
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:105
+#: assets/components/tracking/watchlist/WatchlistCard.tsx:29
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:106
 msgid "Domain names"
 msgstr ""
 
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:123
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:124
 msgid "Domain name"
 msgstr ""
 
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:140
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:141
 msgid "Add a Domain name"
 msgstr ""
 
-#: assets/components/tracking/watchlist/WatchlistCard.tsx:32
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:147
+#: assets/components/tracking/watchlist/WatchlistCard.tsx:33
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:148
 msgid "Tracked events"
 msgstr ""
 
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:149
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:150
 msgid "At least one trigger"
 msgstr ""
 
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:172
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:186
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:173
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:187
 msgid "Connector"
 msgstr ""
 
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:182
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:183
 msgid ""
 "Please make sure the connector information is valid to purchase a domain "
 "that may be available soon."
 msgstr ""
 
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:202
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:203
 msgid "DSN"
 msgstr ""
 
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:214
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:215
 msgid "This DSN does not appear to be valid"
 msgstr ""
 
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:232
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:233
 msgid "Check out this link to the Symfony documentation to help you build the DSN"
 msgstr ""
 
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:241
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:242
 msgid "Add a Webhook"
 msgstr ""
 
-#: assets/components/tracking/watchlist/WatchlistForm.tsx:251
+#: assets/components/tracking/watchlist/WatchlistForm.tsx:252
 msgid "Update"
 msgstr ""
 
@@ -671,11 +671,11 @@ msgstr ""
 msgid "Watchlist Entity Diagram"
 msgstr ""
 
-#: assets/components/tracking/watchlist/diagram/watchlistToEdges.tsx:36
+#: assets/components/tracking/watchlist/diagram/watchlistToEdges.tsx:37
 msgid "Registry"
 msgstr ""
 
-#: assets/components/tracking/watchlist/diagram/watchlistToNodes.tsx:29
+#: assets/components/tracking/watchlist/diagram/watchlistToNodes.tsx:30
 #, javascript-format
 msgid ".${ tld.tld } Registry"
 msgstr ""
@@ -697,11 +697,11 @@ msgstr ""
 msgid "Are you sure to delete this Watchlist?"
 msgstr ""
 
-#: assets/components/tracking/watchlist/WatchlistCard.tsx:45
+#: assets/components/tracking/watchlist/WatchlistCard.tsx:46
 msgid "This Watchlist is not linked to a Connector."
 msgstr ""
 
-#: assets/components/tracking/watchlist/WatchlistCard.tsx:48
+#: assets/components/tracking/watchlist/WatchlistCard.tsx:49
 msgid "Watchlist"
 msgstr ""
 
@@ -722,7 +722,7 @@ msgid "Domain Finder"
 msgstr ""
 
 #: assets/components/Sider.tsx:48
-#: assets/pages/info/TldPage.tsx:79
+#: assets/pages/info/TldPage.tsx:65
 msgid "TLD"
 msgstr ""
 
@@ -777,7 +777,7 @@ msgstr ""
 msgid "Log in"
 msgstr ""
 
-#: assets/components/RegisterForm.tsx:55
+#: assets/components/RegisterForm.tsx:56
 #: assets/pages/LoginPage.tsx:25
 msgid "Register"
 msgstr ""
@@ -796,23 +796,23 @@ msgid ""
 "WHOIS by its registrar."
 msgstr ""
 
-#: assets/pages/info/TldPage.tsx:85
+#: assets/pages/info/TldPage.tsx:71
 msgid "Flag"
 msgstr ""
 
-#: assets/pages/info/TldPage.tsx:88
+#: assets/pages/info/TldPage.tsx:74
 msgid "Country"
 msgstr ""
 
-#: assets/pages/info/TldPage.tsx:93
+#: assets/pages/info/TldPage.tsx:79
 msgid "Registry Operator"
 msgstr ""
 
-#: assets/pages/info/TldPage.tsx:120
+#: assets/pages/info/TldPage.tsx:106
 msgid "This page presents all active TLDs in the root zone database."
 msgstr ""
 
-#: assets/pages/info/TldPage.tsx:123
+#: assets/pages/info/TldPage.tsx:109
 msgid ""
 "IANA provides the list of currently active TLDs, regardless of their type, "
 "and ICANN provides the list of gTLDs.\n"
@@ -824,42 +824,42 @@ msgid ""
 "At the same time, the list of root RDAP servers is updated."
 msgstr ""
 
-#: assets/pages/info/TldPage.tsx:134
+#: assets/pages/info/TldPage.tsx:120
 msgid "Sponsored Top-Level-Domains"
 msgstr ""
 
-#: assets/pages/info/TldPage.tsx:136
+#: assets/pages/info/TldPage.tsx:122
 msgid ""
 "Top-level domains sponsored by specific organizations that set rules for "
 "registration and use, often related to particular interest groups or "
 "industries."
 msgstr ""
 
-#: assets/pages/info/TldPage.tsx:143
+#: assets/pages/info/TldPage.tsx:129
 msgid "Generic Top-Level-Domains"
 msgstr ""
 
-#: assets/pages/info/TldPage.tsx:145
+#: assets/pages/info/TldPage.tsx:131
 msgid ""
 "Generic top-level domains open to everyone, not restricted by specific "
 "criteria, representing various themes or industries."
 msgstr ""
 
-#: assets/pages/info/TldPage.tsx:152
+#: assets/pages/info/TldPage.tsx:138
 msgid "Brand Generic Top-Level-Domains"
 msgstr ""
 
-#: assets/pages/info/TldPage.tsx:154
+#: assets/pages/info/TldPage.tsx:140
 msgid ""
 "Generic top-level domains associated with specific brands, allowing "
 "companies to use their own brand names as domains."
 msgstr ""
 
-#: assets/pages/info/TldPage.tsx:161
+#: assets/pages/info/TldPage.tsx:147
 msgid "Country-Code Top-Level-Domains"
 msgstr ""
 
-#: assets/pages/info/TldPage.tsx:163
+#: assets/pages/info/TldPage.tsx:149
 msgid ""
 "Top-level domains based on country codes, identifying websites according to "
 "their country of origin."
@@ -873,23 +873,23 @@ msgstr ""
 msgid "Roles"
 msgstr ""
 
-#: assets/pages/tracking/ConnectorsPage.tsx:19
+#: assets/pages/tracking/ConnectorsPage.tsx:20
 msgid "Connector created !"
 msgstr ""
 
-#: assets/pages/tracking/ConnectorsPage.tsx:38
+#: assets/pages/tracking/ConnectorsPage.tsx:39
 msgid "Create a Connector"
 msgstr ""
 
-#: assets/pages/tracking/WatchlistPage.tsx:64
+#: assets/pages/tracking/WatchlistPage.tsx:65
 msgid "Watchlist created !"
 msgstr ""
 
-#: assets/pages/tracking/WatchlistPage.tsx:76
+#: assets/pages/tracking/WatchlistPage.tsx:77
 msgid "Watchlist updated !"
 msgstr ""
 
-#: assets/pages/tracking/WatchlistPage.tsx:100
+#: assets/pages/tracking/WatchlistPage.tsx:101
 msgid "Create a Watchlist"
 msgstr ""
 
@@ -901,6 +901,16 @@ msgstr ""
 msgid "Create an account"
 msgstr ""
 
+#: assets/utils/functions/showErrorAPI.tsx:19
+#, javascript-format
+msgid "Please retry after ${ duration } seconds"
+msgstr ""
+
+#: assets/utils/functions/showErrorAPI.tsx:23
+#: assets/utils/functions/showErrorAPI.tsx:26
+msgid "An error occurred"
+msgstr ""
+
 #: assets/utils/providers/index.tsx:11
 msgid ""
 "Retrieve a set of tokens from your customer account on the Provider's "
@@ -943,16 +953,6 @@ msgid ""
 "another"
 msgstr ""
 
-#: assets/utils/index.tsx:103
-#, javascript-format
-msgid "Please retry after ${ duration } seconds"
-msgstr ""
-
-#: assets/utils/index.tsx:107
-#: assets/utils/index.tsx:110
-msgid "An error occurred"
-msgstr ""
-
 #: assets/App.tsx:101
 msgid "TOS"
 msgstr ""