feat: Revise footer (#2408)

packages/app/src/Router.tsx

@@ -11,8 +11,8 @@ import { useAccountFromUrl } from 'hooks/useAccountFromUrl'
 import { ErrorFallbackApp, ErrorFallbackRoutes } from 'library/ErrorBoundary'
 import { Headers } from 'library/Headers'
 import { Help } from 'library/Help'
+import { MainFooter } from 'library/MainFooter'
 import { Menu } from 'library/Menu'
-import { NetworkBar } from 'library/NetworkBar'
 import { NotificationPrompts } from 'library/NotificationPrompts'
 import { Offline } from 'library/Offline'
 import { PageWithTitle } from 'library/PageWithTitle'
@@ -89,9 +89,9 @@ const RouterInner = () => {
               />
             </Routes>
           </ErrorBoundary>
+          <MainFooter />
         </Main>
       </Body>
-      <NetworkBar />
       <Offline />
     </ErrorBoundary>
   )

packages/app/src/library/NetworkBar/Wrappers.ts → packages/app/src/library/MainFooter/Wrappers.ts

@@ -1,33 +1,25 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { PageWidthMediumThreshold } from 'consts'
 import styled from 'styled-components'
 
 export const Wrapper = styled.div`
   --network-bar-font-size: 0.9rem;
 
-  background: var(--background-app-footer);
   color: var(--text-color-secondary);
   font-size: var(--network-bar-font-size);
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
-  bottom: 0px;
-  left: 0px;
   overflow: hidden;
   z-index: 6;
   backdrop-filter: blur(4px);
-  position: relative;
   padding-top: 0.15rem;
+  padding-bottom: 1.25rem;
   width: 100%;
+  margin: 0 auto;
 
-  @media (min-width: ${PageWidthMediumThreshold + 1}px) {
-    position: fixed;
-  }
-
-  .network_icon {
-    margin: 0 0 0 1.25rem;
+  .icon {
     width: 1.5rem;
     height: 1.5rem;
   }
@@ -58,10 +50,14 @@ export const Summary = styled.div`
   }
   p {
     font-size: var(--network-bar-font-size);
-    border-left: 1px solid var(--accent-color-transparent);
+    border-left: 1px solid var(--text-color-secondary);
     margin: 0.25rem 0.5rem 0.25rem 0.15rem;
     padding-left: 0.5rem;
     line-height: 1.3rem;
+
+    &:first-child {
+      border-left: none;
+    }
   }
   .stat {
     margin: 0 0.25rem;
@@ -92,7 +88,6 @@ export const Summary = styled.div`
       display: flex;
       align-items: center;
       flex-flow: row-reverse wrap;
-      padding-right: 0.75rem;
 
       button {
         font-size: var(--network-bar-font-size);

packages/app/src/library/MainFooter/index.tsx

@@ -0,0 +1,111 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { faHive } from '@fortawesome/free-brands-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useEffectIgnoreInitial } from '@w3ux/hooks'
+import { Odometer } from '@w3ux/react-odometer'
+import { capitalizeFirstLetter } from '@w3ux/utils'
+import CloudIconSVG from 'assets/svg/cloudIcon.svg?react'
+import BigNumber from 'bignumber.js'
+import { MaxPageWidth } from 'consts'
+import { useNetwork } from 'contexts/Network'
+import { usePlugins } from 'contexts/Plugins'
+import { isCustomEvent } from 'controllers/utils'
+import { useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Footer } from 'ui-structure'
+import { useEventListener } from 'usehooks-ts'
+import { Status } from './Status'
+import { TokenPrice } from './TokenPrice'
+import { Summary, Wrapper } from './Wrappers'
+
+export const MainFooter = () => {
+  const { t } = useTranslation('library')
+  const { plugins } = usePlugins()
+  const { network } = useNetwork()
+  const PRIVACY_URL = import.meta.env.VITE_PRIVACY_URL
+  const DISCLAIMER_URL = import.meta.env.VITE_DISCLAIMER_URL
+  const ORGANISATION = import.meta.env.VITE_ORGANISATION
+  const LEGAL_DISCLOSURES_URL = import.meta.env.VITE_LEGAL_DISCLOSURES_URL
+
+  // Store incoming block number.
+  const [blockNumber, setBlockNumber] = useState<string>()
+
+  const newBlockCallback = (e: Event) => {
+    if (isCustomEvent(e)) {
+      setBlockNumber(e.detail.blockNumber)
+    }
+  }
+
+  const ref = useRef<Document>(document)
+  useEventListener('new-block-number', newBlockCallback, ref)
+
+  // Reset block number on network change.
+  useEffectIgnoreInitial(() => {
+    setBlockNumber('0')
+  }, [network])
+
+  return (
+    <Footer>
+      <Wrapper
+        className="page-padding"
+        style={{ maxWidth: `${MaxPageWidth}px` }}
+      >
+        <CloudIconSVG className="icon" />
+        <Summary>
+          <section>
+            <p>
+              {ORGANISATION === undefined
+                ? capitalizeFirstLetter(network)
+                : ORGANISATION}
+            </p>
+            <Status />
+            {PRIVACY_URL !== undefined && (
+              <p>
+                <a href={PRIVACY_URL} target="_blank" rel="noreferrer">
+                  {t('privacy')}
+                </a>
+              </p>
+            )}
+            {DISCLAIMER_URL !== undefined && (
+              <p>
+                <a href={DISCLAIMER_URL} target="_blank" rel="noreferrer">
+                  {t('disclaimer')}
+                </a>
+              </p>
+            )}
+            {LEGAL_DISCLOSURES_URL !== undefined && (
+              <p>
+                <a
+                  href={LEGAL_DISCLOSURES_URL}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {t('legalDisclosures')}
+                </a>
+              </p>
+            )}
+          </section>
+          <section>
+            <div className="hide-small">
+              {plugins.includes('staking_api') && network !== 'westend' && (
+                <TokenPrice />
+              )}
+              {import.meta.env.MODE === 'development' && (
+                <div className="stat last">
+                  <FontAwesomeIcon icon={faHive} />
+                  <Odometer
+                    wholeColor="var(--text-color-secondary)"
+                    value={new BigNumber(blockNumber || '0').toFormat()}
+                    spaceBefore={'0.35rem'}
+                  />
+                </div>
+              )}
+            </div>
+          </section>
+        </Summary>
+      </Wrapper>
+    </Footer>
+  )
+}

packages/app/src/library/SideMenu/Wrapper.ts

@@ -24,7 +24,7 @@ export const Wrapper = styled.div<MinimisedProps>`
       : `${SideMenuMaximisedWidth}px`};
   padding: ${(props) =>
     props.$minimised ? `0.5rem 1rem 0.5rem 1rem` : `0rem 1rem 1rem 1rem`};
-  margin: 0.75rem 0 3.35rem 0rem;
+  margin: 0.75rem 0;
 
   &::-webkit-scrollbar {
     display: none;

packages/styles/theme/theme.scss

@@ -27,7 +27,6 @@ SPDX-License-Identifier: GPL-3.0-only */
   --background-canvas-card: rgb(245 245 245 / 90%);
   --background-canvas-card-secondary: rgb(255 255 255 / 35%);
   --background-floating-card: rgb(255 255 255 / 90%);
-  --background-app-footer: rgb(244 225 225 / 75%);
   --background-modal: #f9f7f7;
   --background-modal-footer: #efefef;
   --background-status-overlay: rgb(255 255 255 / 85%);
@@ -105,7 +104,6 @@ SPDX-License-Identifier: GPL-3.0-only */
   --background-canvas-card: rgb(44 40 44 / 90%);
   --background-canvas-card-secondary: rgb(44 40 44 / 35%);
   --background-floating-card: rgb(43 38 43 / 95%);
-  --background-app-footer: #262327;
   --background-modal: rgb(43 38 43);
   --background-modal-footer: rgb(37 32 37);
   --background-status-overlay: rgb(43 38 43 / 75%);

packages/ui-structure/src/Footer/index.module.scss

@@ -0,0 +1,11 @@
+/* Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+SPDX-License-Identifier: GPL-3.0-only */
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}

packages/ui-structure/src/Footer/index.tsx

@@ -0,0 +1,15 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import type { ComponentBase } from '@w3ux/types'
+import classes from './index.module.scss'
+
+/**
+ * @name Footer
+ * @summary Footer container.
+ */
+export const Footer = ({ children, style }: ComponentBase) => (
+  <div className={classes.footer} style={style}>
+    {children}
+  </div>
+)

packages/ui-structure/src/Main/index.module.scss

@@ -7,4 +7,5 @@
   flex-direction: column;
   max-width: 100%;
   flex: 1;
+  padding-bottom: 4.1rem
 }

packages/ui-structure/src/Page/index.module.scss

@@ -4,7 +4,7 @@ SPDX-License-Identifier: GPL-3.0-only */
 .page {
   display: flex;
   flex-direction: column;
-  padding-bottom: 4.5rem;
+  padding-bottom: 0.75rem;
   width: 100%;
   margin: 0 auto;
 }

packages/ui-structure/src/index.tsx

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