Timezone Record Parsing

e2e/specs/stateful/profile.spec.ts

@@ -29,7 +29,7 @@ const profiles = [
       {
         type: 'account',
         key: 'com.discord',
-        value: 'ens#0700',
+        value: 'nickjohnson',
       },
       {
         type: 'account',

package.json

@@ -83,6 +83,7 @@
     "@tanstack/query-sync-storage-persister": "4.29.1",
     "@tanstack/react-query": "4.29.1",
     "@tanstack/react-query-persist-client": "4.29.1",
+    "@types/luxon": "^3.3.1",
     "@wagmi/core": "0.10.11",
     "calendar-link": "^2.2.0",
     "dns-packet": "^5.4.0",
@@ -94,6 +95,7 @@
     "intl-segmenter-polyfill": "^0.4.4",
     "iso-639-1": "^2.1.15",
     "lodash": "^4.17.21",
+    "luxon": "^3.4.0",
     "markdown-to-jsx": "^7.1.7",
     "next": "12.1.6",
     "p-memoize": "^7.1.1",

public/locales/en/register.json

@@ -67,8 +67,8 @@
             "placeholder": {
               "com.twitter": "e.g. ensdomains",
               "com.github": "e.g. ensdomains",
-              "com.discord": "e.g. alisha.eth#0001",
-              "org.telegram": "e.g. futurealisha",
+              "com.discord": "e.g. nickjohnson",
+              "org.telegram": "e.g. nicksdjohnson",
               "email": "e.g. hello@example.com"
             }
           },

public/locales/en/transactionFlow.json

@@ -53,10 +53,10 @@
           "noOptions": "No account options available",
           "placeholder": {
             "default": "Add username here",
-            "com.twitter": "e.g. ensdomains",
-            "com.github": "e.g. ensdomains",
-            "com.discord": "e.g. alisha.eth#0001",
-            "org.telegram": "e.g. futurealisha",
+            "com.twitter": "e.g. nicksdjohnson",
+            "com.github": "e.g. arachnid",
+            "com.discord": "e.g. nickjohnson",
+            "org.telegram": "e.g. nicksdjohnson",
             "email": "e.g. hello@example.com"
           }
         },

public/locales/nl/transactionFlow.json

@@ -54,7 +54,7 @@
             "default": "Voeg username hier toe",
             "com.twitter": "e.g. ensdomains",
             "com.github": "e.g. ensdomains",
-            "com.discord": "e.g. alisha.eth#0001"
+            "com.discord": "e.g. nickjohnson"
           }
         },
         "address": {

public/locales/zh/register.json

@@ -63,9 +63,10 @@
               "com.discord": "Discord"
             },
             "placeholder": {
-              "com.twitter": "例如 ensdomains",
-              "com.github": "例如 ensdomains",
-              "com.discord": "例如 alisha.eth#0001"
+              "com.twitter": "例如 nicksdjohnson",
+              "com.github": "例如 arachnid",
+              "com.discord": "例如 nickjohnson",
+              "org.telegram": "e.g. nicksdjohnson"
             }
           },
           "address": {

public/locales/zh/transactionFlow.json

@@ -53,9 +53,9 @@
           "noOptions": "没有可用的账户",
           "placeholder": {
             "default": "在此添加用户名",
-            "com.twitter": "例如 ensdomains",
-            "com.github": "例如 ensdomains",
-            "com.discord": "例如 alisha.eth#0001"
+            "com.twitter": "例如 nicksdjohnson",
+            "com.github": "例如 arachnid",
+            "com.discord": "例如 nickjohnson"
           }
         },
         "address": {

src/assets/social/DynamicSocialIcon.tsx

@@ -11,6 +11,7 @@ export const socialIconTypes = {
   'com.twitter': dynamic(() => import('./SocialTwitter.svg')),
   'com.youtube': dynamic(() => import('./SocialYoutube.svg')),
   'org.telegram': dynamic(() => import('./SocialTelegram.svg')),
+  timezone: dynamic(() => import('@ensdomains/thorin').then((m) => m.MarkerSVG)),
   email: dynamic(() => import('@ensdomains/thorin').then((m) => m.EnvelopeSVG)),
 }
 
@@ -22,6 +23,7 @@ export const socialIconColors = {
   'com.twitter': '#65C5FC',
   'com.youtube': '#FF0000',
   'org.telegram': '#2BABEE',
+  timezone: '#000000',
   email: '#000000',
 }
 

src/constants/supportedSocialRecordKeys.json

@@ -1 +1 @@
-["com.twitter", "com.github", "com.discord", "org.telegram", "email"]
+["com.twitter", "com.github", "com.discord", "org.telegram", "email", "timezone"]

src/transaction-flow/input/AdvancedEditor/AdvancedEditor.test.tsx

@@ -41,7 +41,7 @@ const mockProfileData = {
         {
           key: 'com.discord',
           type: 'text',
-          value: 'test#1234',
+          value: 'test',
         },
         {
           key: 'com.reddit',

src/transaction-flow/input/ProfileEditor/ProfileEditor.test.tsx

@@ -42,7 +42,7 @@ const mockProfileData = {
         {
           key: 'com.discord',
           type: 'text',
-          value: 'test#1234',
+          value: 'test',
         },
         {
           key: 'com.reddit',

src/utils/getSocialData.ts

@@ -1,3 +1,5 @@
+import { DateTime } from 'luxon'
+
 export const getSocialData = (iconKey: string, value: string) => {
   switch (iconKey) {
     case 'twitter':
@@ -47,6 +49,34 @@ export const getSocialData = (iconKey: string, value: string) => {
         value,
         type: 'copy',
       }
+    case 'timezone':
+      return {
+        icon: 'timezone',
+        color: '#2BABEE',
+        label: 'Timezone',
+        value: (() => {
+          try {
+            const zone = DateTime.now().setZone(value)
+            const now = DateTime.now().toLocal()
+
+            // Number of minutes between now and the target zone
+            const minutes = zone.offset - now.offset
+            const absoluteMinutes = Math.abs(minutes)
+
+            // To hour offset, 120 minutes = "+2:00", 90 minutes = "+1:30" including leading zeroes
+            const offset = `${minutes < 0 ? '-' : '+'}${Math.floor(absoluteMinutes / 60)
+              .toString()
+              .padStart(2, '0')}:${Math.abs(absoluteMinutes % 60)
+              .toString()
+              .padStart(2, '0')}`
+
+            return `${value} (${offset})`
+          } catch {
+            // If unable to parse offset simply return the user-set value
+            return value
+          }
+        })(),
+      }
     default:
       return null
   }