fix: small UI issues (#890)

* fix: small UI issues

* fix: shortened domains length

components/UI/desktopNav.tsx

@@ -60,7 +60,7 @@ const DesktopNav: FunctionComponent<DesktopNavProps> = ({ close }) => {
             <li className={styles.burgerItem}>Documentation</li>
           </Link>
           <Link href="https://www.starknet.id/pdfs/Terms.pdf" target="_blank">
-            <li className={styles.burgerItem}>Term of use</li>
+            <li className={styles.burgerItem}>Terms of use</li>
           </Link>
           <Link
             href="https://starknet.id/pdfs/PrivacyPolicy.pdf"

components/identities/identitiesGalleryV1.tsx

@@ -6,7 +6,11 @@ import React, {
 } from "react";
 import { useRouter } from "next/router";
 import styles from "../../styles/components/identitiesV1.module.css";
-import { getDomainKind, minifyDomain } from "../../utils/stringService";
+import {
+  advancedMinifyDomain,
+  getDomainKind,
+  minifyDomain,
+} from "../../utils/stringService";
 import ErrorIcon from "@mui/icons-material/Error";
 import { Tooltip } from "@mui/material";
 import {
@@ -82,7 +86,7 @@ const IdentitiesGalleryV1: FunctionComponent<IdentitiesGalleryV1Props> = ({
             <div className={styles.identityInfo}>
               <p className="font-bold font-quickZap">
                 {identity.domain
-                  ? minifyDomain(identity.domain)
+                  ? advancedMinifyDomain(identity.domain, 14, 18)
                   : `ID: ${identity.id}`}
               </p>
               {needAutoRenewal?.includes(identity.domain) ? (

tests/utils/stringService.test.js

@@ -34,6 +34,7 @@ import {
   generateSuggestedNames,
   generateSuggestedDomains,
   getEnsFromStark,
+  advancedMinifyDomain,
 } from "../../utils/stringService";
 
 describe("Should test is1234Domain", () => {
@@ -417,6 +418,32 @@ describe("Should test shortenDomain function", () => {
   });
 });
 
+describe("Should test advancedMinifyDomain function", () => {
+  it("Should return the same domain if the length is less than the default characterToBreak", () => {
+    expect(advancedMinifyDomain("example.com")).toEqual("example.com");
+  });
+
+  it("Should return the shortened domain if the length is greater than the default characterToBreak", () => {
+    expect(
+      advancedMinifyDomain("averylongdomainnametoshorten.com", 10, 13)
+    ).toEqual("averylongd...");
+  });
+
+  it("Should return the same domain if the length is less than the custom characterToBreak", () => {
+    expect(advancedMinifyDomain("example.com", 10, 15)).toEqual("example.com");
+  });
+
+  it("Should return the shortened domain if the length is greater than the custom characterToBreak", () => {
+    expect(
+      advancedMinifyDomain("averylongdomainnametoshorten.com", 10, 15)
+    ).toEqual("averylongd...");
+  });
+
+  it("Should return an empty string if the domain is undefined", () => {
+    expect(advancedMinifyDomain(undefined)).toEqual("");
+  });
+});
+
 describe("cleanUsername function", () => {
   it("should remove @ symbol if it exists in the username", () => {
     const username = "@john";

utils/stringService.ts

@@ -29,6 +29,22 @@ export function shortenDomain(
   }
 }
 
+export function advancedMinifyDomain(
+  domain?: string,
+  firstPartMaxLength?: number,
+  characterToBreak?: number
+): string {
+  if (!domain) return "";
+
+  if (domain.length > (characterToBreak ?? 20)) {
+    const firstPart = domain.substring(0, firstPartMaxLength ?? 10);
+
+    return (firstPart + "...").toLowerCase();
+  } else {
+    return domain.toLowerCase();
+  }
+}
+
 export function minifyDomain(
   domain: string,
   characterToBreak?: number