feat: init ui-structure, consts, styles packages, migrate Struc…

…ture kit (#2330)

packages/app/package.json

@@ -43,6 +43,7 @@
     "chart.js": "^4.4.4",
     "chroma-js": "^3.1.1",
     "compare-versions": "^6.1.1",
+    "consts": "workspace:*",
     "date-fns": "^4.1.0",
     "framer-motion": "^11.11.1",
     "html5-qrcode": "^2.3.8",
@@ -61,7 +62,9 @@
     "react-router-dom": "^6.23.1",
     "react-scroll": "^1.9.0",
     "styled-components": "^6.1.13",
+    "styles": "workspace:*",
     "ui-buttons": "workspace:*",
+    "ui-structure": "workspace:*",
     "usehooks-ts": "^3.0.2",
     "viem": "^2.21.35",
     "wagmi": "^2.12.25",

packages/app/src/Page.tsx → packages/app/src/PageWithTitle.tsx

@@ -4,23 +4,23 @@
 import { useNetwork } from 'contexts/Network';
 import { Helmet } from 'react-helmet';
 import type { PageItem } from 'types';
-import { PageWrapper } from 'kits/Structure/Page/Wrapper';
+import { Page } from 'ui-structure';
 import { useTranslation } from 'react-i18next';
 
-export const Page = ({ page }: { page: PageItem }) => {
+export const PageWithTitle = ({ page }: { page: PageItem }) => {
   const { t } = useTranslation();
   const { network } = useNetwork();
   const { Entry, key } = page;
 
   return (
-    <PageWrapper>
+    <Page>
       <Helmet>
         <title>{`${t('title', {
           context: `${network}`,
           ns: 'base',
         })} : ${t(key, { ns: 'base' })}`}</title>
       </Helmet>
       <Entry page={page} />
-    </PageWrapper>
+    </Page>
   );
 };

packages/app/src/Router.tsx

@@ -29,9 +29,8 @@ import { useOtherAccounts } from 'contexts/Connect/OtherAccounts';
 import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts';
 import { Notifications } from 'library/Notifications';
 import { NotificationsController } from 'controllers/Notifications';
-import { Page } from 'Page';
-import { Body } from 'kits/Structure/Body';
-import { Main } from 'kits/Structure/Main';
+import { PageWithTitle } from 'PageWithTitle';
+import { Body, Main } from 'ui-structure';
 import { Offline } from 'library/Offline';
 
 const RouterInner = () => {
@@ -115,7 +114,7 @@ const RouterInner = () => {
                 <Route
                   key={`main_interface_page_${i}`}
                   path={page.hash}
-                  element={<Page page={page} />}
+                  element={<PageWithTitle page={page} />}
                 />
               ))}
 

packages/app/src/Themes.tsx

@@ -6,7 +6,7 @@ import { Router } from 'Router';
 import { useTheme } from 'contexts/Themes';
 import { useNetwork } from 'contexts/Network';
 import { useEffect } from 'react';
-import { Entry } from 'kits/Structure/Entry';
+import { Entry } from 'ui-structure';
 
 // light / dark `mode` added to styled-components provider
 export const ThemedRouter = () => {

packages/app/src/canvas/JoinPool/Header.tsx

@@ -9,7 +9,7 @@ import {
 import { ButtonPrimary, ButtonPrimaryInvert } from 'ui-buttons';
 import { Polkicon } from '@w3ux/react-polkicon';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { PageTitleTabs } from 'kits/Structure/PageTitleTabs';
+import { PageTitleTabs } from 'ui-structure';
 import { useTranslation } from 'react-i18next';
 import { useOverlay } from 'kits/Overlay/Provider';
 import type { JoinPoolHeaderProps } from './types';

packages/app/src/canvas/JoinPool/Overview/PerformanceGraph.tsx

@@ -17,7 +17,7 @@ import { GraphWrapper, HeadingWrapper } from '../Wrappers';
 import { Line } from 'react-chartjs-2';
 import BigNumber from 'bignumber.js';
 import type { AnyJson } from '@w3ux/types';
-import { graphColors } from 'theme/graphs';
+import graphColors from 'styles/graphs/index.json';
 import { useTheme } from 'contexts/Themes';
 import { ButtonHelp } from 'ui-buttons';
 import { useHelp } from 'contexts/Help';

packages/app/src/config/networks.ts

@@ -190,7 +190,7 @@ export const SystemChainList: Record<string, SystemChain> = {
     units: 10,
     unit: 'DOT',
     endpoints: {
-      lightClient: 'people_polkadot', // NOTE: Currently not being used. TODO: Revise this and activate once People chain specs are available to use.
+      lightClient: 'polkadot_people',
       rpcEndpoints: {
         Parity: 'wss://polkadot-people-rpc.polkadot.io',
       },
@@ -202,7 +202,7 @@ export const SystemChainList: Record<string, SystemChain> = {
     units: 12,
     unit: 'KSM',
     endpoints: {
-      lightClient: 'people_kusama', // NOTE: Currently not being used. TODO: Revise this and activate once People chain specs are available to use.
+      lightClient: 'kusama_people',
       rpcEndpoints: {
         Parity: 'wss://kusama-people-rpc.polkadot.io',
       },
@@ -214,7 +214,7 @@ export const SystemChainList: Record<string, SystemChain> = {
     units: 12,
     unit: 'WND',
     endpoints: {
-      lightClient: 'people_westend', // NOTE: Currently not being used. TODO: Revise this and activate once People chain specs are available to use.
+      lightClient: 'westend_people',
       rpcEndpoints: {
         Parity: 'wss://westend-people-rpc.polkadot.io',
       },

packages/app/src/controllers/Subscriptions/types.ts

@@ -1,11 +1,19 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import type { AnyJson } from '@w3ux/types';
+import type { ActiveEra } from 'model/Subscribe/ActiveEra';
+import type { BlockNumber } from 'model/Subscribe/BlockNumber';
+import type { NetworkMetrics } from 'model/Subscribe/NetworkMetrics';
+import type { PoolsConfig } from 'model/Subscribe/PoolsConfig';
+import type { StakingMetrics } from 'model/Subscribe/StakingMetrics';
 
 // Define all possible subscription classes.
-// TODO: Add subscription classes here.
-export type Subscription = AnyJson;
+export type Subscription =
+  | ActiveEra
+  | BlockNumber
+  | NetworkMetrics
+  | PoolsConfig
+  | StakingMetrics;
 
 // the record of subscriptions, keyed by tabId.
 export type ChainSubscriptions = Record<string, Subscription>;