Merge pull request #391 from pshenmic/feat/alias-status

Update Aliases status
pshenmic · Dec 27, 2024 · 52c2721 · 52c2721
2 parents 7b85eef + c406353
commit 52c2721
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 11 deletions.
diff --git a/packages/frontend/src/components/data/Alias.js b/packages/frontend/src/components/data/Alias.js
@@ -1,23 +1,33 @@
 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 }) {
   alias = alias || children
   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
@@ -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
@@ -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',