From 3326c8fbbdd0932e2e5e9aec85deb53c36b85f63 Mon Sep 17 00:00:00 2001
From: Ross Bulat <ross@jkrb.io>
Date: Sun, 5 Jan 2025 18:31:00 +0700
Subject: [PATCH] chore: refactor `Offline`

---
 .../src/{library/Offline/index.tsx => Offline.tsx} | 14 ++++++--------
 packages/app/src/Router.tsx                        |  2 +-
 packages/locales/src/resources/cn/base.json        |  1 +
 packages/locales/src/resources/en/base.json        |  1 +
 .../src/base/OfflineLabel/index.module.scss}       | 14 ++++++--------
 packages/ui-core/src/base/OfflineLabel/index.tsx   | 10 ++++++++++
 packages/ui-core/src/base/index.tsx                |  1 +
 7 files changed, 26 insertions(+), 17 deletions(-)
 rename packages/app/src/{library/Offline/index.tsx => Offline.tsx} (77%)
 rename packages/{app/src/library/Offline/Wrapper.ts => ui-core/src/base/OfflineLabel/index.module.scss} (64%)
 create mode 100644 packages/ui-core/src/base/OfflineLabel/index.tsx

diff --git a/packages/app/src/library/Offline/index.tsx b/packages/app/src/Offline.tsx
similarity index 77%
rename from packages/app/src/library/Offline/index.tsx
rename to packages/app/src/Offline.tsx
index 164968faea..6ccb714c2b 100644
--- a/packages/app/src/library/Offline/index.tsx
+++ b/packages/app/src/Offline.tsx
@@ -6,14 +6,14 @@ 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
@@ -21,9 +21,7 @@ export const Offline = () => {
     }
   }
 
-  // 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>
   )
 }
diff --git a/packages/app/src/Router.tsx b/packages/app/src/Router.tsx
index a9f14b10c0..492ad22df1 100644
--- a/packages/app/src/Router.tsx
+++ b/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'
diff --git a/packages/locales/src/resources/cn/base.json b/packages/locales/src/resources/cn/base.json
index 09cbeabcb9..77ef5e3246 100644
--- a/packages/locales/src/resources/cn/base.json
+++ b/packages/locales/src/resources/cn/base.json
@@ -9,6 +9,7 @@
     "inactive": "未激活",
     "network": "网络",
     "nominate": "抵押",
+    "offline": "连接似乎处于离线状态",
     "overview": "总览",
     "payee": {
       "account": {
diff --git a/packages/locales/src/resources/en/base.json b/packages/locales/src/resources/en/base.json
index a8fa9f4743..424d1df78d 100644
--- a/packages/locales/src/resources/en/base.json
+++ b/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": {
diff --git a/packages/app/src/library/Offline/Wrapper.ts b/packages/ui-core/src/base/OfflineLabel/index.module.scss
similarity index 64%
rename from packages/app/src/library/Offline/Wrapper.ts
rename to packages/ui-core/src/base/OfflineLabel/index.module.scss
index cd9421ee38..554559a4ff 100644
--- a/packages/app/src/library/Offline/Wrapper.ts
+++ b/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;
   }
-`
+}
\ No newline at end of file
diff --git a/packages/ui-core/src/base/OfflineLabel/index.tsx b/packages/ui-core/src/base/OfflineLabel/index.tsx
new file mode 100644
index 0000000000..c1f520fc8d
--- /dev/null
+++ b/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>
+)
diff --git a/packages/ui-core/src/base/index.tsx b/packages/ui-core/src/base/index.tsx
index b1b7dfbd04..0bc00e01e3 100644
--- a/packages/ui-core/src/base/index.tsx
+++ b/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'