From 4cb62e4b484fe0b1e7be33e30cfa7a598aeab9f8 Mon Sep 17 00:00:00 2001 From: ALI-HUP Date: Sat, 2 Nov 2024 15:34:27 +0330 Subject: [PATCH 1/6] fix: unified loading circles across app version, UI and contract --- .changeset/swift-paws-fail.md | 6 +++++ apps/guard/app/SideBar.tsx | 48 ++++++++++++++++++++++------------- apps/watcher/app/SideBar.tsx | 48 ++++++++++++++++++++++------------- 3 files changed, 68 insertions(+), 34 deletions(-) create mode 100644 .changeset/swift-paws-fail.md diff --git a/.changeset/swift-paws-fail.md b/.changeset/swift-paws-fail.md new file mode 100644 index 00000000..70b18e91 --- /dev/null +++ b/.changeset/swift-paws-fail.md @@ -0,0 +1,6 @@ +--- +'@rosen-bridge/watcher-app': patch +'@rosen-bridge/guard-app': patch +--- + +Unified loading circles for app version, UI and contract at the bottom of the sidebar component diff --git a/apps/guard/app/SideBar.tsx b/apps/guard/app/SideBar.tsx index 1908c251..78108e35 100644 --- a/apps/guard/app/SideBar.tsx +++ b/apps/guard/app/SideBar.tsx @@ -10,6 +10,7 @@ import { ClipboardNotes, } from '@rosen-bridge/icons'; import { AppBar, AppLogo } from '@rosen-bridge/ui-kit'; +import { Grid, CircularProgress, Box } from '@mui/material'; import useInfo from './_hooks/useInfo'; @@ -25,23 +26,28 @@ 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, - }, - ]; + const ShowLoading = + isLoading || !info?.versions.app || !info?.versions.contract; - if (!isLoading && info?.versions.contract !== info?.versions.tokensMap) { + const versions = !ShowLoading + ? [ + { + title: 'Guard', + value: info?.versions.app, + important: true, + }, + { + title: 'UI', + value: packageJson.version, + }, + { + title: 'Contract', + value: info?.versions.contract, + }, + ] + : []; + + if (!ShowLoading && info?.versions.contract !== info?.versions.tokensMap) { versions.push({ title: 'Tokens', value: info?.versions.tokensMap, @@ -96,6 +102,14 @@ export const SideBar = () => { ]} isActive={(route) => pathname === route.path} onNavigate={(route) => router.push(route.path)} - /> + > + {ShowLoading && ( + + + + + + )} + ); }; diff --git a/apps/watcher/app/SideBar.tsx b/apps/watcher/app/SideBar.tsx index ffd16161..e29e1d58 100644 --- a/apps/watcher/app/SideBar.tsx +++ b/apps/watcher/app/SideBar.tsx @@ -10,6 +10,7 @@ import { } from '@rosen-bridge/icons'; import { AppBar, AppLogo } from '@rosen-bridge/ui-kit'; +import { Grid, CircularProgress, Box } from '@mui/material'; import useInfo from './_hooks/useInfo'; import packageJson from '../package.json'; @@ -24,23 +25,28 @@ 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, - }, - ]; + const ShowLoading = + isLoading || !info?.versions.app || !info?.versions.contract; - if (!isLoading && info?.versions.contract !== info?.versions.tokensMap) { + const versions = !ShowLoading + ? [ + { + title: 'Watcher', + value: info?.versions.app, + important: true, + }, + { + title: 'UI', + value: packageJson.version, + }, + { + title: 'Contract', + value: info?.versions.contract, + }, + ] + : []; + + if (!ShowLoading && info?.versions.contract !== info?.versions.tokensMap) { versions.push({ title: 'Tokens', value: info!.versions.tokensMap, @@ -89,6 +95,14 @@ export const SideBar = () => { ]} isActive={(route) => pathname === route.path} onNavigate={(route) => router.push(route.path)} - /> + > + {ShowLoading && ( + + + + + + )} + ); }; From 1d63647962b89291256040f7f28092efd576d366 Mon Sep 17 00:00:00 2001 From: ALI-HUP Date: Mon, 4 Nov 2024 12:17:57 +0330 Subject: [PATCH 2/6] fix: relocated loading spinner to the appbar component --- apps/guard/app/SideBar.tsx | 12 ++---------- apps/watcher/app/SideBar.tsx | 12 ++---------- packages/ui-kit/src/components/common/AppBar.tsx | 6 ++++-- 3 files changed, 8 insertions(+), 22 deletions(-) diff --git a/apps/guard/app/SideBar.tsx b/apps/guard/app/SideBar.tsx index 78108e35..b97bbeda 100644 --- a/apps/guard/app/SideBar.tsx +++ b/apps/guard/app/SideBar.tsx @@ -10,7 +10,6 @@ import { ClipboardNotes, } from '@rosen-bridge/icons'; import { AppBar, AppLogo } from '@rosen-bridge/ui-kit'; -import { Grid, CircularProgress, Box } from '@mui/material'; import useInfo from './_hooks/useInfo'; @@ -102,14 +101,7 @@ export const SideBar = () => { ]} isActive={(route) => pathname === route.path} onNavigate={(route) => router.push(route.path)} - > - {ShowLoading && ( - - - - - - )} - + isLoading={ShowLoading} + /> ); }; diff --git a/apps/watcher/app/SideBar.tsx b/apps/watcher/app/SideBar.tsx index e29e1d58..d80a1512 100644 --- a/apps/watcher/app/SideBar.tsx +++ b/apps/watcher/app/SideBar.tsx @@ -10,7 +10,6 @@ import { } from '@rosen-bridge/icons'; import { AppBar, AppLogo } from '@rosen-bridge/ui-kit'; -import { Grid, CircularProgress, Box } from '@mui/material'; import useInfo from './_hooks/useInfo'; import packageJson from '../package.json'; @@ -95,14 +94,7 @@ export const SideBar = () => { ]} isActive={(route) => pathname === route.path} onNavigate={(route) => router.push(route.path)} - > - {ShowLoading && ( - - - - - - )} - + isLoading={ShowLoading} + /> ); }; diff --git a/packages/ui-kit/src/components/common/AppBar.tsx b/packages/ui-kit/src/components/common/AppBar.tsx index fc0a0b72..4653d0bc 100644 --- a/packages/ui-kit/src/components/common/AppBar.tsx +++ b/packages/ui-kit/src/components/common/AppBar.tsx @@ -11,6 +11,7 @@ interface AppBarProps { versions?: Version[]; isActive?: (route: Route) => boolean; onNavigate?: (route: Route) => void; + isLoading?: boolean; } interface Route { @@ -46,7 +47,8 @@ const Root = styled(Box)(({ theme }) => ({ * this component set the appBar size and orientation in different screen sizes */ export const AppBar: FC = (props) => { - const { children, logo, routes, versions, isActive, onNavigate } = props; + const { children, logo, routes, versions, isActive, onNavigate, isLoading } = + props; return ( {children} @@ -86,7 +88,7 @@ export const AppBar: FC = (props) => { {version.title} v{version.value} )} - {!version.value && ( + {isLoading && ( From 5444c6e4d11206046b2b88829466deee06c8796d Mon Sep 17 00:00:00 2001 From: ALI-HUP Date: Mon, 4 Nov 2024 15:15:50 +0330 Subject: [PATCH 3/6] fix: resolved problems for merging loading spinners --- apps/guard/app/SideBar.tsx | 4 ++-- apps/watcher/app/SideBar.tsx | 2 +- packages/ui-kit/src/components/common/AppBar.tsx | 15 +++++++++++---- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/apps/guard/app/SideBar.tsx b/apps/guard/app/SideBar.tsx index b97bbeda..d0abda2c 100644 --- a/apps/guard/app/SideBar.tsx +++ b/apps/guard/app/SideBar.tsx @@ -49,7 +49,7 @@ export const SideBar = () => { if (!ShowLoading && info?.versions.contract !== info?.versions.tokensMap) { versions.push({ title: 'Tokens', - value: info?.versions.tokensMap, + value: info!.versions.tokensMap, }); } @@ -101,7 +101,7 @@ export const SideBar = () => { ]} isActive={(route) => pathname === route.path} onNavigate={(route) => router.push(route.path)} - isLoading={ShowLoading} + ShowLoading={ShowLoading} /> ); }; diff --git a/apps/watcher/app/SideBar.tsx b/apps/watcher/app/SideBar.tsx index d80a1512..522876a3 100644 --- a/apps/watcher/app/SideBar.tsx +++ b/apps/watcher/app/SideBar.tsx @@ -94,7 +94,7 @@ export const SideBar = () => { ]} isActive={(route) => pathname === route.path} onNavigate={(route) => router.push(route.path)} - isLoading={ShowLoading} + ShowLoading={ShowLoading} /> ); }; diff --git a/packages/ui-kit/src/components/common/AppBar.tsx b/packages/ui-kit/src/components/common/AppBar.tsx index 4653d0bc..7de52e63 100644 --- a/packages/ui-kit/src/components/common/AppBar.tsx +++ b/packages/ui-kit/src/components/common/AppBar.tsx @@ -11,7 +11,7 @@ interface AppBarProps { versions?: Version[]; isActive?: (route: Route) => boolean; onNavigate?: (route: Route) => void; - isLoading?: boolean; + ShowLoading?: boolean; } interface Route { @@ -47,8 +47,15 @@ const Root = styled(Box)(({ theme }) => ({ * this component set the appBar size and orientation in different screen sizes */ export const AppBar: FC = (props) => { - const { children, logo, routes, versions, isActive, onNavigate, isLoading } = - props; + const { + children, + logo, + routes, + versions, + isActive, + onNavigate, + ShowLoading, + } = props; return ( {children} @@ -88,7 +95,7 @@ export const AppBar: FC = (props) => { {version.title} v{version.value} )} - {isLoading && ( + {ShowLoading && ( From 433ec8178504a56609b69115a281dd8e5c8d3c55 Mon Sep 17 00:00:00 2001 From: ALI-HUP Date: Mon, 4 Nov 2024 15:39:20 +0330 Subject: [PATCH 4/6] fix: resolved problems for merging loading spinners --- apps/guard/app/SideBar.tsx | 4 ++-- apps/watcher/app/SideBar.tsx | 4 ++-- .../ui-kit/src/components/common/AppBar.tsx | 23 +++++++------------ 3 files changed, 12 insertions(+), 19 deletions(-) diff --git a/apps/guard/app/SideBar.tsx b/apps/guard/app/SideBar.tsx index d0abda2c..e4b331a6 100644 --- a/apps/guard/app/SideBar.tsx +++ b/apps/guard/app/SideBar.tsx @@ -28,7 +28,7 @@ export const SideBar = () => { const ShowLoading = isLoading || !info?.versions.app || !info?.versions.contract; - const versions = !ShowLoading + const versions = !isLoading ? [ { title: 'Guard', @@ -101,7 +101,7 @@ export const SideBar = () => { ]} isActive={(route) => pathname === route.path} onNavigate={(route) => router.push(route.path)} - ShowLoading={ShowLoading} + isLoading={isLoading} /> ); }; diff --git a/apps/watcher/app/SideBar.tsx b/apps/watcher/app/SideBar.tsx index 522876a3..af02f71f 100644 --- a/apps/watcher/app/SideBar.tsx +++ b/apps/watcher/app/SideBar.tsx @@ -27,7 +27,7 @@ export const SideBar = () => { const ShowLoading = isLoading || !info?.versions.app || !info?.versions.contract; - const versions = !ShowLoading + const versions = !isLoading ? [ { title: 'Watcher', @@ -94,7 +94,7 @@ export const SideBar = () => { ]} isActive={(route) => pathname === route.path} onNavigate={(route) => router.push(route.path)} - ShowLoading={ShowLoading} + isLoading={isLoading} /> ); }; diff --git a/packages/ui-kit/src/components/common/AppBar.tsx b/packages/ui-kit/src/components/common/AppBar.tsx index 7de52e63..0660ccc5 100644 --- a/packages/ui-kit/src/components/common/AppBar.tsx +++ b/packages/ui-kit/src/components/common/AppBar.tsx @@ -11,7 +11,7 @@ interface AppBarProps { versions?: Version[]; isActive?: (route: Route) => boolean; onNavigate?: (route: Route) => void; - ShowLoading?: boolean; + isLoading?: boolean; } interface Route { @@ -47,15 +47,8 @@ const Root = styled(Box)(({ theme }) => ({ * this component set the appBar size and orientation in different screen sizes */ export const AppBar: FC = (props) => { - const { - children, - logo, - routes, - versions, - isActive, - onNavigate, - ShowLoading, - } = props; + const { children, logo, routes, versions, isActive, onNavigate, isLoading } = + props; return ( {children} @@ -95,13 +88,13 @@ export const AppBar: FC = (props) => { {version.title} v{version.value} )} - {ShowLoading && ( - - - - )} ))} + {isLoading && ( + + + + )} ); }; From 8a7c4fc30e9b7b18350c22f826d9a629254258f6 Mon Sep 17 00:00:00 2001 From: ALI-HUP Date: Thu, 7 Nov 2024 00:18:09 +0330 Subject: [PATCH 5/6] fix: Enhanced version retrieval process --- .changeset/chilly-cycles-battle.md | 5 + .changeset/swift-paws-fail.md | 6 - apps/guard/app/SideBar.tsx | 16 +-- apps/watcher/app/SideBar.tsx | 16 +-- .../ui-kit/src/components/common/AppBar.tsx | 103 +++++++++--------- 5 files changed, 69 insertions(+), 77 deletions(-) create mode 100644 .changeset/chilly-cycles-battle.md delete mode 100644 .changeset/swift-paws-fail.md diff --git a/.changeset/chilly-cycles-battle.md b/.changeset/chilly-cycles-battle.md new file mode 100644 index 00000000..e900e81d --- /dev/null +++ b/.changeset/chilly-cycles-battle.md @@ -0,0 +1,5 @@ +--- +'@rosen-bridge/ui-kit': patch +--- + +Unified loading spinners across app versions, UI and contract displays diff --git a/.changeset/swift-paws-fail.md b/.changeset/swift-paws-fail.md deleted file mode 100644 index 70b18e91..00000000 --- a/.changeset/swift-paws-fail.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@rosen-bridge/watcher-app': patch -'@rosen-bridge/guard-app': patch ---- - -Unified loading circles for app version, UI and contract at the bottom of the sidebar component diff --git a/apps/guard/app/SideBar.tsx b/apps/guard/app/SideBar.tsx index e4b331a6..22a98c81 100644 --- a/apps/guard/app/SideBar.tsx +++ b/apps/guard/app/SideBar.tsx @@ -23,16 +23,13 @@ export const SideBar = () => { const router = useRouter(); - const { data: info, isLoading } = useInfo(); + const { data: info } = useInfo(); - const ShowLoading = - isLoading || !info?.versions.app || !info?.versions.contract; - - const versions = !isLoading + const versions = info?.versions ? [ { title: 'Guard', - value: info?.versions.app, + value: info.versions.app, important: true, }, { @@ -41,15 +38,15 @@ export const SideBar = () => { }, { title: 'Contract', - value: info?.versions.contract, + value: info.versions.contract, }, ] : []; - if (!ShowLoading && info?.versions.contract !== info?.versions.tokensMap) { + if (info?.versions && info.versions.contract !== info.versions.tokensMap) { versions.push({ title: 'Tokens', - value: info!.versions.tokensMap, + value: info.versions.tokensMap, }); } @@ -101,7 +98,6 @@ export const SideBar = () => { ]} isActive={(route) => pathname === route.path} onNavigate={(route) => router.push(route.path)} - isLoading={isLoading} /> ); }; diff --git a/apps/watcher/app/SideBar.tsx b/apps/watcher/app/SideBar.tsx index af02f71f..252a05c3 100644 --- a/apps/watcher/app/SideBar.tsx +++ b/apps/watcher/app/SideBar.tsx @@ -22,16 +22,13 @@ export const SideBar = () => { const router = useRouter(); - const { data: info, isLoading } = useInfo(); + const { data: info } = useInfo(); - const ShowLoading = - isLoading || !info?.versions.app || !info?.versions.contract; - - const versions = !isLoading + const versions = info?.versions ? [ { title: 'Watcher', - value: info?.versions.app, + value: info.versions.app, important: true, }, { @@ -40,15 +37,15 @@ export const SideBar = () => { }, { title: 'Contract', - value: info?.versions.contract, + value: info.versions.contract, }, ] : []; - if (!ShowLoading && info?.versions.contract !== info?.versions.tokensMap) { + if (info?.versions && info.versions.contract !== info.versions.tokensMap) { versions.push({ title: 'Tokens', - value: info!.versions.tokensMap, + value: info.versions.tokensMap, }); } @@ -94,7 +91,6 @@ export const SideBar = () => { ]} isActive={(route) => pathname === route.path} onNavigate={(route) => router.push(route.path)} - isLoading={isLoading} /> ); }; diff --git a/packages/ui-kit/src/components/common/AppBar.tsx b/packages/ui-kit/src/components/common/AppBar.tsx index 0660ccc5..27669151 100644 --- a/packages/ui-kit/src/components/common/AppBar.tsx +++ b/packages/ui-kit/src/components/common/AppBar.tsx @@ -11,7 +11,6 @@ interface AppBarProps { versions?: Version[]; isActive?: (route: Route) => boolean; onNavigate?: (route: Route) => void; - isLoading?: boolean; } interface Route { @@ -46,55 +45,57 @@ const Root = styled(Box)(({ theme }) => ({ * renders a appBar wrapper * this component set the appBar size and orientation in different screen sizes */ -export const AppBar: FC = (props) => { - const { children, logo, routes, versions, isActive, onNavigate, isLoading } = - props; - return ( - - {children} - {logo} - {routes && ( - - {routes.map((route) => ( - - onNavigate?.(route)} - /> - - ))} - - )} - {versions && - versions.map((version) => ( - - {version.value && ( - - {version.title} v{version.value} - - )} +export const AppBar: FC = ({ + children, + logo, + routes, + versions, + isActive, + onNavigate, +}) => ( + + {children} + {logo} + {routes && ( + + {routes.map((route) => ( + + onNavigate?.(route)} + /> ))} - {isLoading && ( - - - - )} - - ); -}; + + )} + {versions?.map((version) => ( + + {version.value && ( + + {version.title} v{version.value} + + )} + + ))} + {versions && versions.length === 0 && ( + + + + )} + +); From b271ea2819f1ed83e1630cb84038d3ea7fe17261 Mon Sep 17 00:00:00 2001 From: ALI-HUP Date: Sun, 10 Nov 2024 21:57:26 +0330 Subject: [PATCH 6/6] fix: rewrited the loading spinners --- apps/guard/app/SideBar.tsx | 38 ++++---- apps/watcher/app/SideBar.tsx | 38 ++++---- .../ui-kit/src/components/common/AppBar.tsx | 96 ++++++++++--------- 3 files changed, 85 insertions(+), 87 deletions(-) diff --git a/apps/guard/app/SideBar.tsx b/apps/guard/app/SideBar.tsx index 22a98c81..1908c251 100644 --- a/apps/guard/app/SideBar.tsx +++ b/apps/guard/app/SideBar.tsx @@ -23,30 +23,28 @@ export const SideBar = () => { const router = useRouter(); - const { data: info } = useInfo(); + const { data: info, isLoading } = useInfo(); - const versions = info?.versions - ? [ - { - title: 'Guard', - value: info.versions.app, - important: true, - }, - { - title: 'UI', - value: packageJson.version, - }, - { - title: 'Contract', - value: info.versions.contract, - }, - ] - : []; + const versions = [ + { + title: 'Guard', + value: info?.versions.app, + important: true, + }, + { + title: 'UI', + value: packageJson.version, + }, + { + title: 'Contract', + value: info?.versions.contract, + }, + ]; - if (info?.versions && info.versions.contract !== info.versions.tokensMap) { + if (!isLoading && info?.versions.contract !== info?.versions.tokensMap) { versions.push({ title: 'Tokens', - value: info.versions.tokensMap, + value: info?.versions.tokensMap, }); } diff --git a/apps/watcher/app/SideBar.tsx b/apps/watcher/app/SideBar.tsx index 252a05c3..ffd16161 100644 --- a/apps/watcher/app/SideBar.tsx +++ b/apps/watcher/app/SideBar.tsx @@ -22,30 +22,28 @@ export const SideBar = () => { const router = useRouter(); - const { data: info } = useInfo(); + const { data: info, isLoading } = useInfo(); - const versions = info?.versions - ? [ - { - title: 'Watcher', - value: info.versions.app, - important: true, - }, - { - title: 'UI', - value: packageJson.version, - }, - { - title: 'Contract', - value: info.versions.contract, - }, - ] - : []; + const versions = [ + { + title: 'Watcher', + value: info?.versions.app, + important: true, + }, + { + title: 'UI', + value: packageJson.version, + }, + { + title: 'Contract', + value: info?.versions.contract, + }, + ]; - if (info?.versions && info.versions.contract !== info.versions.tokensMap) { + if (!isLoading && info?.versions.contract !== info?.versions.tokensMap) { versions.push({ title: 'Tokens', - value: info.versions.tokensMap, + value: info!.versions.tokensMap, }); } diff --git a/packages/ui-kit/src/components/common/AppBar.tsx b/packages/ui-kit/src/components/common/AppBar.tsx index 27669151..844fd985 100644 --- a/packages/ui-kit/src/components/common/AppBar.tsx +++ b/packages/ui-kit/src/components/common/AppBar.tsx @@ -49,53 +49,55 @@ export const AppBar: FC = ({ children, logo, routes, - versions, + versions = [], isActive, onNavigate, -}) => ( - - {children} - {logo} - {routes && ( - - {routes.map((route) => ( - - onNavigate?.(route)} - /> +}) => { + const loadingVersions = versions.every((version) => version.value); + return ( + + {children} + {logo} + {routes && ( + + {routes.map((route) => ( + + onNavigate?.(route)} + /> + + ))} + + )} + {loadingVersions ? ( + versions.map((version) => ( + + + {version.title} v{version.value} + - ))} - - )} - {versions?.map((version) => ( - - {version.value && ( - - {version.title} v{version.value} - - )} - - ))} - {versions && versions.length === 0 && ( - - - - )} - -); + )) + ) : ( + + + + )} + + ); +};