Improve Identity page

packages/frontend/src/app/dataContracts/DataContracts.js

@@ -85,7 +85,7 @@ function DataContractsLayout ({ defaultPage = 1, defaultPageSize }) {
 
             {!dataContracts.loading
               ? !dataContracts.error
-                  ? <DataContractsList dataContracts={dataContracts.data.resultSet} size={'l'}/>
+                  ? <DataContractsList dataContracts={dataContracts.data.resultSet}/>
                   : <Container h={20}><ErrorMessageBlock/></Container>
               : <LoadingList itemsCount={pageSize}/>}
 

packages/frontend/src/app/identity/[identifier]/Identity.scss

@@ -1,41 +1,13 @@
 @use '../../../styles/mixins.scss';
+@import '../../../styles/variables.scss';
 
-.IdentityInfo {
-  height: min-content;
-
-  &__Avatar {
-    margin-left: auto;
-    width: 32px;
-    height: 32px;
-  }
-
-  &__AliasesContainer {
-    max-height: 110px;
-    min-height: 21px;
-    height: 100%;
-    overflow-y: auto;
+.IdentityPage {
+  &__CommonInfo {
+    margin-bottom: 24px;
   }
 
   &__Alias {
     width: max-content;
     margin-left: auto;
   }
 }
-
-.IdentityData {
-  &__Tabs {
-    flex-wrap: wrap;
-  }
-
-  @media screen and (max-width: 530px) {
-    &__Tab {
-      width: 50%;
-    }
-  }
-
-  @media screen and (max-width: 320px) {
-    &__Tab {
-      width: 100%;
-    }
-  }
-}

packages/frontend/src/app/transaction/[hash]/TransactionPage.js

@@ -14,16 +14,26 @@ import { Badge } from '@chakra-ui/react'
 import { TypeBadge, FeeMultiplier } from '../../../components/transactions'
 import { ErrorMessageBlock } from '../../../components/Errors'
 import { networks } from '../../../constants/networks'
+import { useBreadcrumbs } from '../../../contexts/BreadcrumbsContext'
 import './TransactionPage.scss'
 
 function Transaction ({ hash }) {
+  const { setBreadcrumbs } = useBreadcrumbs()
   const [transaction, setTransaction] = useState({ data: {}, loading: true, error: false })
   const [rate, setRate] = useState({ data: {}, loading: true, error: false })
   const [decodedST, setDecodedST] = useState({ data: {}, loading: true, error: false })
   const baseUrl = process.env.NEXT_PUBLIC_BASE_URL
   const activeNetwork = networks.find(network => network.explorerBaseUrl === baseUrl)
   const l1explorerBaseUrl = activeNetwork?.l1explorerBaseUrl || null
 
+  useEffect(() => {
+    setBreadcrumbs([
+      { label: 'Home', path: '/' },
+      { label: 'Transactions', path: '/identities' },
+      { label: hash }
+    ])
+  }, [setBreadcrumbs, hash])
+
   const decodeTx = useCallback((tx) => {
     Api.decodeTx(tx)
       .then(stateTransition => fetchHandlerSuccess(setDecodedST, stateTransition))

packages/frontend/src/app/validator/[hash]/Validator.js

@@ -253,7 +253,7 @@ function Validator ({ hash }) {
                       {validator.data?.lastProposedBlockHeader?.timestamp &&
                         <DateBlock
                           timestamp={validator.data.lastProposedBlockHeader.timestamp}
-                          format={'delta-only'}
+                          format={'deltaOnly'}
                         />
                       }
                       <Identifier ellipsis={false} styles={['highlight-both']}>
@@ -279,7 +279,7 @@ function Validator ({ hash }) {
                   <Link href={`/transaction/${validator.data?.lastWithdrawal}`}>
                     <ValueContainer className={'ValidatorPage__ValueContainer'} clickable={true}>
                       {validator.data?.lastWithdrawalTime &&
-                        <DateBlock timestamp={validator.data.lastWithdrawalTime} format={'delta-only'}/>}
+                        <DateBlock timestamp={validator.data.lastWithdrawalTime} format={'deltaOnly'}/>}
                       <Identifier ellipsis={false} styles={['highlight-both']}>
                         {validator.data?.lastWithdrawal}
                       </Identifier>

packages/frontend/src/app/validator/[hash]/ValidatorPage.scss

@@ -99,13 +99,13 @@
     }
   }
 
-  &__InfoLine {
-    margin-bottom: 14px;
+    &__InfoLine {
+      margin-bottom: 14px;
 
-    .DateBlock {
-      justify-content: flex-end;
+      .DateBlock__InfoContainer {
+        justify-content: flex-end;
+      }
     }
-  }
 
   &__ValueContainer {
     display: flex;
@@ -129,12 +129,17 @@
     }
 
     .PageDataContainer__Content {
-      padding: 0;
       border-radius: 0;
       background: transparent;
     }
   }
 
+  @media screen and (min-width: 421px) and (max-width: $breakpoint-lg) {
+    .PageDataContainer__Content {
+      padding: 0 !important;
+    }
+  }
+
   @media screen and (min-width: $breakpoint-lg) and (max-width: 1100px) {
     &__ListPagination {
       .PageLink {
@@ -147,4 +152,10 @@
       }
     }
   }
+
+  @media screen and (max-width: 420px) {
+    .PageDataContainer__Content {
+      padding-bottom: 0 !important;
+    }
+  }
 }

packages/frontend/src/components/breadcrumbs/Breadcrumbs.js

@@ -21,16 +21,15 @@ const Breadcrumbs = () => {
     <div className={'Breadcrumbs'}>
       <ul className={'Breadcrumbs__LinksContainer'}>
         {breadcrumbs.map((link, i) => (
-          <>
-            <li className={'Breadcrumbs__Link'}>
-              <LinkContainer href={i !== breadcrumbs.length - 1 ? link.path : null} key={i}>
-                {link.avatar &&
-                  <ImageGenerator className={'Breadcrumbs__Avatar'} username={link.label} lightness={50} saturation={50} width={16} height={16} />}
-                {link.label}
-              </LinkContainer>
-            </li>
+          <li className={'Breadcrumbs__Link'} key={i}>
+            <LinkContainer href={i !== breadcrumbs.length - 1 ? link.path : null} key={i}>
+              {link.avatar &&
+                <ImageGenerator className={'Breadcrumbs__Avatar'} username={link.label} lightness={50} saturation={50} width={16} height={16} />}
+              {link.label}
+            </LinkContainer>
+
             {i !== breadcrumbs.length - 1 && <div className={'Breadcrumbs__Separator'}><ChevronIcon color={'brand.normal'}/></div>}
-          </>
+          </li>
         ))}
       </ul>
     </div>

packages/frontend/src/components/breadcrumbs/Breadcrumbs.scss

@@ -17,6 +17,8 @@
 
   &__Link {
     margin: 0;
+    display: flex;
+    align-items: center;
 
     a, span {
       display: flex;

packages/frontend/src/components/cards/ValueCard.js

@@ -7,10 +7,25 @@ const Wrapper = (props) => {
     : <div onMouseMove={props.onMouseMove} className={props.className}>{props.children}</div>
 }
 
-export default function ValueCard ({ link, loading, children, className }) {
+export default function ValueCard ({ link, loading, colorScheme = 'default', size = 'default', children, className }) {
+  const colorClasses = {
+    default: '',
+    transparent: 'ValueCard--BgTransparent'
+  }
+
+  const sizeClasses = {
+    default: '',
+    sm: 'ValueCard--SizeSm'
+  }
+
+  let extraClass = ''
+  if (link) extraClass += 'ValueCard--Clickable'
+  extraClass += ' ' + colorClasses?.[colorScheme] || colorClasses.default
+  extraClass += ' ' + sizeClasses?.[size] || sizeClasses.default
+
   return (
     <Wrapper
-      className={`ValueCard ${className || ''} ${loading ? 'ValueCard--Loading' : ''} ${link ? 'ValueCard--Clickable' : ''}`}
+      className={`ValueCard ${className || ''} ${loading ? 'ValueCard--Loading' : ''} ${extraClass || ''}`}
       link={link}
     >
       {children}

packages/frontend/src/components/cards/ValueCard.scss

@@ -14,6 +14,16 @@
     @include mixins.LoadingLine();
   }
 
+  &--SizeSm {
+    padding: 5px 10px;
+    line-height: 14px;
+    border-radius: 4px;
+  }
+
+  &--BgTransparent {
+    background: transparent;
+  }
+
   &--Clickable {
     @media (hover: hover) and (pointer: fine) {
       &:hover {

packages/frontend/src/components/data/Alias.js

@@ -1,5 +1,6 @@
-import './Alias.scss'
 import { Tooltip } from '../ui/Tooltips'
+import { ErrorIcon } from '../ui/icons'
+import './Alias.scss'
 
 export default function Alias ({ alias, status, children, ellipsis = true, className }) {
   alias = alias || children
@@ -29,6 +30,8 @@ export default function Alias ({ alias, status, children, ellipsis = true, class
             {alias?.slice(dashIndex)}
           </span>
         }
+
+        {status === 'locked' && <ErrorIcon className={'Alias__LockedIcon'}/>}
       </div>
     </Container>
   )

packages/frontend/src/components/data/Alias.scss

@@ -15,9 +15,23 @@
 
   &--Locked {
     color: var(--chakra-colors-red-default);
+    text-decoration: line-through
+  }
+
+  &--Locked & {
+    &__Domain {
+      opacity: 1;
+    }
   }
 
   &__Domain {
     opacity: .5;
   }
-}
+
+  &__LockedIcon {
+    display: inline-block;
+    width: 18px !important;
+    height: 18px !important;
+    margin-left: 8px;
+  }
+}

packages/frontend/src/components/data/AliasesList.js

@@ -0,0 +1,45 @@
+'use client'
+
+import { useState } from 'react'
+import { Alias, DateBlock } from './index'
+import { Button } from '@chakra-ui/react'
+import { ChevronIcon } from '../ui/icons'
+import { SmoothSize } from '../ui/containers'
+import './AliasesList.scss'
+
+function AliasesList ({ aliases = [], smallCount = 5 }) {
+  const [showAll, setShowAll] = useState(false)
+
+  const filteredArray = showAll
+    ? aliases
+    : aliases.filter((item, i) => i < smallCount)
+
+  return (
+    <div className={'AliasesList'}>
+      <SmoothSize className={'AliasesList__SmoothSize'}>
+        <div className={'AliasesList__ItemsContainer'}>
+          {filteredArray?.map((alias, i) => (
+            <div className={'AliasesList__Item'} key={i}>
+              <Alias status={i % 2 === 0 ? alias.status : 'locked'} ellipsis={false} key={i}>{alias.alias}</Alias>
+              <DateBlock timestamp={1233123333332} format={'deltaOnly'}/>
+            </div>
+          ))}
+        </div>
+      </SmoothSize>
+
+      {aliases.length > smallCount &&
+        <Button
+          onClick={() => setShowAll(!showAll)}
+          className={'AliasesList__ShowMoreButton'}
+          size={'sm'}
+          variant={showAll ? 'gray' : 'blue'}
+        >
+          {showAll ? 'Show less' : 'Show more'}
+          <ChevronIcon ml={'4px'} h={'10px'} w={'10px'} transform={`rotate(${showAll ? '-90deg' : '90deg'})`}/>
+        </Button>
+      }
+    </div>
+  )
+}
+
+export default AliasesList

packages/frontend/src/components/data/AliasesList.scss

@@ -0,0 +1,33 @@
+@use '../../styles/mixins';
+@import '../../styles/variables';
+
+.AliasesList {
+  &, &__ItemsContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    gap: 0.25rem;
+  }
+
+  &__Item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    justify-content: flex-end;
+    max-width: 100%;
+  }
+
+  &__ShowMoreButton {
+    width: max-content;
+    font-weight: 500 !important;
+    text-transform: capitalize !important;
+
+    svg {
+      transition: .2s;
+    }
+  }
+
+  &__SmoothSize {
+    max-width: 100%;
+  }
+}