updated home components

apps/web-nym/src/chainConfig/types.ts

@@ -0,0 +1,149 @@
+export interface ChainSettings {
+  network: string;
+  chainType: string;
+  genesis: {
+    time: string;
+    height: number;
+  };
+  prefix: {
+    consensus: string;
+    validator: string;
+    account: string;
+  };
+  primaryTokenUnit: string;
+  priceTokenUnit: string;
+  votingPowerTokenUnit: string;
+  tokenUnits: {
+    [token: string]: {
+      display: string;
+      exponent: number;
+    };
+  };
+  endpoints: {
+    graphql?: string;
+    graphqlWebsocket?: string;
+    publicRpcWebsocket?: string;
+  };
+  marketing: {
+    matomoURL?: string;
+    matomoSiteID?: string;
+  };
+}
+
+export interface PaletteSettings {
+  primary: {
+    main?: string;
+    contractText?: string;
+  };
+  background: {
+    default?: string;
+    paper?: string;
+  };
+  divider?: string;
+  text: {
+    primary?: string;
+    secondary?: string;
+  };
+  custom: {
+    general: {
+      background?: string;
+      surfaceOne?: string;
+      surfaceTwo?: string;
+      surfaceThree?: string;
+      icon?: string;
+    };
+    fonts: {
+      fontOne?: string;
+      fontTwo?: string;
+      fontThree?: string;
+      fontFour?: string;
+      fontFive?: string;
+      highlight?: string;
+    };
+    primaryData: {
+      one?: string;
+      two?: string;
+      three?: string;
+      four?: string;
+    };
+    results: {
+      pass?: string;
+      fail?: string;
+    };
+    tokenomics: {
+      one?: string;
+      two?: string;
+      three?: string;
+    };
+    conditions: {
+      zero?: string;
+      one?: string;
+      two?: string;
+      three?: string;
+    };
+    charts: {
+      zero?: string;
+      one?: string;
+      two?: string;
+      three?: string;
+      four?: string;
+      five?: string;
+    };
+    tags: {
+      zero?: string;
+      one?: string;
+      two?: string;
+      three?: string;
+      four?: string;
+      five?: string;
+      six?: string;
+      seven?: string;
+      eight?: string;
+      nine?: string;
+      ten?: string;
+      eleven?: string;
+      twelve?: string;
+      thirteen?: string;
+      fourteen?: string;
+      fifteen?: string;
+      sixteen?: string;
+      seventeen?: string;
+      eighteen?: string;
+      nineteen?: string;
+      twenty?: string;
+    };
+    wallet: {
+      background?: string;
+      backgroundTwo?: string;
+      surfaceOne: string;
+      surfaceTwo: string;
+      surfaceThree: string;
+      surfaceFour: string;
+      surfaceFive: string;
+      divider?: string;
+      textPrimary?: string;
+      textSecondary?: string;
+      active?: string;
+      inactive?: string;
+    };
+  };
+}
+
+export interface ChainConfig extends ChainSettings {
+  chainName: string;
+  title: string;
+  extra: {
+    profile: boolean;
+    graphqlWs: boolean;
+    votingPowerExponent?: number;
+  };
+  basePath: string;
+  previewImage?: string;
+  themes: {
+    default: string;
+    themeList: Array<'dark' | 'light' | 'deuteranopia' | 'tritanopia'>;
+    dark: PaletteSettings;
+    light: PaletteSettings;
+  };
+  keplr: string | undefined;
+}

apps/web-nym/src/models/gov_params/index.ts

@@ -43,7 +43,7 @@ class GovParams {
           [],
           ['params', 'min_deposit'],
           data
-        ).map(x => ({
+        ).map((x) => ({
           denom: x.denom,
           amount: String(x.amount),
         })),

apps/web-nym/src/screens/home/components/data_blocks/hooks.ts

@@ -0,0 +1,107 @@
+import numeral from 'numeral';
+import { useState } from 'react';
+import chainConfig from '@/chainConfig';
+import {
+  ActiveValidatorCountQuery,
+  AverageBlockTimeQuery,
+  TokenPriceListenerSubscription,
+  useActiveValidatorCountQuery,
+  useAverageBlockTimeQuery,
+  useLatestBlockHeightListenerSubscription,
+  useTokenPriceListenerSubscription,
+} from '@/graphql/types/general_types';
+
+const { priceTokenUnit, tokenUnits } = chainConfig();
+
+type DataBlocksState = {
+  blockHeight: number;
+  blockTime: number;
+  price: number | null;
+  validators: {
+    active: number;
+    total: number;
+  };
+};
+
+const formatAverageBlockTime = (data: AverageBlockTimeQuery, state: DataBlocksState) =>
+  data.averageBlockTime[0]?.averageTime ?? state.blockTime;
+
+const formatTokenPrice = (data: TokenPriceListenerSubscription, state: DataBlocksState) => {
+  if (data?.tokenPrice[0]?.price) {
+    return numeral(numeral(data?.tokenPrice[0]?.price).format('0.0000', Math.floor)).value();
+  }
+  return state.price;
+};
+
+const formatActiveValidatorsCount = (data: ActiveValidatorCountQuery) => ({
+  active: data.activeTotal.aggregate?.count ?? 0,
+  total: data.total?.aggregate?.count ?? 0,
+});
+
+export const useDataBlocks = () => {
+  const [state, setState] = useState<DataBlocksState>({
+    blockHeight: 0,
+    blockTime: 0,
+    price: null,
+    validators: {
+      active: 0,
+      total: 0,
+    },
+  });
+
+  // ====================================
+  // block height
+  // ====================================
+
+  useLatestBlockHeightListenerSubscription({
+    onData: (data) => {
+      setState((prevState) => ({
+        ...prevState,
+        blockHeight: data.data.data?.height?.[0]?.height ?? 0,
+      }));
+    },
+  });
+
+  // ====================================
+  // block time
+  // ====================================
+  useAverageBlockTimeQuery({
+    onCompleted: (data) => {
+      setState((prevState) => ({
+        ...prevState,
+        blockTime: formatAverageBlockTime(data, state),
+      }));
+    },
+  });
+
+  // ====================================
+  // token price
+  // ====================================
+  useTokenPriceListenerSubscription({
+    variables: {
+      denom: tokenUnits?.[priceTokenUnit]?.display,
+    },
+    onData: (data) => {
+      setState((prevState) => ({
+        ...prevState,
+        price: data.data.data ? formatTokenPrice(data.data.data, state) : 0,
+      }));
+    },
+  });
+
+  // ====================================
+  // validators
+  // ====================================
+  useActiveValidatorCountQuery({
+    onCompleted: (data) => {
+      setState((prevState) => ({
+        ...prevState,
+        validators: formatActiveValidatorsCount(data),
+      }));
+    },
+  });
+
+  return {
+    state,
+  };
+};

apps/web-nym/src/screens/home/components/hero/hooks.ts

@@ -0,0 +1,52 @@
+import * as R from 'ramda';
+import { useCallback, useState } from 'react';
+import chainConfig from '@/chainConfig';
+import { useTokenPriceHistoryQuery } from '@/graphql/types/general_types';
+import type { HeroState } from '@/screens/home/components/hero/types';
+
+const { priceTokenUnit, tokenUnits } = chainConfig();
+
+export const useHero = () => {
+  const [state, setState] = useState<HeroState>({
+    loading: true,
+    exists: true,
+    tokenPriceHistory: [],
+  });
+
+  const handleSetState = useCallback((stateChange: (prevState: HeroState) => HeroState) => {
+    setState((prevState) => {
+      const newState = stateChange(prevState);
+      return R.equals(prevState, newState) ? prevState : newState;
+    });
+  }, []);
+
+  useTokenPriceHistoryQuery({
+    variables: {
+      limit: 48,
+      denom: tokenUnits?.[priceTokenUnit]?.display,
+    },
+    onCompleted: (data) => {
+      handleSetState((prevState) => {
+        const newState = {
+          ...prevState,
+          loading: false,
+          tokenPriceHistory:
+            data.tokenPrice.length === 48
+              ? [...data.tokenPrice].reverse().map((x) => ({
+                  time: x.timestamp,
+                  value: x.price,
+                }))
+              : prevState.tokenPriceHistory,
+        };
+        return R.equals(prevState, newState) ? prevState : newState;
+      });
+    },
+    onError: () => {
+      handleSetState((prevState) => ({ ...prevState, loading: false }));
+    },
+  });
+
+  return {
+    state,
+  };
+};

apps/web-nym/src/screens/params/hooks.ts

@@ -1,4 +1,3 @@
-import numeral from 'numeral';
 import * as R from 'ramda';
 import { useCallback, useState } from 'react';
 import chainConfig from '@/chainConfig';
@@ -7,7 +6,6 @@ import { DistributionParams, MintParams, SlashingParams, StakingParams, GovParam
 
 import type { ParamsState } from '@/screens/params/types';
 import { formatToken } from '@/utils/format_token';
-// import { GovParams } from './models';
 
 const { primaryTokenUnit } = chainConfig();
 

packages/ui/src/chainConfig/types.ts

@@ -11,7 +11,6 @@ export interface ChainSettings {
     account: string;
   };
   primaryTokenUnit: string;
-  priceTokenUnit: string;
   votingPowerTokenUnit: string;
   tokenUnits: {
     [token: string]: {

packages/ui/src/screens/home/components/data_blocks/hooks.ts

@@ -11,7 +11,7 @@ import {
   useTokenPriceListenerSubscription,
 } from '@/graphql/types/general_types';
 
-const { priceTokenUnit, tokenUnits } = chainConfig();
+const { primaryTokenUnit, tokenUnits } = chainConfig();
 
 type DataBlocksState = {
   blockHeight: number;
@@ -79,7 +79,7 @@ export const useDataBlocks = () => {
   // ====================================
   useTokenPriceListenerSubscription({
     variables: {
-      denom: tokenUnits?.[priceTokenUnit]?.display,
+      denom: tokenUnits?.[primaryTokenUnit]?.display,
     },
     onData: (data) => {
       setState((prevState) => ({

packages/ui/src/screens/home/components/hero/hooks.ts

@@ -4,7 +4,7 @@ import chainConfig from '@/chainConfig';
 import { useTokenPriceHistoryQuery } from '@/graphql/types/general_types';
 import type { HeroState } from '@/screens/home/components/hero/types';
 
-const { priceTokenUnit, tokenUnits } = chainConfig();
+const { primaryTokenUnit, tokenUnits } = chainConfig();
 
 export const useHero = () => {
   const [state, setState] = useState<HeroState>({
@@ -23,7 +23,7 @@ export const useHero = () => {
   useTokenPriceHistoryQuery({
     variables: {
       limit: 48,
-      denom: tokenUnits?.[priceTokenUnit]?.display,
+      denom: tokenUnits?.[primaryTokenUnit]?.display,
     },
     onCompleted: (data) => {
       handleSetState((prevState) => {