From c406353066bd3ec8ba70375d5df9ee8b5dc55d10 Mon Sep 17 00:00:00 2001
From: Alexey <andreewsky.alexey@gmail.com>
Date: Fri, 27 Dec 2024 17:45:08 +0300
Subject: [PATCH] Add 'pending' status render to Alias component

---
 .../frontend/src/components/data/Alias.js     | 32 ++++++++++++-------
 .../frontend/src/components/data/Alias.scss   |  4 +++
 packages/frontend/src/styles/theme.js         |  4 +++
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/src/components/data/Alias.js b/packages/frontend/src/components/data/Alias.js
index dc237b806..13acacb2b 100644
--- a/packages/frontend/src/components/data/Alias.js
+++ b/packages/frontend/src/components/data/Alias.js
@@ -1,5 +1,5 @@
 import { Tooltip } from '../ui/Tooltips'
-import { ErrorIcon } from '../ui/icons'
+import { ErrorIcon, QueuedIcon } from '../ui/icons'
 import './Alias.scss'
 
 export default function Alias ({ alias, status, children, ellipsis = true, className }) {
@@ -7,17 +7,27 @@ export default function Alias ({ alias, status, children, ellipsis = true, class
   if (typeof alias !== 'string') return <></>
 
   const dashIndex = alias?.lastIndexOf('.dash')
-  const statusClass = status === 'locked' ? 'Alias--Locked' : ''
 
-  const Container = ({ children }) => (
-    status === 'locked'
-      ? <Tooltip content={'Alias is locked'} placement={'top'}>{children}</Tooltip>
-      : <>{children}</>
-  )
+  const statusClasses = {
+    locked: 'Alias--Locked',
+    pending: 'Alias--Pending'
+  }
+
+  const StatusIcon = (props) => {
+    if (status === 'pending') return <QueuedIcon {...props}/>
+    if (status === 'locked') return <ErrorIcon {...props}/>
+    return null
+  }
+
+  const titles = {
+    ok: 'Alias is owned',
+    locked: 'Alias is locked',
+    pending: 'Alias is pending'
+  }
 
   return (
-    <Container>
-      <div className={`Alias ${statusClass} ${ellipsis ? 'Alias--Ellipsis' : ''}  ${className || ''}`}>
+    <Tooltip content={titles?.[status]} placement={'top'}>
+      <div className={`Alias ${statusClasses?.[status] || ''} ${ellipsis ? 'Alias--Ellipsis' : ''}  ${className || ''}`}>
         <span className={'Alias__Name'}>
           {dashIndex !== -1
             ? alias?.slice(0, dashIndex)
@@ -31,8 +41,8 @@ export default function Alias ({ alias, status, children, ellipsis = true, class
           </span>
         }
 
-        {status === 'locked' && <ErrorIcon className={'Alias__LockedIcon'}/>}
+        <StatusIcon className={'Alias__LockedIcon'}/>
       </div>
-    </Container>
+    </Tooltip>
   )
 }
diff --git a/packages/frontend/src/components/data/Alias.scss b/packages/frontend/src/components/data/Alias.scss
index 9f96c7e82..3691240be 100644
--- a/packages/frontend/src/components/data/Alias.scss
+++ b/packages/frontend/src/components/data/Alias.scss
@@ -13,6 +13,10 @@
     white-space: nowrap;
   }
 
+  &--Pending {
+    color: var(--chakra-colors-orange-default);
+  }
+
   &--Locked {
     color: var(--chakra-colors-red-default);
     text-decoration: line-through
diff --git a/packages/frontend/src/styles/theme.js b/packages/frontend/src/styles/theme.js
index 1da2eba95..113668d4f 100644
--- a/packages/frontend/src/styles/theme.js
+++ b/packages/frontend/src/styles/theme.js
@@ -108,6 +108,10 @@ export const theme = extendTheme({
       emeralds: '#58F4BC',
       'emeralds-rgb': '88, 244, 188'
     },
+    orange: {
+      default: '#f49a58',
+      'default-rgb': '244, 154, 88'
+    },
     gray: {
       50: '#f0f1f2',
       100: '#e0e3e5',