Merge pull request #315 from pshenmic/feat/display-new-aliases-format

Update alias display for new format
pshenmic · Nov 17, 2024 · eba7304 · eba7304
2 parents dae2d34 + 3a0ab96
commit eba7304
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 14 deletions.
diff --git a/packages/frontend/src/app/home/Home.js b/packages/frontend/src/app/home/Home.js
@@ -191,13 +191,13 @@ function Home () {
                         .map((identitiy, i) => ({
                           columns: [
                             {
-                              value: identitiy?.aliases?.[0] || identitiy.identifier,
+                              value: identitiy?.aliases?.[0]?.alias || identitiy.identifier,
                               avatar: true,
                               avatarSource: identitiy.identifier,
                               mono: true,
-                              dim: !identitiy?.aliases?.[0],
+                              dim: !identitiy?.aliases?.[0]?.alias,
                               ellipsis: true,
-                              format: identitiy?.aliases?.[0] ? 'alias' : 'identifier'
+                              format: identitiy?.aliases?.[0]?.alias ? 'alias' : 'identifier'
                             },
                             {
                               value: identitiy.totalTxs,
@@ -230,13 +230,13 @@ function Home () {
                         .map((identitiy, i) => ({
                           columns: [
                             {
-                              value: identitiy?.aliases?.[0] || identitiy.identifier,
+                              value: identitiy?.aliases?.[0]?.alias || identitiy.identifier,
                               avatar: true,
                               avatarSource: identitiy.identifier,
                               mono: true,
-                              dim: !identitiy?.aliases?.[0],
+                              dim: !identitiy?.aliases?.[0]?.alias,
                               ellipsis: true,
-                              format: identitiy?.aliases?.[0] ? 'alias' : 'identifier'
+                              format: identitiy?.aliases?.[0]?.alias ? '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
@@ -146,7 +146,7 @@ function Identity ({ identifier }) {
                                       <LoadingLine loading={identity.loading}>
                                         <div className={'IdentityInfo__AliasesContainer'}>
                                         {identity?.data.aliases.map((alias, i) => (
-                                          <Alias key={i}>{alias}</Alias>
+                                          <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
@@ -1,20 +1,23 @@
 import './Alias.scss'
 
-export default function Alias ({ children, ellipsis = true, className }) {
-  const dashIndex = children.lastIndexOf('.dash')
+export default function Alias ({ alias, children, ellipsis = true, className }) {
+  alias = alias || children
+  if (typeof alias !== 'string') return <></>
+
+  const dashIndex = alias?.lastIndexOf('.dash')
 
   return (
     <div className={`Alias ${ellipsis ? 'Alias--Ellipsis' : ''}  ${className || ''}`}>
       <span className={'Alias__Name'}>
         {dashIndex !== -1
-          ? children.slice(0, dashIndex)
-          : children
+          ? alias?.slice(0, dashIndex)
+          : alias
         }
       </span>
 
       {dashIndex !== -1 &&
         <span className={'Alias__Domain'}>
-          {children.slice(dashIndex)}
+          {alias?.slice(dashIndex)}
         </span>
       }
     </div>

diff --git a/packages/frontend/src/components/identities/Cards.js b/packages/frontend/src/components/identities/Cards.js
@@ -22,7 +22,7 @@ function IdentityCard ({ identity, rate, loading = false }) {
                         <ImageGenerator username={identity.identifier} lightness={50} saturation={50} width={42} height={42} />
                       </div>
                       <div className={'IdentityCard__Alias'}>{identity?.aliases?.length
-                        ? <Alias>{identity.aliases[0]}</Alias>
+                        ? <Alias alias={identity?.aliases[0]?.alias}/>
                         : <Identifier styles={['highlight-both']}>{identity.identifier}</Identifier>}
                       </div>
                   </div>

diff --git a/packages/frontend/src/components/identities/IdentitiesListItem.js b/packages/frontend/src/components/identities/IdentitiesListItem.js
@@ -15,7 +15,7 @@ function IdentitiesListItem ({ identity }) {
         <ImageGenerator className={'IdentitiesListItem__Avatar'} username={identifier} lightness={50} saturation={50} width={28} height={28}/>
 
         {aliases?.length
-          ? <Alias className={'IdentitiesListItem__Alias'}>{aliases[0]}</Alias>
+          ? <Alias className={'IdentitiesListItem__Alias'} alias={aliases[0]?.alias}/>
           : <Identifier
               className={'IdentitiesListItem__Identifier'}
               copyButton={true}