From 35c7daed3fd81d241255e8c49d45d8192ef97307 Mon Sep 17 00:00:00 2001
From: Alexey <andreewsky.alexey@gmail.com>
Date: Tue, 19 Nov 2024 18:18:51 +0300
Subject: [PATCH 1/2] Add status state for Alias

---
 packages/frontend/src/app/home/Home.js        | 102 ++++++++++--------
 .../src/app/identity/[identifier]/Identity.js |   2 +-
 .../frontend/src/components/data/Alias.js     |   5 +-
 .../frontend/src/components/data/Alias.scss   |   4 +
 .../src/components/identities/Cards.js        |  16 ++-
 .../identities/IdentitiesListItem.js          |  26 +++--
 6 files changed, 92 insertions(+), 63 deletions(-)

diff --git a/packages/frontend/src/app/home/Home.js b/packages/frontend/src/app/home/Home.js
index 268482926..888b2d798 100644
--- a/packages/frontend/src/app/home/Home.js
+++ b/packages/frontend/src/app/home/Home.js
@@ -186,29 +186,34 @@ function Home () {
               {!trendingIdentities.loading
                 ? !trendingIdentities.error
                     ? <SimpleList
-                      items={trendingIdentities.data.resultSet
-                        .filter((item, i) => i < trendingIdentities.props.printCount)
-                        .map((identitiy) => ({
-                          columns: [
-                            {
-                              value: identitiy?.aliases?.[0]?.alias || identitiy?.aliases?.[0] || identitiy.identifier,
-                              avatar: true,
-                              avatarSource: identitiy.identifier,
-                              mono: true,
-                              dim: !identitiy?.aliases?.[0]?.alias,
-                              ellipsis: true,
-                              format: identitiy?.aliases?.[0]?.alias ? 'alias' : 'identifier'
-                            },
-                            {
-                              value: identitiy.totalTxs,
-                              mono: true
+                        items={trendingIdentities.data.resultSet
+                          .filter((identity, i) => i < trendingIdentities.props.printCount)
+                          .map((identity) => {
+                            const activeAlias = identity?.aliases?.find(alias => alias.status === 'ok')
+                            const value = activeAlias?.alias || identity.identifier
+
+                            return {
+                              columns: [
+                                {
+                                  value,
+                                  avatar: true,
+                                  avatarSource: identity.identifier,
+                                  mono: true,
+                                  dim: !activeAlias,
+                                  ellipsis: true,
+                                  format: activeAlias ? 'alias' : 'identifier'
+                                },
+                                {
+                                  value: identity.totalTxs,
+                                  mono: true
+                                }
+                              ],
+                              link: '/identity/' + identity.identifier
                             }
-                          ],
-                          link: '/identity/' + identitiy.identifier
-                        }))}
-                      columns={['Identifier', 'Tx Count']}
-                      showMoreLink={'/identities'}
-                    />
+                          })}
+                        columns={['Identifier', 'Tx Count']}
+                        showMoreLink={'/identities'}
+                      />
                     : <ErrorMessageBlock/>
                 : <LoadingList itemsCount={trendingIdentities.props.printCount}/>}
             </Flex>
@@ -225,31 +230,36 @@ function Home () {
               {!richestIdentities.loading
                 ? !richestIdentities.error
                     ? <SimpleList
-                      items={richestIdentities.data.resultSet
-                        .filter((item, i) => i < richestIdentities.props.printCount)
-                        .map((identitiy) => ({
-                          columns: [
-                            {
-                              value: identitiy?.aliases?.[0]?.alias || identitiy?.aliases?.[0] || identitiy.identifier,
-                              avatar: true,
-                              avatarSource: identitiy.identifier,
-                              mono: true,
-                              dim: !identitiy?.aliases?.[0]?.alias,
-                              ellipsis: true,
-                              format: identitiy?.aliases?.[0]?.alias ? 'alias' : 'identifier'
-                            },
-                            {
-                              value: identitiy.balance,
-                              mono: true,
-                              format: 'currency',
-                              rate: !rate.loading && !rate.error ? rate.data : null
+                        items={richestIdentities.data.resultSet
+                          .filter((_, i) => i < richestIdentities.props.printCount)
+                          .map((identity) => {
+                            const activeAlias = identity?.aliases?.find(alias => alias.status === 'ok')
+                            const value = activeAlias?.alias || identity.identifier
+
+                            return {
+                              columns: [
+                                {
+                                  value,
+                                  avatar: true,
+                                  avatarSource: identity.identifier,
+                                  mono: true,
+                                  dim: !activeAlias,
+                                  ellipsis: true,
+                                  format: activeAlias ? 'alias' : 'identifier'
+                                },
+                                {
+                                  value: identity.balance,
+                                  mono: true,
+                                  format: 'currency',
+                                  rate: !rate.loading && !rate.error ? rate.data : null
+                                }
+                              ],
+                              link: '/identity/' + identity.identifier
                             }
-                          ],
-                          link: '/identity/' + identitiy.identifier
-                        }))}
-                      columns={['Identifier', 'Balance']}
-                      showMoreLink={'/identities'}
-                    />
+                          })}
+                        columns={['Identifier', 'Balance']}
+                        showMoreLink={'/identities'}
+                      />
                     : <ErrorMessageBlock/>
                 : <LoadingList itemsCount={richestIdentities.props.printCount}/>}
             </Flex>
diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js
index d761a4c42..ecad077a0 100644
--- a/packages/frontend/src/app/identity/[identifier]/Identity.js
+++ b/packages/frontend/src/app/identity/[identifier]/Identity.js
@@ -146,7 +146,7 @@ function Identity ({ identifier }) {
                                       <LoadingLine loading={identity.loading}>
                                         <div className={'IdentityInfo__AliasesContainer'}>
                                         {identity?.data.aliases.map((alias, i) => (
-                                          <Alias alias={alias.alias || alias} key={i}/>
+                                          <Alias status={alias?.status} alias={alias?.alias || alias} key={i}/>
                                         ))}
                                         </div>
                                       </LoadingLine>
diff --git a/packages/frontend/src/components/data/Alias.js b/packages/frontend/src/components/data/Alias.js
index fb0f3f23b..1d5683877 100644
--- a/packages/frontend/src/components/data/Alias.js
+++ b/packages/frontend/src/components/data/Alias.js
@@ -1,13 +1,14 @@
 import './Alias.scss'
 
-export default function Alias ({ alias, children, ellipsis = true, className }) {
+export default function Alias ({ alias, status, children, ellipsis = true, className }) {
   alias = alias || children
   if (typeof alias !== 'string') return <></>
 
   const dashIndex = alias?.lastIndexOf('.dash')
+  const statusClass = status === 'locked' ? 'Alias--Locked' : ''
 
   return (
-    <div className={`Alias ${ellipsis ? 'Alias--Ellipsis' : ''}  ${className || ''}`}>
+    <div className={`Alias ${statusClass} ${ellipsis ? 'Alias--Ellipsis' : ''}  ${className || ''}`}>
       <span className={'Alias__Name'}>
         {dashIndex !== -1
           ? alias?.slice(0, dashIndex)
diff --git a/packages/frontend/src/components/data/Alias.scss b/packages/frontend/src/components/data/Alias.scss
index 5ecf5cc7d..ee06ef4d6 100644
--- a/packages/frontend/src/components/data/Alias.scss
+++ b/packages/frontend/src/components/data/Alias.scss
@@ -12,6 +12,10 @@
     white-space: nowrap;
   }
 
+  &--Locked {
+    color: var(--chakra-colors-red-default);
+  }
+
   &__Domain {
     opacity: .5;
   }
diff --git a/packages/frontend/src/components/identities/Cards.js b/packages/frontend/src/components/identities/Cards.js
index 785917df3..6dd40981e 100644
--- a/packages/frontend/src/components/identities/Cards.js
+++ b/packages/frontend/src/components/identities/Cards.js
@@ -21,10 +21,18 @@ function IdentityCard ({ identity, rate, loading = false }) {
                       <div className={'IdentityCard__Img'}>
                         <ImageGenerator username={identity.identifier} lightness={50} saturation={50} width={42} height={42} />
                       </div>
-                      <div className={'IdentityCard__Alias'}>{identity?.aliases?.length
-                        ? <Alias alias={identity?.aliases[0]?.alias || identity?.aliases[0]}/>
-                        : <Identifier styles={['highlight-both']}>{identity.identifier}</Identifier>}
-                      </div>
+
+                      {(() => {
+                        const activeAlias = identity?.aliases?.find(alias => alias.status === 'ok')
+                        return activeAlias
+                          ? <Alias
+                              alias={activeAlias.alias}
+                              status={activeAlias.status}
+                            />
+                          : <Identifier styles={['highlight-both']}>
+                              {identity.identifier}
+                            </Identifier>
+                      })()}
                   </div>
 
                   <div className={'IdentityCard__Balance'}>
diff --git a/packages/frontend/src/components/identities/IdentitiesListItem.js b/packages/frontend/src/components/identities/IdentitiesListItem.js
index 3c996af0a..40e278eda 100644
--- a/packages/frontend/src/components/identities/IdentitiesListItem.js
+++ b/packages/frontend/src/components/identities/IdentitiesListItem.js
@@ -14,16 +14,22 @@ function IdentitiesListItem ({ identity }) {
       <div className={'IdentitiesListItem__IdentifierContainer'}>
         <ImageGenerator className={'IdentitiesListItem__Avatar'} username={identifier} lightness={50} saturation={50} width={28} height={28}/>
 
-        {aliases?.length
-          ? <Alias className={'IdentitiesListItem__Alias'} alias={aliases[0]?.alias || aliases[0]}/>
-          : <Identifier
-              className={'IdentitiesListItem__Identifier'}
-              copyButton={true}
-              styles={['highlight-both']}
-            >
-              {identifier}
-            </Identifier>
-        }
+        {(() => {
+          const activeAlias = aliases?.find(alias => alias.status === 'ok')
+          return aliases?.find(alias => alias.status === 'ok')
+            ? <Alias
+                className={'IdentitiesListItem__Alias'}
+                alias={activeAlias.alias}
+                status={activeAlias.status}
+              />
+            : <Identifier
+                className={'IdentitiesListItem__Identifier'}
+                copyButton={true}
+                styles={['highlight-both']}
+              >
+                {identifier}
+              </Identifier>
+        })()}
       </div>
 
       {isSystem && <div>SYSTEM</div>}

From cbdfb4d38276446732e60fe5efa8a4b306160fc1 Mon Sep 17 00:00:00 2001
From: Alexey <andreewsky.alexey@gmail.com>
Date: Tue, 19 Nov 2024 18:44:07 +0300
Subject: [PATCH 2/2] Add tooltip for locked alias

---
 .../src/app/identity/[identifier]/Identity.js |  6 ++--
 .../app/identity/[identifier]/Identity.scss   |  5 +++
 .../frontend/src/components/data/Alias.js     | 35 ++++++++++++-------
 .../frontend/src/components/data/Alias.scss   |  1 +
 4 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js
index ecad077a0..2396bdb69 100644
--- a/packages/frontend/src/app/identity/[identifier]/Identity.js
+++ b/packages/frontend/src/app/identity/[identifier]/Identity.js
@@ -145,9 +145,9 @@ function Identity ({ identifier }) {
                                     <Td isNumeric className={'Table__Cell--BreakWord'}>
                                       <LoadingLine loading={identity.loading}>
                                         <div className={'IdentityInfo__AliasesContainer'}>
-                                        {identity?.data.aliases.map((alias, i) => (
-                                          <Alias status={alias?.status} alias={alias?.alias || alias} key={i}/>
-                                        ))}
+                                          {identity?.data.aliases.map((alias, i) => (
+                                            <Alias className={'IdentityInfo__Alias'} status={alias?.status} alias={alias?.alias || alias} key={i}/>
+                                          ))}
                                         </div>
                                       </LoadingLine>
                                     </Td>
diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.scss b/packages/frontend/src/app/identity/[identifier]/Identity.scss
index c8e3fe3d1..48545436a 100644
--- a/packages/frontend/src/app/identity/[identifier]/Identity.scss
+++ b/packages/frontend/src/app/identity/[identifier]/Identity.scss
@@ -15,6 +15,11 @@
     height: 100%;
     overflow-y: auto;
   }
+
+  &__Alias {
+    width: max-content;
+    margin-left: auto;
+  }
 }
 
 .IdentityData {
diff --git a/packages/frontend/src/components/data/Alias.js b/packages/frontend/src/components/data/Alias.js
index 1d5683877..08a9ad1f2 100644
--- a/packages/frontend/src/components/data/Alias.js
+++ b/packages/frontend/src/components/data/Alias.js
@@ -1,4 +1,5 @@
 import './Alias.scss'
+import { Tooltip } from '../ui/Tooltips'
 
 export default function Alias ({ alias, status, children, ellipsis = true, className }) {
   alias = alias || children
@@ -7,20 +8,28 @@ export default function Alias ({ alias, status, children, ellipsis = true, class
   const dashIndex = alias?.lastIndexOf('.dash')
   const statusClass = status === 'locked' ? 'Alias--Locked' : ''
 
-  return (
-    <div className={`Alias ${statusClass} ${ellipsis ? 'Alias--Ellipsis' : ''}  ${className || ''}`}>
-      <span className={'Alias__Name'}>
-        {dashIndex !== -1
-          ? alias?.slice(0, dashIndex)
-          : alias
-        }
-      </span>
+  const Container = ({ children }) => (
+    status === 'locked'
+      ? <Tooltip content={'Alias is locked'} placement={'top'}>{children}</Tooltip>
+      : <>{children}</>
+  )
 
-      {dashIndex !== -1 &&
-        <span className={'Alias__Domain'}>
-          {alias?.slice(dashIndex)}
+  return (
+    <Container>
+      <div className={`Alias ${statusClass} ${ellipsis ? 'Alias--Ellipsis' : ''}  ${className || ''}`}>
+        <span className={'Alias__Name'}>
+          {dashIndex !== -1
+            ? alias?.slice(0, dashIndex)
+            : alias
+          }
         </span>
-      }
-    </div>
+
+        {dashIndex !== -1 &&
+          <span className={'Alias__Domain'}>
+            {alias?.slice(dashIndex)}
+          </span>
+        }
+      </div>
+    </Container>
   )
 }
diff --git a/packages/frontend/src/components/data/Alias.scss b/packages/frontend/src/components/data/Alias.scss
index ee06ef4d6..af3170b14 100644
--- a/packages/frontend/src/components/data/Alias.scss
+++ b/packages/frontend/src/components/data/Alias.scss
@@ -2,6 +2,7 @@
 @import '../../styles/variables.scss';
 
 .Alias {
+  width: max-content;
   font-family: $font-mono;
   font-size: 0.75rem;
   color: #fff;