chore: refactor Offline

packages/app/src/library/Offline/index.tsx → packages/app/src/Offline.tsx

@@ -6,24 +6,22 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { OnlineStatus } from 'controllers/OnlineStatus'
 import { isCustomEvent } from 'controllers/utils'
 import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { OfflineLabel } from 'ui-core/base'
 import { useEventListener } from 'usehooks-ts'
-import { Wrapper } from './Wrapper'
 
 export const Offline = () => {
-  // Whether the app is offline.
+  const { t } = useTranslation('base')
   const [offline, setOffline] = useState<boolean>(false)
 
-  // Handle incoming online status updates.
   const handleOnlineStatus = (e: Event): void => {
     if (isCustomEvent(e)) {
       const { online } = e.detail
       setOffline(!online)
     }
   }
 
-  // Listen for online status updates.
   useEffect(() => {
-    // Start listening for online / offline events.
     OnlineStatus.initOnlineEvents()
   }, [])
 
@@ -37,9 +35,9 @@ export const Offline = () => {
     return null
   }
   return (
-    <Wrapper>
+    <OfflineLabel>
       <FontAwesomeIcon icon={faWarning} transform="grow-4" />
-      <h3>Connection appears to be offline</h3>
-    </Wrapper>
+      <h3>{t('offline')}</h3>
+    </OfflineLabel>
   )
 }

packages/app/src/Router.tsx

@@ -13,11 +13,11 @@ import { Help } from 'library/Help'
 import { MainFooter } from 'library/MainFooter'
 import { Menu } from 'library/Menu'
 import { NotificationPrompts } from 'library/NotificationPrompts'
-import { Offline } from 'library/Offline'
 import { PageWithTitle } from 'library/PageWithTitle'
 import { Prompt } from 'library/Prompt'
 import { SideMenu } from 'library/SideMenu'
 import { Tooltip } from 'library/Tooltip'
+import { Offline } from 'Offline'
 import { Overlays } from 'overlay'
 import { useEffect, useRef } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'

packages/locales/src/resources/cn/base.json

@@ -9,6 +9,7 @@
     "inactive": "未激活",
     "network": "网络",
     "nominate": "抵押",
+    "offline": "连接似乎处于离线状态",
     "overview": "总览",
     "payee": {
       "account": {

packages/locales/src/resources/en/base.json

@@ -9,6 +9,7 @@
     "inactive": "Inactive",
     "network": "Network",
     "nominate": "Nominate",
+    "offline": "Connection appears to be offline",
     "overview": "Overview",
     "payee": {
       "account": {

packages/app/src/library/Offline/Wrapper.ts → packages/ui-core/src/base/OfflineLabel/index.module.scss

@@ -1,9 +1,7 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
+/* Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+SPDX-License-Identifier: GPL-3.0-only */
 
-import styled from 'styled-components'
-
-export const Wrapper = styled.div`
+.offlineLabel {
   background: var(--accent-color-primary);
   border: 0.5px solid var(--border-primary-color);
   position: fixed;
@@ -15,12 +13,12 @@ export const Wrapper = styled.div`
   display: flex;
   align-items: center;
 
-  > h3,
-  svg {
+  > h3 {
     color: var(--text-color-invert);
   }
 
   > svg {
+    color: var(--text-color-invert);
     margin-right: 0.75rem;
   }
-`
+}

packages/ui-core/src/base/OfflineLabel/index.tsx

@@ -0,0 +1,10 @@
+// SPDX-License-Identifier: GPL-3.0-only
+
+import type { ComponentBase } from '@w3ux/types'
+import classes from './index.module.scss'
+
+export const OfflineLabel = ({ children, style }: ComponentBase) => (
+  <div className={classes.offlineLabel} style={style}>
+    {children}
+  </div>
+)

packages/ui-core/src/base/index.tsx

@@ -6,6 +6,7 @@ export * from './ButtonRow'
 export * from './Entry'
 export * from './Footer'
 export * from './Main'
+export * from './OfflineLabel'
 export * from './Page'
 export * from './PageHeading'
 export * from './PageRow'