Clarify primary name normalization messaging

Author: svemat01

public/locales/en/address.json

@@ -9,7 +9,7 @@
   "view": "View",
   "noProfile": {
     "title": "No primary name set",
-    "message": "This wallet needs to set a primary name to create a profile"
+    "message": "This wallet needs to set a primary name to create a profile. Only normalized names will be shown."
   },
   "noResults": "No names found",
   "errors": {

public/locales/en/settings.json

@@ -21,7 +21,7 @@
     },
     "primary": {
       "title": "Primary Name",
-      "noNameDescription": "A primary name links your address to a name, allowing dApps to display a name as your profile when connected to them. Learn about primary names",
+      "noNameDescription": "A primary name links your address to a name, allowing dApps to display a name as your profile when connected to them. Only normalized names will be shown. <link>Learn about primary names</link>",
       "choosePrimaryName": "Choose primary name",
       "inheritedFromDefault": "Inherited from default",
       "networkSpecificPrimaryNames": {

src/components/pages/profile/settings/PrimarySection/PrimarySection.tsx

@@ -1,8 +1,9 @@
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 
 import { Button, Card, CrossSVG, PersonPlusSVG, Skeleton, Typography } from '@ensdomains/thorin'
 
+import { Outlink } from '@app/components/Outlink'
 import { AvatarWithLink } from '@app/components/@molecules/AvatarWithLink/AvatarWithLink'
 import { DisabledButtonWithTooltip } from '@app/components/@molecules/DisabledButtonWithTooltip'
 import { getNetworkFromUrl } from '@app/constants/chains'
@@ -271,7 +272,17 @@ export const PrimarySection = () => {
                 </NoNameButton>
               </>
             )}
-            <NoNameDescription>{t('section.primary.noNameDescription')}</NoNameDescription>
+            <NoNameDescription>
+              <Trans
+                ns="settings"
+                i18nKey="section.primary.noNameDescription"
+                components={{
+                  link: (
+                    <Outlink href="https://support.ens.domains/en/articles/7890756-what-is-a-primary-name" />
+                  ),
+                }}
+              />
+            </NoNameDescription>
           </NoNameContainer>
         )}