Merge branch '461-implement-styled-component-for-version-display-base…

…d-on-figma-design' into 'dev' Resolve "Implement Styled Component for Version Display Based on Figma Design" Closes #461 See merge request ergo/rosen-bridge/ui!384
rosen-bridge · Dec 23, 2024 · 899511a · 899511a
2 parents fc388e2 + d8fc7c8
commit 899511a
Show file tree

Hide file tree

Showing 8 changed files with 159 additions and 95 deletions.
diff --git a/.changeset/lucky-jeans-sing.md b/.changeset/lucky-jeans-sing.md
@@ -0,0 +1,5 @@
+---
+'@rosen-bridge/ui-kit': patch
+---
+
+Implement Version component to display versions
diff --git a/.changeset/poor-trains-help.md b/.changeset/poor-trains-help.md
@@ -0,0 +1,7 @@
+---
+'@rosen-bridge/watcher-app': patch
+'@rosen-bridge/guard-app': patch
+'@rosen-bridge/rosen-app': patch
+---
+
+Integrated the Version component in the SideBar to display version information optimized for both desktop and mobile views.
diff --git a/apps/guard/app/SideBar.tsx b/apps/guard/app/SideBar.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
+import { useMemo, useState } from 'react';
 
 import {
   BitcoinCircle,
@@ -14,6 +15,7 @@ import {
   AppLogo,
   NavigationBar,
   NavigationButton,
+  Version,
 } from '@rosen-bridge/ui-kit';
 
 import packageJson from '../package.json';
@@ -62,28 +64,25 @@ export const SideBar = () => {
 
   const { data: info, isLoading } = useInfo();
 
-  const versions = [
-    {
-      title: 'Guard',
-      value: info?.versions.app,
-      important: true,
-    },
-    {
-      title: 'UI',
-      value: packageJson.version,
-    },
-    {
-      title: 'Contract',
-      value: info?.versions.contract,
-    },
-  ];
-
-  if (!isLoading && info?.versions.contract !== info?.versions.tokensMap) {
-    versions.push({
-      title: 'Tokens',
-      value: info?.versions.tokensMap,
-    });
-  }
+  const sub = useMemo(() => {
+    const result = [
+      {
+        label: 'UI',
+        value: packageJson.version,
+      },
+      {
+        label: 'Contract',
+        value: info?.versions.contract,
+      },
+    ];
+    if (!isLoading && info?.versions.contract !== info?.versions.tokensMap) {
+      result.push({
+        label: 'Tokens',
+        value: info?.versions.tokensMap,
+      });
+    }
+    return result;
+  }, [info, isLoading]);
 
   return (
     <AppBar
@@ -97,7 +96,7 @@ export const SideBar = () => {
           />
         </Link>
       }
-      versions={versions}
+      versions={<Version label="Guard" value={info?.versions.app} sub={sub} />}
       navigationBar={
         <NavigationBar>
           {routes.map((route) => (

diff --git a/apps/rosen/app/SideBar.tsx b/apps/rosen/app/SideBar.tsx
@@ -13,6 +13,7 @@ import {
   AppLogo,
   NavigationBar,
   NavigationButton,
+  Version,
 } from '@rosen-bridge/ui-kit';
 
 import packageJson from '../package.json';
@@ -71,12 +72,7 @@ export const SideBar = () => {
           />
         </Link>
       }
-      versions={[
-        {
-          title: 'UI',
-          value: packageJson.version,
-        },
-      ]}
+      versions={<Version label="UI" value={packageJson.version} />}
       navigationBar={
         <NavigationBar>
           {routes.map((route) => (

diff --git a/apps/watcher/app/SideBar.tsx b/apps/watcher/app/SideBar.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
+import { useMemo, useState } from 'react';
 
 import {
   Estate,
@@ -13,6 +14,7 @@ import {
   AppLogo,
   NavigationBar,
   NavigationButton,
+  Version,
 } from '@rosen-bridge/ui-kit';
 
 import packageJson from '../package.json';
@@ -55,28 +57,25 @@ export const SideBar = () => {
 
   const { data: info, isLoading } = useInfo();
 
-  const versions = [
-    {
-      title: 'Watcher',
-      value: info?.versions.app,
-      important: true,
-    },
-    {
-      title: 'UI',
-      value: packageJson.version,
-    },
-    {
-      title: 'Contract',
-      value: info?.versions.contract,
-    },
-  ];
-
-  if (!isLoading && info?.versions.contract !== info?.versions.tokensMap) {
-    versions.push({
-      title: 'Tokens',
-      value: info!.versions.tokensMap,
-    });
-  }
+  const sub = useMemo(() => {
+    const result = [
+      {
+        label: 'UI',
+        value: packageJson.version,
+      },
+      {
+        label: 'Contract',
+        value: info?.versions.contract,
+      },
+    ];
+    if (!isLoading && info?.versions.contract !== info?.versions.tokensMap) {
+      result.push({
+        label: 'Tokens',
+        value: info!.versions.tokensMap,
+      });
+    }
+    return result;
+  }, [info, isLoading]);
 
   return (
     <AppBar
@@ -90,7 +89,9 @@ export const SideBar = () => {
           />
         </Link>
       }
-      versions={versions}
+      versions={
+        <Version label="Watcher" value={info?.versions.app} sub={sub} />
+      }
       navigationBar={
         <NavigationBar>
           {routes.map((route) => (

diff --git a/packages/ui-kit/src/components/common/AppBar.tsx b/packages/ui-kit/src/components/common/AppBar.tsx
@@ -1,20 +1,14 @@
 import { FC, ReactNode } from 'react';
 
 import { styled } from '../../styling';
-import { Box, CircularProgress, Typography } from '../base';
+import { Box } from '../base';
 
 interface AppBarProps {
   logo?: ReactNode;
-  versions?: Version[];
+  versions?: ReactNode;
   navigationBar?: ReactNode;
 }
 
-interface Version {
-  important?: boolean;
-  title: string;
-  value?: string;
-}
-
 const Root = styled(Box)(({ theme }) => ({
   position: 'relative',
   padding: theme.spacing(2) + ' 0',
@@ -30,49 +24,16 @@ const Root = styled(Box)(({ theme }) => ({
   },
 }));
 
-const Versions = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  [theme.breakpoints.down('tablet')]: {
-    flexDirection: 'row',
-    justifyContent: 'start',
-    position: 'absolute',
-    left: '46px',
-    top: '32px',
-    gap: theme.spacing(1),
-  },
-}));
-
 /**
  * renders a appBar wrapper
  * this component set the appBar size and orientation in different screen sizes
  */
-export const AppBar: FC<AppBarProps> = ({
-  logo,
-  versions = [],
-  navigationBar,
-}) => {
-  const loadingVersions = versions.every((version) => version.value);
+export const AppBar: FC<AppBarProps> = ({ logo, versions, navigationBar }) => {
   return (
     <Root>
       {logo}
       {navigationBar}
-      <Versions>
-        {loadingVersions ? (
-          versions.map((version) => (
-            <Typography
-              key={version.title}
-              color={version.important ? 'textPrimary' : 'textSecondary'}
-              variant={version.important ? 'body2' : 'subtitle2'}
-            >
-              {version.title} v{version.value}
-            </Typography>
-          ))
-        ) : (
-          <CircularProgress sx={{ mt: 0.5 }} size={8} />
-        )}
-      </Versions>
+      {versions}
     </Root>
   );
 };
diff --git a/packages/ui-kit/src/components/common/Version.tsx b/packages/ui-kit/src/components/common/Version.tsx
@@ -0,0 +1,94 @@
+import React, { FC, useEffect, useMemo, useRef, useState } from 'react';
+
+import { useIsMobile } from '../../hooks';
+import { styled } from '../../styling';
+import { CircularProgress } from '../base';
+
+interface VersionProps {
+  label: string;
+  value?: string;
+  sub?: Array<{ label: string; value?: string }>;
+}
+
+const Root = styled('div', {
+  name: 'RosenVersion',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root,
+})(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'start',
+  fontWeight: '400px',
+  fontSize: '12px',
+  lineHeight: '14.06px',
+  color: theme.palette.text.secondary,
+  [theme.breakpoints.down('tablet')]: {
+    flexDirection: 'row',
+    justifyContent: 'start',
+    position: 'absolute',
+    left: '46px',
+    top: '32px',
+    lineHeight: '12px',
+    gap: theme.spacing(1),
+  },
+}));
+
+export const Version: FC<VersionProps> = ({ label, value, sub }) => {
+  const $timeout = useRef<number>();
+
+  const isMobile = useIsMobile();
+
+  const [timeout, setTimeout] = useState(false);
+
+  const loaded = useMemo(() => {
+    if (sub) {
+      return !!value && !!sub.every((item) => !!item.value);
+    } else {
+      return !!value;
+    }
+  }, [value, sub]);
+
+  const isLoading = !(loaded || timeout);
+
+  useEffect(() => {
+    clearTimeout($timeout.current);
+    $timeout.current = window.setTimeout(() => {
+      setTimeout(true);
+    }, 15000);
+    return () => {
+      clearTimeout($timeout.current);
+    };
+  }, [value, sub]);
+
+  return (
+    <Root>
+      {isLoading ? (
+        <CircularProgress sx={{ mt: 0.5 }} size={8} />
+      ) : (
+        <>
+          <span>
+            {label} v{value || '?'}
+          </span>
+          {isMobile && sub ? (
+            <span>
+              (
+              {sub
+                ?.map((item) => `${item.label} v${item.value || '?'}`)
+                .join(', ')}
+              )
+            </span>
+          ) : (
+            <>
+              {sub?.map((item) => (
+                <span key={item.label}>
+                  {item.label} v{item.value || '?'}
+                </span>
+              ))}
+            </>
+          )}
+        </>
+      )}
+    </Root>
+  );
+};
diff --git a/packages/ui-kit/src/components/common/index.ts b/packages/ui-kit/src/components/common/index.ts
@@ -14,6 +14,7 @@ export * from './HealthParamCardSkeleton';
 export * from './Id';
 export * from './NavigationBar';
 export * from './NavigationButton';
+export * from './Version';
 export * from './QrCodeModal';
 export * from './SuccessfulCopySnackbar';
 export * from './SubmitButton';