Added entries for Test and Dev networks; Addressed comments in PR-4

gluwa · Nov 30, 2023 · c5aebe3 · c5aebe3
1 parent b9b2542
commit c5aebe3
Show file tree

Hide file tree

Showing 11 changed files with 153 additions and 52 deletions.
diff --git a/src/config/networks.ts b/src/config/networks.ts
@@ -14,8 +14,118 @@ export const NetworkList: Networks = {
         lightClient: null,
         defaultRpcEndpoint: 'Gluwa',
         rpcEndpoints: {
-            'Gluwa': 'ws://localhost:9944',
-        }
+            'Gluwa': 'wss://rpc.mainnet.creditcoin.network/ws',
+        },
+    },
+    namespace: '09573a3526818a8ecd6eb92f60f1175d',
+    api: {
+      unit: 'CTC',
+      priceTicker: 'CTCUSDT',
+    },
+    params: {
+      ...DefaultParams,
+    },
+    ss58: 42,
+    unit: 'CTC',
+    units: 18,
+    brand: {
+      icon: CreditcoinIconSVG,
+      logo: {
+        svg: CreditcoinLogoSVG,
+        width: '7.2em',
+      },
+      inline: {
+        svg: CreditcoinIconSVG,
+        size: '1.05em',
+      },
+    },
+    colors: {
+      primary: {
+        light: 'rgb(211, 48, 121)',
+        dark: 'rgb(211, 48, 121)',
+      },
+      secondary: {
+        light: '#552bbf',
+        dark: '#6d39ee',
+      },
+      stroke: {
+        light: 'rgb(211, 48, 121)',
+        dark: 'rgb(211, 48, 121)',
+      },
+      transparent: {
+        light: 'rgb(211, 48, 121, 0.05)',
+        dark: 'rgb(211, 48, 121, 0.05)',
+      },
+      pending: {
+        light: 'rgb(211, 48, 121, 0.33)',
+        dark: 'rgb(211, 48, 121, 0.33)',
+      },
+    },
+    subscanEndpoint: 'http://127.0.0.1:4399',
+  },
+  creditcoinTest: {
+    name: 'creditcoinTest',
+    endpoints: {
+        lightClient: null,
+        defaultRpcEndpoint: 'Gluwa',
+        rpcEndpoints: {
+            'Gluwa': 'wss://rpc.testnet.creditcoin.network/ws',
+        },
+    },
+    namespace: '09573a3526818a8ecd6eb92f60f1175d',
+    api: {
+      unit: 'CTC',
+      priceTicker: 'CTCUSDT',
+    },
+    params: {
+      ...DefaultParams,
+    },
+    ss58: 42,
+    unit: 'CTC',
+    units: 18,
+    brand: {
+      icon: CreditcoinIconSVG,
+      logo: {
+        svg: CreditcoinLogoSVG,
+        width: '7.2em',
+      },
+      inline: {
+        svg: CreditcoinIconSVG,
+        size: '1.05em',
+      },
+    },
+    colors: {
+      primary: {
+        light: 'rgb(211, 48, 121)',
+        dark: 'rgb(211, 48, 121)',
+      },
+      secondary: {
+        light: '#552bbf',
+        dark: '#6d39ee',
+      },
+      stroke: {
+        light: 'rgb(211, 48, 121)',
+        dark: 'rgb(211, 48, 121)',
+      },
+      transparent: {
+        light: 'rgb(211, 48, 121, 0.05)',
+        dark: 'rgb(211, 48, 121, 0.05)',
+      },
+      pending: {
+        light: 'rgb(211, 48, 121, 0.33)',
+        dark: 'rgb(211, 48, 121, 0.33)',
+      },
+    },
+    subscanEndpoint: 'http://127.0.0.1:4399',
+  },
+  creditcoinDev: {
+    name: 'creditcoinDev',
+    endpoints: {
+        lightClient: null,
+        defaultRpcEndpoint: 'Gluwa',
+        rpcEndpoints: {
+            'Gluwa': 'wss://rpc.devnet.creditcoin.network/ws',
+        },
     },
     namespace: '09573a3526818a8ecd6eb92f60f1175d',
     api: {

diff --git a/src/config/pages.tsx b/src/config/pages.tsx
@@ -5,16 +5,13 @@ import { Community } from 'pages/Community';
 import { Nominate } from 'pages/Nominate';
 import { Overview } from 'pages/Overview';
 import { Payouts } from 'pages/Payouts';
-import { Pools } from 'pages/Pools';
 import { Validators } from 'pages/Validators';
 import type { PageCategoryItems, PagesConfigItems } from 'types';
-import {ReactComponent as OverviewIcon} from "../img/ic_overview.svg"
-import {ReactComponent as PoolsIcon} from "../img/ic_pools.svg"
-import {ReactComponent as NominateIcon} from "../img/ic_nominate.svg"
-import {ReactComponent as PayoutsIcon} from "../img/ic_payouts.svg"
-import {ReactComponent as ValidatorsIcon} from "../img/ic_validators.svg"
-import {ReactComponent as CommunityIcon} from "../img/ic_community.svg"
-
+import { ReactComponent as CommunityIcon } from '../img/ic_community.svg';
+import { ReactComponent as NominateIcon } from '../img/ic_nominate.svg';
+import { ReactComponent as OverviewIcon } from '../img/ic_overview.svg';
+import { ReactComponent as PayoutsIcon } from '../img/ic_payouts.svg';
+import { ReactComponent as ValidatorsIcon } from '../img/ic_validators.svg';
 
 const BASE_URL = import.meta.env.BASE_URL;
 export const PageCategories: PageCategoryItems = [
@@ -39,7 +36,7 @@ export const PagesConfig: PagesConfigItems = [
     uri: `${BASE_URL}`,
     hash: '/overview',
     Entry: Overview,
-    icon: () => (<OverviewIcon height={'20'} width={'auto'}/>)
+    icon: () => <OverviewIcon height="20" width="auto" />,
   },
   // Removed temporarily until there is a demand pools
   // {
@@ -56,30 +53,30 @@ export const PagesConfig: PagesConfigItems = [
     uri: `${BASE_URL}nominate`,
     hash: '/nominate',
     Entry: Nominate,
-    icon: () => (<NominateIcon  height={'20'} width={'auto'}/>)
+    icon: () => <NominateIcon height="20" width="auto" />,
   },
   {
     category: 2,
     key: 'payouts',
     uri: `${BASE_URL}payouts`,
     hash: '/payouts',
     Entry: Payouts,
-    icon: () => (<PayoutsIcon  height={'20'} width={'auto'}/>)
+    icon: () => <PayoutsIcon height="20" width="auto" />,
   },
   {
     category: 3,
     key: 'validators',
     uri: `${BASE_URL}validators`,
     hash: '/validators',
     Entry: Validators,
-    icon: () => (<ValidatorsIcon  height={'20'} width={'auto'} />)
+    icon: () => <ValidatorsIcon height="20" width="auto" />,
   },
   {
     category: 3,
     key: 'community',
     uri: `${BASE_URL}community`,
     hash: '/community',
     Entry: Community,
-    icon: () => (<CommunityIcon  height={'20'} width={'auto'}/>)
+    icon: () => <CommunityIcon height="20" width="auto" />,
   },
 ];
diff --git a/src/consts.ts b/src/consts.ts
@@ -20,7 +20,7 @@ export const EmptyH256 = new Uint8Array(32);
 export const ModPrefix = stringToU8a('modl');
 export const U32Opts = { bitLength: 32, isLe: true };
 
-export const SideMenuMaximisedWidth = 185;
+export const SideMenuMaximisedWidth = 200;
 export const SideMenuMinimisedWidth = 75;
 export const SideMenuStickyThreshold = 1150;
 export const SectionFullWidthThreshold = 1000;

diff --git a/src/contexts/Themes/index.tsx b/src/contexts/Themes/index.tsx
@@ -6,18 +6,18 @@ import { defaultThemeContext } from './defaults';
 import type { Theme, ThemeContextInterface } from './types';
 
 export const ThemesProvider = ({ children }: { children: React.ReactNode }) => {
-    let initialTheme: Theme = 'dark';
+  const initialTheme: Theme = 'dark';
 
-    // get the current theme
-    localStorage.setItem('theme', 'dark');
+  // get the current theme
+  localStorage.setItem('theme', 'dark');
 
-    // the theme mode
-    const [theme, setTheme] = React.useState<Theme>(initialTheme);
-    const themeRef = useRef(theme);
+  // the theme mode
+  const [theme] = React.useState<Theme>(initialTheme);
+  const themeRef = useRef(theme);
 
-    const toggleTheme = (maybeTheme: Theme | null = null): void => {
-        // Do nothing
-    };
+  const toggleTheme = (): void => {
+    // Do nothing
+  };
 
   return (
     <ThemeContext.Provider
@@ -32,6 +32,6 @@ export const ThemesProvider = ({ children }: { children: React.ReactNode }) => {
 };
 
 export const ThemeContext =
-    React.createContext<ThemeContextInterface>(defaultThemeContext);
+  React.createContext<ThemeContextInterface>(defaultThemeContext);
 
 export const useTheme = () => React.useContext(ThemeContext);
diff --git a/src/library/Graphs/PayoutLine.tsx b/src/library/Graphs/PayoutLine.tsx
@@ -47,14 +47,16 @@ export const PayoutLine = ({
 }: PayoutLineProps) => {
   const { t } = useTranslation('library');
   const { mode } = useTheme();
-  const { isSyncing } = useUi();
-  const { inSetup } = useStaking();
   const { payouts, poolClaims } = useSubscan();
-  const { unit, units, colors } = useNetwork().networkData;
+  const { unit, units } = useNetwork().networkData;
   const { membership: poolMembership } = usePoolMemberships();
 
-  const notStaking = !isSyncing && inSetup() && !poolMembership;
-  const poolingOnly = !isSyncing && inSetup() && poolMembership !== null;
+  // Unneeded until Pools are officially supported
+  // const { isSyncing } = useUi();
+  // const { inSetup } = useStaking();
+  // const { membership: poolMembership } = usePoolMemberships();
+  // const notStaking = !isSyncing && inSetup() && !poolMembership;
+  // const poolingOnly = !isSyncing && inSetup() && poolMembership !== null;
 
   // remove slashes from payouts (graph does not support negative values).
   const payoutsNoSlash = payouts.filter(
@@ -88,7 +90,7 @@ export const PayoutLine = ({
   );
 
   // determine color for payouts
-  const color = "#9cffaa";
+  const color = '#9cffaa';
 
   // configure graph options
   const options = {

diff --git a/src/library/SideMenu/index.tsx b/src/library/SideMenu/index.tsx
@@ -13,16 +13,12 @@ import { useTranslation } from 'react-i18next';
 import { SideMenuStickyThreshold } from 'consts';
 import { useApi } from 'contexts/Api';
 import { useHelp } from 'contexts/Help';
-import { useTheme } from 'contexts/Themes';
 import { useUi } from 'contexts/UI';
 import type { UIContextInterface } from 'contexts/UI/types';
 import CogOutlineSVG from 'img/cog-outline.svg?react';
 import ForumSVG from 'img/forum.svg?react';
 import InfoSVG from 'img/info.svg?react';
-import LanguageSVG from 'img/language.svg?react';
 import LogoGithubSVG from 'img/logo-github.svg?react';
-import MoonOutlineSVG from 'img/moon-outline.svg?react';
-import SunnyOutlineSVG from 'img/sunny-outline.svg?react';
 import { useOutsideAlerter } from 'library/Hooks';
 import { useOverlay } from '@polkadot-cloud/react/hooks';
 import { useNetwork } from 'contexts/Network';
@@ -35,7 +31,6 @@ export const SideMenu = () => {
   const { t } = useTranslation('base');
   const { apiStatus } = useApi();
   const { networkData, network } = useNetwork();
-  const { mode, toggleTheme } = useTheme();
   const { openModal } = useOverlay().modal;
   const {
     setSideMenu,

diff --git a/src/library/SideMenu/types.ts b/src/library/SideMenu/types.ts
@@ -3,8 +3,6 @@
 
 import type React from 'react';
 import type { FunctionComponent, SVGProps } from 'react';
-import type { AnyJson } from 'types';
-import {AnyStyledComponent} from "styled-components";
 
 export interface MinimisedProps {
   $minimised?: boolean;

diff --git a/src/modals/JoinPool/index.tsx b/src/modals/JoinPool/index.tsx
@@ -80,7 +80,7 @@ export const JoinPool = () => {
 
   // tx to submit
   const getTx = () => {
-    let tx = null;
+    const tx = null;
     if (!api) {
       return tx;
     }

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -2,25 +2,24 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 html * {
-  --network-color-primary: #9CFFAA;
-  --network-color-primary-dark: #9CFFAA;
-  --network-color-secondary: #9CFFAA;
-  --network-color-secondary-dark: #9CFFAA;
-  --network-color-stroke: #9CFFAA;
-  --network-color-stroke-dark: #9CFFAA;
-  --text-color-primary: #FFFFFF;
+  --network-color-primary: #9cffaa;
+  --network-color-primary-dark: #9cffaa;
+  --network-color-secondary: #9cffaa;
+  --network-color-secondary-dark: #9cffaa;
+  --network-color-stroke: #9cffaa;
+  --network-color-stroke-dark: #9cffaa;
+  --text-color-primary: #ffffff;
   --text-color-secondary: #777777;
   --button-tertiary-background: #464849;
-  --background-default: #0A0C0E;
-  --background-primary: #181A1C;
+  --background-default: #0a0c0e;
+  --background-primary: #181a1c;
   font-size: 10.5px;
 
   .core-entry {
     background: black;
   }
 
   .graph {
-
   }
 
   button {

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -12,7 +12,7 @@ declare global {
   }
 }
 
-export type NetworkName = 'creditcoin';
+export type NetworkName = 'creditcoin' | 'creditcoinDev' | 'creditcoinTest';
 
 export type Networks = Record<string, Network>;
 

diff --git a/vite.config.ts b/vite.config.ts
@@ -17,7 +17,7 @@ import tsconfigPaths from 'vite-tsconfig-paths';
 // - `BASE_URL`env variable is used in the codebase to refer to the supplied base.
 export default defineConfig({
   plugins: [
-    // eslint(),
+    eslint(),
     react(),
     svgr(),
     tsconfigPaths(),
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,7 +12,7 @@ declare global { @@
       }
     }
-    export type NetworkName = 'creditcoin';
+    export type NetworkName = 'creditcoin' | 'creditcoinDev' | 'creditcoinTest';
     export type Networks = Record<string, Network>;
@@ Expand Down @@