Merge pull request #279 from pshenmic/feat/identities-names-frontend

Implement identities names on frontend
pshenmic · Oct 21, 2024 · 87cea83 · 87cea83
2 parents af457f6 + 967134b
commit 87cea83
Show file tree

Hide file tree

Showing 11 changed files with 148 additions and 73 deletions.
diff --git a/packages/frontend/src/app/home/Home.js b/packages/frontend/src/app/home/Home.js
@@ -191,12 +191,13 @@ function Home () {
                         .map((identitiy, i) => ({
                           columns: [
                             {
-                              value: identitiy.identifier,
+                              value: identitiy?.aliases[0] || identitiy.identifier,
                               avatar: true,
+                              avatarSource: identitiy.identifier,
                               mono: true,
-                              dim: true,
+                              dim: !identitiy?.aliases[0],
                               ellipsis: true,
-                              format: 'identifier'
+                              format: identitiy?.aliases[0] ? 'alias' : 'identifier'
                             },
                             {
                               value: identitiy.totalTxs,
@@ -229,12 +230,13 @@ function Home () {
                         .map((identitiy, i) => ({
                           columns: [
                             {
-                              value: identitiy.identifier,
+                              value: identitiy?.aliases[0] || identitiy.identifier,
                               avatar: true,
+                              avatarSource: identitiy.identifier,
                               mono: true,
-                              dim: true,
+                              dim: !identitiy?.aliases[0],
                               ellipsis: true,
-                              format: 'identifier'
+                              format: identitiy?.aliases[0] ? 'alias' : 'identifier'
                             },
                             {
                               value: identitiy.balance,

diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js
@@ -12,7 +12,7 @@ import { LoadingLine, LoadingList } from '../../../components/loading'
 import { ErrorMessageBlock } from '../../../components/Errors'
 import ImageGenerator from '../../../components/imageGenerator'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
-import { Credits } from '../../../components/data'
+import { Credits, Alias } from '../../../components/data'
 import { RateTooltip } from '../../../components/ui/Tooltips'
 import './Identity.scss'
 import {
@@ -97,7 +97,7 @@ function Identity ({ identifier }) {
   }, [activeTab, router, pathname])
 
   return (
-    <div className={'identity'}>
+    <div className={'Identity'}>
         <Container
             maxW={'container.xl'}
             padding={3}
@@ -135,10 +135,24 @@ function Identity ({ identifier }) {
                                     <Td w={tdTitleWidth}>Identifier</Td>
                                     <Td isNumeric className={'Table__Cell--BreakWord'}>
                                         <LoadingLine loading={identity.loading}>
-                                            {identity.data?.identifier}
+                                          {identity.data?.identifier}
                                         </LoadingLine>
                                     </Td>
                                 </Tr>
+                                {identity?.data?.aliases?.length > 0 &&
+                                  <Tr>
+                                    <Td w={tdTitleWidth}>Names</Td>
+                                    <Td isNumeric className={'Table__Cell--BreakWord'}>
+                                      <LoadingLine loading={identity.loading}>
+                                        <div className={'IdentityInfo__AliasesContainer'}>
+                                        {identity?.data.aliases.map((alias, i) => (
+                                          <Alias key={i}>{alias}</Alias>
+                                        ))}
+                                        </div>
+                                      </LoadingLine>
+                                    </Td>
+                                  </Tr>
+                                }
                                 <Tr>
                                     <Td w={tdTitleWidth}>Balance</Td>
                                     <Td isNumeric>

diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.scss b/packages/frontend/src/app/identity/[identifier]/Identity.scss
@@ -1,29 +1,36 @@
 @use '../../../styles/mixins.scss';
 
 .IdentityInfo {
-    height: min-content;
+  height: min-content;
 
-    &__Avatar {
-        margin-left: auto;
-        width: 32px;
-        height: 32px;
-    }
+  &__Avatar {
+    margin-left: auto;
+    width: 32px;
+    height: 32px;
+  }
+
+  &__AliasesContainer {
+    max-height: 110px;
+    min-height: 21px;
+    height: 100%;
+    overflow-y: auto;
+  }
 }
 
 .IdentityData {
-    &__Tabs {
-        flex-wrap: wrap;
-    }
+  &__Tabs {
+    flex-wrap: wrap;
+  }
 
-    @media screen and (max-width: 530px) {
-        &__Tab {
-            width: 50%;
-        }
+  @media screen and (max-width: 530px) {
+    &__Tab {
+      width: 50%;
     }
+  }
 
-    @media screen and (max-width: 320px) {
-        &__Tab {
-            width: 100%;
-        }
+  @media screen and (max-width: 320px) {
+    &__Tab {
+      width: 100%;
     }
+  }
 }
diff --git a/packages/frontend/src/components/data/Alias.js b/packages/frontend/src/components/data/Alias.js
@@ -0,0 +1,22 @@
+import './Alias.scss'
+
+export default function Alias ({ children, className }) {
+  const dashIndex = children.lastIndexOf('.dash')
+
+  return (
+    <div className={`Alias ${className || ''}`}>
+      <span className={'Alias__Name'}>
+        {dashIndex !== -1
+          ? children.slice(0, dashIndex)
+          : children
+        }
+      </span>
+
+      {dashIndex !== -1 &&
+        <span className={'Alias__Domain'}>
+          {children.slice(dashIndex)}
+        </span>
+      }
+    </div>
+  )
+}
diff --git a/packages/frontend/src/components/data/Alias.scss b/packages/frontend/src/components/data/Alias.scss
@@ -0,0 +1,11 @@
+@use '../../styles/mixins.scss';
+@import '../../styles/variables.scss';
+
+.Alias {
+  font-family: $font-mono;
+  color: #fff;
+
+  &__Domain {
+    opacity: .5;
+  }
+}
diff --git a/packages/frontend/src/components/data/index.js b/packages/frontend/src/components/data/index.js
@@ -1,7 +1,9 @@
 import Identifier from './Identifier'
 import Credits from './Credits'
+import Alias from './Alias'
 
 export {
   Identifier,
-  Credits
+  Credits,
+  Alias
 }
diff --git a/packages/frontend/src/components/identities/IdentitiesList.js b/packages/frontend/src/components/identities/IdentitiesList.js
@@ -4,18 +4,18 @@ import './IdentitiesList.scss'
 
 function IdentitiesList ({ identities }) {
   return (
-        <div className={'IdentitiesList'}>
-            {identities.map((identity, key) =>
-                <IdentitiesListItem
-                    key={key}
-                    identity={identity}
-                />
-            )}
+    <div className={'IdentitiesList'}>
+      {identities.map((identity, key) =>
+        <IdentitiesListItem
+          key={key}
+          identity={identity}
+        />
+      )}
 
-            {identities.length === 0 &&
-                <EmptyListMessage>There are no identities created yet.</EmptyListMessage>
-            }
-        </div>
+      {identities.length === 0 &&
+        <EmptyListMessage>There are no identities created yet.</EmptyListMessage>
+      }
+    </div>
   )
 }
 

diff --git a/packages/frontend/src/components/identities/IdentitiesListItem.js b/packages/frontend/src/components/identities/IdentitiesListItem.js
@@ -1,27 +1,38 @@
 import Link from 'next/link'
 import ImageGenerator from '../imageGenerator'
+import { Identifier, Alias } from '../data'
 import './IdentitiesListItem.scss'
 
 function IdentitiesListItem ({ identity }) {
-  const { identifier, timestamp, isSystem } = identity
+  const { aliases, identifier, timestamp, isSystem } = identity
 
   return (
     <Link
-        href={`/identity/${identifier}`}
-        className={'IdentitiesListItem'}
+      href={`/identity/${identifier}`}
+      className={'IdentitiesListItem'}
     >
-        <div className={'IdentitiesListItem__IdentifierContainer'}>
-            <ImageGenerator className={'IdentitiesListItem__Avatar'} username={identifier} lightness={50} saturation={50} width={28} height={28}/>
-            <div className={'IdentitiesListItem__Identifier'}>{identifier}</div>
-        </div>
-
-        {isSystem && <div>SYSTEM</div>}
+      <div className={'IdentitiesListItem__IdentifierContainer'}>
+        <ImageGenerator className={'IdentitiesListItem__Avatar'} username={identifier} lightness={50} saturation={50} width={28} height={28}/>
 
-        {(typeof timestamp === 'string') &&
-            <div className={'IdentitiesListItem__Timestamp'}>
-                {new Date(timestamp).toLocaleString()}
-            </div>
+        {aliases?.length
+          ? <Alias className={'IdentitiesListItem__Alias'}>{aliases[0]}</Alias>
+          : <Identifier
+              className={'IdentitiesListItem__Identifier'}
+              copyButton={true}
+              styles={['highlight-both']}
+            >
+              {identifier}
+            </Identifier>
         }
+      </div>
+
+      {isSystem && <div>SYSTEM</div>}
+
+      {(typeof timestamp === 'string') &&
+        <div className={'IdentitiesListItem__Timestamp'}>
+          {new Date(timestamp).toLocaleString()}
+        </div>
+      }
     </Link>
   )
 }

diff --git a/packages/frontend/src/components/identities/IdentitiesListItem.scss b/packages/frontend/src/components/identities/IdentitiesListItem.scss
@@ -2,31 +2,35 @@
 @import '../../styles/variables.scss';
 
 .IdentitiesListItem {
-    @include mixins.DefListItem;
+  @include mixins.DefListItem;
 
-    justify-content: space-between;
+  justify-content: space-between;
 
-    &__Identifier {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        margin-right: 16px;
-    }    
+  &__Identifier, &__Alias {
+    font-size: 0.75rem;
+    margin-right: 16px;
+  }
+
+  &__Alias {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
 
-    &__Timestamp {
-        white-space: nowrap;
-    }
+  &__Timestamp {
+    white-space: nowrap;
+  }
 
-    @media screen and (max-width: $breakpoint-sm) {
-        flex-wrap: wrap;
+  @media screen and (max-width: $breakpoint-sm) {
+    flex-wrap: wrap;
 
-        &__Identifier {
-            width: 100%;
-            margin-right: 0;
-        }
+    &__Identifier {
+      width: 100%;
+      margin-right: 0;
+    }
 
-        &__Timestamp {
-            white-space: wrap;
-        }
+    &__Timestamp {
+      white-space: wrap;
     }
+  }
 }
diff --git a/packages/frontend/src/components/identities/IdentityCard.scss b/packages/frontend/src/components/identities/IdentityCard.scss
@@ -17,6 +17,7 @@
     display: flex;
     align-items: center;
     overflow: hidden;
+    flex-grow: 1;
   }
 
   &__Alias {

diff --git a/packages/frontend/src/components/ui/lists/index.js b/packages/frontend/src/components/ui/lists/index.js
@@ -4,7 +4,7 @@ import { forwardRef } from 'react'
 import { Container } from '@chakra-ui/react'
 import ImageGenerator from '../../imageGenerator'
 import ListColumnsHeader from './ListColumnsHeader'
-import { Credits, Identifier } from '../../data'
+import { Credits, Identifier, Alias } from '../../data'
 import { RateTooltip } from '../Tooltips'
 import { creditsToDash } from '../../../util'
 
@@ -37,6 +37,7 @@ function SimpleListItem ({ item }) {
       )
     }
     if (column.format === 'identifier') return <Identifier styles={['highlight-both']} copyButton={true}>{children}</Identifier>
+    if (column.format === 'alias') return <Alias>{children}</Alias>
     return <span>{children}</span>
   }
 
@@ -87,7 +88,7 @@ function SimpleListItem ({ item }) {
                   {column?.avatar &&
                     <ImageGenerator
                       className={'SimpleListItem__Avatar'}
-                      username={column.value}
+                      username={column.avatarSource || column.value}
                       lightness={50}
                       saturation={50}
                       width={15}