Punycode support

css/dns.css

@@ -909,7 +909,6 @@ nav .container-inner {
     font-size: 40px;
     line-height: 48px;
     color: var(--text-primary);
-    margin-bottom: 24px;
     word-break: break-all;
     text-align: center;
 }
@@ -918,6 +917,15 @@ nav .container-inner {
     font-size: 32px;
 }
 
+#domainPunyName {
+    font-weight: 600;
+    line-height: 48px;
+    color: var(--text-primary);
+    margin-bottom: 24px;
+    word-break: break-all;
+    text-align: center;
+}
+
 .status {
     flex-direction: row;
     justify-content: center;

index.html

@@ -224,6 +224,8 @@ <h1 data-locale="open_auction">Get .ton domains</h1>
 
 				<span id="domainName" class="line-clamp"></span>
 
+				<span id="domainPunyName" class="line-clamp"></span>
+
 				<div id="auctionDomainScreen">
 					<div class="info">
 						<p class="row">
@@ -910,6 +912,7 @@ <h1 data-locale="open_auction">Get .ton domains</h1>
 		<script type="text/javascript" src="./src/libs/lottie-player-1.6.2.js?20"></script>
 		<script type="text/javascript" src="./src/libs/qr-code-styling-1.5.0.js?20"></script>
 		<script type="text/javascript" src="./src/libs/bignumbers.js?20"></script>
+		<script type="text/javascript" src="./src/libs/idna-uts46-hx-2.3.1.js?20"></script>
 		<script type="text/javascript" src="./src/analytics.js?20"></script>
 		<script type="text/javascript" src="./src/controllers/localeController.js?20"></script>
 		<script type="text/javascript" src="./src/libs/flip-clock.js?20"></script>

src/index.js

@@ -100,25 +100,21 @@ $('.badge__dns-mobile').addEventListener('click', () => {
 
 // SET DOMAIN
 
+const validateDomainChars = (domain) => {
+    return !!domain.match(/^[0-9A-Za-z-]+$/) // '-' or 0-9 or a-z ;  abcdefghijklmnopqrstuvwxyz-0123456789
+}
+
 const validateDomain = (domain) => {
     if (domain.length < 4 || domain.length > 126) {
         return store.localeDict.error_length
     }
 
-    for (let i = 0; i < domain.length; i++) {
-        if (domain.charAt(i) === '.') {
-            return store.localeDict.subdomains_not_allowed
-        }
-        const char = domain.charCodeAt(i)
-        const isHyphen = char === 45
-        const isValidChar =
-            (isHyphen && i > 0 && i < domain.length - 1) ||
-            (char >= 48 && char <= 57) ||
-            (char >= 97 && char <= 122) // '-' or 0-9 or a-z ;  abcdefghijklmnopqrstuvwxyz-0123456789
-
-        if (!isValidChar) {
-            return store.localeDict.invalid_chars
-        }
+    if (domain.includes('.')) {
+        return store.localeDict.subdomains_not_allowed
+    }
+
+    if (!validateDomainChars(domain)) {
+        return store.localeDict.invalid_chars
     }
 }
 
@@ -276,7 +272,8 @@ const setDomain = (domain, isTimerMounted) => {
     $('.start-input').value = ''
     setCareeteHelperValue('')
 
-    setDomainName(domain, $('#domainName'))
+    setDomainName(normalizeDomain(domain), $('#domainName'))
+    $('#domainPunyName').innerText = isPunycode(domain) ? `(${domain}.ton)` : ''
     setScreen('main')
 
     clearInterval(updateIntervalId)
@@ -314,6 +311,9 @@ const onInput = (e) => {
         if (domain.endsWith('.ton')) {
             domain = domain.substring(0, domain.length - 4)
         }
+        if (!validateDomainChars(domain)) {
+            domain = idnaUts46.toAscii(domain)
+        }
         const error = validateDomain(domain)
         if (error) {
             setError($('.start-error'), error)
@@ -560,6 +560,7 @@ const renderSearchHistory = (node) => {
     try {
         const historyMarkup = getHistoryFromStorage().map(
             (historyRecord) => {
+                const normalizedDomain = normalizeDomain(historyRecord)
                 const sanitizedValue = encodeHTML(historyRecord)
 
                 return `<button class="hover__button" data-record="${sanitizedValue}">
@@ -569,7 +570,7 @@ const renderSearchHistory = (node) => {
                         <path d="M12.0273 7.15381V12.3461H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                     </svg>
                     <div class="text--overflow__hidden" data-record="${sanitizedValue}">
-                    	<span>${sanitizedValue}</span>
+                    	<span>${normalizedDomain}</span>
                     </div>
                     <svg data-record="${sanitizedValue}" class="icon history__record remove" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M6.00012 18L18.0001 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" />

src/utils.js

@@ -62,6 +62,19 @@ const shortAddress = (address) => {
     return address.substring(0, 8) + '...' + address.substring(address.length - 8);
 }
 
+const isPunycode = (str) => {
+    return /xn--[a-z0-9]+/i.test(str)
+}
+
+const normalizeDomain = (domain) => {
+    if (isPunycode(domain)) {
+        try {
+            return idnaUts46.toUnicode(domain)
+        } catch (e) {}
+    }
+    return domain
+}
+
 const getMinPriceConfig = (domainCharCount) => {
     switch (domainCharCount) {
         case 4: return ['1000', '100'];